@import url(mini-reset.css);
	
/* general settings */
body 				{	font-family: 'Ubuntu', "Trebuchet MS", Arial, Helvetica, sans-serif;
						color: #FFFFFF;
						background-color: #222123;
						font-size: 100%;
						font-size-adjust: none;
						font-weight: 400;
						text-align: center;
						/* stylize IE scrollbar */
						scrollbar-face-color: #444444; /* stylize IE scrollbar */
						scrollbar-base-color: #888888; /* stylize IE scrollbar */
						scrollbar-track-color: #222123; /* stylize IE scrollbar */
						scrollbar-arrow-color: #888888; /* stylize IE scrollbar */	}

h2 /* menu items */	{	font-size: 1.2em;		
						line-height: 1.3em;	}

h3 /* sections */	{	font-family: 'Niconne', cursive;
						font-size: 2em;
						color: #FFFFFF;
						padding: 1em 0 0.75em 0;	}
						
h4 /* galleries */	{	font-family: 'Niconne', cursive;
						font-size: 1.2em;	
						vertical-align: middle;	}

h6 	/* labels */	{	font-family: 'News Cycle', "Trebuchet MS", Arial, Helvetica, sans-serif;
						font-size: 1em;
						padding: 0.3em 0;	}
						
#about_section h6	{	font-family: 'Ubuntu', "Trebuchet MS", Arial, Helvetica, sans-serif;	}
						
figure				{	position: relative	}

#page 				{	min-width: 280px;
						margin: 0;
						padding: 0;	}

.spacer 			{	clear: both;	}

.clear_copyright	{	position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						background-color: rgba(0,255,102,0);	
						z-index: 10000;	}

.box-shadow 		{	padding: 5px;
						box-shadow: 0 0 20px rgba(0,0,0,0.8);	}
						
.frame-shadow 		{	box-shadow: 0 0 20px rgba(0,0,0,0.8);	}

video				{	margin: 2%;
						width: 256px;
						height: 144px;	}
						
/* horizontal sections main page */
.section_container 	{	position: relative;
						width: 100%;
						height: auto;
						margin: 0;
						padding: 0 0 2em 0;
						border-bottom: 1px dotted black;	}
	
#main_section		{	background-color: #222123; 	}
#port_section		{ 	background-color: #333234; 	}
#video_section		{ 	background-color: #444345; 	}
#abt_section		{	background-color: #666567;	}
#ctc_section 		{	background-color: #888888;	}
#footer_section		{	background-color: #EEEEEE;
						color: #222123;	}
							
/* header */
header 				{	width: 70%;
						margin: 0 auto;	}

header img 			{	width: 100%;
						height: auto;	}

/* navigation */
nav 				{	width: 65%;
						margin: 0 auto;
						border-top: 1px dotted white;
						border-bottom: 1px dotted white;
						padding: 0.1em 0 0.2em 0;
						display: none;	}

nav li, h2, h4		{	display: inline;
						padding: 0 0.6em;	}
						
#gallery_nav		{	border: none;
						display: inline;	}
						
.up_button 			{	width: 5%;
						max-width: 35px;
						height: auto;
						position: absolute;
						top: 1.5em;
						right: 1em;	}
						
.button 			{	width: 5%;
						max-width: 35px;
						height: auto;
						position: relative;
						display: inline;
						vertical-align: middle;	}					
					

/* portfolio */

#portfolio_id 		{	margin: 0% auto 0% auto;
						width: 80%;
						max-width: 750px;
						height: auto;	}
		

.portfolio_thumb 	{	width: 40%;
						max-width: 300px;
						float: left;
						margin: 2% 5% 8% 5%;
						display: inline;	}

.portfolio_thumb img 
					{	width: 83.3333333333%;
						height: auto;
						margin-bottom: 2%;	}

#portfolio_section 	{	width: 100%;
						overflow-x: scroll;
						font-size: 0.7em;
						padding-bottom: 1.5em;
						margin-bottom: 0.5em;	}

.portfolio_img 		{	margin: 2% -30000px 1% 1%;
						float: left;	}

.portfolio_img figure 
					{	vertical-align: middle;
						display:inline-block;	}

.portfolio_img img 	{	max-width: 240px;
						max-height: 160px;
						margin: 1em;
						padding: 3px;
						box-shadow: 0 0 20px rgba(0,0,0,0.8);	}

/* about */
#about_section 		{	margin: 0% auto;
						width: 80%;
						max-width: 750px;
						height: auto;
						font-size: 0.5em;	
						font-weight: lighter;	}

#about_marc 		{	width: 40%;
						max-width: 300px;
						float: left;
						margin: 2% 5%;
						display: inline;	}

#about_denise 		{	width: 40%;
						max-width: 300px;
						float: right;
						margin: 2% 5%;
						display: inline;	}

#about_section img 	{	width: 82%;
						height: auto;
						margin-bottom: 2%;	}

/* contact */
#contact_form 		{	margin: 1% auto;
						width: 80%;
						max-width: 600px;
						height: auto;
						font-size: 0.9em;	}

form 				{	background-image: url("../img/contact_background2.jpg");
						background-repeat: no-repeat;
						background-size: cover;
						padding: 1em;
						margin: 0;
						float: left;
						width: auto;
						height: auto;	}

fieldset 			{	margin: 0;	}

fieldset ul 		{	margin: 0;
						padding: 1em;
						list-style-type: none;	}
						
fieldset ul li 		{	float:left;
						margin:0 0 3% 0;
						padding:0;
						text-align: left;
						width: 100%;
						color: white;	}

input 				{	float:right;
						height:1.5em;
						width:60%;
						padding:0;
						margin-top: 0.1em;
						background:#FFF;	}

textarea 			{	float:right;
						width:60%;
						padding:0;
						background:#FFF;
						margin-top: 0.1em;	}

input.btnSend 		{	width: 100px;
						height: 30px;
						color: #222123;
						text-align: center;
						font-family: 'Niconne', cursive;
						font-size: 1em;
						float: none;
						padding: 0 0 2px 0;
						margin: 25px 0 20px 0;
						text-indent: 0px;
						border: 3px solid;
						border-color: #222123;
						background-color: #fcffb4;
						border-radius:30px;
						-moz-border-radius:30px;
						-webkit-border-radius:30px;
						box-shadow: 0 0 30px rgba(259,259,259,0.8);
						cursor:pointer;	}

.ctcmsg 			{	color: #DED7E5;
						margin: 0px auto;	}

.ermsg 				{	color: #F00;
						margin: 0px auto;
						font-weight:lighter;	}

label 				{	cursor: pointer;	}

input:active, 
input:hover, 
input:focus 		{	background-color: #fcffb4;	}

textarea:active, 
textarea:hover, 
textarea:focus 		{	background-color: #fcffb4;	}

input.btnSend:active, 
input.btnSend:hover, 
input.btnSend:focus {	background-color: #222123;
						color: #fcffb4;	}

/* imprint */
#imprint_section 	{	margin: 0 auto;
						width: 80%;
						max-width: 500px;
						height: auto;
						padding-bottom: 1%;	}

#imprint_div 		{	padding: 5% 0;
						width:100%;
						height: auto;	}

#imprint_div h2 	{	float: left; 
						margin-left:5%; 
						margin-bottom: 2%; 
						text-align: left; 
						font-size: 2em; 
						font-style: italic;}

#separator 			{	float: left;
						border: solid 1px #222123;
						width: 0;
						min-height: 5em;
						display: none;	}


#imprint_div p 		{	float: right; 
						margin: 0 5%; 
						text-align: left;	}

/* links styling */
a img 				{	border: none;	}
a:link 				{	color: #888888;
						text-decoration: none;	}
a:visited			{	color: #888;
						text-decoration: none;	}
a:hover 			{	color: #DED7E5;	}
a:hover, a:active, a:focus 
					{	text-decoration: none;	}

/* responsive slider */
#title_slider 		{	margin: 2.5% auto 0 auto;
						width: 80%;	
						position: relative;}

.rslides 			{	position: relative;
						list-style: none;
						overflow: hidden;
						width: 100%;
						padding: 0;
						margin: 0 auto;	}

.rslides li 		{	-webkit-backface-visibility: hidden;
						position: absolute;
						display: none;
						width: 100%;
						left: 0;
						top: 0;	}

.rslides li:first-child 	
					{	position: relative;
						display: block;
						float: left;	}

.rslides img 		{	display: block;
						height: auto;
						float: left;
						width: 100%;
						border: 0;	}
  
/* media queries */

@media only screen and (min-width: 480px) { 	
header 				{	width: 50%;	}
#title_slider 		{	width: 75%;	}
video				{	width: 384px;	
						height: 216px;	}
						
#about_section 		{	font-size: 0.7em;	}

#contact_form	 	{ 	font-size: 1em;	}

input.btnSend 		{	width: 110px;
						height: 33px;	}


#portfolio_section 	{	font-size: 0.9em;	}
.portfolio_img img 	{	padding: 4px;
						max-width: 390px;
						max-height: 260px;	}
}

@media only screen and (min-width: 640px) { 
header 				{	width: 40%;	}
nav 				{	display: inline-block;
						max-width: 480px;	}
h2 /* menu items */	{	font-size: 1.1em;	}
h3 /* sections */	{	font-size: 2.2em;	}
h4 /* galleries */	{	font-size: 1.4em;	}
h6 /* labels */		{	font-size: 1.1em;	}

.section_container 	{	padding: 0 0 3em 0;	}

#title_slider 		{	max-width: 500px;	} 

#about_section 		{	font-size: 0.9em;	}
#contact_form	 	{ 	font-size: 1.1em;	}

#separator 			{	display: block;	}

.portfolio_img img 	{	padding: 5px;
						max-width: 600px;
						max-height: 400px;	}
}

@media only screen and (min-width: 920px) { 
.box-shadow 		{	padding: 7px;	}
header 				{	width: 30%;
						max-width: 390px;	}
						
nav 				{	width: 55%;
						max-width: 560px;	}
h2 /* menu items */	{	font-size: 1.2em;	}
h3 /* sections */	{	font-size: 3.3em;	}
h4 /* galleries */	{	font-size: 1.8em;	}
h6 /* labels */		{	font-size: 1.2em;	}

#title_slider 		{	margin-top: 30px;
						margin-bottom: 0px;
						max-width: 600px;	} 

video				{	width: 512px;
						height: 288px;	}


#about_section		{	font-size: 1em;	}
#contact_form	 	{ 	font-size: 1.3em;	}
	
input 				{ 	height: 2em; }
input.btnSend 		{	width: 140px;
						height: 40px;	}

#portfolio_section 	{	font-size: 1em;	
						margin-bottom: 1em;	}		
.portfolio_img 		{	margin: 20px -30000px 10px 10px;	}
.portfolio_img img 	{	padding: 6px;
						max-width: 600px; 
						max-height: 400px;	}
}

@media only screen and (min-width: 1400px) { 

header 				{	max-width: 430px;	}
nav 				{	max-width: 640px;	}
h2 /* menu items */	{	font-size: 1.3em;	}
h3 /* sections */	{	font-size: 4.4em;	}
h4 /* galleries */	{	font-size: 2.4em;	}
h6 /* labels */		{	font-size: 1.3em;	}

#title_slider 		{	max-width: 900px;	} 
		
#portfolio_id 		{	max-width: 1286px;
						width: 1370px;
						height: auto;	}

#contact_form	 	{ 	font-size: 1.5em;	}
input 				{ 	height: 2em; }

#portfolio_section 	{	font-size: 1.2em;	}		
.portfolio_img img 	{	padding: 7px;
						max-width: 750px; 
						max-height: 500px;	}
}