/* CSI STYLES - DIVIDE BY TWO */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&display=swap');

*, html, body{
    font-family: "Jost";
    line-height:1.5em;
}

.product-item .form-select, .curso_section_right .form-select {
    text-align-last: center;
    text-align: center
}

@-moz-document url-prefix() {
    .product-item select option, .curso_section_right select option{
        font-family:  Arial, sans-serif;
        line-height: 1.5em;
        text-align: left
    }
}

.header-main .container{
    max-width: none !important;
    padding: 0 5% !important;
    height:100px;
}

.section-footer .container{
    max-width: none !important;
    padding: 0 5% !important;
}

body{
    background:white;
    overflow-x:hidden;
    margin: 0;
}

.bg-light{
    background-color:white !important;
}

.menu1 .float-end{
    float:right !important;
}

.nav-item{
    border-top:0;
}

.header-main .row{
    height:100%;
    margin-top:0 !important;
}

.header-main .menu1, .header-main .nav-item{
    height:100px;
}

#navbarDropdownMenuLink{
    padding-top: 8px;
}

.dropdown-menu{
    border-radius: 0;
    background: #7cadc6;
    color:white;
    padding:0 15px;
    margin-top:23px;
}

.dropdown-menu a{
    color:white !important;
    font-weight: 100;
    border-bottom:1px solid white;
    padding:10px;
}

.dropdown-menu a:last-child{
    border:none;
}

#pesquisaGeral{
    background: #ebf1f3;
    border:none;
    padding: 10px 15px 10px 35px;
    font-size:15px;
}

.list-autocomplete{
    background: #ebf1f3 !important;
}

.btn-primary2, .btn-primary1{
    border:none !important;
    text-transform: none !important;
    font-weight:500 !important;
    color: #1c3345 !important;
    font-size: 16px;
    background:none;
}

.nav-item{
    padding-top: 30px;
}

.language{
    margin-top: 1px;
}

.language a{
    font-size:14px;
}

.flick-content{
    width:30vw !important;
    margin:0 0 0 10vw !important;
    background: rgba(28, 51, 69, 0.9);
    padding:2vw;
    bottom: 5vw;
    position:absolute;

}

.flickerplate ul.flicks>li .flick-title, #slide-n-1 .flick-title{
    font-size:18px;
    text-transform:none !important;
    color: white;
}

#slide-n-1 .flick-sub-text{
    color: white;
}

.homepage .header-title{
    text-align:center;
    padding: 3% 20%;
}

.header-title .title-primary{
    color: #1c3345;
    font-weight:500;
    font-size:28px;
    margin-bottom:0px;
}

.header-title .title-secondary{
    color:black;
    font-size:16px;
    padding-top:20px;
}

.header-title::after{
    display: none;
}

.header-title div::before{
    display:none;
}

.courses-content .course-block{
    background: #ebf1f3;
}

.courses-content .course-description{
    text-align:center;
}

.courses-content .course-description h2 a{
    color:#1c3345 !important;
}

.course-block h2, .course-block h2 a{
    height:auto;
    min-height: 65px;
    margin-bottom:0;
    line-height: 1.3em;
    font-weight:500;
}

.course-description .course-specs i, .details-content .course-specs i{
    display:inline-block;
    float:none;
}

.course-description .course-specs li, .details-content .course-specs li{
    border:none;
    padding:0;
    font-size: 14px;
}

.course-description .course-specs ul, .details-content .course-specs ul{
    border:none;
}

.course-description .btn{
    width:auto;
    font-weight:400;
    text-transform:none;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
}

.course-description{
    padding-bottom:30px;
}

.footer-main .footer-menu{
    float:right;
}

.footer-main .footer-menu a{
    color:white !important;
    border:none;
    font-size:14px;
}

.footer-bottom a, .footer-bottom li{
    color:white !important;
    border:none;
}

.btn-primary2:hover, .btn-primary1:hover{
    border: none !important;
    color: #192a3c !important;
    background:none !important;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 500 !important;
    text-decoration:underline !important;
}

.dropdown-item:hover, .dropdown-item:focus{
    background: #7cadc6;
    color: #1c3345 !important;
}

.list-courses-content .course-block{
    background: #f9f9fa;
}

.list-courses-content .course-block .course-image{
    width: 35%;
}

.list-courses-content .course-block .course-description{
    width:40%;
    padding-left:40px;
}

.course-block h2, .course-block h2 a{
    font-size:25px;
}

.list-courses-content .course-specs{
    font-size:14px;
    color:black;
}

.list-courses-content .btn{
    width:auto !important;
    text-transform:none !important;
    font-weight:500;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px;
}

.course-block, .category-block{
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}

.btn-success{
    background: #7cadc6;
}

.list-courses-content .course-block .course-image img{
    min-height:210px;
}

.course-price-course-price{
    color:#7cadc6;
    /*font-weight:500;*/
}

.course-block, .category-block{
    transition: all 0.2s ease;
}

.card .course-block:hover{
    transform: scale(1.05);
}

.flick-innerCourse{
    background: rgb(28,51,69);
    background: linear-gradient(180deg, rgba(28,51,69,0) 0%, rgba(28,51,69,1) 75%);
}

.flick-title{
    text-transform:none !important;
    font-weight:500 !important;
}

.flick-innerCourse{
    position:relative;
}

.flick-innerCourse .container{
    position: absolute;
    bottom:5vw;
    left:5vw;
}

.accordion-course .card-header{
    background:#1c3345;
}

.myaccordion .btn h5{
    color:white;
    font-weight:400;
    padding:12px 0;
}

.myaccordion .btn .icon i{
    color:#7cadc6;
}

#accordion .collapse{
    background:#ebf1f3;
}

#collapse{
    font-size: 12px;
    color: #1c3345;
    margin-right: -3%;
    background: #ebf1f3;
    padding: 2px 20px 2px 40px;

    top: 92px;
    /*margin-left: -5px;*/
    border: 1px solid #192a3c;
    transform-origin: 100% 100%;

    transform: rotate(90deg);

    right: 0px;
    position: absolute;
}

#collapse span{
    padding-left: 10px;
}

.collapse_icon{
    width: 7px;
    transform: rotate(-90deg);
    margin-left: -20px;
}


.accordion-course .card-body{
    padding: 0;
}

.form-control{
    background: #ebf1f3;
    border: none;
    padding: 10px 15px 10px 35px;
    font-size: 15px;
    border-radius: 25px;
}

.form-control:not(:focus):hover, .form-select:not(:focus):hover {
    border:none !important;
    background: #ebf1f3 !important;
}

input.form-control:focus{
    background: #ebf1f3 !important;
    border-color:white !important;
}

.btn-success{
    width:auto !important;
    float:right;
    background: #192a3c;
    text-transform:none !important;
    font-weight:400 !important;
}

.categories.nav-item:hover, .categories.nav-item:hover .nav-link{
    background:#192a3c;
    color:white !important;
}

.language.nav-item:hover{
    background:none;
}

.language:hover a{
    color:white;
}

.homepage .container{
    max-width: none;
    width: 76%;
}
.categorias{
    background: #f9f9fa;
    width: 100vw;
    margin-left: -13vw;
}

.categories-content{
    width: 75%;
    margin: 0 auto;
    padding-bottom: 40px;
}

.homepage{
    padding-bottom: 0px;
}

.homepage .course-image{
    background-size: cover;
    background-position: center center;
    min-height: 10vw;
}

.homepage .course-image{

}

.category-block img{
    min-height: 10vw;
}

.btn-success{
    border: none;
}

small, .small{
    font-size: 14px;
}

.btn-success:hover{
    background-color: #1c446e !important;
}

form[name="reset_password_request_form"] {
    width: auto;
    float: right;
    right: 0;
    position: absolute;
}

.content-body{

}

.form-control{
    color: #7cadc6;
}


.container .nav-pills .nav-link.active, .container .nav-pills .show > .nav-link {
    background: none;
    text-decoration: underline;
    color: #7cadc6 !important;
}

.nav-pills .nav-link:not(.active):hover{
    background: none;
}

.container .nav-pills .nav-link.active, .container .nav-pills .show > .nav-link {
    font-weight: 300;
}

.list-courses-content .course-block, .list-courses-content .course-block .course-image img{
    min-height: 10vw !important;
}


.tab-content .btn-primary{
    font-size: 14px;
}


.accordion-course .linha-item{
    width: 100%;
    margin: 0;
    left: 0;
}

.myaccordion .linha-item button[aria-expanded="true"] {
    background: none !important;

}

#languageConteudo{
    float: right;
    margin-top: 2px;
}




/* -------- PAGINA CURSO 1 ---------- */

.curso_section h1, .curso_section_two h1{
    color: #1c3345;
    font-size: 25px;
    padding-bottom: 20px;
    padding-left: 7%;
}

.curso_section{
    background: #f9f9fa;
    padding: 3% 0%;
    width: 100%;
    height: auto;
    /*float: left;*/
    margin-top: 70px;
}

.curso_section_two{
    padding: 3% 10%;
    float: left;
}

.curso_content, .anexos, .button_row{
    padding-left: 5%;
}


.curso_section_left{
    width: 60%;
    float: left;
    position: relative;
}

.curso_container .curso_section_right{
    width: 30%;
    float: left;
    padding-left: 5%;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    margin-top: -15vw;
    top: 30px;
}

.curso_section_right{
    width: 35%;
}

.curso_section_left{
    margin-right: 3%;
}

.footer{
    width: 100%;
    float: left;
}

/* clearfix */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.session_block{
    background: #ebf1f3;
    padding: 12px 15px 18px 15px;
    position: relative;

    box-sizing: border-box;
    margin-bottom: 10px;
}

.session_block a {
    font-size: 16px;
    color: #1c3345;
}

.session_block a:hover {
    color: #255479;
    text-decoration: none;
}

.session_status{
    position: absolute;
    bottom: 0;
    height: 5px;
    left: 0;
    background: #1c3345;
    width: 70%;
}

.session_duration{
    font-size: 13px;
    color: #1c3345;
    position: absolute;
    right: 15px;

    top: 50%;
    transform: translateY(-50%);
}

.curso_contents h5{
    padding-bottom: 15px;
}

.curso_section_right a{
    color: #1c3345;
    width: 100%;
    display: block;
    font-size: 15px;
}

.curso_section_right a:hover{
    color: #255479;
    width: 100%;
    display: block;
}

.attach-icon{
    width: 15px;
    margin-right: 10px;
}

/*.btn{
    width: auto !important;
    background-color: #192a3c !important;
    text-transform: none !important;
    font-weight: 400 !important;
    border-radius: 30px !important;
    color: white;
}*/

.curso_section_left .button_row .btn{
    width: auto !important;
    text-transform: none !important;
    font-weight: 400 !important;
    border-radius: 30px !important;
    color: white;
}


.naovisto{
    background-color: #e4e4e4 !important;
    color:#51585e !important;
}

.naovisto:hover{
    color:#51585e !important;
}


.visto{
    color: white !important;
    margin-left: 10px;
}

.visto:hover{
    background-color: #1c446e !important;
    color: white !important;
}

.button_row{
    margin-top: 50px;
}

/* -------- PAGINA CURSO 2 ---------- */

.curso_header{
    background-size: cover;
    min-height: 500px;
    height: 30vw;
    position: relative;
    max-height: 600px;
}

.curso_header_content{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    /*background: rgb(28,51,69);
    background: linear-gradient(180deg, rgba(28,51,69,0) 0%, rgba(28,51,69,1) 87%);
    */
}

.info_row{
    color: white;
    font-size: 13px;
    padding-bottom: 70px;
    padding-top: 50px;
}

.info_row .icon{
    width: 25px;
    margin-left: 20px;
}

.info_row .icon:first-child{
    margin-left: 0;
}

.curso_header_info{
    /*position: absolute;
    bottom: 0;
    padding: 0 10%;
    width: 60%;*/

    position: absolute;
    bottom: 0;
    padding: 0 2%;
    margin: 0 8%;
    padding-top: 10%;
    width: 40%;
    height: 100%;
    background: rgba(28, 51, 69, 0.9);
}

.curso_header_info h1{
    color: white;
    font-size: 30px;
    padding-bottom: 20px;
}

.curso_header_info p{
    color: white;
}

.curso_section_left{
    line-height: 1.8em;
}

.curso_container{
    width: 80%;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 70px;
}

.icon{
    width: 23px;
}

.curso_container h1, .curso_container h2{
    font-size: 26px;
}

.call_to_action{
    background: #ebf1f3;
    text-align: center;

    box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.15);
    padding-bottom: 15px;
}

.call_to_action h2{
    font-weight: 400;
    padding: 40px 20px 0 20px;
}

.call_to_action p{
    padding: 0 20px;
}

.call_to_action .btn{
    max-width: 250px;
    color: white;
    margin: 0 auto;
    margin-bottom: 40px;
}

.call_to_action .btn:hover{
    background: #1c446e !important;
    color: white;
}

.text_info{
    box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.15);
    text-align: left;
    padding: 30px 10%;
    margin-top: 40px;
    line-height: 2em;
}

.text_info h2{
    font-size: 26px;
    font-weight: 400;
}

.accordion_img{
    width: 100%;
    display: block;
    margin-top: 50px;
}


.curso_container .curso_section_left{
    width: 60%;
    margin-right: 10%;
}

.breadcrumb, .breadcrumb a{
    color: white;
    font-size: 13px;
}

.breadcrumb span{
    padding: 0 10px;
}

.breadcrumb a:hover{
    color: white;
}


.curso_section_right img{
    max-width: 100%;
}

.curso_section .curso_section_right{
    overflow-y: scroll;
    overflow-x: hidden;

    scrollbar-color: #1c3345 rgba(255, 255, 255, 0);
    scrollbar-width: thin;

    padding-right: 20px;
}

.anexos{
    margin-top: 40px;
}

.anexos a{
    color: #1c3345;
}

.anexos a:hover{
    color: #174d85;
}

#videoplayer{
    position: relative;
    z-index: 10;
}

.anexos span{
    display: inline-block;
}


.langline{
    width: 100%;
    height: 50px;
    display: block;
    float: left;
    color: #1c3345;
    font-size: 14px;
}

.langline a{
    color: #174d85;
}

.audio{
    float: right;
    padding-left: 15px;
}

.legendas{
    float: right;
}

.stretch{
    width: 100%;
}

.hide{
    width: 0%;
    height: 0 !important;
    overflow: hidden !important;
}

.curso_section_left, .curso_section_right{
    transition: all ease-in-out 0.2s;
}

.stretch .collapse_icon{

}

.stretch #collapse{
    right: 24px;
    z-index: 99;
    top:106px;
    margin-right: 0;

    transition: all ease-in-out 0.2s;
}

.stretch #resize{
    margin-left: 46.5vw !important;
    transition: all ease-in-out 0.2s;
}

.stretch .collapse_icon{
    transform: rotate(90deg);
}

#collapse{
    transition: all ease-in-out 0.2s;
}

#resize{
    font-size: 12px;
    color: #1c3345;
    margin-right: -70px;
    background: #ebf1f3;
    padding: 10px 20px 7px 40px;

    transform: rotate(90deg);

    position: relative;
    top: 4px;
    margin-left: 32vw;

    transition: all ease-in-out 0.2s;
}

#resize span{
    padding-left: 10px;
}

#resize .collapse_icon{
    transform: rotate(0deg);
    width: 16px;

}

#collapse:hover, #resize:hover{
    text-decoration: none;
}