/* 
	Title:		Master styles for screen media
	Author: 	Laurence Knutsen
*/

html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
  	-moz-osx-font-smoothing: grayscale; /* Firefox */
}	

body {
	font-family: 'Work Sans', sans-serif;
	background-color: #fcf7f1;
	color: #222;	
}


/* fonts */

a {
	color: #0088cc;
	text-decoration: none;
}

a:hover {
	color: #336699;
	text-decoration: underline;
}

p {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	line-height: 1.5;
}

@media screen and (min-width: 600px) {
	p {
		font-size: 1.25rem;
	}
}

h1 {
	font-family: 'Cormorant', serif;
	font-size: 2rem;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0;
	line-height: 1.2;
}

@media screen and (min-width: 830px) {
	h1 {
		font-size: 3rem;
	}
}

h1 a:hover {
	text-decoration: none;
}

h2 {
	margin: 2rem 0 2rem 0;
	font-family: 'Cormorant', serif;
	font-size: 2.5rem;
	line-height: 1.2;
}

@media screen and (min-width: 600px) {
	h2 {
		font-size: 4rem;
	}
}

header h2 {
	font-size: 1.25rem;
	margin: 0 0 0 3.5rem;
	color: #9d4a2a;
}

@media screen and (min-width: 830px) {
	header h2 {
		font-size: 2rem;
		margin: 0 0 0 4.75rem;
	}
}



h3 {
	margin: 2rem 0 1.5rem 0;
	font-family: 'Cormorant', serif;
	font-size: 2rem;
	line-height: 1.3;
}

@media screen and (min-width: 600px) {
	h3 {
		font-size: 3rem;
	}
}


ul {
	margin: 0 0 3rem 2rem;
	padding: 0; 
}

@media screen and (min-width: 700px) {
	ul.wide-list {
  		-webkit-columns: 2;
    	-moz-columns: 2;
   		columns: 2;
	}
}

@media screen and (min-width: 1000px) {
	ul.wide-list {
  		-webkit-columns: 3;
    	-moz-columns: 3;
   		columns: 3;
	}
}

li {
	margin: 0 0 1rem 0;
	font-size: 1.125rem;
	line-height: 1.4;
}

@media screen and (min-width: 600px) {
	li {
		font-size: 1.25rem;
	}
}







header {
	border-bottom: solid 2px #f1e1c8;
    padding: 10px 0;
    background-color: #fcf7f1;
    max-width: 1600px;
    width: 100%;
   	overflow: auto;
    margin: 0 auto;
}

@media screen and (min-width: 830px) {
	header  {
    	padding: 20px 0;
 	}
 }

#logo {
	float: left;
	margin: 0 5%;
}

header ul {
	float: left;
	margin: 10px 5% 0 5%;
	clear: left;
}


@media screen and (min-width: 600px) {
	header ul  {
 		float: right;
 		margin: 15px 5%;
 		clear: none;
 	}
 }

@media screen and (min-width: 830px) {
	header ul  {
 		margin: 30px 5%;
 	}
 }     



header ul li {
	display: inline-block;
	margin-bottom: 10px;

}

header a {
	color: #9b7626;
}

header ul li a {
	color: #000000;
 	text-decoration: none;
	padding: 0 10px 0 0;
	font-size: 1.125rem;
}

@media screen and (min-width: 830px) {
	header ul li a {
		padding: 0 20px 0 0;
		font-size: 1.25rem;
	}
}		

header ul li a:hover {
	color: #0088cc;
	text-decoration: none;
}






img {
	margin: 3rem 0;
}

#container {
	margin: 0 auto;
	max-width: 1600px;
	width: 100%;
}

.welcome {
	margin-top: 40px;
	margin-bottom: 0;
	margin-left: 5%;
	margin-right: 5%;
}


@media screen and (min-width: 600px) {
	.welcome  {
	margin-top: 80px;
	max-width: 920px;
	margin-bottom: 60px;
	margin-left: 5%;
	font-size: 3rem;
	}
}













img {
	width: 100%;
}




















.content {
	padding: 5% 5%;
	margin: 0 auto;
	width: 90%;
	max-width: 1000px;
	}


#xsection-2 {
			padding: 50px 0 0 0;
			xmargin-top: -30px;
}	

#xsection-3 {
			padding: 110px 0 0 0;
			smargin-top: -50px;
}

#xsection-4 {
			padding: 110px 0 0 0;
}

#xsection-5 {
			padding: 100px 0 0 0;
}







.contact-phone {
	font-size: 1.5rem;
	background: url("../img/phone-icon.png") no-repeat 0 0;
	padding-left: 44px;
	background-size: 40px 40px;
	margin-top: 30px;
}

.contact-phone a:hover {
	text-decoration: none;
}

.button {
	background-color: #0088cc;
	border-radius: 3px;
	color: #ffffff;
	padding: 10px 25px;
	font-weight: normal;
	margin: 20px 0;
	display: inline-block;
	font-size: 1.125rem;
}

.button:hover {
	background-color: #336699;
	color: #ffffff;
	text-decoration: none;
}



.profile {
	width: 150px;
	float: left;
	margin: 6px 20px 10px 0;
	border: solid 2px #f1e1c8;
	padding: 7px;
	background-color: #fcf7f1;
}

@media screen and (min-width: 600px) {
	.profile {
		width: 250px;
		float: left;
		margin: 8px 60px 30px 0;
		border: solid 2px #f1e1c8;
		padding: 10px;
		background-color: #fcf7f1;
	}
}

.bacp {
	width: 200px;
	margin-top: 0;
}

.arm {
	width: 150px;
	padding: 10px;
	background-color: #ffffff;
	border: solid 1px #e1deda;
	margin-top: 0;
}



footer {
	background-color: #e1deda;
	width: 100%;
	margin: 50px 0 0 0;
	padding: 1rem 0;
}

footer p {
	text-align: center;
	margin: 0;
	font-size: 0.875rem;
	color: #706f6f;
}