/*

	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; } }
 
.fade-in {
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    opacity: 0.7;
    filter: alpha(opacity=70);
 
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}

/* 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) {

nav #logo { 
	float:left; 
	display:inline-block;
	margin-left:0px;
	letter-spacing:2px;
	padding:20px 20px 20px 10px;
	line-height:20px;
	vertical-align:middle;
	}
}



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



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

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

	
.roles {
    font-size: 20pt;  
}


#twitterwrap {
	padding:30px 50px 30px;}

#ticker ul.tweet_list {
height:19px;
font-family: 'Open Sans', arial, sans-serif;
		font-weight:400;
		font-size:12px;
}

ticker .tweet_list li {
overflow:hidden;
vertical-align:middle;
font-family: 'Open Sans', arial, sans-serif;
		font-weight:400;
		font-size:12px;
color:#666;
height:30px;
}

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

/* MAX WIDTH 800px ============== SPRACHEN ======================= */
@media screen and (max-width: 800px) {
.homeLangu { width:35%; }
#tabLa-de a { left:68%; }
#tabLa-en a{ left:68%; }
@keyframes  resize{  0% {width:0;bottom:-100px;left:70%;} }
@-webkit-keyframes resize{  0% {width:0;bottom:-100px;left:70%;}  }
@-moz-keyframes resize{  0% {width:0;bottom:-100px;left:70%;}  }
}

/* 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;}
.roles { font-size:  20pt; }

.homeLangu { width:33%; min-width: 220px; }
#tabLa-de a { left:70%; }
#tabLa-en a{ left:70%; }
@keyframes  resize{ 0% {width:0;bottom:-100px;left:72%;} }
@-webkit-keyframes resize{ 0% {width:0;bottom:-100px;left:72%;}  }
@-moz-keyframes resize{ 0% {width:0;bottom:-100px;left:72%;}  }

}

/* 05. MAX WIDTH 600px / 520px ================================================== */
@media screen and (max-width: 630px) {
.homeLangu { width:100%!important; height: 50%;top:0;}
#tabLa-de a{ transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;
	width:40px; height:16px; padding: 6px 10px 3px; left:100%; margin-left:-60px; top: 30px; }
#tabLa-en a{ transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none;
	width:40px; height:16px; padding: 6px 10px 3px; left:100%; margin-left:-60px; top: 64px; }
@keyframes  resize{ 0% {width:0;left:130%;} 100% { width:40px;left:100%; } }
@-webkit-keyframes resize{ 0% {width:0;left:130%;} 100% { width:40px;left:100%; } }
@-moz-keyframes resize{ 0% {width:0;left:130%;} 100% { width:40px;left:100%; } }
}

@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 {float:none!important; padding-left: 0!important;
	width:90%;}

section.contact .row .col2 {float:none!important; 
	width:90%;
	margin-top:30px;margin-bottom:-15px;
	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;}
	
.copyright {
	color:#fff; font-family: 'Open Sans', arial, sans-serif; font-weight:400; font-size:13px; letter-spacing:1px;
	padding: 0 30px 0 10px;}

.redfeed { display:none; }
.redfeed2 { color:#fff; margin: 0 10px 0 60px;}

}

/* 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;
	}

	.concert { font-weight:600; font-size: 1.2em; text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); }
	.concert_text { font-weight:400!important; font-size: 1.2em; text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); }
	#concerts h3 { font-size: 1.5em!important;text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); }

}

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


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation : portrait) {
#tabLa-de a{ top: 18px; }
#tabLa-en a{ top: 54px; }
header {
	/*height:417px;*/
}
#wrapper {
	position:absolute;
	/*top:417px;*/
	width:100%;}

#tab a{
	position:absolute;
	/*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;
	}
	section.blog .row .col1 {
        /* width: 71.35897435897436%;  da rechts 2% abstand hinzukan */
        width: 70.35897435897436%;
        padding-left: 5%;
        padding-right: 2%;
        display:inline-block;
        vertical-align:text-top;
        text-align:left;
        margin-bottom:25px;
    }
    
    section.blog .row .col2 {
        /* width: 20.076923076923077%;  da links 1% abstand hinzukan */
        width: 11.076923076923077%;
        display:inline-block;
        vertical-align:text-top;
        text-align:left;
        padding-right:5%;
        padding-left: 2%;
        margin-top: 26px;
    }

	.concert { font-weight:600; font-size: 1.2em; text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); }
	.concert_text { font-weight:400!important; font-size: 1.2em; text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); }
	#concerts h3 { font-size: 1.4em!important;text-shadow: 2px 2px 3px rgba(0,0,0, 0.7); }
}

/* 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),
only screen and (min-device-pixel-ratio : 1) {
.page #concerts { max-width: 100%!important;
    background: #f5f5f5 url('http://davefeusi.com/img/concerts-bg1920x1080.jpg') no-repeat center center !important; }
nav #logo { padding:20px 20px 0; }
/* header h1 { margin-top:50%;}*/
}


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

/* 3 COL */

@media (max-width: 1024px){   
	#concerts { padding-top: 120px!important; }
	/*.page #concerts { max-width: 100%!important;
    background: #f5f5f5 url('http://davefeusi.com/img/concerts-bg1920x1080.jpg') no-repeat center center !important; } */
	.wpcf7-submit { width: 100%!important; font-size: 13px!important; -webkit-border-radius:0!important; -webkit-appearance: none!important; }
    div.wpcf7 .col1 { min-width: 66%!important; }
	div.wpcf7 .row  { width: 92%!important; }
	
 /* .row { margin-top:-3.5em!important; }
 #concerts .widget{ margin-top:-880px!important; position:absolute; z-index:999; }/* abstand oben */
}

@media (max-width: 800px){
  #portraits li{
    width: 31%;
    padding-top: 0%;
    margin-bottom: 3%;
  }
  .wpcf7-cds li { margin: 0 3px 0 0!important; } /* CONTACT FORM */ 
  
  div.wpcf7 .col1 { min-width: 56%!important; }
  div.wpcf7 .row  { width: 90%!important; }
}

/* 2 COL */

@media screen and (max-width: 600px) {
  #concerts {padding-top: 100px!important; }
  #portraits li{
    width: 46%;
    padding-top: 0%;
    margin-bottom: 4%;
  } 
  .post-sidebody-more { display: block; margin: -114px 0 145px -2px !important; width:120%;}  /* nav innerhalb loop.php */
/* ====== CONTACT FORM / STYLES  ================ */ 

div.wpcf7 .row { width: 100%!important; margin: 30px 0!important;} 
div.wpcf7 .col1 { padding: 0; width: 100%!important; display: block;} /*links*/ 
div.wpcf7 .col2 { display: none!important;} 
.wpcf7-cdgroup { width:98%!important; padding: 0; }
.gl { float:none!important; margin: 0; }
.gr { float:none!important; margin: 0; }
.wpcf7-cds { width: 100%!important; margin: 0; }
.wpcf7-cds li { width: 40%!important; margin: 0 10px 10px!important; }
div.wpcf7 h5 { margin: 14px 0 4px!important;}

div.wpcf7-cd-rowcol2 {display:table!important; width:100%; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; padding: 0 0 12px; margin: 10px 0 20px;} /* Preise unter CDS*/ 
.wpcf7-cds2 li:first-child { float:none; display: inline-block; width: 96%!important; list-style: none; margin: 0 3% -10px; }
.wpcf7-cds2 li { float:none; display: inline-block; width: 96%!important; list-style: none; margin: 0 3%; }

/* fields */
.wpcf7-form-control-wrap { width: 96%!important; }
.wpcf7 textarea { width: 96%!important; }
.wpcf7 input { width: 96%!important; }
.wpcf7 input:hover { width: 96%!important; }

div.wpcf7-mail-sent-ok { text-align: center!important; margin: -20px auto 0!important; }
div.wpcf7-mail-sent-ng { text-align: center!important; margin: -20px auto 0!important; }
div.wpcf7-spam-blocked { text-align: center!important; margin: -20px auto 0!important; }
div.wpcf7-validation-errors { text-align: center!important; margin: -20px auto 0!important; }

textarea { width: 96%!important; }
textarea:hover { width: 96%!important; }

/* ====== CONTACT FORM / END  ========== */ 

}

/* SINGLE COL */

@media (max-width: 400px){
  #portraits li{
    width: 75%;
    padding-top: 0%;
    margin-bottom: 5%;
  }
}


/* 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) {

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 14px; }
	.og-expander a { font-size: 12px; }
	.og-fullimg { margin-top:2%; }
}

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

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	.og-close {right:45%; top:10px; display: none; }
	.og-details h3 {padding-top: 50px;}
	.og-expander-inner {padding-top:10px; }  
}

@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: 50px; }
	.og-expander-inner {padding-top:10px; }  
}


/* 09. Mobile Navigation Queries ================================================== */ 

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

	nav #logo {
	float:left;
	display:inline-block;
	margin-left:0px;
	padding:15px 10px 10px;
	vertical-align:middle;
	}

	nav ul li {
		display: none;
		}
	
	nav select text {color:#cd402e !important;}
/* width: 98px; */
	nav select { display: block;
		background: url('http://davefeusi.com/img/nav-icon.png') no-repeat 4px top;
		width: 77px; 
		border: none;
		height: 40px;
		display: inline-block;
		right: 15px; top: 0px;
		padding: 2.2em 0 0.125em 0;
		margin: -0.85em 0 !important;
		color: rgba(0, 0, 0, 1.0);
    }

}