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

html, body {
    height:100%;
	margin:0;
	padding:0;
} 

body {
	background-image:url(images/RocketBlast_bg2.png); background-repeat:no-repeat; background-position:top right;
	background-color:#eeeeee; 
	-webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;}
	

.container {max-width:940px; width:100%; margin:0 auto 0 auto; padding:0 20px 0 20px;}

	
/* Dark Styles */	
.dark-bg {background-color:#3b3b3b; 
	-webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;}
	
.dark-titles {color:#CCCCCC;}	
		
	

.header {max-width:1090px; height:auto; width:100%; margin:0 auto 0 auto; padding:15px 5px;}

p {font-family: 'Open Sans', sans-serif; color:#646464; font-size:18px; line-height:26px;}

h2, h3 {font-family: 'Open Sans', sans-serif; text-align:right; margin-top:0px; color:#494a4a; font-size:16px; line-height:22px; font-weight:400;}

h1, h4, h5, h6 {font-family: 'Oswald', sans-serif; font-weight:300; font-size:44px; line-height:47px; color:#494a4a; text-transform:uppercase;}

.inside-title {color:#54caf0; font-size:36px; line-height:40px; margin-bottom:8px;}
.inside-copy {font-size:18px; line-height:28px; padding:0 0 20px 5%;}

.arrow {color:#f15a2d; font-size:22px;}


.tower {width:100%; height:100%; background-image:url(images/tower.png); background-repeat:no-repeat; background-position:bottom left;}

/* Factory animations */


@-webkit-keyframes goPackage  {
	
                from {left: -500px;} 
                to {left:130px;} 
				
                }

.rocketbox {-webkit-animation: goPackage 10s 0.3s linear infinite normal;}
.rocketbox2 {position:absolute; left:-500px; top:695px; z-index:950;}




/* Gears */

.spin {
	opacity: 1;
    -webkit-animation:spin 16s linear infinite;
    -moz-animation:spin 16s linear infinite;
    animation:spin 16s linear infinite;}

.spin-back {
	opacity: 1;
    -webkit-animation:spin-back 16s linear infinite;
    -moz-animation:spin-back 16s linear infinite;
    animation:spin-back 16s linear infinite;}	
	
.middle {opacity: 1;}	
	
	
/* Blue */	
#gear1 {position:absolute; top:103px;}	
.gear1-content {position:absolute; left: 67px;top: 180px; z-index:5;}	

/* Gray */
#gear2 {position: absolute; left: 236px; top: 168px;}	
.gear2-content {position: absolute; left: 286px; top: 264px; z-index:5;}	

/* Green */
#gear3 {position: absolute; left: 562px; top: 154px;}	
.gear3-content {position:absolute; left: 630px; top: 231px; z-index:5;}

/* Orange */
#gear4 {position: absolute; top: 398px; left:49px;}	
.gear4-content {position:absolute; left: 118px;top: 474px; z-index:5;}	

/* Purple */
#gear5 {position: absolute; top: 380px; left: 681px;}	
.gear5-content {position:absolute; left: 750px; top: 456px; z-index:5;}	



.gearset {position:relative; top:-65px; margin:0px; max-height:800px;}

/* Lightbox Content */
	.lightbox {display:none;}	
	.featherlight .featherlight-content {
	padding:3% 3% 3% 0!important; 
	max-width: 960px!important; 
	width:95%!important; 
	height:auto!important; }
	
.featherlight .featherlight-close-icon {top:10px!important; right:10px!important;}	
.lightboxgear {float:left; margin-right:4%;}

.desktopstat {display:block;}
.mobilestat {display:none;}
	

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@-moz-keyframes spin-back { 100% { -moz-transform: rotate(-360deg); } }

@-webkit-keyframes spin-back { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin-back { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }


.pause {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;}
	
	

/* Toggle */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
  margin-right: 5%;
  margin-top:0px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #494a4a;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #f15a2d;
}

input:focus + .slider {
  box-shadow: 0 0 1px #f15a2d;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  z-index: 200;
}

.slider.round:before {
  border-radius: 50%;
}	


.footer {position:absolute; top: 775px; right:0px; margin-bottom:25px;}


@media only screen and (max-width:1120px) {
.tower {background-image:none;} 
}


@media only screen and (max-width:960px) {
	
/* Green */
#gear3 {left: 371px; top: 484px;}
.gear3-content {left: 439px; top: 560px;}

/* Purple */
#gear5 {top: 702px; left: 240px;}
.gear5-content {left: 308px; top: 778px;}

.gearset {position: absolute; left: 14%; margin-left: -14px; top:100px;}

.footer {position:relative; top: 1000px;}

	}
	
@media only screen and (max-width:770px) {	
h1 {font-size:33px; text-align: center;}	
}
	
	
@media only screen and (max-width:670px) {
		
	.gearset {position: relative; left: 0; top:0px; margin-left: 0;}
		
	}
	
	

@media only screen and (max-width: 625px) {
	
	h2, h3 {text-align:center; padding-top:15px;}
	}
	


@media only screen and (max-width: 500px) {
	
	.logo {text-align:center;}
.switch {margin-top:20px;}
	
	img {max-width:100%}
	
.desktopstat {display:none;}
.mobilestat {display:block;}
	
	h1 {font-size:28px; line-height:30px; margin-bottom:15px;}
	.container { padding:0px;}

.inside-title {padding-left:5%;}
.lightboxgear {float:none; margin-right:0;}

/* Blue */
#gear1 {position:absolute; left:28px; top:240px;}
.gear1-content {position:absolute; left:95px; top:314px;}


/* Grey */
#gear2 {display:none;}	
.gear2-content {display:none;}
	  
/* Green */
#gear3 {position:absolute; left:28px; top:505px;}
.gear3-content {position:absolute; left:95px; top:578px;}


/* Orange */
#gear4 {position:absolute; left:28px; top:770px;}
.gear4-content {position:absolute; left:95px; top:842px;}


/* Purple */
#gear5 {position:absolute; left:28px; top:1034px;}
.gear5-content {position:absolute; left:95px; top:1106px;}
 
 
 .footer {top: 1220px; padding:0 8px 20px 8px;}

}