@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot?-ee0u0f');
	src:url('../fonts/icomoon/icomoon.eot?#iefix-ee0u0f') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff?-ee0u0f') format('woff'),
		url('../fonts/icomoon/icomoon.ttf?-ee0u0f') format('truetype'),
		url('../fonts/icomoon/icomoon.svg?-ee0u0f#icomoon') format('svg');
}

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }


body {
	background: #fff;
	color: #69606b;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	font-family: 'Noto Serif', serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}


html, body {
	
}

h1,h2,h3,h4,h5,h6{
		font-family: 'Noto Serif', serif;
		font-style: italic;
		position: relative;
		z-index: 2;
		line-height: 1.5;
}
p {
	position: relative;
	z-index: 2;
	z-index: 2;
	line-height: 1.75;
	margin-bottom: 20px;
}
.logo{
	position: relative;
	z-index: 2;
}
ul{
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 1.6;
}
@media only screen and (max-width: 568px) {
	ul{
		font-size: 16px;
	} 
}

@media only screen and (max-width: 368px) {
	ul{
	font-size: 14px;
	} 
}

.topGradient{
	position: fixed;
	top:0;
	left: 0;
	height: 5px;
	width: 100%;
	z-index: 10000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#54ac97+0,6bb6bd+100 */
background: #54ac97; /* Old browsers */
background: -moz-linear-gradient(left, #54ac97 0%, #6bb6bd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #54ac97 0%,#6bb6bd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #54ac97 0%,#6bb6bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ac97', endColorstr='#6bb6bd',GradientType=1 ); /* IE6-9 */}

.container{
	width: 100%;
	padding: 0;
}

.gap{
	margin-bottom:20px;
}

sup{
	font-size: 13px;
}



/* Header */
.header {
	position: relative;
	margin: 0 auto;
	min-height: 560px;
	width: 100%;
	height: 100vh;
}
.bg-img {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bg-img img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
}

.title {
	z-index: 1000;
	margin: 0 auto;
	padding: 0 2.25em;
	width: 100%;
	text-align: center;
	top:50%;
	left: 28%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
@media only screen and (max-width: 1900px) {
	.title{
		left: 48%;
	}
}
.title h1 {
/* 	padding: 0 0 0.2em; */
	color: #333;
	font-weight: 300;
	font-size: 78px;
	margin: 0 auto;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	line-height: 1.6!important;
}
.title p.sub {
	color: #fff;
	font-weight: 300;
	font-size: 26px;
	font-style: normal;
	margin: 0 auto;
	font-style: italic;
}

.title p {
	color: #fff;
	font-weight: 300;
	font-size: 42px;
	font-style: normal;
	margin: 20px auto;
	font-style: italic;
}
.Gtext{
	-webkit-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#54ac97+0,6bb6bd+100 */
background: #54ac97; /* Old browsers */
background: -moz-linear-gradient(left, #54ac97 0%, #6bb6bd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #54ac97 0%,#6bb6bd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #54ac97 0%,#6bb6bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ac97', endColorstr='#6bb6bd',GradientType=1 ); /* IE6-9 */
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	background-clip: text;
}


.orange{
	color: #F58220;
}
.blue{
	color: #6BB6BD;
}

@media only screen and (max-width: 768px) {
	.title {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0 auto;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
	}

	.title h1 {
	/* 	padding: 0 0 0.2em; */
		color: #000;
		font-weight: 300;
		font-size: 34px!important;
		margin: 0 auto;
		line-height: 1.6!important;
	}
	
	.title p.sub {
		color: #fff;
		padding: 0 0 0.6em;
		font-weight: 300;
		font-size: 18px;
		margin: 0 auto;
	}

}


.title p.subline {
	font-size: 1.75em;
}

div.main-logo{
	position: fixed;
	top:40px;
	left: 40px;
	max-width: 200px;
	z-index: 10340;
}
@media only screen and (max-width: 768px) {
	div.main-logo{
		position: fixed;
		top:20px;
		left: 20px;
		width: 100px;
	}
	
}

@media only screen and (max-width: 368px) {
	.title{
		position: absolute;
		top:70%;
	}
	.title h1 {
	/* 	padding: 0 0 0.2em; */
		color: #000;
		font-weight: 300;
		font-size: 24px!important;
		margin: 0 auto;
		line-height: 1.6!important;
	}
	
	.title p.sub{
		font-size: 15px;
	}
	
	
}


/* Trigger Button */
button.trigger {
	position: fixed;
	bottom: 40px;
	left: 50%;
	z-index: 5000;
	display: block;
	margin-left: -0.5em;
	padding: 0;
	width: 1em;
	height: 1em;
	border: none;
	background: transparent;
	color: transparent;
	font-size: 2em;
	cursor: pointer;
}
@media only screen and (max-width: 768px) {

	button.trigger{
		color: #2CC5F8	;
	}
}

.container:not(.notrans) button.trigger {
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.container.modify:not(.notrans) button.trigger {
	opacity: 0;
	pointer-events: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

button.trigger::before {
	position: absolute;
	bottom: 100%;
	left: -100%;
	padding: 0.8em;
	width: 300%;
	color: #54AC97;
	content: attr(data-info);
	font-size: 0.35em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

button.trigger:focus {
	outline: none;
}

button.trigger span {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
@media only screen and (max-width: 768px) {
}

button.trigger span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #54AC97;
	content: "\e097";
	font-size: 20px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Conent */
.content {
	margin: 0 auto;
	padding: 0 0 3em;
}

.content > div:not(.title) {
	margin: -80px auto 0;
	max-width: 1360px;
	padding: 0 .1em;
}

.content > div:not(.title) p {
	margin: 0 auto 1.5em auto;
}

.content > div:not(.title) p:first-child {
	font-size: 1.35em;
}

.content h3 {
	margin: 0;
	font-size: 1.4em;
}

.content blockquote {
	padding: 0.25em;
	font-style: italic;
	font-size: 1.65em;
	font-family: 'Lora', serif;
	line-height: 1.4;
}

.content blockquote::before {
	content: '\201C';
}

.content blockquote::after {
	content: '\201D';
}

/* -------------------------- */
/* Faded gradient */
/* -------------------------- */

.intro-effect-fadeout:not(.notrans) .bg-img {
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

.intro-effect-fadeout:not(.notrans) .bg-img::after {
	-webkit-transition-property: opacity;
	transition-property: opacity;
}

.intro-effect-fadeout:not(.notrans) .header h1 {
	-webkit-transition-property: -webkit-transform, color, all;
	transition-property: transform, color, all;
}

.intro-effect-fadeout:not(.notrans) .header p,
.intro-effect-fadeout:not(.notrans) .content > div, {
	-webkit-transition-property: -webkit-transform, opacity;
	transition-property: transform, opacity;
}

.intro-effect-fadeout:not(.notrans) .bg-img,
.intro-effect-fadeout:not(.notrans) .bg-img::after,
.intro-effect-fadeout:not(.notrans) .header h1,
.intro-effect-fadeout:not(.notrans) .header p,
.intro-effect-fadeout:not(.notrans) .content > div {
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.intro-effect-fadeout .header {
	overflow: hidden;
}

.intro-effect-fadeout.modify .bg-img {
	-webkit-transform: translateY(-25%);
	transform: translateY(-25%);
}

.intro-effect-fadeout .bg-img::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 101%;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.intro-effect-fadeout.modify .bg-img::after {
	opacity: 1;
}

.intro-effect-fadeout .title {
	text-align: left;
	max-width: 1040px;
}


.intro-effect-fadeout .header p {
	color: #777;
}
.intro-effect-fadeout .header p{
}
.intro-effect-fadeout .header h1{
			
		-webkit-transform: translateY(80px);
			transform: translateY(80px);
}

.intro-effect-fadeout.modify .header h1{
			-webkit-transform: translateY(-20px);
			transform: translateY(-20px);
}
@media only screen and (max-width: 368px) {
	.intro-effect-fadeout.modify .header h1{
			-webkit-transform: translateY(-60px);
			transform: translateY(-60px);
	}
}

.intro-effect-fadeout .header p {
	opacity: 0;
}

.intro-effect-fadeout .header p:nth-child(2) {
	-webkit-transform: translateY(450px);
			transform: translateY(450px);
}

.intro-effect-fadeout .header p:nth-child(3) {
	-webkit-transform: translateY(100px);
			transform: translateY(100px);
}

.intro-effect-fadeout.modify .header p:nth-child(2),
.intro-effect-fadeout.modify .header p:nth-child(3) {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.intro-effect-fadeout .content {
	z-index: 1000;
	position: relative;
}

.intro-effect-fadeout .content > div {
	opacity: 0;
	-webkit-transform: translateY(350px);
	transform: translateY(350px);
}

.intro-effect-fadeout.modify .content > div {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
/* Media Queries */
@media screen and (max-width: 47em) {
	.title, .content {
		font-size: 70%;
	}

	.codrops-demos a {
		font-size: 80%;
	}

	.intro-effect-side .title {
		width: 100%;
		padding: 0 1em;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.intro-effect-side.modify .bg-img::before {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.intro-effect-side .bg-img::after {
		border-left-width: 0px;
		border-right-width: 0px;
		right: 0px;
		left: 0px;
		background: rgba(255,255,255,0.1);
	}

	.intro-effect-side.modify .bg-img::after {
		background: rgba(255,255,255,0.8);
	}

	.intro-effect-sidefixed .content {
		width: 100%;
		margin-left: auto;
	}

	.intro-effect-sidefixed .bg-img::after {
		width: 95%;
	}

}

@media screen and (max-width: 27em) {
	.intro-effect-jam3 .content {
		padding: 0 2em 5em;
	}

	.intro-effect-grid .grid li h2 {
		display: none;
	}

	.intro-effect-push .header .title {
		top: 60px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.title, .content {
		font-size: 50%;
	}

	button.trigger::before {
		display: block;
	}
}

.Trigger {
	position:fixed;
	display:block;
	right:40px;
	top:40px;
	width:33px;
	height: 21px;
	z-index: 1349;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	}


@media only screen and (max-width: 768px) {
	.Trigger {
		right:25px;
		top:20px;
	}

}

.Trigger-top {
  opacity: 1;
  top: 0;
  height: 2px;
  width: 100%;
  background: #777;
  position: absolute;
  overflow: hidden;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation-name: topreverse;
  -moz-animation-name: topreverse;
  animation-name: topreverse;
  -webkit-animation-duration: 0.65s;
  -moz-animation-duration: 0.65s;
  animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.Trigger-middle {
  opacity: 1;
  top: 9px;
  height: 2px;
  width: 100%;
  overflow: hidden;
  background: #777;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation-name: topreverse;
  -moz-animation-name: topreverse;
  animation-name: topreverse;
  -webkit-animation-duration: 0.65s;
  -moz-animation-duration: 0.65s;
  animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.Trigger-bottom {
  opacity: 1;
  height: 2px;
  width: 100%;
  overflow: hidden;
  background: #777;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  bottom: 0;
  -webkit-animation-name: bottomreverse;
  -moz-animation-name: bottomreverse;
  animation-name: bottomreverse;
  -webkit-animation-duration: 0.65s;
  -moz-animation-duration: 0.65s;
  animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
	-webkit-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
	   -moz-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
	     -o-transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
		    transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
	}

.Trigger-top:before, .Trigger-bottom:before, .Trigger-middle:before{
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2CC2F8;
	opacity: .9;
	-webkit-transform: translateX(100%) translateZ(0);
	   -moz-transform: translateX(100%) translateZ(0);
	    -ms-transform: translateX(100%) translateZ(0);
	        transform: translateX(100%) translateZ(0);
	-webkit-transition: all .25s cubic-bezier(0.77, 0, 0.175, 1);
	   -moz-transition: all .25s cubic-bezier(0.77, 0, 0.175, 1);
	     -o-transition: all .25s cubic-bezier(0.77, 0, 0.175, 1);
		    transition: all .25s cubic-bezier(0.77, 0, 0.175, 1);
		       -webkit-backface-visibility: hidden;
		    	-webkit-perspective: 1000;
		    	backface-visibility: hidden;
		    	perspective: 1000;
	}
.Trigger-bottom:before{
	background: #0005ff
}
.Trigger-middle:before {
	background: #82f7c4;
}


	
.Trigger:hover .Trigger-top:before, .Trigger:hover .Trigger-middle:before, .Trigger:hover .Trigger-bottom:before{
	-webkit-transform: translateX(-1%);
	   -moz-transform: translateX(-1%);
	    -ms-transform: translateX(-1%);
	        transform: translateX(-1%);
}
.Trigger:hover .Trigger-top:before{
	-webkit-transition-delay: .2s;
		-moz-transition-delay: .2s;
		transition-delay: .2s;
}
.Trigger:hover .Trigger-middle:before{
	-webkit-transition-delay: .25s;
		-moz-transition-delay: .25s;
		transition-delay: .25s;
}
.Trigger:hover .Trigger-bottom:before{
	-webkit-transition-delay: .3s;
		-moz-transition-delay: .3s;
		transition-delay: .3s;
}
 .Trigger-top:before{
	-webkit-transition-delay: .1s;
		-moz-transition-delay: .1s;
		transition-delay: .1s;
}
.Trigger-middle:before{
	-webkit-transition-delay: .15s;
		-moz-transition-delay: .15s;
		transition-delay: .15s;
}
.Trigger-bottom:before{
	-webkit-transition-delay: .2s;
		-moz-transition-delay: .2s;
		transition-delay: .2s;
}

.Trigger.is-active .Trigger-middle {
	opacity: 0;
}
.Trigger.is-active .Trigger-top {
  top: 45.83333%;
  opacity: 1;
  background: #0005ff;
  -webkit-animation-name: top;
  -moz-animation-name: top;
  animation-name: top;
  -webkit-animation-duration: 0.65s;
  -moz-animation-duration: 0.65s;
  animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.Trigger.is-active .Trigger-bottom {
  opacity: 1;
  bottom: 45.83333%;
  background: #0005ff;
  -webkit-animation-name: bottom;
  -moz-animation-name: bottom;
  animation-name: bottom;
  -webkit-animation-duration: 0.65s;
  -moz-animation-duration: 0.65s;
  animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes top {
  0% {
    top: 0%;
  }
  60% {
    top: 45.83333%;
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
  }
}
@-moz-keyframes top {
  0% {
    top: 0%;
  }
  60% {
    top: 45.83333%;
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(45deg);
  }
}
@keyframes top {
  0% {
    top: 0%;
  }
  60% {
    top: 45.83333%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@-webkit-keyframes bottom {
  0% {
    bottom: 0%;
  }
  60% {
    bottom: 45.83333%;
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}
@-moz-keyframes bottom {
  0% {
    bottom: 0%;
  }
  60% {
    bottom: 45.83333%;
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-45deg);
  }
}
@keyframes bottom {
  0% {
    bottom: 0%;
  }
  60% {
    bottom: 45.83333%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
@-webkit-keyframes topreverse {
  0% {
    -webkit-transform: rotate(45deg);
    top: 45.83333%;
  }
  60% {
    -webkit-transform: rotate(0deg);
    top: 45.83333%;
  }
  100% {
    top: 0%;
  }
}
@-moz-keyframes topreverse {
  0% {
    -moz-transform: rotate(45deg);
    top: 45.83333%;
  }
  60% {
    -moz-transform: rotate(0deg);
    top: 45.83333%;
  }
  100% {
    top: 0%;
  }
}
@keyframes topreverse {
  0% {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 45.83333%;
  }
  60% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    top: 45.83333%;
  }
  100% {
    top: 0%;
  }
}
@-webkit-keyframes bottomreverse {
  0% {
    -webkit-transform: rotate(-45deg);
    bottom: 45.83333%;
  }
  60% {
    -webkit-transform: rotate(0deg);
    bottom: 45.83333%;
  }
  100% {
    bottom: 0%;
  }
}
@-moz-keyframes bottomreverse {
  0% {
    -moz-transform: rotate(-45deg);
    bottom: 45.83333%;
  }
  60% {
    -moz-transform: rotate(0deg);
    bottom: 45.83333%;
  }
  100% {
    bottom: 0%;
  }
}
@keyframes bottomreverse {
  0% {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 45.83333%;
  }
  60% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    bottom: 45.83333%;
  }
  100% {
    bottom: 0%;
  }
}
.no-animation {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

/* MENU OLD */
.menu {
	position:fixed;
	right:30px;
	display:block;
	top:30px;
	width:40px;
	z-index: 10;
	height: 30px;
}

.menu span {
	background:  #f05023!important;
	display: block;
	margin-bottom: 7px;
	height: 2px;
	width: 35px;
	-webkit-transition: all .25s cubic-bezier(.18,.02,.08,.98);
	transition: all .25s cubic-bezier(.18,.02,.08,.98);
}

.menu:hover span:nth-child(3) {
  width: 25px;
}

.menu:hover span:nth-child(2) {
  width: 30px;
}

.menu:hover span:nth-child(1) {
  width: 20px;
}

.menu.active span {
	background: #f05023!important;
}
.menu.active span:nth-child(1) {
	width: 35px;
	display: block;
/* 	position: absolute; */
	transform: rotate(45deg);
	margin-top: 7px
}

.menu.active span:nth-child(3) {
  width: 35px;
  transform: rotate(-45deg);
  margin-left:0px;
  margin-top:-16px;
  
}

.menu.active span:nth-child(2) {
	width: 35px;
	opacity: 0;
}





h2{
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 30px;
}

.product-container p{
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

.btn{
	position: relative;
	display: inline-block;
	padding: 10px 44px;
	border-radius: 0px;
	font-family: 'open sans', sans-serif;
	border: 1px solid #2CC2F8;
	letter-spacing: 2px;
	z-index: 1;
	text-transform: uppercase;
	overflow: hidden;
	background: transparent!important;
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
}
@media only screen and (max-width: 1924px) {
.btn{
	font-size: 15px;
		padding: 10px 17px;
		letter-spacing: 0px;
}
}
.-moz- .btn{
	padding: 10px 30px;
}
@media only screen and (max-width: 768px) {
	.btn{
		font-size: 11px;
		display: block;
		letter-spacing: 1px;
		margin-bottom: 10px;
		margin-top: 10px;
	}
}


.btn:before{
	content: '';
	position: absolute;
	width: 0%;
	height: 100%;
	left: -10px;
	top: 0;
	z-index: -1;
	background: #000;
	-webkit-transform: skew(-15deg); 
       -moz-transform: skew(-15deg); 
        -ms-transform: skew(-15deg); 
            transform: skew(-15deg);
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
}
.btn:hover::before{
	width:110%;
}
.btn:hover{
	color: #fff;
}

.product-container .gradientBottom, .gradientBottomO{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10px;
	z-index: 0;
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
	background: #6BB6BD; /* Old browsers */
	background: -moz-linear-gradient(left, #6BB6BD 0%, #00dbc9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #6BB6BD 0%,#00dbc9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #6BB6BD 0%,#00dbc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6BB6BD', endColorstr='#00dbc9',GradientType=1 ); /* IE6-9 */
	}
.product-container:hover .gradientBottomO{
	opacity: 0;
}



/* Xtrac */
.xtrac .btn{
	border: 1px solid #f28430;
}
.xtrac .btn:before{
	background: #f28430; /* Old browsers */
	background: -moz-linear-gradient(left, #f28430 0%, #f2d21d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f28430 0%,#f2d21d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f28430 0%,#f2d21d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28430', endColorstr='#f2d21d',GradientType=1 ); /* IE6-9 */	;
}

.xtrac .gradientBottom{
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f28430+0,f2d21d+100 */
	background: #f28430; /* Old browsers */
	background: -moz-linear-gradient(left, #f28430 0%, #f2d21d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f28430 0%,#f2d21d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f28430 0%,#f2d21d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28430', endColorstr='#f2d21d',GradientType=1 ); /* IE6-9 */
}
.xtrac .gradientBottomO{
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2d21d+0,f28430+100 */
	background: #f2d21d; /* Old browsers */
	background: -moz-linear-gradient(left, #f2d21d 0%, #f28430 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f2d21d 0%,#f28430 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f2d21d 0%,#f28430 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2d21d', endColorstr='#f28430',GradientType=1 ); /* IE6-9 */
}

.xtrac h2{
	-webkit-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	background: #f28430; /* Old browsers */
	background: -moz-linear-gradient(left, #f28430 0%, #f2d21d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f28430 0%,#f2d21d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f28430 0%,#f2d21d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28430', endColorstr='#f2d21d',GradientType=1 ); /* IE6-9 */	
	-webkit-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	background-clip: text;
}

.xtrac .hbspt-form input[type="text"]:focus,
.xtrac .hbspt-form input[type="email"]:focus,
.xtrac .hbspt-form textarea:focus,
.xtrac .hbspt-form select:focus {
	border: 1px solid #DE6B2D;
}
.xtrac .hbspt-form input[type="submit"]{
	background: #f28430; /* Old browsers */
	background: -moz-linear-gradient(left, #f28430 0%, #f2d21d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f28430 0%,#f2d21d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f28430 0%,#f2d21d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28430', endColorstr='#f2d21d',GradientType=1 ); /* IE6-9 */}
.xtrac .hbspt-form input[type="radio"] + label::after, .hbspt-form input[type="checkbox"] + label::after{
	background-color: #DE6B2D;
	box-shadow: 0 0 5px #DE6B2D;
}

.xtrac .bg{
	background-image: url(../img/xtrac_bg.jpg);
}



/* NORD */
.nord .btn{
	border: 1px solid #1bb0be;
	color: #1bb0be;
}
.nord .btn{
	left: 16px;
}
@media only screen and (max-width: 908px) {
	.btn{
		left: 16px;
	}
}
@media only screen and (max-width: 468px) {
	.nord .btn{
		left: 0;
	}
	.btn{
		left: 0;
	}

}
.nord .btn:hover{
	color: #fff
}
.nord .btn:before{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ac7d6+0,44ce74+100 */
	background: #2ac7d6; /* Old browsers */
	background: -moz-linear-gradient(left, #2ac7d6 0%, #44ce74 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #2ac7d6 0%,#44ce74 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #2ac7d6 0%,#44ce74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ac7d6', endColorstr='#44ce74',GradientType=1 ); /* IE6-9 */
}
.nord .gradientBottom{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ac7d6+0,44ce74+100 */
	background: #2ac7d6; /* Old browsers */
	background: -moz-linear-gradient(left, #2ac7d6 0%, #44ce74 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #2ac7d6 0%,#44ce74 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #2ac7d6 0%,#44ce74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ac7d6', endColorstr='#44ce74',GradientType=1 ); /* IE6-9 */
}

.nord .gradientBottomO{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#44ce74+0,2ac7d6+100 */
	background: #44ce74; /* Old browsers */
	background: -moz-linear-gradient(left, #44ce74 0%, #2ac7d6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #44ce74 0%,#2ac7d6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #44ce74 0%,#2ac7d6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44ce74', endColorstr='#2ac7d6',GradientType=1 ); /* IE6-9 */
}
.nord h2{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ac7d6+0,44ce74+100 */
	background: #2ac7d6; /* Old browsers */
	background: -moz-linear-gradient(left, #2ac7d6 0%, #44ce74 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #2ac7d6 0%,#44ce74 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #2ac7d6 0%,#44ce74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ac7d6', endColorstr='#44ce74',GradientType=1 ); /* IE6-9 */
	-webkit-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	background-clip: text;
}

.nord .bg{
	background-image: url(../img/nord_bg.jpg);
}


.nord .hbspt-form input[type="text"]:focus,
.nord .hbspt-form input[type="email"]:focus,
.nord .hbspt-form textarea:focus,
.nord .hbspt-form select:focus {
	border: 1px solid #6ef952;
}
.nord .hbspt-form input[type="submit"]{
	background: #2ac7d6; /* Old browsers */
	background: -moz-linear-gradient(left, #2ac7d6 0%, #44ce74 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #2ac7d6 0%,#44ce74 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #2ac7d6 0%,#44ce74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ac7d6', endColorstr='#44ce74',GradientType=1 ); /* IE6-9 */
	
}
.nord .hbspt-form input[type="radio"] + label::after, .hbspt-form input[type="checkbox"] + label::after{
	background-color: #6ef952;
	box-shadow: 0 0 5px #6ef952;
}


/* Stratapen */

.stratapen .btn{
	border: 1px solid #003591;
	color: #003591;
}
.stratapen .btn:hover{
	color: #fff
}
.stratapen .btn:before{
	background: #003591; /* Old browsers */
	background: -moz-linear-gradient(left, #003591 0%, #00daf2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #003591 0%,#00daf2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #003591 0%,#00daf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003591', endColorstr='#00daf2',GradientType=1 ); /* IE6-9 */
}

.stratapen .gradientBottom{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003591+0,00daf2+100 */
	background: #003591; /* Old browsers */
	background: -moz-linear-gradient(left, #003591 0%, #00daf2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #003591 0%,#00daf2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #003591 0%,#00daf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003591', endColorstr='#00daf2',GradientType=1 ); /* IE6-9 */
}
.stratapen .gradientBottomO{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00daf2+0,003591+100 */
	background: #00daf2; /* Old browsers */
	background: -moz-linear-gradient(left, #00daf2 0%, #003591 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #00daf2 0%,#003591 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #00daf2 0%,#003591 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00daf2', endColorstr='#003591',GradientType=1 ); /* IE6-9 */
}
.stratapen h2{
	background: #003591; /* Old browsers */
	background: -moz-linear-gradient(left, #003591 0%, #00daf2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #003591 0%,#00daf2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #003591 0%,#00daf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003591', endColorstr='#00daf2',GradientType=1 ); /* IE6-9 */
	-webkit-text-fill-color: transparent;
	-ms-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	background-clip: text;
}
.stratapen .hbspt-form input[type="text"]:focus,
.stratapen .hbspt-form input[type="email"]:focus,
.stratapen .hbspt-form textarea:focus,
.stratapen .hbspt-form select:focus {
	border: 1px solid #003591;
}
.stratapen .hbspt-form input[type="submit"]{
	background: #003591; /* Old browsers */
	background: -moz-linear-gradient(left, #003591 0%, #00daf2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #003591 0%,#00daf2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #003591 0%,#00daf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003591', endColorstr='#00daf2',GradientType=1 ); /* IE6-9 */
}
.stratapen .hbspt-form input[type="radio"] + label::after, .hbspt-form input[type="checkbox"] + label::after{
	background-color: #003591;
	box-shadow: 0 0 5px #003591;
}

.stratapen .bg{
	background-image: url(../img/strata_bg.jpg);
}


/* Main Sections */


.logo{
	margin: 0 auto ;
	max-width: 360px;
	width: 100%;
}

.vAlign{
	display: flex;
	align-items: center;
}
@media only screen and (max-width: 768px) {
.vAlign{
	display: block;
	align-items: center;
}

}
.product-container{
	width: 100%;
	position: relative;
	background: #fff;
	padding:10% 15%;
	display: inline-block;
	overflow: hidden;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 1500px) {
	.product-container{
		padding:8% 8%;
	}
}



.section{
	position: relative;
	display: block;
	padding: 100px 0;
}
@media only screen and (max-width: 768px) {
	.section{
		position: relative;
		display: block;
		padding: 50px 0;
	}

}
@media only screen and (max-width: 368px) {
	.section{
		position: relative;
		display: block;
		padding: 40px 0;
	}

}

.prod{

}

.overhid{
	overflow: hidden;
}


.more{
	display: none;
	padding-top: 5%;
}
.bg{
	position: absolute;
	left: 0;
	display: none;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: 100%!important;
	background-position: top right;
	opacity: .2;
		/* force hardware acceleration */
	 	-webkit-transform: translateZ(0);
	    -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	    -o-transform: translateZ(0);
	    transform: translateZ(0);
	    -webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		backface-visibility: hidden;
		perspective: 1000;
}

.revealer{
	position: absolute;
	left: -10%;
	bottom: 0;
	width: 130%;
	height: 100%;
	z-index: -1;	
	background: #6BB6BD; /* Old browsers */
	background: -moz-linear-gradient(left, #6BB6BD 0%, #00dbc9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #6BB6BD 0%,#00dbc9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #6BB6BD 0%,#00dbc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6BB6BD', endColorstr='#00dbc9',GradientType=1 ); /* IE6-9 */
			 transform:matrix(1, 0, -.5, 1, 0, 0);
		 -ms-transform:matrix(1, 0, -.5, 1, 0, 0);
		-moz-transform:matrix(1, 0, -.5, 1, 0, 0);
	-webkit-transform: matrix(1, 0, -.5, 1, 0, 0);
}

.-moz- .revealer{
	display: none!important;
}
.-moz- h2, .-moz- h1{
	background: none!important;
}
.-moz- .title h1{
	color: #0088FE;
}

.xtrac .revealer{
	background: #f28430; /* Old browsers */
	background: -moz-linear-gradient(left, #f28430 0%, #f2d21d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #f28430 0%,#f2d21d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #f28430 0%,#f2d21d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28430', endColorstr='#f2d21d',GradientType=1 ); /* IE6-9 */	;
}
.nord .revealer{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2ac7d6+0,44ce74+100 */
	background: #2ac7d6; /* Old browsers */
	background: -moz-linear-gradient(left, #2ac7d6 0%, #44ce74 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #2ac7d6 0%,#44ce74 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #2ac7d6 0%,#44ce74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ac7d6', endColorstr='#44ce74',GradientType=1 ); /* IE6-9 */
}
.stratapen .revealer{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003591+0,00daf2+100 */
	background: #003591; /* Old browsers */
	background: -moz-linear-gradient(left, #003591 0%, #00daf2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #003591 0%,#00daf2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #003591 0%,#00daf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003591', endColorstr='#00daf2',GradientType=1 ); /* IE6-9 */
}
@media only screen and (max-width: 768px) {
	.revealer{
			 transform:matrix(1, 0, 0, 1, 0, 0);
		 -ms-transform:matrix(1, 0, 0, 1, 0, 0);
		-moz-transform:matrix(1, 0, 0, 1, 0, 0);
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
		width: 250%!important;
	}
	
	body{
		overflow-x: hidden!important;
	}
}

@media only screen and (max-width: 768px) {
	.top-menu{
		background: #fff;
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 60px;
		z-index: 100000;
	}
}

ul li{
	margin: 5px 0;
}

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

	References

-------------------------------- */
	.references{
		background: #f9f9f9;
	}
	.small-text{
		font-size: 12px;
		font-family: 'open sans', sans-serif;
	}
	ol li{
		margin-bottom: 10px;
	}
	ol li a{
				padding: 0px;

		color: #6BB6BD;
			-webkit-transition: all .3s ease-in-out;
			   -moz-transition: all .3s ease-in-out;
			     -o-transition: all .3s ease-in-out;
			        transition: all .3s ease-in-out;
	}
	ol li a:hover{
		background: #6BB6BD;
		padding: 10px;
		color: #fff;
		text-decoration: none;
	}

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

	Footer

-------------------------------- */
.footer p {
	color: #fff;
	font-size: 14px;
}
@media only screen and (max-width: 768px) {
	.footer p {
		text-align: center!important;
		padding: 0px 30px!important;
	}
}

.footer {
	padding: 30px 15px;;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#54ac97+0,6bb6bd+100 */
background: #54ac97; /* Old browsers */
background: -moz-linear-gradient(left, #54ac97 0%, #6bb6bd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #54ac97 0%,#6bb6bd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #54ac97 0%,#6bb6bd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54ac97', endColorstr='#6bb6bd',GradientType=1 ); /* IE6-9 */}




.menu{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
/* 	overflow: hidden; */
	z-index: 1030;
	visibility: hidden;
	opacity: 0;
}
.menu.open{
	visibility: visible;
	opacity: 1;
}
.main-menu{
	z-index: 1500;
	position: absolute;
	top:100px;
	right: 40px;
	display: block;
	}
.main-menu li{
	list-style-type: none;
	display: block;
}
.menu .main-menu li {
	padding: 20px;
 	opacity: 0; 
		-webkit-transform: translate3d(100%,0,0);
    	   -moz-transform: translate3d(100%,0,0);
    	    -ms-transform: translate3d(100%,0,0);
    	        transform: translate3d(100%,0,0);
				 -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
					-moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
					  -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
					     transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
				
}
@media only screen and (max-width: 368px) {
	.menu .main-menu li {
		padding: 10px;
	}
}
.menu .main-menu li a{
	text-transform: uppercase;
	color: #777;
	font-family: 'open sans', sans-serif;
}
.main-menu li.xtrac a{
		color: #f28430;
}
.main-menu li.nord a{
		color: #30e2f2;
}
.main-menu li.stratapen a{
		color: #003591;
}
.main-menu li.vtrac a{
		color: #28c9c4;
}





.menu.open .main-menu li{
	opacity: 1;
		-webkit-transform: translate3d(0%,0,0);
    	   -moz-transform: translate3d(0%,0,0);
    	    -ms-transform: translate3d(0%,0,0);
    	        transform: translate3d(0%,0,0);
}
.menu.open .main-menu li:nth-of-type(1){
		-webkit-transition-delay: .2s;
		   -moz-transition-delay: .2s;
		    -ms-transition-delay: .2s;
		        transition-delay: .2s;
}
.menu.open .main-menu li:nth-of-type(2){
		-webkit-transition-delay: .3s;
		   -moz-transition-delay: .3s;
		    -ms-transition-delay: .3s;
		        transition-delay: .3s;
}
.menu.open .main-menu li:nth-of-type(3){
		-webkit-transition-delay: .4s;
		   -moz-transition-delay: .4s;
		    -ms-transition-delay: .4s;
		        transition-delay: .4s;
}
.menu.open .main-menu li:nth-of-type(4){
		-webkit-transition-delay: .5s;
		   -moz-transition-delay: .5s;
		    -ms-transition-delay: .5s;
		        transition-delay: .5s;
}
.menu.open .main-menu li:nth-of-type(5){
		-webkit-transition-delay: .6s;
		   -moz-transition-delay: .6s;
		    -ms-transition-delay: .6s;
		        transition-delay: .6s;
}

.menu.open .main-menu li:nth-of-type(6){
		-webkit-transition-delay: .7s;
		   -moz-transition-delay: .7s;
		    -ms-transition-delay: .7s;
		        transition-delay: .7s;
}


.overlay{
	position: absolute;
	left: 0;
	top:0;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1);
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
}
.menu.open .overlay{
	opacity: 1;
}
.skew{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 10%;
	height: 100%;
	background: #fff;
	opacity: 0;

/* 	display: none; */

		transform-origin:right bottom 0;
		/* force hardware acceleration */
	 	-webkit-transform: translateZ(0);
	    -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	    -o-transform: translateZ(0);
	    transform: translateZ(0);
	    -webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		backface-visibility: hidden;
		perspective: 1000;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
			-webkit-transition: all .3s ease-in-out;
			   -moz-transition: all .3s ease-in-out;
			     -o-transition: all .3s ease-in-out;
			        transition: all .3s ease-in-out;
			transform:matrix(1,0,1,1,0,0);
		-ms-transform:matrix(1,0,1,1,0,0);
	-webkit-transform:matrix(1,0,1,1,0,0);


}
.menu.open .skew-1{
	opacity: 1;
	width: 15%;
		   	 transform:matrix(1, 0, 1, 1, 800, 0);
		 -ms-transform:matrix(1, 0, 1, 1, 800, 0);
	-webkit-transform: matrix(1, 0, 1, 1, 800, 0);
	box-shadow: -18px 0px 24px 4px rgba(0,0,0,.02);
	z-index: 3;
}
.menu.open .skew-2{
	opacity: 1;
	width: 20%;
	z-index: 2;	
	     	 transform:matrix(1, 0, 1, 1, 700, 0);
		 -ms-transform:matrix(1, 0, 1, 1, 700, 0);
	-webkit-transform: matrix(1, 0, 1, 1, 700, 0);
	box-shadow: -18px 0px 24px 4px rgba(0,0,0,.03)

}
.menu.open .skew-3{
	width: 30%;
	opacity: 1;
			 transform:matrix(1, 0, 1, 1, 700, 0);
		 -ms-transform:matrix(1, 0, 1, 1, 700, 0);
	-webkit-transform: matrix(1, 0, 1, 1, 700, 0);
		z-index: 1;
			box-shadow: -18px 0px 24px 4px rgba(0,0,0,.04)
}
@media only screen and (max-width: 768px) {
	.skew
	.menu.open .skew-1{
		opacity: 1;
		width: 15%;
			   	 transform:matrix(1, 0, 1, 1, 150, 0);
			 -ms-transform:matrix(1, 0, 1, 1, 150, 0);
		-webkit-transform: matrix(1, 0, 1, 1, 150, 0);
		box-shadow: -6px 0px 4px 4px rgba(0,0,0,.03);
		z-index: 3;
	}
	.menu.open .skew-2{
		opacity: 1;
		width: 20%;
		z-index: 2;	
		     	 transform:matrix(1, 0, 1, 1, 100, 0);
			 -ms-transform:matrix(1, 0, 1, 1, 100, 0);
		-webkit-transform: matrix(1, 0, 1, 1, 100, 0);
		box-shadow: -6px 0px 4px 4px rgba(0,0,0,.01);
	
	}
	.menu.open .skew-3{
		width: 30%;
		opacity: 1;
				 transform:matrix(1, 0, 1, 1, 0, 0);
			 -ms-transform:matrix(1, 0, 1, 1, 0, 0);
		-webkit-transform: matrix(1, 0, 1, 1, 0, 0);
			z-index: 1;
				box-shadow: -6px 0px 4px 4px rgba(0,0,0,.02);
	}
}






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

Form

-------------------------------- */
.hbspt-form {
  width: 90%;
  max-width: 600px;
  margin: 0em auto;
/*   display: none; */
  position: relative;
  z-index: 10;
}
.hbspt-form::after {
  clear: both;
  content: "";
  display: table;
}
.hbspt-form fieldset {
  margin: 24px 0;
}
.hbspt-form legend {
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 2rem;
    font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  border-bottom: 1px solid #ecf0f1;
}

.hbspt-form div {
  /* form element wrapper */
  position: relative;
  margin: 20px 0;
}

.hbspt-form h4, .hbspt-form .cd-label {
  font-size: 1.3rem;
  color: #6BB6BD;
  margin-bottom: 10px;
}

.hbspt-form .cd-label {
  display: block;
}
.hbspt-form input, .hbspt-form textarea, .hbspt-form select, .hbspt-form label {
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;
  color: #2b3e51;
}
.hbspt-form input[type="text"],
.hbspt-form input[type="tel"],
.hbspt-form input[type="email"],
.hbspt-form textarea,
select.hs-input,
.hbspt-form legend {
  display: block;
  width: 94%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.hbspt-form input[type="text"],
.hbspt-form input[type="tel"],
.hbspt-form input[type="email"],
.hbspt-form textarea,
select.hs-input {
  /* general style for input elements */
  	width: 93%!important;

  padding: 16px!important;
  border: 1px solid #6BB6BD;
  background-color: #ffffff;
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}

.hbspt-form input[type="tel"],
.hbspt-form input[type="email"],
.hs-form-6d74ea29-28be-4f15-804e-ac1177f5bf75_619b0faf-bf75-4f0e-b744-26ce361af2c5 fieldset.form-columns-1 .hs-input,
{
	width: 94%!important;
}
.field div.input{
	margin: 0;
	padding: 0;
}
.hbspt-form input[type="text"]:focus,
.hbspt-form input[type="tel"]:focus,
.hbspt-form input[type="email"]:focus,
.hbspt-form textarea:focus,
select.hs-input:focus {
  outline: none;
  border-color: #6BB6BD;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}
select.hs-input {
  /* select element wapper */
  position: relative;
}
select.hs-input::after {
  /* arrow icon for select element */
  content: '';
  position: absolute;
  z-index: 1;
  right: 16px;
  top: 50%;
  margin-top: -8px;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../img/cd-icon-arrow.svg") no-repeat center center;
  pointer-events: none;
}
select.hbspt-input{
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
select.hbspt-input-ms-expand {
  display: none;
}
.hbspt-form .hbspt-form-list {
  margin-top: 16px;
}
.hbspt-form .hbspt-form-list::after {
  clear: both;
  content: "";
  display: table;
}
.hbspt-form .hbspt-form-list li {
  /* wrapper for radio and checkbox input types */
  display: inline-block;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 26px 16px 0;
  float: left;
}

.hbspt-form input[type=checkbox] {
  /* hide original check and radio buttons */
/*
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 2;
*/
}

.hbspt-form input[type="checkbox"] + label {
  padding-left: 24px;
}
.hbspt-form input[type="radio"] + label::before,
.hbspt-form input[type="radio"] + label::after,
.hbspt-form input[type="checkbox"] + label::before,
.hbspt-form input[type="checkbox"] + label::after {
  /* custom radio and check boxes */
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 20px;
  height: 20px;
}
.hbspt-form input[type="radio"] + label::before,
.hbspt-form input[type="checkbox"] + label::before {
  border: 1px solid #cfd9db;
  background: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
.hbspt-form input[type="radio"] + label::before,
.hbspt-form input[type="radio"] + label::after {
  border-radius: 50%;
}
.hbspt-form input[type="checkbox"] + label::before,
.hbspt-form input[type="checkbox"] + label::after {
  border-radius: .25em;
}
.hbspt-form input[type="radio"] + label::after,
.hbspt-form input[type="checkbox"] + label::after {
  background-color: #6BB6BD;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 5px #6BB6BD;
  display: none;
}
.hbspt-form input[type="radio"] + label::after {
  /* custom image for radio button */
  background-image: url("../img/cd-icon-radio.svg");
}
.hbspt-form input[type="checkbox"] + label::after {
  /* custom image for checkbox */
  background-image: url("../img/cd-icon-check.svg");
}
.hbspt-form input[type="radio"]:focus + label::before,
.hbspt-form input[type="checkbox"]:focus + label::before {
  /* add focus effect for radio and check buttons */
  box-shadow: 0 0 5px ##6BB6BD;
}
.hbspt-form input[type="radio"]:checked + label::after,
.hbspt-form input[type="checkbox"]:checked + label::after {
  display: block;
}
.hbspt-form input[type="radio"]:checked + label::before,
.hbspt-form input[type="radio"]:checked + label::after,
.hbspt-form input[type="checkbox"]:checked + label::before,
.hbspt-form input[type="checkbox"]:checked + label::after {
  -webkit-animation: cd-bounce 0.3s;
  -moz-animation: cd-bounce 0.3s;
  animation: cd-bounce 0.3s;
}
.hbspt-form textarea {
  min-height: 200px;
  resize: vertical;
  overflow: auto;
}
/* submit button */
.hbspt-form input[type="submit"] {
  /* button style */
  border: none;
	background: #6BB6BD; /* Old browsers */
	background: -moz-linear-gradient(left, #6BB6BD 0%, #00dbc9 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #6BB6BD 0%,#00dbc9 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #6BB6BD 0%,#00dbc9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6BB6BD', endColorstr='#00dbc9',GradientType=1 ); /* IE6-9 */
  border-radius: 0px;
  padding: 20px 25px;
  color: #ffffff;
  text-transform: uppercase ;
	letter-spacing: 1px;
	font-family: 'open sans', sans-serif ;
  font-weight: bold;
/*   float: right; */
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.hbspt-form input[type="submit"]:before{
	content: '';
	position: absolute;
	width: 0%;
	height: 100%;
	left: -10px;
	top: 0;
	z-index: -1;
	background: #000;
	-webkit-transform: skew(-15deg); 
       -moz-transform: skew(-15deg); 
        -ms-transform: skew(-15deg); 
            transform: skew(-15deg);
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
}
.hbspt-form input[type="submit"]:hover:before{
		width:110%;
}
.hbspt-form input[type="submit"]:hover{
	background: #54ac97;
}

.no-touch .hbspt-form input[type="submit"]:hover {
  background: #42a2e1;
}
.hbspt-form input[type="submit"]:focus {
  outline: none;
  background: #2b3e51;
}
.hbspt-form input[type="submit"]:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.hbspt-form [required] {
  background: url("../img/cd-required.svg") no-repeat top right;
}
.hbspt-form .error-message p {
  background: #e94b35;
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: .25em;
  padding: 16px;
}
.hbspt-form .error {
  border-color: #e94b35 !important;
}


.hs-form-field{
	width: 100%!important;
}
select.hs-input {
	height: 58px!important;
	margin-left: 0px!important;
	width:100%!important
}

@media only screen and (min-width: 600px) {
  .hbspt-form div {
    /* form element wrapper */
    margin: 2px 0;
  }
  .hbspt-form legend + div {
    /* reduce margin-top for first form element after the legend */
    margin-top:10px;
  }
  .hbspt-form h4, .hbspt-form .cd-label {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
  .hbspt-form input[type="text"],
  .hbspt-form input[type="email"],
  .hbspt-form textarea,
  .hbspt-form select {
    padding: 16px;
  }
}

@-webkit-keyframes cd-bounce {
  0%, 100% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes cd-bounce {
  0%, 100% {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(0.8);
  }
}
@keyframes cd-bounce {
  0%, 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
}




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

Custom icons

-------------------------------- */
/*
.hbspt-form .icon input, .hbspt-form .icon select, .hbspt-form .icon textarea {
  padding-left: 54px !important;
}
.hbspt-form .user {
  background: url("../img/cd-icon-user.svg") no-repeat 16px center;
}
.hbspt-form [required].user {
  background: url("../img/cd-icon-user.svg") no-repeat 16px center, url("../img/cd-required.svg") no-repeat top right;
}
.hbspt-form .company {
  background: url("../img/cd-icon-company.svg") no-repeat 16px center;
}
.hbspt-form [required].company, .hbspt-form [required].phone {
  background: url("../img/cd-icon-company.svg") no-repeat 16px center, url("../img/cd-required.svg") no-repeat top right;
}
.hbspt-form .email {
  background: url("../img/cd-icon-email.svg") no-repeat 16px center;
}
.hbspt-form [required].email {
  background: url("../img/cd-icon-email.svg") no-repeat 16px center, url("../img/cd-required.svg") no-repeat top right;
}
.hbspt-form .budget {
  background: url("../img/cd-icon-budget.svg") no-repeat 16px center;
}
.hbspt-form .message {
  background: url("../img/cd-icon-message.svg") no-repeat 16px 16px;
}
.hbspt-form [required].message {
  background: url("../img/cd-icon-message.svg") no-repeat 16px 16px, url("../img/cd-required.svg") no-repeat top right;
}
*/

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

FLoating labels 

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


.hbspt-form{
	width: 100%;
	max-width: 500px;
	position: relative;
	margin: 0 auto;
}

.js .floating-labels div {
  margin: 28px 0;
}
.js .floating-labels .cd-label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 1.6rem;
  cursor: text;
  -webkit-transition: top 0.2s, left 0.2s, font-size 0.2s;
  -moz-transition: top 0.2s, left 0.2s, font-size 0.2s;
  transition: top 0.2s, left 0.2s, font-size 0.2s;
}
/*
.js .floating-labels .icon .cd-label {
  left: 56px;
}
*/
.js .floating-labels .cd-label.float {
  /* move label out the input field */
  font-size: 1.2rem;
  top: -16px;
  left: 0 !important;
}
@media only screen and (min-width: 600px) {
  .js .floating-labels legend + div {
    /* reduce margin-top for first form element after the legend */
    margin-top: 16px;
  }
  .js .floating-labels .cd-label {
    top: 20px;
  }
}




@-webkit-keyframes reveal-left {
  0% {
	-webkit-transform: translateX(0%);
       -moz-transform: translateX(0%);
	    -ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
		    transform: translateX(0%);
  }
  99% {
  -webkit-transform: translateX(-100%);
       -moz-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
		 -o-transform: translateX(-100%);
		    transform: translateX(-100%);
  }
}
@-moz-keyframes reveal-left {
  0% {
    z-index: 10;
	-webkit-transform: translateX(0%);
       -moz-transform: translateX(0%);
	    -ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
		    transform: translateX(0%);
  }
  99% {
    opacity: 1;
  -webkit-transform: translateX(-100%);
       -moz-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
		 -o-transform: translateX(-100%);
		    transform: translateX(-100%);
  }
}
@keyframes reveal-left {
  0% {
    z-index: 10;
	-webkit-transform: translateX(0%);
       -moz-transform: translateX(0%);
	    -ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
		    transform: translateX(0%);
    }
  99% {
    opacity: 1;
    -webkit-transform: translateX(-100%);
       -moz-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
		 -o-transform: translateX(-100%);
		    transform: translateX(-100%);

  }
}


@-webkit-keyframes reveal-right {
  0% {
    -webkit-transform: translateX(0%);
       -moz-transform: translateX(0%);
	    -ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
		    transform: translateX(0%);
  }
  99% {
    -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
	    -ms-transform: translateX(100%);
		 -o-transform: translateX(100%);
		    transform: translateX(100%);
  }
}
@-moz-keyframes reveal-right {
  0% {
    z-index: 10;
    -webkit-transform: translateX(0%);
       -moz-transform: translateX(0%);
	    -ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
		    transform: translateX(0%);
  }
  99% {
    opacity: 1;
     -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
	    -ms-transform: translateX(100%);
		 -o-transform: translateX(100%);
		    transform: translateX(100%);

  }
}


@keyframes reveal-right {
  0% {
    z-index: 10;
    -webkit-transform: translateX(0%);
       -moz-transform: translateX(0%);
	    -ms-transform: translateX(0%);
		 -o-transform: translateX(0%);
		    transform: translateX(0%);
     }
  99% {
    opacity: 1;
     -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
	    -ms-transform: translateX(100%);
		 -o-transform: translateX(100%);
		    transform: translateX(100%);

   
  }
}

.reveal-left{
	 		animation-name: reveal-left;
	   -moz-animation-name: reveal-left;
	-webkit-animation-name: reveal-left;
	animation-direction: normal;
	 animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  -moz-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  -o-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}
.reveal-right{
	 		animation-name: reveal-right;
	   -moz-animation-name: reveal-right;
	-webkit-animation-name: reveal-right;
		animation-direction: normal;
	 animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  -moz-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  -o-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
}

@media only screen and (max-width: 468px) {
	.product-container h2{
		font-size: 22px!important;
	}
}