*{
     transition: all .25s ease-in-out ;
    -moz-transition: all .25s ease-in-out;
   -webkit-transition: all .25s ease-in-out;
}


html{
font-family: brandon-grotesque, raleway, sans-serif;
font-size: 85%;
color: #4b5554 ;}

nav li{
list-style: none;
display: inline-block;}

.nav-main,.nav-credits{
float: right;}

.nav-main li,
.nav-credits li{
margin-left:1.85em;}

.spotlight{
text-align: center;
}

a{
text-decoration: none;
text-transform: uppercase;
color:#69706f;
}

a:hover{
color:#000;
}

header{
padding: 60px 0;
}

h1{
font-weight: 100;
font-size: 2.5em;
margin-bottom: 1em;
}
    h1 strong{
    display: inline;}


h1 strong{
font-weight: 500;
}

h2{
font-size: 1.25em;
font-weight: 300;
line-height: 1.5em;
margin-bottom: 5em;}

.spotlight-image{
margin: 8em 0 10em;
    padding: 0;
}
.social li{
float: left;
    margin-right: 1em;
}
.logo{
padding: .5em 0;
display: block;

}
.nav-main li a{
padding: .5em 1.5em;
display: block;
border: 1px solid #fff;
border-radius: 60px;}


.nav-main li.cta a{
border: 1px solid #15cab8;}

.nav-main li a:hover{
  border: 1px solid #b0e738;
 color: #111;}

@media screen and (max-width: 720px) {
    
    
    .logo {
        text-align: center;
        display: block;
    }
     
    .nav-main li{
    margin: 0 .5em;}
    
    h1{
    font-size: 1.7em;
    line-height: 1.5em;}
    h1 strong{
    display: block;}
    
    h2{
    padding: 0 1em}
    .spotlight-image{
    padding: 0 2em;}
    .social{
    text-align: center;}
    .social li{
    float: none;
    }
    .nav-main, .nav-credits{
    float:none;
      text-align: center;}
    .nav-credits li{
    margin: 0 .5em;}
    footer{
    padding: 2em 0;}
    li.fb{
    margin-right: 2.35em}
    li.g{
    margin-top: -2px;}
}