/* CSS Document for Screens */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');

body {font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; color: #000000; margin: 0px 10px; padding: 0px 10px; }

#page { max-width: 1200px; position:relative; margin: 0 auto; }


/* Text */

h1 {margin: 0 1em 0 1em; font-size: 2.8em; font-weight: 700;}
h2 {margin: 0 1em 0 1em; font-size: 1.2em; font-weight: 600;}
h3 {margin: 0 1em 0 1em; font-size: 1.2em; font-weight: 400;}
h4 {margin: 0 1em 0 1em; font-size: .9em; font-weight: 400;}

p {margin: 0 0 0em 0;}

a {color: #007eFF;}
a:visited {color: #65b1ff}

/* Header */

header { height: 59px; background: #FFFFFF;}
header div {padding: 20px;}



/* Section - All */
section { padding: 0px; position: relative; margin: 0 auto; }
section::after { content:''; display: block; clear: both; }


/* Section - Main */

section.main { margin-top: 20px; margin-bottom: 30px; padding: 0;}
section.main aside {width:85%; position: relative; margin: 0 auto;}
.reel {
    padding-bottom: 56.25%;
}
.reel iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    border:0;
}

section.main aside img.drew {width: 49%; display: inline-block;}
section.main aside div.contact {width: 49%; display: inline-block; vertical-align: top;}
section.main aside a {display: block;}

/* Section - Gallery */

section.gallery {width:95%; position: relative; margin: 0 auto; }

section.gallery {margin-top: 20px; margin-bottom: 30px; padding: 0; float:center;}
section.gallery aside {width:100%; float: left; position: relative; margin: 0 auto;}

section.gallery aside div {
    margin:-1.7px 1.6%;
    width: 30%;  
    float:left;
    position: relative;
}

section.gallery aside div class="title2" {
    text-decoration: bold; 
    color: rgba(0,0,255,.0);
    
    
}

section.gallery aside div a {
    text-decoration: none; 
    color: rgba(0,0,0,.0);
    
    
}

section.gallery aside div h2{
    position: absolute; 
    top: 80%; 
    left: 0;
    padding-left:4px; 
    background-color: rgba(0,0,0,.0);

}
section.gallery aside div h3{
    position: absolute; 
    top: 0px; 
    padding:0 4px;
    background: rgba(0,0,0,.0);

}

section.gallery aside div h4 {
    position: absolute; 
    bottom:5px;
    padding-left: 4px;
    padding-right: 6px;
    background: rgba(0,0,0,.0);
}


section.gallery aside div img {width: 100%; height: auto;}

/* Individual page gallery */
section.gallery1 {float:center;}

section.gallery1 aside { margin:1px; width: 10%;  
    float: center; 
    text-align:center; 
}
section.gallery1 aside div img {width: 100%; height: auto; float: center;}

/* Navigation */

nav { 
	position: absolute;
	top: 0px; left; 0px;
	padding: 10px 0 0 0;
	width: 100%;
 }

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

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

nav ul li:hover > ul { display: block; }


nav ul li a { 
	display: inline-block;
	color: #000000;
	padding:10px 20px;
	text-decoration: none;
	position: relative;
    width: 125px;
 }

nav ul li a:visited { color: #000; }
nav ul li a:hover { color: #252;  }


/* Top Level */

nav > ul { padding-left: 0px; }

nav > ul > li { float: left; }

nav > ul > li > a { width: auto; padding:10px 17px 15px 17px; }



/* Footer */

footer {font-size: .8em; margin:10px; float:right;}
footer .content {width: 100%; margin:0px, auto;}

footer a { margin-left: 20px; color: #777;}
footer a:visited { color: #777;  }
footer a:hover { color: #000;  }


/*  Media Queries  */

@media screen and (max-width:1000px) {
		
		h1 { font-size: 2.4em; }
		
}

@media screen and (max-width:825px) {
		
		h1 { font-size: 2.2em; }
		
    /* Section - Gallery */
        section.gallery aside {width: 49%; float: left; text-align:left;}
		
}

        section.gallery1 aside {width: 49%; float: left; text-align:left;}
		
}
@media screen and (max-width:760px) {
		
		h1 { font-size: 1.8em; }
		h2 { font-size: 1.4em; }
		h3 { font-size: 1.1em; }
		a.btn { font-size: 1em; }
  
		
		
		
		/* Section Main */
		section.main { margin-top: 10px; margin-bottom: 10px; }
		section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }
    
}

@media screen and (max-width:650px) {
		
		h1 { font-size: 1em;}
		h3 {margin-bottom: 0px}

		/* Header */
		
		
		header {background-color: #FFFFFF;}
		
		 
		
		/* Section - Main */
		section.gallery aside { width: 100%; float: none; text-align: left; }
		section.gallery aside div.content { 
			margin: 8px 20px 8px 0px;
			padding: 5px 0px 10px 85px;
			background-size: 50px 50px;
			background-position: 20px 5px;
		
		 } 
		 
        section.gallery1 aside { width: 100%; float: none; text-align: left; }
		section.gallery1 aside div.content { 
			margin: 8px 20px 8px 0px;
			padding: 5px 0px 10px 85px;
			background-size: 50px 50px;
			background-position: 20px 5px;
		
		 } 

		
		/* Navigation */
		nav { position: static; width: auto; padding: 20px 15px; background-color: #FFFFFF;}
		
    
		nav ul { display: block; position: static; float: none;}
		
		nav > ul { padding: 0; }
		nav > ul > li { float: none; margin-top: 25px;}
		
		nav ul li:hover { background:none; }
		
		nav ul li a { 
			width: auto;
			display: block;
			margin: 8px 10px;
			padding: 8px 15px;
			border: 1px solid rgba(255,255,255,.25);
		 }
		
		nav ul li a:hover { background-color: rgba(255,255,255,.2);}
		
		/* Footer */
		
		footer div.content { display:block; margin-top: 15px; }
		
		footer div.content a { margin: 0 20px 0 0; }


}


@media screen and (max-width:560px) {
		
section.main aside img.drew {width: 100%; display: inline-block;}
section.main aside div.contact {width: 100%; display: inline-block;}
section.main aside a {display: block;}	
}
@media screen and (max-width:425px) {    
		/* Footer */
		
		footer::after { content:''; display: block; clear: both;}
		
		footer div.content a { 
			display:inline-block; margin: 0 0 10px 0;
			float: left;
			clear: both;
			
		}
		

}