/* CSS Responsive Style Sheet */

/*
min-width -- based on minimum viewport widths and allow us to scale up elements as the viewport changes
max-width -- the given screen size or smaller

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape iphones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (ipads, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/




/* myRESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 992px) {
  .main_menu_area .navbar .navbar-collapse {
    text-align: right;
    display: block !important;
  }

  .main_menu_area .navbar .navbar-nav li.submenu .dropdown-menu {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    display: block;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    min-width: 190px;
    background: #777777;
    left: auto;
    right: 0px;
    top: 90%;
    border-radius: 15px;
    border: none;
    padding: 0px 0px 0px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    visibility: hidden;
  }

  .main_menu_area .navbar .navbar-nav li:hover.submenu .dropdown-menu {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    visibility: visible;
  }
}
	

/*Large (lg) devices (desktops, 992px and up)
-------------------------------------------------- */
@media (max-width: 992px) {
.social a {
        font-size: 4em;
        padding: 2rem;
    }
}


/* Changes to these when screen is 768 or smaller... 
Medium (md) devices (ipads, 768px and up)
-------------------------------------------------- */
@media (max-width: 768px) {

.carousel-caption {
    top: 25%;
}

.carousel-caption h1 {
    font-size: 350%;
}

.carousel-caption h3 {
    font-size: 140%;
    text-weight: 400px;
    padding-bottom: .2rem;
}  
    
.carousel-caption .btn {
    font-size: 95%;
    padding: 8px 14px;
}	
	
.display-4 {
    font-size: 200%;
}
    
.social a {
    font-size: 2.5rem;
    padding: 1.2rem;
}
	
.jumbotron h1 {
	   font-size: 1.5rem;
	}
.jumbotron p {
	   font-size: 1.0rem;
	}
.signup_container {
  width: 80%;
}
}

/* Changes to these when screen is 576 or smaller...
Small (sm) devices (landscape iphones, 576px and up)
-------------------------------------------------- */
@media (max-width: 576px) {
.carousel-caption {
    top: 25%;
}

.carousel-caption h1 {
    font-size: 200%;
}

.carousel-caption h3 {
    font-size: 110%;
    text-weight: 400px;
    padding-bottom: 2rem;
}   
    
.carousel-caption .btn {
    font-size: 90%;
    padding: 4px 8px;
}
  
.carousel-indicators {
        display: none;
    }
	
.display-4 {
    font-size: 160%;
}
    
.social a {
    font-size: 2rem;
    padding: .7rem;
} 
	
.jumbotron {
    padding: 20px 10px 20px 10px;
    border-radius: 0px;
}
.jumbotron h3 {
    font-size: 24px;
}	

}


/* Changes to these when screen is 481 or smaller...
Extra small (xs) devices (portrait phones, less than 481px)
-------------------------------------------------- */
@media (max-width: 481px) {
.carousel-item {
	height: 220px;
	}

.carousel-caption {
    top: 20%;
}

.carousel-caption h1 {
    font-size: 140%;
}

.carousel-caption h3 {
    font-size: 110%;
    text-weight: 400px;
    padding-bottom: 2rem;
}   
    
.carousel-caption .btn {
    font-size: 90%;
    padding: 4px 8px;
}
  
.carousel-indicators {
        display: none;
    }
	
.display-4 {
    font-size: 160%;
}
    
.social a {
    font-size: 2rem;
    padding: .7rem;
} 
	
.jumbotron {
    padding: 20px 10px 20px 10px;
    border-radius: 0px;
}
.jumbotron h3 {
    font-size: 24px;
}	


.cio_padding {
	padding: 0px 30px 40px 30px;
}
	
.cio_area h3 {
    font-size: 30px;
}	

}



/* For Screens "Less Than" This Size, Functions Will Apply: 
-------------------------------------------------- */
@media (max-width: 1750px){
    .best_3d_area .left_3d::before {
        background-size: contain;
        width: 100%;
    }
}

@media (max-width: 1520px){
    .shap_mobile {
        padding-left: 80px;
        width: 38%;
        padding-top: 60px;
    }
    .text_3d {
        width: 62%;
        padding-top: 100px;
    }
    .shap_mobile img{
        max-width: 100%;
    }
    .best_3d_area {
        min-height: auto;
    }
    .shap_slider_inner {
        margin-right: 114px;
        margin-top: 226px;
    }
    .shap_slider_inner .owl-dots {
        margin-top: 6px;
        margin-right: 55px;
    }
}

@media (max-width: 1300px){
    .shap_slider_inner {
        margin-right: 12px;
    }
    .shap_slider_inner .owl-dots {
        margin-right: 126px;
    }
}

@media (max-width: 1230px){
    .best_3d_area .left_3d {
        width: 100%;
        float: none;
    }
    .best_3d_area .left_3d::before {
	    display: none;
    }
    .shap_slider_inner .item {
        color: #0b1033;
    }
    .shap_slider_inner .item p {
        color: #7c8d93;
    }
    .best_3d_area {
        display: block;
    }
    .best_3d_area .right_text {
        width: 100%;
        float: none;
        overflow: hidden;
    }
    .shap_slider_inner {
        max-width: 500px;
        float: none;
        margin: 40px auto 0px;
    }
    .shap_slider_inner .owl-dots .owl-dot {
        background: #000;
    }
}

@media (max-width: 1199px){
    .team_people_text ul li {
        width: calc(100% / 1);
        float: none;
        margin-bottom: 15px;
    }
    .team_people_text ul li:nth-child(2n) {
        padding-left: 0px;
    }
    .team_people_text p {
        padding-bottom: 24px;
    }
    .get_in_touch_area .touch_details {
        margin-left: 0px;
    }
    .main_slider_area .rev_slider .tp-revslider-mainul li .slider_text_box .single_img {
        display: none;
    }
}

@media (max-width: 991px){
    .main_menu_area {
        padding: 0px 0px;
    }
    .main_menu_area .navbar {
  height: 80px;
    }
    .navbar-light .navbar-brand {
        padding: 0px 0px 0px 15px;
    }
    
    
    .main_menu_area .navbar .navbar-nav li {
        display: block;
        margin-right: 0px;
    }
    .main_menu_area .navbar .navbar-nav li a {
        display: block;
        line-height: 50px;
        padding: 0px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }
    .main_menu_area .navbar .navbar-nav li:hover a, 
    .main_menu_area .navbar .navbar-nav li.active a {
        color: #97ccfe;
    }
    .main_menu_area .navbar .navbar-nav li a:focus{
        color: #97ccfe;
    }
    
    
    .main_menu_area .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, 
    .navbar-light .navbar-nav .nav-link.show, 
    .navbar-light .navbar-nav .show > .nav-link {
        color: #97ccfe;
    }
    .main_menu_area .navbar .navbar-nav {
        display: block;
        text-align: right;
    }
    
     .main_menu_area .navbar .navbar-collapse {
        background: #444444; 
        border: 1px solid #fff; 
        max-height: 306px;
        overflow-y: scroll; 
        border-radius: 15px;
    }
    .main_menu_area .navbar .navbar-toggler {
        padding: 0px 15px 0px 0px;
        cursor: pointer;
    }
    .main_menu_area .navbar .navbar-nav li.submenu .dropdown-menu {
        background: transparent;
        margin: 0px;
        padding: 0px;
    }
    .main_menu_area .navbar .navbar-nav li.submenu .dropdown-menu li a {
        line-height: 50px;
        padding: 0px 20px;
    }
    
    
    
    .text_3d {
        padding-left: 15px;
    }
    .team_people_text {
        max-width: 540px;
        float: none;
        margin: auto;
    }
    .team_img_inner {
        max-width: 591px;
        margin: 30px auto -20px;
    }
    .touch_details {
        margin-left: 0px;
        margin-top: 60px;
    }
    .contact_us_form {
        margin-top: 0px;
    }
    .footer_widget_inner .col-sm-6{
        margin-bottom: 30px;
    }
    .footer_widget_inner .col-sm-6:last-child{
        margin-bottom: 0px;
    }
    .footer_widget_area {
        padding: 100px 0px 100px 0px;
    }
    .challange_text_inner {
        max-width: 545px;
        float: none;
        margin: auto;
    }
    .challange_img {
       display: block;
        margin-top: 50px;
    }
    .testimonials_slider::before {
        display: none;
    }
    .testimonials_slider .owl-dots .owl-dot {
        background: #0b1033;
    }
    .testimonials_slider .owl-dots .owl-dot.active {
        background: #97ccfe;
    }
    .testimonials_area {
        padding-top: 60px;
        padding-bottom: 100px;
    }
    .company_skill {
        padding-top: 40px;
    }
    .circle_progress .circle_progress_inner {
        margin-bottom: 30px;
    }
    .circle_chart_area .row{
        margin-bottom: -30px;
    }
    .service_solution_area::before {
        opacity: 1;
    }
    .blog_right_sidebar{
        max-width: 270px;
        margin-top: 100px;
    }
    
}
@media (max-width: 767px){
    .shap_mobile {
        display: none;
    }
    .talk_text a {
        font-size: 38px;
    }
    .talk_text h4 {
        font-size: 38px;
    }
    .text_3d {
        width: 100%;
        padding-top: 100px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .best_3d_area {
       padding: 0px 15px;
    }
    .shap_slider_inner .owl-dots {
        margin-right: 0;
        text-align: center;
    }
    .bd-callout {
        left: 0px;
        padding: 30px 15px;
        max-width: 300px;
    }
    .bd-callout h4 {
        display: block;
        padding-left: 0px;
        padding-top: 10px;
    }
    .blog_img .blog_date {
        position: relative;
        left: 30px;
        top: 22px;
    }
    .buttons_area .submit_btn {
        margin-left: 8px;
        display: block;
        margin-top: 20px;
    }
    .buttons_area .more_btn{
        margin-bottom: 20px;
    }
}

@media (max-width: 575px){
    .team_img_inner .team_img_item img {
        max-width: 100%;
    }
    .bd-callout {
        position: relative;
        transform: translateY(0%);
        margin: auto;
    }
    .footer_widget_inner{
        max-width: 320px;
        margin: auto;
    }
    .footer_copyright{
        text-align: center;
    }
    .banner_area::before {
        max-width: 100%;
        background-size: cover;
    }
    .banner_inner_text {
        padding-top: 150px;
    }
    .banner_inner_text h2 {
        font-size: 50px;
    }
    .banner_inner_text p {
        font-size: 20px;
    }
    .challange_text_inner p {
        padding-right: 0px;
    }
    .talk_area {
        padding: 80px 0px 80px 0px;
    }
    .talk_text h4 {
        font-size: 26px;
        padding-bottom: 16px;
    }
    .talk_text a {
        font-size: 20px;
    }
    .portfolio_filter {
        padding: 95px 0px 50px 0px;
    }
    .s_blog_social ul li:first-child {
        margin-left: 15px;
    }
    .s_blog_social ul li {
        margin-left: 15px;
    }
    .mileston_item {
        text-align: center;
    }
    .elements_title {
        text-align: center;
    }

}


@media (max-width: 480px){
	
	
    .l_title h2 {
        font-size: 32px;
    }
    .c_title h2 {
        font-size: 32px;
    }
    .blog_text {
        padding: 40px 15px 65px 15px;
    }
    .blog_img .blog_date {
        left: 15px;
    }
    .s_blog_social {
        padding-left: 15px;
    }
    .blog_author .media {
        display: block;
    }
    .blog_author .media .d-flex {
        padding-right: 0px;
        margin-bottom: 20px;
    }
    .blog_comment .media {
        display: block;
    }
    .blog_comment .media .d-flex {
        display: block !important;
        padding: 20px 0px 0px 0px;
    }
    .blog_comment .media .media-body {
        padding-left: 0px;
        padding-top: 20px;
    }
    .blog_comment h3 {
        padding-bottom: 50px;
        padding-top: 50px;
    }
    .buttons_area .solid_btn {
        margin-left: 0px;
        display: inline-block;
    }
    .contact_map_area .mapBox1 {
        min-height: 575px;
    }
    .signup_container {
  width: 90%;
}
}