@import "screen.css";
@import url(http://fonts.googleapis.com/css?family=Yantramanav:100);

body{
    color: #1C201F;
    font-family: 'Yantramanav', sans-serif;
}

a{
    text-decoration: none;
    color: #1C201F;
    border-style: none;
}

a:hover{
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
}

body{
    color: #1C201F;
}


/*--------- header ---------*/

header h1{
    text-align: center;
    font-size: 3em;
    margin: 0px;
}

nav li{
    list-style-type: none;
    display: inline-block;
    font-size: 1.2em;
    text-transform: uppercase;
}

nav a{
    padding: 3px 10px;
    margin: 0px;
}

nav ul{
    text-align: center;
    padding: 0px;
    margin: 0px 0px 20px 0px;
    min-width: 500px;
}

nav a:hover{
    color: #ffffff;
    background-color: #F3BD1C;
}

nav a:active{
    text-decoration: underline;
}


/*--------- main ---------*/

main>div{
    text-align: center;
    max-width: 770px;
    min-width: 260px;
}

main>div>img{
    display: inline-block;
    width: 250px;
    height: 250px;
    background-color: #8C959E;
    margin: 4px 2px;
}

main>div{
    margin: auto;
}


/*--------- footer ---------*/

footer{
    font-size: .9em
}

footer li{
    list-style-type: none;
    display: inline-block;
    margin: 40px 0px 0px 5px;
}

footer ul{
    text-align: center;
    padding: 0px;
}

footer p{
    text-align: center;
    margin: -15px 0px 15px 0px;
}

footer a:hover{
    color: #F3BD1C;
}



@media screen and (max-width: 511px){
    nav li{
        display: block;
        text-align: center;
    }
    nav ul{
        min-width: 0px;
    }
    
    footer li{
        display: block;
        margin: 0px;
    }
    footer p{
        padding-bottom: 20px;
        margin: auto;
        max-width: 240px;
        
    }
}