@charset "utf-8";

/* iPhone, etc portrait ---- */
@media only screen and (min-width: 320px) and (max-width: 590px) {
    *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    body { font-size: 14px; }
    #wrapper { margin-top: 60px; }
    header { height: 60px; }
    #menu { display: none; }
    #mobileMenu { display: block; }
}

@media only screen and (min-width: 320px) and (max-width: 590px) and (orientation: landscape) {
}

/* iPhone, etc landscape ---- */
@media only screen and (min-width: 590px) and (max-width: 768px) {
    *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
}

@media only screen and (min-width: 590px) and (max-width: 768px) and (orientation: landscape) {
}

/* iPad, tablets etc portrait ---- */
@media only screen and (min-width: 768px) and (max-width: 900px) {
    *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
}

@media only screen and (min-width: 768px) and (max-width: 900px) and (orientation: landscape) {
}

/* Laptops, Desktops, etc ---- */
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    /*	body:before { content: "Between 1024 and 1200";}*/

    #logo { margin-left: -10px; }
}

@media only screen and (min-width: 1200px) and (max-width: 1900px) { }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .width{ width:95%;}
    #menu ul li a{ font-size:93%; padding:0 7px;}
    #menu ul li ul{ padding:0; }
    #menu ul li ul li a{ padding:8px 10px;}
    .register a{ height:60px; width:79px; background-size:cover;}
    #logo{width:300px; height: auto; margin: 20px 0 0 -10px;}
    #tcgl-logo {width: 100px;}
    #logo img, #tcgl-logo img {max-width: 100%;}

    #banner-slider .text{ width:100%; font-size:30px;}
    #counter-wrapper .race-types li{ width:31%; margin:0 1%; height:auto;}
    #counter-wrapper .race-types li img{ display:block;   height:auto; width:100%;}
    #counter-wrapper .race-types li a{ font-size:80%;}
    #counter-wrapper .race-types li span{ bottom:0px;}
    #counter-wrapper h1{ font-size:35px;}
    #counter-wrapper ul.countdown li{ font-size:40px;}
    #about-race .circle{ left:0;}
    .home-footer{ height:auto;}

    .bottom{ width:95%; padding:30px 0; text-align:center;}
    .bottom .logo{ float:none; width:343px; display:inline-block;}
    .bottom .logo img{ max-width:100%; height:auto; display:block; width:auto;}
    .bottom .tcgl-logo{ margin:0; float:none; display:inline-block; vertical-align:middle; }
    .bottom .tcgl-logo br{ display:none;} 
    .bottom .tcgl-logo img{ margin:0 20px; display:inline-table; vertical-align:middle;}
    .bottom .follow{ float:none; display:inline-block; vertical-align:top; margin:20px 0 0 20px;}

    .sponsors{ padding:20px 0; width:95%;}
    .sponsors ul li{ width:150px;}
    .sponsors ul li a{ display:inline-block; margin: 0 10px 20px; width: 150px;}
    .sponsors ul li a img{ max-width:90%; height:auto; display:block;}
    .quick-links{ display:none; width:95%; padding:30px 0;}
    .other-links{ width:95%; padding:20px 0; }

    #tcgl-logo{margin:40px 11px 0 0;}
    #container{width:95%;}
    .content{ width:100%;}
    .content .left{ width:70%;}
    .content .right.right-panel{ width:25%;}
    .circle img{ display:block; max-width:100%; height:auto;}
    .content .bottom-pic{  max-width:100%; height:auto; margin-left:-40px;}
    footer{ margin:0;}
    .form{ width: 100%;  }
    .right-nav.stick{ width:25%;}

    #home-top .logo{ top:110px; width: 270px; }
    #home-top .logo img {max-width:100%;}
    #home-top .logo-left{ left:0;}
    #home-top .logo-right{ right:0;}
    .race-block{ width:45%; margin:0 2%;} 
    .time-duration .brand-logo, .home-right {margin: auto; transform: scale(0.9);}
    #home-top .home-right .brand-logo:last-child {margin-right: 0;}
/*    .time-duration .countdown,.time-duration .date{ width:45%; margin:0 2%;} */
    .footer-home{ text-align:center;}
    .footer-home .other-links{ display:inline-block; float:none; vertical-align:top; padding:5px 0 20px;}
    .footer-home .social-share{ float:none; display:inline-block; vertical-align:top;}
    .race-block .banner a em{ font-size:24px; line-height:30px;}
    #home-top .home-title{ font-size:24px; line-height:30px; padding:50px 0 0;}
    .flex-control-nav{ width:100%;}
    #banner-slider{ height:827px;} 
    .left.msg-column, .right.msg-column {float:none; width:100%;}
}

@media only screen and (max-width: 767px) {
    .width{ width:95%;}
    #mobileMenu{ position:fixed; z-index:10; left:0; right:0; overflow-y: scroll; }
    #main-menu{ display:none;}
    .register { right:20px; top:5px; z-index:12;}
    .register a{ height:60px; width:79px; background-size:cover;}
    #mobileMenu{ display:block; max-height: 100%; overflow-x: scroll;} 
    #mobileMenu .width{ width:100%;}
    .slicknav_btn{ margin:5px 0 0 10px; float:left;}
    #mobileMenu ul li{ float:none;}
    .slicknav_menu .slicknav_icon-bar{ background:#dfdd00;}
    #mobileMenu ul li a{ display:block; padding:10px 10px 10px 20px;}
    #mobileMenu ul li a.slicknav_item{ padding:10px 0;}
    #mobileMenu ul li a.slicknav_item a { display:inline;}
    .slicknav_nav, .slicknav_nav ul,#menu{ background:#271e16;}

    #mobileMenu ul li ul li a{ padding:10px 30px; height:auto;}
    #mobileMenu ul li ul{ position:relative; top:0; min-width:inherit; padding:0; margin:0;}
    #mobileMenu ul li:hover > ul{ top:0;}
    #mobileMenu ul li a ,#mobileMenu ul li  a{ background:none; color:#fff;}
    #mobileMenu ul li ul{ border-bottom:none; box-shadow:none;}
    .slicknav_nav ul, .slicknav_nav li{ border-bottom:1px dotted #fff;}

    #banner-slider .text { width:95%; font-size:24px; line-height: normal; bottom: 50px; display: none;}
    #counter-wrapper h1{ font-size:30px;}
    #counter-wrapper .race-types li{ margin:0 10px 20px;}
    #logo{ width:300px; margin:0;  }
    #logo img, #tcgl-logo img{ max-width:100%;}
    #tcgl-logo{ text-align:center; width:300px; margin:0;}
    #counter-wrapper ul.countdown li{ font-size:35px;}
    .slicknav_open ul{ background:#231407;}
    .slicknav_nav ul li:last-child{ border:none;}
    #mobileMenu ul li ul li a:hover{ color:#dfdd00;}
    #mobileMenu ul li a:hover{ color:#dfdd00;}
    #top{ top:85%;}
    .sponsors{  padding: 20px 0;  width: 95%; text-align:center;}
    .sponsors ul li {width: 42%; margin: 0 10px 15px; font-size: 13px;}
    .sponsors ul li a { width:100%; margin: 0;}
    .sponsors ul li a span.img {width: 100%; border: 1px solid rgba(215,223,33,0.3); height: 100px; position: relative;}
    .sponsors ul li a img {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; max-width:80%;}
    .other-links{ width:95%; padding:20px 0; border-top:3px solid #d7df21}
    .quick-links{ display:none; width:95%; padding:20px 0; text-align:center; }
    .quick-links .column{ float:none; display:inline-block; margin:0 5px 10px; width:220px; vertical-align:top; text-align:left;}

    .testimonials .item p {font-size: 14px; line-height: 18px;}

    .register{ display:none;}
    .mobile-reg{display:block;}
    #wrapper{ margin:0;}
    .width { width:auto; padding: 20px 10px; }
    .home #top {top: 20px;}
    #top{ top:42px; margin:0 auto; text-align:center; width:100%; height: auto;}
    #logo{ width:150px; height:auto; display:inline-block;}
    #tcgl-logo{width:70px; display:inline-block;} 
    #menu{display:block; }

    #container{ width:95%;}
    .content{ width:100%; float:none;}
    .content .left{ width:100%; float:none;}
    .content .right.right-panel{ float:none; width:100%;}
    .content .bottom-pic{  max-width:100%; height:auto; margin-left:-40px;}
    .bottom{ width:95%;}

    header{ top:0; height:auto; position: absolute;}
    #banner-slider {position: relative;}
    footer{ margin:0;}
    .other-links ul li{ display:inline-block; margin:0 10px 10px 10px;}
    .other-links ul li:after{ content:''; margin:0;}
    .bottom{ text-align:center;}
    .bottom .logo{ display:inline-block; vertical-align:top; height:auto; float:none; width:100%; display:none; }
    .bottom .logo img{ max-width:100%; width:auto;}
    .bottom .follow{ margin:20px 0; float:none; display:inline-block; vertical-align:top; width:100%; display:none;}
    .bottom .tcgl-logo{ float:none; margin:0; display:inline-block; vertical-align:top; width:100%;}
    .bottom .tcgl-logo br{ display:none; }
    .bottom .tcgl-logo img{ display:inline-block; float:none; margin:0 10px; vertical-align:bottom;}
    form .control .left{ float:none; width:100%; text-align:left; }
    form .control .right{ float:none; width:100%;}
    .form{ width:100% !important;}
    .overlap #txtCaptcha{ max-width:170px !important; width:90% !important; float:left !important;}
    form .control .overlap .captcha{ border:none; float:left; position:relative;}
    form .control .overlap .captcha .refresh{ width:40px; padding:5px 0; height:33px;}

    /*    #banner-slider{ position:absolute; height:827px;  }*/
    #counter-wrapper{ position:absolute; bottom:0; background-color: rgba(0,0,0,0.5);}
    #about-bg{ padding:0;}
    #about-race p{ padding:80px 0 0;}
    .flex-control-nav{ width:100%;}
    #counter-wrapper .width{ position:relative; margin:45px auto 0; padding:50px 0 0 0;}
    #about-race .circle{ width:300px; height:300px; left:0; right:0; margin:0 auto;}
    #about-race .circle img{ max-width:100%; height:auto;}
    #counter-wrapper .race-types{ margin:30px 0;}
    #banner-inner{ background-size:cover; position: inherit;}
    .content h1{ font-size:30px;}
    header .social-connect{ z-index:8; bottom:10px;}
    body.home #tcgl-logo{ display:inline-block; width: 70px; float: right;}
    #faqs-container .accordion-outer{ padding:10px 0;}
    .form{ width: 100%;  }
    #container{ background:none; padding-top: 20px;}
    .home-footer{ height:auto;}
    .mobile-reg{ display:none;}
    .sublinks{ display:none;}

    #home-top .width{ padding:200px 0 70px;}
    #home-top .logo{ top:20px;}
    .race-block{ width:100%; margin:0 0 50px;  }
    .time-duration .countdown,.time-duration .date{ display:inline-block; vertical-align:top; width:auto;} 
    .time-duration .date{ margin-bottom:20px; vertical-align:middle;}

    .race-block .date{ margin-bottom:30px;}
    .race-block .banner a{ display:inline-block; vertical-align:top;}
    #home-top .home-title{ padding:0;}
    #home-top .logo-right{ right:0;}
    #home-top .logo-left{ left:0;}
    #home-top .logo{ width:280px; }
    #home-top .logo img{ max-width:100%; height:auto;} 
    .race-block .banner a em{ font-size:20px; line-height:30px; right: 15px;}
    #home-top .home-title{ font-size:20px; line-height:30px;}
    .race-block .banner a img{ width:100%; }
    #home-bottom .title{ width:90%;}
    .footer-home{ text-align:center;}
    .footer-home .other-links{ display:inline-block; float:none; vertical-align:top; border:none;}
    .footer-home .social-share{ float:none; display:inline-block; vertical-align:top;}
    .race-block .date{ text-shadow:0 1px 1px #000; color:#c0c71d;}
    .footer-home .social-share .social-connect ul{ float:none;}
    .footer-home .social-share .social-connect span{ margin:0;}

    .left.msg-column, .right.msg-column {float:none; width:100%;}
    #message .photo {float:none;}
    .msg-content {float:none; width:100%;}
    
    ul.tabs {width: 100%;}
    ul.tabs li {width: 48%; font-size: 14px;}
    ul.tabs li a {padding: 7px 15px;}
    .tab-container .left, .tab-container .right {float: none; width: 100% !important;}
    
    .landing .duration-inner {display: none;}
}
@media only screen and (max-width: 640px) {
    form .control .right select,form .control .right input[type="text"]{ width:100% !important; margin-bottom:5px !important;}
    form .alt .control .left{ width:100% !important; float:none !important; margin-bottom:5px !important; }
    form .alt .control .label{width:100% !important; float:none !important; margin-bottom:5px !important; }
    form .alt .label-info{ display:none;}
}


@media only screen and (min-width: 320px) and (max-width: 480px) {
    header .social-connect {top: 0; bottom: auto; padding: 4px; z-index: 9;}
    header .social-connect ul li {float: left; margin: 0 0 0 7px;}
    header .social-connect span{display:none;}
    .bottom .follow.social-connect span{ letter-spacing:7px;}
    #counter-wrapper h4{ letter-spacing:12px;}
    #counter-wrapper ul.countdown li{ margin:0 13px;}

    .quick-links .column{ display:block; width:100%; margin-bottom:20px;}
    .rd-pic{ float:none; margin:0; display:block; text-align:center; margin:0 auto;}
    #home-top .logo {position:inherit; top: 0; width: 220px; margin-bottom: 15px;}
    #home-top .width{padding: 15px;}
    .time-duration .brand-logo, .home-right {margin: 0;}
    #home-top .home-right .brand-logo:last-child {margin-right: 0;}
    .time-duration .brand-logo {width: 80px; font-size: 12px;}
    .time-duration .brand-logo img {width: 60px; height: auto;}
    .time-duration .home-right .brand-logo img {max-width: 100%; height: auto;}
    .brand-logo h3 {font-size: 93%; line-height: normal;}
}