/*------------------------------------------

Project Name : xPlus;
Desgined By  : Faridul Haque;
Developed By : Sumaiya Shampa & Faridul Haque;
Date         : 25-Jan-2017
------------------------------------------*/

.btn.xplus-btn-round{
    background: #2196f3;
}
.btn.send-btn-round {
     float: right;
}
.btn.send-btn-round span {
    margin-left: 12px;
}
.promo_info .btn.xplus-btn-round {
    width: 190px;
}

/* ============= Color Presets ================ */

/*Color Gray*/
.btn.btn-primary i,
.portfolio_detail h4 a,
ul.trigger li.active,
.tab-pane h4,
.client_testimonial_3column_bottom h4{
    color: #333;
}

/*Color blue*/
.hero_content p a,
.grid figure figcaption i:hover,
.menuzord-menu ul.dropdown li:hover>a,
.menuzord-menu ul.dropdown li.active>a,
.menuzord-menu>li>.megamenu .megamenu-row li:hover>a,
.menuzord-menu>li>.megamenu .megamenu-row li.active>a,
.menuzord .menuzord-menu>li.active>a,
.menuzord .menuzord-menu>li.active>a>i,
.menuzord .menuzord-menu>li:hover>a,
.menuzord .menuzord-menu>li:hover>a>i,
.client_testimonial_3column_info:after,
.footer_left_icon li a:hover
.upgraded_1 input[type=email]:focus:not([readonly])+label, 
.upgraded_h_1 input[type=email]:focus:not([readonly])+label, 
.upgraded_field input[type=email]:focus:not([readonly])+label, 
.upgraded_field input[type=text]:focus:not([readonly])+label, 
textarea.massage_textarea:focus:not([readonly])+label{
    color: #2196f3!important;
}
.nav-border-bottom .menuzord .menuzord-menu>li.active>a,
.nav-border-bottom .menuzord .menuzord-menu>li:hover>a {
    border-bottom: 3px solid #2196F3;
}
.nav-border-box .menuzord-menu > li.active > a,
.nav-border-box .menuzord-menu > li:hover > a{
    border:1px solid #2196F3;
}
.input-field-modal button,
.nav-boxed-color .menuzord-menu > li.active > a,
.nav-boxed-color .menuzord-menu > li:hover > a{
    background: #2196F3!important;
}
.menuzord-menu ul.dropdown li >a::before,
.menuzord-menu>li>.megamenu .megamenu-row li >a::before {
    background-color: #2196F3!important;
}

/*
************************************************
         == Navigation Bar Start ==
************************************************ 
*/
.tt-nav.sticky .header-default {
    background: #fff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.header-sticky, .sticky.transparent-header .header-sticky{
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.menuzord-menu>li>a{
    text-transform: capitalize;
}
.btn-search {
    margin: 35px 0px 0 40px;
}
/*
************************************************
         == Hero CSS Start ==
************************************************ 
*/
.hero_area {
    position: relative;
    padding: 220px 0 90px;
    text-align: center;
}
.hero_content h1 {
    font-family: 'Roboto Slab', serif;
    font-size: 48px;
    line-height: 60px;
    font-weight: 700;
    color: #444;
}
.hero_content p {
    color: #777;
    font-size: 17px;
    font-family: 'proxima_nova_rgregular';
    margin-top: 25px;
}
.hero_content p a {
    border-bottom: 1px solid #c7e5fc;
    -webkit-transition: .3s;
    transition: .3s;
}

/*
************************************************
       == Portfolio CSS Start ==
************************************************ 
*/
.work-4col.masonry.page-section {
    padding: 0;
}
/* ------ portfolio Filter -----*/
.portfolio-filter {
    background: none;
    box-shadow: none;
    line-height: 0;
    margin-bottom: 50px;
}

.portfolio-filter li {
	padding: 0 15px;
	
}
.portfolio-filter li a {
    padding: 5px;
}

.portfolio-filter li.active {
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.portfolio-filter li.active a {
	border-bottom: 3px solid #333;
	color: #666;
}
/*
************************************************
       == Promo CSS Start ==
************************************************ 
*/
.promo_cta{
    background: #F8F8F8;
    padding:40px 0 45px;
}
.promo_info h3 {
    color: #333;
    font-size: 36px;
    font-family: 'proxima_nova_rgbold';
    margin-bottom: 40px;
}

/*
************************************************
        == Our Service CSS Start ==
************************************************ 
*/
.service.page-section {
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
}    
.service_text {
    width: auto;
}
.service_icon i{
    background: #2196f3;
}
.hover_box_onepage_agency {
    text-align: center;
    -webkit-transition: .3s;
    transition: .3s;
}
.hover_box_onepage_agency:hover {
      background: #fff;
    box-shadow: rgba(0, 0, 0, .15) 0px 4px 10px;
}
.service_content:hover .sercice_icon i {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.service_content_onepage_agency {
    margin-bottom: 40px;
    padding: 0px 0 20px;
}

/*
************************************************
         == About CSS Start ==
************************************************ 
*/
.who-we-are .about_content{
    margin-top: 0;
}
.tab-pane h4 {
    font-size: 24px;
    font-family: 'proxima_nova_rgbold';
    text-transform: uppercase;
}
.tab-pane a {
    border-bottom: 1px solid #e1e1e1;
    color: #888888;
    font-size: 15px;
    font-family: 'proxima_novasemibold';
}
.custom_progress {
    border-radius: 50px;
}
.custom_progress_bar {
    background-color: #2196f3;
    border-radius: 50px;
}

/*
************************************************
         == Video CSS Start ==
************************************************ 
*/
.onepage_video_area{
    background-image: url(../../images/video-agency.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    height: 455px;
    width: 100%;
    z-index: 1;
    padding: 0;  
    margin: 60px 0 0;
}
.onepage_video_area:after{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 455px;
    width: 100%;
    background: rgba(35, 35, 40, .9);
    z-index: -1;
}
.video_img {
    margin-top: -60px;
    text-align: center;
}
.video_content {
    margin-top: 54px;
    text-align: center;
}
.video_content span {
    font-size: 20px;
    color: #ffffff;
    font-family: 'proxima_nova_rgbold';
    margin: 0 28px;
}
 .agency_onepage_youtube_video {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 5px 10px -3px rgba(0,0,0,.5);
    text-align: center;
    border-radius: 50%;
    position: relative;
    font-size: 48px;
    background-color: #2196f3;
    height: 90px;
    width: 90px;
    line-height: 80px;
    margin-top: -8px;
    border: 5px solid #fff;
}
.agency_onepage_youtube_video:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    color: #fff;
}
.agency_onepage_youtube_video i {
    margin-left: 5px;
}


/*
************************************************
         == Contact CSS Start ==
************************************************ 
*/
.contact_area {
    background: #f8f8f8;
}
.contact_icon {
    background: #2196f3;
}
.section_common_space input[type=email]:focus:not([readonly]),
.section_common_space input[type=text]:focus:not([readonly]), 
textarea.massage_textarea:focus:not([readonly]), 
.contact-form input[type=email]:focus:not([readonly]) {
    border-bottom: 1px solid #2196f3;
    box-shadow: 0 1px 0 0 #2196f3;
}
.contact_icon {
    background: #2196f3;
}
.contact_area.page-section {
    padding: 105px 0 95px;
}

.contact_area .btn.xplus-btn-round {
    line-height: 50px;
    height: 50px;
    width: 150px;
    margin-top: -6px;
}
.btn-default-contact{
    background: #2196f3;
    color: #fff;
    border-radius: 50px;
}
.btn-default-contact:hover{
    background: #2196f3;    
}
.btn-default-contact:focus{
    color: #fff;
    background: #2196f3;    
}

/*************************************************
         ==Footer Portfolio CSS==
************************************************/
.footer_area {
    padding: 30px 0 10px;
}

.footer_logo img{
    height: 50px;
}
.footer_icon li, .footer_menu li:after, span.scroll_top_up, .footer_menu li:before{
    background: #2196f3;
}
.copyright_section p a,
.footer_menu li a:hover{
    color: #2196f3;
}

/* ============================  Rsponsive Css ================================= */

@media only screen and (min-width: 992px) and (max-width: 1200px){
    .footer-veno-item {
        height: 66px;
        width: 66px;
    }
    .footer-overlay-img a {
        width: 72px;
        height: 72px;
    }
    .footer_menu_bottom ul li {
        padding-right: 30px;
    }
    .footer_menu_bottom ul li a, .copyright p {
        font-size: 13px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .contact_area.page-section {
        padding: 105px 0 60px;
    }
    .tab-pane {
        margin-top: 0;
    }
    .service_text  p {
        padding: 0 5px;
    }
    .skill {
        margin-top: 30px;
    }

    .contact_address {
        margin-left: -12px;
    }
    .contact-form {
        margin-bottom: 50px;
    }
    .bottom_footer {
        margin-top: 90px;
    }
    .bottom_footer_text {
        text-align: center;
    }
    .footer_menu_bottom ul li {
        padding-right: 20px;
    }
    .footer_menu_bottom ul li a{
        font-size: 15px;
    }
    .footer_menu_bottom ul li:after{
        border-left: none;
    }
    .copyright p {
        font-size: 15px;
    }
    
}

@media (max-width: 768px){
    .logo_area_onepage_agency {
        padding-top: 20px;
    }
}

@media (max-width: 767px){
    .hero_content h1 {
        font-size: 50px;
    }
    .hero_content p {
        font-size: 16px;
    }
    .btn.xplus-btn-round {
        height: 55px;
        font-size: 14px;
        line-height: 55px;
        width: 160px;
    }
    .promo_info h3, .title h3 {
        font-size: 26px;
    }
    .portfolio_area_onepage_agency {
        padding: 85px 0 68px;
    }
    .page-section {
        padding: 90px 0 10px;
    }
    .service_text p{
        padding: 0 8px;
    }
    .promo_cta {
        padding: 125px 0 58px;
    }
    .promo_info h3 {
        margin-bottom: 30px;
    }
    .page-section {
        padding: 52px 0 72px;
    }
    .client_testimonial_3column_info:after {
        left: -28px;
    }
    #contact {
        padding-bottom: 5px;
    }
    #map_contact {
        margin-top: 80px;
    }
    .contact_address {
        margin-left: -12px;
    }
    .contact-form {
        margin-bottom: 60px;
    }
    .contact_bottom {
        padding: 60px 0 45px;
    }
    .flicker-photo {
        margin-left: 0;
    }
    .bottom_footer {
        margin-top: 90px;
        padding: 50px 0;
    }
    .bottom_footer_text {
        text-align: center;
    }
    footer.footer_area.page-section {
        padding-bottom: 75px;
    }
    .copyright {
        float: none;
        margin-top: 0;
    }
    
}
@media (max-width: 680px){      
    .video_img img {
        width: 80%;
    }
    .onepage_video_area, .onepage_video_area:after{
        height: 315px;
    }
    .onepage_video_area .video_content {
        margin-top: 40px;
    }
    a.agency_onepage_youtube_video {
        font-size: 25px;
        height: 60px;
        width: 60px;
        line-height: 52px;
    }
    .video_content span {
        font-size: 18px;
        margin: 0 4px;
    }

}
@media (max-width: 500px){
    .logo_area_onepage_agency{
        padding: 20px 0;
        width: 150px;
    }
    .logo {
        width: 100%;
    }
    .hero_area {
        padding: 140px 0 60px;
        text-align: center;
    }
    .hero_content h1 {
        font-size: 28px;
        line-height: 45px;
    }
    .hero_content p {
        font-size: 16px;
    }
    .page-section,  .page-section{
        padding: 90px 0;
    }
    .portfolio_area_onepage_agency {
        padding: 90px 0 70px;
    }
    .work-4col.masonry .portfolio-filter li a {
        padding: 12px 0px;
    }
    .page-section{
        padding: 90px 0 20px;
    }
    .onepage_video_area, .onepage_video_area:after{
        height: 245px;
    }
    .onepage_video_area .video_content {
        margin-top: 40px;
    }
    a.agency_onepage_youtube_video {
        font-size: 25px;
        height: 60px;
        width: 60px;
        line-height: 52px;
    }
    .video_content span {
        font-size: 18px;
        margin: 0 4px;
    }
    .mix_trigger {
        text-align: center;
    }
    ul.trigger li {
        padding: 0 10px;
    }
    .tab-pane {
        margin-top: 0;
    }
    .tab-pane, p.tab_content {
        margin-top: 0;
    }
    .contact_text p, .more_about_us p, 
    .footer_menu_bottom ul li a{
        font-size: 14px;
    }
    #contact {
        padding-bottom: 75px;
    }
    .contact_bottom .contact_text p{
        font-size: 13px;
    }
    .contact_bottom {
        padding: 60px 0 0;
    }
    .more_about_us {
        padding: 0;
    }
    .flicker-photo, .newsletter_subscribe {
        margin-top: 35px;
    }
    .footer-overlay-img a {
        width: 68px;
        height: 70px;
    }
    .footer-veno-item {
        height: 62px;
        width: 62px;
        margin: 5px auto;
    }
    .matx-form-valid.contact-form{
        margin: -24px 0 28px 0;
    }
    .footer_area{
        padding-top: 90px;
    }
    .footer_menu_bottom ul li:after{
        border-left: none;
    }
    .footer_menu_bottom ul li {
        padding: 0 6px;
        line-height: 26px;
    }
    .footer_menu_bottom ul li a{
        
    }
    .copyright p {
        margin-top: 12px;
    }
    
}
@media (max-width: 479px){
    .onepage_video_area, .onepage_video_area:after{
        height: 220px;
    }
}

@media (max-width: 320px){
    .onepage_video_area, .onepage_video_area:after{
        height: 170px;
    }
        .video_img img {
        width: 90%;
    }
}