:root {
    --background: #ffffff;
    --cor-fundo-navbar: #222222;
    --cor-navbar: #cacaca;
    --color: #868686;
    --color-titulo: #656464;
    --color-hover: #272727;
    --margin-top: 5px;
    --font-size-verySmall: 12px;
    --font-size-small: 14px;
    --font-size-avg: 16px;
    --font-size-large: 28px;
    --font-size-extraLarge: 36px;
    --letter-spacing: 2px;
    --font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    --navbar-heigth: 100%;
    --success-color: #2ecc71;
    --error-color: #e74c3c;
    --border: solid 1px #828282;
    --color-form: #266565;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
        'left upperL upperL upperL upperL upperR upperR upperR upperR right'
        'left header header header header header header header header right'
        'left main main main main main main main main right'
        'left footer footer footer footer footer footer footer footer right';
    grid-gap: 0.5rem;
}

.item1 {
    /* background-color: #a3e630; */
    grid-area: upperL;
}

.item2 {
    /* background-color: #00ffff; */
    grid-area: upperR;
}

.item3 {
    /* background-color: #ccccff; */
    background-color: var(--cor-fundo-navbar);
    grid-area: header;
    position: sticky;
    z-index: 3;
    top: 0px;
}

.item4 {
    /* background-color: yellow; */
    grid-area: main;
}

.item5 {
    /* background-color: #f75278; */
    background-color: var(--cor-fundo-navbar);
    grid-area: footer;
}

.item6 {
    /* background-color: green; */
    grid-area: left;
    /* opacity: 0.1; */
}

.item7 {
    /* background-color: blue; */
    grid-area: right;
    /* opacity: 0.1; */
}

@media only screen and (max-width: 1280px) {

    .item3,
    .item6,
    .item7 {
        display: none !important;
    }

    #h1Cursos,
    #h1Materiais,
    #h1Orientacao,
    #h1RedesSociais,
    #h1AulasGratis,
    #h1Equipe,
    #h1Depoimentos {
        text-align: center;
    }

    .item1 {
        display: inline-block;
    }

    .item1,
    .item3,
    .item4,
    .item5 {
        height: 100%;
        float: left;
        width: 100%;
    }

    .item3,
    .item4,
    .item5 {
        display: block;
    }

    .item2 {
        float: right;
        display: block;
    }

    .item3 {
        position: relative;
    }

    .cursoStyle .card {
        float: none !important;
        margin: 0 auto !important;
        padding: 0px 0px 40px 0px !important;
    }

    iframe {
        width: 100% !important;
    }
}

body {
    font-family: var(--font-family);
    min-height: 100vh;
    width: 100%;
    z-index: 1;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

/* span {
    font-size: var(--font-size-verySmall);
} */

h1:not(.container_form h1) {
    font-size: var(--font-size-extraLarge);
    letter-spacing: var(--letter-spacing);
    margin: 50px 0px 50px 0px;
    color: var(--color-titulo);
    font-variant: small-caps;
}

img {
    vertical-align: middle;
}

.left {
    float: left;
}

.right {
    float: right;
}

.divButton {
    cursor: pointer;
    display: inline-block;
}

iframe {
    display: block;
    height: 50vh;
    width: 800px;
    border: none;
}

/* Input Arrows - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Input Arrows - Firefox */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* REDES SOCIAIS, AULAS GRÁTIS, DEPOIMENTOS */

#cursos,
#materiais,
#orientacao,
#redesSociais,
#aulasGratis,
#equipe,
#depoimentos {
    float: left;
    width: 100%;
    min-height: 70vh;
}

/* SWIPER */

.swiper {
    width: 100%;
    height: auto;
}

.swiper-slide {
    font-size: var(--font-size-avg);
    font-family: var(--font-family);
    display: flex;
}

.swiper-slide .aluno,
.swiper-slide .texto {
    margin: 8px 20% 8px 20%;
    border: 1px lightgrey dashed;
}

.swiper-slide img {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
}

/* HEADER */

#header {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    font-variant: small-caps;
}

#header .acesso {
    font-size: var(--font-size-verySmall);
    color: var(--color);
    letter-spacing: var(--letter-spacing);
    line-height: 50px;
    display: inline;
    position: relative;
    width: auto;
    height: 100%;
}

/* NAVBAR */

#navbar {
    font-size: var(--font-size-small);
    height: var(--navbar-heigth);
    float: left;
    /* z-index: 3;
    position: sticky;
    top: 0px; */
    width: 100%;
    padding: 0 0 0 3%;
}

#navbar .menu {
    color: var(--cor-navbar);
    letter-spacing: var(--letter-spacing);
    float: left;
    padding: 0px 70px 0px 0px;
    line-height: 60px;
    width: auto;
    height: 100%;
    text-transform: uppercase;
    position: relative;
}

/* CURSOS */

.cursoStyle {
    float: left;
    width: 100%;
    height: auto;
}

.cursoStyle .card {
    float: left;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 280px;
    padding: 0px 40px 40px 0px;
    transition: transform 0.5s;
}

#cursos .card {
    min-height: 600px;
}

.cursoStyle .card:hover {
    transform: scale(1.1);
}

.cursoStyle .image-top {
    width: 101%;
    object-fit: cover;
    clip-path: polygon(0 0, 100% 0, 100% 73%, 0% 100%);
}

#cursos .image-top,
#materiais .image-top,
#orientacao .image-top {
    height: 220px;
}

#equipe .image-top {
    height: 100px;
}

.cursoStyle .profile-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-top: -110px;
    z-index: 2;
    border: 5px solid #dadada;
}

.cursoStyle .card h2 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    color: #777;
    /* color: #555; */
    margin: 10px;
    font-weight: 200;
}

.cursoStyle .card .preco {
    font-weight: bold;
}

.cursoStyle .job {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #555;
    /* font-weight: 300; */
    /* color: #777; */
}

.cursoStyle .about-me {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    width: 90%;
    margin: 15px 0;
    color: #444;
    text-align: center;
}

.cursoStyle .card button {
    font-size: var(--font-size-avg);
    cursor: pointer;
    width: 200px;
    padding: 12px;
    margin: 10px 0;
    border: none;
    outline: none;
    border-radius: 25px;
    font-family: 'Josefin Sans', sans-serif;
    color: #eee;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
}

#cursos button {
    background-color: tomato;
}

#materiais button {
    /* background-color: rgb(255, 50, 159); */
    background-color: rgb(53, 67, 104);
}

#orientacao button {
    background-color: rgb(46, 62, 182);
}

#equipe button {
    background-color: rgb(138, 75, 255);
}

/* FOOTER */

#footer {
    color: var(--cor-navbar);
    font-size: var(--font-size-avg);
    float: left;
    width: 100%;
    text-align: center;
    line-height: 50px;
}

/* FORM */

.container_form h1 {
    font-size: var(--font-size-extraLarge);
    letter-spacing: var(--letter-spacing);
    color: var(--color-form);
    margin: 0px 0px 30px 0px;
    font-variant: small-caps;
}

.container_form {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container_form img {
    padding-left: calc(50% - 10%);
}

form {
    background: white;
    display: block;
    width: 100%;
    max-width: 500px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    padding: 20px 60px 50px 50px;
    position: relative;
}

form label,
form fieldset {
    color: var(--color-form);
    margin-top: 20px;
}

form fieldset {
    padding: 15px 15px 0px 15px;
    border: 2px solid #f0f0f0;
    margin-bottom: 20px;
}

form img {
    padding: 30px 60px 30px 0px;
    height: auto;
    width: 100px;
}

form input:not([type='checkbox']),
form select {
    font-size: var(--font-size-small);
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 10px;
}

form input:not([type='checkbox']) {
    width: 95%;
    display: block;
}

form select {
    min-width: 12ch;
}

form input:focus,
form select:focus {
    outline: 0;
    border-color: #777;
}

form button {
    font-size: var(--font-size-avg);
    background-color: var(--color-form);
    border: 2px solid var(--color-form);
    width: 100%;
    cursor: pointer;
    color: #fff;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
}