@charset "UTF-8";

/* OPTIONS MEDIA */
@media screen and (max-width: 992px) {
    .blog-slider {
        max-width: 680px;
        height: 400px;
   }
}

@media screen and (max-width: 768px) {
    .blog-slider {
        min-height: 500px;
        height: auto;
        margin: 180px auto;
   }
}

@media screen and (max-height: 500px) and (min-width: 992px) {
    .blog-slider {
        height: 350px;
   }
}

.blog-slider__item {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .blog-slider__item {
        flex-direction: column;
   }
}

@media screen and (max-width: 768px) {
    .slider-img {
        transform: translateY(-50%);
        width: 90%;
   }
}
@media screen and (max-width: 576px) {
    .slider-img {
        width: 100%;
   }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
    .slider-img {
        width: 100%;
   }
}

@media screen and (max-width: 768px) {
    .slider-content {
        margin-top: -80px;
        text-align: center;
        padding: 0 30px;
   }
}
@media screen and (max-width: 576px) {
    .slider-content {
        padding: 0;
   }
}


@media screen and (max-width: 768px) {
    .slider-pagination {
        transform: translateX(-50%);
        left: 50% !important;
        top: 205px;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
   }
}

@media screen and (max-width: 768px) {
    .slider-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
   }
}
@media screen and (max-width: 768px) {
    .slider-pagination .swiper-pagination-bullet-active {
        height: 11px;
        width: 30px;
   }
}

/* MOBILE */
@media screen and (max-width: 500px) {

    /* Header */
    header{
        background: url('imgs/ocr-mobile.png');
        width: 100%;
        height: 600px;
        background-position:  -50px 70px;
    }
     
    .header-circle{
        background-color: #398ccb;
        width:520px;
        height:550px;
        border-radius: 50%;
        position: absolute;
        z-index: 0;
        top: -200px;
        margin: 0;
        left: -150px;
    }
    
    .btn-budget{
        display: none;
    }

    .ocr{
        margin-top: 280px;
        margin-left: 180px;
    }

    .header-img{
        display: none;
    }
    
    .about p{
        margin-left: 0px;
        margin-right: 0px;
    }

    /* HOW IT WORKS */
    .cloud{
        width: 300px;
        padding-top: 10%;
    }

    #how-it-works hr{
        height: 1px;
        width: 290px;
    }

    .p-how{
        margin-left: 20px;
        margin-right: 20px;
    }

    /* BENEFITS */
    .row-benefits{
        margin-top: 0px;
    }

    /* OPTIONS */
    .slider-img {
        width: 300px;
        flex-shrink: 0;
        height: 300px;
    }

    /* FORM */
    .register {
        background: #fff;
        margin-top: 150px;
        padding: 0;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .tryit h4{
        font-size: 15pt;
        margin-top: 5%;
    }

    .tryit p{
        display: none;
    }

    .tryit hr{
        display: none;  
    }

    .tryit{
        border-radius: 5px 5px 0 0;
    }

    .tryit-form{
        border-radius: 0 0 5px 5px;
        border: solid #192834;
        border-width: 0px 1px 1px 1px;
    }

    /* Footer */

    footer{
        margin-top: 8%;
    }
    
    .footer-brand{
        margin-left: 65px;
    }
    
    .media-icons{
        margin-top: 50px;
        margin-left: 65px;
    }
    
    .footer-links{
        display: none;
    }

}

/* TABLET */
@media screen and (min-width: 481px) and (max-width: 800px) {
    .header-circle{
        margin-left: 0px; 
        width:190%;
    } 

    .ocr{
        margin-left: 80px;
        margin-bottom: 0px;
        margin-top: 70px;
        height: 230px;
    }

    .btn-budget{
        display: none;
    }

    .about p{
        margin-left: 0px;
        margin-right: 0px;
    }

    .p-how{
        margin-left: 50px;
        margin-right: 50px;
    }

    .header-img{
        width: 445px;
    }

    /* OPTIONS */
    .slider-img {
        width: 300px;
        flex-shrink: 0;
        height: 300px;
   }

   .blog-slider {
    margin: auto;
    background: #fff;
    padding: 25px;
    border-radius: 50px;
    margin-top: 20%;
}

#benefits{
    margin-top: 20%;
}

    /* FORM */
    .tryit{
        border-radius: 8px 8px 0px 0px;
    }

    .tryit h4{
        margin-top: 5%;
    }

    .tryit-form{
        border: solid #d6d6d6 2px;
        border-radius: 0px 0px 8px 8px;
    }

    /* FOOTER */
    .footer-links{
        display: none;
    }

     .footer-brand{
        display: block;
        margin-left: auto;
        margin-right: auto;
    } 
    
    .media-icons{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 0%;
    }
}

@media screen and (min-width: 801px) and (max-width: 1024px) { 
    /* Header */
    .header-circle{
        width:145%;
        margin-left: -60px;
    }

    .ocr{
        margin-top: 60px;
        margin-left: 240px; 
        margin-bottom: 10px;
    }

    .btn-budget{
        margin-left: 280px;
    }

    .header-img{
        border-radius: 300px 0px 0px 0px;
        width: 512px;
    }

    .about p{
        margin-left: 0px;
        margin-right: 0px;
    }

    /* OPTIONS */
    .blog-slider {
        margin: auto;
        background: #fff;
        padding: 60px;
        border-radius: 50px;
   }


}