:root{
    /*Palheta de cores*/
    --mainColor: #0893d8;
    --blue1: #0c446c;
    --blue2: #156ca4;
    --blue3: #0593da;
    --blue4: #5bafd3;
    --blue5: #7cced5;

    --cyan: #307d84;

    --green: #6eb864;

    --yellow: #eae91a;

    --white: #d9f0f5;
    --black: #1f1f1b;
    --grey: #303030;

    /*BG dark*/
    --slate100: rgb(241 245 249);
    --slate200: rgb(226 232 240);
    --slate300: rgb(203 213 225);
    --slate400: rgb(148 163 184);
    --slate500: rgb(100 116 139);
    --slate600: rgb(71 85 105);
    --slate700: rgb(51 65 85);
    --slate800: rgb(30 41 59);
    --slate900: rgb(15 23 42);
    --slate: rgb(2 6 23);

}

/*OverFlow settings*/
::-webkit-scrollbar {
    height: 1px;
    width: 1px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c2c2c2;
    border-radius: 5px;
}

/*General settings*/
*{
    margin: 0;
}

html{
    overflow-x: hidden;
}

body {
    font-family: 'Roboto';
    color: #818181;
}

.title {
    font-family: "anton", sans-serif ;
    font-size: 6rem ;
    font-weight: 400 ;
    font-style: normal ;
}

.subtitle-hs{
    font-family: "Anton", sans-serif ;
    font-size: 3rem ;
    letter-spacing: .0.8rem;
    font-weight: 400 ;
    line-height: 1.2;
    font-style: normal ;
}

.subtitle {
    font-family: "Anton", sans-serif ;
    font-size: 3rem ;
    font-weight: 400 ;
    font-style: normal ;
}

.logo {
    font-family: "Anton", sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: var(--grey);
    font-weight: 900;
}

h4 {
    font-size: 19px;
    color: var(--grey);
    font-weight: 400;
}

.bg-1{
    background-color: rgb(241 245 249);
}

.bg-2{
    background-color: rgb(226 232 240);
}

/*Container fluid para Desktop*/
.container-fluid {
    padding: 6% 10%;
}

.container-title-fluid {
    padding: 0 10%;
}

.mb-1{
    margin-bottom: 1%;
}

.mb-5{
    margin-bottom: 5%;
}

.mt-5{
    margin-top: 5%;
}

/*Navbar*/
.navbar {
    background-color: var(--mainColor);
    font-size: 12px;
    letter-spacing: 2px;
}

.navbar li a, .navbar .navbar-brand {
    color: var(--white) !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: var(--mainColor) !important;
    background-color: var(--white) !important;
}

.navbar-default .navbar-toggle {
    border-color: transparent;
    color: var(--white) !important;
}

.logo-small {
    color: var(--mainColor);
    font-size: 50px;
}

.logo {
    color: var(--mainColor);
    font-size: 200px;
}

.navbar-toggle:focus{
    border: none;
}

.navbar-toggle.clicked{
    background-color: black;
}

.btn-events{
    margin: 15px 0;
    background-color: var(--mainColor);
    color: var(--white);
}


/*Hero section or index section*/
.herosection{
    background-color: rgb(241 245 249);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0 20%;
}

.herosection .btn{
    margin: 15px 0;
    background-color: var(--mainColor);
    color: var(--white);
}

/*Courses*/
.thumbnail-courses {
    padding: 0 0 15px 0;
    border: none;
    filter: grayscale(75%);
    border-radius: 10px;
    transition: transform 0.5s ease-out, filter 0.5s ease-out, box-shadow 0.5s ease-out;
}

.thumbnail-courses img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 40rem;
    margin-bottom: 10px;
    border-radius: 10px 10px 0px 0px;
}

/*Courses*/
.courses-container{
    display: flex;
    justify-content: center;
}

.thumbnail-events {
    border: none;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    transition: transform 0.5s ease-out, filter 0.5s ease-out, box-shadow 0.5s ease-out;
}

.thumbnail-events img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 40rem;
    margin-bottom: 10px;
    border-radius: 10px 10px 0px 0px;
}

p{
    white-space: wrap;
}

.thumbnail:hover {
    filter: grayscale(0%);
    box-shadow: 2px 0px 10px rgba(5, 0, 53, 0.2);
    transform: scale(1.05);
}

.thumbnail-footer{
    padding: 10px 20px;
    text-align: start;
}

/*Events*/
.events-container{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-top: 30px;
    padding: 20px 0 20px 9%;
}

.device{
    padding: 20px 8% 20px 8%;
}

.events{
    flex: 0 0 auto;
    height: auto;
}

/*Feedback*/
.carousel-control.right, .carousel-control.left {
    background-image: none;
    color: var(--mainColor);
}

.carousel-indicators li {
    border-color: var(--mainColor);
}

.carousel-indicators li.active {
    background-color: var(--mainColor);
}

.item h4 {
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 20vh;
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}

.item span {
    font-style: normal;
}

/*Plans*/
.panel {
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
}

.panel-fluid{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.panel:hover {
    box-shadow: 2px 0px 10px rgba(5, 0, 53, 0.2);
    transform: scale(1.01);
}

.panel-footer .btn:hover {
    border: 1px solid var(--mainColor);
    background-color: var(--white) !important;
    color: var(--mainColor);
}

.panel-heading {
    color: var(--white) !important;
    background-color: var(--mainColor) !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.panel-footer {
    background-color: white !important;
}

.panel-footer h3 {
    font-size: 32px;
}

.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}

.panel-footer .btn {
    margin: 15px 0;
    background-color: var(--mainColor);
    color: var(--white);
}

/*footer*/
.footer-fluid{
    background-color: #156ca4;
    padding: 2% 10% !important;
}

footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--white);
}

.divisor{
    height: 275px;/*Altura da linha*/
    border-left: 2px solid;
    border-color: white;
}

.contacts{
    display: flex;
    justify-content: space-around;
}

.contacts p{
    font-size: 1.2rem;
}

/*Animation*/
.slideanim {
    visibility:hidden;
}

.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

/*keyframes*/
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(30%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

/*Responsive settings*/
@media screen and (max-width: 768px) {
    html, body{
        overflow-x: hidden;
    }

    body {
        font-family: 'Roboto';
        color: #818181;
    }


    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }

    .container-fluid{
        padding: 7% 5%;
    }

    .events-container{
        padding: 20px 0 20px 8%;
    }

    .footer-fluid{
        background-color: #156ca4;
        padding: 10% !important;
    }

    .herosection{
        background-color: rgb(241 245 249);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        box-sizing: border-box;
        padding: 0 5%;
    }

    .panel-fluid{
        display: contents !important;
    }

    .divisor{
        display: none;
    }

    .device{
        padding: 20px 0 20px 8%;
    }

    .thumbnail{
        max-width: 30rem;
    }

    .thumbnail-events img,
    .thumbnail-courses img {
        height: 30rem;
    }
}

@media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
}