html {
    height: 100vh;
    background: #ac3c3c;}
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;}
html, body {
	line-height: 1;
	min-height:100%;
	font-family:Artial, Verdana, sans-serif;}
body {
/*	background: #121834;
	background: -webkit-linear-gradient(top, #3c4fac, #7c91ff 100%);
	background: -moz-linear-gradient(top, #3c4fac, #7c91ff 100%);
	background: -o-linear-gradient(top, #3c4fac, #7c91ff 100%);
	background: -ms-linear-gradient(top, #3c4fac, #7c91ff 100%);
	background: linear-gradient(top, #3c4fac, #7c91ff 100%);
	background-attachment:fixed;*/
	height: 100vh;}
ol, ul {list-style: none;}
p {	margin:1em 0;
	line-height:1.1em;}
q {	font-style:italic;
	color:#333;}
h1 {	font-size:2.91em;
	margin:0;}
h1 > small {
	text-align:right;
	display:inline-block;
	font-size:.71em;
	text-indent:15em;
	color:#444;}
h2 {	color:inherit;
	font-size:1.91em;
	margin:2em 0 1em 0;}
h2:first-child {
	margin-top:0;
	font-size: 65px;}
h3 {	color:#333;
	font-size:1.41em;
	margin:1em 0;}
h4 {	color:#444;
	font-size:1.11em;
	margin:1em 0;}
.container {
        -ms-overflow-style: none;
        scrollbar-width: none; }
.container::-webkit-scrollbar { display:none;}
#progress {
	height:2%;
	background:#444;
	bottom:0;
	z-index:200;}
#scrollbar {
	position:fixed;
	right:2px;
	height:50px;
	width:6px;
	background:#444;
	background:rgba(0,0,0,0.6);
	border:1px solid rgba(255,255,255,0.6);
	z-index:300;
	border-radius:3px;}
.skrollr-desktop #scrollbar {display:none;}
#bg1, #bg2, #bg3 {
	z-index:50;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/bubbles.png) repeat 0 0;}
#bg2 {	z-index:49;
	background-image:url(images/bubbles2.png);}
#bg3 {	z-index:48;
	background-image:url(images/bubbles3.png);}
#intro {width:100%;
	height: 100vh;
	left:50%;
	top:0;
	margin-left:-50%;
	padding:2em;
	background: #fff;
	text-align:center;
	border-radius:0;
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform-origin:0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
#intro .arrows {
	font-size:2em;
	color:#09f;}
#transform {
	width: 94%;
	left: 0;
	top: 20vh;
	margin-left: 2%;
/*	text-align:center;*/
	text-align: left;
	font-size:150%;
	color: #fff;
	.transform-origin(50%, 50%);}
#properties {
	width:100%;
	height:100%;
	padding-top:20vh;
	text-align:center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;}
#easing_wrapper {
	width:100%;
	height:100%;}
#easing {
	top:5vh;
	width:70%;
	z-index:101;
	color: #fff;}
#easing h2 {	max-width: max-content;
		text-align: center;}
.drop {	background:#09f;
	font-weight:bold;
	padding:1em;}
#download {
	width:80%;
	left:10%;
	height:80%;
	padding:3em;
	border:0 solid #222;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
.twitter-share-button,
.twitter-follow-button { vertical-align:middle;}
#contact a {
	color: #131935;
	position: fixed;
	top: 40px;
	right: 30px;
	z-index: 200;
	font-size: 14px;
	font-weight: bold;
	background: #fff;
	padding: 38px 0;
	line-height: 1;
	width: 90px;
	text-align: center;
	border-radius: 50px;}
.featherlight-sample { display: none;}
@keyframes TopToBottom {
  0% {	opacity: 1;
	transform: scale(20);
	width: 100%;}
  100% {opacity: 1;
	transform: scale(1);
	width: 100%;}
  }
.zoomout {
	text-align: center;
	opacity: 0;
	animation-duration: 1s;
	animation-delay : 0s;
	animation-name: TopToBottom;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;}
#intro2Box {
	overflow: hidden;
	width: 100%;
	max-height: 100vh;}
#intro2 div { text-align: center;}
#intro2 div p { font-size: 16px;}
#intro2 .scroll {
    position: absolute;
    top: 200%;
    left: 0;
    right: 0;
}
#intro2 .scroll p {
    font-size: 12px;
}
#intro2 .scroll p:before {
    content: "";
    height: 50px;
    border-right: solid 1px;
    display: block;
    width: 1px;
    text-align: center;
    margin: 0 auto;
}
#intro2 .scroll p:after {
    content: "";
    border-right: solid 1px;
    height: 15px;
    width: 1px;
    position: absolute;
    top: 37px;
    right: -10px;
    left: 0;
    margin: 0 auto;
    display: block;
    transform: rotate(45deg);
}

#intro2 img,
#intro2-2 img { width: 100%;}

#intro2 img {
    width: 60%;
    margin: 0 auto;
    text-align: center;}
#intro2-2 p {
	font-size: 12px;
	color: #fff;}
#easing_wrapper h2 span,
#properties h2 span {
	font-size: 16px;
	display: block;
	margin: 10px;}
.ConceptBox { width: 100%;}
.ConceptTxt {
	width: 50%;
	display: inline-block;
	vertical-align: top;}
.ConceptTxt p {
	width: 80%;
	line-height: 2;}
.ConceptImg {
	width: calc(100% - 51%);
	display: inline-block;
	vertical-align: top;}
.PropertiesTxt {
	width: 50%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 5% 0 0;}
.PropertiesTxt p {
    width: 80%;
    margin: 0% 0 10px 10%;
    font-size: 15px;
    padding: 0 0 0 15px;
    text-indent: -15px;
    line-height: 2;}
.PropertiesImg {
	width: calc(100% - 54%);
	margin: 0 0 0 3%;
	display: inline-block;
	vertical-align: top;
	float: left;}
.PropertiesImg img { width: 100%;}
#easing .easingTxt { text-align: center;}
#easing div { margin: 30px auto 0;}
#easing div p {
	display: inline-block;
	width: calc(100% - 70%);
	vertical-align: top;
	margin: 0 1%;}
#easing div p span {
	display: block;
	text-align: center;
	color: #2a3466;
	font-weight: bold;
	border-radius: 3px;
	margin: 0 0 10px 0;
	padding: 2%;}
#properties .properties2 { width: 90%;}
#properties .properties2 h2:first-child { margin: 0 0 0.7em;}
#properties .properties2 p {
	line-height: 2;
	margin: 0 0 20px;}
#download h2 { color:#fff;}
.downP {width: 50%;
	display: inline-block;
	vertical-align: top;}
.downP p { line-height: 2;}
.downI {width: calc(100% - 51%);
	display: inline-block;
	vertical-align: top;}
.downI iframe {
	width: 100%;
	height: 350px;}
.footer{text-align: center;
	margin: 30px 0 0;}
.footer img {
	width: 100px;
	margin: 0 auto;}
.footer p {
	color: #fff;
	display: block;
	font-size: 15px;
	line-height: 2;}
.footer p small { font-size: 12px;}

.pcBlock { display: block !important;}
.spBlock { display: none !important;}

@media screen and (max-width: 900px) {
	.ConceptImg { width: calc(100% - 52%);}
	.ConceptImg img { width: 100%;}
	.ConceptTxt p {
	    font-size: 18px;
	    line-height: 1.8;}
	.PropertiesTxt {  margin: 0% 0 0;}
}
@media screen and (max-width: 640px) {
#intro2-2 { left: 5% !important;}
	#transform {
	    width: 90%;
	    margin-left: 5%;}
	#contact a {
	    top: 10px;
	    right: 10px;
	    font-size: 11px;
	    padding: 29px 0;
	    width: 70px;}
	.ConceptTxt {
	    width: 90%;
	    margin: 0 auto;
	    display: block;}
	.ConceptTxt p {
		font-size: 13px;
		width: 100%;}
	.ConceptImg { width: 100%;}
	#transform h2:first-child {
	    margin-top: 0;
	    font-size: 35px;}
	#easing {
	    top: 15vh !important;
	    width: 90% !important;
	    left: 5% !important;
	    z-index: 101;
	    color: #fff;}
	#easing h2:first-child {
	    margin-top: 0;
	    font-size: 35px;
	    margin: 0 auto;}
	#easing div p {
	    display: block;
	    width: calc(100%);
	    vertical-align: top;
	    margin: 0 1% 15px;
	    font-size: 12px !important;
	    clear: both;}
	#easing div p span {
	    display: inline-block;
	    text-align: center;
	    background: #fff;
	    color: #2a3466;
	    font-weight: bold;
	    border-radius: 3px;
	    margin: 0 10px 10px 0;
	    padding: 4% 2%;
	    float: left;
	    min-width: 100px;}
	#easing .easingTxt { font-size: 14px;}
	#easing_wrapper h2 span { font-size: 14px;}
	#properties h2:first-child { font-size: 35px;}
	#properties h2 span { font-size: 14px;}
	#properties { padding-top: 15vh;}
	#properties .properties2 h2:first-child { font-size: 35px;}
	#properties .properties2 p {
	    line-height: 1.8;
	    margin: 0 auto 15px !important;
	    font-size: 14px;
	    width: 90%;
	    margin: 0 auto;}
	.PropertiesTxt { width: 100%;}
	.PropertiesImg {
	    width: 90%;
	    margin: 20px 5%;
	    float: none;}
	.PropertiesTxt p {
	    width: 80%;
	    margin: 0% 0 5px 10%;
	    font-size: 13px;
	    line-height: 1.4;}
	#download {
	    width: 90%;
	    top: 15vh !important;
	    left: 5%;
	    height: 80%;
	    padding: 1em 1em 0;}
	#download h2:first-child {
	    margin-top: 0;
	    font-size: 35px;
	    margin: 0em 0 0.5em 0;}
	.downP p {
	    line-height: 1.4;
	    font-size: 14px;}
	.downI {
	    width: 100%;
	    display: inline-block;
	    vertical-align: top;}
	.downI iframe {
	    width: 100%;
	    height: 200px;}
	.downP {
	    width: 100%;
	    display: inline-block;
	    vertical-align: top;}
	.spBlock { display: block !important;}
	.pcBlock { display: none !important;}
}
@media screen and (max-width: 450px) {
	#properties .properties2 p {
	    line-height: 1.5;
	    font-size: 13px;}
	.downI iframe {
	    width: 100%;
	    height: 150px;}
	.downP p {
	    line-height: 1.4;
	    font-size: 13px;}
	.footer p {
	    font-size: 12px;
	    line-height: 2;}
}
@media screen and (max-width: 335px) {
	#intro2-2 {
	    top: 3% !important;
	    left: calc(5%) !important;}
	h2:first-child {
	    font-size: 35px;
	    margin: 0 0 0.7em 0;}
	#transform {
	    width: 100%;
	    margin-left: 0%;}
	#transform h2:first-child {
	    font-size: 8vh;
	    margin: 0 0 0 5%;}
	.ConceptTxt {
	    width: 90%;
	    margin: 0 0 0 5%;}
	.ConceptTxt { width: 90%;}
	.ConceptTxt p {
	    font-size: 13px;
	    width: 100%;
	    line-height: 1.4;
	    margin: 2em 0;}
	.ConceptImg { width: 100%;}
	.PropertiesImg {
	    width: 100%;
	    margin: 20px 0 0 0%;
	    display: inline-block;
	    vertical-align: top;
	    float: none;}
	.PropertiesTxt { width: 100%;}
	.PropertiesTxt p {
	    width: 86%;
	    margin: 0% 0 4px 5%;
	    font-size: 13px;
	    padding: 0 0 0 15px;
	    text-indent: -15px;
	    line-height: 1.4;}
	#easing h2:first-child { font-size: 30px;}
	h2 span { font-size: 12px;}
	#easing .easingTxt { font-size: 13px;}
	#easing div p {
	    line-height: 1.3 !important;
	    font-size: 11px !important;}
	#easing div p span {
	    margin: 0 10px 0px 0;
	    padding: 2% 2%;}
	#properties .properties2 p {
	    line-height: 1.4;
	    font-size: 13px;}
	.downP p { font-size: 12px;}


}