:root {
    --primary-color: #f2f2f2;
    --background-color-second: rgb(45, 48, 83);
    --font-color-white: #171717
}

@media screen and (min-width: 991px) {
    header nav li:not(:last-child) a.nav-link:after {
        position: absolute;
        content: '';
        right: 0;
        width: 1px;
        height: 25px;
        background:var(--font-color-white)!important;
    }

    .page.index #about .image-info .img-container {
        height: 315px;
        width: 400px;
    }
    
    
    .page.index #content .skew:nth-child(1){
        margin-left: -70px;
    }

    .page.index #content .skew:nth-child(1):after{
        content: '';
        position: absolute;
        top: 0;
        left: -90px;
        width: 160%;
        height: 100%;
        background-color: #1292cd;
        background-image: url(../img/hero/Pattern.png);
        transform: skewX(25deg);
    }

    .page.index #content .skew:nth-child(2):after{
        content: '';
        position: absolute;
        top: 0;
        left: -90px;
        width: 160%;
        height: 100%;
        background-color: #38b2a9;
        background-image: url(../img/ensina/Pattern.html);
        transform: skewX(25deg);
    }
    .page.index #content .skew:nth-child(3){
        margin-right: -70px;
        background: #f39f0f!important;
    }

    .page.index #content .skew {
        height: 300px;
        transform: skewX(-25deg);
        width: 40vw;
        transition: .3s;
        overflow: hidden;
    }
    
    .img-description {
        width: 210px;
        height: 300px;
        margin-right: 10px;
    }
    
    .skew:hover {
        width: 115vh!important;
    }
    
    .skew:hover > div {
        display: flex;
        align-items: center;
    }
    
    .skew:hover > .img-description{
        display: inline-block;
    }

    .skew-parent:hover .skew{
        filter: grayscale(.5) blur(1px)
    }
    .skew-parent:hover .skew:hover {
        filter: grayscale(0) blur(0px)
    }


    .position {
        position: absolute;left: 75px;top: 0;width: 70%;height: 100%;transform: skewX(25deg);background-repeat: repeat; z-index: 3;
    }

}

@media screen and (max-width: 991px) {
    header nav li a{
        padding: 15px 0!important;
    }
    
    li.nav-item {
        margin: 5px 0;
    }
    li.nav-item.active {
        background: #fff;
        color: #ea7500;
    }
    
    li.nav-item.active a {
        color: var(--primary-color)!important;
        padding: 0 0 0 1rem!important;
    }
    
    .info {
        text-align: center!important;
    }
    
    .info > .d-flex {
        justify-content: center!important;
    }

    .page.index #content .skew {
        width: 100vw;
    }

    #content > .d-flex {
        flex-direction: column;
        margin: 10px 0;
    }

    #content img.img-description {
        width: 65%;
        margin: 0 auto;
    }

    .img-content img{
        width: 100%!important;
        height: auto!important;
    }

    section#plans{
        position: relative;
    }

    .page.index section#plans::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.75);
    }

    .planos #plans{
        background:rgba(0,0,0,0.09)!important;
    }

    .skew.hero{
        background: url(../img/hero/Pattern.png), linear-gradient(128deg, rgba(0,210,229,1) 0%, rgba(0,210,229,1) 7%, rgba(0,189,218,1) 7%, rgba(0,189,218,1) 13%, rgba(0,176,216,1) 13%, rgba(0,184,218,1) 20%, rgba(0,176,216,1) 39%, rgba(0,151,208,1) 55%, rgba(0,143,202,1) 72%, rgba(0,108,191,1) 100%);
    }
    
    .skew.ensina{
        background: url(../img/ensina/pattern.png), #00b2ab!important;
    }
    
    .skew.qualifica{
        background: #ff9f00!important
    }

    .planos #ideal{
        display: flex;
        align-items: center;
    }

    .planos #ideal h3{
        line-height: 4.5rem;
    }


    .planos .header{
        display: flex;
        align-items: center;
    }

    .planos .header h2{
        line-height: 4rem!important;
    }

}