/*

	00. Font Face
	01. Key Frames fade in
	02. Media Queries MAX WIDTH 1024px
	03. Media Queries MAX WIDTH 960px
	04. Media Queries MAX WIDTH 720px
	05. Media Queries MAX WIDTH 520px
	06. Media Queries for Smartphones
	07. Media Queries for Portraits
	08. Media Queries for Works Grid
	09. Mobile Navigation Queries
	
	
*/



/* 00. FONT FACE ================================================== */


	/*removed - loaded google web fonts instead*/


/* 01. KEY FRAMES FADE IN ================================================== */


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 


/* ISOTOP IS THERE FOR SOFT TRANSITIONS BETWEEN WORKS */

.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}      



/* 02. MAX WIDTH 1024px ================================================== */
@media screen and (max-width: 1024px) {
.portraits li { display:inline-block;}
.portraits li:nth-child(1) { visibility:visible;}
.portraits li:nth-child(2) { visibility:visible;}
.portraits li:nth-child(3) { visibility:visible;}
.portraits li:nth-child(4) { visibility:visible;}



.main  .anim {
-webkit-transform: translate3d(0px, 0%, 0px);
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}

.main  .active .anim {
-webkit-transform: translate3d(0px, 0%, 0px);
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}

.main  .anim2 {
-webkit-transform: translate3d(0px, 0%, 0px);
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}

.main  .active .anim2 {
-webkit-transform: translate3d(0px, 0%, 0px);
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}

.main  .anim-none {
-webkit-transform: translate3d(0px, 0%, 0px);
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}

.main  .active .anim-none {
-webkit-transform: translate3d(0px, 0%, 0px);
-webkit-transition: all 1000ms ease;
transition: all 1000ms ease;
}

a.rspeclink,#nav {display:none;}

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

}

/* 03. MAX WIDTH 960px ================================================== */



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


.main section.video{
background-image: url('../data/home_back.jpg');
background-color: #47b7e6;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


    .wrapper {
		height: initial;

    }
	
	.one-third {
}


body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container {
padding: 20px;
margin-top: 80px;
}

.portraits li {
width: 34.6%;
}

.portraits li .whathedo {
display: block;
margin-bottom: 10px;
}

body.disabled-onepage-scroll .onepage-wrapper section.page1 {
min-height: 100%;
width: 100%;
}

.portfolio {
height:100%}

.portfolio .slide {
position:relative;
padding: 40px 20px;
}

.portfolio .slide .content {padding-top:0; text-align:center;}

.portfolio .slide .content h2 {
text-align: center;
margin-top:30px;
}

.portfolio .slide .content p {
text-align:center;}

.carousel.carousel-fade .item {
opacity:1;
}


#slide   { display: table; }
#cont  { display: table-footer-group;  }
#img { display: table-header-group; }



.carousel {
margin-bottom: 30px;
}

.main section.page3 .item {
height:auto;	
display:block;
opacity:1;
}


.column {
margin: 0 auto 30px;
float:none;
}


.one-third {
width: 50%;
}




.carousel-inner > .item {display:block;}

.carousel-indicators {display:none;}

section.contact .row {width:100%;}

section.contact .row .col1 {margin: 50px auto 0; display:block;}
section.contact .page_container .col2 {margin:0 auto; text-align: center; display:block; width: 50%;}

.main section.page3 {
background-image: none;}

.main section.page4 {
background-image: none;}

}

/* 04. MAX WIDTH 720px ================================================== */


@media screen and (max-width: 720px) {
header {
	background:transparent;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

body.disabled-onepage-scroll section .page_container h1  {
margin: 10px 0;
font-size: 35px;}

body.disabled-onepage-scroll section .page_container h2 {font-size: 22px;}
	
#portraits li .whathedo {
	display:block;}
	
	
.portraits li {
width: 44.6%;
}


.one-third {
width: 65%;
}


.portfolio {
min-height:800px;
}

.portfolio .slide .content {width: 100%; display: block;}

.portfolio .slide .image { padding: 30px;}

}


/* 05. MAX WIDTH 520px ================================================== */


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


	
header {
	background:transparent;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

.lead {
	padding:10px 30px 10px 30px;
	font-family: 'Open Sans', arial, sans-serif;
		font-weight:400;
		font-size:15px;}

section.contact .row .col1 {
	width:90%;}

section.contact .row .col2 {
	width:90%;
	margin-top:30px;
	text-align: center;}

section.contact .inner blockquote p{
	color:#fff;
	text-transform:uppercase;
	font-family: 'Open Sans', arial, sans-serif;
		font-weight:400;
		font-size:14px;
}

section.contact .inner form input[type="text"],
section.contact .inner form input[type="email"],
section.contact .inner form textarea {
	width:95%;
}


section.contact .inner form .submit {
	width:100%;}

footer {
	font-size:9px;}
	
.main section.page3 {
background-image: none;}

.main section.page4 {
background-image: none;}

}

/* 06. Smartphones (landscape) ================================================== */


@media only screen 
and (max-device-width : 550px) 
and (orientation : landscape) {
header {
	height:100%;
}


#tab a,
.android #tab a{
	padding:10px;}

header h1 {
	margin-top:5%;}
#wrapper {
	position:absolute;
	width:100%;}
section.about .inner h2,
section.contact .inner h2,
section.portfolio .inner h2 {
		font-family: 'Open Sans', arial, sans-serif;
		font-weight:400;
	}

.one-third {
width: 65%;
}

}

/* 06. Smartphones (portraits) ================================================== */

@media screen and (device-aspect-ratio: 2/3) {
	.roles {margin: 0px auto 0px auto;}	
	section.portfolio {padding: 20px 0px 50px;}	
	section.aboutus {padding: 20px 0px 50px;}
	section.about {padding: 20px 0px 50px;}
	section.contact {padding: 20px 0px 50px;}	
	#social_module ul li {padding: 0px 15px 0px 15px;}
}


@media screen and (device-aspect-ratio: 40/71) {

	.roles {margin: 0px auto 0px auto;}	
	section.portfolio {padding: 20px 0px 50px;}	
	section.aboutus {padding: 20px 0px 50px;}
	section.about {padding: 20px 0px 50px;}
	section.contact {padding: 20px 0px 50px;}	
	#social_module ul li {padding: 0px 15px 0px 15px;}
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation : portrait) {
body, html {}
header {

	/*height:417px;*/
}
.roles { 
margin: 6% auto 0px auto;}

#wrapper {
	position:absolute;
	/*top:417px;*/
	width:100%;}

#tab a{
	margin:auto;
	position:absolute;
	 left: 0;  right: 0;
	/*bottom:-60px;*/}
	


header h1 {
	font-size:30pt;}
section.about .inner h2,
section.contact .inner h2,
section.portfolio .inner h2 {
		font-family: 'Open Sans', arial, sans-serif;
		font-weight:300;
	}
	
#social_module ul li {padding: 0px 15px 0px 15px;}

.portraits li {
display:block;
width: 100%;}


.social_module ul li { padding: 0px 15px 0px 15px;}

}

/* 06. iPads (landscape) ----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

/* 06. iPads (portrait) ----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
header h1 {
	margin-top:45%;}
}

/* 06. iPhone 4 ----------- */

/* @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
header h1 {
	margin-top:50%;}
}

*/


/* 07. PORTRAITS Media Queries ================================================== */


/* 3 COL */

@media (max-width: 800px){
  #portraits li{
    width: 38%;
    padding-top: 0%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 600px){
  #portraits li{
    width: 46%;
    padding-top: 0%;
    margin-bottom: 4%;
  }
  .row .col2 { margin-bottom:30px;}
}

/* SINGLE COL */

@media (max-width: 400px){
/*body, html {overflow-x: hidden;}*/

.roles {margin: 6% auto 0px auto;}

  #portraits li{
    width: 75%;
    padding-top: 0%;
    margin-bottom: 5%;
  }
  .portraits li {
display:block;
width: 100%;}

.social_module ul li { padding: 0px 15px 0px 15px;}

.portfolio .slide .image {
padding: 30px 0 0 0;
}

body.disabled-onepage-scroll .main section.page3 .page_container {
width: 100%; }

.one-third {
width: 100%;
}

.iconbox-content {
float: right;
width: 215px;}

}


/* 08. WORKS GRID Media Queries ================================================== */



@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

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


}

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



}

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

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	.og-close {right:45%; top:10px; display: none; }
	.og-details h3 {padding-top: 0px; }
	.og-expander-inner {padding-top:10px; }  
	.cs-style-3 figure img { width:300px; height:200px;}
	section.aboutus .inner h4 { text-align:center;}
	section.aboutus .inner p { text-align:center; padding:0 20px;}
	section.aboutus .inner .divider { margin: 30px 0 50px;}
	section.aboutus .inner img { width:300px;}
	section.aboutus .inner .img { margin: 30px 20px;}
	section.aboutus .inner { max-width:420px; }
	
.portraits li {
display:block;
width: 100%;}
}