*{font-family: "freight-micro-pro",serif; font-style: normal; font-weight: 400;  text-decoration:none; box-sizing: border-box;}
html{border-top:10px solid rgb(254,237,231);-webkit-font-smoothing: antialiased;}
body{margin:15px 0;color:#454E54;}
a {
  color: inherit;}
label{font-size:13px;background-color:rgb(254,237,231);padding:5px 5px 3px;}
h1{font-size:24px;color:#454E54;font-family: "freight-micro-pro",serif; font-style: normal; font-weight: 700;margin:0;}

nav{width:1100px; margin:25px auto 0;height:75px;}
nav:after{clear:both;}
#brand{float:left;}
#nav{float:right;}
#nav a:hover{background-color:rgb(254,237,231);transition: background-color .2s; transition-timing-function: ease-in-out;}
#nav ul{list-style:none; margin:0;}
#nav li{display:inline-block;}
#nav a{font-family: "ff-bau-web",sans-serif; font-style: normal; font-weight: 400;display:inline-block; padding:15px 15px 10px;transition: background-color .2s; transition-timing-function: ease-in-out;}

footer{width:1100px; margin:0 auto;padding:20px;}
footer h6{display:block;float:left;font-size:13px;margin:10px;font-family: "ff-bau-web",sans-serif; font-style: normal; font-weight: 400;}
footer a{padding:10px; display: block; font-size:13px;float:right;font-family: "ff-bau-web",sans-serif; font-style: normal; font-weight: 400;}
footer a.twitter{color:#00acee;}
footer a.instagram{color:#3f729b;}
footer a.dribbble{color:#ea4c89;}
 
section.full{width:100%;height:430px; transition: background-color .2s, background-position .2s; transition-timing-function: ease-in-out;}
section.full a{height:100%;display: flex; flex-direction: column; justify-content: center;}
div.content{width:1100px;margin:0 auto;display: flex; flex-direction: column; justify-content: center;}

/* Project Thumb Styles */
.bg-blue{background: url(assets/tm-one-thumb.png) no-repeat #009CDE;background-position:80% 60px;background-size: 600px;  color:#fff;transition: background-color .2s, background-position .2s; transition-timing-function: ease-in-out;}
.bg-blue:hover{background-color:#6FC6FA;background-position:80% 40px; cursor:pointer;}
.bg-mpgreen{background: url(assets/wage-phone-hand.png) no-repeat; background-color: rgba(44,176,75,1);background-position:80% 60px;background-size: 300px;  color:#fff;transition: background-color .2s, background-position .2s; transition-timing-function: ease-in-out;}
.bg-mpgreen:hover{background-color:rgba(44,176,75,0.70);background-position:80% 40px;}
.bg-hpblue{background: url() no-repeat;background-position:80% 60px;background-color:rgba(35,95,155,1); background-size: 600px;  color:#fff;transition: background-color .2s, background-position .2s; transition-timing-function: ease-in-out;}
.bg-hpblue:hover{background-color:rgba(35,95,155,0.7);background-position:80% 40px; cursor:pointer;}
.bg-latblack{background: url() no-repeat;background-position:80% 60px;background-color:rgba(72,75,76,1); background-size: 600px;  color:#fff;transition: background-color .2s, background-position .2s; transition-timing-function: ease-in-out;}
.bg-latblack:hover{background-color:rgba(72,75,76,0.7);background-position:80% 40px; cursor:pointer;}

.project-info{color:inherit;}
.project-info h2{font-size:42px;font-weight: 500; margin:0; }
.project-info p{font-size:21px; margin:16px 0; padding:0;}

/* Media Queries */
@media screen and (max-width: 1200px) and (min-width: 721px){
nav, div.content, footer{width:800px;}
}
@media only screen and (max-width: 767px) {
nav{width:100%;padding:0 15px;}
footer{width:100%;padding:20px 15px;}
nav h1{font-size:18px;}
nav li a{font-size:12px;}

div.content{width:100%}
section.full{height:300px;background-size: 350px;background-position:center 80px;}
section.full:hover{background-position:center 60px;}
section.full a{display:block;}
.project-info{background:rgba(0,0,0,0.2);padding:15px;}
.project-info h2 { font-size: 20px;}
.project-info p {display:none;}
}