/* ********************************************************************************************
    Design for a width of 1400px and above
*********************************************************************************************** */

@media only screen and (max-width: 1920px) and (min-width: 1400px) {
}  

/* ********************************************************************************************
    Design for a width of 768px and above
*********************************************************************************************** */

@media only screen and (min-width: 768px) {
}

/* ********************************************************************************************
    Design for a width of 992px and above
*********************************************************************************************** */

@media only screen and (min-width: 992px) {
}

/* ********************************************************************************************
    Design for a width of 12000px and above
*********************************************************************************************** */

@media only screen and (min-width: 1200px) {    
}

/* ********************************************************************************************
    Design for a width of 1200px and below
*********************************************************************************************** */

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

/* ********************************************************************************************
    Design for a width of 1024px and below
*********************************************************************************************** */

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

/* ********************************************************************************************
    Design for a width of 992px and below
*********************************************************************************************** */

@media only screen and (min-width: 768px) and (max-width: 991px)  {
}

/* ********************************************************************************************
    Design for a width of 991px and below
*********************************************************************************************** */

@media only screen and (max-width: 991px) {
    .h1, h1{
        font-size: 2.75rem;
    }
    .logo{
        margin-top: -190px;
        margin-bottom: 140px;
    }
    .logo img{
        max-width: 255px;
    }
    .banner:before{
        border-top: 730px solid transparent;
        border-left: 1279px solid #3f91cd;
        top: auto;
        bottom: 0;
        transform: rotate(-10.5deg) translate(-62%, -17%);
        left: 0;
        right: auto;
    }
    .banner:after{
        border-left-width: 0px;
        border-bottom-width: 0px;
        border-top: 528px solid transparent;
        border-right: 1070px solid #bb011d;
        right: 0;
        transform: rotate(0deg) translate(32%, 0%);
    }
    .banner img{
        position: relative;
        height: 750px;
    }
    .login-content:before{
        left: -40px;
        top: -250px;
        -webkit-transform: rotate(90deg) scale(1, -1);
        -ms-transform: rotate(90deg) scale(1, -1);
        transform: rotate(90deg) scale(1, -1);
    }
    .login-content .card-body{
        position: relative;
    }
    .login-content .card-body:after{
        bottom: auto;
        top: 0;
    }
}

/* ********************************************************************************************
    Design for a width of 767px and below
*********************************************************************************************** */

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

/* ********************************************************************************************
    Design for a width of 575px and below
*********************************************************************************************** */

@media only screen and (max-width: 575px) {
    .h1, h1{
        font-size: 1.625rem;
    }
    .h3, h3{
        font-size: 1.125rem;
    }
    .btn-primary-theme{
        max-width: 100%;
        padding: 1.0625rem 1.5rem;
    }
    .logo{
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .logo img{
        max-width: 200px;
    }
    .login-content:before {
        left: -40px;
        top: -165px;
    }
    .login-content ul li{
        margin: 1rem 0px;
        font-size: 0.875rem;
    }
    .banner img{
        position: relative;
        height: 335px;
        right: 0;
        width: 100%;
    }
    .banner:before {
        border-top: 351px solid transparent;
        border-left: 550px solid #3f91cd;
        top: auto;
        bottom: 0;
        transform: rotate(-13deg) translate(-41%, -19%);
        left: 0;
        right: auto;
    }
    .banner:after {
        border-left-width: 0px;
        border-bottom-width: 0px;
        border-top: 239px solid transparent;
        border-right: 332px solid #bb011d;
        right: 0;
        transform: rotate(19deg) translate(8%, -12%);
    }
}

/* ********************************************************************************************
    Design for a width of 520px and below
*********************************************************************************************** */

@media only screen and (min-width: 480px) and (max-width: 575px)  {
}

/* ********************************************************************************************
    Design for a width of 479px and below
*********************************************************************************************** */

@media only screen and (max-width: 479px) {
    .login-content:before {
        top: -110px;
    }
    .banner:before {
        transform: rotate(-13deg) translate(-59%, -19%);
    }
    .banner:after {
        transform: rotate(19deg) translate(24%, -12%);
    }
}

/* ********************************************************************************************
    Design for a width of 380px and below
*********************************************************************************************** */

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

}

/* ********************************************************************************************
    Design for a width of 320px and below
*********************************************************************************************** */

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