gun_dev.css

body{
	margin:0;
	padding: 0;
}

a{
	font-family: 'oxygen';
}

h1{
	text-align: center;
	font-size: 4em;
}

h1, h2{
	font-family: 'Oxygen';
	color: #2C2C2C;
}

h3{
	font-family: 'Oxygen';
	font-size: 2em;
	font-style: italic;
	text-align: center;
	color: #2C2C2C
}

p{
	font-family: 'Oxygen';
	color: #2C2C2C;
}

img{
	width: 100%;
}

.forkMe{
	position: absolute;
	right: 0;
	top: -16px;
	border:0;
	width: 10%;
	width: 47%;
    z-index: 2;
}

.oxygen{
	font-family: 'Oxygen';
}

.alegreya{
	font-family: 'Alegreya Sans SC';
}

.aniHolder{
	position: absolute;
	bottom: 0;
	z-index: 12;
}

.edgePhotos{
	position: absolute;
	bottom: 0;
	display:none;
}


/*==================================*/
/*           TOP GRAPHIC            */
/*==================================*/
.hero{
	width: 100%;
	height: auto;
}

.heroImg{
	width: 20%;
	margin:1em 40% .5em;
}

.hero h1{
	font-family: 'Oxygen';
	font-style: italic;
	font-size: 2.5em;
	text-align: center;
	margin-bottom: .75em;
}

.devices{
	width: 90%;
	height: auto;
	margin:0 auto 1em;
	position: relative;
}

.device{
	position: relative;
	display: inline-block;
}

#phone{
	left:5%;
	bottom: 0;
	width: 5%;
}

#tablet{
	left:13%;
	bottom: 0;
	width: 10%;
}

#desktop{
	bottom: 0;
	width: 31%;
	left:20%;
}

.mouse {
	display: block;
	position: absolute;
	width: 1em;
	top: 60%;
	left: -6%;
}

#laptop{
	bottom: 0;
	right: -24%;
	width: 25%;
}

.screen{
	fill:#383838;
	cursor: pointer;
	-webkit-transition: all 1s;
	overflow: hidden;
}

.dull {
	background-color: #EEE;
	-webkit-transition: background-color 600ms linear;
	-moz-transition: background-color 600ms linear;
	transition: background-color 600ms linear;
}
.blue {
	background-color: rgb(77,121,216);
	-webkit-transition: background-color 600ms linear;
	-moz-transition: background-color 600ms linear;
	transition: background-color 600ms linear;
}
.red {
	background-color: rgb(236,104,89);
	-webkit-transition: background-color 600ms linear;
	-moz-transition: background-color 600ms linear;
	transition: background-color 600ms linear;
}
.green {
	background-color: rgb(122,216,133);
	-webkit-transition: background-color 600ms linear;
	-moz-transition: background-color 600ms linear;
	transition: background-color 600ms linear;
}

.yellow {
	background-color: #f2b919;
	-webkit-transition: background-color 600ms linear;
	-moz-transition: background-color 600ms linear;
	transition: background-color 600ms linear;
}

/*END OF GRAPHIC*/

.intro h1{
	margin-bottom:-.2em;
}

.intro h3{
	margin-bottom: 1.3em;
}
/*==================================*/
/*             TRY NOW              */
/*==================================*/

.try{
	width: 100%;
	background-color: #272727;
	opacity: .9;
	height: auto;
}

.try .dark_header{
	text-align: left;
	font-size: 2em;
	color: white;
	margin-top: -.2em;
}

.try p{
	color: white;
}

.example{
	width: 90%;
	margin: 1em auto;
	color: white;
}

.example a{
	font-size: 1.3em;
	color:rgba(122,216,133,1);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.example a:hover{
	background-color: rgb(122,216,133,.8);
}

/*==================================*/
/*          SWIPER STARTS           */
/*==================================*/

.slider{
	height:auto;
	position: relative;
}

.slider p, .slider h1{ color:white; }

.panel{
	width: 100vw;
	height: 50em;
	position: relative;
}

.fa{
	color:white;
}

.prev{
	position: absolute;
	z-index:100;
	top:50%;
	left:1%;
	width: 2em;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}

.next{
	position: absolute;
	z-index:100;
	top:50%;
	right:1%;
	color: white;
	width: 2em;
}

.red{
	background-color: #ea3224;
}

.blue{
	background-color: rgb(77,121,216);
}

.green{
	background-color: #33cc33;
}

.yellow{
	background-color: #f2b919;
}

.content{
	width: 60%;
	height: auto;
	color: white;
	position: absolute;
	left: 15%;
}

.content h1{
	text-align: left;
	font-size: 2em;
	margin-top: 1em;
}

.content p{
	line-height: 1.5;
}	
/*END OF SWIPER*/

/*==================================*/
/*         IN TOUCH SECTION         */
/*==================================*/

.in_touch{
	width: 100%;
	overflow: auto;
}

.in_touch p{
	color: black;
}

.wrapper{
	width: 100%;
	height: auto;
	overflow: auto;
	padding: 1em;
	box-sizing: border-box;
	text-align: center;
}

.wrapper p{
	text-align: left;
	width: 90%;
	margin:0 auto;
	line-height: 1.7;
}

.js-gitter-toggle-chat-button{
	border: 0;
	width: 35%;
	max-width: 220px;
	min-width: 180px;
	color: white;
	font-family: 'Oxygen';
	font-size: .9em;
	text-transform: uppercase;
	border:0;
	padding: 1em;
	margin: 2em;
    display: inline-block;
}

.gitter{
	width: 100%;
	height: auto;
	float: right;
	padding-bottom: 1.8em;
	margin-top: -40px;
	z-index: -10;
}

/*==================================*/
/*          API REFERENCE           */
/*==================================*/

.api_reference{
	width: 100%;
	height: auto;
	background-color: #484A47;
}

.api_reference .dark_header{
	color: white;
	margin-top: .2em;
}

.developed .grid{
	padding-bottom: 3em;
}

.grid{
	width: 100%;
	text-align: center;
}

.grid-item{
	width: 48%;
	padding:.25em;
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	min-width: 300px;
	max-width: 400px;
	box-sizing: border-box;
	height: auto;
}

.tile{
	height: 30vh;
	padding:1em;
	position: relative;
}

.grid-item h2, .grid-item p{
	margin:.5em;
	color: white;
	text-align: left;
}

.grid-item .tile a{
	color: white;
	font-size: .8em;
	position: absolute;
	right: 30px;
	bottom: 30px;
}

/*---------------------------------------------

API DOCUMENTATION AND PAGE TRANSITION ANIMATION

---------------------------------------------*/

html,body{
	margin:0;
	padding: 0;
}

*{
	box-sizing: border-box;
}

.content_api h1 {
	margin-top: 0;
	font-size: 2.5em;
	color: white;
	text-align: left;
}

.content_api img{
	width:358px;
}

.api_title, .content_api h2, .content_api h3, .content_api h4 {
	color: white;
	text-align: left;
}

.red_api{
	background-color: #ea3224;
	border:2em solid #ea3224;
}

.blue_api{
	background-color: #4d79d8;
	border:2em solid #4d79d8;
}

.yellow_api{
	background-color: #f2b919;
	border:2em solid #f2b919;
}

.green_api{
	background-color: #33cc33;
	border:2em solid #33cc33;
}

.content_api.oxygen{
	color: white;
	font-family: 'Oxygen';
	line-height:2;
}

.gunoptions, .options, .examples, ul, li, code, pre, p{
	color: white;
}

.gun_api{
	display: -webkit-box;
}

.api_menu{
	width: 20%;
	padding: 1em 0;
	height: 100vh;
	background-color: white;
	position: fixed;
}

.api_menu a{
	font-family: 'Oxygen';
	text-decoration: none;
	color: black;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.api_menu a:hover{
	text-decoration: underline;
	margin-left:.5em;
}

.api_menu a:active{
	text-decoration: underline;
	margin-left: .5em;
}

.api_menu li{
	list-style-type: none;
	height:2em;
}

.wrapper_api{
	width: 80%;
	background-color: white;
	height: auto;
	padding:2em;
	overflow: hidden;
}

.content_api{
	width: 100%;
	height: auto;
}

.content_api a{
	color:white;
}

.content_api p code{
	background-color: #222222;
	color: #ECECEC;
	padding: .4em;
}

pre code{
	font-size: 1.2em;
}

.code{
	width: 45%;
	height: auto;
	padding:.5em 1em;
	background-color: #484A47;
	border-radius: 5px;
}

/*-------------------------------

PAGE TRANSITION ANIMATION STARTS

-------------------------------*/

body::after, body::before {
  /* these are the 2 half blocks which cover the content once the animation is triggered */
  content: '';
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #ffffff;
  z-index: 1;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  transition: transform 0.4s 0.4s;
}
body::before {
  top: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
body::after {
  bottom: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;
}

.cd-cover-layer {
  /* layer that covers the content when the animation is triggered */
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: #4089a6;
  -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
}

.cd-about .cd-cover-layer {
  background-color: #283040;
}

.page-is-changing .cd-cover-layer {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-loading-bar {
  /* this is the loding bar - visible while switching from one page to the following one */
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  height: 2px;
  width: 90%;
  background-color: #4089a6;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
  -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
  transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.cd-about .cd-loading-bar {
  background-color: #283040;
}
.cd-about .cd-loading-bar::before {
  background-color: #4089a6;
}
.cd-loading-bar::before {
  /* this is the progress bar inside the loading bar */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #283040;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.page-is-changing .cd-loading-bar {
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
  -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
  transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}
.page-is-changing .cd-loading-bar::before {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
  -moz-transition: -moz-transform 0.8s 0.8s ease-in;
  transition: transform 0.8s 0.8s ease-in;
}

/*==================================*/
/*           EXPLANATION            */
/*==================================*/

.explanation h4, .explanation p{
	color:black;
}

.explanation .grid{
	margin-top:1.8em;
}

/*==================================*/
/*            DEVELOPED             */
/*==================================*/

.developed .grid-item{
	text-align: left;
	padding: 1em;
	height: 50vh;
	margin: 0;
	text-align: center;
}

.developed .grid-item a{
	display: block;
}

.pic_holder{
	position: relative;
}

.front{
	z-index:900;
	width:95%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	-webkit-transform:rotateX(0deg) rotateY(0deg);
	-moz-transform:rotateX(0deg) rotateY(0deg);
	transform:rotateX(0deg) rotateY(0deg);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}

.pic_holder.flip .front{
	z-index:900;
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
}

.back{
	z-index: 800;
    background-color: #2C2C2C;
    height: auto;
    margin:0 auto;
    position: absolute;
    padding-bottom: 1em;
    top: 0;
    left: 1em;
    overflow: 
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}

.back h3{
	color: white;
}

.back p{
	font-size: 1.2em;
	line-height: 1.2;
}

.pic_holder.flip .back{
	z-index:1000;
	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
}

/*==================================*/
/*         SWIPER CONTAINER         */
/*==================================*/
.iframeVid{
	width: 47%;
	height:48vh;
	border:0;
	margin:0 26.5%;
}

.narrative{
	width: 100%;
	height: auto;
	overflow: hidden;
}

.narrative .swiper-wrapper{
	width:100%;
	overflow: auto;
	text-align: center;
	margin-bottom: 3em;
}

.swiper_nav{
	margin-bottom:.7em;
}

.swiper_nav.grid-item{
	width: 304px;
	min-width: 214px;
	height: 170px;
}

iframe, .iframe{
	width: 100%;
	height: 170px;
	border: 0;
}

.meetup.grid{
	height: auto;
	overflow: auto;
	padding-bottom: 5vh;
}

.meetup .grid-item{
	width:80%;
	margin-top:5vh;
	height: auto;
	background-color: rgba(255,255,255,.15);
	padding:1.3em;
	box-sizing: border-box;
	max-width: none;
}

.meetup img{
	width: 40%;
	max-width: 200px;
	display: inline-block;
}

.meetup h3{
	color: white;
}

/*==================================*/
/*          FOOTER SECTION          */
/*==================================*/

#footer{
	background-color: #323232;
    position: relative;
    padding: 3.5em 0 1em 0;
    overflow: auto;
    width: 100%;
}

#footer nav{
	float: none;
    padding: 0;
    margin: 0 7%;
    text-align: center;
}

#footer nav a{
	padding: 0 1em;
    color: #6D6E70;
    font-size: .7em;
}

.footer_social{
	width:80%;
	margin: 0 10% 2em;
}

.footer_social img{
	width: 12%;
    padding: 0.4em .9em;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

footer{
	width: 100%;
	padding:.8em 0;
	background-color: #2C2C27;
	clear: both;
}

footer p{
	color: #6D6E70;
	font-size: .8em;
	margin-left: 1em;
}

footer a{
	color: #BCBEC0;
}

@media (max-width: 736px) and (min-width: 320px) and (orientation: portrait){
	.panel{
		height: 33em;
	}

	.forkMe{
		width: 15%;
	}

	.iframeVid{
		width: 90%;
		margin:0 5%;
	}
	.gun_api{
		display: block;
	}

	.api_menu, .wrapper_api{
		width: 100%;
	}

	.api_menu{
		float:left;
		position:relative;
		height: 10em;
		padding:.5em 0;
	}

	.api_menu ul{
		padding:0 .8em;
	}

	.wrapper_api{
		float: right;
		padding:0;
	}

	.content_api h1{
		font-size: 1.5em;
	}

	.content_api h2, .content_api h3{
		font-size: 1.2em;
	}

	.yellow_api, .red_api, .blue_api, .green_api{
		border:0;
		padding:.5em;
	}
}

@media (max-width: 736px) and (min-width: 320px) and (orientation:landscape){
	.desktop{ left:-6%; }

	.laptop {left:46%;}

	.phone{ left: 90% }

	.panel{
		height: 30em;
	}

	.forkMe{
		width:15%;
	}

	.developed .grid-item{
		height: 86vh;
	}

	.front, .back{
		height: 85vh;
	}

	.iframeVid{
		width: 90%;
		margin:0 5%;
	}

	#footer nav a{
		font-size:.9em;
	}
		.gun_api{
		display: block;
	}

	.api_menu, .wrapper_api{
		width: 100%;
	}

	.api_menu{
		float:left;
		position:relative;
		height: 10em;
		padding:.5em 0;
	}

	.api_menu ul{
		padding:0 .8em;
	}

	.wrapper_api{
		float: right;
		padding:0;
	}

	.content_api h1{
		font-size: 1.5em;
	}

	.content_api h2, .content_api h3{
		font-size: 1.2em;
	}

	.yellow_api, .red_api, .blue_api, .green_api{
		border:0;
		padding:.5em;
	}
}
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
	.desktop{
		left: -7%;
	}

	.laptop{
		left:43%;
	}

	.phone{
		top:37%;
		left:70%;
	}

	.content{
		width: 50%;
		left:15%;
		top:13%;
	}

	.arrow{
		display: block;
	}

	.forkMe{
		width: 13%;
	}

	.content p{
		font-size: 1.2em;
	}

	.gitter{
		margin-top:-70px;
	}

	#footer nav a{
		font-size:1.3em;
	}
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){
	.desktop{
		left:-5%;
	}

	.laptop{
		left:46%;
	}

	.phone{
		left:87%;
	}

	.forkMe{
		width: 15%;
		top: -11px;
	}

	.panel{
		height: 38vh;
	}

	.content{
		width: 51%;
		top:7%;
		left: 15%;
	}

	.content p{
		font-size: 1.2em;
	}

	.api_reference{
		padding-bottom: 4em;
	}

	.gitter{
		margin-top:-90px;
	}

	.front, .back{
		height: 30vh;
	}

	.swiper_nav{
		width: 180%;
	}

	#footer nav a{
		font-size: 1em;
	}
}

@media (min-width: 1100px){
	.forkMe{
		width: 11%;
	}

	.arrow{
		display: block;
	}

	.phone{
		top: 40%;
    	left: 71%;
	}

	.laptop{
		left: 43%;
	}

	.desktop{
		left: -2%;
	}

	.wide{
		display: block;
	}

	.content{
		width: 30%;
		left: 12%;
    	top: 4%;
	}

	.content h1{
		font-size: 3em;
	}

	.content p{
		font-size: 1.2em;
	}

	.js-gitter-toggle-chat-button{
		margin-top: 4em;
	}

	.gitter{
		margin-top: -180px;
	}

	#footer{
	background-color: #323232;
    position: relative;
    padding: 3.5em 0 1em 0;
    width: 100%;
	}

	.footer_social{
		float: left;
	    margin-right: 3em;
	    width: 16em;
	}

	.footer_social img{
		width: 18%;
		padding:.4em;
		-webkit-transition:all .5s ease-in-out;
		-moz-transition:all .5s ease-in-out;
		-ms-transition:all .5s ease-in-out;
		-o-transition:all .5s ease-in-out;
		transition:all .5s ease-in-out;
	}

	.footer_social img:hover{
		opacity: .8;
	}

	#footer nav{
		color: #6D6E70;
		font-size: 1.1em;
		margin-right: 5%;
		padding: 0;
	}

	#footer nav a 
	{
	    padding: 0 0.8em;
	    color: #6D6E70;
	    font-size: 1.2em;
	}

	footer{
		width: 100%;
		padding:.8em 0;
		background-color: #2C2C27;
		clear: both;
	}

	footer p{
		color: #6D6E70;
		font-size: .8em;
	}

	footer a{
		color: #BCBEC0;
	}
}

@media (min-width: 1600px){
	.panel{
		height: 65em;
	}
}