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

/* Table of Contents
-----------------------------------------------------------------------------
	1. Clean Base
	2. Base Typography
	3. Images
	4. Links
	5. Forms
	6. Tables
	7. Framework 
*/

/* 1. Clean Base
------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, 
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, a, nav, section, summary, time, mark, audio, video 
{margin:0 auto; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; list-style:none; outline:none; -webkit-font-smoothing: subpixel-antialiased; -webkit-tap-highlight-color:rgba(0,0,0,0);}
	
html,body { -webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased; height: 100%;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
img{border:none;}

input[type="text"], input[type="submit"], input[type="button"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], textarea {-webkit-appearance: none; outline: none;}
textarea:focus, input:focus, a, div, img { outline: none; }
 
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block;}

/* 2. Base Typography
------------------------------------------------------------------------------*/
body{ color:#373d48; font-size:13px; font-family: 'Roboto', sans-serif; font-weight:400; line-height:22px;}

h1, h2, h3, h4, h5, h6{ margin-bottom:20px; font-weight:normal;}
h1{ font-size:34px;}
h2{ font-size:36px;}
h3{ font-size:30px;}
h4{ font-size:26px;}
h5{ font-size:25px;}
h6{ font-size:25px;}

p{ color:#373d48; font-size:13px; font-weight:400; line-height:22px; margin-bottom:20px;}

ul{ margin:20px 20px; padding:0;}
ul li{ font-size:13px;  color:#373d48; font-weight:400; line-height:18px; padding:0 0 5px 0; list-style:outside circle;}

ol{ margin:20px 20px; padding:0;}
ol li{ font-size:13px;  color:#373d48; font-weight:400; line-height:18px; padding:0 0 5px 0; list-style: decimal; margin-left:20px;}

blockquote{ display:block; text-align:left; margin-bottom:20px; position:relative; background:#f3f3f3; padding:20px 20px 10px 20px; border-left:2px solid #1589cb;}
blockquote p{ font-size:13px; font-weight:400; line-height:17px; margin-bottom:15px; position:relative; }

hr {border:0 #000 solid; border-top-width:1px; clear:both; height:0;}

/* 3. Images
------------------------------------------------------------------------------*/
img{border:none; border-style: none;}

/* 4. Link
------------------------------------------------------------------------------*/
a{color:#4777ac;}
a:hover{color:#4777ac; text-decoration: underline;}
a:active, a.current {color: #e8941a;}
a:focus {outline: none;}

/* 5. Forms
------------------------------------------------------------------------------*/
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"]{ border:1px solid #dedede; padding:0 15px; color:#666666; font-size:12px; height:36px; }
textarea{ border:1px solid #dedede; padding:5px 15px; color:#666666; font-size:12px; height:60px; resize:none;  font-family: 'Roboto', sans-serif; line-height:16px;}

input[type="submit"], input[type="button"], input[type="reset"]{ background:#666; cursor:pointer; color:#fff; border:none; height:30px; line-height:28px; display:block; font-size:15px;}
input[type="submit"]:hover, input[type="button"]:hover{ background:#666; color:#fff;}

/* 6. Tables
------------------------------------------------------------------------------*/
table {border-spacing: 0; border-collapse: collapse;}
td {text-align: left; font-weight: normal;}

/* 7. Layout Framework
------------------------------------------------------------------------------*/
/* main container */
#wrapper{ width:100%; min-height:100%; min-height: 100%;height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */height: 100%;margin: 0 auto -22px; /* the bottom margin is the negative value of the footer's height */}
.container{ max-width:1090px; width:100%;}

.footer, .push {height: 22px; }

/* header */
header{ width:100%; height:auto; position: absolute; left: 0; padding-top: 35px; z-index: 1; }
header .logo{ display: inline-block; width: 21%; margin-left: 0; position: absolute; left: 3%; }
header .logo figure{ display: block; width: 100%; }
header .logo figure img{ display: block; width: 100%; }

/* nav */
nav{ width:100%; height:auto;}
nav ul{}
nav ul li{}
nav ul li a{}
nav ul li a:hover, nav .active{}

/* footer */
footer{ width:100%; height:auto; background:#999;}


.container-area{ display: block; max-width: 900px; position: relative; }

/*--------- home page ------------*/
/* banner part */
.banner{ display: block; width: 100%; position: relative; margin-bottom: 33%; }
.banner figure{ display: block; width: 100%; }
.banner figure img{ display: block; width: 100%; }

.banner-logo{ display: inline-block; position: absolute; right: 30px; bottom: 20%; width: 50%; }
.banner-logo figure{ display: block; width: 100%; }
.banner-logo figure img{ display: block; width: 100%; }

.drone-cell{ display: inline-block; position: absolute; left: 0; bottom: -47%; width: 55%; z-index: 2; }
.drone-cell figure{ display: block; width: 100%; }
.drone-cell figure img{ display: block; width: 100%; }

.tab-cell{ display: inline-block; position: absolute; left: 20%; bottom: 5%; width: 26%; z-index: 3; }
.drone-cell figure{ display: block; width: 100%; }
.drone-cell figure img{ display: block; width: 100%; }
.gun-tan-section{ display: block; width: 100%; position: relative; }

.wave-cell{ display: block; width: 100%; position: absolute; left: 0; top: -11%; }
.wave-cell figure{ display: block; width: 100%; }
.wave-cell figure img{ display: block; width: 100%; }


.gun-cell{ display: block; width: 81%; margin-left: 5%; position: relative; z-index: 9; }
.gun-cell figure{ display: block; width: 100%; }
.gun-cell figure img{ display: block; width: 100%; }


.tag-cell{ display: block; width: 30%; margin-right: 8%; margin-top: -2%; position: relative; }
.tag-cell figure{ display: block; width: 100%; }
.tag-cell figure img{ display: block; width: 100%; }

.tank-cell{ display: block; width: 100%; margin-right: 0; margin-top: 37%; position: relative; }
.tank-cell figure{ display: block; width: 84%; margin-right: 0; }
.tank-cell figure img{ display: block; width: 100%; }

.black-layer{ display: block; width: 100%; height: 11.4%; position: absolute; left: 0; bottom: 0; background: #010101; }


.side-gun{ display: block; width: 53%; right: 0; top: -178px; position: absolute; z-index: 99; }
.side-gun figure{ display: block; width: 100%; }
.side-gun figure img{ display: block; width: 100%; }

.text-layer{ display: inline-block; padding: 20px 20px; box-sizing: border-box; position: relative; z-index: 1; margin-right: 0; }
.text-layer:before{ content: ''; display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: url(assets/images/layer.png) no-repeat; background-size: cover; }
.text-layer p{ font-size: 13px; line-height: 16px; color: #000; margin-bottom: 10px; position: relative; }
.text-layer p:last-child{ margin-bottom: 0; }

.layer-1{ position: absolute; right: 0; top: -340px; z-index: 9999; width: 64%; }

.text-layer .big-title{ font-size: 36px; line-height: 40px; font-weight: bold; text-transform: uppercase; position: relative; }
.text-layer .small-title{ font-size: 22px; line-height: 36px; font-weight: bold; position: relative; }
.reverse-layer:before{ background: url(assets/images/layer-2.png) no-repeat; background-size: cover;  }
.left-push{ left: -30px; }

.title-1{ position: absolute; left: -36px; top: 44px; overflow: hidden; }
.title-2{ position: absolute; right: -36px; top: 145px; overflow: hidden; }
.title-3{ position: absolute; right: -36px; top: 417px; max-width: 350px; overflow: hidden; }
.title-4{ position: absolute; left: -36px; top: 644px; overflow: hidden; }

.title-1:before{ background: url(assets/images/smallest.png) no-repeat; background-size: cover; background-position: top right; left: -120px; }
.title-2:before{ background: url(assets/images/fastest.png) no-repeat; background-size: cover; background-position: top left; left: 78px; }
.title-3:before{ background: url(assets/images/highest.png) no-repeat; background-size: cover; background-position: top left; left: 78px; }
.title-4:before{ background: url(assets/images/wirless.png) no-repeat; background-size: cover; background-position: top right; left: -170px; }


.specification{ position: absolute; left: -36px; top: 935px; width: 70%; }
.specification ul{ margin: 0; position: relative; }
.specification li{ display: flex; font-size: 14px; line-height: 18px; color: #000; }
.specification li label{ display: inline-block; width: 50%; text-align: left; }
.specification li span{ display: inline-block; width: 50%; text-align: left; }
.specification:before{ background: url(assets/images/specification.png) no-repeat; background-size: cover; }
.specification .big-title{ margin-bottom: 10px; }


.right-push{ right: -30px; left: inherit; }
.gun-gallery{ position: absolute; left: 0; bottom: -190px; width: 100%; display: block; z-index: 999; left: -24px; bottom: -158px; }
.gun-gallery .gallery-title{ display: block; font-size: 17px; line-height: 24px; color: #737577; text-transform: uppercase; font-weight: bold; margin-bottom: 6px; }
.gun-cell-grp{ display: inline-block; width: 100%; }
.guns-cell{ display: inline-flex; align-items: center; justify-content: flex-end; width: 100px; height: 100px; border: 3px solid #737577; background-size: cover; background-position: center; background-color: #fff; margin-right: 20px; position: relative; float: left; }
.guns-cell:before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(assets/images/waves-slider.png) no-repeat; }
.guns-cell figure{ display: flex; width: 120px; height: 120px; align-items: center; position: relative; }
.guns-cell figure img{ display: block; max-width: 100%; max-height: 80%; width: auto; height: auto; }

.btm-info-layer{ display: block; width: 100%; position: absolute; left: 0; bottom: 21px; padding-left: 50px; box-sizing: border-box; }
.btm-info-layer .top-layer{ display: inline-block; width: auto; border-bottom: 2px solid #82001f; padding-bottom: 3px; }
.btm-info-layer .top-layer ul{ display: inline-block; margin: 0; }
.btm-info-layer .top-layer ul li{ display: inline-block; font-size: 12px; line-height: 14px; color: #ffffff; position: relative; margin-right: 15px; padding-bottom: 0; }
.btm-info-layer .top-layer ul li:after{ content: ''; display: block; position: absolute; right: -10px; top: 1px; width: 1px; height: 12px; background: #ffffff; }
.btm-info-layer .top-layer ul li:last-child:after{ display: none; }
.btm-info-layer .top-layer ul li a{ color: #fff; text-decoration: none; }
.btm-info-layer .top-layer ul li a:hover{ color: #fff; text-decoration: underline; }


.btm-info-layer .mid-layer ul{ display: inline-block; margin: 0; }
.btm-info-layer .mid-layer ul li{ display: inline-block; font-size: 12px; line-height: 14px; color: #ffffff; position: relative; margin-right: 15px; padding-bottom: 0; }
.btm-info-layer .mid-layer ul li:after{ content: ''; display: block; position: absolute; right: -10px; top: 1px; width: 1px; height: 12px; background: #ffffff; }
.btm-info-layer .mid-layer ul li:last-child:after{ display: none; }
.btm-info-layer .mid-layer ul li a{ color: #fff; text-decoration: none; display: inline-block; margin-left: 4px; }
.btm-info-layer .mid-layer ul li a:hover{ color: #fff; text-decoration: underline; }

.btm-info-layer .mid-layer{ display: block; width: 100%; margin-bottom: 20px; }
.btm-info-layer .btm-layer{ display: block; width: 100%; max-width: 550px; margin-left: 0; }
.btm-info-layer .btm-layer p{ font-size: 10px; line-height: 12px; color: #ffffff; margin-bottom: 5px; }
.btm-info-layer .btm-layer p:last-child{ margin-bottom: 0; }

.video-section{ display: inline-block; width: 380px; position: absolute; top: 1329px; z-index: 999999; }