/*
Theme Name:         Cotton
Description:        Cotton is a clean and minimal html one page to display your work.
Version:            1.0.0
Author:             digitalcookers™
Author URI:         http://creativemarket.com/digitalcookers

*/

/* ==========================================================================
   General Styles
   ========================================================================== */

html,body,#page{width: 100%;height: 100%;margin: 0px;padding: 0px;}
html{-webkit-font-smoothing: antialiased;}
body {background: #fff; font-family: 'Open Sans', sans-serif;line-height: 1.2em;}   
h1,h2,h3,h4,h5,h6{color: #000000;letter-spacing: -0.03em;font-weight: bold; font-weight: 900; font-family: 'Merriweather', Arial, sans-serif;}

a{cursor:pointer;}
p{font-size: 0.8em;text-align: left;line-height: 1.5625;color: #000000}
select{color: white;padding: 0 1em; height: 2.4em;outline: none;border: 0;border-radius: 0 !important;background: url('../images/arrow-down.png') no-repeat right 0.8em #f4594e;-webkit-appearance: none;}

/* Helpers */

.text-right{text-align: right;}
.intro{margin-bottom: 3.125em;text-align: center;}
.fixed{position:fixed;top:-60px;}
.smooth,.smooth img{-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

.center-list ul{position: relative;left: 50%;display: block;float: left;overflow:visible;}
.center-list ul li {position: relative;right: 50%;float: left;}

/* ==========================================================================
   Header Styles
   ========================================================================== */

#header{overflow:hidden;height:auto;background: url('http://placehold.it/1920x1080/1a1a1a/F4594E&amptext=1920x1080') fixed no-repeat; height:100%;}
.no-touch #header{-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-attachment: fixed;}

#logo{display:none;}
#logo img{width:100px;}
   
/* Intro Styles */
   
#intro{margin-top: 2em;text-align: center;}  
#intro h1{margin-top: 0.5em;margin-bottom: 0;color: white;font-size: 1.875em;opacity:0;padding-top: 2em;}
#intro h2{margin-bottom: 0;font-size: 1.5em;opacity:0;padding-top: 2em;}
#intro p{color:white;}

#explore{opacity:0;margin-top: 0em;}
#explore a{ margin:0 auto;color:white;cursor:pointer;position:absolute;margin-left: -25px;left:50%}
#explore a img{height:50px;opacity:0.5;}
.touch #explore a img,.no-touch #explore:hover a img{opacity:1;}

/* ==========================================================================
   Navigation Styles
   ========================================================================== */

#top-bar{position:fixed;top:-75px;z-index: 999;width:100%;height:auto;background-color:#1a1a1a;}
#top-navigation ul{display:none;font-size: 1.5em;margin-bottom: 0.75em;}
#top-navigation li{width:100%;}
#top-navigation li a{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#top-navigation li:not(active) a{color:#fff;}
#top-navigation li.active a, #top-navigation li:hover a{color:#f4594e;}

#logo-lettering img{height: 3em;}

#menu-mobile{position:absolute;top:15px;right:15px; width:20px;height:20px;background-image:url("../images/menu.svg");background-size:20px;background-repeat:no-repeat;cursor:pointer;}
#menu-mobile:hover,#menu-mobile.active{background-image:url("../images/menu-hover.svg");}

/* ==========================================================================
   All Section Styles
   ========================================================================== */
   
section{padding-top: 0.3em;padding-bottom: 1.875em;text-align: center;}
section h1,.intro p{margin-bottom: 0;}  

.image {

    transition:all 2s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 6s;
}

.image-hover{display:none;}

.image:hover .overlay {
    opacity:1;
}

img {
    vertical-align:top;
}

#parent {
}
#parent:hover > .image {
    opacity:1;
}
#parent:hover > .image:not(:hover) {
    opacity:1;
}

.overlay {
    opacity:0;
    position:absolute;
    padding-bottom: 2em;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    color:white;
    transition:opacity 2s;
    -webkit-transition:opacity 0.5s;
    -moz-transition:opacity 2s;
}

.overlay:hover, .overlay:active {-webkit-user-select: none; -webkit-touch-callout: none}


/* Social Footer */

footer{background-color:#f2f2f2;}
footer ul.social{margin-top:1em;}
footer ul.social li a {width: 1.5em;height: 1.5em;background-size: 1.5em;opacity: 0.5;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
footer ul.social li a:hover {opacity: 1;}
footer ul.social a.facebook{background-image:url("../images/social/facebook-black.svg");}
footer ul.social a.twitter{background-image:url("../images/social/twitter-black.svg");}
footer ul.social a.amazon{background-image:url("../images/social/amazon.svg");}
footer ul.social a.soundcloud{background-image:url("../images/social/soundcloud.svg");}
footer ul.social a.rowohlt{background-image:url("../images/social/rowohlt.svg");}
footer ul.social a.mail{background-image:url("../images/social/mail.svg");}


.response {
background-color: #f2f2f2;padding: 2em; margin: 0.5em; margin-top: 0em; font-style:italic; text-align: left;
}


/* Styles for Specific for Desktop */

.logo {
width: 23em; padding-top: 2em; padding-left: 2em; padding-right: 2em;
}

@media only screen and (min-width: 48em) {
	
	p{font-size: 0.8em;text-align: justify;padding-left: 3em;padding-right: 3em;}
	
	.intro{margin-bottom: 6.25em;}


.logo {
width: 23em; padding-top: 2em; padding-bottom: 2em;
}



#parent {
}
#parent:hover > .image {
    opacity:1;
}
#parent:hover > .image:not(:hover) {
    opacity:.3;
}

.overlay {
    opacity:0;
    position:absolute;
  	padding: 0.3em;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    color:white;
    transition:opacity 2s;
    -webkit-transition:opacity 0.5s;
    -moz-transition:opacity 2s;
}

a.impressum{  font-size: 0.8em;}

		.black_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 280%;
			background-color: black;
			z-index:1001;
			-moz-opacity: 0.8;
			opacity:.80;
			filter: alpha(opacity=80);
		}
		.white_content {
			display: none;
			position: absolute;
			top: 25%;
			left: 25%;
			width: 50%;
			height: 50%;
			padding: 16px;
			background-color: white;
			z-index:1002;
			overflow: auto;
			font-size: 0.8em;
		}


		.impressum_copy {
			padding-top: 1em;
		    text-align: center;
		}

		.schliessen {
			font-size: 0.8em;
			font-weight: bold;
		}

	
	/* All Section Styles */
	
	section{padding-top: 0.3em;padding-bottom: 3.75em;}
	
	/* Header */
	
	#logo img{width:150px;}
	
	#intro{margin-top: 6.25em;}  
	#intro h1{margin-top: 1.25em;font-size: 3em;}
	#intro h2{font-size: 2.5em;}
	
	#explore{margin-top: 3em;}
	
	/* Navigation */
	
	#top-navigation ul{font-size: 1em;margin-bottom: inherit;float:right;}
	
	/* Logo */
	
	#logo-lettering{margin-top: 0.3em;}
	
	/* Top Navigation */
	
	#top-bar{top:-60px;height:3.75em;}
	#top-navigation{margin-top: 1em;}
	#top-navigation ul{display:inherit;}
	#top-navigation li{width:inherit;}
	
	/* Team */
	
	.member{margin-bottom: 0;min-height: inherit;}
	.member h5{font-size: 1.3125em;}
	.member p{font-size: 1em;}
	.member-photo{max-height: inherit;}
	
	.member ul.social li a{width:2em;height:2em;background-size: 2em;}
	
	/* Services */
	.service img{margin-top:0;width:auto;height: 100px;}
	
	/* Feed */
	
	.instagram-placeholder,.flickr-photo{margin-bottom: inherit;}
	
	/* Contacts */
	#contacts{padding-bottom: 0;}
	
	/* Project */
	
	#project-details{padding:5em 0;}
	#project-details #project-description{margin-bottom: 0;}
	#project-sidebar{text-align: right;}
	
	#project-top-bar{height:auto;}
	
	#next-project,#previous-project,#close-project,#next-project-name, #previous-project-name{position:fixed; z-index: 999;}
	#close-project{top:0.4125em; right:1.25em;width:1.5em;height:1.5em;background-size: 1.5em;}
	#next-project{top:18.75em; right:1.25em;}
	#previous-project{top:18.75em; left:1.25em;}
		
	#next-project-name, #previous-project-name{background-color:rgb(244,89,78);background-color:rgba(244,89,78,0.7);padding:0.5em 1em;opacity:0; display: inherit;color:white;}
	#next-project-name{top:19.1em; right:8em;}
	#previous-project-name{top:19.1em; left:8em;}
	
	#next-project-name h2,#previous-project-name h2{color:white;font-size: 0.8em; margin-bottom: 0;}
	
	#next-project, #previous-project, #close-project{opacity:0.6;-webkit-transition: opacity 0.3s ease-in-out;-moz-transition: opacity 0.3s ease-in-out;-o-transition: opacity 0.3s ease-in-out;transition: opacity 0.3s ease-in-out;}
	#next-project:hover,#previous-project:hover,#close-project:hover{opacity:1;}
	
}

@media only screen and (min-width: 72em) {
	
	p{font-size: 0.8em;text-align: justify;padding-left: 5em;padding-right: 5em;}

}