@keyframes imageAnimation { 
    0% {opacity: 0; background-color: #ffffff;}
    8% {opacity: 1; background-color: #ffffff;}
    17% {opacity: 1; background-color: #ffffff;}
    25% {opacity: 0; background-color: #ffffff;}
    100% {opacity: 0; background-color: #ffffff;}
}
@keyframes menuAnimation { 
    0% {font-size: 1em;}
    25% {font-size: 0.9em;}
    50% {font-size: 1em;}
    75% {font-size: 0.95em;}
    100% {font-size: 1em;}
}
html {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}
img {
    width:100%;
}
#returntop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.quem-img {
    width: 286px;
    height: 190px;
    object-fit: cover;
}
.quem-card {
    -webkit-box-shadow: 0px 6px 36px -3px rgba(219,219,219,1);
    -moz-box-shadow: 0px 6px 36px -3px rgba(219,219,219,1);
    box-shadow: 0px 6px 36px -3px rgba(219,219,219,1);
}
#recursos .card {
    -webkit-transition: transform 0.8s, color 0.8s, -webkit-box-shadow 0.8s, -moz-box-shadow 0.8s, box-shadow 0.8s, z-index 0.8s;
    transition: transform 0.8s, color 0.8s, -webkit-box-shadow 0.8s, -moz-box-shadow 0.8s, box-shadow 0.8s, z-index 0.8s;
}
#recursos .card:hover {
    transform: scale(1.1);
    color: #838383;
    -webkit-box-shadow: 0px 6px 56px -3px rgba(219,219,219,1);
    -moz-box-shadow: 0px 6px 56px -3px rgba(219,219,219,1);
    box-shadow: 0px 6px 56px -3px rgba(219,219,219,1);
    z-index: 999;
}
/* classes reutilizáveis de decoração de texto */
    .blue {
        color: #2196F3 !important;
    }
    .bold {
        font-weight: 600 !important;
    }
    .red {
        color: #E57373
    }
    .white {
        color: #ffffff !important;
    }
    .edu {
        color: #CBD440 !important;
    }
    .big {
        font-size: 3em !important;
    }
    .lightgreen {
        color: #D6DB84;
    }
    .btn-outline-edu {
        color: #CBD440;
        background-color: transparent;
        background-image: none;
        border-color: #CBD440 !important;
    }
    .btn-outline-edu:hover {
        background-color: #CBD440;
        color: #000000;
    }
    .bluebg {
        background-color: #2196F3;
        color: #ffffff;
    }
    mark {
        background-color: #2196F3 !important;
        padding: 3px !important;
        color: #ffffff;
    }
    .emphasis {
        text-align: right;
    }
    .spacetop {
        padding-top: 30px !important;
    }
    .spacebot {
        padding-bottom: 30px !important;
    }
    .verticalalign {
        top: 30vh !important;
        position: absolute;
    }
    .textblock {
        padding-top:5vh;
    }
    .conteudo {
        margin-top: 10vh;
        font-family: Roboto;
    }
    .h1, h1 {
        font-size: 3.3em !important;
    }
    .h2, h2 {
        font-size: 3em !important;
    }
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ logo */
    .logo svg {
        width: 40vmax;
        height: 7vw;
        min-width: 270px;
        min-height: 58px;
    }
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@ menu principal */
    header {
        width: 100vw;
        height: 50px;
        margin: auto;
        position: fixed;
        z-index: 1;
        background: rgba(255,255,255,0.75);
    }
    nav {
        float: left;
        margin: 0;
        /* background: rgb(203,212,64,0.5); */
        border-bottom-right-radius: 15px;
    }
    nav ul {
        display: table;
        margin: 0;
    }
    nav ul li {
        display: inline;
        text-align: center;
    }
    #responsivemenu {
        display: none;
        width: 50px;
        height: 70px;
        color: #ffffff;
    }
    #responsivemenu:hover {
        color: #eeeeee;
    }
    nav, nav a, nav a:hover {
        color: #000000;
        font-weight: 300;
        font-size: 1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 13px;
        text-align: left;
    }
    nav li:hover {
        animation-name: menuAnimation;
        animation-duration: .8s;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
    }
/* @@@@@@@@@@@@@@@@@@@@@@@ seções da página */
    .slideshow,
    .slideshow:after { 
        position: sticky;
        width: 100%;
        height: 100vh;
        top: 0px;
        left: 0px;
        z-index: 0; 
        list-style:none;
    }
    .slideshow li span { 
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 0;
        z-index: 0;
        animation: imageAnimation 36s linear infinite 0s; 
    }
    .slideshow li:nth-child(1) span { 
        background-image: url('https://condominioappstorage.blob.core.windows.net/conectedu/Site/Site%20conect%2BEDU_2-08.png');
        animation-delay: 0s; 
    }
    .slideshow li:nth-child(2) span { 
        background-image: url(../img/college.jpg);
        animation-delay: 12s; 
    }
    .slideshow li:nth-child(3) span { 
        background-image: url(../img/kids.jpg);
        animation-delay: 18s; 
    }
    .landingwrap {
        width: 80vw;
        margin: auto;
        height: 20vh !important;
    }
    .landingpage {
        height: 100vh;
        width: 100%;
        z-index: -1;
        background: #4be4cf url('https://condominioappstorage.blob.core.windows.net/conectedu/Site/Site%20conect%2BEDU_2-08.png') no-repeat;
        background-position: 50% 50%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /* Para o cover funcionar no IE 8 e 9 */
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kids.jpg',     sizingMethod='scale');
        -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kids.jpg', sizingMethod='scale');
    }
    #conheca-mais, #como-funciona, #beneficios, #contato {
        padding-top: 5vmin;
    }
    .cardBeneficio, .cardBeneficioLeft {
        margin: 20px 0px;
        border-radius: 5px;
        padding: 0;
        -webkit-box-shadow: 0px 6px 36px -3px rgba(219,219,219,1);
        -moz-box-shadow: 0px 6px 36px -3px rgba(219,219,219,1);
        box-shadow: 0px 6px 36px -3px rgba(219,219,219,1);
    }
    .cardBeneficio p, .cardBeneficioLeft p {
        font-size: 1.5em;
        color: #D6DB84;
    }
    .cardBeneficioLeft {text-align: right;}
    .beneficioImagem {
        height: 30vh;
    }
    .beneficio1 {
        background: url("../img/beneficio01.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .beneficio2 {
        background: url("../img/beneficio02.jpg");
        background-size: cover;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .beneficio3 {
        background: url("../img/beneficio03.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .beneficio4 {
        background: url("../img/gestao.jpg");
        background-size: cover;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .beneficio5 {
        background: url("../img/whitelabel.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    #contato h3 {
        color: #2196F3;
    }
    footer {
        margin-top:50px;
        padding:20px 0;
        background-color: #CBD440;
        color: #969f0f;
    }

/* media query */
    @media only screen and (max-width : 640px) {
        #minilogo {
            display: none;
        }
        .verticalalign {
            top: 15vh !important;
        }
        .landingpage {
            background-position: bottom center;
        }
        header {
            position: absolute;
            background: none;
        }
        #responsivemenu, #responsivemenu:hover {
            display: inline-block;
            color: #ffffff;
        }
        nav ul li a:hover { /* link fix #1: os links no menu reduzido não ficarão "pulando" no hover */
            padding: 0;
            margin-left: 2px;
        }
        nav ul, nav:active ul {
            display: none;
            position: absolute;
            padding: 20px;
            background: #ffffff;
            top: 40px;
            width: 80vw;
            border-radius: 4px 0 4px 4px;
            margin: 0 -20px;
        }
        nav li, nav li a {
            width: 100vw;
            padding: 0px 1px; /* link fix #2 */
            margin: 0;
            color: #000000;
            font-size: 1.3em;
            display: list-item;
            list-style-type: none;
        }
        nav li:hover {
            animation: none;
        }
        nav li a:hover {
            font-size: 1.3em;
            color: #a8a8a8;
        }
        nav:hover ul {
            display: inline;
        }
        nav, nav a, nav a:hover {
            padding: 6px;
        }
        .beneficio1, .beneficio2, .beneficio3 {
            border-radius: 0;
        }
        h3 {
            font-size: 1.4em !important;
        }
    }

    @media only screen and (max-width : 779px) {
        nav, nav a, nav a:hover {
            font-size: 2vmax;
        }
        h2 {
            font-size: 1.5em;
        }
    }