@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i');



/* GENERAL */

body{

    font-family: Roboto, sans-serif;

    font-size: 14px;

    color: #333333;

    position: relative;

}

.btn-pi360{

    color: #fff;

    background-color: #31bfa7;

    text-transform: uppercase;

    border: #fff solid 1px;

    font-size: 0.8rem;

    padding: 10px 20px;

    margin-top: 20px;

}

.btn-pi360:hover{

    color: #31bfa7;

    border-color: #31bfa7;

    background-color: transparent;

}



/* NAVBAR */

.navbar-pi360{

    background-color: #31bfa7;

    border-radius: 0;

    height: 80px;

    padding: 15px 0px;

}

.navbar-pi360 .nav-item {

    padding-left: 20px;

    padding-right: 20px;

    padding-top: 20px;

    height: 80px;

}

.navbar-pi360 .nav-item .nav-link{

    color: #fff !important;

}

.navbar-pi360 .nav-item.active, .navbar-pi360 .nav-item:hover {

    border-top: solid #fff 3px;

    padding-top: 17px;

}

.navbar-pi360 .nav-item.no-hover:hover {

    border-top: none;

    padding-top: 20px;

}

.pi360-brand {

    width: 50px;

    height: 50px;

    padding: 5px;

    background: url(../img/Square_W.png) no-repeat right top;

    background-size: contain;

    line-height: unset;

}

.btn-search-pi360, .btn-search-pi360:hover{

    color: #fff;

    font-size: x-large;

    border-right: solid rgba(255,255,255,0.4) 0.5px;

}

.form-search-pi360{

    color: rgba(255,255,255,0.4);

    background-color: transparent;

    border: none;

}

.form-search-pi360::-webkit-input-placeholder { /* Chrome/Opera/Safari */

    color: rgba(255,255,255,0.4);

}

.form-search-pi360::-moz-placeholder { /* Firefox 19+ */

    color: rgba(255,255,255,0.4);

}

.form-search-pi360:-ms-input-placeholder { /* IE 10+ */

    color: rgba(255,255,255,0.4);

}

.form-search-pi360:-moz-placeholder { /* Firefox 18- */

    color: rgba(255,255,255,0.4);

}

.form-search-pi360:focus{

    color: #fff;

    background-color: transparent;

    border: none;

    box-shadow: none;

}



/* SECTION */

section{

    padding-top: 40px;

    padding-bottom: 40px;

}

.section-title{

    text-transform: uppercase;

}

.section-title .focus{

    color: #31bfa7;

}



/* TOP SECTION */

.top-section{

    background: url("../img/bg_top.jpg") no-repeat center;

    background-size: 100% auto;

    height: 460px;

}

.top-video{

    height: 420px;

}

.video{

    height: 420px;

    background: url(../img/bg_expose.png) no-repeat center;

    background-size: 100%;

    padding-top: 55px;

    padding-bottom: 20px;

    padding-left: 25px;

    padding-right: 25px;

}



/* COURSE SECTION */

.course-col{

    margin: 0px 40px;

    width: 300px;

}

.course-card{

    margin-top: 15px;

    border: solid #e9eef9 1px;

    border-radius: 10px;

    box-shadow: 0 6px 2px -2px #e9eef9;

    cursor: pointer;

}

.course-filter{

    font-size: small;

    text-align: right;

    font-weight: bold;

    padding: 5px 10px;

    color: #333333;

    text-transform: uppercase;

}

.course-filter a{

    color: #333333;

}

.course-filter a:hover{

    text-decoration: none;

}

.course-thumb{

    width: 100%;

    height: 200px;

    overflow: hidden;

    position: relative;

}

.course-thumb img{

    border-radius: 10px;

    width: 100%;

    height: 200px;

}

.course-des{

    height: 400px;

    text-align: center;

    border-radius: 10px;

    padding: 5px;

}

.course-title{

    margin-bottom: 10px;

    margin-top: 20px;

    color: #333333;

}

.title-line{

    width: 60px;

    height: 5px;

    background-color: #e9eef9;

    margin: 10px auto;

}

.course-info {

    color: #333333;

    font-size: 0.8rem;

    padding: 0 25px;

    height: 95px;

    overflow: hidden;

}

.course-section .course-card.hover .course-filter a{

    color: #31bfa7;

}

.course-section .course-card.hover .course-des{

    background-color: #31bfa7;

}

.course-section .course-card.hover .course-title{

    color: #fff;

}

.course-section .course-card.hover .title-line{

    background-color: #fff;

}

.course-section .course-card.hover .course-info{

    color: #fff;

}

.logo-partner{

    padding-top: 30px;

}

.logo-partner img {

    margin: 20px 20px;

    /* filter: grayscale(100%); */

    height: 40px;

}



/* INDUSTRY SECTION */

.industry-section{

    background-color: #f2f7ff;

}

.carousel-pi360{

    background-color: #a5b4cf;

    margin: 20px auto;

    height: 300px;

    text-align: center;

    border-radius: 10px;

}

.carousel-pi360 .carousel-item {

    padding: 0px 60px;

    color: #fff;

    font-size: 0.8rem;

}

.carousel-pi360 .line {

    background-color: #fff;

    width: 70px;

    height: 1px;

    margin: 20px auto;

}

.carousel-quote{

    font-size: 2.5rem;

    padding: 10px 0;

    color: #fff;

}

.carousel-pi360 .carousel-control-next {

    width: 40px;

    height: 40px;

    background-color: #fff;

    color: #000;

    position: absolute;

    top: 35%;

    right: -20px;

    opacity: 1;

    box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.4);

}

.carousel-pi360 .carousel-control-next-icon{

    background: url("../img/next.png") no-repeat center;

    background-size: contain;

}

.carousel-pi360 .carousel-control-prev {

    width: 40px;

    height: 40px;

    background-color: #fff;

    color: #000;

    position: absolute;

    top: 55%;

    opacity: 1;

    left: inherit;

    right: -20px;

    box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.4);

}

.carousel-pi360 .carousel-control-prev-icon{

    background: url("../img/prev.png") no-repeat center;

    background-size: contain;

}

.carousel-pi360 .carousel-indicators{

    bottom: -45px;

}

.carousel-pi360 .carousel-indicators li{

    width: 40px;

    height: 40px;

    margin-right: 5px;

    margin-left: 5px;

    background: none;

}

.carousel-pi360 .carousel-indicators li.active{

    width: 60px;

    height: 60px;

    margin-right: 5px;

    margin-left: 5px;

    margin-top: -10px;

    background: none;

}

.carousel-pi360 .carousel-indicators li img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

}



/* SKILL SECTION */

.skill-section .course-col{

    width: 85%;

    margin: unset;

}

.skill-section .course-filter{

    text-align: left;

    padding: 5px 20px;

}

.skill-section .course-card.hover .course-filter a{

    color: #fff;

}

.skill-section .course-thumb{

    width: 100%;

    height: auto;

}

.skill-section .course-thumb img{

    width: 100%;

    height: auto;

}

.skill-section .course-des{

    height: 50px;

    padding: 0;

    text-align: right;

}

.skill-section .course-des img{

    /* height: 20px;

    margin: 15px 10px; */

    height: 46px;

    margin: 5px 10px;

}

.skill-section .course-title{

    position: absolute;

    margin-left: 20px;

    width: 50px;

    font-weight: bolder;

    font-size: 1.2rem;

    line-height: 2.5rem;

}

.skill-section .course-title mark{

    padding: 5px;

    background-color: #fff;

    color: #333333;

}

.skill-section .course-card.hover .course-title mark{

    background-color: #31bfa7;

    color: #fff;

}

.show-more{

    text-transform: uppercase;

    color: #31bfa7;

}

.show-more:hover{

    text-transform: uppercase;

    color: #31bfa7;

    text-decoration: none;

}

.course-popup {

    background-color: #f2f7ff;

    border-radius: 10px;

    padding: 5px;

    position: relative;

}

.course-popup:after{

    content: "";

    position: absolute;

    bottom: -9px;

    right: 20px;

    border-width: 10px 8px 0;

    border-style: solid;

    border-color: #f2f7ff transparent;

    display: block;

    width: 0;

}

.skill-section .course-card.hover .course-popup{

    background-color: #31bfa7;

}

.skill-section .course-card.hover .course-popup:after{

    border-color: #31bfa7 transparent;

}



/* IMAGING SECTION */

.imaging-section{

    height: 300px;

    background: url("../img/bg_imaging.jpg") no-repeat center;

    background-size: 100% auto;

    text-align: center;

    color: #fff;

    padding: 90px 0;

}



/* REWARD SECTION */

.reward-col{

    padding: 0 50px;

    text-align: center;

}

.reward-img {

    width: 100%;

}

.reward-title {

    padding: 20px 0;

    margin-bottom: 0;

}

.reward-section .line {

    width: 100%;

    height: 1px;

    background-color: #31bfa7;

}

.reward-des {

    font-size: 0.8rem;

    padding-top: 20px;

}



/* ADVANTAGE SECTION */

.advantage-col {

    padding: 10px;

    background-color: #f2f7ff;

    text-align: center;

    position: relative;

}

.advantage-col.center{

    background-color: #e9eef9;

}

.advantage-title {

    position: absolute;

    width: 70%;

    top: 30%;

    left: 15%;

    background-color: rgba(79,126,148,0.7);

    color: #fff;

    padding: 20px;

}

.advantage-col.center .advantage-title{

    top: 50%;

}

.advantage-des {

    height: 100px;

    font-size: 0.8rem;

    padding: 30px;

    margin-bottom: 0;

}

.advantage-img {

    width: 100%;

}



/* BEFORE FOOTER */

.background-footer {

    height: 65px;

    margin-top: 70px;

    margin-bottom: -130px;

    background-color: #eaeef9;

}

.before-footer .row {

    background-color: #31bfa7;

    padding: 20px 60px;

    border-radius: 70px;

}

.before-footer .col {

    background-color: #f2f7ff;

    padding: 3px;

    border-radius: 5px;

    margin: 0 20px;

}

.before-footer img {

    width: 120px;

    float: left;

}

.before-footer .info {

    padding: 5px;

    font-size: 0.8rem;

}

.before-footer .title{

    text-transform: uppercase;

    margin-left: 130px;

}

.before-footer .description {

    margin-left: 130px;

}



/* FOOTER */

.pi360-footer {

    background-color: #e9eef9;

}

.main-footer {

    padding: 40px 0;

}

.main-footer .logo-footer img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100px;
}

.main-footer .logo-title{
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.main-footer .title{

    margin-top: 20px;

    margin-bottom: 20px;

    font-size: 1rem;

    font-weight: bold;

}

.main-footer a{

    color: #333333;

    display: block;

    margin: 10px 0;

}

.main-footer a:hover{

    color: #31bfa7;

    text-decoration: none;

}

.main-footer .social {

    text-align: center;

    background-color: #f2f7ff;

    width: 100px;

    height: 100px;

    padding-top: 15px;

    border-radius: 5px;

}

.bottom-footer{

    padding: 10px 0;

    background-color: #a5b4cf;

    color: #fff;

}

.bottom-footer a{
    color: #333333;
    margin-left: 30px;
}

.bottom-footer a:hover{
    color: #fff;
    text-decoration: none;
}


/* RESPONSIVE */

@media (max-width: 768px){

    /* NAVBAR */

    .pi360-brand{

        margin-left: auto;

        margin-right: auto;

    }

    .navbar-pi360 .navbar-toggler{

        position: absolute;

        left: 15px;

        color: #31bfa7;

        padding: 10px 15px;

        background-color: #fff;

        border-color: #fff;

    }

    .navbar-pi360 .navbar-toggler.collapsed{

        color: #fff;

        background-color: transparent;

        border-color: #fff;

    }

    .navbar-pi360 .navbar-collapse{

        position: absolute;

        top: 70px;

        left: 0;

        width: 100%;

        height: 360px;

        background-color: #5fc0a8;

        z-index: 10;

    }

    .form-search-pi360{

        width: 80%;

    }

    .navbar-pi360 .nav-item {

        padding-top: 10px;

        height: 60px;

        border-bottom: rgba(255,255,255,0.5) solid 1px;

        margin-left: 15px;

    }

    .navbar-pi360 .nav-item.active, .navbar-pi360 .nav-item:hover {

        border-top: none;

        padding-top: inherit;

    }

    .navbar-pi360 .nav-item.no-hover{

        border: none;

        padding-left: 0px;

    }

    .navbar-pi360 .nav-item .nav-link {

        color: #fff !important;

    }



    /* SECTION */

    section{

        padding-top: 20px;

        padding-bottom: 20px;

    }



    /* TOP SECTION */

    .top-section{

        background-size: auto 100%;

        height: 345px;

    }

    .video {

        height: 310px;

        padding-bottom: 30px;

        padding-left: 20px;

        padding-right: 20px;

    }



    /* INDUSTRY SECTION */

    .carousel-pi360 .carousel-control-next, .carousel-pi360 .carousel-control-prev{

        right: -10px;

    }

    .carousel-quote {

        font-size: 1.5rem;

        padding: 0;

    }

    .carousel-pi360 .carousel-item {

        padding: 0px 20px;

    }

    .carousel-pi360 .line {

        margin: 10px auto;

    }



    /* IMAGING SECTION */

    .imaging-section {

        height: 340px;

        background-size: auto 100%;

        padding: 45px 0;

    }



    /* BEFORE FOOTER */

    .before-footer .col {

        margin-bottom: 15px;

        margin-left: 10px;

        margin-right: 10px;

    }

    .before-footer .col+.col {

        margin-bottom: 0px;

    }

    .before-footer .title {

        font-size: 1rem;

    }

    .before-footer .description {

        font-size: 11px;

    }

    .background-footer{

        display: none;

    }

    .before-footer .row {

        padding: 20px 10px;

        border-radius: 10px;

    }

    .bottom-footer a {

        margin-left: 3px;

    }



    .main-footer {

        padding: 40px 15px;

    }

    .main-footer .logo-footer img{
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: 45px;
    }

}

@media (width: 768px){

    .video{

        height: 310px;

        padding-top: 45px;

    }

    .course-col {

        margin: 0px 30px;

    }

    .course-section .course-col+.course-col+.course-col{

        display: none;

    }

    .carousel-quote {

        font-size: 2.5rem;

        padding: 10px 0;

    }

    .skill-section .course-title {

        margin-left: 20px;

        margin-bottom: 10px;

        margin-top: 10px;

        font-size: 0.7rem;

        line-height: 1.7rem;

    }

    .skill-section .course-filter{

        font-size: x-small;

    }

    .skill-section .course-des {

        height: 40px;

    }

    .skill-section .course-des img {

        height: 10px;

        margin: 15px 5px;

    }

    .imaging-section {

        height: 290px;

    }

    .reward-section .col {

        padding: 0 20px;

    }

    .reward-title {

        font-size: 1rem;

    }

    .advantage-title {

        top: 20%;

        font-size: 1rem;

    }

    .advantage-des {

        font-size: 0.7rem;

        padding: 15px;

    }

    .background-footer {

        display: block;

        height: 70px;

        margin-bottom: -135px;

    }

    .before-footer .row {

        padding: 20px 0px;

        border-radius: 70px;

    }

    .before-footer .col {

        margin-bottom: 0;

        margin-left: 10px;

        margin-right: 10px;

    }

    .before-footer .title {

        margin-left: 120px;

    }

    .before-footer .description {

        margin-left: 120px;

    }

}

@media (min-width: 769px) and (max-width: 991px){



}

@media (min-width: 992px) and (max-width: 1199px){

    /* TOP SECTION */

    .top-section {

        background-size: auto 100%;

        height: 460px;

    }

    .video {

        height: 440px;

        background-size: 100%;

        padding-top: 85px;

        padding-bottom: 65px;

    }



    /* COURSE SECTION */

    .course-col {

        margin: 0px 10px;

    }



    /* BEFORE FOOTER */

    .background-footer {

        height: 90px;

        margin-bottom: -160px;

    }

}

@media (min-width: 1200px) and (max-width: 1599px){

    .top-section {

        background-size: auto 100%;

    }

}

@media (min-width: 1600px){

    .top-section {

        background-size: 100% auto;

        height: 500px;

    }

}