#wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
    margin-bottom: -50px;}

/* shadow on scroll */
.main-header {
  transition: .10s;
  -moz-transition: .10s;
  -webkit-transition: .10s;

  font-weight:100; 
    z-index: 100;
    width:100%;
    position:fixed;
    /*background:#F2F4F7;*/
     background:white;
    height:100px;
   /* box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    opacity:.97;
    transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}

.box-shadow {
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}


/* shadow on scroll end */


body{	
    font-family: 'Open Sans Condensed', sans-serif;
    font-family: 'Lato', sans-serif;
    margin:0;
    overflow-x: hidden; 
    height:100%;
    position:relative;
   padding:0;

}


h1{
    text-shadow: 2px 2px;

}

        
.button {       
    position:absolute;
    left:75%; 
    z-index:0; top:70%;
    background:none;
    border:solid 1px white;
    color: white;
    padding: 20px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    cursor: pointer;
    transition:ease-out 0.4s;
           
}

.button:hover {   
    border-radius: 20px;
    transition: 0.2s ease-in;
        
}


#splashvid {
    margin:0;
    opacity:.3;
    left:-120px;
    width: 1600px;
    max-height: 120%;
    height: 120%;
    position:absolute;
    top:-20%;
    
}



   
.fade {


  opacity: 1;
}

h1, h2, h3,h4 {
            
    font-family: 'Open Sans Condensed', sans-serif;
    font-family: 'Lato', sans-serif;
    font-weight:bold;
        
}
        
p,header,textarea, #cancel,#submit, input , a {
            
    font-weight:100; 
  
}




   


.row::after {
    
    content: "";
    clear: both;
    display: table;
}



h2 {

	font-size: 40px;
	text-transform: uppercase;
	margin-bottom: 5%;
}

h3 {
	
	font-size: 1.8vw;
	line-height: 10vh;
	color:black;
}

p {  
     padding-bottom:5%; 
	font-size: 15px;
	font-weight: 100;
	margin-bottom: 2%;
	line-height: 3vh;
}

.container {
	margin-top: 0 ;
    margin-right:6%;
    margin-left:6%;
    margin-bottom:6%;
}





a{
    font-weight:100;
}

#menu-icon {
    
    display: none;
    margin:0;
 
}
   
#resume a{
     transition:ease-out 0.3s; 
    text-decoration: none;
   
color:black;
    
}
#resume a:hover{
opacity: .6;
}

#about3 a{
      transition:ease-out 0.3s; 
    text-decoration: none;
    color:black;
}
#about3 a:hover{
     opacity: .6;
}

#proj a{
      transition:ease-out 0.3s; 
    text-decoration: none;
    
    color:black;
}
#proj a:hover{
        opacity: .6;

    
}
nav {
    font-size:17px;  
    margin-top:60px;
    margin-right:1%;
    float: right;   
    height:90px;
    z-index:2000;
   
  
} 

    

nav ul {
    
   	margin: 0;
    margin-top:-30px;
    padding: 0;
    list-style-type: none;
    list-style-position: inside;
}

nav li {
          

    display: inline-block;
    padding: 10px;
}



nav li a {

       font-family: 'Lato', sans-serif;
    font-weight: 900; 
    color: #1C1B1B;
    text-decoration: none;
      
}



}
/* Home Page Styles */       
.splash {
	width: 100vw;
	height: 100vh;
}



[class*="col-"] {
    
    width: 100%;
}

[class*="col-"] {
    
        float: left;
    padding-left:40px;
}

* {
	box-sizing: border-box;
}


* {
border: 0 none;
margin: 0;
} 


#about {
   

    
	padding-right: 15px; 
	text-align: justify;
    padding-top:20px;
    
}

.abouttitle{

    font-size:30px;
    padding-top:10px;

    

}


#ports{
    
    
}
#portback{
      

}

#portback2{
      
 

}


#portfolio{
  
}

#portfolio h2 {
    font-size:60px; 
    padding-top:50px;
    color:black;
    text-align: center;
	margin-bottom: 2%;

}


#portfolio2{
 
}

#portfolio2 h2 {
     font-size:60px; 
    padding-top:50px;
    color:black;
    text-align: center;
	margin-bottom: 2%;

}

.img__wrap {
  
    position: relative;
   
    height: 210px;
    width: 323px;
   
    transition: all .2s ease-in-out;



}

.img__wrap:hover {
  
transform: scale(1.02);
}

.img__description {
  
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 60px;
    right: 0;
    text-align: center;
    background-repeat:no-repeat;
    background-size:250px;
    height:193px;
    -webkit-transform: scale(1.3);
    -ms-transition: all 200ms ease-in;
    z-index: 1;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    
}

.img__wrap:hover  .img__description {
    
    cursor: pointer;
    visibility: visible;
    opacity: 1;
    transition:0.4s ease-in;
}

.img__wrap:focus  .img__description {
   
    visibility: visible;
    opacity: 1;
    transition:0.4s ease-in;

}



          
.flex-container {
  
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content:  space-around;
       padding-bottom:60px;
 
 
}

.flex-item {
    width: 360px;

    height: 270px;
    color: white;

 
}




.social {
	margin-top: 13%;  
    font-size: 1em;
}


#contact h3 {
   
	line-height: 6vh;
	color: black;
	font-size: 2vw;
}

#contacttitle{
    font-size:60px;
    padding-top:80px;
    text-align: center;
}



footer {
font-weight:300;
    font-family: 'Lato', sans-serif;
	color: black;
	text-align: center;
	  height:60px;
    
   
}



#cancel:hover {
	color:#fff;
	background-color: #000;
	opacity:0.9;
    cursor: pointer;
   
}
        


#limg {
       
    transition:ease-out 0.3s; 
}

#limg:hover{
 
    transform:scale(.85);
    transition: transform 300ms ease-in;
}


#limg2 {
       
    transition:ease-out 0.3s; 
}

#limg2:hover{
 
    transform:scale(.85);
    transition: transform 300ms ease-in;
}

#limg3 {
       
    transition:ease-out 0.3s; 
}

#limg3:hover{
 
    transform:scale(.85);
    transition: transform 300ms ease-in;
}


#limg4 {
       
    transition:ease-out 0.3s; 
}

#limg4:hover{
 
    transform:scale(.87);
    transition: transform 300ms ease-in;
}

#timg{
       
    transition:ease-out 0.3s; 
}

#timg:hover{
 
    transform:scale(.85);
    transition: transform 300ms ease-in;
}



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

    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    
      
    body{
        
        overflow-x: hidden;
    }
    
    #push {
  padding: 300px;
}
}

@media screen and (max-width:480px) {

    #email3{
        width:65%;
    }
     #message2{
        width:65%;
    }
    
    
    .flex-container{
        margin-right: 37px;
    }
  
    
    
    .button{
        position:absolute;
        left:0%;
    }
    body{
        overflow-x: hidden;
    }
  
    
    #splashback{
        
        background-size:10%;
    }
     
    form {
        margin-left:5px;
        width:80%;
    }
 
     .robot{
           font-size: 5vw;
           left: 30%;
        }
    
    
     .robot img{
            
         width:150px;
         height:auto;
       
        } 
    

     
    .home {
    	height: 60vh
    }        

    h1 {
    	
        font-size:3vw;
        }

    h2 {
    	font-size:50px;
    }  
    
    h3 {
    	font-size:6vw;
  
    }    
    .home h2 {
    	font-size:2vw;
    } 

    

    form {
        width:100%;
    }

    input {
    	font-size:3.5vw;
    }

   
    #portfolio{
        margin:0;
    }
	
	.contact {
		text-align: center;
		margin-bottom: 10%;
	}

	.contact h3 {
		font-size: 4vh;
	}
}


@media screen and (min-width:481px and max-width:768px) {
            
    form {
        width: 90%;

    }
     body{
        overflow-x: hidden;
    }

    input {
    	font-size: 2vw;
    }
    

    }

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

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 49%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
      body{
        overflow-x: hidden;
    }
    

}

@media only screen and (max-width: 790px) and (orientation: landscape) {
    
     body{
        overflow-x: hidden;
    }

	h1 {
		top: 40%;
	}

	h3 {
		margin: 2% 0;
		font-size: 5vw;
	}
    .home {
        height: 100%
    }

    p {
    	line-height: 3vh;
    }

   

    .contact {
    	text-align: center;
    	margin-bottom: 10%;
    }

    .contact h3 {
    	font-size: 5vw;
    }
    
    form{
     margin-right:30%;
    }

     #resume{
         top:530px;}
    #res{
        height:420px;
    }
   
}

 @media screen and (max-width:650px) {
     
         #email3{
        width:65%;
    }
     #message2{
        width:65%;
    }
    
       #res{
        height:740px;
    }
     #resume{
        top:890px;
         position:absolute;
   left:75px;
     }
     
     #draw{
         margin-right:150px;
     }
     
     body{
         overflow-x: hidden;
     }
    
     #name{
         width:300px;
     }
    
     #menu-icon {
        display: block;
        text-decoration: none;
        color: black;
        font-size: 40px;
     }
     
     #menu-icon:hover{
         color:#818181;
     }
      
    nav ul,
    nav ul:active {
        display: none;
        position: absolute;
        top: 65px;
        right:40px;
        width: 300px;
        max-width: 230px;

       
       
    
    }
     body{
        overflow-x: hidden;
    }
    nav li {
        text-align: center;
        width: 100%;
        padding: 4px 0;
        margin: 0;
    }
    
    nav:hover ul {
         display: none;
    }
      
    }
/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 500; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 1); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 15%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
   font-weight: 800; 
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
  font-weight: 500; 
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}