@import url('reset.css');

html, body { margin:0; }
body { font-family: 'Lato', sans-serif; font-size:15px; color:#6D6E71; }
img { max-width:100%; height:auto; }

.wrapper { width:100%; max-width:1050px; max-width:875px; margin:0 auto; }

a { color:#F9BF12; text-decoration:none; }
h1 { font-weight:300; margin: 0 0 40px; font-size:45px; line-height:50px; }
h2 { text-transform:uppercase; font-size:20px; line-height:28px; color:#A8AAAA; margin-bottom:8px; }

#page { position:relative; margin:0; padding:0 0 130px; }
#header { background:#fff;  padding:20px 0;}
#logo { float:left; display:inline-block; height:60px; }
#header .wrapper { position:relative; }
#menu { float:right; display:inline-block; width:50%; position: absolute; bottom:0; right:0; 
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#menu ul { display:block; margin:0; padding:0; text-align:right; list-style-type:none; }
#menu li { display:inline-block; }
#menu a { display:block; padding:0 0 0 25px; color:#6D6E71; text-decoration:none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-transform:uppercase; font-size:16px; line-height:16px; font-weight:300; letter-spacing:1px;
}
#menu a:hover { color:#F9BF12; text-decoration:none; }

.circle { background:#F9BE10; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%;  
color:#fff;
position: absolute; right:36%; width:175px; height:175px; top:-9px;
 -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.circle-table { display:table; vertical-align:middle; width:100%; height:100%; }
.circle-cell { display:table-cell; vertical-align:middle; width:100%; text-align:center; color:#fff; font-weight:700; color:#fff; font-size:19px; line-height:29px; }
.circle-cell a { display:block; color:#58585A; text-decoration:none; font-size:24px;}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color:#fff;
    z-index: 1000;
    height: 60px;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;

}
#header.header.shrink {
    height: 45px;
	padding:10px 0;
	overflow:hidden;
}
.header #logo
{
	
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.header.shrink #logo
{	
	height:45px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.header.shrink .circle { position:relative; float:right; height:65px; margin-top:-10px; top:auto; right:auto; 
-webkit-border-radius: 0; 
-moz-border-radius: 0; 
border-radius: 0; 
}
.header.shrink .circle .circle-cell { font-size:18px; line-height:26px; }
.header.shrink .circle .circle-cell a { font-size:23px; }
.header.shrink #menu { position:relative; bottom: auto; top:auto; float:right; margin-right:20px; margin-top:13px; }


#intro { margin-top:100px; }
#intro-section { background:#58585A; color:#fff; padding:20px 50px 65px; }
.services { list-style-type:none; margin:0; padding:0; width:100%; display:block; }
.services li { display:inline-block; margin:0; padding:0 7px 0 5px; font-weight:700; color:#fff; border-right: 2px solid #F9BF12; font-size:12px; line-height:12px; letter-spacing:1px; }
.services li:first-child { padding-left:0; }
.services li:last-child { padding-right:0; border-right:0; }

.title { background:#F9BF12; padding:30px 50px; text-align:left; font-weight:300; font-size:45px; line-height:55px; color:#fff; }

#about-section { background:#727371; color:#fff; }
#about-section img { float:right; display:inline-block; width:28%; margin: 0; padding:0; }
#about-section p { display:inline-block; padding:40px 50px 0; margin:0; float:left; display:inline-block; width:60%; font-weight:300; font-size:19px; line-height:28px; }


#faq-section { background:#fff; }
.faq-right { float:right; display:inline-block; width:28%; padding-top:95px; }
.faq-left { float:left; display:inline-block; width:58%; padding:50px 10px 30px 50px; }
.faq-left p { font-weight:300; font-size:19px; line-height:24px; margin-bottom:30px; }
.faq-left p strong { font-weight:900; }
.faq-right { color:#F9BE10; font-weight:700; font-size:19px; letter-spacing:1px; line-height:28px; }
.faq-right strong { color:#727371; font-size:16px; line-height:19px; display:block; margin-top:5px; }
.faq-right span { color:#F9BF12; }


#contact-section { background:#727371; color:#fff;  padding:50px 50px 100px; font-weight:700; font-size:19px; line-height:26px; }
#contact-section span { color:#BCB9B8; }
#contact-section a { font-size:27px; }

#footer { background:#58585A; padding:50px; color:#fff; }

.clear {clear:both;}
 .stretch,
    .clear {
        clear: both;
        height: 1px;
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1px;
    }
    .clearfix:after {
        clear: both;
        height: 0;
        display: block;
        visibility: hidden;
        content: ".";
    }
    .clearfix {display:inline-block;}
    /* Hide from IE Mac \*/
    .clearfix {display:block;}
    /* End hide from IE Mac */
	
	
@media screen and (max-width: 1060px) {
	.wrapper { max-width:90%; }
	.circle { right:35%; }
	h1 { font-size:45px; line-height:52px; }
	h2 { font-size:22px; line-height:30px; }
	.services li { font-size:13px; line-height:13px; }
	.title { font-size:45px; }
	#about-section p { font-size:20px; padding:30px 50px 0; }
	.faq-right { font-size:21px; line-height:29px; }
	.faq-right strong { font-size:17px; }
}

@media screen and (max-width: 990px) {
	/*  ipad */
	
	#menu { width:35%; }
	#menu ul a { font-size:16px; padding: 0 15px 0 0px; }
	.services li { font-size:11px; line-height:11px; }
	#header {
    height: 45px;
	padding:10px 0;
	overflow:hidden;
	}

	#header #logo
	{	
		height:45px;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}
	#header .circle { position:relative; float:right; height:65px; margin-top:-10px; top:auto; right:auto; 
	-webkit-border-radius: 0; 
	-moz-border-radius: 0; 
	border-radius: 0; 
	}
	#header .circle .circle-cell { font-size:18px; line-height:26px; }
	#header .circle .circle-cell a { font-size:23px; }
	#header #menu, .header.shrink #menu { position:relative; bottom: auto; top:auto; float:right; width:45%; padding-top:11px;  margin-right:0; margin-top:0;}
	#intro { margin-top:65px; }
	#about-section p { padding:30px; }
	#contact-section br { display:none; }
	#contact-section a { margin:15px 0; display:block; }


}


@media screen and (max-width: 840px) {
	.circle { width:175px; }
}
	
@media screen and (max-width: 767px) {
	/*  small tablet */

	#header .circle, #header.shrink .circle { float:none; display:block; width:100%; height:40px; margin:0; position: absolute; bottom:0; left:0; }
	#header .wrapper { height:100%; }
	.circle a { display:inline-block; }
	#header #menu { position: absolute; right:0; top:0; padding-top:14px; width:55%; }
	#header, #header.header.shrink { height:95px; }
	#header .circle .circle-cell a { font-size:18px; margin-right:10px; }
	.header.shrink #menu { margin:0; }
	h1 { font-size:32px; line-height:40px; }
	h1 br { display:none; }
	h2 { font-size:20px; }
	.faq-left, .faq-right { float:none; display:block; width:90%; margin: 0 auto; }
	.faq-left, .faq-right { padding:30px 0; width:95%; }
	#intro-section, #about-section p, #contact-section { padding:20px 30px; }
	.faq-left p { font-size:20px; }
	.faq-left { padding-bottom:0; }
	.title { padding:30px 30px; }
	#menu ul a { font-size:13px; padding: 0 11px 0 0px; }
	ul.services li { display:block; width:100%; margin:4px 0; padding:0; border:0; text-align:center; }
	#about-section img { float:none; display:block; width:100%; margin: 0 auto; }
	#about-section p { float:none; display:block; width:80%; }
}

@media screen and (max-width: 479px) {
	/*  iphone */

	#header #menu { display:block; float:none; width:100%; text-align:left; position:relative; right:auto; top:auto; }
	#header #menu ul { text-align:left; }
	#header .circle, #header.shrink .circle { top:0; bottom:auto; right:0; width:50%; left:auto; height:auto; padding:5px 0; }
	#header .circle a { display:block; margin:0 auto; width:100%; }
	#logo, #header #logo, #header.shrink #logo { float:none; display:block; height:auto; width:45%; }
	#header .circle .circle-cell { font-size:16px; line-height:19px; }
	#header, #header.header.shrink { height:120px; height:auto; }
	#intro { margin-top:85px; }
	
	#contact-section { font-size:20px; line-height:26px; }
	
	h1 { font-size:23px; line-height:31px; margin-bottom:25px; }
	h1 br { display:none; }
	h2 { font-size:14px; margin-bottom:25px; }
	.title { font-size:33px; padding:20px 30px; }
	.faq-right { font-size:19px; line-height:27px; }
	#menu ul a { font-size:13px; padding: 6px 15px 0 0px; }
	#intro-section, .title { padding:20px; }
}