/* Apollo 50*/

body {min-width: 320px;overflow-x: hidden;background-color: #000;color:#fff; letter-spacing: 0.1em;}
.parallax{background-image: url("../imgs/bg01.jpg"); height: 900px;background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover; }
.parallax-history{background-image: url("../imgs/bg02.jpg");height: 900px; background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover; }
* {margin: 0px;padding: 0px;border: 0px none;}
h1{margin: 50px 0px 30px; font-weight: bold;font-size:3em;}
figcaption {color:#eee;padding:5px 15px;margin-bottom: 15px;}
.navbar {z-index: 999;position: fixed;width:100%; padding: 0rem 1rem;}
.social-links a{border: none;background-color:rgba(79,79,79,0.90);}
.social-links i{color:#fff;}
#top .view-desktop{display: flex;}

.interactive{background-image: url(../imgs/3-colors.png); background-position: right; height: 40px;background-repeat: no-repeat;}
#stars, #stars2, #stars3 {position: absolute; top: 0;}
 


.container-fluid{position: relative;}
.title-img{background-color: rgba(95,2,69,0.7);}
.astronaut{position: absolute;left:55%; transform: translatey(0px); animation: float 6s ease-in-out infinite;}

@keyframes float {0% {transform: translatey(0px);}50% {transform: translatey(-20px);}100% {transform: translatey(0px);}}
 
.backtotop{position:fixed; top:40%; right:35px; z-index:9999;}
.menu { list-style: none;margin: -180px 0; padding: 0;position: fixed;bottom: 50%;right: 40px;z-index: 9999;}
.menu li {clear: both;display: block;}
.menu a {background-color:#fff;border-radius:13px; color:rgba(0,0,0,0);display: block;float:right;font-size:13px;height:24px;width:24px;line-height:24px;margin-top:15px;opacity:.8;overflow:hidden;text-align:center;text-decoration:none;transition: all .4s;}
.menu a:hover, .menu a.active {border:none;padding: 0px 20px;width: 200px;color: #fff;  background: #871f69;}
.menu a.active {opacity: 1;}

 
 

.safety-belt{left:65%; position:absolute; hidden; animation: safety-belt-anime ease-in 15s;animation-iteration-count: infinite;transform-origin: 0% 50%;-webkit-animation: safety-belt-anime ease-in 15s;-webkit-animation-iteration-count: infinite;-webkit-transform-origin: 0% 50%;-moz-animation: safety-belt-anime ease-in 15s;-moz-animation-iteration-count: infinite;-moz-transform-origin: 0% 50%;-o-animation: safety-belt-anime ease-in 15s;-o-animation-iteration-count: infinite;-o-transform-origin: 0% 50%;-ms-animation: safety-belt-anime ease-in 15s;-ms-animation-iteration-count: infinite;-ms-transform-origin: 0% 50%;}@keyframes safety-belt-anime{0% {transform: translate(0px,0px) rotate(0deg) ;}32% {transform: translate(-3px,-3px) rotate(5deg) ;}65% {transform: translate(0px,-9px) rotate(NaNdeg) ;}100% {transform: translate(0px,0px) rotate(0deg) ;}}@-moz-keyframes safety-belt-anime{0% {-moz-transform: translate(0px,0px) rotate(0deg) ;}32% {-moz-transform: translate(-3px,-3px) rotate(5deg) ;}65% {-moz-transform: translate(0px,-9px) rotate(NaNdeg) ;}100% {-moz-transform: translate(0px,0px) rotate(0deg) ;}}@-webkit-keyframes safety-belt-anime {0% {-webkit-transform: translate(0px,0px) rotate(0deg) ;}32% {-webkit-transform: translate(-3px,-3px) rotate(5deg) ;}65% {-webkit-transform: translate(0px,-9px) rotate(NaNdeg) ;}100% {-webkit-transform: translate(0px,0px) rotate(0deg) ;}}@-o-keyframes safety-belt-anime {0% {-o-transform: translate(0px,0px) rotate(0deg) ;}32% {-o-transform: translate(-3px,-3px) rotate(5deg) ;}65% {-o-transform: translate(0px,-9px) rotate(NaNdeg) ;}100% {-o-transform: translate(0px,0px) rotate(0deg) ;}}@-ms-keyframes safety-belt-anime {0% {-ms-transform: translate(0px,0px) rotate(0deg) ;}32% {-ms-transform: translate(-3px,-3px) rotate(5deg) ;}65% {-ms-transform: translate(0px,-9px) rotate(NaNdeg) ;}100% {-ms-transform: translate(0px,0px) rotate(0deg) ;}}
 
 
.history-year{width:150px;height: 150px; border-radius: 200px;background-color:rgba(95,2,69,0.7);color:#fff; font-size:2.2em; text-align: center; padding: 50px 0;margin: 0 auto; }
.pb-powered-by{display:none !important;}


/* horizontal scroll*/
::-webkit-scrollbar {width: 1px;height: 1px;}
::-webkit-scrollbar-button {width: 1px;height: 1px;}
*,
*::after,
*::before {box-sizing: border-box;}

.horizontal-scroll {width: 100vh;
	height: 100vw;
	overflow-y: auto;
	overflow-x: hidden;
/*	padding: 30px;*/
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: rotate(-90deg) translate3d(0, -100vh, 0);
          transform: rotate(-90deg) translate3d(0, -100vh, 0);
}
.horizontal-scroll > * {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(90deg) translate3d(0, calc(-100vh + 100px), 0);
          transform: rotate(90deg) translate3d(0, calc(-100vh + 100px), 0);
}
.horizontal-scroll-block {
  width: calc(100vh - 100px);
  height: calc(100vh - 100px);
  position: relative;
text-align: center;
}
.horizontal-scroll-block:not(:first-child) {
  margin-top: 100px;
}
.horizontal-scroll-block .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: no-repeat center center / cover;
  opacity: .8;
  background-blend-mode: luminosity;
}
.horizontal-scroll-block .letter {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  font-weight: normal;
  font-size: 12em;
  font-family: 'Playfair Display', serif;
  color: white;
}



/*products*/
.ss-links{position: fixed;left: 10px;top: 166px;width: 25%;z-index: 100;}
.ss-links a{background: rgba(0,0,0,0.2);font-size: 16px;width: 40px;height: 40px;line-height: 40px;margin: 5px;float: left;border-radius: 50%;display: block;text-align: center;-webkit-transition: background 0.2s linear;-moz-transition: background 0.2s linear;-o-transition: background 0.2s linear;-ms-transition: background 0.2s linear;transition: background 0.2s linear;}
.ss-links a:hover{background: rgba(0,0,0,0.4);}
.ss-container{width: 100%;position: relative;text-align: left;float: left;overflow: hidden;padding-bottom: 200px;}
.ss-container h2{font-size: 40px;text-transform: uppercase;color: rgba(78,84,123,0.2);text-shadow: 0px 1px 1px #fff;padding: 20px 0px;}
/*.ss-container:before{position: absolute;width: 4px;background: rgba(17,17,22,0.8);top: 0px;left: 50%;margin-left: -2px;content: '';height: 100%;}*/
.ss-row{width: 100%;clear: both;float: left;position: relative;padding: 10px 0;}
.ss-left, .ss-right{float: left;width: 48%;position: relative;}
.ss-right{padding-left: 2%;}
.ss-left{text-align: right;float: left; }
.ss-left h3 span{margin-left: 50%;}
.ss-circle{border-radius: 50%;overflow: hidden;display: block;text-indent: -9000px;text-align: left;background-size: cover;background-color: #f0f0f0;background-repeat: no-repeat;background-position: center center;position: static;}
.ss-small .ss-circle{width: 100px;height: 100px;}
.ss-medium .ss-circle{width: 200px;height: 200px;}
.ss-large .ss-circle{width: 300px;height: 300px;}
.ss-left .ss-circle{float: right; }
.ss-right .ss-circle{float: left; }
.ss-left h3 span {right: 0% important;}
.ss-container h3{margin-top: 34px;padding: 10px 15px;background: rgba(26, 27, 33, 0.6);text-shadow: 1px 1px 1px rgba(26, 27, 33, 0.8)}
.ss-container .ss-medium h3{margin-top: 40px;}
.ss-container .ss-large h3{margin-top: 100px;}
.ss-container .ss-left h3{border-right: 5px solid rgba(164,166,181,0.8);}
.ss-container .ss-right h3{border-left: 5px solid rgba(164,166,181,0.8);}

.ss-container h3 span{color: rgba(255,255,255,0.8);font-size: 0.6em;display: block;padding: 10px 0;line-height: 1.5em;width:50%;}
.ss-container h3 a{font-size: 1em;font-weight: bold;color:#b22688;display: block;}
.ss-container h3 a:hover{color: rgba(255,255,255,1);}

.ss-circle-1{background-image:url(../imgs/invention-dry-food.jpg);}
.ss-circle-2{background-image: url(../imgs/invention-micro-chip.jpg);}
.ss-circle-3{background-image: url(../imgs/invention-air-base-shoes.jpg);}
.ss-circle-4{background-image: url(../imgs/invention-fire-suit.jpg);}
.ss-circle-5{background-image: url(../imgs/invention-vacuum-cleaner.jpg);}
.ss-circle-6{background-image: url(../imgs/invention-foil.jpg);}
.ss-circle-7{background-image: url(../imgs/invention-clean-water.jpg);}
.ss-circle-8{background-image: url(../imgs/invention-pace-maker.jpg);}


 


#quotes .accordion, #quotes .accordion ul, #quotes .accordion ul li > div {width: 100%; cursor: pointer;}
#quotes .accordion ul a, #quotes .accordion li .accordion_item_inf {transition: all .3s;;}

#quotes .accordion {overflow: hidden;}
#quotes .accordion ul {display: table;}
#quotes .accordion a {display: table-cell;}
#quotes .accordion li {display: block;height: 350px;background-position: center left;background-size: cover;}
#quotes .accordion a.shrink li {background-position: 13% 50%;}

#quotes .accordion li > div {position: relative;width: 100%;height: 100%}
#quotes .accordion li .accordion_item_inf {position: absolute;right: 0; bottom: 0; left: 0;padding:0% 10% 5% 50%;color:#871f69; opacity: 0;transition-delay:0s; }

#quotes .accordion a:hover .accordion_item_inf {opacity: 1;transition-delay:.3s;}
#quotes .accordion .accordion_item_inf_name {font-size: 25px;font-weight: bold; }
#quotes .accordion .accordion_item_inf_text {;color: #333;}




















.quiz-frame{width:100%; height:800px;}


#footer{color:#cc56aa;}
#footer a{color:#ff7cd9; font-weight:bold;}
#contact .social-links a{*background-color: #979797!important;}
#footer .copyright, #zbsg-social h3{color:#fff;}





@media screen and (max-width:1366px){
#quotes .accordion li {background-position: 10% 0%;}
#quotes .accordion a.shrink li {background-position: 20% 50%;}
#quotes .accordion li .accordion_item_inf {padding: 0% 5% 5% 60%;}
}

@media screen and (max-width:800px){
.parallax {background-position: top left;background-repeat: no-repeat;background-size: 210%;}	
.parallax-history { height:unset;}
.horizontal-scroll {height: unset; -webkit-transform: unset; transform: unset;margin: 80px 100px;}
.horizontal-scroll-block {width:unset; height:unset; position: unset; }
.horizontal-scroll > * {-webkit-transform-origin: left top;transform-origin: left top;-webkit-transform: unset;transform: unset;}
.history-text {text-align: left;padding-left: 90px;}
.history-year {width: 80px;height: 80px; font-size: 1.2em; padding: 25px 0;display: inline;float: left;margin: unset;}
.safety-belt{display:none;}
h1{margin: 150px 0px; }	
 
#stars, #stars2, #stars3 {display: none;}
}
 


@media screen and (max-width:640px){
.backtotop{top:85%; right:10px;}
#navbar-bottom .navbar-nav a{background-color:rgba(95,2,69,0.8); padding: 0.8em 0.2em;}
#navbar-bottom .navbar-nav li {border-right: 1px solid rgba(0,0,0,0);flex: auto;}
h1{font-size: 2.2em; margin: 50px 0px 0px;  }	
#top .view-mobile{display: flex;}
#top .view-desktop{display: none;}
.parallax{background-image: url("../imgs/masthead-mobile.jpg"); padding-top: 550px; background-position: top;background-repeat: no-repeat;background-size: 100%;background-attachment:unset; }
.horizontal-scroll {margin: 80px 0px;}

.ss-left, .ss-right {width: 100%;}
.ss-left h3 span{margin-left: unset;}	
.ss-medium .ss-circle, .ss-large .ss-circle {width: 200px;height: 200px;}
.ss-container .ss-large h3, .ss-container .ss-medium h3  {margin-top: 10px;}
.ss-container h3 span {width: 100%;}
.ss-container{padding-bottom: 50px;}
.ss-container:before{display:none;}
.mobile-q1, .mobile-q3{background-color: #871f69;}
.mobile-q2, .mobile-q4{color:#000;background-color: #babfd8;}
 
.mobile-q1 p,.mobile-q2 p,.mobile-q3 p,.mobile-q4 p{width:80%; margin: 0 auto; padding:20px 0px;}
.quiz-frame{ height:750px;}
 
}