@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC&family=Cairo&family=Fredericka+the+Great&family=KoHo&family=Libre+Baskerville&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+SC&display=swap');

html, body {width: auto!important; overflow-x: hidden!important} 


body, html {
    margin: 0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
  
    background-color:#000;
   
}




.navbar-inverse {
    background-color:  rgba(0,0,0, 0.6);
    border-color: transparent;
    font-family: 'Encode Sans SC', sans-serif;
    font-size:18px;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color: #07a1f3;
    background-color:  rgba(0,0,0, 0.6);
    
}

.navbar-inverse .navbar-nav > li > a {
    color: #07a1f3;
}

.dropdown-menu {
    background-color:  rgba(0,0,0, 0.6);
}

.dropdown-menu > li > a {
        color: #07a1f3;
}

p { 
    font-size:12pt;
}

.nav1:hover, .nav2:hover, .nav3:hover {
    background-color:#333;
    box-shadow: 0px 0px 5px #fff;
    
}

.nav1 {
    position: fixed;
    right: 10px;
    width:50px;
    background-color:#210051;
    height:230px;
    z-index:2;
    color: #fff;
    text-align: center;
}

.nav2 {
    position: fixed;
    right: 70px;
    width:50px;
    background-color:#390082;
    height:270px;
    z-index:2;
    color: #fff;
    text-align: center;
}

.nav3 {
    position: fixed;
    right: 130px;
    width:50px;
    background-color:#070029;
    height:310px;
    z-index:2;
    color: #fff;
    text-align: center;
}

.navdown {
    position: absolute;
    bottom: 0;
    text-align: center;
}

    .main_heading_1 {
        font-family: 'Cairo', sans-serif;
        font-size:10vw;
        
    }
    
     .main_heading_2 {
        font-family: 'KoHo', sans-serif;
        font-size:11vw;
        
    }   
    
    p.caption_exlarge {
        font-size:4vw;
    }
    
   .icon_w {
       margin-top:50px;
        color:white; 
        width:100%;
        height:100%;
        border: 1px solid #fff;
        border-radius:50% 50%;
        margin-bottom:50px;
        text-align:center;

        
    }
    
    .caption_container_blue {
        padding-top: 50px;
        padding-bottom:50px;
        padding:20px;
        background-image: linear-gradient( 109.6deg,  rgba(48,207,208,1) 11.2%, rgba(51,8,103,1) 92.5% );        
        color:#fff;
        text-align:right;
        vertical-align:middle;
        height:600px;
        
    }
    
 .caption_container_red {
        padding:20px;
        padding-top:50px; 
        padding-bottom:50px;
        background-color: #4158D0;
        background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #ffffff 100%);
        text-align:right;
        height:600px;
        
    }
    video {
        background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);        color:#fff;

    }


/* Scrolling Images */ 
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .dashboard_bgimg_1, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13, .bgimg-14, .bgimg-15, .bgimg-16, .bgimg-17, .bgimg-18, .bgimg-19, .bgimg-20  {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} 

.vidbg-1 {
    
        position: relative;
}

.bgimg-20 {
        background-image: url("../pics/backgrounds/r_background13.jpg");
        min-height: 800px;
}

.bgimg-19 {
        background-image: url("../pics/backgrounds/r_background12.jpg");
        min-height: 800px;
}

.bgimg-18 {
        background-image: url("../pics/backgrounds/r_background8.jpg");
        min-height: 800px;
}

.bgimg-17 {
        background-image: url("../pics/backgrounds/r_background7.jpg");
        min-height: 800px;
}

.bgimg-16 {
        background-image: url("../pics/backgrounds/r_background6.jpg");
        min-height: 800px;
}


.bgimg-15 {
        background-image: url("../pics/backgrounds/r_background5.jpg");
        min-height: 800px;
}

.bgimg-14 {
        background-image: url("../pics/backgrounds/r_background4.jpg");
        min-height: 800px;
}


.bgimg-13 {
        background-image: url("../pics/backgrounds/r_background3.jpg");
    min-height: 800px;
}

.bgimg-12 {
        background-image: url("../pics/backgrounds/r_background10.jpg");
    min-height: 800px;
}

.bgimg-11 {
        background-image: url("../pics/backgrounds/r_background1.jpg");
    min-height: 800px;
}
.bgimg-1 {
    background-image: url("../pics/bee1.jpg");
    min-height: 800px;
  /*background-position-x: 0%;
    background-position-y: 0%;
    -webkit-animation: zoomin 100s 1;
    z-index:1; */
}

/* @-webkit-keyframes zoomin {
    90% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

} */

.bgimg-2 {
    background-image: url("../pics/books1.jpg");
    min-height: 640px;
}

.bgimg-3 {
    background-image: url("../pics/piano.jpg");
    min-height: 640px;
}

.bgimg-4 {
    background-image: url("../pics/scope.jpg");
    min-height: 640px;
}

.bgimg-5 {
    background-image: url("../pics/cactus.jpg");
    min-height: 640px;
}

.bgimg-6 {
    background-image: url("../pics/indifferent_bg.jpg");
    min-height: 640px;
}

.bgimg-7 {
    background-image: url("../pics/happy_bg.jpg");
    min-height: 640px;
}

.bgimg-8 {
    background-image: url("../pics/tire_large.jpg");
    min-height: 640px;
}

.bgimg-9 {
    background-image: url("../pics/yos_large.jpg");
    min-height: 640px;
}

.bgimg-10 {
    background-image: url("../pics/sunflower_background.jpg");
    min-height: 640px;
}

.vidbg-1 {
    
    min-height: 640px;
}

.bg-sunflower{
        background-image: url("../pics/sf_full.jpg");
 min-height: 2400px;
     /*
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;*/
    background-size: cover;
}


.dashboard_bgimg_1 {
  background-image: url("../pics/dashboards.png");
  min-height: 640px;
}


/* p */ 
.caption_large {
    
    font-size:20pt;
}

.caption_med {
    
    font-size:16pt;
}

/* containers */
.caption_container {
    background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.9);
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    padding:10px;
    width:100%;
    text-align: left;
    color: #fff;
     box-shadow: 0px 0px 20px black;
     opacity:0.9;


    
}

.img_thumb:hover {

}





.title_container {
    position:absolute;
    right:10px;
    top:50px;
    
}

.caption_container_dark {
    background: rgb(0, 0, 35); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 3, 0.8);
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    margin-left:40px;
    padding-right:40px;
    padding-left:40px;
    padding-top:50px;
    padding-bottom:50px;
    width:100%;
    text-align: left;
    color: #fff;
      opacity:0.9;


    
}

.caption_container_clear {
    

   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    padding:40px;
    width:100%;
    text-align: left;
    color: #fff;
}

#canvas {
  position: relative;
  width: 100vw;
  height: 500px;
  top: 0;
  left: 0;
}
h1.secret_words {
  color: #533f83;
  position: absolute;
  font-size: 10vw;
  line-height: 100vh;
  margin: 0;
  pointer-events: none;
}

.secret_container {
  min-height: 500px;
  background: var(--fg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
:root {
  --fg: #f5dd00;
  --bg: #533f83;
}
                
.ParallaxVideo {
background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);    
}

.ParallaxVideo video { 
    position: relative; 
    background-attachment: fixed;
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: 10;
    opacity:0.6;
} 

.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}      


.caption_container_narrow {
    background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
    /*background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);*/
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    
    position:static;
    right:0px;
    padding:20px;
    width:70%;
    text-align: left;
    color: #000;
    box-shadow: 0px 0px 20px black;
      opacity:0.9;

    
}

.caption_container_light {
    /*background-color:#eceff1;*/
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    padding:60px;
    width:100%;
    text-align: left;
    color: #333;
       
    box-shadow: 0px 0px 20px black;
    height: 600px;
    display: table-cell;
    vertical-align: middle;
    
}

.caption_container_narrow_text {
    background-color:#333;
   /* background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);*/
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    padding:10px 100px 20px 100px;
  
    width:100%;
    text-align: left;
    color: #fff;
       opacity:0.7;
}

.caption_container_black_full {
   background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    padding:20px;
    width:100%;
    text-align: left;
    color: #fff;
    

    
}

.caption_container_black {
   background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.8);
  
   /* border: 1px solid #777;
    border-radius:5px; */
    /*margin-left:10px;*/
    padding:60px;
    width:100%;
    text-align: left;
    color: #fff;
    border-radius:10px; box-shadow: 0px 0px 5px black;
    

    
}

.words {
    color:#fff;
    box-shadow: 0px 0px 20px black;

    background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
    text-align: left;
    z-index:10;
    position:relative;
    padding-top:50px;

}

.caption_container_graidient_2 {
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);

}

.caption_container_graidient {
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
    background-blend-mode: multiply,multiply;
    color:#fff;
 
}


.thumbnail {
    background-color:#eee;
    color:#fff;
}

.thumbnail:hover {
    background-color:#333;
    color:#fff;
}

.caption span.border {
    color: #fff;
    font-size: 25px;
    letter-spacing: 10px;
  
}

h3 {
    letter-spacing: 5px;
    text-transform: uppercase;

 
}

h2 {
    letter-spacing: 5px;
    text-transform: uppercase;

 
}

.title {
   color:#999; 
   margin-right:20px;
}
	
.navbar {
	margin-bottom: 0px !important;
 
}
	
	
.btn-default {
    color: #333 !important;
    background-color: #e0e0e0 !important;
    border-color: #333  !important;
}

.btn-default:hover {
    color: #333 !important;
    background-color: #ffffff !important;
    border-color: #333 !important;
}	
	
.btn-primary {
    color: #333 !important;
    background-color: #29bbfe !important;
    border-color: #333  !important;
}

.btn-primary:hover {
    color: #333 !important;
    background-color: #078ad0 !important;
    border-color: #333 !important;
}		



.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding:10px;
    color: white;
    text-align: left;
    background-color:transparent;
    z-index:11;
}


/* no mobile display of thumbnails on desktop */
.m_images {
    display:none;
}

.nostyle:hover {
    text-decoration:none;
}

.bs-glyphicons {
    margin-right: 0;
    margin-left: 0;
      color:#fff;
}

.bs-glyphicons {
    margin: 0 -10px 20px;
    margin-right: -10px;
    margin-left: -10px;
    overflow: hidden;
}

.bs-glyphicons-list {
     padding-left: 0;
    list-style: none;
}

.bs-glyphicons li {
    float: left;
    width: 25%;
    height: 80px;
    padding: 10px;
    font-size: 12px;
    line-height: 2;
    text-align: left;
    background-color: #000;
    border: 1px solid #fff;
    vertical-align:center;
}
.bs-glyphicons .glyphicon {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 30px;
}


.square1, .square2, .square3, .square4, .square5, .square6, .square7, .square8, .square9 {
  width: 200px;
  height:200px;
  /*border:1px solid #000;*/ 
  text-align:center;
  font-size:18pt;
  border-radius:50%;

  box-shadow: inset 10px 20px 10px 0px rgba(255,255,255, 0.8);
  opacity:.8;
  display: table-cell;
  vertical-align:middle;
  color:#333;

}


.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}


.stage {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
 
}

/*.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}*/

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
 
}

.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  filter: blur(5px);
  z-index: 2;
}
.hidden{
display:none;
}

.ball1:before, .ball2:before, .ball3:before, .ball4:before, .ball5:before   {
      background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);

}

.ball1 {
      background: radial-gradient(circle at 50% 120%, #5e35b1, #8e24aa 10%, #3f51b5 80%, #b71c1c 100%);

}

.ball1:hover, .ball2:hover, .ball3:hover, .ball4:hover, .ball5:hover  {
      background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #fff59d 80%, #bdbdbd 100%);
      transition: 1s;
}

.ball2 {
      background: radial-gradient(circle at 50% 120%, #311b92, #303f9f 10%, #1976d2 80%, #4a148c 100%);

}

.ball3 {
      background: radial-gradient(circle at 50% 120%, #311b92, #00796b 10%, #0097a7 80%, #0097a7 100%);

}

.ball4 {
      background: radial-gradient(circle at 50% 120%, #311b92, #ff6f00 10%, #ffeb3b 80%, #fff9c4 100%);

}

.ball5 {
      background: radial-gradient(circle at 50% 120%, #311b92, #bf360c 10%, #ff5722 80%, #fbe9e7 100%);

}




.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
/*animation slide left styled for testimonials*/

.animation-element.slide-left.testimonial {
  float: left;
  width: 47%;
  margin: 0% 1.5% 3% 1.5%;
  background: #F5F5F5;
  padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
  border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.animation-element.slide-left.testimonial:nth-of-type(odd) {
  width: 48.5%;
  margin: 0% 1.5% 3.0% 0%;
}

.animation-element.slide-left.testimonial:nth-of-type(even) {
  width: 48.5%;
  margin: 0% 0% 3.0% 1.5%;
}

.animation-element.slide-left.testimonial .header{
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.animation-element.slide-left.testimonial .left{
  float: left;
  margin-right: 15px;
}
.animation-element.slide-left.testimonial .right{
  float: left;
}

.animation-element.slide-left.testimonial img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
}

.animation-element.slide-left.testimonial h3 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial h4 {
  margin: 0px 0px 5px 0px;
}

.animation-element.slide-left.testimonial .content {
  float: left;
  width:100%;
  margin-bottom: 10px;
}

.animation-element.slide-left.testimonial .rating{}

.animation-element.slide-left.testimonial i {
  color: #aaa;
  margin-right: 5px;
}

#canvas {
  position: relative;
  width: 100vw;
  height: 500px;
  top: 0;
  left: 0;
}
h1.secret_words {
  color: #533f83;
  position: absolute;
  font-size: 10vw;
  line-height: 100vh;
  margin: 0;
  pointer-events: none;
}

.secret_container {
  min-height: 500px;
  background: var(--fg);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
:root {
  --fg: #f5dd00;
  --bg: #533f83;
}
                
.ParallaxVideo {
background-image: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);    
}

.ParallaxVideo video { 
    position: relative; 
    background-attachment: fixed;
    top: 0; left:0;
    width: 100%; height: 100%; 
    z-index: 10;
    opacity:0.6;
} 

.ParallaxVideo h1 {
  color: #fff;
  font-size: 76px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}      


/*media queries for small devices*/
@media screen and (max-width: 678px){
  /*testimonials*/
  .animation-element.slide-left.testimonial,
  .animation-element.slide-left.testimonial:nth-of-type(odd),
  .animation-element.slide-left.testimonial:nth-of-type(even){
    width: 100%;
    margin: 0px 0px 20px 0px;
  }
  .animation-element.slide-left.testimonial .right,
  .animation-element.slide-left.testimonial .left,
  .animation-element.slide-left.testimonial .content,
  .animation-element.slide-left.testimonial .rating{
    text-align: center;
    float: none;
  }
  .animation-element.slide-left.testimonial img{
    width: 85px;
    height: 85px;
    margin-bottom: 5px;
  }
  
  
  
}



@media only screen and (max-device-width: 1024px) {
    
     body {
    font-size: 1.0em;
    
  }
  
  p.writeup {
      font-size:18px;
  }
    
      p.caption_exlarge {
        font-size:20px;
    }
    
    .secret_container {
        display:none;
    }
    
    h2 {
        font-size:25px;
    }
    
    .center_align {
        text-align:center;
    }
    
   .stage {
        width:150px;
        height:150px;
    }

    .glyphicon-class {
        display:none;
    }
    
  .caption_container_dark, .caption_container_narrow, .caption_container_clear,  .caption_container_narrow_text, .caption_container_black {   
      margin-left:0px;
      width:100%;
      padding:10px;
     
  }
    
  .caption_container, .caption_container_light {
      padding:10px;
      padding-top:50px;
      padding-bottom:50px;
  }
  
    .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13, .bgimg-14, .bgimg-15, .bgimg-16, .bgimg-17, .bgimg-18,  .bgimg-19, .bgimg-20 {
        background-attachment: scroll;
    }
   
    .bgimg-1 {
        background-image: url("../pics/bee1.jpg");
        min-height: 640px;
    }

    .bgimg-4 {
        background-image: url("../pics/scope2.jpg");
        min-height: 480px;
    }

    .d_images {
        display:none;
    }
    
    .m_images {
        display:block;
    }
    
    .sidebar {
        display:none !important;
        
    }
    
    .m_buttons {
        
        display:none;
    }
    
    .nav1 {
        position: fixed;
        right: 10px;
        bottom: 0px !important;
        width:50px;
        background-color:#29006a;
        height:230px;
        z-index:2;
        color: #fff;
        text-align: center;
    }

    .nav2 {
        position: fixed;
        right: 70px;
        bottom: 0px;
        width:50px;
        background-color:#0d0739;
        height:270px;
        z-index:2;
        color: #fff;
        text-align: center;
    }

    .nav3 {
        position: fixed;
        right: 130px;
        bottom: 0px;
        width:50px;
        background-color:#1b0000;
        height:310px;
        z-index:2;
        color: #fff;
        text-align: center;
    }
}

@media (min-width: 360px) {
  body {
    font-size: 16px;
    
  }
  
  a {
      font-size:20px;
      color: #29bbfe;
  }
}