/*
=======================================================================
 Desktop Styles
=======================================================================
*/

html {scroll-behavior: smooth;}
body {width:100%; height:auto; font-family:Arial; font-size:20px; color:#333; margin:0; padding:0; text-align:center; background:#FFF;}
.content_container {position:relative; top:0; left:0; width:88%; max-width:1880px; height:auto; margin:0 auto; text-align:left; box-sizing:border-box;}
h1 {font-size:60px; margin:0; text-transform:uppercase;}
h2 {font-size:30px; margin-top:0; margin-bottom:25px; text-transform:uppercase;}
.leftimage {float:left; width:45%; height:auto; margin-right:50px; margin-bottom:10px;}
.rightimage {float:right; width:45%; height:auto; margin-left:50px; margin-bottom:10px;}
a.textlink {color:#333; font-weight:bold; text-decoration:none;}

/*
=======================================================================
 Top Navigation
=======================================================================
*/

#mobilenavigation, #mobilevisitor {display:none;}
#stickymenu {position:fixed; top:0; left:0; width:100%; height:150px; background:#FFF; box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.5); z-index:50;}
.logo {position:absolute; top:15px; left:0; width:20%; height:120px;}
.topnav {position:absolute; top:0; left:20%; width:80%; height:auto;}
#stickynav ul {text-align:right; margin:0; padding:0; list-style:none;}
#stickynav ul li {display:inline-block; position:relative; cursor:pointer; text-transform:uppercase; margin-left:-5px; text-align:left;}
#stickynav ul li a.nav {display:inline-block; color:#666; font-size:16px; font-weight:bold; text-decoration:none; padding:66px 45px 66px 45px; transition:all 0.3s ease 0s;}
#stickynav ul li a.nav:hover {background:#FFF; color:#333;}

/*
=======================================================================
 Hero Slider
=======================================================================
*/

#slider {position:relative; top:0; left:0; width:100%; height:680px; color:#FFF; background-image:url(images/header.jpg); background-repeat:no-repeat; background-position:center; text-shadow:2px 2px 2px #000; margin-bottom:60px;}
.slidertext {position:relative; top:0; left:0; width:100%; height:auto; text-align:center; padding-top:325px;}
#slider p {font-size:30px; font-weight:bold; text-align:center; margin-top:20px; margin-bottom:0; text-transform:none;}

/*
=======================================================================
 Main Content
=======================================================================
*/

#about, #residential, #commercial, #contact {position:relative; top:0; left:0; width:100%; height:auto; margin-bottom:60px;}
#contact p {line-height:40px;}

/*
=======================================================================
 Footer Section
=======================================================================
*/

#copyright {position:relative; top:0; left:0; width:100%; height:50px; text-align:center; font-size:15px; color:#FFF; background:#333; line-height:50px;}
#copyright a {color:#FFF; text-decoration:none;}

/*
=======================================================================
 Desktop 1024-1280
=======================================================================
*/

@media screen and (max-width:1279px)
{
	body {font-size:18px;}
	.content_container {width:94%;}
	h1 {font-size:50px;}
	h2 {font-size:25px;}
	#stickynav ul li a.nav {padding:66px 30px 66px 30px;}
	#slider p {font-size:25px;}
}

/*
=======================================================================
 Tablets 768-1024
=======================================================================
*/

@media screen and (max-width:1023px)
{
	body {font-size:16px;}
	.content_container {width:96%;}
	h1 {font-size:38px;}
	h2 {font-size:18px;}
	#stickynav ul li a.nav {padding:66px 15px 66px 15px;}
	#slider p {font-size:22px;}
}

/*
=======================================================================
 Mobile & Small Tablets
=======================================================================
*/
    
@media screen and (max-width:767px)
{
    body {font-size:15px;}
    h1 {font-size:40px;}
    h2 {font-size:18px; margin-bottom:15px;}
	
	.leftimage {width:100%; margin-right:0; margin-bottom:25px;}
	.rightimage {width:100%; margin-left:0; margin-bottom:25px;}

	#stickymenu {height:100px;}
	#stickymenu .logo {top:10px; left:20px; width:20%; height:80px;}
	#stickymenu .content_container {position:relative; width:100%; min-width:1px; max-width:767px; height:auto; text-align:left; margin:0 auto;}
	#stickymenu .topnav {position:absolute; top:100px; left:0; width:100%; height:auto;}
	#stickynav {display:none; background:#397DC0; max-height:calc(100% - 80px); overflow-x:hidden; overflow-y:scroll;}
	#stickynav {width:100%; min-width:1px; max-width:767px; margin:0;}
	#stickynav ul li {width:100%; margin:0; border-bottom:1px solid #CCC;}
    #stickynav ul li a.nav {width:100%; padding:15px 0 15px 10px; color:#FFF;}
    #stickynav ul li a.nav:hover {background:#000; color:#FFF;}

    #mobilenavigation {display:block; float:right; width:40px; height:40px; font-size:24px; line-height:40px; text-align:center; margin-top:30px; margin-right:20px; box-sizing:border-box;}
	#mobilenavigation a {display:block; width:100%; height:100%; background:#000; color:#FFF; text-decoration:none;}

	#slider {margin-bottom:30px;}
	#slider .slidertext {padding-top:275px;}
	#slider p {font-size:24px; margin-top:15px;}

	#about, #residential, #commercial, #contact {margin-bottom:30px;}
	#contact p {line-height:25px;}
	#copyright {font-size:13px;}
}