@import url("../css/spinners.css");


	/* Common styles
	* --------------------------------------- */
	img{
	    -webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
	}
	.section{
		text-align:center;
		overflow:hidden;
		height: 944px;
	}
	.wrap{
		width: 1180px;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	.box{
		text-align: left;
		color: #808080;
		font-size: 1.2em;
		line-height: 1.6em;
	}




	/* Section 0
	* --------------------------------------- */
	#section0{
		padding: 60px 0;
	}
	#section0 img{
		height: 100%;
		margin: 40px 0 0 0;
	}




	/* Section 1
	* --------------------------------------- */
	#section1 img{
		position:absolute;
		left: 40px;
		top: 100px;
	}

	#section1 .box{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -192px;
		margin-left: 89px;
		width: 395px;
		z-index: 1;
	}
	#section1 .imgsContainer{
		display: block;
		position: absolute;
		z-index: 1;
		top: 42%;
		left: 58%;
		margin-top: -325px;
		margin-left: -747px;
		width: 800px;
		height: 696px;
	}
	#section1 img{
		height: 100%;
	}
	/*screen resolutions between 620px and 800px*/
	@media all and (min-width: 620px) and (max-width: 800px){
		#section1 .imgsContainer{
			margin-top: -278px;
			margin-left: -685px;
			width: 647px;
			height: 563px;
		}
	}

	/*screen resolutions lower than 620px*/
	@media all and (max-width: 620px){
		#section1 .imgsContainer{
			margin-top: -208px;
			margin-left: -516px;
			width: 534px;
			height: 464px;
		}
	}
	#iphone2{
		z-index: 10;
	}
	#iphone2.active{
		-webkit-transform: translate3d(-134px, 0px, 0px);
		-moz-transform: translate3d(-134px, 0px, 0px);
		-ms-transform:translate3d(-134px, 0px, 0px);
		transform: translate3d(-134px, 0px, 0px);
	}

	#iphone3{
		z-index: 12;
	}
	#iphone3.active{
		-webkit-transform: translate3d(213px, 0px, 0px);
		-moz-transform: translate3d(213px, 0px, 0px);
		-ms-transform:translate3d(213px, 0px, 0px);
		transform: translate3d(213px, 0px, 0px);
	}

	#iphone4{
		z-index: 11;
		left: 140px;
	}

	#iphone4.active{
		-webkit-transform: translate3d(548px, 0px, 0px);
		-moz-transform: translate3d(548px, 0px, 0px);
		-ms-transform:translate3d(548px, 0px, 0px);
		transform: translate3d(548px, 0px, 0px);
	}




	/* Section 2
	* --------------------------------------- */
	#section2 img{
		position:absolute;
	}
	#section2 .imgsContainer,
	#staticImg .imgsContainer,
	#section3 .imgsContainer{
		position: absolute;
		z-index: 1;
		left: 50%;
		display: block;
		margin-top: -288px;
		margin-left: -636px;
		width: 0;
		height: 0;

		-webkit-transition: all 1.2s ease-in-out;
		-moz-transition: all 1.2s ease-in-out;
		-o-transition: all 1.2s ease-in-out;
		transition: all 1.2s ease-in-out;
	}

	#section2.moveUp .imgsContainer{
		top: 50%;
	}

	#section2.moveDown .imgsContainer,
	#staticImg .imgsContainer{
		top: 90%;
	}

	#section2.active .imgsContainer{
		top: 50%;
	}

	#section2 .box{
		top: 22%;
		left: 42%;
		position: absolute;
		width: 582px;
	}

	#iphone-green{
		left: 106px;
		position:absolute;
	}

	#staticImg{
		display: block;
		position: absolute;
		z-index: 1;
		top: 100%;
		left: 0;
		min-width: 200px;
		height: 100%;
		-webkit-transition: all 0.7s ease-out;
		-moz-transition: all 0.7s ease-out;
		-o-transition: all 0.7s ease-out;
		transition: all 0.7s ease-out;
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}
	#staticImg.moveDown{
	-webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
	}
	#staticImg.moveUp{

	-webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
	}
	#staticImg.moveDown .imgsContainer{
			top: 50%;
	}
	#staticImg.moveDown img{
		top: 155px;
	}

	#staticImg.active .imgsContainer{
		top: 50%;
	}


	#staticImg.active img{
		top: 487px;
	}





	/* Section 3
	* --------------------------------------- */
	#section3 .imgsContainer{
		top: 50%;
	}

	#section3 img{
		top: 155px;
		left: 455px;
		position: absolute;
	}
	#section3 .box{
		text-align: center;
		margin: 10% 0 0 0;
	}






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


@font-face {
    font-family: 'Gotham-thin-italic';
    src: url('../fonts/Gotham-ThinItalic.eot');
    src: url('../fonts/Gotham-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-ThinItalic.woff2') format('woff2'),
        url('../fonts/Gotham-ThinItalic.woff') format('woff'),
        url('../fonts/Gotham-ThinItalic.ttf') format('truetype'),
        url('../fonts/Gotham-ThinItalic.svg#Gotham-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}



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

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

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


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

}



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

}



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

}



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

}


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

}






/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
	font-family: "Gotham-black";
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}

h1 span{
color: rgb(52, 198, 244);
}

q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: "globersemibold_free",helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 2em;
}
.section .intro p{
	width: 100%;
	font-size: 2em;
}
.section .other p{
	width: 100%;
	font-size: 1.5em;
}

.section{
	text-align:center;
}

/*=========================================
3. Header & Footer
=========================================== */

header,
footer,
#navigation {
  width: 100%;
  padding: 25px 25px;
}

header p,
footer p {
  margin-bottom: 0;
}

header[role=banner] img,
footer img {
  height: 4rem;
  vertical-align: middle;
}

header, footer {
  position: fixed;
  top: 0;
  left: 0;
  /* hover/visibility */
  z-index: 300;
}
footer {
  top: auto;
  bottom: 0;
}

#section-footer #footer-text
{
	width: 80%;
	height: 200px;
	margin: 0 auto;
    padding: 20px 0;
	background-color: #383838;
}

/*=== Hide header[role=banner] === */

/*desktop only? Add @media (min-width: 1025px)*/
header[role=banner] {
  opacity: 1;
}
/*=== Show Header[role=banner] === */
header[role=banner]:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  footer .alignleft, footer .alignright {
    float: none;
    display: block;
  }
}


/*=== 3.1. Logo === */

.logo {
  text-transform: lowercase;
  /*float: left;
  font-size: 4.8rem;*/
}

.logo a {
  background: url(../img/logos/logo.svg) no-repeat 0 0;
  opacity: 1;
  background-size: 280px;
 width: 200px;
 height: 80px;
  vertical-align: middle;
  float: left;
  text-indent: -4000px;
    transition: 0.3s;
    z-index: 8000;
  /*If you remove text-indent */
  /*padding-left: 6rem;*/
}



.logo a:hover {
  background: url(../img/logos/logo-h.svg) no-repeat 0 0;
  opacity: 1;
  background-size: 280px;
  width: 200px;
  height: 80px;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
    transition: 0.3s;
}


.logo{
  background-image: linear-gradient(120deg, #34e0f0 0%, #2d88f2 50%, #d16ba5 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 80px; height: 80px;
  animation: morph 3s linear infinite; 
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}


.logo:before{
  animation: morph 3s linear infinite;
  opacity: .21;
  animation-duration: 1.5s;
}

.logo:after{
  animation: morph 3s linear infinite;
  animation-delay: 400ms;
  opacity: .5;
  content: "";
  line-height: 120px;
  text-indent: 20px;
    z-index: 100;
}

@keyframes morph{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@keyframes fadeIn{
  100%{
    transform: scale(1.03);
    opacity: 0;
  }
}

/*!
DEACON IS AWESOME



*/



#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 8000;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 9000;
}




.wrapper {
	z-index: 5;
}
.wrapper.mm-menu-open {
    background-color: #fff;
}



.mm-menu-toggle {
	position: fixed;
	top: 25px;
	right: 25px;
	width: 35px;
	height: 10px;
	z-index: 1050;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}
.mm-menu-toggle span .mm-white{

  background: #666;

}

.mm-menu-toggle span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #777;
  opacity: 1;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


/* Icon 3 */

.mm-menu-toggle span:nth-child(1) {
  top: 0px;
}

.mm-menu-toggle span:nth-child(2),#mm-menu-toggle span:nth-child(3) {
  top: 10px;
  width:30px;   
}

.mm-menu-toggle span:nth-child(4) {
  top: 20px;
  width:20px;
}

.mm-menu-toggle.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #333;
}








.mm-menu-toggle.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #333;
}

.mm-menu-toggle.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #333;
}

.mm-menu-toggle.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #333;
}

.mm-menu {
	font-family: "bebas_neuethin", "San Francisco", helvetica, arial, sans-serif;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 800;
	background-color: #fff;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	box-shadow: 0;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: -webkit-transform .5s, box-shadow .5s;
	transition: transform .5s, box-shadow .5s
}
.mm-menu.active {
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	overflow-x: hidden;
}

@media all and (min-width:300px) {
.mm-menu {
	width: 300px;
	-webkit-transform: translateX(300px);
	-ms-transform: translateX(300px);
	transform: translateX(300px);
		overflow-x: hidden;
}
    
}
.mm-menu__header {
	position: relative;
	width: 100%;
	height: 150px;
	background-color: #fff;
}
.mm-menu__spacer {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: #fff;
}

.mm-menu__header img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 50px;
    max-width: 50px;
    float: left;
	margin-top:25px;
	margin-left:30px;
}


.mm-menu__title {
	position: absolute;
	bottom: 12px;
	left: 12px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 22px
}
.mm-menu__items {
	list-style: none;
	margin: 0;
	padding: 0
}
.mm-menu__item {
	display: block;
	width: 100%;
	opacity: 0;
	-webkit-transform: translateX(10%);
	-ms-transform: translateX(10%);
	transform: translateX(10%);
	overflow-x: hidden;
}
.mm-menu__item.in-view {
	opacity: 1;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
		overflow-x: hidden;
}
.mm-menu__item.item-1 {
	-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
	transition: opacity .5s .1s, transform .5s .1s
}
.mm-menu__item.item-2 {
	-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
	transition: opacity .5s .2s, transform .5s .2s
}
.mm-menu__item.item-3 {
	-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
	transition: opacity .5s .3s, transform .5s .3s
}
.mm-menu__item.item-4 {
	-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
	transition: opacity .5s .4s, transform .5s .4s
}
.mm-menu__item.item-5 {
	-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
	transition: opacity .5s .5s, transform .5s .5s
}
.mm-menu__item.item-6 {
	-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
	transition: opacity .5s .6s, transform .5s .6s
}
.mm-menu__item.item-7 {
	-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
	transition: opacity .5s .7s, transform .5s .7s
}
.mm-menu__item.item-8 {
	-webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
	transition: opacity .5s .8s, transform .5s .8s
}
.mm-menu__item.item-9 {
	-webkit-transition: opacity .5s .9s, -webkit-transform .5s .9s;
	transition: opacity .5s .9s, transform .5s .9s
}
.mm-menu__item.item-10 {
	-webkit-transition: opacity .5s 1s, -webkit-transform .5s 1s;
	transition: opacity .5s 1s, transform .5s 1s
}
.mm-menu__item.item-11 {
	-webkit-transition: opacity .5s 1.1s, -webkit-transform .5s 1.1s;
	transition: opacity .5s 1.1s, transform .5s 1.1s
}
.mm-menu__item.item-12 {
	-webkit-transition: opacity .5s 1.2s, -webkit-transform .5s 1.2s;
	transition: opacity .5s 1.2s, transform .5s 1.2s
}
.mm-menu__item.item-13 {
	-webkit-transition: opacity .5s 1.3s, -webkit-transform .5s 1.3s;
	transition: opacity .5s 1.3s, transform .5s 1.3s
}
.mm-menu__item.item-14 {
	-webkit-transition: opacity .5s 1.4s, -webkit-transform .5s 1.4s;
	transition: opacity .5s 1.4s, transform .5s 1.4s
}
.mm-menu__item.item-15 {
	-webkit-transition: opacity .5s 1.5s, -webkit-transform .5s 1.5s;
	transition: opacity .5s 1.5s, transform .5s 1.5s
}
.mm-menu__item.item-16 {
	-webkit-transition: opacity .5s 1.6s, -webkit-transform .5s 1.6s;
	transition: opacity .5s 1.6s, transform .5s 1.6s
}
.mm-menu__item.item-17 {
	-webkit-transition: opacity .5s 1.7s, -webkit-transform .5s 1.7s;
	transition: opacity .5s 1.7s, transform .5s 1.7s
}
.mm-menu__item.item-18 {
	-webkit-transition: opacity .5s 1.8s, -webkit-transform .5s 1.8s;
	transition: opacity .5s 1.8s, transform .5s 1.8s
}
.mm-menu__item.item-19 {
	-webkit-transition: opacity .5s 1.9s, -webkit-transform .5s 1.9s;
	transition: opacity .5s 1.9s, transform .5s 1.9s
}
.mm-menu__item.item-20 {
	-webkit-transition: opacity .5s 2s, -webkit-transform .5s 2s;
	transition: opacity .5s 2s, transform .5s 2s
}
.mm-menu__link {
	font-family: 'globerthin_free', helvetica, arial, sans-serif;
	display: block;
	position: relative;
	overflow: hidden;
    padding: 5px 0px 15px 30px;
	text-align:left;
	color: #00ccff;
	line-height: 0.9;
	font-weight:bold;
	font-size: 50px;
	text-decoration: none;
	-webkit-transition: background .5s, color .5s;
	transition: background .5s, color .5s
}
.mm-menu__links {
	font-family: 'globersemibold_free', helvetica, arial, sans-serif;
	display: block;
	position: relative;
	overflow: hidden;
    padding: 5px 0px 5px 30px;
	text-align:left;
	color: #999;
	line-height: 0.9;
	font-size: 18px;
	text-decoration: none;
	-webkit-transition: background .5s, color .5s;
	transition: background .5s, color .5s
}
.mm-menu__link a:link {
	font-family: 'globerthin_free', helvetica, arial, sans-serif;
	color: #00ccff;
}
.mm-menu__link a:hover {
	font-family: 'globerthin_free', helvetica, arial, sans-serif;
	color: #00ccff;
}
.mm-menu__link-text {
	position: relative;
	z-index: 2
}
.mm-menu__link--touch-effect {
	display: block;
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	border-radius: 100%;
	text-decoration:none;
	background-color: #effbff;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%
}
.mm-menu__link--touch-effect.animating {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform .5s;
	transition: transform .5s
}
.mm-menu-mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.96);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .5s, visibility .5s;
	transition: opacity .5s, visibility .5s
}
.mm-menu-mask.active {
	visibility: visible;
	opacity: 1
}

.mm_title {
	position: relative;
    width: 300px;
    padding: 5px 25px;
    color: #000000;
    font-size: 16px;
    text-align: right;
}

@media screen and (max-height: 580px){
#addnav{
    display: none;
}
	.carousel-control.left span {
	left: 20%;
}

.carousel-control.right span {
	right: 20%;
}
}
@media screen and (min-height: 667px){
#addnav{
    margin-top: 25px;
}
}
@media screen and (max-height: 800px){
#addnav{
    margin-top: 30px;
}
}


#addnav{
	font-family: "globersemibold_free", helvetica, arial, sans-serif;
	font-size:20px;	
	border-top: 1px #00ccff solid;
	padding-top:20px;
	bottom:5%;
	color:#B8B8B8;
	position: absolute;
	margin:25px;
	width:250px;
	height: 100px;
	background-color: #fff;
	text-align:left;
}

#addnav span{
	font-family: 'globerthin_free', helvetica, arial, sans-serif;
	font-size:14px;
}

#addnav strong{
	color:#000000;
	font-size: 16px;
	padding-bottom: 10px;
}


@media screen and (max-width:1920px){
.mm-menu__link {
	font-family: 'globerthin_free', helvetica, arial, sans-serif;
	display: block;
	position: relative;
	overflow: hidden;
    padding: 5px 0px 15px 30px;
	text-align:left;
	color: #00ccff;
	line-height: 0.9;
	font-weight:bold;
	font-size: 50px;
	text-decoration: none;
	-webkit-transition: background .5s, color .5s;
	transition: background .5s, color .5s
}
.mm-menu__links {
	font-family: 'globersemibold_free', helvetica, arial, sans-serif;
	display: block;
	position: relative;
	overflow: hidden;
    padding: 5px 0px 5px 30px;
	text-align:left;
	color: #999;
	line-height: 0.9;
	font-size: 18px;
	text-decoration: none;
	-webkit-transition: background .5s, color .5s;
	transition: background .5s, color .5s
}
	
	
#addnav{
	font-family: "globersemibold_free", helvetica, arial, sans-serif;
	font-size:16px;	
	border-top: 1px #00ccff solid;
	padding-top:20px;
	color:#B8B8B8;
	position: absolute;
	margin:25px;
	width:250px;
	height: 100px;
	background-color: #fff;
	text-align:left;
}

}

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

Mouse

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

#main-scllmouse {
    bottom: 37px;
    border: 2px solid #000;
    width: 26px;
    height: 36px;
    border-radius: 100px;
    background-size: 225%;
    -webkit-animation: nudgeMouse 5s ease-out infinite;
    animation: nudgeMouse 5s ease-out infinite;
    transition: all .3s cubic-bezier(.455, .03, .515, .955)
}
#main-scllmouse.not-active {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
}
html:not(.mobile-platform) #main-scllmouse:hover {
    border-color: #20AA97
}
#main-scllmouse, #scroll-to-top {
    background: 0 0;
    position: absolute;
    cursor: pointer;
    z-index: 9;
    margin: 0 auto;
    padding: 0;
    left: .5px;
    right: 0
}

#main-scllmouse, #main-scllmouse:after, .btn-nav-main {
    -webkit-transition: all .3s cubic-bezier(.455, .03, .515, .955)
}

#main-scllmouse, #scroll-to-top {
    pointer-events: none
}

#main-scllmouse:after, #main-scllmouse:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}
#main-scllmouse:before {
    width: 22px;
    height: 32px;
    border-radius: 100px;
}
#main-scllmouse:after {
    background-color: #000;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    -webkit-animation: trackBallSlide 5s linear infinite;
    animation: trackBallSlide 5s linear infinite;
    transition: all .3s cubic-bezier(.455, .03, .515, .955);
}
html:not(.mobile-platform) #main-scllmouse:hover:after {
    background-color: #20AA97
}


@-webkit-keyframes trackBallSlide {
0%, 28%, 29.99%, 30% {
opacity:1;
-webkit-transform:scale(1) translateY(-6px);
transform:scale(1) translateY(-6px)
}
6% {
opacity:1;
-webkit-transform:scale(.9) translateY(5px);
transform:scale(.9) translateY(5px)
}
14% {
opacity:0;
-webkit-transform:scale(.4) translateY(16px);
transform:scale(.4) translateY(16px)
}
15%, 19% {
opacity:0;
-webkit-transform:scale(.4) translateY(-6px);
transform:scale(.4) translateY(-6px)
}
36% {
opacity:1;
-webkit-transform:scale(.9) translateY(5px);
transform:scale(.9) translateY(5px)
}
44% {
opacity:0;
-webkit-transform:scale(.4) translateY(16px);
transform:scale(.4) translateY(16px)
}
45%, 49% {
opacity:0;
-webkit-transform:scale(.4) translateY(-6px);
transform:scale(.4) translateY(-6px)
}
58%, 59.99%, 60% {
opacity:1;
-webkit-transform:scale(1) translateY(-6px);
transform:scale(1) translateY(-6px)
}
66% {
opacity:1;
-webkit-transform:scale(.9) translateY(5px);
transform:scale(.9) translateY(5px)
}
74% {
opacity:0;
-webkit-transform:scale(.4) translateY(16px);
transform:scale(.4) translateY(16px)
}
75%, 79% {
opacity:0;
-webkit-transform:scale(.4) translateY(-6px);
transform:scale(.4) translateY(-6px)
}
100%, 88% {
opacity:1;
-webkit-transform:scale(1) translateY(-6px);
transform:scale(1) translateY(-6px)
}
}
@keyframes trackBallSlide {
0%, 28%, 29.99%, 30% {
opacity:1;
-webkit-transform:scale(1) translateY(-6px);
transform:scale(1) translateY(-6px)
}
6% {
opacity:1;
-webkit-transform:scale(.9) translateY(5px);
transform:scale(.9) translateY(5px)
}
14% {
opacity:0;
-webkit-transform:scale(.4) translateY(16px);
transform:scale(.4) translateY(16px)
}
15%, 19% {
opacity:0;
-webkit-transform:scale(.4) translateY(-6px);
transform:scale(.4) translateY(-6px)
}
36% {
opacity:1;
-webkit-transform:scale(.9) translateY(5px);
transform:scale(.9) translateY(5px)
}
44% {
opacity:0;
-webkit-transform:scale(.4) translateY(16px);
transform:scale(.4) translateY(16px)
}
45%, 49% {
opacity:0;
-webkit-transform:scale(.4) translateY(-6px);
transform:scale(.4) translateY(-6px)
}
58%, 59.99%, 60% {
opacity:1;
-webkit-transform:scale(1) translateY(-6px);
transform:scale(1) translateY(-6px)
}
66% {
opacity:1;
-webkit-transform:scale(.9) translateY(5px);
transform:scale(.9) translateY(5px)
}
74% {
opacity:0;
-webkit-transform:scale(.4) translateY(16px);
transform:scale(.4) translateY(16px)
}
75%, 79% {
opacity:0;
-webkit-transform:scale(.4) translateY(-6px);
transform:scale(.4) translateY(-6px)
}
100%, 88% {
opacity:1;
-webkit-transform:scale(1) translateY(-6px);
transform:scale(1) translateY(-6px)
}
}



#main-scllmouse, #scroll-to-top {
    left: 0
}
#main-scllmouse:before {
    width: 20px;
    height: 28px
}

#main-scllmouse {
    position: sticky;
    bottom: 0px;
    width: 22px;
    height: 30px
}
#main-scllmouse:before {
    width: 18px;
    height: 26px
}

html.mobile-platform #main-scllmouse {
    display: none
}


.mouse {
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    bottom: 5px;
    width: 30px;
    margin-left: -15px;
    height: 48px;
    border-radius: 15px;
    border: 2px solid #000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.mouse__wheel {
    position: absolute;
    left: 50%;
    top: 8px;
    margin-left: -2px;
    width: 4px;
    height: 9px;
    background: #000;
    border-radius: 2px;
    -webkit-animation: mouse-wheel 1.25s infinite linear;
    animation: mouse-wheel 1.25s infinite linear;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

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

Social

-------------------------------- */
.social{
	padding: 20px 0px;
}
.social img{
	width: 40px;
}
@media (min-width: 320px) and (max-width: 480px) {
.social img{
	width: 20px;
}
}



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

service

-------------------------------- */
.service{
	font-size: 1.5em;
	padding: 20px 0px;
}
.service img{
	width: 100px;
}
@media (min-width: 320px) and (max-width: 812px) {
.service img{
	width: 70px;
}
	.service h5{
		font-size: 50%;
	}
}

.serv{
    height: 320px;
    padding: 200px 0px;
    z-index: 2000;
}


.card {
    top: 0%;
    left: 45%;
    -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0);
    transform: translateX(-50%) translateY(-50%) translateZ(0);
    background-color: #fff;
    box-shadow: 0 11px 40px -27px #000;
    overflow: hidden;
    flex-direction: unset;
    border: none;
    -webkit-transition: box-shadow 0.5s;
    transition: box-shadow 0.5s;
}

.card a {
    color: inherit;
    text-decoration: none;
}

.card:hover {
    
  background-image: -webkit-gradient(linear,left top,right top,from(#34c6f4),to(#7739d3)),-webkit-gradient(linear,left top,left bottom,from(#34c6f4),to(#9d69ea));
    background-image: linear-gradient(45deg,#34c6f4,#7739d3),linear-gradient(180deg,#34c6f4,#9d69ea);
    box-shadow: 0 20px 40px -18px #2d88f2;
    border-radius: 10px;
}




.card__thumb {
    height: 245px;
    overflow: hidden;
    background-color: #000;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}



.card__body {
    position: relative;
    height: 185px;
    padding: 20px;
    width: 100%;
    text-align: left;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.card:hover .card__body {
    height: 350px;
    color: #fff;
}

.card__category {
    position: absolute;
    top: -25px;
    left: 0;
    height: 25px;
    padding: 0 15px;
    background-color: coral;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 25px;
}
#section .card__title {
    margin-bottom: 0;
}
.card__title {
    margin-bottom: 0;
    padding: 0 0 10px 0;
    background: -webkit-linear-gradient(90deg,#34c6f4,#7739d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: "Droid Sans", sans-serif;
    font-size: 75px !important;
    font-weight: bold;
    text-transform: uppercase;
}

.card:hover .card__title {
    background: -webkit-linear-gradient(90deg,#fff,#fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 30px;
  opacity: 0.5;
}

.card__subtitle {
    margin: 0;
    padding: 0 0 50px 0;
    font-size: 24px;
  font-weight: bold;
    color: #444;
}

.card:hover .card__subtitle {
    padding-bottom: 10px;
    color: #fff;
}

.card__description {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 50px;
    margin: 0;
    padding: 0;
    font-size: 0.5em;
     color: #fff;
    line-height: 35px;
    opacity: 0.0;
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.card:hover .card__description {
    opacity: 0.8;
    color: #fff;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


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

Work components 

-------------------------------- */
main {
  position: relative;
  z-index: 2;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
}
main.slide-out {
  /* the main element slides to the left when the author study is visible */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
main.slide-out .overlay {
  /* the overlay layer gets visible when the author study slides in */
  display: block;
  -webkit-animation: fade-in 1s;
  -moz-animation: fade-in 1s;
  animation: fade-in 1s;
}
@media only screen and (min-width: 768px) {
  main.slide-out {
    /* change in size of the author study section */
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@media only screen and (min-width: 1200px) {
  main.slide-out {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

#section0{
    background-image: radial-gradient(circle farthest-side at 120% -234%,#f7f7f7 700%,transparent)
}

.section {
  text-align: center;
}
.section .container {
  /* this modifies the .container default max-width */
	max-width: 90%;
	padding-top: 5%;
	padding-right: auto;
	padding-left: auto;
	padding-bottom: 5%;
	margin: auto;
}
.section h2 {
  font-family: "Droid Sans", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1em;
  font-size: 20px;
  font-size: 1.25rem;
}
.section p {
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .section {
    padding: 0em;
  }
}
@media only screen and (min-width: 1200px) {
  .section {
    margin: 0;
  }
  .section h2 {
    margin-bottom: 2em;
  }
  .section p {
    font-size: 18px;
    font-size: 1.125rem;
  }
}


.placeholder-1 {
border-top: 1px solid #f3f3f3;
  background: #fff;
  color: #333;
}

.placeholder-2 {
border-top: 1px solid #f3f3f3;
  background: #FFF;
}



#projects h2 {
  color: #1a2f2a;
}
#projects li {
  box-shadow: 0 0 10px rgba(92, 75, 81, 0);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.no-touch #projects li:hover {
  box-shadow: 0 0 10px rgba(92, 75, 81, 0.3);

}
.no-touch #projects li:hover .img-overlay {
  opacity: 1;
}


#projects figure {
  position: relative;
}
#projects img {
  display: block;
  width: 100%;
}

#projects img:hover {
  display: block;
  width: 100%;


}
#projects .img-overlay {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background-image: linear-gradient(45deg, rgba(209,107,165,0.9), rgba(119,57,211,0.9));
  background: -webkit-linear-gradient(45deg, rgba(209,107,165,0.9), rgba(119,57,211,0.9));
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
-webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
#projects .img-overlay span {
  position: absolute;
  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%);
  color: #FFF;
}
#projects .case-info {
  height: 80px;
  color: #FFF;
  text-align: center;
  font-family: "Droid Sans", sans-serif;
  font-weight: bold;
  padding-top: 20px;
  border-radius: 0 0 .25em .25em;
}
#projects .case-info span {
  display: block;
  font-family: "Droid Serif", serif;
  font-weight: normal;
  color: #999999;
  font-size: 14px;
  font-size: 0.875rem;
  margin-top: .5em;
}
@media only screen and (min-width: 768px) {
  #projects li {
    width: 50%;
	height: 50vh;
    float: left;
  }
  #projects li:nth-child(3n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 1024px) {
  #projects li {
    width: 50%;
	height: 50vh;
    float: left;
  }
}
@media only screen and (min-width: 812px) {
  #projects li {
    width: 50%;
	height: 50vh;
    float: left;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  #projects li {
    width: 100%;
	height: 50vh;
    float: left;
  }
}
/* -------------------------------- 

work

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

@media (min-width: 320px) and (max-width: 480px) {
#projects .work{
	background-size: cover;
}

}


@media (min-width: 768px) {
#projects .work{
	background-size: cover;
}

}

.case-study-1{
  background: url(../img/case/project1.jpg) no-repeat 50% 50%;
  opacity: 1;
  background-size: 100%;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
    
}



.case-study-2{
  background: url(../img/case/project.jpg) no-repeat 50% 50%;
  opacity: 1;
  background-size: 100%;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.case-study-3{
  background: url(../img/case/project3.jpg) no-repeat 50% 50%;
  opacity: 1;
  background-size: 100%;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.case-study-4{
  background: url(../img/case/project4.jpg) no-repeat 50% 50%;
  opacity: 1;
  background-size: 100%;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.case-study-5{
  background: url(../img/case/project5.jpg) no-repeat 50% 50%;
  opacity: 1;
  background-size: 100%;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.case-study-6{
  background: url(../img/case/projec6.jpg) no-repeat 50% 50%;
  opacity: 1;
  background-size: 100%;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}






.case-study {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* smooth scrolling on mobile phones and tablets */
  -webkit-overflow-scrolling: touch;
  background: #5c4b51;
  z-index: 1;
  /* this how we move the author study section off the canvas */
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
}
.case-study.slide-in {
  /* the author study section slides in when the user clicks on the projects case picture */
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.case-study .case-study-pict {
  position: relative;
}

 .case-study .case-study-pict img {
    width: 100%;
    display: block;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
    transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
}
.case-study .case-study-pict::after {
  /* gradient at the bottom of the image - same color of the background of the section */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: -webkit-linear-gradient( bottom , #5c4b51, rgba(92, 75, 81, 0));
  background: linear-gradient(to top, #5c4b51, rgba(92, 75, 81, 0));
}
.no-cssgradients .case-study .case-study-pict::after {
  display: none;
}
.case-study img {
  width: 100%;
  display: block;
    
}
.case-study .study-content {
  padding: 1em;
  color: #FFF;
}
.case-study .study-content h1 {
  font-family: "Droid Sans", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  font-size: 1.25rem;
}
.case-study .study-content p {
  font-size: 14px;
  font-size: 0.875rem;
  margin: 1em 0;
  line-height: 1.4;
  color: #d7cfd2;
}
@media only screen and (min-width: 768px) {
  .case-study {
    width: 100%;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  .case-study .study-content {
    padding: 2em;
  }
  .case-study .study-content p {
    line-height: 1.6;
    margin: 2em 0;
  }
}
@media only screen and (min-width: 1200px) {
  .case-study {
    width: 100%;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  .case-study .case-study-pict::after {
    height: 0px;
  }
  .case-study .study-content {
    padding: 4em;
    /* we move the content up so the title is over the color gradient */
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);
  }
  .case-study .study-content h1 {
    font-size: 40px;
    font-size: 2.5rem;
  }
  .case-study .study-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .no-cssgradients .case-study .study-content {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

.case-study-close {
  width: 32px;
  height: 32px;
  overflow: hidden;
  position: fixed;
  top: 150px;
  left: 10px;
  background: url(../img/cd-icon-close.svg) no-repeat center center;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 3;
  display: none;
}
.case-study-close.is-visible {
  display: block;
  -webkit-animation: move-in 1s;
  -moz-animation: move-in 1s;
  animation: move-in 1s;
}
@media only screen and (min-width: 1200px) {
  .case-study-close {
    left: 20px;
    top: 150px;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: rgba(138, 190, 178, 0.8);
  cursor: pointer;
  display: none;
}

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

xkeyframes 

-------------------------------- */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes move-in {
  0% {
    -webkit-transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes move-in {
  0% {
    -moz-transform: translateX(100px);
  }

  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes move-in {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

@media (max-width: 736px){
	#header img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80px;
    max-width: 140px;
    float: left;
	margin-left:2%;
		}
		
h1{
	width: 100%;
	font-size: 28px;
}
h2{
	width: 100%;
	font-size: 24px;
}
    
.section .intro p{
	width: 90%;
	font-size: 1em;
}
.section .other p{
	width: 90%;
	font-size: 1em;
}   
    
    .other-height{
        height: 60% !important;
    }    
    
.intro p{
	width: 80%;
	font-size: 12px;
}

#section4 h1{
	width: 100%;
	font-size: 24px;
}

 p{
	font-size: 12px;
}

.fp-controlArrow.fp-prev {
	top: 80%;
	width: 1em;
	height: 1em;   
}
.fp-controlArrow.fp-next {
	top: 80%;
	width: 1em;
	height: 1em;      
}	
}

.mm-menu__link {
    font-family: 'glober_semibold', helvetica, arial, sans-serif;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 5px 0px 15px 30px;
    text-align: left;
    color: #00ccff;
    line-height: 0.9;
    font-weight: bold;
    font-size: 30px;

}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 414px) {
#section0{
		background-image: url(../imgs/homev.jpg);
		background-position: center center;
		padding: 0 0 0 0;
}
#section2 h1{
	width: 100%;
	font-size: 24px;
}
#section2 h2{
	width: 100%;
	font-size: 18px;
}
#section2 .intro p{
	width: 80%;
	font-size: 12px;
}
#section3{
		background-image: url(../imgs/4v.jpg);
		background-position: center center;
		padding: 0 0 0 0;
}
#section3  p{
	font-size: 12px;
}
#section3  h4{
	font-size: 14px;
}

#section4 h1{
	padding-top: 40px;
	width: 100%;
	font-size: 24px;
}

#section4  p{
	font-size: 12px;
}


#header img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80px;
    max-width: 140px;
    float: left;
	margin-left:2%;
		}
		
.fp-controlArrow.fp-prev {
	top: 80%;
	width: 1em;
	height: 1em;   
}
.fp-controlArrow.fp-next {
	top: 80%;
	width: 1em;
	height: 1em;      
}
#section5  p{
	font-size: 10px;
}
}

@media only screen and (max-width : 320px) {
	
#section3  p{
	font-size: 10px;
}
#section3  h4{
	font-size: 14px;
}

#header img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80px;
	max-width: 100px;
	float: left;
	margin-left:5%;
}
.fp-controlArrow.fp-prev {
	top: 80%;
	width: 1em;
	height: 1em;   
}
.fp-controlArrow.fp-next {
	top: 80%;
	width: 1em;
	height: 1em;      
}
}








.card:hover .card__thumb {
    height: 130px;
}

.card:hover .card__thumb img {
    opacity: 0.6;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}