/*  ----------

This website, the CSS styling, and all other coding and design has been created by Byron Carr, Graphic & Digital Media Designer, for Jasmin Scanlan, Oak Tree Psychology. All rights to this design are reserved, and the design in copyrighted.

My portfolio and contact details can be found online at www.byroncarr.com

---------- /*

/* RESPONSIVE STYLES */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) {

/* Wrapper */
.wrapper {
	width: 300px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
#header {
	background-color: #F8F8F8;
	margin: 0px;
	width: 100%;
	color: #000;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 0px;
	float: left;
	text-align: center;
}

/* Navigation bar */
.navigationbar {
	line-height: 24px;
	text-align: center;
}
ul#navbar {
	display: inline;
	padding: 0;
}
ul#navbar li {
	display: inline-block;
	width: 300px;
	height: 30px;
}
.navigationlink {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: #666;
}
.navigationlink:hover {
	color: #17a15b;
	-o-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-khtml-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}

/* Collumns */
.spanone {
	float: left;
	width: 300px;
	padding-bottom: 20px;
}
.spantwo {
	float: left;
	width: 300px;
	padding-bottom: 20px;
}
.spanthree {
	float: left;
	width: 300px;
	padding-bottom: 20px;
}
.spanfour {
	float: left;
	width: 300px;
	padding-bottom: 20px;
}
.spanfive {
	float: left;
	width: 300px;
	padding-bottom: 20px;
}
.spansix {
	float: left;
	width: 300px;
	padding-bottom: 20px;
}
.spantwoheader {
	float: left;
	width: 100%;
	padding-bottom: 20px;
}
.spanfourheader {
	float: left;
	width: 100%;
}

/* Spacing */
.padright {
	padding-right: 0px;
}
.padleft {
	padding-left: 0px;
}
.padtop {
	padding-top: 10px;
}
.padbottom {
	padding-bottom: 10px;
}
.nopadbottom {
	padding-bottom: 0px;
}
.margintop {
	margin-top: 10px;
}
.marginbottom {
	margin-bottom: 10px;
}
.center {
	text-align: left;
}

/* Map */
.fluid-wrapper {
	width:100%;
	height: 400px;
	float: left;
	background-color: #CCC;
}
.fluid-wrapper iframe {
    width: 100%;
    height: 100%;
	border: solid 1px #FFFFFF;
}

/* Margin for Home page */
.marginhometop {
	margin-top: 0px;
}
.marginhomebottom {
	margin-bottom: 0px;
}
.spanblock {
	width: 300px;
	text-align: center;
	margin-top: 12px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
}
.phone {
	width: 30px;
	height: 30px;
	padding-right: 0px;
	padding-bottom: 6px;
}
.large {
	font-size: 24px;
	line-height: 32px;
}

/* Hide/Show */
.showlarge {
	visibility: hidden;
	display: none;
}
.showsmall {
	visibility: visible;
	display: block;
}

}

/* Tablets ----------- */
@media only screen and (min-width : 758px) {

/* Wrapper */
.wrapper {
	width: 722px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 18px;
	padding-bottom: 0px;
	padding-left: 18px;
}
#header {
	background-color: #F8F8F8;
	margin: 0px;
	width: 100%;
	color: #000;
	padding-top: 24px;
	padding-right: 0px;
	padding-bottom: 36px;
	padding-left: 0px;
	float: left;
	text-align: center;
}

/* Navigation bar */
.navigationbar {
	text-align: center;
}
ul#navbar {
	display: inline;
}
ul#navbar li {
	display: inline;
	padding-left: 24px;
}
.navigationlink {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: #666;
}
.navigationlink:hover {
	color: #17a15b;
	-o-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-khtml-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}

/* Collumns */
.spanone {
	float: left;
	width: 105px;
	padding-bottom: 20px;
}
.spantwo {
	float: left;
	width: 228px;
	padding-bottom: 20px;
}
.spanthree {
	float: left;
	width: 351px;
	padding-bottom: 20px;
}
.spanfour {
	float: left;
	width: 474px;
	padding-bottom: 20px;
}
.spanfive {
	float: left;
	width: 597px;
	padding-bottom: 20px;
}
.spansix {
	float: left;
	width: 722px;
	padding-bottom: 20px;
}
.spantwoheader {
	float: left;
	width: 100%;
	padding-bottom: 0px;
}
.spanfourheader {
	float: left;
	width: 100%;
}

/* Spacing */
.padright {
	padding-right: 18px;
}
.padleft {
	padding-left: 18px;
}
.padtop {
	padding-top: 18px;
}
.padbottom {
	padding-bottom: 18px;
}
.nopadbottom {
	padding-bottom: 0px;
}
.margintop {
	margin-top: 18px;
}
.marginbottom {
	margin-bottom: 18px;
}
.center {
	text-align:center;
}

/* Map */
.fluid-wrapper {
	width:100%;
	height: 416px;
	float: left;
	background-color: #CCC;
}
.fluid-wrapper iframe {
    width: 100%;
    height: 100%;
	border: solid 1px #FFFFFF;
}

/* Margin for Home page */
.marginhometop {
	margin-top: 0px;
}
.marginhomebottom {
	margin-bottom: 0px;
}
.spanblock {
	width: 350px;
	text-align: center;
	margin-top: 24px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
}
.phone {
	width: 65px;
	height: 65px;
	padding-right: 18px;
}
.large {
	font-size: 32px;
	line-height: 42px;
}

/* Hide/Show */
.showlarge {
	visibility: visible;
	display: block;
}
.showsmall {
	visibility: hidden;
	display: none;
}

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 960px) {

/* Wrapper */
.wrapper {
	width: 924px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 18px;
	padding-bottom: 0px;
	padding-left: 18px;
}
#header {
	background-color: #F8F8F8;
	margin: 0px;
	width: 100%;
	color: #000;
	padding-top: 24px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
	float: left;
}

/* Navigation bar */
.navigationbar {
	height: 96px;
	line-height: 96px;
	text-align: right;
}
ul#navbar {
	display: inline;
}
ul#navbar li {
	display: inline;
	padding-left: 24px;
}
.navigationlink {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	color: #666;
}
.navigationlink:hover {
	color: #17a15b;
	-o-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-khtml-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}

/* Collumns */
.spanone {
	float: left;
	width: 139px;
}
.spantwo {
	float: left;
	width: 296px;
	padding-bottom: 20px;
}
.spanthree {
	float: left;
	width: 453px;
}
.spanfour {
	float: left;
	width: 610px;
}
.spanfive {
	float: left;
	width: 767px;
}
.spansix {
	float: left;
	width: 924px;
}
.spantwoheader {
	float: left;
	width: 296px;
	padding-bottom: 20px;
}
.spanfourheader {
	float: left;
	width: 610px;
}

/* Spacing */
.padright {
	padding-right: 18px;
}
.padleft {
	padding-left: 18px;
}
.padtop {
	padding-top: 18px;
}
.padbottom {
	padding-bottom: 18px;
}
.nopadbottom {
	padding-bottom: 18px;
}
.margintop {
	margin-top: 18px;
}
.marginbottom {
	margin-bottom: 18px;
}
.center {
	text-align:center;
}

/* Map */
.fluid-wrapper {
	width:100%;
	height: 500px;
	float: left;
	background-color: #CCC;
}
.fluid-wrapper iframe {
    width: 100%;
    height: 100%;
	border: solid 1px #FFFFFF;
}

/* Margin for Home page */
.marginhometop {
	margin-top: 36px;
}
.marginhomebottom {
	margin-bottom: 48px;
}
.spanblock {
	width: 350px;
	text-align: center;
	margin-top: 24px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 36px;
}
.phone {
	width: 65px;
	height: 65px;
	padding-right: 18px;
}
.large {
	font-size: 32px;
	line-height: 42px;
}

/* Hide/Show */
.showlarge {
	visibility: visible;
	display: block;
}
.showsmall {
	visibility: hidden;
	display: none;
}

}

/* ALL LAYOUTS SUITABLE STYLES */

/* General wrappers and layout */
body {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 300;
	color: #FFF;
	background-color: #191919;
	margin: 0px;
	padding: 0px;
	line-height: 28px;
}
#content {
	padding-top: 36px;
	padding-bottom: 24px;
	float: left;
	background-color: #242b0a;
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	width:100%;
}
#contentdark {
	padding-top: 36px;
	padding-bottom: 24px;
	float: left;
	background-color: #435410;
	background-image: url(../images/background-dull.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	width:100%;
}
#office {
	padding-top: 36px;
	padding-bottom: 24px;
	float: left;
	background-color: #060;
	background-image: url(../images/office.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
	width:100%;
}
#footer {
	margin: 0px;
	width: 100%;
	padding-top: 36px;
	padding-right: 0px;
	padding-bottom: 24px;
	padding-left: 0px;
	color: #CCC;
	float: left;
}
#dev {
	background-color: #900;
	margin: 0px;
	width: 100%;
	padding-top: 12px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
	color: #CCC;
	float: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
}

/* Image slider */
#slider {
	width: 100%;
	height: inherit;
	overflow: hidden;
	margin: 0;
	padding: 0;
	padding-bottom: 0px;
	font-size: 0;
	line-height: 0;
	box-sizing:border-box;
	border: 10px solid #FFF;
}

/* Text styling */
p {
	padding: 0px;
	padding-bottom: 12px;
	margin: 0px;
	line-height: 24px;
}
h1 {
	font-family: 'Lato', sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 3px;
	margin-bottom: 24px;
}
h2 {
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 21px;
	font-weight: normal;
	padding-bottom: 0px;
	margin-bottom: 12px;
	margin-top: 0;
	padding-top: 0;
}
.uppercase {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
}
.grey {
	color: #666;
	text-decoration: none;
}
.greylink:link {
	color: #666;
	text-decoration: none;
}
.greylink:visited {
	color: #666;
	text-decoration: none;
}
.greylink:active {
	color: #666;
	text-decoration: none;
}
.greylink:hover {
	color: #999;
	text-decoration: none;
	-o-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-khtml-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.lightgreylink:link {
	color: #CCC;
	text-decoration: none;
}
.lightgreylink:visited {
	color: #CCC;
	text-decoration: none;
}
.lightgreylink:active {
	color: #CCC;
	text-decoration: none;
}
.lightgreylink:hover {
	color: #FFF;
	text-decoration: none;
	-o-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-khtml-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.learnmore:link {
	color: #FFF;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
}
.learnmore:visited {
	color: #FFF;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
}
.learnmore:active {
	color: #FFF;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
}
.learnmore:hover {
	color: #CCC;
	-o-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-khtml-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.nopad {
	padding: 0;
}
ul {
	margin-top: 0;
	padding-top: 0;
}
ol {
	margin-top: 0;
	padding-top: 0;
}
li {
	margin-bottom: 6px;
	line-height: 24px;
}

/* Image styling */
img {
	height: inherit;
	max-width: 100%;
}
.subheading {
	padding-top: 0px;
}
.border {
	border: solid 1px #FFFFFF;
}

/* Phone Numbers */
a[href^=tel]{
    color:inherit;
    text-decoration:none;
}