body{

    display: flex;

    align-items: stretch;

    height: 100vh;

    font-family: 'Signika', sans-serif;

    overflow-x: hidden;

}

nav{

    background-color: rgb(226,225,241);

    text-align: center;

    flex:2;

}

nav img{

    max-width: 70%;

    height:auto;

    display: block;

    margin: 20px auto;



}

nav ul li{

    list-style: none;

}

.nav>li>a:focus, .nav>li>a:hover{

    background-color: rgb(247,246,255);

}

h1{

    font-size: 48px;

}

#agenda{

    padding: 15px;

    text-align: center;

    flex:3;

    background-color: rgb(247,246,255);

    overflow-y: scroll;

}

#agenda article{

    padding: 15px;

    border-top:none;

    border-color:rgb(226,225,241,1);

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */

    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%); /* FF3.6-15 */

    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 100%); /* Chrome10-25,Safari5.1-6 */

    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

#logos{

    -webkit-box-shadow:inset 3px 0 15px 0 rgba(0,0,0,.25);

    box-shadow:inset 3px 0 15px 0 rgba(0,0,0,.25);

    background-color: #f8f8f8;

    flex:7;

    display: flex;

    flex-direction: column;

}

#logos ul{

    padding: 0;

    margin: 0;

    flex: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-flow: row wrap;

    align-content: center;

}

#logos ul li{

    padding: 0;

    margin: 0;

    max-width: 25%;

}

#logos ul li img{

    padding: 0;

    margin: 0;

    max-width: 100%;

    height: auto;

    display: block;

    position: relative;

    -webkit-transition: all 200ms ease-in;

    -webkit-transform: scale(1);

    -ms-transition: all 200ms ease-in;

    -ms-transform: scale(1);

    -moz-transition: all 200ms ease-in;

    -moz-transform: scale(1);

    transition: all 200ms ease-in;

    transform: scale(1);

}

#logos ul li img:hover

{

    box-shadow: 0px 0px 50px rgba(0,0,0,.5);

    z-index: 2;

    -webkit-transition: all 200ms ease-out;

    -webkit-transform: scale(1.15);

    -ms-transition: all 200ms ease-out;

    -ms-transform: scale(1.15);

    -moz-transition: all 200ms ease-out;

    -moz-transform: scale(1.15);

    transition: all 200ms ease-out;

    transform: scale(1.15);

}

#logos #banner{

    background-color: #ae3335;

    flex: 1;

    align-items: center;

    display: flex;

    justify-content: space-around;

}



#banner img{

    height: 180px;

    max-height: 90%;

    width: auto;

    float: left;

}

#banner a{

    float: right;

    padding: 10px 20px;

}





/* width */

::-webkit-scrollbar {

    opacity: .5;

    width: 4px;

    height: 4px;

}



::-webkit-scrollbar:hover {

    opacity: 1;

}



/* Track */

::-webkit-scrollbar-track {

    background: #f1f1f1;

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: #0098db;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: #01488e;

}



@media (max-width: 1024px) {

    #logos ul li{

        max-width: 33.33%;

    }

}

@media (max-width: 768px) {

    body{

        flex-direction: column;

    }

    nav, #agenda, #logos {

        overflow-y: visible;

        height: auto;

    }

    #logos ul li{

        display: inline;

        max-width: 49%;

    }

    #logos ul{

        display: block;

        height: auto;

    }

    #logos #banner img{

        max-width: 100%;

        max-height: 90%;

        height: auto;

        width: auto;

    }

    #logos #banner{

        padding: 10px 0 40px;

        display: block;

        clear: both;

        text-align: center;

    }

    #logos #banner a{

        float: none;

    }

}