/* Responsive */

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {

    .mobile-show{display: block;}
    .mobile-hide{display: none;}

    body{font-size: 14px;}

    #header{
        .topbar{display: none;}
        .header{ padding: 10px 0;
            &-right{ display: flex; align-items: center;
                .nav, .btn-gradient{display: none;}
                .btn-menu{z-index: 99; display: block; position: relative; width: 36px; height: 36px; color: $black !important; text-align: center; margin-left: 15px;
                    .bar{width: 28px; height: 3px; display: block; background: $black; position: absolute; left: 4px; top: 8px; @include transition(); transform-origin: center center; border-radius: 3px;
                        &-2{top: 14px;}
                    }
                    &:after{content:"Menu"; text-transform: uppercase; position: absolute; bottom: 3px; left: 0; width: 100%; font-size: 9px; text-transform: uppercase; font-weight: 700; opacity: 1; @include transition();}
                    &.open{ color: $white; border-color: $white;
                        .bar-1{transform: rotate(-45deg) translate3d(0,1px,0); top: 14px;}
                        .bar-2{transform: rotate(45deg) translate3d(-3px,-4px,0); top: 20px;}
                        &:after{opacity: 0;}
                    }
                }
            }
        }
        .logo{
            img{height:45px;}
        }
        .searchbox{right: 100px; top: -2px; left: 15px; width: auto;
            .form-control{font-size: 16px; padding-left: 28px;}
            button{font-size: 18px; top: 16px;}
        }
    }

    .burger-menu{ display: block;}

    h1,.h1{font-size:32px;}
    h2,.h2{font-size:30px;}
    h3,.h3{font-size:25px;}
    h4,.h4{font-size:22px;}
    h5,.h5{font-size:20px;}
    h6,.h6{font-size:18px;}
	p.lead{font-size:16px;}
    .title{margin-bottom: 25px;}
    .badge{width: 35px; height: 35px; line-height: 35px; font-size: 9px;}

    .btn, .button{ font-size: 12px; padding: 10px 15px 8px;
        & + .btn{margin-left: 5px;}
    }


    .page-banner{height: auto; min-height: 40vw; padding: 20px 30px;
        &:not(.page-banner-large){
            h1{font-size: 30px; margin: 0;}
        }
        &-large{ min-height: 450px; height: auto; padding: 50% 0 0;
            .page-banner-bg-image{height: auto; bottom: 50%;}
            .page-banner-content{width: 100%; max-width: none; padding: 30px; margin: 0; text-align: center;
                &:before{transform: none;}
                .h1{font-size: 30px;}
                .lead{margin: 26px 0; font-size: 15px;}
            }
            .scroll-indicator{display: none;}
        }
        &-bg-video{display: none;}
    }


    .section{padding: 30px 0;

        &.section-dark{padding: 40px 0;}

        &-content-image{
            .content-image-image{position: relative; left: 0 !important; right: auto !important; width: 100% !important; height: 85vw; background-position: 0 50% !important;}
            .content-image-content{ padding: 30px 0 0 !important; min-height: 0;}
            &.content-image-wide{
                .section-content-image-inner{margin: 30px 0;}
                .content-image-image{left: 15px !important; right: 15px !important; width: calc(100% - 30px) !important;}
            }
        }

        &-case-studies{
            &.carousel-1{
                .slick-active .card{
                    .card-content{
                        .btn-link{display: block; padding: 15px 0; margin: 5px 0 0; text-align: left;}
                    }
                }
            }
        }

    }


    .card{

        &-blog{
            .card-content h4{font-size: 20px;}
        }

        &-team{
            .card-content{ font-size: 12px;
                h5{font-size: 15px;}
            }
        }

    }


    .box{

        &-career{padding: 20px;}

    }


    .icon-block{ font-size: 13px;
        &-image img{height:35px;}
    }

    .partner-logos{flex-wrap: wrap;}
    .partner-logo{ padding: 15px; width: 90px;
        img{max-height: 45px;}
    }


    .share-post{text-align: center; width: 100%; position: static;
        a.at-icon-wrapper{margin: 0 10px !important}
    }
    .blog-filters{ flex-direction: column;
        &-social{margin-bottom: 15px;}
    }

    .panel-group .panel>.panel-heading{
        .panel-title{font-size: 14px;}
        a{padding: 15px 50px 15px 15px;
            &:after{top: 14px;}
        }
        &+.panel-collapse>.panel-body{padding: 10px 15px 20px; font-size: 13px;}
    }

    .section-icon-form .row-icons{ flex-wrap: wrap;
        .col{width: 50%;}
    }


    .sidebar{padding-top: 50px;

    }

    .newsletter{ flex-direction: column;
        &-left{padding: 0 0 20px;}
        &-right{
            form{flex-direction: column;}
            .gform_fields{flex-direction: column; padding-bottom: 0;
                .gfield{padding: 0 0 10px !important;}
                .ginput_container_email{width: 100%;}
                .gfield_consent{position: static; margin-top: 0 !important;}
            }
            .gform_body{width: 100%;}
            .gform_footer{margin: 10px 0 0;}
        }
    }


    #footer{
        .footer-cta{
            &-inner{padding: 20px 0; border: none;}
            &-left{display: none;}
            &-right{text-align: center; justify-content: center; flex-direction: column; align-items: center; width: 100%;
                h5{margin: 0 0 10px; font-size: 15px;}
            }
        }
        .footer-main{ padding: 10px 0 20px;
            .row-equal .col{margin: 0;}
            h5{margin: 0; border-top: 1px solid rgba($white,0.2); padding:15px 0; font-size: 20px; cursor: pointer; position: relative;
                &:after{content:"\f107"; font-family:'Font Awesome 5 Pro'; font-weight:400; position:absolute; top:15px; right:0; font-weight: 300; line-height: 1; font-size: 20px;}
                &.open:after{transform: rotate(180deg);}
            }
            ul{margin-bottom: 15px;}
            .footer-col-content{display: none; margin: 0; padding:15px 0 15px;}
            .footer-contact{text-align: center; margin-top: 30px;}
            .social-icons{text-align: center;
                .social-icon{margin: 0 8px 10px;}
            }
        }
        .copyright{margin-top: 0; text-align: center; font-size: 11px; padding: 15px 0;
            &-left ul li{margin: 0 10px;}
            p{display: block; margin: 0;}
            &-right{text-align: center; padding-top: 10px;}
        }
        .siteby a{background-position: 100% 20%;}
    }


    .modal-body{padding: 25px;}


}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 479px) {

    .row-xs-full .col{width: 100%;}
    .gfield, .ginput_container_address>span{width: 100%;}
    .cols{columns: 1;}

    .cta{padding: 15px; flex-direction: column; align-items: center; text-align: center; border-radius: 0;
        &-text{padding: 0 10px 10px;}
    }
    .row-title{
        .text-left,.text-right{text-align: center;}
        .text-right{ margin: 15px 0 0;}
    }
    .icon-blocks-inline{
        .row-icon-blocks .col{width: 100%;}
    }
    .box-career{flex-direction: column; align-items: flex-start;
        .btn{margin-top: 15px;}
    }

}