/* CSS Document */

@media only screen 
and (max-width : 2100px) {
.wrapper{
 max-width:1300px; 
 margin:0 auto; 
}

.project-box{
	width:31.3%;
	margin-right:3%;
	margin-bottom:3%;
	float:left;
	position:relative;
}

#project-boxes .project-box:nth-child(4n+4){
	margin-right:3%;
}

#project-boxes .project-box:nth-child(4n+5){
	clear:none;
}

#project-boxes .project-box:nth-child(3n+3){
	margin-right:0;
}

#project-boxes .project-box:nth-child(3n+4){
	clear:both;
}


}



@media only screen 
and (max-width : 1366px) {
.large-wrapper{
	width:94%;
	margin:0 3%;
}

.wrapper{
 max-width:1200px; 
 margin:0 auto; 
}


h1{

	font-size:36px;
	line-height:50px;
}


h2{
	font-size:30px;
}
 
h3{
	font-size:26px; 
}
 
h4{
	font-size:22px; 
}
 
h5{
	font-size:18px; 
}
 
h6{
	font-size:16px; 
}

#project-container{
	padding: 0 50px;
}



/*

#flame-container{
	width: 150px;
	height: 90px;
}

a.flame-button{
	width:150px;
	height:100px;
}

a.flame-button button{
	width:133px;
	line-height:23px;
	font-size:23px;	
}

a.flame-button img{
	width:150px;
}

#launch{
	max-width:150px;
	margin-top:200px;
}
*/



.text-wrapper{
 max-width:750px; 
 margin:0 auto; 
}



#logo{
	max-width:350px;
	margin-top:15px;
}


#banner{
	height:700px;

}





#cloud1{
	margin-top:50px;
	margin-left:-90px;
}
#cloud1 img{
	width:300px;
} 

#cloud2{
	margin-top:30px;
	margin-right:-200px;
}
#cloud2 img{
	width:600px;
}

#cloud3{
	margin-top:250px;
	margin-left:180px;
}
#cloud3 img{
	width:150px;
}

#cloud4{
	margin-top:350px;
	margin-right:100px;
}

#cloud4 img{
	width:320px;
}

#island1{
	margin-top:300px;
	margin-left:0;
}

#island1 img{
	width:400px;
}

#island2{
	margin-top:360px;
	margin-right:0;
}

#island2 img{
	width:200px;
}

#island3{
	margin-top:90px;
	margin-right:280px;
	width:150px;
}

#island3 img{
	width:175px;
}




.street-block p{
	font-size:14px;
}


.service-box-text{
	position:absolute;
	top:0;
	left:0;
	margin:5%;
}

.service-box button{
	bottom:5%;
	left:5%;
	
}

#mid-banner{
	padding:50px 0;
}




#page-banner{
	height:320px;
}



} /* end  1366px */



@media only screen 
and (max-width : 1224px) {
.wrapper{
	width:94%;
	margin:0 3%;
}

#projects-menu{
	padding-bottom:20px;
	text-align:center;
}

#projects-menu ul{
	height: 30px;
	line-height: 30px;	
}

#projects-menu li{
	margin-bottom:15px;
}

#projects-menu li a{
	border-right:0;
	background-color:#f2f2f2; 
	margin-right:5px;
	padding:10px;
}





}




@media only screen  
and (max-width : 1024px) {
a.button-link{
	font-size:24px;
	line-height:26px;
}
	
.small-wrapper{
	width:94%;
	margin:0 3%;
}

#full-menu{
	display:none;
}

#responsivemenu{
	display:block;
}

#top-nav{
	padding:5px 0;
}

#social{
	margin:0 auto;
	float:none;
	
	
}

#page-banner #cloud2{
  top:100px !important;

}

#island1{
	margin-top:400px;
	margin-left:-100px;
}



.street-block{
	width:30%;
	margin-bottom:20px;
	margin-right:3%;	
}	


#street-blocks .street-block:nth-child(3n+4){
	clear:both;

}

#street{
	padding-top:30px;
}

#street-text{
	padding-top:20px;
}




.service-box{
	width:48.5%;
	margin-right:3%;
	height:250px;
}

#service-boxes .service-box:nth-child(3n+3){
	margin-right:3%;
}

#service-boxes .service-box:nth-child(2n+2){
	margin-right:0;
}


#project-container{
	padding: 0;
}





.navigation{
	display:none;
}

.navigation-responsive{
	display:block;
	padding:10px 0;
	color:black;
	font-weight:bold;
}

.prev-posts-resp {
	width:50%;
	float:left;
}

.next-posts-resp {	   
	width:50%;
	float:right; 
	text-align:right;
}

.prev-posts-resp a, 
.next-posts-resp a{
	color:black;
}

.prev-posts-resp a:hover, 
.next-posts-resp a:hover{
	color:white;
}





#post-video iframe{
	height:300px;
	width:100%;
}

.post-thumb{
	width:calc(100% - 20px);
	margin-right:0;
	margin-bottom:15px;
	float:none;
	
	background-color:#333;
	padding:10px;
}

.post-thumb-image{
	height:150px;	
}





}



@media only screen  
and (max-width : 960px) {
	


	
}





@media only screen  
and (max-width : 768px) {

 
h1{
	font-size:32px;
	line-height:38px;
}


h2{
	font-size:26px;
}
 
h3{
	font-size:22px; 
}
 
h4{
	font-size:20px; 
}
 
h5{
	font-size:18px; 
}
 
h6{
	font-size:16px; 
}
	
.text-wrapper{
	width:94%;
	margin:0 3%;
}

#banner{
	height:600px;
}

#cloud2{
	margin-top:100px;
	margin-right:-200px;
}


#projects-menu{
	display:none;
}

#mainbar{
	float:none;
	width:100%;
	margin-right:0;
}

#sidebar-primary{
	float:none;
	width:auto;
}



input#s {
	width:55%;

}



img.alignright, 
img.alignleft, 
img.aligncenter, 
a img.alignright, 
a img.alignleft, 
.wp-caption.alignright, 
.wp-caption.alignleft {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	float:none;
	}



}




@media only screen 
and (max-width : 720px) {

#cloudbank1, #cloudbank2{
	bottom:0;
}

#cloudbank1 img, 
#cloudbank2 img{
	line-height:0;
	display:block;
}

.service-box{
	height:300px;
}



.project-box{
	width:48.5%;
}

#project-boxes .project-box:nth-child(4n+4){
	margin-right:0;
}


#project-boxes .project-box:nth-child(3n+3){
	margin-right:3%;
}

#project-boxes .project-box:nth-child(3n+4){
	clear:none;
}

#project-boxes .project-box:nth-child(2n+2){
	margin-right:0;
}

#project-boxes .project-box:nth-child(2n+3){
	clear:both;
}




#post-video, 
#post-info{
	width:100%;
	margin-right:0;
	float:none;
}






	
}






@media only screen 
and (max-width : 640px) {
	
#island1{
	margin-top:500px;
	margin-left:-175px;
}
#island1 img{
	width:350px;
}


.street-block{
	width:47%;
	margin-bottom:20px;
}	

#street-blocks .street-block:nth-child(3n+4){
	clear:none;
	margin-right:0;

}

#street-blocks .street-block:nth-child(2n+3){
	clear:both;

}


}





@media only screen 
and (max-width : 640px) {
.service-box{
	width:100%;
	margin-right:0;
	height:200px;
}

#service-boxes .service-box:nth-child(3n+3){
	margin-right:0;
}



}



@media only screen 
and (max-width : 520px) {
#sidebar-footer .wrapper{
	display:unset;
}

#sidebar-footer .widget-content{
	margin-bottom:20px;
}

#sidebar-footer .widget-content p{
	margin:0;
}
}




@media only screen 
and (max-width : 480px) {
 
h1{
	font-size:26px;
	line-height:30px;
}


h2{
	font-size:26px;
}
 
h3{
	font-size:22px; 
}
 
h4{
	font-size:20px; 
}
 
h5{
	font-size:18px; 
}
 
h6{
	font-size:16px; 
}

#cloud2{
	margin-top:150px;
}

#island1{
	display:none;
}

#island3{
	margin-right:210px;
}

#banner{
	height:500px;
}

img.alignright {
	float:none; 
	margin:10px 0; 
	clear:both; 
	text-align:center;
	margin-left: auto; 
	margin-right: auto;
	display: block; 	
	 }
	 
img.alignleft {
	float:none; 
	margin:10px 0; 
	clear:both;
	margin-left: auto; 
	margin-right: auto;
	display: block; 	
 }
 
img.aligncenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
}
a img.alignright {
	float:none; 
	margin:10px 0; 
	clear:both; 
	margin-left: auto; 
	margin-right: auto;
	display: block; 
	}
a img.alignleft {
	float:none; 
	margin:10px 0; 
	clear:both;
	margin-left: auto; 
	margin-right: auto;
	display: block; 
}
a img.aligncenter {
	display: block; 
	margin-left: auto; 
	margin-right: auto; 
}



.postbox-image{
	float:none;
	width:100%;
	margin-bottom:30px;
}

.postbox-image img{
	width:100%;
}

.postbox-text{
	float:none;
	width:100%;
	margin-left:0;
	padding-bottom:0;
}





.gallery img {
   width:100%;
}

#gallery-1 .gallery-item, 
#gallery-2 .gallery-item,
#gallery-3 .gallery-item, 
#gallery-4 .gallery-item,
#gallery-5 .gallery-item, 
#gallery-6 .gallery-item {
	width:48% !important;
	margin:1%;
}
	
	
.gallery-columns-2, .gallery-columns-3, .gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-item {
    max-width: 100% !important;
}


}




@media only screen 
and (max-width : 420px) {

.project-box{
	width:100%;
	float:none;
	margin-right:0;
	margin-bottom:30px;
}

#project-boxes .project-box:nth-child(3n+3){
	margin-right:0;
}


}








@media only screen 
and (max-width : 320px) {

#gallery-1 .gallery-item, 
#gallery-2 .gallery-item,
#gallery-3 .gallery-item, 
#gallery-4 .gallery-item,
#gallery-5 .gallery-item, 
#gallery-6 .gallery-item {
	width:98% !important;
	margin:1%;
}
	
	
.gallery-columns-2, .gallery-columns-3, .gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-item {
    max-width: 100% !important;
}

.gallery-columns-2 .gallery-item img {
    width: 100%;
}
}