@font-face {
  font-family: 'paragraph';
  src: url('../fonts/Cicle/Cicle_Fina.ttf'); /* IE9 Compat Modes */
  

}
@font-face {
  font-family: 'header';
  src: url('../fonts/planet_n/planetncompact.ttf'); /* IE9 Compat Modes */
  

}
html, body{
    margin: 0;
    padding: 0;
	background:#fff;
   
}
html, body {
	/*background: #ffffff url(../img/hexagons-pattern.png) repeat -10px -10px;*/
	background:#fefefe;
}
.all-caps {
	text-transform:uppercase;
}
.no-select {
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.linear-in {
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
.ease-in {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.clockwise {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
	
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#wrapper{
    width: 100%;
    margin: 0 auto;
    clear: both;
	/*display:none;*/
}
#loader-wrap {
	display:block;
	width:100%;
	height:100%;
	z-index:200;
	position:fixed;
	
	background: url(../img/dront-splash-bg-pattern-small-vert.png) repeat;
	-webkit-animation: backgroundScroll 1.3s linear infinite;
	animation: backgroundScroll 1.3s linear infinite;
}

@-webkit-keyframes backgroundScroll {
	from {background-position: 0 0;}
	to {background-position: 0 152px;}
}
        
@keyframes backgroundScroll {
	from {background-position: 0 0;}
	to {background-position: 0 152px;}
}
#loader-logo {
	display:inline-block;
	margin:0 auto;
	position:absolute;
	top:36%;
	left:0;
	right:0;
	z-index:201;
	width: 150px;
	
	-webkit-animation: logoScroll 3s linear infinite;
	animation: logoScroll 3s linear infinite;
}
@-webkit-keyframes logoScroll {
	0% {top:40%; opacity:0;}
	33% {top:36%; opacity:1;}
	66% {top:32%; opacity:0;}
	100% {opacity:0;}
}
        
@keyframes logoScroll {
	0% {top:40%; opacity:0;}
	33% {top:36%; opacity:1;}
	66% {top:32%; opacity:0;}
	100% {opacity:0;}
}

header{
    width: 100%;
    margin: 0 auto;
    height: 120px;
	padding-top:9px;
	display:block;
	position:relative;
	z-index:100;
	background:#fefefe;
}
#header-inner{
    max-width: 960px;
    margin: 0 auto;
    position: relative;

    text-align: left;
	overflow:visible;
   
}
/*#logo {
	width: auto;
	height: 90px;
	z-index:99;
	margin:15px 0px;
}*/
#logo {
	display:block;
	width: 92px;
	height: auto;
	
	text-align:center;
	position:relative;
	left:0;
	right:0;
	padding:12px 46px;
	/*padding-left:32px;
	padding-right:32px;*/
	margin:0px auto;
	/*margin-top:5px;*/
	
	/*border:8px solid #fff;
	background:#fff;
	border-radius: 50%;
    -moz-border-radius: 50%;*/
	
	background: url('../img/dront-logo-bg-hex-black.png') no-repeat;
	background-position:50% 50%;
	background-size:184px 184px;
	
}


h3{
    font-family: "paragraph";
    color: #222;
    letter-spacing: 0.12em;
}
#slogan{
    position: relative;
    top: 0px;
    vertical-align: top;
 line-height: 120px;

    display: inline;
    width: auto;
    font-family: "paragraph";
    color: #666;
    
    padding: 10px;
  margin-left: 16px;
   


    
}
.verticalLine{
    vertical-align: top;
    border-left: 1px solid #666;
     line-height: 120px;
     padding-top: 39px;
     padding-bottom: 39px;
    display: inline;
	margin-left:20px;
}
#content-1{
    position: relative;
    z-index: 2;
    /*border-top: 2px solid #ffee82;
     border-bottom: 2px solid #666;
     background-color: #bd9a09;*/
    width: 100%;
    height: 490px;
	overflow:visible;
    /*margin-bottom: 200px;*/
  /*     background: url('../img/city.png');
    background-size: cover;
    background-repeat: no-repeat;*/
  
	background: url('../img/dront-splash-bg-pattern-small-vert.png') repeat;
	-webkit-animation: backgroundScroll 2.4s linear infinite;
	animation: backgroundScroll 2.4s linear infinite;
	/*background-attachment:fixed;*/
	
	-webkit-box-shadow: inset 0px -10px 40px -20px rgba(17,17,17,0.4), inset 0px 10px 40px -20px rgba(17,17,17,0.4);
	-moz-box-shadow: inset 0px -10px 40px -20px rgba(17,17,17,0.4), inset 0px 10px 40px -20px rgba(17,17,17,0.4);
	box-shadow: inset 0px -10px 40px -20px rgba(17,17,17,0.4), inset 0px 10px 40px -20px rgba(17,17,17,0.4);
	
	/*border-top:1px solid rgba(0, 0, 0, 0.1);
	border-bottom:1px solid rgba(0, 0, 0, 0.1);*/
}

nav{
    padding-top: 10px;
    padding-bottom: 10px;
  width: auto;
    text-align: center;
  padding-bottom: 20px;
  display: inline-block;
  float: right;
 margin-top: 51px;
 height: 100%;
}
nav a{
    font-family: 'paragraph', Fallback, sans-serif;
    letter-spacing: 0.1em;
    display: inline;
    text-decoration: none;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid #414141;
    padding-top: 62px;
    padding-bottom: 62px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: -5px;
   
   height: 100%;
    width: 200px;
    
}
nav a:hover{
    background: #1c1c1c;
      transition: background 0.5s ease;
}
#content-1-inner{
    max-width: 960px;
    display: block;
    margin: 0 auto;
	height:auto;
   
    }
    
#leftSplash{
    float: left;
    display: inline-block;
    max-width: 600px;
    }
#rightSplash{
    float: right;
     display: inline-block;
     height: 100%;
     width: 280px;
	 position:relative;
	 z-index:4;
background: rgba(255,255,255,0.62);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.62) 0%, rgba(224,224,224,0.62) 0%, rgba(245,245,245,0) 69%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.62)), color-stop(0%, rgba(224,224,224,0.62)), color-stop(69%, rgba(245,245,245,0)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.62) 0%, rgba(224,224,224,0.62) 0%, rgba(245,245,245,0) 69%, rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.62) 0%, rgba(224,224,224,0.62) 0%, rgba(245,245,245,0) 69%, rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.62) 0%, rgba(224,224,224,0.62) 0%, rgba(245,245,245,0) 69%, rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0.62) 0%, rgba(224,224,224,0.62) 0%, rgba(245,245,245,0) 69%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
#phoneImg {
    display: inline-block;
    width: 250px;
    margin: 0 auto;
	margin-top:56px;
    text-align: center;
	float:right;
    }
	.banner-img {
		display:none;
		width: 250px;
		margin: 0 auto;
		margin-top:56px;
		text-align: center;
		position:relative;
		float:right;
	}
    #phoneImg2{
        display: none;
         width: 250px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    }
    .actionLink{
        display: inline-block;
        margin-top: 0px;
    }
    #learnMore{
background: rgba(255,222,5,1);
background: -moz-linear-gradient(top, rgba(255,222,5,1) 0%, rgba(138,109,3,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,222,5,1)), color-stop(100%, rgba(138,109,3,1)));
background: -webkit-linear-gradient(top, rgba(255,222,5,1) 0%, rgba(138,109,3,1) 100%);
background: -o-linear-gradient(top, rgba(255,222,5,1) 0%, rgba(138,109,3,1) 100%);
background: -ms-linear-gradient(top, rgba(255,222,5,1) 0%, rgba(138,109,3,1) 100%);
background: linear-gradient(to bottom, rgba(255,222,5,1) 0%, rgba(138,109,3,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffde05', endColorstr='#8a6d03', GradientType=0 );
        padding: 12px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        text-decoration: none;
        color: #420f0f;
        text-shadow: 0px 1px 1px #ffee82;
        display: inline-block;
        border-top: 1px solid #ffee82;
        border-bottom: 1px solid #66561a;
        font-family: paragraph;
        font-size: 20px;
        float: left;
        margin-right: 10px;
        margin-top: 14px;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.7);
         
    }
    a[ id= "learnMore" ]:target ~ #content-2 {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
      -webkit-transition: all 0.5s ease; /* Safari */
     transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#badgeImg{

      margin: 0 auto;
  
width: 150px;
    float: right;
	opacity:1;
	margin-top:5px;
	/*margin-left:4px;*/
	/*-webkit-box-shadow: 2px 2px 0px 0px rgb(255,255,255);
	-moz-box-shadow: 2px 2px 0px 0px rgb(255,255,255);
	box-shadow: 2px 2px 0px 0px rgb(255,255,255);*/
	
  
}
#badgeImg:hover {
	opacity:0.9;
}
.slicknav_menu {
	display:none;
        font-family: 'paragraph';
       
}
#menu {
		display:none;
	}
#logo2{
    display: none;
}
h1{

  font-size: 1.9em;
  margin: 0;  
    
}
p{
    font-family: 'paragraph';
}

#leftSplash p{
	font-family:'Open Sans', sans-serif;
	/*background-color: rgba(0, 0, 0, 0.75);*/
    color: #222;
    
    line-height: 1.7em;
	font-size:15px;
    /*letter-spacing: 0.13em;*/
    /*border-radius: 2px;
    -webkit-border-radius: 2px;*/
    /*text-shadow: 0px 1px 1px rgba(0,0,0,0.2);*/
	
	/*-webkit-box-shadow: 3px 3px 10px -2px rgba(17,17,17,0.15);
	-moz-box-shadow: 3px 3px 10px -2px rgba(17,17,17,0.15);
	box-shadow: 3px 3px 10px -2px rgba(17,17,17,0.15);*/
	
	
}
#leftSplash h1{
		
      position: relative;
    left: 0px;
    font-family: 'header';
	font-family: 'Roboto', sans-serif;
	font-size:34px;
	line-height:34px;
	letter-spacing:1px;
    color: #111;
    text-align: left;
     /*text-shadow: 0px -1px 0px rgba(255,255,255,0.2);*/
	 /*text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8), -1px -1px 0px rgba(255, 255, 255, 0.8), 1px -1px 0px rgba(255, 255, 255, 0.8), -1px 1px 0px rgba(255, 255, 255, 0.8);*/
	 /*text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0px, rgba(255, 255, 255, 0.5) 2px 2px 0px;*/
	padding-top:96px;
	
}
.banner-title, .banner-text p {
	display:none;
}
.banner-text {
	background:#fefefe;
	
	-webkit-box-shadow: 2px 2px 15px 1px rgba(17,17,17,0.1);
	-moz-box-shadow: 2px 2px 15px 1px rgba(17,17,17,0.1);
	box-shadow: 2px 2px 15px 1px rgba(17,17,17,0.1);
	
	border:1px solid #eaeaea;
	
	margin:20px 0px;
	margin-bottom:20px;
	padding: 6px 25px;
}
footer{
    display: block;
    width: 100%;
    background: /*#ffce01*/ #111;
    margin: 0 auto;
    text-align: center;
    height: auto;

}
#footWrap{
	display:table;
	height:auto;
    margin: 0 auto;
    text-align: center;
    max-width: 960px;
	padding:80px 0px;
	padding-bottom:70px;
}
.footerColumn{
      display: inline-block;
    position: relative;
   float: left;
    text-align: left;
    width: 280px;
 
     margin-left: 60px;

}
.footerColumn p{
      line-height: 1.5em;
  /*text-shadow: 0px 1px 0px #d6c26f;*/
    display: block;
    position: relative;
	color:#c1c1c1;
}
.footerColumn h3 {
	margin-top:0px;
	color: #efefef;
    text-shadow: 0px 1px 1px #000;
	font-size:18px;
    letter-spacing:0em;
    vertical-align: text-top;
	font-family:"Roboto", sans-serif;
	font-weight:normal;
}
#emailInput{
    padding: 4px 5px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
	line-height:14px;
    /*border: 3px solid #66561a;*/
	border:0;
    outline: none;
    width: 180px;
	background:#f0f0f0;
}
#emailSubmit {
	outline: none;
	border:0;
	border: 2px solid #f0db2b;
}
.emailP{
    color: #fff;
    text-shadow: 0px 1px 1px #000;
}
.submit{
	/*background: #f2c401;*/
	background:none;
    
    color: #dfdfdf;
    font-family: 'paragraph', sans-serif;
	font-weight:normal;
    font-size: 15px;
	line-height:14px;
    letter-spacing: 0em;
    padding: 5px 10px;
	padding-bottom:4px;
	margin-left:5px;
	opacity:1;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
	
}
.submit:hover{
    cursor: pointer;
    background: #000;
    color: #efefef;
	/*opacity:0.85;*/
    
}
.tw-feed {width:270px;height:270px;overflow-y:scroll;color:#fff;padding-right:10px;}
.tw-feed a {color:#fff;text-decoration:none;}
.tw-feed a:hover {color:#ccc;text-decoration:none;}
.twitter-timeline {position:relative;}

footer h3{
    
}
#footerLeft{
    display: inline-block;
    position: relative;
   float: left;
    text-align: left;
    width: 280px;
margin-left:0px;
       
}
#footerLeft p{
    line-height: 1.5em;
    display: block;
    position: relative;
    /*text-shadow: 0px 1px 0px #d6c26f;*/
	margin-top:0px;
}
#footerLeft h1{
    position: relative;
    font-family: 'Roboto', sans-serif;
     
    text-align: right;
  display: inline;
     /*text-shadow: 0px 1px 0px #d6c26f;*/
}
#footerLeft a{
    position: relative;
    display: block;
    text-align: left;
}
#foot-logo-left {
	display:inline-block;width:110px;float:left;
}
#foot-logo-right {
	display:inline-block;width:170px;float:left;
}

#mini-logo {
	width:90px;
	opacity:0.95;
}
#appIcon{
    width: 100px;
    text-align: left;
    display: inline;
    float: left
    }

footer a{
    position: relative;

    text-align: center;
    color: #ccc;
    
}

footer a:hover{
    color: #eee;
}
.foot-social-button {
	display:inline-block;
	float:left;
	margin-right:6px;
	
	
}
.foot-social-button img {
	width:26px;
	height:26px;
	opacity:1;
}
#googleplay2{
    display: none;
}
footer{
    width: 100%;
    font-family: 'paragraph';
}

@media screen and (max-width: 980px) {
	#loader-logo {
		width:125px;
	}
	/* #menu is the original menu */
	#logoContainer {
		display:none;
	}
	/*#logo2{
            display: block;
            width: 200px;
            top: 0px;
            display: block;
            position: relative;
            margin: 0 auto;
            text-align: center;
        }
	.slicknav_menu {
		display:block;
                top: 100px;
	}*/
        #learnMore{
        float: none;
        margin: 0 auto;
        width: 95%;
     
        text-align: center;
     
        }
        #googleplay1{
            display: none;
        }
        #googleplay2{
            display: block;
			width:200px;
            margin: 0 auto;
            text-align: center;
            float: none;
            }
        #phoneImg, .banner-img{
            /*display: none;*/
            float: none;
			margin-top:0px;
			margin-bottom:5px;
    
        }
		
        #phoneImg2{
            /*display: block;*/
         
        }
        #badgeImg{

            margin: 0 auto;
            
          width: 175px;
              float: none;
			  
            
          }
        #rightSplash{
            float: none;
              margin: 0 auto;
              
              width: 100%;
              height: 100%;
			  
           
        }
        #content-1-inner{
            width: 100%;
        }
        #leftSplash{
            max-width: 85%;
            margin: 0 auto;
          
            text-align: left;
            width: 100%;
            display:block;
            float: none;
            
        }
        #leftSplash h1{
            margin-top: 20px;
            font-size: 25px;
            text-align: center;
			padding-top:70px;
        }
        
        #content-1{
            height: auto;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }
        #content-1-inner{
            margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-bottom: 0px;
        padding-bottom: 0px;
     
        }
        #content-2{
            height: auto;
            margin: 0 auto;
            margin-left: auto;
            margin-right: auto;
          
            position: relative;
            display: table;
            height: auto;
            
           
        }
        
        footer{
           display: block;
            /*height: 700px;*/
            margin: 0 auto;
        }
		#footWrap {
			max-width:80%;
			width:auto;
			margin:0 auto;
			padding-bottom:0px;
		}
		#foot-logo-left {
			width:35%;
			max-width:130px;
		}
		#foot-logo-right {
			width:65%;
		}
        #footerLeft{
            margin: 0 auto;
            display: block;
            float: none;
             width: 100%;
            
        }
        .footerColumn{
             margin: 0 auto;
            display: block;
            float: none;
            padding-bottom: 60px;
            width: 100%;
            
        }
        
}
@media screen and (max-width: 420px) {
	header {
		height:105px;
	}
	#socialWrap2 {
		width:26px;
	}
	#socialWrap2 .foot-social-button {
		display:block;
		padding:0;
		margin:0;
	}
	#logo {
		width:86px;
		padding:8px 46px;
		background-size:164px 164px;
		
	}
	
	#foot-logo-left {
		width:35%;
		max-width:35%;
	}
	#foot-logo-left #mini-logo {
		width:90%;
	}
	.tw-feed {
		padding-right:0px;
	}
	#leftSplash p {
		font-size:13px;
	}
	.footerColumn p {
		font-size:14px;
	}
	#phoneImg {
		width:200px;
	}
	#badgeImg, #googleplay2 {
		width:150px;
	}
}