@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);

/*  =========================================================================
    Helper classes
    ========================================================================= */

/* Add the .hidden class to any elements that you want to hide
    from all presentations, including screen readers. It could be an element
    that will be populated later with JavaScript or an element you will hide
    with JavaScript. Do not use this for SEO keyword stuffing.
    That is just not cool. */

    .hidden {
        display: none !important;
        visibility: hidden;
    }

/* Add the .visuallyhidden class to hide text from browsers
    but make it available for screen readers. You can use this to hide text
    that is specific to screen readers but that other users should not see. */

    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

/* Adding .clearfix to an element will ensure that it always
    fully contains its floated children. There have been many variants
    of the clearfix hack over the years, and there are other hacks
    that can also help you to contain floated children, but the HTML5
    Boilerplate currently uses the micro clearfix. */

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

/*  =========================================================================
    Your CSS
    ========================================================================= */

    * { box-sizing: border-box; }
	html {
         position: relative;
         min-height: 100%;
        }

    body { 
	     font-size: 16px;
		 font-family: 'Josefin Sans', sans-serif;
	     color: rgba(151,93,105,0.99);
	}
	.oh {
        overflow: hidden;
		width:100%;
		margin:auto; 
       }
	
   h2{
		font-size:1.5em;
	}
	h3{
		font-size:1.125em;
	}
	a {
	color:#B4B4B4;
	text-decoration: none;
	outline: none;
	}
	
	a:hover {
		color: rgba(217,141,146,0.92);
	}
	
	.nav{
		float:right;
		height:3.2;
	}
	.nav ul{
		margin-bottom:1em;
		float:left;
	}
	
	.nav li{
		display:inline;
		font-size:1.3em;
		padding:1em;
	}

    
/*  =========================================================================
    header
    ========================================================================= */
	header{
		background:url(../img/header-banner300.jpg) no-repeat center;
		width:100%;	
	}
	 h1{
		width:30%;
		text-align:center;
		display:block;
		margin:2em 8.6em;
		font-size:1em;
	}
	
	
/*  =========================================================================
    about
    ========================================================================= */
	
	#bio{
		width:85%;
		margin:auto 1em;
	}
	#bio p{
		text-align:center;
	}
	#bio img{
		display:block;
		margin:auto;
		width:60%;
		height:60%;
	}
	
/*  =========================================================================
    education
    ========================================================================= */
	#education{
		width:90%;
	}
	#education h2{
		margin-left:.5em;
	}
	#eduction ul{
		list-style-type:none;
	}
   #education li{
	   display:inline;
	   width:100%;
	   padding:0.625em;
	}
		
/*  =========================================================================
    skills 
    ========================================================================= */
	#skills{
		width:90%;
	}
	#skills h2{
		margin-left:.5em;
	}
	#skills img{
		display:block;
		margin:auto;
	}
	#skills p{
		text-align:center;
		width:100%;
		margin-left:1em;
	}
/*  =========================================================================
    experience
    ========================================================================= */
	#experience{
		width:90%;
		margin:auto;
	}
	#experience h2{
		margin-left:.5em;
	}
	
		
/*  =========================================================================
    interests
    ========================================================================= */
	#likes{
		width:90%;
		margin:auto;
	}
	#likes h2{
		margin-left:.5em;
	}
	#likes ul{
		list-style-type:none;
		padding:0;
		margin-left:1.5em;
		width:90%;
	}
	#likes li{
		display:inline;
		width:50%;
		float:left;
	}
	.icon-cafe, .icon-theatre, .icon-airport, .icon-camera-4{
		font-size:1.5rem;
		text-align:center;
	}
/*  =========================================================================
    contact
    ========================================================================= */
	
	#form{
		width:90%;
		margin:auto;
	}
		
	#contact{
		width:90%;
		margin:auto;
	}
	#contact h2{
		margin-left:.5em;
	}
	#contact ul{
		list-style-type:none;
	}
		
	#contact li{
		padding:0.625em;
	}
	#contact a{
		color:rgba(170,170,170,1.00);
		font-size:1.2em;
	}
	#contact a:hover {
	color: rgba(217,141,146,0.92);
	}
	.icon-mail-4, .icon-phone, .icon-linkedin-1, .icon-twitter-1, .icon-facebook-1{
		font-size:1.2em;
	}
		
	
/*  =========================================================================
    footer
    ========================================================================= */
    
    .footer{
		background:#CCCCD6;
		height:2.5em;
		position: absolute;
        bottom: 0;
        width: 100%;
        clear: both;
	}
	small{
		padding:0.625em;
		width:70%;
		margin:auto;
		display:block;
	}
	
	/*  =========================================================================
    index
    ========================================================================= */
	
     #portfolio{
		 width:95%;
		 margin-top:1em;
	 }
		
	
	

/*  =========================================================================
    media queries
    ========================================================================= */
	
	@media screen and (min-width: 27.5em){
		
	h1{
		margin-right:10em;
		margin-left:8em;
		font-size:1.2em;
	}
	
	#bio img{
		width:50%;
		height:50%;
	}
 }


	@media screen and (min-width: 30em){
		
		h1{
			margin-left:9em;
		}
		
 }


	@media screen and (min-width: 33.125em){
		h1{
			margin-left:9.5em;
		}
 }

	
	@media screen and (min-width: 34.375em){
		h1{
			margin-left:10em;
			font-size:1.5;
		}
 }
	
	
	@media screen and (min-width: 34.375em){
		h1{
			margin-left:10.5em;
			font-size:1.2em;
		}
		
 }
 
	@media screen and (min-width: 37em){
		header{
			background:url(../img/header-banner500.jpg) no-repeat center;
		}
		h1{
			margin: 2em 6.75em;
			font-size:2em;
		}
	}
	
	@media screen and (min-width: 42.5em){
		h1{
			margin-left:7.75em;
		}
		
	}
	
		@media screen and (min-width: 48.125em){
			h1{
				margin-left:9.5em;
				font-size:1.8em;
			}
			#bio img{
				max-width:379px;
			}
			
			#education li {
				width:32%;
				float:left;
				margin:auto;
				
			}
			#experience{
				width:45%;
				float:left;
				
			}
			#skills{
				width:42%;
				float:right;
				margin-right:1em;
				height:530px;
				
			}
			 .grid-gallery{
				 width:90%;
				margin:2em;
				float:left;
			}
			#likes li{
				width:20%;
			}
			#contact{
				width:40%;
				float:right;
				margin:1em;
			}
			
			#form{
				width:50%;
				float:left;
				margin:1em;
			}
			
			
	}
	
		
		@media screen and (min-width: 52.75em){
			h1{
				font-size:2em;
			}
			small{
				width:50%;
			}
	}
	
		@media screen and (min-width: 57.8125em){
			h1{
				margin-top:3em;
			}
			#bio img{
				float:left;
				margin:1em;
				width:35%;
			}
			#bio p{
				float:right;
				margin-top:3em;
				padding:.625em;
				width:60%;
				text-align:left;
			}
			
	}
	
		@media screen and (min-width: 60.625em){
			
			header{
				background:url(../img/header-banner900.jpg) no-repeat center;
				width:100%;
			}
			h1{
				margin:4em 8em;
				width:50%;
			}
				
	}
	
		@media screen and (min-width: 62.5em){

			#wrap{
				max-width:1000px;
				margin:auto;
				height:auto;
			}
             h1{
				max-width:700px;
				font-size:2.25em;
				text-align:center;
			}
			
			
			
			#bio img{
				float:left;
				max-width:321px;
			}
			#bio p{
				float:right;
			}
			
		   #education li{
			   max-width:320px;
			   padding:10px;
			}
			
			#skills{
				text-align:left;
				height:500px;	
			}
		
			#contact{
				width:400px;	
			}
			#contact a{
				font-size:1rem;
				padding:0;
			}
		
			
			.footer{
				height:40px;
			}
			small{
				width:500px;
			}
			
			#portfolio{
				width:100%;
				margin:auto;
			}
		   
			#portfolio li{
				width:30%;
			}
			
				
	}