@charset "utf-8";
/* CSS Document */

/*generic*/
body {font-family: 'Open Sans', sans-serif; font-size:17px; line-height:35px;}
h1 {font-family: 'Oswald', sans-serif;}
h2 {font-size:28px;font-weight: 400;   padding: 15px 0;}
h4 {color:#929fab; font-weight:400; text-align:center;}


/*intro section atempt 1
#intro {height: 92vh; min-height:325px; background:url(../img/background.jpg) top left no-repeat #6c7770; background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

width: 100%;
background-position: center center;
background-repeat: no-repeat; color:#fff; position:relative; }
.hand { position:absolute;  bottom: 0; left: 0; width:100%;}*/

/*#intro attempt 2
 {height: 92vh;  min-height:325px; background:url(../img/background2.jpg) no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; color:#fff; position:relative; }*/

/*section*/
#intro {background-color: #000; height: 92vh;  min-height: 540px; max-height:826px; background:url(../img/background.jpg) no-repeat #000; background-size:cover; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;   color:#fff; position:relative;  }
#video {background-color:#fff;}
#features {background-color:#f8f9fa ;}
#map {background-color: #000; background:url(../img/background-traffic.jpg) no-repeat; background-size:cover; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;   color:#fff;}


/*introduction*/
.logo {  margin: 30px 0px;}
.getApp {border: 2px solid #fff;  float: left;  padding: 9px 12px;  border-radius: 7px; margin-top: 20px; position:absolute; z-index:2;}
.getApp:hover { /* Fallback for web browsers that don't support RGBa */ background-color: rgb(0, 0, 0);/* RGBa with 0.6 opacity */background-color: rgba(255, 255, 255, 0.3);}
.hand { position:absolute;  bottom: 0; left: 0; width:100%; height:auto; z-index:1}
.version { font-size:15px;}


/*video*/
.badge {padding-top:30px;}
.ny {font-size:13px;   text-transform: uppercase;}
#video h2 {text-align:center;}

/*download*/
#download {text-align:center;}
#download h2 {text-align:center;}
#download h2 {margin-bottom:0px;}
#download h4 {margin-top:0px; margin-bottom: 30px;}
.getAppBut {  border: 2px solid #262626;  padding: 10px 16px;  border-radius: 7px;  margin-top: 20px; display:inline-block;  margin-right: 30px;}

/*footer*/
#footer {background-color:#212121; color:#fff;}

/*features*/
#features ul{list-style-type: none; padding-left: 0px;   margin-top: 0px;}
#features h2 {padding-bottom:18px; margin-bottom:0px; text-align:center;}
#features h4 {margin-top:0px; padding-top:0px;}
/*
.bullet1 {background: url(../img/icon-safety.png) no-repeat 0px 20px;}
.bullet2 {background: url(../img/icon-left.png) no-repeat 0px 20px; }
.bullet3 {background: url(../img/icon-beep.png) no-repeat 0px 20px; }
.bullet4 {background: url(../img/icon-fast.png) no-repeat 0px 20px;}*/

#features ul li { position:relative; cursor: pointer;}
#features li:before {content: ''; display: block;  position: absolute; top: 20px; left: 20px;  height: 57px; width: 57px;}
#features li.selected:before {top: 19px; left: 19px;}
#features li.bullet1:before {background: url(../img/icon-safety2.png)}
#features li.bullet2:before {background: url(../img/icon-left2.png)}
#features li.bullet3:before {background: url(../img/icon-beep2.png)}
#features li.bullet4:before {background: url(../img/icon-fast2.png)}
#cf7_controls .selected.bullet1:before { background-position:top right;}
#cf7_controls .selected.bullet2:before { background-position:top right;}
#cf7_controls .selected.bullet3:before { background-position:top right;}
#cf7_controls .selected.bullet4:before { background-position:top right;}

/*styles for rollover buttons*/
p#cf7_controls {  text-align:left;}
#cf7_controls span {  padding-right:2em;  cursor:pointer;}
#cf7_controls .selected { background-color:#FFF7FD; border: 1px solid #ec008c; border-radius:8px; padding: 19px 19px 19px 89px;}
#cf7_controls .selected strong{color:#ec008c;}
#cf7 {  position:relative;  margin:0 auto 10px;}
#cf7 img {  position:absolute;  left:0;  -webkit-transition: opacity .7s ease-in-out;  -moz-transition: opacity .7s ease-in-out;  -o-transition: opacity .7s ease-in-out;  transition: opacity .7s ease-in-out;  opacity:0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);}
#cf7 img.opaque {  opacity:1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=1);}

/*map*/
#map strong {text-transform:uppercase; font-size:15px;}
#map a {color:#fff; text-transform:uppercase; font-size:20px; padding:9px;
    border: 3px solid rgb(255, 255, 255);
    border: 3px solid rgba(255, 255, 255, .8);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	}
#map a:hover {background:#9a6081; text-decoration:none;}
.mapImage{  margin-top: 40px;}


/*footer*/
#footer {text-align:center;}
#footer hr {  border-top: 1px solid #505050;}
.appeal { font-size:14px; line-height:24px; background-color:#505050;   padding: 20px; text-align:left;}
#footer a {color:#fff; text-decoration:underline;}
#footer strong {display: block;  font-size: 24px;  font-weight: 400;  padding-bottom: 20px;}
.develop {font-size:14px; }
.develop img {  vertical-align: text-bottom;}


/*modal window*/
#popUp {background:url(../img/background-popup.jpg) no-repeat; background-size: cover;   -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover; color:#fff; background-position:top right;}
#popUp h2 {text-align:center;  font-size:23px; font-style:italic; font-weight:bold;   padding-top: 0px;}
#popUp .blogLink { font-size:14px; text-transform:uppercase; color:#c3c3c3;}
.popText {color:#ECECEC;}
.popShare { color:#fb21a3; background: rgb(0, 0, 0); /* The Fallback */   background: rgba(0, 0, 0, 0.7); font-weight:bold;   padding: 5px 20px;  margin-bottom: 15px; }
#modalFool .close {color:#fff; opacity: 1; text-shadow:none;   margin: 5px 10px;}
.modal-body {  padding: 8px;}

/*share buttons*/
.fb-share-button span {vertical-align: top  !important;   width: 120px  !important; padding-top: 4px;}
.fb-share-button iframe { width: 120px !important; height: 20px !important; }

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 280px) {

/*section*/
#intro {min-height: 540px;}
#footer {padding-top: 20px;}
#features {padding-bottom: 35px;}
#download { padding-bottom: 30px;}

/*introduction*/
#intro h1 {font-size:33px; line-height:39px; z-index:2;}
#intro p {font-size:20px; line-height:29px; z-index:2;}

/*generic*/
h3{font-size:28px; font-weight: 400; text-align:center;}
body { line-height:28px;}

/*modal window*/
#popUp h1 {font-family: 'Open Sans', sans-serif; font-size:40px; text-align:center;}
.popText {  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.8);}

/*map*/
.slideshow{height: 80px;}
#map p { font-size:20px;   margin-bottom: 40px;}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
/*section*/
#intro {max-height: 740px; min-height:646px;}
#video {padding-bottom: 70px;}
#features {padding-top: 30px; padding-bottom: 60px;}
#footer {padding-top: 40px;}
#download { padding-bottom: 50px;}

/*introduction*/
#intro h1 {font-size:53px; line-height:65px;letter-spacing: 1px;}
#intro p {font-size:24px; line-height:40px;}

/*features*/
#features strong {font-size:28px; font-weight:400;}
#features li {padding: 20px 20px 20px 90px; margin-bottom: 10px;}

/*generic*/
h2 {font-size:38px; font-weight:400;   padding: 25px 0;}
h3 {font-size:31px; text-align:left;}
h4 {font-size:22px; margin-bottom:80px;}
body { line-height:35px;}

/*modal*/
.modal-dialog {  width: 80%;}
.modal {top: 10%;}

/*map*/
.slideshow{height: 90px;}
#map p { font-size:23px;}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
/*section*/
#intro { max-height:826px; min-height:715px;}

/*video*/
.vidPad { padding-left: 45px; padding-right: 45px;}
.vidPara {  padding-right: 40px; margin-top:10px;}
#video h3 {margin-bottom:0px;}

/*modal*/
#popUp h1 {font-size:90px;}
.popText { background:none;}

/*map*/
.slideshow{height: 130px;}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
/*section*/
#intro { max-height:1000px; min-height:808px;}

/*introduction*/
.getApp2 {margin-left:-60px;}

}