/*============= RESETS =============
1. font-family: 'Raleway', sans-serif;
2. font-family: 'Atma', cursive;
3. font-family: 'Life Savers', cursive; 
4. font-family: DK Crayon Crumble */

@font-face {
font-family: "DK Crayon Crumble";
src: url("css/fonts/DK Crayon Crumble.ttf");
src:
url("fonts/DK Crayon Crumblewoff") format("woff"),
url("fonts/DK Crayon Crumble.ttf") format("opentype"),
url("fonts/DK Crayon Crumble.svg#filename") format("svg");
}


/*-- iPhone X Remove Gutters --*/
html{
   padding: env(safe-area-inset);
} 

/*-- Prevent Horizontal Scrolling & Font Style --*/
html, body {
   overflow-x: hidden; 
   font-family: 'Raleway', sans-serif;   
   color:#000;    
}

a, img, .btn, .example-image{
   cursor:pointer;
}

/* Social Links */
 /* Style all font awesome icons */
 #contact .fa {
   padding: 20px;
   font-size: 30px;
   width: 30px;
   text-align: center;
   text-decoration: none;
   border-radius: 50%;
 }
 
 /* Add a hover effect if you want */
 #contact .fa:hover {
   opacity: 0.7;
 }
 
 /* Set a specific color for each brand */
 
 /* Facebook */
 #contact .fa-facebook {
   background: #3B5998;
   color: white;
 }
 
 /* Twitter */
 #contact .fa-twitter {
   background: #55ACEE;
   color: white;
 } 

 #contact .social li {    
   height:50px;
   float:left;  
   list-style-type: none;       
 }

 #contact .social a{   
   padding-right:1rem;
 }  
/* eof social links */

.text-glife{
   color:#7ABC1D;
}

.text-olife{
   color:#FF6600;
}

.text-ylife{
   color:#F8F662;
}

.text-blife{
   color:#000;
}

.text-llife{
   color:#505962;
}

/* Videos Modal */
#myModal1, #myModal2, #myModal3, #myModal4{
   margin:8% auto;	
}

/* Products Modal*/
#output{
   clear:both;			   
   text-align: right;      
}

.inverse{
   background-color:#000;
   color:#fff;
}

.right{
   text-align: right;
}

/* Products */
#checkoutdiv{
   display:inline-block;
}

/* Modal Defaults */
.modal-dialog{
   margin:20% auto !important;  
}

.modal-header{   
   width:100% !important;
}

.modal-body{
   background-color:#fff;
}

.modal-content iframe{			
   margin: 0 auto;				
   display: block;	
   border:2px solid #000;	
   border-radius:10px;		
}	

table td, table th{
   padding:2px 10px;
   text-align: left;
}

.bs-example .btn{
   border:2px solid #ffac00;				
}	

.ml-6{
   margin:5rem auto;				
}	

/*--- Nav Scrolling Offset --*/
.offset:before{
   content: "";
   height:4rem;
   display:block;
   margin-top:-4rem;   
}

/*--- Extra Bootstrap Column Padding --*/ 
[class*="col-"] {
   padding:1rem;   
}

/*============= NAVIGATION =============*/
.navbar-brand img{
   height:2rem;  
   padding-bottom:1rem;
   width:100px;   
}

.navbar{
   padding: .7rem 3rem;
   text-transform: uppercase;
   font-weight: 700; 
   letter-spacing: .1rem;
   font-size:.9rem;
   transition: background-color 0.5s ease;
}

.navbar-nav li{
   padding-right: .8rem;
}

.navbar-nav .nav-link{
   color:#fff;
   padding-top: .8rem;   
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{
   color: #F8F662;
}

.custom-toggler-icon{
   color:white;
   font: size 1.6rem !important;   
}

/* nav background */ 
.navbar.solid, .navbar.solid-toggle{
   background:rgba(0, 0, 0, .7)!important;
   transition: background-color 1s ease;
}

/*-- Remove Button Outline --*/
button:focus, a:focus{
   outline: 0;
   -webkit-appearance: none;
   box-shadow:none;
   transition: all .6s ease;
}

button, a, a.btn{
   transition: all .6s ease;   
}

/* Buttons */
.btn-sm{
   border-width: medium;
   border-radius:0;
   padding:.5rem 1.1rem;
   text-transform: uppercase;
   font-size:.9rem;
   margin:1rem;
}

.btn-glife{
   background-color:#7ABC1D;
   color:#fff;
}

.btn-glife:hover{
   background-color:#189582;
   color:#fff;   
}

.btn-olife{
   background-color:#FF6600;
   color:#fff;
}

.btn-olife:hover{
   background-color:#189582;
   color:#fff;   
}

.btn-ylife{
   background-color:#F8F662;
   color:#fff;
}

.btn-ylife:hover{
   background-color:#189582;
   color:#fff;   
}

.btn-blife{
   background-color:#000;
   color:#fff;
}

.btn-blife:hover{
   background-color:#189582;
   color:#fff;   
}

.btn-llife{
   background-color:#505962;
   color:#fff;
}

.btn-llife:hover{
   background-color:#189582;
   color:#fff;   
}

/*============= LANDING PAGE =============*/

/*--- Fixed Landing Page Section --*/
.landing {
   position: relative;
   width: 100%;
   height: 100vh;
   display: table;
   z-index: -1;
}
.home-wrap {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
}

.home-inner{
   background-image: url('../img/slide1.jpg');
   margin-left:1rem !important;
   position: fixed;
   height: 100vh !important;
   width: 100%;
   background-size: cover;
   background-position: center center;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
   display: table;
}

/*-- Landing Page Caption --*/ 
.caption {
   z-index: 1;
   position: absolute;
   top: 35%;
   width: 100%;
   max-width: 100%;   
}

.caption h1 {
   font-size: 4.5rem;
   letter-spacing: .3rem;
   text-shadow: .1rem .1rem .8rem black;
   padding-bottom: 1rem;
}
.caption h3 {
   font-size: 2.5rem;
   text-shadow: .1rem .1rem .5rem black;
   padding-bottom: 2rem;
}
.caption .btn-lg {
   border-width: medium;
   padding: .8rem 1.5rem;
   font-size: 1.1rem;
}

.btn-outline-light{   
   color:#fff;
   font-family:'DK Crayon Crumble', Arial, sans-serif;
   font-size:1.5rem !important;
}

.btn-outline-light:hover{
   background-color:transparent;
   border-color:#7ABC1C;
   color:#7ABC1C;
   font-family:'DK Crayon Crumble', Arial, sans-serif;
   font-size:1.5rem !important;
}

.btn-outline-dark{
   font-family:'DK Crayon Crumble', Arial, sans-serif;
   font-size:1.3rem !important;
}

.btn-warning{
   font-family:'DK Crayon Crumble', Arial, sans-serif;
   font-size:1.5rem !important;
}

.btn-success{
   font-family:'DK Crayon Crumble', Arial, sans-serif;
   font-size:1.5rem !important;
}
 
/*-- Bouncing Down Arrow --*/
.arrow {
   position: absolute;
   bottom: 0;
   width: 100%;
   animation: bounce 2s infinite;
   -webkit-animation: bounce 2s infinite;
}
.down-arrow .svg-inline--fa {
   color: white;
   font-size: 2.2rem;
   opacity: .3;
}
.down-arrow .svg-inline--fa:hover {
   opacity: .5;
}
/*-- Bouncing Down Arrow --*/

/* About Section */
#about{
   margin-top:0rem !important;
}

/* sub-container */
.about{
   margin-top:4rem;  
}
/* eof */

#about .web_title{
   display:none !important
}

#about .mob_title{
   display:inline-block !important;   
   width:95% !important;   
}

#about .jumbotron {
   margin-top:1.5rem !important;
}

#about .web_content{
   display: none !important;
}

#about .ipad_content{
   display: none !important; 
}

#about .mob_content{
   display: inline-block !important; 
}

#story{
   margin-top:-8.0rem;
}

#story .web_title{
   display:none !important;
}

#story .mob_title{
   display:inline-block !important;
   margin-top:-6rem;
   margin-left:-1.6rem;
   width:115% !important;   
}

#story .mob_lcontent{
   display:inline-block !important;
   margin-top:-5rem; 
   margin-left:-1rem;    
}

#story .web_lcontent{
   display: none !important;
}

#story .mob_road{   
   margin-top:-14rem;
   margin-left:-2rem;   
   width:115%;
   z-index: 1 !important;
}

#story .web_road{
   display:none !important;
}

#story .mob_rcontent{
   display:inline-block !important;
   margin-top:-3rem; 
   margin-left:-1rem; 
   z-index: -1 !important;   
}

#story .web_rcontent{
   display: none !important;
}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:100% !important;
   height:500px !important;      
}
/* eof */

#videos .web_title{
   display: none !important;   
}

#videos .mob_title{
   display:inline-block !important;
   width:95%;
   margin-top:-6rem;
}

#products .web_title{
   display:none !important;
}

#products .mob_title{   
   display:inline-block !important;
   width:100% !important;
   margin-left:0.5rem !important;
}

#products .items, .total{
   font-size:120% !important;
}

#gallery{
   position:relative;     
}

#gallery .web_title{
   display:none;
}

#gallery .mob_title{
   display:inline-block !important;
   width:85% !important;
}

#contact .web_title{
   display:none;
}

#contact .mob_title{
   display:inline-block !important;
   width:110% !important;
   margin-left:-1rem !important;
}

/*============= FEATURES SECTION =============*/
h3.heading {
   text-transform: uppercase;
   font-weight: 700;
   font-size: 1.9rem;
   text-align: center;
   margin-bottom: 1.9rem;
}

/*===== FIXED BACKGROUND IMG DARK =====*/
.fixed-landing{ /* Home pg  */
   position: relative;   
   width: 100%;   
}

.fixed { /* Videos pg  */
   position: relative;
   background-image: url('../img/videos/wallpaper.png');
   background-size:cover;
   width: 100%;   
   height:100vh !important;   
}

.fixed-wrap {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   height: 100vh;
   width: 100%;
   top: 0;
   left: 0;
   z-index: -9999;   
}
.fixed-dark {   
   position: fixed;
   height: 100%;
   width: 100%;
   background-size: cover;
   background-position: center center;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   will-change: transform;
   z-index: -1;
   top: 5rem;
   left: 0;
   display: table;
}
.dark {
   background-color: rgba(0, 0, 0, .3);
   padding: 7rem 0;
   z-index: 1000;
}

.dark-landing {
   background-color: rgba(0, 0, 0, .4);   
   z-index: 1000;
}

/*--- iOS Fixed Background Image --*/

/*============= PRODUCTS SECTION =============*/
#products .container-fluid{
   background-image: url('../img/products/wallpaper.png');
   background-size:cover;
}

#products .img{
   width:70% !important;   
   margin:5rem 2rem;   
}

.product-item{
   overflow: hidden;
}

.product-item img:hover {
   transform: scale(1.3);
   cursor: zoom-in;
}
.product-item img {
   transition: transform .4s ease;
}


/*============= PRICING SECTION =============*/


/*============= TEAM SECTION FIXED BG IMG LIGHT =============*/

/*--- Team Light Background Image --*/


/*============= SKILLS SECTION =============*/


/*============= CLIENTS SECTION =============*/


/*============= CONTACT SECTION =============*/
hr.socket {
   border-top: .1rem solid #666b71;
   width: 100%;
}

form{
   background-color:#fff;
}

.form-group{
   margin-bottom:1.3rem;
}

.form-control{
   border-radius:.25rem;
   border:.05rem solid #666b71;
}

.gap{
   margin-top:4rem;
}

/*--- Contact Form --*/


/*============= TOP SCROLL =============*/


/*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */


/* Devices under 768px (md) */


/* Devices under 576px (sm) */



/*============ BOOTSTRAP BREAK POINTS: 

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap */

/* Small (sm) devices (landscape phones, 576px and up) */

@media (max-width: 576px) {  
#story .mob_lcontent{
   width:120% !important;
   margin-left:-2.75rem !important;   
}
      
#story .mob_rcontent{   
   margin-left:0rem !important;   
}

#products .example-image{
   margin-left:3.5rem !important;
}
   
#gallery{
   position:relative;   
} 
}

@media (max-width: 414px){   
#gallery{
   position:relative;  
}  
} 

@media (max-width: 375px){  
#story .mob_lcontent{
   width:120% !important;
   margin-left:-2.3rem !important;   
}
   
#story .mob_rcontent{   
   margin-left:-1.6rem !important;   
}

#gallery{
   position:relative;   
} 
   
}

@media (max-width: 360px) { 
#gallery{
   position:relative;   
} 

}

/* Medium (md) devices (tablets, 768px and up) */
@media (min-width: 768px) {  
   /* Home Section */
.caption {
   z-index: 1;
   position: absolute;
   top: 25%;
   width: 100%;
   max-width: 100%;
   padding:5rem;   
}
   /* About Section */
#about{
   margin-top:0rem !important;
}

#about .web_title{
   display: inline-block !important;
   margin-left:-1.5rem;
}

#about .mob_title{
   display: none !important;
}

#about .mob_content{
   display: none !important;
}

#about .ipad_content{
   display: inline-block !important;
}

#about .web_rcontent{
   display: none !important;  
}

#story .web_title{
   display:inline-block !important
}

#story .mob_title{
   display:none !important;    
}

#story .mob_lcontent{   
   margin-top:-4rem; 
}

#story .web_road{
   width:250%;
   margin-top:25rem;
   margin-left:-10rem;   
}

#story .mob_road{   
   display: none !important;
}

#story .web_road{
   display:inline-block !important;
   width:350% !important;
   margin-top:26rem;
   margin-left:-25rem !important;
}

#story .mob_rcontent{   
   margin-top:-5.5rem;
   margin-left:9rem !important;     
}

#videos .web_title{
   display:inline-block !important;
   width:90%;
}

#videos .mob_title{
   display:none !important;
}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:400px !important;
   height:400px !important;   
}
/* eof */

#blog{
   position:relative;
   margin-top:8rem !important;
}

#products .web_title{
   display:none !important;
}

#products .mob_title{   
   display:inline-block !important;
   width:80% !important;
}

#products .product-item img{
   margin-left:3.5rem !important;
}

#gallery{
   position:relative;   
}

#gallery .web_title{
   display:none !important;
}

#gallery .mob_title{
   display: inline-block !important;
}

#contact{
   margin-top:2rem !important;
}

#contact .web_title{
   display:none !important;
}

#contact .mob_title{
   display: inline-block !important;
}

}

/* Large (lg) devices (desktops, 992px and up) */
@media (min-width: 992px) { 
#story .web_road{
   width:220%;
   margin-top:0rem;
   margin-left:-10rem;      
}

#videos .web_title{
   display:inline-block !important;
   width:65% !important;
}

#videos .mob_title{
   display:none !important;
}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:400px !important;
   height:400px !important;    
}
/* eof */

#product .web_title{
   display:inline-block !important;   
}

#product .mob_title{
   display:none !important;
}

#gallery{
   position:relative;   
}

#gallery .web_title{
   display:inline-block !important;   
}

#gallery .mob_title{
   display:none !important;
}

#contact{
   margin-top:5rem !important;
}

#contact .web_title{
   display:inline-block !important;   
}

#contact .mob_title{
   display: none !important;
}

}

/* Extra (xl) large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  /* Home Section */
.caption {   
   top: 10%;    
}

#about{
   margin-top:0rem !important;
}
   /* Story Section */
#story{
   margin-top:-5rem; 
}

#about .jumbotron{
   margin-top:2rem !important;
}

#story .mob_lcontent{   
   margin-top:11rem !important; 
   margin-left:-9rem !important;
}

#story .web_road{
   width:325% !important;
   margin-left:-23rem !important;
}

#story .mob_rcontent{  
   margin-top:-9rem !important; 
   margin-left:29rem !important;   
}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:500px !important;
   height:400px !important;   
}
/* eof */

#videos .web_title{
   display:inline-block !important;
   width:65% !important;
}

#videos .mob_title{
   display:none !important;
}

#blog{
   position:relative;
   margin-top:8rem !important;
}

#products .mob_title{   
   display: none !important;
}

#products .web_title{
   display:inline-block !important;
   width:80%;
}

#gallery{
   position:relative;   
}

#gallery .web_title{
   display:inline-block !important;
}

#gallery .mob_title{
   display: none !important;
}

#contact{
   margin-top:5rem !important;
}

#contact .web_title{
   display:inline-block !important;
   width:65% !important;
}

#contact .mob_title{
   display: none !important;
}

}

@media (min-width: 1320px) {
#about{
   margin-top:0rem !important;
}

#story .mob_rcontent{  
   margin-top:-8rem !important;     
   margin-left:35rem !important; 

}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:600px !important;
   height:500px !important;   
}
/* eof */

#videos .web_title{
   display:inline-block !important;
   width:45% !important;
}

#videos .mob_title{
   display:none !important;
}

#blog{
   position:relative;
   margin-top:8rem !important;
}

#products .web_title{
   display:inline-block !important;
   width:65% !important;
}

#gallery{
   position:relative;  
}

#gallery .web_title{
   display:inline-block !important;
}

#gallery .mob_title{
   display: none !important;
}

#contact .web_title{
   display:inline-block !important;
   width:65% !important;
}

#contact .mob_title{
   display: none !important;
}

}

@media (min-width: 1420px) { 
#about{
   margin-top:0rem !important;
}

#story .mob_rcontent{      
   margin-left:40rem !important;     
}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:700px !important;
   height:600px !important;   
}
/* eof */

#videos .web_title{
   display:inline-block !important;
   width:45% !important;
}

#videos .mob_title{
   display:none !important;
}

#blog{
   position:relative;
   margin-top:8rem !important;
}

#products .web_title{
   display:inline-block !important;
   width:65% !important;
}

#gallery{
   position:relative;
   */margin-top:-7rem !important;*/
}

#gallery .web_title{
   display:inline-block !important;
}

#gallery .mob_title{
   display: none !important;
}

#contact{
   position:relative;
   margin-top:7rem !important;
}

#contact .web_title{
   display:inline-block !important;
   width:65% !important;
}

#contact .mob_title{
   display: none !important;
}
   
}

@media (min-width: 1824px) { 
  /* Home Section */
.caption {   
   top: 12%;    
}

   /* About Section */
#about{
   margin-top:0rem !important;
}

#about .mob_content{
   display: none !important;
}
   
#about .ipad_content{
   display: none !important;
}
   
#about .web_content{
   display: inline-block !important;  
}

#story .mob_lcontent{   
   margin-top:14rem !important;    
}

#story .web_road{
   margin-top:2rem !important;
   width:260% !important;
}

#story .mob_rcontent{ 
   margin-top:-10rem !important;     
   margin-left:55rem !important;   
}

/* IFrames */
#eVideo1, #eVideo2, #eVideo3, #eVideo4{
   width:700px !important;
   height:600px !important;   
}
/* eof */

#videos .web_title{
   display:inline-block !important;
   width:45% !important;   
}

#videos .mob_title{
   display:none !important;   
}

#blog{
   position:relative;
   margin-top:5rem !important;
}

#products{
   margin-top:0rem !important;
}

#products .web_title{
   margin-top:5rem !important;
   display:inline-block !important;
}

#gallery{
   position:relative;   
}

#gallery .web_title{
   margin-top:2rem !important;
   display:inline-block !important;
}

#gallery .mob_title{
   display: none !important;
}

#gallery img:hover{
   cursor:pointer;
}

#contact{
   position:relative;
   margin-top:9rem !important;  
}

#contact .web_title{
   display:inline-block !important;
   width:65% !important;
}

#contact .mob_title{
   display: none !important;
}

}



/* ============= */