* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select: none;
}

html body {
	width: 100%;
	height:100%;
	position:absolute;
	font-family: 'Apercu', sans-serif;
	font-weight:300;
	padding: 0px;
	margin: 0px auto;
	overflow-x: hidden;
}

@font-face {
  font-family: 'Apercu';
  src: url('../fonts/Apercu.otf')  format('opentype'),
       url('../fonts/Apercu.ttf')  format('truetype');
}

video {
	position:fixed;
	top:50%;
	left:50%;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	transform:translate(-50%, -50%); /* rotateY(180deg) */
	z-index:0;
}

.wraper {
	position: absolute;
	display: table;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center top, rgba(0,171,251,0.75) 0%, rgba(0,171,251,0.75) 45%, rgba(0,126,255,0.75) 80%, rgba(0,126,255,0.75) 100%);
}

.content {
	display: table-cell;
	vertical-align: middle;
	line-height: normal;
}

.brand {
	display: block;
	width: 400px;
	height: 400px;
	margin: 20px auto;
	/*-webkit-transform:translate(-50%,-50%);*/
	border-radius: 100%;
	background: rgba(255,255,255,1);
	box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.15), 0px 4px 80px 0px rgba(0,0,0,0.25);
	-webkit-transition:all linear 200ms;
}

.brand img {
	display: block;
	width: 90%;
	object-fit: contain;
	margin: 0px auto;
	-webkit-transition:all linear 200ms;
}

.brand:hover {
	-webkit-transition:all linear 200ms;
	box-shadow: none;
	background: rgba(0,0,0,0);
}

.brand:hover > img {
	-webkit-filter:grayscale(1) brightness(10);
	-webkit-transition:all linear 500ms;
	-webkit-transform:scale(1.2,1.2);
}

.text {
	width: calc(100% - 40px);
	max-width: 400px;
	height: auto;
	padding: 10px;
	margin: 0px auto;
	color: #fff;
	text-align: center;
}

.text h3 {
	margin: 5px;
	font-size: 16px;
}

.text h2 {
	margin: 5px;
	font-size: 20px;
}

}



.social-icons {
	width: calc(100% - 40px);
	max-width: 600px;
	margin: 0px auto;
}

.social-icons ul {
	width: calc(100% - 40px);
	max-width: 600px;
	height: 80px;
	padding: 0px;
	margin: 0px auto;
	text-align:center;
}

.social-icons ul > li {
	display:inline-block;
	width: 80px;
	height: 80px;
}

.social-icons ul > li > a {
	display:block;
	color:#fff;
	background:rgba(255,255,255,0);
	border: 1px solid #fff;
	/*box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);*/
	border-radius:100%;
	font-size:2rem;
	line-height:4rem;
	height:4rem;
	width:4rem;
}

.social-icons ul > li > a:hover {
	display:block;
	color:#00abfb;
	background:#fff;
	border-radius:100%;
	font-size:2rem;
	line-height:4rem;
	height:4rem;
	width:4rem;
}

form {
	box-shadow: 0px 4px 20px 0px rgba(0,171,255,0.35);
	border-radius: 10px 0px 0px 10px;
}

input[type="email"] {
	-webkit-appearance:none;
	float: left;
	display: inline-block;
	width: calc(100% - 60px);
	height: 60px;
	padding: 0px 20px;
	font-size: 20px;
	color: #00abfb;
	background: rgba(255,255,255,0.75);
	border: none;
	box-shadow: none;
	outline: 0;
	border-radius: 10px 0px 0px 10px;
	border-right: 1px solid #ccc;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	/*box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.35);*/
}

button {
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
	font-size: 20px;
	background: rgba(255,255,255,0);
	border: none;
	color: #00abfb;
	border-radius: 0px 10px 10px 0px;
	outline: 0;
	/*box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.35);*/
	cursor: pointer;
}

button b {
	font-size: 28px;
}

button:active {
	-webkit-transform:scale(0.95,0.95);
	box-shadow: none;
}

a.button {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 20px;
	background: rgba(255,255,255,0.90);
	border: none;
	color: #00abfb;
	border-radius: 0px 10px 10px 0px;
	outline: 0;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	/*box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.35);*/
	cursor: pointer;
	-webkit-transition:all linear 100ms;
}

a.button b {
	font-size: 28px;
}

a.button:active {
	background: #00abfb;
	color: #fff;
}

a.button:active b {
	-webkit-transform:scale(0.95,0.95);
	color: #fff;
}


/*a.button:hover {
	background: #ff0050;
	color: #fff;
	-webkit-transition:all linear 100ms;
}*/



/* RIBBON */
#ribbon {
	width: 180px;
	height: 260px;
	margin: 30px auto 0;
	position: relative;
	overflow: hidden;
}

#ribbon img {
	position: absolute;
	display: block;
	width: 100%;
	object-fit: contain;
	margin: 0px auto;
	z-index: 999;
	left: 50%;
	top: 50%;
	-webkit-transform:translate(-50%,-65%) scale(0.6,1.1) !important;
	-moz-transform:translate(-50%,-65%) scale(0.6,1.1) !important;
	-ms-transform:translate(-50%,-65%) scale(0.6,1.1) !important;
	-o-transform:translate(-50%,-65%) scale(0.6,1.1) !important;
	transform:translate(-50%,-65%) scale(0.6,1.1) !important;
}

#ribbon .inset {
	width: 200px;
	height: 55px;
	position: absolute;
	top: -50px;
	left: -10px;
	z-index: 5;
	
	-webkit-border-radius: 50%;
	border-radius: 50%;
	
	background: rgba(0,0,0,0.3);
	
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-ms-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-o-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}

#ribbon .container {
	position: relative;
	width: 100px;
	height: 250px;
	overflow: hidden;
	margin: 0 auto;
	-webkit-filter: drop-shadow(0px 5px 0px rgba(255,255,255,0.25));
	filter: drop-shadow(0px 5px 0px rgba(255,255,255,0.25));
}

#ribbon .base {
	height: 200px;
	width: 100px;
	
	background: rgba(255,255,255,1);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
	background: linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(230,230,230,1) 100%);

	position: relative;
	z-index: 2;
}

/*#ribbon .base:after {
	content: '';
	position: absolute;
	top: 0;
	width: 86px;
	left: 6px;
	height: 242px;
	border-left: 1px dashed #ff0050;
	border-right: 1px dashed #ff0050;
}

#ribbon .base:before {
	content: '';
	position: absolute;
	top: 0;
	width: 86px;
	left: 7px;
	height: 242px;
	border-left: 1px dashed #ff0050;
	border-right: 1px dashed #ff0050;
}*/

#ribbon .left_corner {
	width: 100px;
	height: 100px;
	background: rgba(230,230,230,1);
	position: absolute;
	bottom: 20px;
	left: -50px;
	z-index: 1;
	
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#ribbon .right_corner {
	width: 100px;
	height: 100px;
	background: rgba(230,230,230,1);
	position: absolute;
	bottom: 20px;
	right: -50px;
	z-index: 1;
	
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}



/* ********************* */
/* *** MEDIA QUERIES *** */
/* ********************* */

@media (pointer:coarse) and (hover:none){
	/*
	body {
		background:url(../img/bg-mobile-fallback.jpg) #002e66 no-repeat center center scroll;
		background-position:cover}
	body video {
		display:none;
	}
	*/
}

/* *** Tablet all *** */
@media (min-width:768px) and (max-height: 768px) and (orientation:landscape) {
	.brand {
		width: 350px;
		height: 350px;
	}

}


/* *** Smartphones all *** */
@media (max-width:767px) {
	video {
		object-fit: cover;
		width:100%;
		height:100%;
	}

	.social-icons ul > li {
		display:inline-block;
		width: 50px;
		height: 50px;
		margin: 0px 5px;
	}

	.social-icons ul > li > a {
		display:block;
		color:#ff0050;
		background:rgba(255,255,255,1);
		/*border: 1px solid #ddd;*/
		box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
		border-radius:100%;
		font-size:24px;
		line-height:50px;
		width: 50px;
		height: 50px;
	}

	.social-icons ul > li > a:hover {
		color:#fff;
		background:#ff0050;
		border-radius:100%;
		font-size: 24px;
		line-height:50px;
		height:50px;
		width:50px;
	}

}

/* *** Smartphones all (portrait) *** */
@media (max-width:767px) and (orientation:portrait) {
	.brand {
		width: 200px;
		height: 200px;
		margin: 10px auto;
	}

	.text h1 {
		/*margin: 0px;*/
		font-size: 26px;
		padding-bottom: 10px;
		border-bottom: 1px solid #fff;
	}

	.text h3 {
		margin: 5px;
		font-size: 14px;
	}

	#ribbon {
		margin: 20px auto 0;
	}


}



/* *** Smartphones all (landscape) *** */
@media (max-width:823px) and (orientation:landscape) {
	.brand {
		width: 200px;
		height: 200px;
		margin: 10px auto;
	}

	.text h1 {
		margin: 5px;
		font-size: 20px;
	}

	.text h3 {
		margin: 5px;
		font-size: 16px;
	}

}


/* *** Smartphones all (portrait) *** */
@media (max-width:320px) and (orientation:portrait) {
	

}

/* *** Smartphones all (landscape) *** */
@media (max-height:320px) and (orientation:landscape) {
	

}



@media screen and (max-height: 400px) { /* and (aspect-ratio: 1/1) */
    

}