/* fonts */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2');
}


/* fonts */

/* style reset*/

*{
	padding: 0;
	margin: 0;
}

a:link,a:active{
	color: black;
	text-decoration: none;
}

ul{
	list-style-type: none;
}

/* end of reset*/

body{
	font-family: "Open Sans", "Avenir Next", "Helvetica Neue", sans-serif;
    text-align: center;

}



/* nav bar */

#nav{
	width: 100%;
    overflow: hidden;
} 

#nav a img:hover{
    -webkit-filter:invert(75%);
    filter:invert(75%);
    -webkit-transition:-webkit-filter .25s;
    -moz-transition:filter .25s;
    -o-transition:-webkit-filter .25s;
    transition:filter .25s;
    
}

#nav a img{
    -webkit-filter:invert(0%);
    filter:invert(0%);
    -webkit-transition:-webkit-filter .25s;
    -moz-transition:filter .25s;
    -o-transition:-webkit-filter .25s;
    transition:filter .25s;
}


#navright{
	background-color: #fff;
    margin: 2%;
    padding: 1%;
    float: right;
    width: 46%;
    border-bottom: .1em solid #1f1f1f;
} 

#navright ul{
    width: 80%;
    overflow: hidden;
    padding: 0 10%;
}

#navright li{
    float: left;
    width: 25%;
}



#navright li img{
    width: 50%;
    max-width: 50px;
}

#navleft{
    margin: 0 0 0 11.6%;
    padding: 0 1% 0 0;
    float: left;
    width: 34%;
    text-align: left;
}

#navleft a{
    display: block;
    overflow: hidden;
}


#navleft img{
    padding-top: 1%;
    width: 80%;
    max-width: 500px;
    min-width: 150px;
}






/* gallary */

.blocks{
    clear: both;
    max-width: 1500px;
    margin: 0 10%;
    padding: 0  1%;
    overflow: hidden;
    
}

.block-wrap{
    max-width: 1500px;
    float: left;
    color: #fff;
    margin: 2%;
    
}

.block-wrap a{
    color: #fff;
    text-decoration: none;
}


/* we did not learn this stuff in class but it is for resizing or reposition things based on the browers window size. This will make it so the boxes reposition when the screen get to small */

@media (min-width:1000px){
    .half{
        width: 46%; 
    }
}

/* resizing stuff ends here*/




/* Note in this section that I am working with transition and filters. Based on w3schools I think that I have done this correctly to work in all browsers but I will need to test to make sure. Also the filters are forsure CSS3 based on w3school but I was not 100% positive abou the transitions. It did not have anything saying it was not or that it was out of date but I am not totally sure.  */

.block{
    background: #1f1f1f;
    position: relative;
    overflow: hidden;
}

.block:hover .text-section{
    opacity: 0;
    -webkit-transition:opacity .25s;
    -moz-transition:opacity .25s;
    -o-transition:opacity .25s;
    transition: opacity .25s;
}

.block:hover img{
    -webkit-filter:grayscale(0%);
    filter:grayscale(0%);
    -webkit-transition:-webkit-filter .25s;
    -moz-transition:filter .25s;
    -o-transition:-webkit-filter .25s;
    transition:filter .25s;
    
}

.block .text-section{
    width: 40%;
    padding: 5%;
    position: absolute;
    background: #1f1f1f;
    top:0;
    bottom: 0;
    opacity: 1;
    overflow: hidden;
    -webkit-transition:opacity .25s;
    -moz-transition:opacity .25s;
    -o-transition:opacity .25s;
    transition:opacity .25s;
    z-index:1;
    
    
}

.block h2{
    margin: 0 0 2% 0;
    font-size: 2em;
    font-weight: 300;
    text-transform: uppercase;
    border-bottom: solid #fff .01em;
}

.block p{
    padding-top: 5%;
    font-size: 1.1em;
    font-weight: 300;
}

/* sizing again so that fonts get smaller so text idealy fits within containing box*/
@media (min-width:1000px){
    .half .block h2 {
    font-size: 1.2em;
    font-weight: 300;
}
    .half .block p{
        font-size: .9em;
    }
}

@media (max-width:1000px){
    .block h2 {
    font-size: 1.2em;
}
    .block p{
        font-size: .9em;
    }
}
@media (max-width: 500px){
    .block p{
        visibility: hidden;
    }
    
}


.block img{
    max-width: 100%;
    display: block;
    -webkit-filter:grayscale(100%);
    filter:grayscale(100%);
    -webkit-transition:-webkit-filter .25s;
    -moz-transition:filter .25s;
    -o-transition:-webkit-filter .25s;
    transition:filter .25s;
}