@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap');

a{color: #a17f07;}

h2{font-family: "Roboto", "Helvetica", Arial, sans-serif; font-size: 60px; font-weight: bold !important; text-transform: uppercase;}

h3{font-family: "Poppins", "Roboto", "Helvetica", Arial, sans-serif; font-size: 36px; font-weight: bold !important; text-transform: uppercase; }

h4{font-family: "Poppins", "Roboto", "Helvetica", Arial, sans-serif; font-size: 30px; font-weight: bold !important;}

p{font-size: 1.1em; color: #000; margin-bottom: 25px; line-height: 135%;}

.clear{width:100%;height:0;overflow:hidden;clear:both;}


.container.max {width: 100%; }
.container.l0 {max-width: 1040px;}

/********* logo */

.w3_agile_logo{position: relative; padding-top: 25px;}
.w3_agile_logo h1{}
.w3_agile_logo h1 a{display: block; margin: auto; width: 260px; height: 60px; text-indent: -9999px; background: url(../images/logo.png) no-repeat center; background-size: 100%;}

.w3_agile_logo.white h1 a{background-image: url(../images/tbs-logo-black@2x.png);}



/********* nav */

.linkHoverEffect_11 a::before, .linkHoverEffect_11 a::after{border-color: #a17f07;}

.top-nav .linkHoverEffect_11 li  a:hover, .top-nav .linkHoverEffect_11 li.agile_active  a{color: #a17f07;}

header{position: fixed; top: 0; left: 0; width: 100%; z-index: 3; border-bottom: 1px rgba(255, 255, 255, 0.3) solid; transition: .5s ease all;}
header.scrolled{background: rgba(0,0,0, 0.6) !important;}
header .container{position: relative; width: auto; padding: 0 30px;}

header .top{padding: 25px 0; position: absolute; top: 30px; left: 0; width: 100%; text-align: center;}
header .top nav{ display: inline-block;}
header .top nav ul{list-style: none;     display: inline-block; vertical-align: middle;}
header .top nav li{float: left; margin: 0 12px;}
header .top nav li a{color: #fff; text-transform: uppercase; font-size: 14px; font-weight: bold; transition: .5s ease all;}
header .top nav li a:hover{color: #a17f07;}

header .top .mobileLogo{display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .top .mobileLogo a{display: block; margin: auto; width: 140px; height: 35px; text-indent: -9999px; background: url(../images/tbs-logo-black@2x.png) no-repeat center; background-size: 100%;}

.respMenu, a.menu{display:none;}

header .top a.searchLink{float: right; color: #000; font-size: 24px;}

header .logo{padding: 40px 0; text-align: center; float: left; position: relative; z-index: 2; margin-left: 30px;}
header .logo h1 a{display: block; margin: auto; width: 240px; height: 45px; text-indent: -9999px; background: url(../images/tbs-logo-white@2x.png) no-repeat center; background-size: 100%;}

header .social-icons{float: right;  padding: 47px 0 47px 20px; border-left: 1px rgba(255, 255, 255, 0.1) solid;}
header .social-icons ul{}
header .social-icons ul li{float: left;}
header .social-icons ul li a.fa{color: #fff;}
header .social-icons ul li a:before{box-shadow: none !important;}
header .social-icons ul li a:after{}

header.bg{background: #000;}
header.bg .logo h1 a{}

#navigation{display: none; position: fixed; top: 68px; left: 0; z-index: 99999; width: 100%; height: calc(100% - 70px); background: #000; overflow: auto;}

#navigation .wrapper{text-align: center;}

#navigation .wrapper nav{position: relative; padding-top: 30px; margin-bottom: 70px;}
#navigation .wrapper nav ul{}
#navigation .wrapper nav ul li{}
#navigation .wrapper nav ul li a{display: block; padding: 12px 0; color: #fff; font-size: 16px; text-transform: capitalize;}

#navigation .wrapper img.logo{display: block; max-width: 170px; margin: 0 auto 30px;}

#navigation .wrapper .social-icons{text-align: center;}
#navigation .wrapper .social-icons ul{}
#navigation .wrapper .social-icons ul li{display: inline-block; vertical-align: middle;}
#navigation .wrapper .social-icons ul li a.fa{color: #333;}
#navigation .wrapper .social-icons ul li a:before{box-shadow: inset 0 0 0 48px #fff !important;}
#navigation .wrapper .social-icons ul li a:after{}

body.menu header .top{background: #000;}
body.menu header .top a.searchLink{color: #fff;}
body.menu header .top .mobileLogo{display: none;}
body.menu header .top nav ul{display: none;}
body.menu header .social-icons{display: none;}

body.menu #navigation{display: block;}

.container.c1{width: 1050px;}

/*************************** Pages */

main.page {overflow: hidden;}

.image{position: relative;}
.image:before{content: ""; position: absolute; top: -5px; left: -5px; width: 100%; height: 100%; background:#947e00 ;}
.image img{display: block; max-width: 100%; position: relative; z-index: 2;}

.image.alt:before{top: inherit; left: inherit; bottom: -5px; right: -5px;}

h3{position: relative; padding-bottom: 25px; margin-bottom: 30px; color: #947e00;}
h3:after{content: ""; height: 2px; width: 80px; background: #947e00; position: absolute; bottom: 0; left: 50%; margin-left: -40px;}

/********* landing */

#home{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000;}

#home #landingSlider{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#home #landingSlider img{width: 100%;}

#home .bggradient{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2;}

#home .caption{position: absolute; top: 50%; right: 10%; height: auto; z-index: 3;}

#home .caption h1{display: block; color: #947e00; font-size: 110px; text-indent: -9999px; width: 370px; height: 80px; background: url(../images/tbs-logo-white@2x.png) no-repeat center/100%;  margin-bottom: 25px; text-transform: uppercase; font-family: "RamaGothicCW01", "Rama Gothic C", Arial, sans-serif;}
#home .caption h1 span{}
#home .caption h1 span.lower{font-size: 95px;}
#home .caption h1 span.color{color: #fff;}

#home .caption h2{display: block; color: #fff; font-size: 14px; text-transform: uppercase; margin-bottom: 25px; letter-spacing: 0.5px;}

#home .caption .bottom{position: relative;}

#home .caption .bottom a.btn{margin-right: 25px;}
#home .caption .bottom .social-icons{display: inline-block; vertical-align: middle;}
#home .caption .bottom .social-icons ul{}
#home .caption .bottom .social-icons ul li{float: left;}
#home .caption .bottom .social-icons ul li a.fa{color: #333;}
#home .caption .bottom .social-icons ul li a:before{box-shadow: inset 0 0 0 48px #fff !important;}
#home .caption .bottom .social-icons ul li a:after{}

/********* About */

#about{}

#about.description{padding: 120px 0;}

#about.description .container {display: flex; justify-content: space-around;}

#about.description .details{text-align: left; margin: auto; width: auto; margin-right: 100px;}
#about.description .details h3{font-size: 42px; margin-bottom: 25px; text-align: center;}
#about.description .details p.intro{font-size: 20px; font-weight: bold; padding-bottom: 25px; border-bottom: 4px #000 solid; line-height: 135%;}
#about.description .details p {
    font-size: 1.2em;
    text-align: center;
}

#about.description .video {width: 40%; max-width: 310px; position: relative;}
#about.description .video video {    height: 550px; width: 310px; position: relative;     display: block;}

#about.description .video .overlay {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
   
}

#about.description .video .overlay img {
    display: block;
    width: 100%;
}

#about.description .video .overlay .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: .6s ease all;
}

#about.description .video .overlay .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: url(../images/play_button.svg) no-repeat center/100%;
}

#about.description .video.playing .overlay {
    display: none;
}


#aboutSlider{position: relative; background: #000; padding: 60px 0; height: auto; margin: 50px 0 70px; display: none;}

#aboutSlider .slider {overflow: hidden; position: relative; height: 420px;}
#aboutSlider .slider .slide img{display: block; max-height: 100%;}

/********* services */
#services{position: relative; margin-bottom: 80px; text-align: center;}

#services p.intro{max-width: 600px; margin: 0 auto 40px;}

#services ul{display: inline-block; margin-bottom: 50px;}
#services ul li{float: left; display: block;  padding: 0 20px;  border-left: 1px #cccccc solid;}
#services ul li:first-of-type{border-left: none;}
#services ul li a{color: #696969; font-family: 'Roboto', sans-serif; font-weight: bold; transition: .5s ease all;}
#services ul li a:hover{color: #947e00;}


#services .list{text-align: center;}
#services .list .row{margin-bottom: 40px;}
#services .list .row .service{position: relative; text-align: center; display: inline-block; vertical-align: top; max-width: 460px; margin: 0 30px;}
#services .list .row .service img{display: inline-block; margin-bottom: 20px;}
#services .list .row .service h4{font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: bold; color: #000; text-transform: uppercase; margin-bottom: 25px;}
#services .list .row .service p{margin-bottom: 0; font-size: 15px; line-height: 135%;}


#services .action{text-align: center;}
#services .action a.btn{margin: 0 30px;}

/********* clients */

#clients{position: relative; margin-bottom: 80px; text-align: center; border-top: 1px #cccccc solid; padding-top: 80px;}

#clients p.intro{max-width: 600px; margin: 0 auto 40px;}

#clients .list{position: relative; display: flex; flex-wrap: wrap; align-items: center;}
#clients .list .client{display: inline-block; vertical-align: middle; margin: 0 15px 20px; max-width: 171px;}
#clients .list .client img{display: block; max-width: 100%;}

/********* Contct */

#contact{padding: 80px 0 100px; background: #f1f1f1;}

#contact h3{margin-bottom: 40px;}
#contact .details{ position: relative; z-index: 2;}
#contact .details .form{position: relative; padding: 0; border: none; max-width: 600px; margin: auto;}

/********* home */

.w3_banner{position: relative; margin-top: 0;}
.banner_text_w3layouts{padding: 0;}
.banner_text_w3layouts:before{content: ""; display: inline-block; vertical-align: middle; height: 100%;}
.banner_text_w3layouts .inner{display: inline-block; vertical-align: middle;}

.agileits_main{/*background-image:url(../images/home/TBT_home.png);*/ background: #fff;}

h3.title{font-size: 50px;}

.w3_banner > .container{width: auto; padding: 0;}

#slider{}
#slider .slide{position: relative; height: 100vh; min-height: 550px; text-align: center; }
#slider .slide:before{content: ""; display: inline-block; vertical-align: middle; height: 100%;}
#slider .slide .banner_text_w3layouts{display: inline-block; vertical-align: middle; max-width: calc(100% - 10px); margin-top: 50px; position: relative; top: 50px; z-index: 2; transition: .5s ease all; transition-delay: 1s;}

#slider .slide .banner_text_w3layouts h3{text-align: center; font-size: 6em; line-height: 100%; letter-spacing: 0; opacity: 0; -webkit-transition: .5s ease all; -moz-transition: .5s ease all; transition: .5s ease all; transition-delay: 1s;}
#slider .slide .banner_text_w3layouts h3:after {display: none;}
#slider .slide .banner_text_w3layouts p {font-size: 20px; color: #fff; margin: 0; text-align: center; text-transform: none; letter-spacing: 0; opacity: 0; transform: scale(0); -webkit-transition: .5s ease all; -moz-transition: .5s ease all; transition: .5s ease all; transition-delay: 1.3s}

#slider .slide .banner_text_w3layouts span.line {display: block; margin: 40px auto; width: 250px; height: 1px; background: #fff; position: relative; top: 50px; opacity: 0; transition: .5s ease all; transition-delay: 1.7s;}

#slider .slide .banner_text_w3layouts a.btn {position: relative; top: 50px; opacity: 0; -webkit-transition: .5s ease all; -moz-transition: .5s ease all; transition: .5s ease all; transition-delay: 2s;}

#slider .slide .banner_text_w3layouts span.category{display: inline-block; height: auto; padding: 8px 12px; background: #fff; color: #a17f07; font-size: 14px; opacity: 0.9; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

#slider .slide.slick-current .banner_text_w3layouts{top: 0;}
#slider .slide.slick-current .banner_text_w3layouts h3{opacity: 1;}
#slider .slide.slick-current .banner_text_w3layouts p{opacity: 1; transform: scale(1);}

#slider .slide.slick-current .banner_text_w3layouts a.btn{opacity: 1; top:0;}
#slider .slide.slick-current .banner_text_w3layouts span.line{opacity: 1; top: 0;}

#slider .slide span.category{position: absolute; bottom: 0; right: 0; display: inline-block; height: auto; padding: 8px 12px; color: #fff; z-index: 3; background: #a17f07; font-size: 18px; opacity: 1; border-top-left-radius: 2px;}

#slider button.slick-arrow {position: absolute; top: 50%; width: 30px; height: 30px; z-index: 10; text-indent: -9999px; border: 0; background: url(../images/chevron.svg) no-repeat center; border-radius: 50%; padding: 0; outline: none; transition: .5s ease all;}

#slider button.slick-arrow.slick-prev {left: 50px; transform: rotate(180deg);}
#slider button.slick-arrow.slick-next {right: 50px;}

#slider button.slick-arrow.slick-prev:hover {left: 45px;}
#slider button.slick-arrow.slick-next:hover {right: 45px;}


#slider .slick-dots {position: absolute; left: 0; bottom: 30px; width: 100%; height: auto; text-align: center;}
#slider .slick-dots li {display: inline-block; vertical-align: middle; margin: 0 10px;}
#slider .slick-dots li button {width: 8px; height: 8px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; padding: 0; text-indent: -9999px; border: none;}
#slider .slick-dots li.slick-active button {background: #fff;}

.banner_text_w3layouts span{display: none;}
#slider .slide .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0);}

main.home{}

main.home .slider a{color: #a17f07 !important; font-family: "Roboto", "Helvetica", Arial, sans-serif; }
main.home .slider .banner_text_w3layouts h3{font-weight: 500;}
main.home .slider .banner_text_w3layouts h3.long{font-size: 3.3em;}
main.home .slider .banner_text_w3layouts h3.longer{font-size: 3em;}

main.home .navbar{box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.navspacer{position: relative; width: 100%; height: 70px; display: none;}

main.home.sticky .navbar{position: fixed; top: 0; left: 0; width: 100%; background: #000; z-index: 9999;}

/* gallery */

.gallerylist{text-align: center; margin-bottom: 100px;}
.gallerylist .slide{position: relative; max-height: 650px; overflow: hidden;}
.gallerylist .slide a{display: block;}
.gallerylist .slide img{display: block; max-width: 100%; width: 100%; position: relative; z-index: 1;}
.gallerylist .slide .caption{position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center; z-index: 2; background: rgba(0,0,0,0.3); transition: .5s ease all;}
.gallerylist .slide .caption:before{content: ""; display: inline-block; vertical-align: middle; height: 100%;}
.gallerylist .slide .caption h3{display: inline-block; vertical-align: middle; color: #fff; text-transform: uppercase; font-size: 3em; transition: .5s ease all;}
.gallerylist .slide .caption h3:after{background: #fff;}

.gallerylist .slide a:hover .caption{background: rgba(0,0,0,0.1);}

/* gallery view*/


#galleryview{padding: 140px 0; text-align: center;}

#galleryview .container {    padding: 0 60px; width: auto;}

#galleryview h2{position: relative; margin-top: 50px; padding-bottom: 25px; margin-bottom: 30px; text-align: center; font-size: 32px; color: #947e00;}
#galleryview h2:after{content: ""; height: 2px; width: 80px; background: #947e00; position: absolute; bottom: 0; left: 50%; margin-left: -40px;}

#galleryview .images{    width: 102.2%; margin: 0 0 1em 0; text-align: center;}
#galleryview .images .galleryimage{margin:0 2% 2% 0;     width: 31.3%; display: inline-block; vertical-align: middle; }
#galleryview .images .galleryimage a {position: relative; display: block;}
#galleryview .images .galleryimage img{display: block; max-width: 100%; opacity: 1; transition: .5s ease all;}

#galleryview .images .galleryimage a .hover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; text-align: left; background: #000; border: 1px #000 solid; transition: .5s ease all;}
#galleryview .images .galleryimage a .hover .inner {position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 25px; display: none;}
#galleryview .images .galleryimage a .hover .inner span.category {display: block; font-size: 16px; margin-bottom: 10px; color: #000;}
#galleryview .images .galleryimage a .hover .inner span.client {display: block; font-size: 12px; margin-bottom: 25px; color: #000;}

#galleryview .images .galleryimage a:hover img{opacity: 0.9;}
#galleryview .images .galleryimage a:hover .hover {opacity: 0.4;}

.lightbox .lb-image {border: none;}
.lb-data .lb-close {position: absolute; top: -30px; right: 112px;}

/* testimonials */

#testimonials{padding: 40px 0 60px; text-align: center; position: relative;}
#testimonials .container{position: relative;}

#testimonials .slider_wrapper {position: relative}

#testimonialSlider{max-width: 90%; margin: auto;}
#testimonialSlider .slide{position: relative; text-align: center;}
#testimonialSlider .slide img{display: block; border-radius: 50%; margin: 0 auto 30px;}
#testimonialSlider .slide p{color: #000; max-width: 700px; margin: 0 auto 30px;}

#testimonialSlider .slide .icon{font-family: 'Poppins', sans-serif; font-weight: normal; font-size: 70px; color: #947e00; margin:0 auto 15px;     line-height: 100%;}

#testimonialSlider .slide span{display: block;}
#testimonialSlider .slide span.name{font-size: 16px; font-weight: bold; color: #000; margin-bottom: 5px;}
#testimonialSlider .slide span.text{font-size: 14px; font-style: italic; color: #947e00;}

#testimonials a.control{display: block; width: 40px; height: 35px; position: absolute; top: 50%; margin-top: -25px; background: url(../images/chevron_black.svg) no-repeat center/100%; outline: none; transition: .5s ease all;}
#testimonials a.control.prev{left: 0; transform: rotate(180deg);}
#testimonials a.control.next{right: 0;}

#testimonials a.control.prev:hover{left: -5px;}
#testimonials a.control.next:hover{right: -5px;}

    /* slick */
.slick-slide{outline: none !important;}

    /* contact */
#contact{background: #fff; border-top: 1px #e4e4e4 solid;}
#contact h3{text-align: center;}
.contact-right-w3l input[type="text"], .contact-right-w3l input[type="email"], .contact-right-w3l textarea{border: 1px solid #000; color: #000;}

.home_grids_w3 .img_text_w3ls{/*background: rgba(161, 126, 7, 0.5);*/ background: none;}

.contact-right-w3l input[type="submit"]{background: #a17f07 !important; border: none; font-family: "Roboto", "Helvetica", Arial, sans-serif; font-weight: bold;}

.contact-grid-agileinfo{padding: 5.3em 3em;}
.contact-grid-agileinfo.call{border-bottom: none;}

.contact-left-w3ls h4{font-size: 21px;}

.contact-left-w3ls .glyphicon{color: #a17f07;}


/********* videos */

article.video {margin-bottom: 100px;}
#galleryview article.video h2 {font-size: 20px; color: #333;}
#galleryview article.video h2::after {background: #333;}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#galleryview.reels {

}

#galleryview.reels article {
    margin-bottom: 60px;
}

#galleryview.reels .videosWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 1050px;
    margin: auto;
}

#galleryview.reels .reel {
    position: relative;
    max-width: 310px;
    margin: 0 20px 40px;
}

#galleryview.reels .reel video {
    height: 550px;
    width: 310px;
    position: relative;
    display: block;
}

#galleryview.reels .reel .overlay {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
   
}

#galleryview.reels .reel .overlay img {
    display: block;
    width: 100%;
}

#galleryview.reels .reel .overlay .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: .6s ease all;
}

#galleryview.reels .reel .overlay .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    background: url(../images/play_button.svg) no-repeat center/100%;
}

#galleryview.reels .reel:hover .overlay .bg {
    opacity: 1;
}

#galleryview.reels .reel.playing .overlay {
    display: none;
}

    /********* footer */

footer{background: #000; padding: 40px 0;}

footer .left{float: left;}
footer .left img.logo{display: block; max-width: 150px; margin-bottom: 10px;}
footer .left p.copyright{font-size: 12px; color: #fff;}

footer .social-icons{float: right}
footer .social-icons ul{}
footer .social-icons ul li{float: left;}
footer .social-icons ul li a.fa{color: #333;}
footer .social-icons ul li a:before{box-shadow: inset 0 0 0 48px #fff !important;}
footer .social-icons ul li a:after{}

/********************* helpre */

.btn{display:inline-block;  padding:9px 26px; font-family: "Roboto", "Helvetica", Arial, sans-serif; font-size:16px; font-weight:bold; cursor:pointer; outline: none; text-align:center; border-radius:1px; border:0;  background:none; text-transform: uppercase;}
.btn{-webkit-transition:.5s ease all; -moz-transition:.5s ease all; transition:.5s ease all;}

.btnBlack{background:#343b44; color:#fff !important;}
.btnBlack:hover{background: #000;}

.btnWhite{background:#fff; color:#000 !important;}
.btnWhite:hover{background: #947e00;}

.btnGold{background:#947e00; color:#fff !important;}
.btnGold:hover{background: #947e00;}

/********************* media query */


@media (max-width: 1320px) {

    header .logo {
        margin-left: 0;
    }

    header .top nav li {
        margin: 0 8px;
    }

    header .top nav li a {
        font-size: 13px;
    }

}

@media (max-width: 1200px) {

    header .logo h1 a{width: 200px; height: 40px;}

    header .top nav li a{font-size: 12px;}


    #clients .list .client{max-width: 15%;}

    .lb-data .lb-close{right: 10px;}

    .lightboxOverlay{    z-index: 99999;}
    .lightbox {
        position: fixed;
        top: 50% !important;
        transform: translate(0, -50%) !important;
        z-index: 99999;
    }

}

@media (max-width: 1050px) {

    .container.c1{width: auto;}

    header{z-index: 99999;}
    header .container{width: auto; padding: 0;}

    header .top{position: fixed; width: 100%; background: #fff; top: 0; margin-top: 0;}
    header .top a.searchLink{margin-right: 15px; margin-top: 10px;}

    header .top nav{display: block;}

    header nav ul, header .social-icons{position: absolute; right: 0;  top: 30px; padding: 0;}
    header .social-icons ul li a.fa{color: #000;   width: 20px;}

    /* mobile menu hamburger */
    .respMenu, a.menu{display:block; padding: 10px; float:left; margin-left: 15px; -webkit-transition:all 0.6s cubic-bezier(0.7, 0.01, 0.3, 1); transition: all 0.6s cubic-bezier(0.7, 0.01, 0.3, 1);}

    .respMenu .fa-bars, a.menu .fa-bars{width: 25px;height: 3px;margin: 10px 0;background: #000; -webkit-transition: all 0.5s; transition: all 0.5s; position: relative;}
    .respMenu .fa-bars:before, a.menu .fa-bars:before{top: -6px;}
    .respMenu .fa-bars:after, a.menu .fa-bars:after{top: 6px;}

    .respMenu .fa-bars:after, .respMenu .fa-bars:before, a.menu .fa-bars:after, a.menu .fa-bars:before{content: '';display: block;width: 25px;height: 3px;background: #000; position: absolute;-webkit-transition: all 0.5s ease ;transition: all 0.5s ease;}

    /* mobile menu open */
    body.menu .respMenu .fa-bars, body.menu a.menu .fa-bars{background: none !important;}
    body.menu .respMenu .fa-bars:after, body.menu a.menu .fa-bars:after{top: 0 !important; background: #fff !important; -moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg); transform: rotate(45deg);}
    body.menu .respMenu .fa-bars:before, body.menu a.menu .fa-bars:before{top: 0 !important; background: #fff !important;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

    header .logo{margin-top: 70px; padding:0; display: none;}
    header .logo h1{display: none;}
    header .logo h1 a{ background: url(../images/tbt-logo@2x.png) no-repeat center; background-size: 100%;}

    header .top .mobileLogo{display: block;}

    body header .top nav ul{display: none;}

    main.page{margin-top: 70px;}

    #about.description .details{width: auto;    margin-right: 20px;}

    #about.description .video {width: auto;}


    .gallerylist .slide img{max-width: none; width: 120%; left: -20%;}

    #home #landingSlider img{opacity: 0;}

    #galleryview.reels {
        padding: 0;
    }

    #galleryview .container {
        padding: 0 20px;
    }

    #galleryview.reels .videosWrapper {
        justify-content: center;
    }

    #galleryview h2 {
        margin-top: 0;
        margin-bottom: 30px !important;
    }

}

@media (max-width: 720px){
    h2{font-size: 28px !important;}
    h3{font-size: 28px !important;}
    p{font-size: 14px;}

    #clients .list .client{max-width: 40%;}

    #home #landingSlider img{width: auto; transform: translate(-50%, 0);}

    #home .caption{right: 0; padding: 0 20px;}
    #home .caption h2{font-size: 16px !important; line-height: 140%;}
    #home .caption h1{width: 270px; height: 60px;}
    #home .caption .bottom a.btn{margin-bottom: 15px;}


    .w3_banner{margin-top: 0;}
    .w3_banner > .container{padding: 0;}

    #slider .slide{height: 100vh;}

    .subscribe-wthree{width: 100%;}

    /* youtube iframe embed */
    iframe {position: relative;top: 0;left: 0;width: 100%;/*height: 100%;*/}

    .navbar{position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #000;}
    .navbar .navbar-nav{float: none; display: inline-block; width: 570px; text-align: left;}
    .navbar .navbar-collapse{position: relative; width: auto; top:0; overflow: auto; box-shadow: none;}
    .navbar .navbar-nav > li{float: none; display: inline-block; vertical-align: middle;}

    .navbar-toggle{display: none;}
    div#bs-example-navbar-collapse-1{background: #000;}

    .navbar .top-nav ul li a{padding: 5px 0 3px; display: inline-block; font-size: 12px;}
    .navbar .top-nav ul li :before,.navbar .top-nav ul li :after{display: none !important;}

    #about.description .container {
        flex-direction: column;
    }


    #about.description .details {
        margin-bottom: 30px;
        text-align: center;
    }

    #about.description .video {
        width: auto;
        margin: auto;
    }

    #about .description .details{float: none; width: auto; }
    #about .description .image{float: none; width: auto;}

    #about .description .details h2{font-size: 24px;}

    #about .description .details p.intro{font-size: 16px;}
    #about .description .details p{font-size: 14px;}


    #slider button.slick-arrow{display: none !important;}

    #servicesIntro{}
    #servicesIntro h3{font-size: 24px; margin-bottom: 15px;}
    #servicesIntro ul li{width: 50%; border: none; border-bottom: 1px #cccccc solid; margin-bottom: 15px; padding-bottom: 15px;}

    #clients h3{font-size: 28px; margin-bottom: 15px;}

    #services .blocks .service .imageblock{float: none; width: 100%; margin-bottom: 25px;}
    #services .blocks .service .details{position: relative; width: 100%; height: auto;}
    #services .blocks .service .details .inner h3{font-size: 20px;}
    #services .blocks .service .details .inner p{font-size: 14px;}

    #services .blocks .service.left .details{left: 0;}

    .gallerylist .slide .caption h3{max-width: 90%; margin: auto; font-size: 22px !important;}
    .gallerylist .slide img{width: 170%; max-width: inherit; left: -35%;}

    #contact .content .details{float: none; width: auto; margin-top: 50px;}
    #contact .content .decal{display: none;}

    .lb-data .lb-close{right: 10px;}

    .w3_agile_logo{padding-top: 0 !important; position: relative; padding: 0; top: 0; margin-top: 5px;}
    .w3_agile_logo h1 a{width: 130px; height: 40px; background-size: 100%;}
    .banner_text_w3layouts{padding: 0 35px;}
    .banner_text_w3layouts h3{font-size: 1.7em !important;}
    main.home .slider a{font-size: 0.9em;}


    header .logo h1 a{width: 250px; height: 60px;}

    .banner_text_w3layouts:before{display: none;}
    .banner_text_w3layouts .inner{margin-top: 120px; display: block;}

    h3.title{font-size: 28px;}
    h2.pagetitle{font-size: 30px;}

    header .top nav{display: block;}

    main.home .subscribe h3, .subscribe h3{font-size: 28px;}

    .contact-left-w3ls{padding-left: 20px; padding-right: 20px;}
    .contact-grid-agileinfo{padding-left: 10px; padding-right: 10px;}

    .contact-left-w3ls p{font-size: 9px;}

    main.listing article h4 a{font-size: 24px;}
    #slider .slide span.category{font-size: 15px;}

    #gallery{padding: 30px;}
    #gallery.gallerylist {padding: 0;}
    #galleryslider{padding: 0;}
    #gallery .slide{height: auto;}

    #testimonials a.control{top: 22.5%; width: 30px; height: 25px;}
    #testimonials a.control.prev{left: -15px;}
    #testimonials a.control.next{right: -15px;}

    main.listing .postimage{float: none; min-height: inherit;}
    main.listing .postimage img{display: block; max-width: 100%;     width: 100%;}

	main.search .about_main{margin-bottom: 60px; padding-bottom:30px; border-bottom: 1px #fff solid;}
	main.search .resultCount{font-size: 14px;}

	main.search .about_text_w3l p{font-size: 14px;}

    main.page{margin-top: 0;}

    #about.description .details p.intro{font-size: 18px;}
    #about.description{padding-top: 60px;}

    #services .list .row .service{margin-bottom: 30px;}
    #services .list .row .service img{width: 75px;}

    #galleryview {padding-top: 120px;}
    #galleryview.reels {padding-top: 120px;}
    #galleryview .images .galleryimage {
        width: 98%;
    }

    #galleryview.reels .videosWrapper {    flex-direction: column;}
    #galleryview.reels .reel {margin-bottom: 30px;     margin-left: 0;
        margin-right: 0;}

        #galleryview article.video h2  {font-size: 20px !important;}

    footer img.logo{}
    footer .left p.copyright{font-size: 10px;}

    footer .social-icons{}
    footer .social-icons ul li a.fa{width: 25px; height: 25px; border-radius: 50%; line-height: 25px; font-size: 12px;}

    video#videoElement::-webkit-media-controls, 
    video#videoElement::-webkit-media-controls-start-playback-button, 
    video#videoElement::-webkit-media-controls-play-button, 
    video#videoElement::-webkit-media-controls-panel, 
    video#videoElement::-webkit-media-controls-container, 
    video#videoElement::-webkit-media-controls-overlay-play-button, 
    video#videoElement::-webkit-media-controls-enclosure {
      display: none !important;
      -webkit-appearance: none;
      opacity: 0 !important;
    }

}