@import url(reset.css);

@font-face {
    font-family: 'Roboto';
    src: url('fonts/subset-Roboto-BoldItalic.woff2') format('woff2'),
        url('fonts/subset-Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/subset-Roboto-Black.woff2') format('woff2'),
        url('fonts/subset-Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}





/**
 * ProcesssWire.com site template stylesheet. Prepared for use in the basic site profile.
 *
 * Please feel free to use and/or modify under the same license as ProcessWire.
 *
 * Copyright 2010 by Ryan Cramer Design, LLC
 *
 */

* {
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 900 !important;
}

body, input, textarea, table {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	line-height: 1.6em;
	font-weight: 900;
	color: #000;
	background: #f8dc00;
}

h1, h2, h3, h4,
b, strong {
	font-weight: 900 !important;
}

.header {
	width: 100%;
	padding: 20px;
	position: absolute;
	z-index: 10000;
	display: none;
}

a, span {
	color: #000;
}

.header a {
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
}




.counter {
	font-size: 17px !important;
	color: #ffee35;
	position: absolute;
	right: left;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	line-height: 2rem;
}


.fp-controlArrow.fp-next {
	top: 5px !important;
	left: 55px !important;
	width: 40px !important;
	height: 80px !important;
	margin: 0 !important;
	background: url(images/arr-r.png);
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 40px 40px;
	border: none !important;
	cursor: pointer;
}

.fp-controlArrow.fp-prev {
	top: 5px !important;
	left: 15px !important;
	width: 40px !important;
	height: 80px !important;
	margin: 0 !important;
	background: url(images/arr-l.png);
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 40px 40px;
	border: none !important;
	cursor: pointer;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
background: #000 !important;
}

.slide, .slide_container {
	background-position: center;
	background-size: cover;

}
.slide_container img,
.basic_slide img {
	display: block;
	margin: 0 auto;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
	top: 50% !important;
	left: 50% !important;
}

.text, .info, .logo-text {
	position: absolute;
	right: 0;
	color: #000;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	font-size: 2rem;
	line-height: 2rem;
	z-index: 1001;
	opacity: 0;
	-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.active .info, .active .text, .active .logo-text {
	position: absolute;
	right: 0;
	color: #000;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	font-size: 2rem;
	line-height: 2rem;
	z-index: 1001;
	opacity: 1 !important;
	-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

.text, .logo-text {
	width: 75vh;
}

.web_slide {
	display: flex !important;
	align-items: center;
	justify-content: center;
  background: rgb(226,226,226);
background: -moz-radial-gradient(center, ellipse cover,  rgba(226,226,226,1) 0%, rgba(183,183,183,1) 100%);
background: -webkit-radial-gradient(center, ellipse cover,  rgba(226,226,226,1) 0%,rgba(183,183,183,1) 100%);
background: radial-gradient(ellipse at center,  rgba(226,226,226,1) 0%,rgba(183,183,183,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#b7b7b7',GradientType=1 );

}

.web_slide img {
	position: absolute;
}

.scrollbutton {
	position: absolute;
	bottom: -45px;
	text-align: center;
	width: 100%;
}

@media screen and (max-width:340px) {
	.info, .text, .logo-text {
		position: absolute;
	right: 0;
	color: #000;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	font-size: 1rem;
	line-height: 1rem;
	z-index: 100;
	opacity: 0;
	-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
	}
	.active .info, .active .text, .active .logo-text {
		position: absolute;
	right: 0;
	color: #000;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	font-size: 1rem;
	line-height: 1rem;
	z-index: 100;
	opacity: 1 !important;
	-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
	}

	h2.logo,
	.logo-text h2:first-of-type {
	margin-bottom: 8vw !important;
/*	position: relative;*/
}

	h2.logo:after,
	.logo-text h2:first-of-type:after {
		margin-top: 8vw !important;
		font-size: 1.6rem !important;
	}
}

@media screen and (min-width:341px) and (max-width:640px) {
	.info, .text, .logo-text {
		position: absolute;
	right: 0;
	color: #000;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	font-size: 1.2rem;
	line-height: 1.2rem;
	z-index: 100;
	opacity: 0;
	-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
	}
	.active .info, .active .text, .active .logo-text {
		position: absolute;
	right: 0;
	color: #000;
	transform-origin: 100% 0;
	transform: rotate(-90deg) translate(0, -100%);
	text-align: right;
	padding: 30px;
	font-size: 1.2rem;
	line-height: 1.2rem;
	z-index: 100;
	opacity: 1 !important;
	-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
	}

	h2.logo,
	.logo-text h2:first-of-type {
	margin-bottom: 10vw !important;
/*	position: relative;*/
}

	h2.logo:after,
	.logo-text h2:first-of-type:after {
		margin-top: 10vw !important;
		font-size: 2rem !important;
	}

	#fp-nav {
		display: none;
	}
}

h2.logo,
.logo-text h2:first-of-type {
	margin-bottom: 15vw;
/*	position: relative;*/
}

h2.logo:after,
.logo-text h2:first-of-type:after {
	content: '/';
	display: block;
	margin-top: 15vw;
	font-size: 4rem;
}

.scroll {
	margin: 20px 0 20px 20px !important;
}
.sub-info {
	font-size: 12px;
		-webkit-column-count: 4;
/* Chrome, Safari, Opera */
-moz-column-count: 4;
/* Firefox */
column-count: 4;
-webkit-column-gap: 20px;
/* Chrome, Safari, Opera */
-moz-column-gap: 20px;
/* Firefox */
column-gap: 20px;
}

.spinner {
	max-width: 120px !important;
	max-height: 120px !important;
}

.col-left {
	padding: 20px;
	width: 75%;
	color: #000;
}

.col-right {
	padding: 20px;
	width: 75%;
	color: #000;
}

/*.web_slide img {
	top: 0 !important;
}*/

@media screen and (min-width: 40em) {
	.col-left {
		padding: 20px;
		width: 20%;
		color: #000;
		float: left;
	}

	.col-right {
		padding: 20px;
		width: 50%;
		color: #000;
		float: left;
	}
}

@media screen and (max-width: 62.5em) {

}

@media screen and (max-width: 40em) {


	.fp-controlArrow.fp-next {
	top: 95%;
	}

	.fp-controlArrow.fp-prev {
	top: 95%;
	}


}


.macbook {
  padding: 4% 6%;
  margin: 0 auto;
  max-width: 1600px;
}

.screen {
  background: #000;
  border-radius: 3% 3% 0.5% 0.5% / 5%;
  margin: 0 auto;
  /* for aspect ratio */
  position: relative;
  width: 80%;
}

.screen:before {
  border: 2px solid #cacacc;
  border-radius: 3% 3% 0.5% 0.5% / 5%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8) inset, 0 0 1px 2px rgba(255, 255, 255, 0.3) inset;
  content: "";
  display: block;
  /* for aspect ratio ~67:100 */
  padding-top: 67%;
}

.screen:after {
  content: "";
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  bottom: 0.75%;
  left: 0.5%;
  padding-top: 1%;
  width: 99%;
}

.viewport {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: 4.3% 3.2%;
  background: #333;
}

.base {
  /* for aspect ratio */
  position: relative;
  width: 100%;
}

.base:before {
  content: "";
  display: block;
  /* for aspect ratio ~33:1000*/
  padding-top: 3.3%;
  /* stylin */
  background: linear-gradient(#eaeced, #edeef0 55%, #fff 55%, #8a8b8f 56%, #999ba0 61%, #4B4B4F 84%, #262627 89%, rgba(0, 0, 0, .01) 98%);
  border-radius: 0 0 10% 10%/ 0 0 50% 50%;
}

.base::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.8) 0.5%, rgba(0, 0, 0, 0.4) 3.3%, transparent 15%, rgba(255, 255, 255, 0.8) 50%, transparent 85%, rgba(0, 0, 0, 0.4) 96.7%, rgba(255, 255, 255, 0.8) 99.5%, rgba(0, 0, 0, 0.5) 100%);
  content: "";
  height: 53%;
  position: absolute;
  top: 0;
  width: 100%;
}

.notch {
  background: #ddd;
  border-radius: 0 0 7% 7% / 0 0 95% 95%;
  box-shadow: -5px -1px 3px rgba(0, 0, 0, 0.2) inset, 5px -1px 3px rgba(0, 0, 0, 0.2) inset;
  margin-left: auto;
  margin-right: auto;
  margin-top: -3.5%;
  z-index: 2;
  /* for aspect ratio */
  position: relative;
  width: 14%;
}

.notch:before {
  content: "";
  display: block;
  /* for aspect ratio ~1:10 */
  padding-top: 10%;
}


/* Screenshot Hover Scroll Additions
-------------------------------------------------------------- */

.macbook .viewport {
  transition: background-position 6s ease;
  background-position: 0 0;
  background-size: 100% auto;
  overflow: hidden;
  cursor: pointer;
}

.macbook .viewport:hover {
  background-position: 0 100%;
}

.macbook .viewport:after {
  background: radial-gradient(circle at right bottom, transparent 75%, rgba(255, 255, 255, 0.05) 75%, transparent);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.mockup {
  width: 75%;
  height: 75%;
  margin: 0 auto;
}
/**
 * WireFatalError is a class that ProcessWire will use to output
 * fatal errors in the design, but only if debug mode is on, or if
 * you are logged in as a superuser.
 *
 */
.WireFatalError {
	background: #a30000;
	color: #fff;
	padding: 1em;
	position: relative;
	z-index: 9999;
}