/*

Digital Storm Products
Copyright 2016 Digital Storm. All Rights Reserved.

---------------

Table of Contents:

1) General
2) Typography
3) Backgrounds and buttons
4) Dividers
5) Intro & Sections Headers
6) Services & Features
7) Works
8) Gallery
9) Team
10) Contact
11) Footer
12) Navigation
13) Carousels
14) Preloader
15) Media

*/

/* ==== 1) General ==== */

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

::selection {
	background: #e60000;
	color:#fff;
}

::-moz-selection {
	background: #e60000;
	color:#fff;
}



@font-face {
	font-family: 'Exo';
	src: url('/fonts/Exo2-0-SemiBold.eot');
	src: url('/fonts/Exo2-0-SemiBold.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/Exo2-0-SemiBold.svg#Exo2.0-SemiBold') format('svg'),
	     url('/fonts/Exo2-0-SemiBold.ttf')  format('truetype');
	     
	font-weight: 700;
    font-style: normal;
}
@font-face {
	font-family: 'Exo';
	src: url('/fonts/Exo2-0-Regular.eot');
	src: url('/fonts/Exo2-0-Regular.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/Exo2-0-Regular.svg#Exo2.0-Regular') format('svg'),
	     url('/fonts/Exo2-0-Regular.ttf')  format('truetype');
	font-weight: 400;
    font-style: normal;
}

.heading-font {
  font-family: 'Lato', 'sans-serif';
  font-weight: 200;
  letter-spacing: 1px;
}
.body-font {
  font-family: 'Lato', 'sans-serif';
}
.alt-font {
  font-family: 'Lato', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 2px;
}

html,
body {
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
	font-family: 'Lato',  'sans-serif';
}

.icon{
max-width:40px;
height:auto;

}	


a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: red;
}
a:hover,
a:focus {
  color: #fcbd20;
}
hr {
  max-width: 100px;
  margin: 25px auto 0;
  border-width: 1px;
  border-color: rgba(34, 34, 34, 0.1);
}
hr.light {
  border-color: white;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Exo', 'sans-serif';
  font-weight: 600;
  letter-spacing: 1px;
}
.product-img{
	
padding-top:25%;
max-height: 700px;
-webkit-animation-delay:1.0s;	
	
}
p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}


.white-text{
	color:white;
}
.img-responsive {
	display: inline-block;
	height:auto;
	max-width:100%;
}



.top-logo-black {
	margin-top: 5px;
}

.img-logo-top {
    
	height: 40px;
}
/* ==== Headers Section ==== */
.float-content {
	position: absolute;
	width: 100%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.float-content-bottom {
	position: absolute;
	width: 100%;
	bottom: 0;
	padding-bottom:50px;
}


/* ==== Dividers ==== */

.divide-md {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
.divide-xs {
	padding-top: 15px;
	padding-bottom: 15px;
}

.divide-sm {
	padding-top: 30px;
	padding-bottom: 30px;
}

.divide-md {
	padding-top: 45px;
	padding-bottom: 45px;
}

.divide-lg {
	padding-top: 60px;
	padding-bottom: 60px;
}

.divide-xl {
	padding-top: 90px;
	padding-bottom: 90px;
}

.section-header{
	
	padding-bottom: 40px;
	
	
}

.smoke-bg {
	background: #181818; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#181818, black); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#181818, black); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#181818, black); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#181818, black); /* Standard syntax */
}

header .header-content .header-content-inner h1{
font-size:50px;
font-weight:500;
letter-spacing:1px;
}

video {
  object-fit:cover;
}

video.video-passion.embed-responsive-item{
	
padding-top:100px;
	
}

.embed-responsive-passion{
overflow:inherit !important;
	
}


.passion-inline{
	
display:inline;
}

.passion-badge-text{
position:absolute;
display:block;
z-index: 400;
top: 55%;
text-align: left;
color: white;
left: 15%;}

.support-fluid{
padding-left: 0 !important;
padding-right:0 !important;
	
}
.animate-btn-1{
-webkit-animation-delay: 1.0s;
	animation-delay: 1.0s;
}
.animate-btn-2{
-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.support-format{
	border:1px solid black;
	width:100%;
	position:relative;
	z-index:1;
	
}
.support-h3{

	color:white;
	font-family: 'Exo', sans-serif;
	font-size: 18px;
	
}
p.white-text-support{
font-size: 16px;
color:white;
padding:0px 5px 0px 5px;


}
.support-content{
max-width:100%;
height:auto;
display: block;
	text-align:center;
	background: rgba(0,0,0,0);
    position: absolute;
    top: 20%; right: 0; bottom: 0; left: 0;	

}

.support-bg-im img{
	display:block;
	padding:0;
	opacity:1;
	-webkit-transition: .3 ease-in-out;
	transition:.3 ease-in-out;
}

.support-bg-img:hover img{
opacity:0.8;
	
	
}


.tech-desc1{
	
	padding-top: 50px;
}	
	
a.overview-vid-btn{
color:red ;
}
a.overview-vid-btn:hover{
color:white;

}


.overlay-desc {
  background: rgba(0,0,0,0);
  /*position: absolute;*/
  top: 0; right: 0; bottom: 0; left: 0;
  /*display: flex;*/
 /*align-items: center;*/
  justify-content: center;
 color:#FFFFFF;
  padding-top:15%;
}
.overlay-desc-passion {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 40%; right: 0; bottom: 0; left: 0;
  /*display: flex;*/
 /*align-items: center;*/
 text-align:left;
 color:#FFFFFF;
  padding-top:20%;
margin-left:10%;
}

.video-heading{
	font-family: 'Exo', sans-serif;
	font-size: 4vw;
	line-height: 1;
	
}
.video-subheading{
	font-family: 'Lato', sans-serif;
	font-size: 2vw;
	line-height: 1;
	
}

.video-heading-1{
	font-family: 'Lato', sans-serif;
	font-size: 2vw;
	line-height: 1;
	
}
.video-subheading-1{
	font-family: 'Lato', sans-serif;
	font-size: 2vw;
	line-height: 1;
	
}
/*====Typography===*/
.light {
	color: #fff;
	padding-bottom:10px;
	letter-spacing:-2px;
}

.subheading-light{
	color: #fff;
	padding-bottom:10px;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
	
	
}
#press{

 height: 200px;
    background: #e0e0e0; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#e0e0e0, #ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e0e0e0 #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e0e0e0, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e0e0e0,#ffffff); /* Standard syntax (must be last) */
    }
.glyphicon {

position:fixed;
font-size:40px;
color:white;

}


.glyphicon-chevron-left{
top:50%;
left:10%;

}
.glyphicon-chevron-right{

top:50%;
right:10%;
}

.link-red {
	color: #e60000;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
}


a.link-red:hover {
	color: #ffffff;
	text-decoration: none;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
}

a.link-red:focus {
	color: #ffffff;
	outline: none;
	text-decoration: none;
}
/*==backgrounds & buttons==*/

.btn.btn-ghost, .btn.btn-ghost:hover {
	background: transparent;
	color: #e60000;
	border: 1px solid #e60000;
}

.btn.btn-ghost:hover {
	background: #e60000;
	color: #fff;
}

.btn.btn-ghost-red, .btn.btn-ghost-red:hover {
	background: transparent;
	color: #2F2F2F;
	border: 1px solid #2F2F2F;
}

.btn.btn-ghost-red:hover {
	background: #2F2F2F;
	color: #fff;
}

.btn.btn-ghost-red, .btn.btn-ghost-red:hover {
	background: transparent;
	color: #e60000;
	border: 1px solid #e60000;
}

.btn.btn-ghost-red:hover {
	background: #e60000;
	color: #fff;
}

.btn.btn-ghost-blue, .btn.btn-ghost-blue:hover {
	background: transparent;
	color: #1D87C6;
	border: 1px solid #1D87C6;
}

.btn.btn-ghost-blue:hover {
	background: #1D87C6;
	color: #fff;
}

.btn.btn-ghost-green, .btn.btn-ghost-green:hover {
	background: transparent;
	color: #469300;
	border: 1px solid #469300;
}

.btn.btn-ghost-green:hover {
	background: #469300;
	color: #fff;
}

.btn.btn-ghost-yellow, .btn.btn-ghost-yellow:hover {
	background: transparent;
	color: #bd9700;
	border: 1px solid #bd9700;
}

.btn.btn-ghost-yellow:hover {
	background: #bd9700;
	color: #fff}

.btn.btn-ghost-blue, .btn.btn-ghost-blue:hover {
	background: transparent;
	color: #1D87C6;
	border: 1px solid #1D87C6;
}

.btn.btn-ghost-blue:hover {
	background: #1D87C6;
	color: #fff;
}

.btn.btn-ghost-green, .btn.btn-ghost-green:hover {
	background: transparent;
	color: #469300;
	border: 1px solid #469300;
}

.btn.btn-ghost-green:hover {
	background: #469300;
	color: #fff;
}

.btn.btn-ghost-yellow, .btn.btn-ghost-yellow:hover {
	background: transparent;
	color: #bd9700;
	border: 1px solid #bd9700;
}

.btn.btn-ghost-yellow:hover {
	background: #bd9700;
	color: #fff;
}
.white-bg {
	background: #fff;
}
.img2-offgrid-left{
	display:none;
}
/*==passion section==*/



/*==jQuery Animation==*/
/*.fade-right {
	float:left;
	position:absolute;
	display:none;
	}*/

/*==buy Now section==*/

.bg-gradient {
	background: #f5f5f5; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#f5f5f5, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#f5f5f5, white); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#f5f5f5, white); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#f5f5f5, white); /* Standard syntax */
}

hr.title-divider {
	border-width: 2px 0 0 0;
	max-width: 300px;
}

.pricing {
	text-align: center;
	font-size: 14px;
	padding-left: 0;
	margin-bottom: 30px;
	background-color: white;
	border: 1px solid #DADADA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.pricing-speedometer {
	display: block;
	margin: auto;
	width: 65px;
	padding-top:10px;
}
.pricing-icon {
	margin: auto;
	width: 35px;
	padding-right:8px;
}
.pricing a {
	margin: 0;
}
.pricing a:hover {
	margin: 0;
}
.pricing span {
	color:#a2a2a2;
}
.pricing li:first-child,
.pricing li:last-child {
	padding: 20px 13px;
}
.pricing li {
	list-style: none;
	padding: 13px;
}
.pricing li + li {
	border-top: 1px solid #f0f0f0;
}
.pricing big {
	font-size: 32px;
	font-family: 'Exo', sans-serif;
}
.pricing h3 {
	margin-bottom: 0;
  	font-size: 40px;
}
.pricing span {
	font-size: 12px;
	font-weight: normal;
}

/* pricing color */
.p-yellow big{
	color: #fac300;
}
.p-green big{
	color: #9dc319;
}
.p-blue big{
	color: #1d87c6;
}
.p-red big{
	color: #ce1c1f;
}



/*====Navigation===*/
.navbar-default {
	background-color:#222222 !important;


}

.navbar-default .navbar
.navbar-default .navbar-toggle .icon-bar {
	background-color: #111;
	width: 30px;
	height: 2px;
	border-radius: 0;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: transparent;
}

.navbar-custom {
  background: #2C3E50;
  font-family: "Lato", sans-serif;
  font-size:16px;
  border: none;
}
.navbar-custom .navbar-brand {
  color: white;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active,
.navbar-custom .navbar-brand.active {
  color: white;
}
.navbar-custom .navbar-nav {

}
.navbar-custom .navbar-nav li a {
  color: white;
}
.navbar-custom .navbar-nav li a:hover {
  color: red;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
  color: white;
}
.navbar-custom .navbar-nav li.active a {
  color: white;
  background: #444444;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
  color: white;
  background: #444444;
}
.navbar-custom .navbar-toggle {
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: red;
  color: white;
  border-color: #444444;
}
@media (min-width: 768px) {
  .navbar-custom {
    -webkit-transition: padding 0.3s;
    -moz-transition: padding 0.3s;
    transition: padding 0.3s;
    margin:0;
  }
  .navbar-custom .navbar-brand {
    font-size: 2em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }
  .navbar-custom.affix {
    padding: 10px 0;
  }
  .navbar-custom.affix .navbar-brand {
    font-size: 1.5em;
  }
  .navbar-nav>li>a{
padding-top:25px;
padding-bottom:25px;
  }
}


.btn-buy-ghost-red {
	background: transparent;
	font-family: 'Montserrat', sans-serif;
	color: #e60000;
	font-size: 13px;
	font-weight: 100;
	line-height: 1;
	margin: 0;
	border-radius: 25px !important;
	border: 1px solid #e60000;
	text-decoration: none;
	outline: none;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	top: -1px;
	position: relative;
}

.btn-buy-ghost-red:hover {
	background: #e60000;
	color: #fff;
}

.top-logo-black {
	margin-top: 5px;
}


header {
  position: relative;
  width: 100%;
  min-height: auto;
  background: url("../img/bg-header.jpeg") no-repeat center center fixed;
background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



header .header-content {
 text-align: left;
    padding-top:50%;
    padding-bottom:50%;
    height: 100%;
}
header .header-content .header-content-inner {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
header .header-content .header-content-inner h1 {
  margin-top: 0;
  margin-bottom: 30px;
}
header .header-content .header-content-inner .list-badges {
  margin-bottom: 25px;
}
header .header-content .header-content-inner .list-badges img {
  height: 50px;
  margin-bottom: 25px;
}
header .product-container {
  max-width: 100px;
  margin: 30%;
}
/*==video section==*/


.btn-review-red {
	background:#e60000;
	font-family: 'Lato', sans-serif;
	color:#ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	padding:10px 40px 10px 40px;
	margin: 0;
	border-radius: 25px !important;
	border: 1px solid #e60000;
	text-decoration: none;
	outline: none;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	top: -1px;
	position:relative;
	display:inline-block;
	margin:5px 0px 20px 0px;
}

.btn-review-red:hover {
	background:#fc1515;
	color: #fff;
}

.btn-buy-ghost-red-lg {
	background: transparent;
	font-family: 'Lato', sans-serif;
	color: #e60000;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	padding:10px 50px 10px 50px;
	margin-left:20px;
	border-radius: 25px !important;
	border: 1px solid #e60000;
	text-decoration: none;
	outline: none;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	top: -1px;
	position: relative;
	display: inline-block;
}

.btn-buy-ghost-red-lg:hover {
	background: #e60000;
	color: #fff;
	
}

/* ==arrow down==*/
i{
 margin-bottom:40px;
}
.link-red {
	color: #e60000;
	margin-bottom: 40px;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	
}

.make-red {
	color: #e60000;
}

a.link-red:hover {
	color: #ffffff;
	text-decoration: none;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
}

a.link-red:focus {
	color: #ffffff;
	outline: none;
	text-decoration: none;
}
/*==Technology Section==*/
.img-offgrid-right{
position: relative;
left:30%;	
}
.img-offgrid-left{
position: absolute;
left:-10%;	
}


.feature-desc-x1{
padding-top:100px;
padding-bottom:200px;
  /*display: flex;*/
 /*align-items: center;*/
justify-content: left;
}

.add-on{
	padding-left:60px;
    padding-right:60px;
	
}

.addon-red{
	color:#e60000;
	font-family: 'Exo', sans-serif;
	font-size: 18px;
	padding-bottom:15px;
}

.add-on-img{
	height: 100px;
}


/* ==== 8) Gallery ==== */

#gallery .thumbnail {
	background: transparent;
	text-align: center;
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
}

.gallery-item {
	padding: 0;
}

.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.gallery-overlay:hover {
	background: rgba(0, 0, 0, .4);
}

.dsproducts-icon-gallery {
	position: absolute;
	top: 50%;
	left: 50%;
	right: 0;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	display: inline-block;
	fill: rgba(255, 255, 255, 0);
	stroke: rgba(255, 255, 255, 1);
	stroke-width: .05em;
	stroke-opacity: 1;
	stroke-linecap: butt;
	stroke-linejoin: bevel;
	stroke-dasharray: 0, 150;
	-webkit-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
	-moz-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
	-ms-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
	-o-transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
	transition: fill 1.5s, stroke-dasharray .75s, stroke-opacity 1.5s ease;
}

.gallery-overlay:hover > .dsproducts-icon-gallery {
	fill: rgba(255, 255, 255, 1);
	stroke-dasharray: 150, 1;
	stroke-opacity: 0;
}

.dsproducts-icon-gallery:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal-backdrop.in {
	-webkit-opacity: 0.8;
	-moz-opacity: 0.8;
	opacity: 0.8;
	background-color: #000;
}

.ekko-lightbox .modal-content {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	border: none;
	background-color: transparent;
}

.ekko-lightbox .modal-header {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
	border: 0;
}

.ekko-lightbox .modal-header .close {
	font-size: 42px;
	font-weight: 100;
	color: #fff;
	text-shadow: none;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	filter: alpha(opacity=100);
	float: none;
}

.ekko-lightbox .modal-header .close:hover {
	-webkit-opacity: .8;
	-moz-opacity: .8;
	opacity: .8;
	filter: alpha(opacity=80);
}

.ekko-lightbox .modal-body {
	padding: 0;
}

.ekko-lightbox .modal-footer {
	-webkit-opacity: 0.9;
	-moz-opacity: 0.9;
	opacity: 0.9;
	border: 0;
	padding: 0;
}
/* ==== 11) Footer ==== */

footer a {
	display: inline-block;
	padding: 10px;
}

footer h4 {
	margin: 0;
}

.dsproducts-icon-info {
	display: inline-block;
	position: relative;
	width: 36px;
	height: 36px;
	fill: #e60000;
}

.dsproducts-icon-info:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*==preloader==*/
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	z-index: 9999;
}

.img-logo-top-preloader{
position:fixed;
left:40%;
top:40%;
height:45px;
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	right: 0;
	width: 70px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.spinner > div {
	width: 18px;
	height: 18px;
	background-color: #e60000;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
	animation: bouncedelay 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0.0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
	0%, 80%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 40% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}
#rectangle{
	width: 70px;
	height:10px;
	background:white;
	margin-bottom:15px;
	
	
}

.support-icon{
max-width:50px;
}

/*====spec=====*/

img.spec1{
position: absolute;
left:70%;
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 100%;
    z-index:1;
    background-color:red;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

img.spec2{
position: absolute;
left:70%;
bottom:10%;
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 100%;
    z-index:1;
    background-color:red;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

img.spec3{
position: absolute;
 left:10%;
bottom:10%;
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 100%;
    z-index:1;
    background-color:red;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);

}
img.spec1:hover{

    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);

}

img.spec2:hover{

    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);

}
img.spec3:hover{

    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);

}

.passion-play-icon{
vertical-align:middle; 
margin:0 auto;
color:white;

}

.passion-play-icon:hover{
vertical-align:middle; 
margin:0 auto;
color:red;

}


/*====svg graphics====**/

/*.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 20px;
  text-align: center;
}
.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #f0f0f0;
  border-radius: 100px;
  line-height: 50px;
}*/

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;

}

/* END Container styles */

/* Colors for the circles and positions for the graphics */

.html + svg .outer {
  stroke: red;
}


img.html{
 top: 50px;
  left: 45px;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
 filter: grayscale(100%);
    }
    
    
img.html:hover{
 top: 50px;
  left: 45px;
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
 filter: grayscale(0%);
    }
    
.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill:none;
  stroke: #333;
  stroke-width: 7px;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart.outer {
  stroke-dashoffset: 534 !important;
  -webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */


/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='75']:hover .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
/* END set initial animation values */

/* Keyframes for the initial animation */

@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}
/* END Keyframes for the initial animation */





@media (max-width:320px) {
	.overlay-desc-passion p{
		font-size:14px;
		line-height:normal;
		
		
	}
	.embed-responsive-16by9{
		padding-bottom: 70%;
	}
	
	video.video-passion.embed-responsive-item{
		padding-top:200px;	
		
	}
	.overlay-desc-passion {
	background: rgba(0,0,0,0);
		position:absolute;
 		 top: 35%; right: 0; bottom: 0; left: 0;
		 text-align:center;
 		color:#FFFFFF;
 		padding-top:0;
		margin:0;
	 		
	}
	.overlay-desc-passion h3{
	margin-top:15%;
	}
	
	.device-container{
text-align:center;
}	
	
 
}



@media (max-width: 767px) and (min-width: 320px) {
	.feature-desc-x1{
		padding-top:0px;
padding-bottom:50px;
justify-content: left;
	}

	
	.overview-padding {
	  padding-bottom:25px;
	}
	
	.support-service-logo {
	  padding-top:40px;
	}
	
	#specs-area {
		text-align: center;
	}
	
	.specs-area-divider {
		padding: 0;
	}
	
	.specs-area-image {
		text-align: center;
	}
	
	.img-specs {
	  float: none;
	}
	
	.squared-content {
		text-align: center;
	}
	

	
	.img-offgrid-left {
		position: relative;
		right: 0;
	}
	.img-offgrid-right {
		position: relative;
		left: 0;
	}
	

	.img2-offgrid-left{
	display:block;
}
	.img1-offgrid-left{
	display:none;
}
	
.overlay-desc-passion p{
		font-size:14px;
		line-height:normal;
		
		
	}
	.embed-responsive-16by9{
		padding-bottom: 70%;
	}
	

	.overlay-desc-passion {
	    background: rgba(0,0,0,0);
		position:absolute;
 		top: 35%; right: 0; bottom: 0; left: 0;
		text-align:center;
 		color:#FFFFFF;
 		padding-top:0;
		margin:0;
	 	flex-direction:column;
	}
	
	.overlay-desc-passion h3{
		margin-top:15%;
	}
	.device-container{
text-align:center;
}	
	
	
}

/*Mobile & Small Tablet*/
@media (max-width: 991px) and (min-width: 768px) {
	.img-specs {
		padding-top:0px; 
	}
	
	#technology {
		padding-top: 0px;
	}
	
	.top-logo-black {
	  margin-top:3px;
	}
	
	.top-image-header {
		max-height: 225px;
		max-width:100%;
	}
	
	#gmap {
		height: 200px;
	}
	
	h1 {
		font-size: 42px;
		letter-spacing: 0;
	}
	
	h2 {
		font-size: 36px;
	}
	
	.service i {
		font-size: 36px;
	}
	
	#intro {
		background-size: contain;
	}
	
	.squared {
		padding-top: 0;
	}
	
	.squared .squared-content {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		transform: translateY(0);
	}
	
	.dsproducts-icon-gallery {
		width: 48px;
		height: 48px;
	}
	
	.divide-md {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.form-group {
		display: inline-block;
	}
	
	.navbar li a {
		padding: 10px 15px !important;
	}
	
	.testimonial blockquote {
		min-height: 0;
	}
	
	.content-image {
		padding-top: 0px;
	}
	
	.img-offgrid-left{
		position: relative;
		right:0%;
	}
	
	.overlay-desc-passion {
 	background: rgba(0,0,0,0);
 	position:absolute;
 	top: 35%; right: 0; bottom: 0; left: 0; 
 	text-align:left;
 	color:#FFFFFF;
 	padding-top:0;
 	margin:0;
	
}
	
	.feature-desc-x1{	
		padding-top:50px;
			padding-bottom:50px;
	}
	.add-on{
		
		padding-left:20px;
		padding-right:20px;
	}
	p.white-text-support{
	font-size:14px;}
	h3.support-h3{
	font-size:16px;
	}
	
	.support-icon{
max-width:40px;
}
.device-container{
text-align:center;
}	
.img1-offgrid-left{
/*position:absolute;
left:10%;	
z-index:200;*/
max-width:80%;
height:auto;
}

}

/*Medium Tablet*/
@media (max-width: 991px) and (min-width: 768px) {
	 header {
    min-height: 100%;
  }
  
  section.cta{
padding-top:0px;

}
  
  .img1-offgrid-left{
/*position:absolute;
left:10%;	
z-index:200;*/
max-width:80%;
height:auto;
}
  header .header-content {
    text-align: left;
    padding: 0;
    height: 40vh;
  }
  header .header-content .header-content-inner {
    max-width: none;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  header .header-content .header-content-inner h1 {
    font-size: 35px;
  }
  header .product-container {
    max-width: none;
    max-height: calc(0vh);
    margin: 100px auto 0;
  }
section.cta .cta-content h2 {
    font-size: 80px;
  }
	.product-img{
	max-height:700px;

.device-container{
text-align:center;
}	
		
	}
	
	.overlay-desc-passion {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 35%; right: 0; bottom: 0; left: 0;
  /*display: flex;*/
 /*align-items: center;*/
 text-align:left;
 color:#FFFFFF;
  padding-top:0;
margin-left:10%;
	flex-direction:column;
}

.support-content{
top:7%;

}
	
}

/*Large Tablet*/
@media (max-width: 1199px) and (min-width: 992px) {
	 header {
    min-height: 100%;
  }
section.cta{
padding-top:0px;

}
  
.video-passion-container{
left:-15%;
}
 
.img1-offgrid-left{
/*position:absolute;
left:10%;	
z-index:200;*/
max-width:80%;
height:auto;
}

header .header-content .header-content-inner h1{
font-size:50px;
font-weight:500;
letter-spacing:1px;
}

  header .product-container {
    max-width: none;
    max-height: calc(0vh);
    margin: 100px auto 0;
  }
section.cta .cta-content h2 {
    font-size: 80px;
  }
	.overlay-desc-passion {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 35%; right: 0; bottom: 0; left: 0;
  /*display: flex;*/
 /*align-items: center;*/
 text-align:left;
 color:#FFFFFF;
  padding-top:0;
margin-left:10%;
	flex-direction:column;
}
}

@media (min-width: 1025px) {
	 header {
    min-height: 100%;
  }
  
  .img1-offgrid-left{
/*position:absolute;
left:10%;	
z-index:200;*/
max-width:80%;
height:auto;
}

section.cta {
padding-top:0px;


}
  .video-passion-container{
left:-10%;
}
  header .header-content {
    text-align: left;
    padding-top:50%;
    padding-bottom:50%;
    height: 100%;
  }
  header .header-content .header-content-inner {
    max-width: 70%;
    margin: 0;
  
  }
  header .header-content .header-content-inner h1 {
   header .header-content .header-content-inner h1{
font-size:50px;
font-weight:500;
letter-spacing:1px;
}

  }
  header .product-container {
    max-width: none;
    max-height: calc(0vh);
    margin: 100px auto 0;
  }
section.cta .cta-content h2 {
    font-size: 80px;
  }
.overlay-desc-passion {
  background: rgba(0,0,0,0);
  position: absolute;
  top: 35%; right: 0; bottom: 0; left: 0;
  /*display: flex;*/
 /*align-items: center;*/
 text-align:left;
 color:#FFFFFF;
  padding-top:10%;
margin-left:10%;
	
}
	
	
}

section {
  padding: 50px 0;
}

section h2 {
  font-size: 26px;
}
 
section.download {
  padding: 150px 0;
  position: relative;
}
section.download h2 {
  margin-top: 0;
  font-size: 50px;
}
section.download .badges .badge-link {
  display: block;
  margin-bottom: 25px;
}
section.download .badges .badge-link:last-child {
  margin-bottom: 0;
}
section.download .badges .badge-link img {
  height: 60px;
}


section.features .section-heading {
  margin-bottom: 100px;
}
section.features .section-heading h2 {
  margin-top: 0;
}
section.features .section-heading p {
  margin-bottom: 0;
}
section.features .product-container,
section.features .feature-item {
  max-width: 300px;
  margin: 0 auto;
}
section.features .product-container {
  margin-bottom: 100px;
}

section.features .feature-item {
  text-align: center;
  margin-bottom: 100px;
}
section.features .feature-item h3 {
  font-size: 30px;
}
section.features .feature-item i {
  font-size: 80px;
  background: -webkit-linear-gradient(to left, #7b4397, #dc2430);
  background: linear-gradient(to left, #7b4397, #dc2430);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section.cta {
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
}
section.cta .cta-content {
  position: relative;
  z-index: 1;
}
section.cta .cta-content h2 {
  margin-top: 0;
  margin-bottom: 25px;
  color: white;
  max-width: 450px;
  font-size: 50px;
}

section .cta-content .overlay {
  height: 25%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
section.contact {
  text-align: center;
}
section.contact h2 {
  margin-top: 0;
  margin-bottom: 25px;
}
section.contact h2 i {
  color: #dd4b39;
}
section.contact ul.list-social {
  margin-bottom: 0;
}
section.contact ul.list-social li a {
  display: block;
  height: 80px;
  width: 80px;
  line-height: 80px;
  font-size: 40px;
  border-radius: 100%;
  color: white;
}
section.contact ul.list-social li.social-twitter a {
  background-color: #1da1f2;
}
section.contact ul.list-social li.social-twitter a:hover {
  background-color: #0d95e8;
}
section.contact ul.list-social li.social-facebook a {
  background-color: #3b5998;
}
section.contact ul.list-social li.social-facebook a:hover {
  background-color: #344e86;
}
section.contact ul.list-social li.social-google-plus a {
  background-color: #dd4b39;
}
section.contact ul.list-social li.social-google-plus a:hover {
  background-color: #d73925;
}
footer {
  background-color: #222222;
  padding: 25px 0;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}
footer p {
  font-size: 12px;
  margin: 0;
}
footer ul {
  margin-bottom: 0;
}
footer ul li a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}
footer ul li a:hover,
footer ul li a:focus,
footer ul li a:active,
footer ul li a.active {
  text-decoration: none;
}
.bg-primary {
  background: #fdcc52;
  background: -webkit-linear-gradient(#fdcc52, #fdc539);
  background: linear-gradient(#fdcc52, #fdc539);
}
.text-primary {
  color: #fdcc52;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.btn-outline {
  color: #e60000;
  border-color: #e60000;
  border: 1px solid;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
	background-color: #e60000;
	color: #fff;
  border-color: #e60000;
}
.btn {
  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 300px;
}
.btn-l {
  padding: 14px 35px;
  font-size: 16px;
	font-weight: 700;
	line-height: 1;
	margin: 5px 5px;
}

.btn-lrn-outline {
  background:#e60000;
	font-family: 'Lato', sans-serif;
	color:#ffffff;
}
.btn-lrn-outline:hover,
.btn-lrn-outline:focus,
.btn-lrn-outline:active,
.btn-lrn-outline.active {
	background:#fc1515;
	color: #fff;
}


::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  -webkit-tap-highlight-color: #222222;
}