body {
  background-color: #f9f9f9;
  margin: 0;
}
::selection {
  background: #4b3ed4;
  color:white;
}
::-moz-selection {
  background: #4b3ed4;
  color:white;
}
a {
  text-decoration:none;
  color:#282828;
  position: relative;
}
.description a {
	text-decoration: none;
  color:#4b3ed4;
}
.description a:hover {
	color:white;
  background: #4b3ed4;
}
/* main */

.maincont {
  position: absolute;
  padding: 10px 0px;
  width: 100%;
}

/*Slideshow*/

.cycle-slideshow img { display: none }
.cycle-slideshow img.first { display: block }

.cycle-slideshow video { display: none }
.cycle-slideshow video.first { display: block }

.cycle-slideshow {
  max-width: 57%;
  margin: auto;
  z-index: 10;
}
.cycle-slideshow img {
  width: 100%;
  height: auto;
}
.cycle-slideshow video {
  width: 100%;
  height: auto;
}
.cycle-prev {
	height: 100%;
	width: 35%;
	top: 0;
	position: absolute;
	z-index: 9999;
  cursor:url(../icon-arrow-left.png), auto;
  cursor: -webkit-image-set( url('../icon-arrow-left.png') 1x, url('../icon-arrow-left.png') 2x), auto;
}
.cycle-next {
	height: 100%;
	margin-left: 15%;
	width: 35%;
	left: 50%;
	top: 0;
	position: absolute;
	z-index: 9999;
  cursor: url(../icon-arrow-right.png), auto;
  cursor: -webkit-image-set( url('../icon-arrow-right.png') 1x, url('../icon-arrow-right.png') 2x), auto;
}
.title {
  font-size: 22px;
  max-width: 57%;
  margin: 0 auto;
  position: relative;
  padding: 25px 0px 0px 0px;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase;
  font-style: italic;
  font-weight:900;
}
.title2 {
  font-size: 22px;
  max-width: 57%;
  margin: 0 auto;
  position: relative;
  padding: 125px 0px 0px 0px;
  font-family: 'Montserrat', sans-serif !important;
  text-transform: uppercase;
  font-style: italic;
  font-weight:900;
}
.counter {
  font-family: 'Roboto Mono', monospace;
  font-style: italic;
  text-transform: none;  
  font-weight:300;
  font-size: 15px;
  position: absolute;
  right: 0;
}
.features{
  font-family: 'Roboto Mono', monospace;
  font-style: italic;
  text-transform: none;  
  font-weight:300;
  font-size: 13px;
}
#aboutd {
  padding: 25px 0px 0px 0px;
}
.description {
  font-family: 'Open Sans', serif;
  font-weight: 300;
  color: #282828;
  font-size: 15px;
  font-style: normal;
  position: relative;
  max-width: 57%;
  margin: 0 auto;
  line-height: 24px;
  padding: 25px 0px;
}

/* X BOX */
#thex {
  height: 2vw;
  min-height: 20px;
}
.thexstroke {
  fill:#f9f9f9;
  stroke:#282828;
  stroke-width:25;
  stroke-miterlimit:10;
}
.thexstroke:hover {
  stroke:#4b2de5;
}
.header_x {
  position: fixed;
  right: 10%;
  top: 10px;
  display: inline;
  z-index:100000;
}

/* LOGO */

.header_l {
  position: fixed;
  left: 10%;
  top: 10px;
  display: inline;
  z-index:100000;
}
#logo {
  fill:#282828;
  height: 2vw;
  min-height: 20px;
}
#logo:hover {
  fill:#4b2de5;
  -webkit-transition: fill .2s ease-in-out;
  transition: fill .2s ease-in-out;
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
}

/* animations */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
}
@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown2 {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}
@-webkit-keyframes fadeInDown2 {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.fadeInUp2 {
  -webkit-animation-name: fadeInUp2;
  animation-name: fadeInUp2;
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.fadeInDown2 {
  -webkit-animation-name: fadeInDown2;
  animation-name: fadeInDown2;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* iPHONE */

@media only screen
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .cycle-slideshow, .title, .title2, .description {
      max-width: 80%;
    }
    .maincont {
      position: absolute;
      padding: 40px 0px 10px 0px;
      width: 100%;
    }
    .wrapper {
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width:80%;
  	position:fixed;
  	background-color: #f9f9f9;
  	z-index:9999;
  	padding:18px 0;
    }
    .title, .title2, .counter, .features, .description {
      font-size: 10px;
      line-height: 16px;
    }
}

@media only screen
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape) { 
    .cycle-slideshow, .title, .title2, .description {
      max-width: 80%;
    }
    .maincont {
      position: absolute;
      padding: 40px 0px 10px 0px;
      width: 100%;
    }
    .wrapper {
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width:80%;
  	position:fixed;
  	background-color: #f9f9f9;
  	z-index:9999;
  	padding:18px 0;
    }
    .title, .title2, .counter, .features, .description {
     font-size: 10px;
     line-height: 16px;
    }
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}