/* ************************************************************
:: Template Name: Crypts - App Landing HTML5 Template
:: Template URI: http://theme-land.com/tf/crypts/
:: Template Author Name: theme_land
:: Template Author URI: support@theme-land.com
:: Version: 1.0.0
:: Created: 29 March 2019
************************************************************ 
*
*
******* :: INDEX OF RESPONSIVE CSS :: *******
:: 1.0 PAGE SECTION PADDING
:: 2.0 SECTION HEADING
:: 3.0 BUTTONS
:: 4.0 ANIMATION
:: 5.0 HEADER AREA CSS
:: 6.0 WELCOME AREA CSS
:: 7.0 BENIFITS AREA CSS
:: 8.0 ABOUT AREA CSS
:: 9.0 WORK AREA CSS
:: 10.0 FEATURES AREA CSS
:: 11.0 VIDEO AREA CSS
:: 12.0 PRICE PLAN AREA CSS
:: 13.0 COUNTER AREA CSS
:: 14.0 TESTIMONIAL AREA CSS
:: 15.0 TEAM AREA CSS
:: 16.0 NEWSLETTER AREA CSS
:: 17.0 DOWNLOAD AREA CSS
:: 18.0 BLOG AREA CSS
:: 19.0 BLOG PAGE DETAILS AREA CSS
:: 20.0 RTL AREA CSS
:: 21.0 PREVIEW AREA CSS
****************************** */

/* ******************************
:: 1.0 PAGE SECTION PADDING
****************************** */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ptb_180 {
        padding: 150px 0;
    }

    .ptb_150 {
        padding: 120px 0;
    }

    .ptb_100 {
        padding: 90px 0;
    }
}

@media (max-width: 991px) {
    .res-margin {
        margin-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .ptb_180 {
        padding: 130px 0;
    }

    .ptb_150,
    .ptb_100 {
        padding: 80px 0;
    }
}

@media (max-width: 575px) {
    .ptb_180 {
        padding: 80px 0;
    }
}

/* ******************************
:: 2.0 SECTION HEADING
****************************** */
@media (max-width: 991px) {
    .section-heading {
        margin-bottom: 50px;
    }

    .section-heading h3 {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .section-heading h3 {
        font-size: 25px;
    }
}

/* ******************************
:: 3.0 BUTTONS
****************************** */
@media (max-width: 575px) {
    .button-group a {
        margin-top: 10px;
    }
}

/* ******************************
:: 4.0 ANIMATION
****************************** */
@media (max-width: 991px) {
    .animation-container {
        top: 15%;
        left: 0;
    }
}

@media (max-width: 767px) {
    .animation-container {
        top: 16%;
        left: -10%;
    }
}

@media (max-width: 575px) {
    .work-animation {
        display: none;
    }
}

/* ******************************
:: 5.0 HEADER AREA CSS
****************************** */
@media (max-width: 991px) {
    .main-header-area {
        height: 70px;
    }

    .navbar-toggler {
        margin: 16px 0;
    }

    #crypts-menu {
        width: 100%;
        background-color: #f5f7fb;
        -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
        padding: 30px;
        border-radius: 0 0 6px 6px;
        margin-top: -2px;
    }

    .header-items .nav-link {
        color: #3a3a3a;
    }

    #crypts-menu button {
        margin-left: 0;
        margin-top: 15px;
    }

    .btn.crypts-btn.active::after {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

/* ******************************
:: 6.0 WELCOME AREA CSS
****************************** */
@media (max-width: 991px) {
    .welcome-area {
        height: 700px;
    }

    .welcome-intro > h1 {
        font-size: 3em;
    }
}

@media (max-width: 767px) {
    .welcome-area {
        height: 100%;
        padding-top: 90px;
    }

    .welcome-intro {
        margin-top: 30px;
    }

    .welcome-intro > h1 {
        font-size: 2.8em;
    }

    .welcome-thumb {
        padding-bottom: 120px;
    }
}

@media (max-width: 575px) {
    .welcome-intro {
        margin-top: 20px;
    }

    .welcome-intro > h1 {
        font-size: 2.5em;
    }
}

/* ******************************
:: 7.0 BENIFITS AREA CSS
****************************** */

@media (max-width: 767px) {
    .benifits-item {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .benifits-item .benifits-text > h3 {
        font-size: 20px;
        text-transform: uppercase;
    }
}

/* ******************************
:: 8.0 ABOUT AREA CSS
****************************** */
@media (max-width: 991px) {
    .about-text {
        text-align: center;
    }

    .about-text > h2 {
        font-size: 2.3em;
    }
}

@media (max-width: 575px) {
    .about-text > h2 {
        font-size: 2em;
        line-height: 1.3;
        text-transform: uppercase;
    }
}

/* ******************************
:: 9.0 WORK AREA CSS
****************************** */
@media (max-width: 991px) {
    .work-text {
        margin-left: 20px;
    }
}

@media (max-width: 575px) {
    .single-work {
        display: inline-block;
    }

    .work-thumb {
        padding-left: 25px;
    }

    .work-text {
        margin-left: 0;
    }

    .single-work .work-text > h3 {
        font-size: 20px;
        text-transform: uppercase;
        -webkit-transition: color 0.3s ease 0s;
        transition: color 0.3s ease 0s;
    }

    .work-text::after {
        display: none;
    }

    .work-content a.active .work-text {
        -webkit-box-shadow: inherit;
        box-shadow: inherit;
    }
}

/* ******************************
:: 10.0 FEATURES AREA CSS
****************************** */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .features-area .section-heading {
        margin-bottom: 10px;
    }

    .single-features {
        display: inline-block;
        margin-top: 40px;
    }

    .single-features .features-icon {
        padding-right: 0;
    }

    .single-features .features-icon span {
        margin: 0 auto;
    }

    .single-features .features-text {
        text-align: center;
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .features-area .section-heading {
        margin-bottom: 20px;
    }

    .single-features {
        padding-left: 0;
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .features-area .section-heading {
        margin-bottom: 40px;
    }

    .single-features {
        margin-top: 10px;
    }

    .features-text > h3 {
        font-size: 20px;
        text-transform: uppercase;
    }
}

/* ******************************
:: 11.0 VIDEO AREA CSS
****************************** */
@media (max-width: 575px) {
    .video-text > h3 {
        font-size: 30px;
    }
}

/* ******************************
:: 12.0 PRICE PLAN AREA CSS
****************************** */
@media (max-width: 991px) {
    .single-price-plan .price-title h3 {
        font-size: 2.5em;
    }
}

@media (max-width: 575px) {
    .single-price-plan.active {
        -webkit-transform: inherit;
        transform: inherit;
    }
}

/* ******************************
:: 13.0 COUNTER AREA CSS
****************************** */
@media (max-width: 991px) {
    .counter-text > span {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .counter-text h5 {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .single-counter {
        margin-bottom: 45px;
    }

    .total-subscriber .col-12:last-of-type .single-counter {
        margin-bottom: 0;
    }

    .counter-text > span {
        font-size: 35px;
    }

    .counter-text h5 {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .counter-text > span {
        font-size: 28px;
    }

    .counter-text h5 {
        font-size: 18px;
        text-transform: uppercase;
    }
}

/* ******************************
:: 14.0 TESTIMONIAL AREA CSS
****************************** */
@media (max-width: 767px) {
    .single-testimonial:after {
        left: 30px;
        right: 30px;
    }

    .single-testimonial p {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .client-name {
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
}

/* ******************************
:: 15.0 TEAM AREA CSS
****************************** */
@media (max-width: 575px) {
    .team-name {
        font-size: 20px;
        text-transform: uppercase;
    }

    .team-description {
        line-height: 1.8;
    }
}

/* ******************************
:: 16.0 NEWSLETTER AREA CSS
****************************** */
@media (max-width: 991px) {
    .newsletter-text > p {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .newsletter-form {
        text-align: right;
    }

    .newsletter-form input[type="email"] {
        width: 100%;
    }

    .newsletter-form input[type="submit"] {
        margin-top: 15px;
    }
}

/* ******************************
:: 17.0 DOWNLOAD AREA CSS
****************************** */
@media (max-width: 991px) {
    .download-text {
        text-align: center;
    }

    .download-text > h1 {
        font-size: 3.5em;
    }
}

@media (max-width: 767px) {
    .download-text > h1 {
        font-size: 3em;
    }
}

@media (max-width: 575px) {
    .download-text > h1 {
        font-size: 2.5em;
        text-transform: uppercase;
    }
}

/* ******************************
:: 18.0 BLOG AREA CSS
****************************** */
@media (max-width: 767px) {
    .blog-page {
        padding-top: 150px;
        padding-bottom: 50px;
    }
}

@media (max-width: 575px) {
    .blog-title {
        font-size: 22px;
    }
}

/* ******************************
:: 19.0 BLOG PAGE DETAILS AREA CSS
****************************** */
@media (max-width: 991px) {
    .sidebar .single-widget:last-child {
        margin-bottom: 35px;
    }

    .blog-right .sidebar .single-widget:first-child {
        margin-top: 35px;
    }

    .blog-right .sidebar .single-widget:last-child {
        margin-bottom: 0;
    }

    .widget-items .single-post {
        padding: 16px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .post-widget .widget-items .post-date {
        font-size: 14px;
    }

    .post-content h6 {
        font-size: 18px;
    }

    .crypts-blog .blog-share a {
        padding: 0 6px;
    }
}

@media (max-width: 767px) {
    .blog-details-right .search-widget {
        margin-top: 35px;
    }

    .meta-info {
        margin-top: 20px;
    }

    .single-blog-details .blog-content {
        padding: 0;
    }

    .crypts-blog .blog-details .blog-title > a {
        font-size: 22px;
    }

    .admin-name {
        font-size: 18px;
    }

    .single-comments {
        margin-left: 0;
    }

    .comments-content h5 {
        font-size: 16px;
    }

    .comments-content a:last-child {
        font-size: 14px;
    }

    .post-content h6 {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .crypts-blog .blog-details .blog-title > a {
        font-size: 18px;
    }

    .crypts-blog .meta-info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .crypts-blog .blog-share {
        margin: inherit;
        margin-top: 10px;
    }

    .admin {
        display: inline-block;
    }

    .admin-content {
        padding-left: 0;
        padding-top: 20px;
    }

    .single-comments {
        display: inline-block;
    }

    .comments-content {
        padding-left: 0;
        padding-top: 15px;
    }
}

/* ******************************
:: 20.0 RTL AREA CSS
****************************** */
@media (max-width: 767px) {
    .rtl .single-testimonial > img {
        margin-left: auto;
        margin-right: 0;
    }

    .rtl .subscribe-text .input-area {
        display: inline-block;
    }

    .rtl .subscribe-text .input-area input[type="text"] {
        border-radius: 25px;
    }

    .rtl .subscribe-text .input-area input[type="submit"] {
        border-radius: 25px;
    }
}

@media (max-width: 575px) {
    .rtl .single-work .work-thumb {
        padding-left: 0;
        padding-right: 25px;
    }

    .rtl .single-work .work-text {
        margin-right: 0;
    }
}

/* ******************************
:: 21.0 PREVIEW AREA CSS
****************************** */
@media (max-width: 991px) {
    .demo .welcome-intro > h1 {
        font-size: 4.5em;
    }
}

@media (max-width: 767px) {
    .res-blog {
        margin-bottom: 0;
    }

    .blog-demo-area .single-demo {
        margin-bottom: 45px;
    }

    .blog-demo-area .col-12:last-of-type .single-demo {
        margin-bottom: 0;
    }

    .demo .welcome-intro > h1 {
        font-size: 4em;
    }

    .demo .welcome-intro .button-group {
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .demo .welcome-area {
        height: 550px;
    }

    .demo .welcome-intro > p {
        font-size: 26px;
        line-height: 1.4;
    }
}