@charset "utf-8";
/* CSS Document for Screens */

@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);

@import url(https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise);

@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);

/* Fonts */
@font-face {
	font-family:'mySpecialFont';
	src: url(../fonts/frahv.ttf);
}


body { 
	background-color: rgba(0,0,0,.78);
	margin:0;
	padding:0;
}

#page { position:relative; }


/* Header */

header { 	
	height:300px;
	background-image:url(../images/ceiling.svg);
	background-repeat:no-repeat;
	background-size:auto 50px;
	background-position: 50% 20px;
}

header div.content { 
	max-width:1200px; 
	margin:0 auto; 
	position:relative; 
	height:100%;
	/*background-color:rgba(255,255,255,.2);*/
}

header div.content div.sign {	
 	width:450px; height:298px; 
	background-image:url(../images/sign.svg);
	background-repeat:no-repeat;
	margin-left:7%;
}
 
header div.content div.sign h1 {
	font: bold 45px mySpecialFont, Arial;
	padding:160px 0px 0px 30px;
	color:#8CC63F;	
	margin:0;
}


header div.content div.sign img { 
	
	width:75%; 
	margin:5px 0 0 53px;
	
}




/* Section - Main */

#main { 
	padding:10px;
    /*border:1px solid green;*/
	min-height:50vh;
	position:relative;
	margin:0 auto;
	max-width:1200px;
}

#main #title { 
	font: normal 35px 'Amatic SC', cursive;
	text-align:center;
	color:#8CC63F;
	margin-top:20px;
	border-top:1px dashed rgba(225,225,225,.3);
	border-bottom:1px dashed rgba(225,225,225,.3);
}

#main div.content { 
 	/*border:1px solid pink;*/
	display:inline-block;
	width:100%;
	max-width:1200px;
	text-align:center;	
} 


#main div.content #contactBody { 
	color:white;
	margin:80px 0px;
	text-align:center;
}

#main div.content #contactBody a { 
	color:white;
	text-decoration:none;
}


#main div.content #contactBody p { 
 	margin-top:10px;
	font: normal 35px 'Amatic SC', cursive;	
} 

#main div.category {
	font: normal 35px 'Amatic SC', cursive;
	text-align:center;
	color:#878787;
	margin-top:20px;
	padding-bottom:7px;
	border-bottom: 1px dashed rgba(225,225,225,.3);
}

#main div.content div.object {
	display:inline-block;
	/* border:1px solid pink; */
	width:245px;
	height:200px;
	margin:3%;
	margin-bottom:2%;
}

#main div.content div.object img {
	width:100%;
}



#main div.content div.home-text {
	max-width:50%;
	display:inline-block;
	text-align: right;
	vertical-align:top;
	margin:80px 0px 0px 30px;
	color:white;
	font: normal 30px 'Amatic SC', cursive;
	float:left;
}


#main div.content div.home-text h1 {
	font-size:1.5em;
	margin-top:0;
}


#main div.content div.home-img {
	width:400px;
	display:inline-block;
	margin:50px 5% 20px 0px;
	float:right;
	
}

#main div.content div.home-img img {
	max-width:100%; 
	height:auto;
	vertical-align:bottom;
} 




/* Navigation */

nav { 	
	position: absolute;
	top:0; left:0;
	margin-left:50%;
	margin-top:200px;
}

nav div { position:relative; z-index:1; }

nav::after { content:''; display:block; clear: both; }

nav div ul { list-style:none; margin:0; padding:0; }

nav div ul li a { 
	font: normal; 
	font-family: 'Amatic SC', cursive;
	font-size:40px;
	display:inline-block; 
	color:#fff;
	padding: 0px 50px 0px 0px;
	text-decoration: none;
	position: relative;	
}

nav div ul li a.last { 
	padding-right:0;	
}

nav div ul li a:visited { color:#fff; }
nav div ul li a:hover { color:#8CC63F; }



nav div ul ul { position:absolute; background-color:rgba(30,30,30,.65); display:none; left:100px; }
nav div ul ul li { margin-left:12px;}
nav div ul ul li a { padding-right:15px; }


nav div ul li:hover ul { display: block }



/* Top Level */

nav > div > ul > li { float:left; }




/* Footer */

footer { 	
	height:25vh;
	background-image:url(../images/floor-01.svg);
	background-repeat:no-repeat;
	background-size:auto 325%;
	background-position: 50% 100%;
}

footer div.content { 
	max-width:1200px;
	margin:0 auto;
	position:relative; 
}

@media screen and ( max-width:1200px ) {
	
	/* Main */
	
	#main div.content div.home-text {
		/*max-width:45%;*/
	}
	
	#main div.content div.home-img {
		width:40%;
	}
	
	
	/* Header */

	header div.content div.sign {
		margin: 0 auto;
}
	
	/* Navigation */

	nav { 
		position: static;
		height:50px;
		width:100%;
		margin:0 auto;
	}	
	
	nav div.content {
		width:453px;
		padding-top:8px;
		padding-left:25px;
		margin:0 auto;
	}	
	
	nav div ul ul { left:120px; }
	
}



@media screen and ( max-width:779px ) {
	
	/* Section - Main */
	
	#main div.content div.home-text {
		font-size:25px;
		width:45%;
		margin: 30px 0 0 20px;	
	}
	
	#main div.content div.home-img {
		margin:20px		
	}

}

@media screen and ( max-width:519px ) {
	
	/* Section - Main */
	
	#main div.content div.home-text {
		float:none;
		font-size:25px;
		width:90%;
		text-align:left;
		max-width:90%;
		margin:40px 0 30px 0;
			
	}
	
	#main div.content div.home-img {
		width:90%;
		margin:30px 0 0 0;;
		float:none;		
	}



@media screen and ( max-width:490px ) {
	
	/* Header */
	
	header {  
		height:205px;
	}
	
	header div.content div.sign {	
		width:290px; height:200px; 
		
	}
	
	header div.content div.sign h1 {
		font-size:26px;
		padding:105px 0 0 28px;
	}
	
	header div.content div.sign img { 
		width:70%; 
		margin:5px 0 0 45px;
	}
		
	/* Navigation */
	
	div.nav { 
		position:absolute;
		top:auto;			
		width:100%;
		margin:0 auto;
		height:448px;
	}
	
	div.nav div.content {		
		padding-left:0;
	}
	
	div.nav div ul li a {
		font-size:27px;
	}
	
	div#homeHeader div.nav { bottom:13%;}	
	div#logosHeader div.nav { bottom:7.24%; }	
	div#webHeader div.nav { bottom:12.2%; }
	div#printHeader div.nav { bottom:5.7%; }	
	div#emailHeader div.nav { bottom:11%; }
	div#contactHeader div.nav { bottom:15%; }
	
	nav div.content {  text-align:center; width:100%; }
	
	nav div.content ul li { border-top: 1px solid rgba(225,225,225,.3)}
	
	nav div.content ul li a { padding:10px; text-align:center;}
	
		
	nav div.content ul ul { position:relative; background-color:transparent; display:block; left:0px }
	
	nav div ul ul li { margin-left:0px;}	
	
	
	/* Top Level */
	nav > div > ul > li { float: none; }
	nav div.content ul li a[ title="Work" ] { display:none; } 
	nav div.content ul li.work { border:none; }
	
	
	
	/* Footer */
	
	footer { 
		height:300px;
		background-image:url(../images/floor-01.svg);
		background-repeat:no-repeat;
		background-size: 2500px 900px;
		background-position: 50% 90%;
		padding-top:448px
	}
	
}