/* ********************* GENERAL ********************* */

.bgc{background:orange;}
.mobileOnly{display:none;}
.notMobile{display:block;}

body{
    font-family: 'Lato', sans-serif;
    color: #47a3da;
}
h1, h2, h3, h4, h5, h6, p, a, li{font-family: 'Lato', sans-serif;}

.pageWrap{clear:both; width:100%; position:relative; top:100px; top:0px;}
section{clear:both; width:100%;}

a{color:#0075B5;}

.main > section:nth-child(2n) {
    background: #3A91C1;
    color: #fff;
}

.main section > div {
    padding: 2.875em 1.875em 2.875em;
}

div.toHere{clear:both; display:block; width:100%; height:0px; margin:0; padding:0; position: relative; top: -50px; }
span.toHere{clear:both; display:block; width:100%; height:0px; margin:0; padding:0; position: relative; top: -50px; }

/* ********************* NAVIGATION ********************* */

.top-bar{width:100%; position:fixed; z-index:500;}


.cbp-af-header .cbp-af-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 1.875em;
}

.cbp-af-header {	
	background-image: url(../img/banner-1.jpg);
        background-position: center center;
        background-repeat: none;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;	
    background-color: #03111c;
}

.cbp-af-header nav a.selected{color:#e85017;}

.cbp-af-header nav a:hover{color:#e85017;}

/* ********************* HERO CONTENT ********************* */
.hero{ margin: 0 0 50px 0;   }
h1.myName{
    clear:both;
    max-width:100%;
    margin:0 auto;
    font-size: 7vw;
    padding:0;
    color:#0075B5;
    text-align:center;
}
.container > header{padding: 50px 1.875em 120px;}
.container > header h1 {    
    margin: 2em 0 0.6em 0;
    /*text-align:center;*/
}



header.openingStatement,
p.lowerStatement{text-align:center;}


.cbp-af-header h1 {
	/*text-transform: uppercase;*/
	color:#0075B5; color: #ffffff;
	letter-spacing: 4px;
	font-size: 4.5vw;
        font-family: 'Lato', sans-serif;
        font-weight:700;
	margin: 0;
        /*padding:30px 0;*/
	float: left;
        letter-spacing:8px;
        /*line-height:1;*/
}
.cbp-af-header h1 a{color:#ffffff;}



/* ********************* MAIN CONTENT ********************* */
.mainContent{
    Width:90%;
    max-width:1000px;
    margin: 0 auto;
    text-align:center;
}
.mainContent h2{
    max-width:100%;
    margin:0 auto 30px auto;
    /*font-size: 24px;*/
    padding:0;
    color:#0075B5;
    text-align:center;
}
.main p{font-family: 'Lato', sans-serif;}

section.recentWork{
    float: left;
    margin-top:0px;
    background:#0A4768 !important; background: #3A91C1 !important;
}

section.services a{color:#ffffff; text-decoration:underline; }
section.services a:hover{color:#e85017; text-decoration:none;}

section.faq a{color:#47a3da; text-decoration:underline;}
section.faq a:hover{color:#e85017; text-decoration:none;}

/* ********************* PROJECTS ********************* */
.projectWrap {
        float: left;
        height: auto;
        min-height: 700px;
        padding-top: 50px;
        padding-bottom: 50px;
        background: #3A91C1;
    }
    .projectWrap h4{font-size:25px;}
    
    .projectWrap h1,
    .projectWrap h2,
    .projectWrap h3,
    .projectWrap h4,
    .projectWrap p,
    .projectWrap li,
    .projectWrap a {
        color: #ffffff;
    }
    .projTitleWrap{width: 80%;}
    h1.projectTitle {
        width: 100%;
        text-align:left;
    }
    .backToWrap{float: right; width: 20%; margin-top: 80px;}
    a.backTo {
        /*float: right;
        width: 20%;*/
        text-align: right;
        margin-top: 80px;
        font-size: 20px;
    }
    .projectWrap .proj-L p {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 25px 25px 0;
        font-size: 20px;
    }
    .proj-L,
    .proj-R {
        float: left;
        display: block;
        min-height: 400px;
        padding-top: 30px;
    }
    .proj-R img {
        float: right;
        max-width: 80%; max-width: 100%;
        padding: 0;
    }
    a.visitSite {
        clear: both;
        float: right;
        margin-top:20px; margin-top: 40px;
    }
    .proj-L a:hover,
    a.visitSite:hover {
        text-decoration:underline;
    }


/* ********************* FOOTER********************* */
footer{ clear: both;  padding-bottom:30px; padding-top: 30px; background:#0A4768; }
footer ul{
    max-width:100%;
    margin:30px auto;
    list-style:none;
    text-align:center;
}
footer ul li{ color:#ffffff; font-size: 2vw;}



/* ********************* RESPONSIVENESS ********************* */

@media(max-width:1152px) {
    .cbp-af-header h1 {
	/*text-transform: uppercase;*/
	/*color:green; */	
	font-size: 3.5vw;
        letter-spacing:6px;        
    }
}

@media(max-width:1024px) {
    section.recentWork ul{line-height:1.2;}
}



@media(max-width:915px) {
    .cbp-af-header h1, .cbp-af-header nav a {
    line-height: 100px;
    }
    .cbp-af-header nav {
    float: left;
    }
    .main section p {padding-left:0; padding-right:0;}       
    .container > header.aProject {
	    width: 100%;
	    padding-bottom: 40px;
	}
    .projTitleWrap{width:100%;}
    .container > header.aProject h1{ margin-top:0px; font-size: 30px; text-align: left;  }
    .backToWrap{clear:both; float: left; width: 100%; margin-top: 0px;}
    a.backTo {text-align: leftt;}
    section.services h2{font-size:30px;}
    section.services p{padding:0; font-size:18px;}
    section.services p:last-child{padding-top:80px; padding-bottom:40px; font-size:24px;}
    section.faq{margin-top:0; padding-top:0;}
    section.faq div{ padding-top:0 !important;}
    section.faq p.someQuestions{ padding-top:0; font-size:30px;}
     
}

@media(max-width:768px) {
    .cbp-af-header h1 {	
	color:#ffffff;
        font-size: 4vw;
    }
    .cbp-af-header nav{clear:both; width:100%; }
    footer ul li{font-size: 1rem;}
}

@media (max-width: 480px) {
    .mobileOnly{display:block;}
    .notMobile{display:none;}
    .container > header {width: 100%; padding-top: 0px; padding-bottom:60px;  }    
    .container > header h1 {margin-top: 0; font-size: 1.3em; }
    .container > header.aProject h1{ font-size: 24px;}
    .container > header.servicePage h1 { text-align: left;}
    .cbp-af-header {height: 130px; }
    .cbp-af-header h1 {	
	color:#ffffff; 	
	font-size: 18px;
        letter-spacing:2px;        
    }
    .cbp-af-header h1,
    .cbp-af-header nav a {
	line-height: 50px;
    }
    #example-menu ul.dropdown.menu li {float:left;  width:100%;}
    a.backTo {font-size: 16px;}
    .projectWrap .proj-L p {font-size: 16px; }
    .proj-R {min-height: 300px;}
    
    section.services h2 {font-size: 24px;}
    section.faq p.someQuestions {font-size: 24px;}
    section.faq p:first-child {padding-top: 60px;}
    .proj-L,
    .proj-R {padding-top: 0px;    }
    .proj-L {min-height: 200px;padding-bottom: 30px;}
    .accordion-content.open-content p{padding-top:10px !important;}
    a.visitSite.leftSide {
        clear: none;
        float: left;
        margin-top:20px;
    }
    a.visitSite {margin-top: 20px;    }
}