/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic, 700italic,300,700');*/
@import url('https://fonts.googleapis.com/css?family=Anton|Work+Sans:300italic, 700italic,300,700');
body {
    font-family: 'Open Sans', sans-serif; 
    font-size:16px;
    font-weight:300;
    color:#555;
    margin: 0;
    padding:0;
}
#page {
    max-width:1200px;
    margin:0 auto;
    position:relative;
    
}
.secrets {
	color:red;
}

p.footer {
text-align:center;
margin-top:15px;	
}


/*TEXT*/

h1 {
    margin:0 0 0.5em 0;
    font-size:2.8em;
    font-weight:700;
    text-align:center;
	
}

h2 {
    margin:0 0 0.5em 0;
    font-size:1.6em;
    font-weight:700;
    line-height:1.1em;
	text-align:center;
	
	
    
}

h3 {
    margin:0 0 0.5em 0;
    font-size:1.1em;
    font-weight:700;
	text-align:center;
    
}


h4 {
    margin:0 0 1.5em 0;
    font-size:1em;
    font-weight:700;
    
}

p {
    margin: 0 0 1em 0;
    
}
#summary p {
margin-left:60px;
margin-right:60px;
width:90%;	
margin-bottom:25px;
}

nav a:visited {
    color:#fff;
}






header {
    height:220px;
    background:#004a80;
    position: relative;
		-moz-box-shadow: 0px 3px 3px #888;
-webkit-box-shadow: 0px 3px 3px #888;
    }

header a.logo {
    position:absolute; 
    display:block;
    width:250px;
    height:250px;
    background: url(../img/logo.png) no-repeat 0 0;
    background-size:contain;
    top:30px;
    left:50px;
	z-index:1;
    
}
header a.logo span {
    display:none;
    
}

header div.hero{
    position:absolute;
    width:42%;
    top:130px;
    left:55%;
    }

header div.hero h1 {
    line-height:1em; 
    margin 0 0 30px 0;
    color:#fff;
}

/* section main */


section.main {
    margin-top:20px;
    margin-bottom:30px;
    padding:0;
}

section.main aside {
    width:33%;
    float:left;
    text-align:center;
}
section.main .content {
    margin:15px;
    background:no-repeat center top;
    background-size:75px 75px;
    padding-top:85px;
}
section.main aside h3 a {
color:#000; 
text-decoration:none;
}

section.main aside h3 a:hover {
text-decoration:underline;
color:red;
}

section.main aside p {
	font-size:0.9em;
}

section.main aside .content.development {
	background-image:url(../img/web.svg);
}

section.main aside .content.graphics {
	background-image:url(../img/3d.svg);
}

section.main aside .content.database {
	background-image:url(../img/database.svg);
}
section.main aside .content.idesign {
	background-image:url(../img/idesigns.svg);
}

section.main aside .content.prog1 {
	background-image:url(../img/prog.svg);
}
section.main aside .content.prog2 {
	background-image:url(../img/advanced.svg);
}

section.main aside .content.human {
	background-image:url(../img/hman.svg);
}

section.main aside .content.project {
	background-image:url(../img/comp.svg);
}

section.main aside .content.web {
	background-image:url(../img/web.svg);
}

section.main aside .content.video {
	background-image:url(../img/video.svg);
}
section.main aside .content.work {
	background-image:url(../img/place.svg);
}
section.main aside .content.iidesign {
	background-image:url(../img/interface.svg);
}


/* navigation */

nav li {
	list-style:none;
	float:right;
	margin-top:170px;
	margin-right:10px;
	text-align:center;
}

nav li a {
display:inline;	
padding-right:20px;
padding-left:20px;
text-decoration:none;
color:#fff;

}

nav ul li:hover {
		background-color:rgba(0,0,0,0.2);
		}

/* footer */
		
		footer {
			font-size:.8em;
			margin:40px;
			color:#999;
			width:100%;
		}
		
		footer.content {
			display:inline;
			}
		
		footer a {
		margin-left:30px;
		color:#777;		
		}
		footer a:visited {
		margin-left:30px;
		color:#777;		
		}
		footer a:hover {
		margin-left:30px;
		color:#000;		
		}



@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;
			}
			
			/*header*/
			
			header a.logo {
				width:200px;
				height:200px;
			
			}
			
			
			
			
			/* 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:670px){
			
			
				
			h1 {
			font-size:1.4em;	
			}
			h2 {
			font-size:1.3em;	
			}
			h3 {
			font-size:1.1em;	
			}
			#summary p {
margin-left:20px;

width:90%;	
}
			
		header {
			height:220px;
			background:#004a80;
			position: relative;
		}
			
			
			
			section.main {
				margin-top:10px;
				margin-bottom:10px;
				margin-left:40px;
				
			}
			
			section.main aside {
				width:100%;
				margin-right:20px;
			}
			
			section.main aside h3{
				text-align:left;
				margin-left:210px;
				padding-top:10px;
			}
			section.main aside p {
				text-align:left;
				margin-left:210px;
			}
			
			section.main aside div.content {
				background-size:140px 100px;
				background-position:left;
				padding-top:60px;
			}
			  
	nav {
			position:static;
			width:auto;
			padding:15px 15px;
			
		}
	 nav a {
		 font-size:.9em;
	 }
		
		}
		
		
		@media screen and (max-width:440px){
			
			h1 {
			font-size:1.4em;
			text-align:left;
			}
			h2 {
			font-size:1.3em;
			text-align:left;
			}
			h3 {
			font-size:1.1em;	
			}
			
			header{
			height:260px;
			background-color:#004a80;
			background-position: bottom center;
			
		}
		header a.logo {
		width:100%;
		height:200px;
		width:260px;
		left:70px;
		top:10px;
		
		background-size:260px 200px;
		background-position:center;
		}
			
	#summary p {
margin-left:5px;
margin-top:30px;
	
}		
		
	
	/* section main */
		
section.main {
    margin-top:20px;
    margin-bottom:20px;
    padding:0;
}

section.main aside {
    width:100%;
    float:left;
    text-align:center;
	
	margin:3px;

}

section.main .content {
    margin:10px;
    background:no-repeat center top;
    background-size:80px 80px;
	
    padding-top:200px;
}
section.main aside h3 a {
color:#000; 
text-decoration:none;
font-size:1em;

}

section.main aside p {

font-size:0.8em;

}

section.main aside h3 a:hover {
text-decoration:underline;
}


nav li {
			position:static;
			margin-top:190px;
			padding:5px 5px;
			margin-right:18px;
			
		}
nav li a {
font-size:0.9em;
padding-left:5px;
padding-right:5px;
}	
		}
    
    @media screen and (max-width:340px){
      
        nav li {
			position:static;
			margin-top:190px;
			padding:5px 5px;
			margin-right:10px;
			
		}
nav li a {
font-size:0.7em;
padding-left:5px;
padding-right:5px;
}	
        
    }