/*
Theme Name: KFZ-Business
Author: KING KRUM Middle East FZ-LLC
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

body {
  background-color: #002a5c;
  background-image: url(img/bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

body.home {
  background-image: url(img/bg-cars.jpg);
}

h1 {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}

#page {
  background-color: transparent;
}

/* ///////////////////////////////// */

#page .masthead {
  background-color: transparent;
  background-image: url(img/header.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
}

@media screen and (max-width: 1050px) {

  #page .masthead {
    background-image: url(img/header-mobile.png);
  }

}

#page .masthead .header-bar {
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  align-items: flex-start;
  -ms-flex-align: start;
}

.navigation {
  padding-bottom: 30px;
}

.dt-mobile-menu-icon {
  margin-bottom: 30px;
}

/* ///////////////////////////////// */

.box {
  /* margin: 0; */
  padding: 20px 25px;
  background: linear-gradient(rgba(255,255,255,0.85) 25%, rgba(255,255,255,0.5) 100%);
  border-radius: 8px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}

#cars.box {
  margin-top: 80px;
}

.box h3 {
  color: #192c57;
}

/* ///////////////////////////////// */

.cars-above {
  margin-top: -80px;
  padding: 0 15px 20px 15px;
}

.cars-above img {
  display: block;
  max-width: 856px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ///////////////////////////////// */

.btn {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 8px 8px 10px 35px;
  width: 100%;
  background: linear-gradient(to top, #009933 0%, #00cc33 100%);
  border-radius: 4px;
  border: 2px solid rgba(0,204,51, 0.75);
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
  color: rgba(255,255,255,1);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.75);
  text-decoration: none;
}

.btn::before {
  content: "»";
  position: absolute;
  left: 10px;
  top: 40%;
  color: rgba(255,255,255,0.6);
  font-size: 55px;
  line-height: 0;
  text-shadow: none;
  font-weight: normal;
}

.btn:hover {
  background: linear-gradient(to bottom, #009933 0%, #00cc33 100%);
  color: rgba(255,255,255,1);
  cursor: pointer;
}

.btn:hover::before {
  color:rgba(255,255,255,1);
}

/* ///////////////////////////////// */

.btn.optin {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 80%;
  padding: 15px 10px 15px 45px;
  background: linear-gradient(to top, #f69028 0%, #f6a828 100%);
  border-radius: 4px;
  border: 2px solid rgba(250,215,115,0.75);
  text-align: center;
  box-sizing: border-box;
  font-size: 28px;
  line-height: 1;
  font-weight: bold;
  color: rgba(255,255,255,1);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.75);
  text-decoration: none;
}

@media screen and (max-width: 1050px) {

  .btn.optin {
    font-size: 20px;
  }

}

@media screen and (max-width: 800px) {

  .btn.optin {
    width: 100%;
  }

}

.btn.optin::before {
  content: "»";
  position: absolute;
  left: 10px;
  top: 42%;
  color: rgba(255,255,255,0.6);
  font-size: 70px;
  line-height: 0;
  text-shadow: none;
  font-weight: normal;
}

.btn.optin:hover {
  background: linear-gradient(to bottom, #f69028 0%, #f6a828 100%);
  cursor: pointer;
}

.btn.optin:hover::before {
  color: rgba(255,255,255,1);
}

/* ///////////////////////////////// */

#video-container, .video-group-videos {
  position: relative;
  width: 80%;
  height: auto;
  margin: 0 auto 20px auto;
  padding-bottom: 45%;
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

@media screen and (max-width: 800px) {

  #video-container, .video-group-videos {
    width: 100%;
    padding-bottom: 56%;
  }

}

#video-container iframe, #video-container a, .video-group-videos iframe, .video-group-videos a {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

#video-container.w100, .monitor .display #video-container, .monitor .video-group-container-videos .video-group-videos {
  width: 100%;
  padding-bottom: 55.5%;
}

.monitor .display, .monitor .video-group-container-videos {
  width: auto;
  height: auto;
  padding: 15px 15px 20px 15px;
  background: linear-gradient(to top, #1c1c1c 0%, #383838 25%, #333333 50%, #444444 75%, #212121 100%);
  border-radius: 16px;
}

.monitor .stand img {
  width: 100%;
  max-width: 765px;
  height: auto;
}

/* ///////////////////////////////// */

.video-group-container-thumbnails {
  width: 100%;
  height: 466px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 8px;
  background: linear-gradient(to top, #1c1c1c 0%, #383838 25%, #333333 50%, #444444 75%, #212121 100%);
}

.video-group-container-thumbnails > .video-group-thumbnails {
  width: 100%;
  height: 446px;
  padding:0 20px 0 0;
  overflow: scroll;
  box-sizing: border-box;
}

.video-group-thumbnails img {
  width: 100%;
  max-width: 190px;
  height: auto;
}

.video-group-thumbnails h4 {
  font-size: 15px !important;
  line-height: 1.2;
  font-weight: normal;
  color: #fff !important;
}

.video-group-thumbnails .active h4 {
  color: #0286c6 !important;
}

::-webkit-scrollbar {
  width: 15px;
  -webkit-appearance: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* ///////////////////////////////// */

.checkmark {
  padding-left: 20px;
  padding-bottom: 15px;
  list-style: none;
}

.checkmark li {
  padding: 6px 0 15px 40px;
  background-image: url(img/checkmark.png);
  background-repeat: no-repeat;
  background-position: left top;
}

/* ///////////////////////////////// */

.delay
{ display:none; }

.video-info
{ display:none; }

.start-video-info
{ display:block; }

/* ///////////////////////////////// */

#popup {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: rgba(0,0,0,0.75);
}

#popup .wpb_column {
  position: relative;
  width: 100%;
  max-width: 700px;
  height: 400px;
  margin: 20% auto 0 auto;
  padding: 0 15px;
  float: none;
  box-sizing: border-box;
}

#popup .wpb_column .vc_column-inner {
  padding: 20px;
  border-radius: 6px;
  background: #fff;
  color: #444;
}

#popup * {
  color: #999;
  text-shadow: none;
}

#popup h2 {
  color: #192c57;
}

#popup .loading {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

#popup .close {
  position: absolute;
  right: 0;
  top: -15px;
  width: 30px;
  height: 30px;
}

#popup .close a {
  display: block;
  width: 30px;
  height: 30px;
  background: #000;
  color: #fff;
  text-align: center;
  border-radius: 15px;
  text-decoration: none;
  font-size: 22px;
  line-height: 28px;
  border: 2px solid #fff;
  text-shadow: 3px 3px 3px rgba(0,0,0,0.75);
  box-sizing: border-box;
}

#popup input[type=text] {
  width: 100%;
  background: #FAFAFA;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 26px;
  text-shadow: none;
  color: #444;
}

#popup input[type=text]._has_error {
  border: #f37c7b 1px solid;
}

#popup input[type=submit] {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 15px 10px 15px 45px;
  background: linear-gradient(to top, #f69028 0%, #f6a828 100%);
  border-radius: 4px;
  border: 2px solid rgba(250,215,115,0.75);
  text-align: center;
  box-sizing: border-box;
  font-size: 28px;
  line-height: 1;
  font-weight: bold;
  color: rgba(255,255,255,1) !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.75);
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 1050px) {

#popup input[type=submit] {
    font-size: 20px;
  }

}

#popup input[type=submit]::before {
  content: "»";
  position: absolute;
  left: 10px;
  top: 42%;
  color: rgba(255,255,255,0.6);
  font-size: 70px;
  line-height: 0;
  font-weight: normal;
  text-shadow: none;
}

#popup input[type=submit]:hover {
  background: linear-gradient(to bottom, #f69028 0%, #f6a828 100%) !important;
}

#popup input[type=submit]:hover::before {
  color: rgba(255,255,255,1);
}

/* ///////////////////////////////// */

#main .content .menu, #main .content .menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#main .content .menu {
  border-top: 1px solid rgba(0,0,0,0.15);
  margin-bottom: 20px;
}

#main .content .menu li {
  margin: 0;
  padding: 0;
}

#main .content .menu li a {
  position: relative;
}

#main .content .menu li:not(.current-menu-item) ul {
  display: none;
}

#main .content .menu li.current-menu-parent ul {
  display: block;
}

#main .content .menu li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

#main .content .menu li a:hover, #main .content .menu .current-menu-item > a {
  background: rgba(0,0,0,0.15);
  color: #444;
}

#main .content .menu > li > a {
  font-weight: bold;
  background: rgba(0,0,0,0.05);
  color: #192c57 !important;
}

#main .content .menu ul li a {
  position: relative;
  padding-left: 25px;
  font-size: 15px;
}

#main .content .menu ul li a::before {
  content: "»";
  position: absolute;
  left: 10px;
  top: 48%;
  color: rgba(0,0,0,0.4);
  font-size: 16px;
  line-height: 0;
  text-shadow: none;
  font-weight: normal;
}

#main .content .menu ul li li a {
  padding-left: 35px;
}

#main .content .menu ul li li a::before {
  left: 20px;
}

/* ///////////////////////////////// */

#bottom-bar > .wf-wrap {
  background-image: url(img/footer.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

#bottom-bar .wf-float-left {
  float: none;
  width: 100%;
  text-align: center;
}