/* style sheet for Silver Oak */

body, html {
	height: 100%;
}

body {
	min-width: 320px;
	margin: auto;
	font-family: 'Noto Sans', sans-serif;
}

a:link, a:hover, a:active, a:visited, .grey {
	color: grey;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h2 {
	margin-top: 0;
}

#header, #main, #company, footer {
	width: 100%;
}

#header_interior, #main_interior, #company_interior, #footer_interior {
	width: 80%;
	max-width: 1150px;
	margin: auto;
	text-align: center;
}

#header {
	background: #fff url('assets/background.jpg') no-repeat top center ;
	background-size: cover 445px; /* at 445 height the width is 1229 */
	padding: 0.5em 0 5em 0;
	color: white;
	font-family: 'Bad Script','Monotype Corsiva', serif;
	font-size: x-large;
	text-shadow: 2px 2px 2px #000;
	font-weight: bold;
}

#header_interior {
	/*background: rgba(140, 140, 140, 0.5);*/
	border-radius: 20px;
	height: 350px
}

#header_interior img {
	width: 200px;
	height: 200px;
	border-radius: 150px;
	border: dashed 1px #ccc;
}

#main {
	/*border-top: dotted 1px grey;*/
	background: white;
}

#services {

}

.service {
	width: 25%;
	display: inline-block;
	margin: -6em 2% 2% 2%;
	padding: 1%;
	vertical-align: top;
	border-radius: 155px 155px 0 0;
	/*border-top: dotted 1px grey;*/
	background: white;
}

.service p {
	margin: 0;
	padding: 1px;
}

.service img {

	height: auto;
	background: white;
	margin-top: 10px;
}

.domContent {
	text-align: left;
	width: 65%;
	margin: auto;
	padding: 2%;
}

.triangle {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 12.5px 21.7px 12.5px;
	border-color: transparent transparent #13801a transparent;
	margin: 0 auto; /* centered by default */
}

.left {margin-left:0px;}
.right {margin-right: 0px;}

.line {
	border-top: solid 2px #13801a;
	margin: 0 0 2% 0;
}

#company {
	background: #272220;
}

#company_interior {
	color: white;
}

#company_interior aside {
	width: 25%;
	display: inline-block;
	text-align: left;
	margin: 2% 2%;
	padding: 1%;
	vertical-align: top;
}

#company_interior p, #submit {
	font-weight: 300;
	font-size: small;
}

#company_interior p.blurb {
	font-style: italic;
}

/* form styling */

#email {
	border-radius: 5px;
	background: rgba(80, 80, 80, 0.5);
	color: white;
	width: 90%;
}

#submit {
	margin: 5px 0;
	border-radius: 5px;
}

/* code to make the wavy line */
#main:after {
content: " ";
    display:block;
    position: relative;
top:0px;left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#FFFFFF 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -webkit-linear-gradient(#FFFFFF 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -o-linear-gradient(#FFFFFF 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -moz-linear-gradient(#FFFFFF 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #FFFFFF 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
    }
	
footer {
	background: black;

}

#footer_interior {
	background: black;
}	

#footer_interior p{
	color: white;
	margin: 0;
	padding: 1em;
	font-weight: 300;
	font-size: small;
}

/* Social Media Icons */
/*ul.socialwidget {float:left;}*/
ul.socialwidget {
	padding: 0;
}

ul.socialwidget li {
	float:left;
	list-style: none outside none;
	border:none;
}
ul.socialwidget li a{
	background-color:transparent;
	background-image:url('assets/socialsprite.png');
	background-repeat:no-repeat;
	background-size:auto 96px;
	border:0 none;
	color:white;
	direction:ltr;
	display:block;
	height:33px;
	overflow:hidden;
	text-align:left;
	text-decoration:none;
	text-indent:-999em;
	transition:all 0.2s ease 0s;
	width:32px;
}
.ie7 ul.socialwidget li a, .ie8 ul.socialwidget li a{background-image:url('assets/socialsprite.png' )}
ul.socialwidget li.facebook a{ background-position:0 0}
ul.socialwidget li.flickr a{ background-position:-32px 0}
ul.socialwidget li.dribbble a{ background-position:-64px 0}
ul.socialwidget li.googleplus a{ background-position:-96px 0}
ul.socialwidget li.linkedin a{ background-position:-128px 0}
ul.socialwidget li.pinterest a{ background-position:-160px 0}
ul.socialwidget li.rss a{ background-position:-192px 0}
ul.socialwidget li.skype a{ background-position:-224px 0}
ul.socialwidget li.twitter a{ background-position:-256px 0}
ul.socialwidget li.vimeo a{ background-position:-288px 0}
ul.socialwidget li.youtube a{ background-position:-320px 0}

ul.socialwidget li.facebook a:hover { background-position:0 -32px}
ul.socialwidget li.flickr a:hover { background-position:-32px -32px}
ul.socialwidget li.dribbble a:hover { background-position:-64px -32px}
ul.socialwidget li.googleplus a:hover { background-position:-96px -32px}
ul.socialwidget li.linkedin a:hover { background-position:-128px -32px}
ul.socialwidget li.pinterest a:hover { background-position:-160px -32px}
ul.socialwidget li.rss a:hover { background-position:-192px -32px}
ul.socialwidget li.skype a:hover { background-position:-224px -32px}
ul.socialwidget li.twitter a:hover { background-position:-256px -32px}
ul.socialwidget li.vimeo a:hover { background-position:-288px -32px}
ul.socialwidget li.youtube a:hover { background-position:-320px -32px}

/* Media Queries */

/* tablet+small screen 800x600*/
 @media (max-width: 800px) {
		#header_interior, #main_interior, #company_interior, #footer_interior {width: 100%;}
}

/* phone+small tablet <600 */
		 @media (max-width: 600px) {
		 
		 
		#header {
			background: #fff;
			background-size: auto;
			padding: 0.5em 0 0 0;
		}

		#header_interior {
			height: auto;
		}

		#header_interior img {
			width: 200px;
			height: 200px;
			border-radius: 150px;
			border: none;
			margin: auto auto 1em auto;
		}

		#header_interior p {
			display: none;
		}



		.service {
			font-size: xx-small;
			display: inline-block;
			margin: auto;
			border-radius: 0;
		}

		.service p {display:none;}
		 
		 
		 #company_interior aside {
			width: 80%;
			display: block;
			text-align: left;
			margin: auto;
		}
		 
 }
 
 /* Phones and tiny screens <450 */
@media (max-width: 450px) {
		.extra {display:none;}

		.domContent {
			width: 80%;
			padding: 5px;
			font-size: small;
		}
	
}