@font-face {
font-family: exo-extralight;
src: url("fonts/Exo2-ExtraLightCondensed.otf") format("opentype");

}
@font-face {
font-family: exo-regular;
src: url("fonts/Exo2-RegularCondensed.otf") format("opentype");
}
body {
	font-family: "exo-extralight";
}
.page-content button  {
	font-family: "exo-regular";
}
.barizco-global {
	position: relative;
	padding: 0px;
	overflow: hidden;
}
.barizco-global .barizco-back {
	width: 100%;
	z-index: 1;
}
.gray-layer {
	position: absolute;
	top:-120px;
	left: 0;
	width: 100%;
	height: 74%;
	z-index: 20;
	opacity: 0.5;
}
.gray-layer:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: black;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 10deg);
  }
.gray-layer:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 49%;
  background: black;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -10.5deg);
}
.page-content {
	left:39%;
	top:7%;
	position: absolute;
	z-index: 100;
}
.barizco-logo {
	width: 400px;
	margin: 0 auto;
	display: block;
}
.page-content h1 {
	color: #ffffff;
	text-align: center;
	font-size: 6em;
	padding-top: 100px;
}
.page-content p {
	color: #ffffff;
	text-align: center;
	font-size: 2em;
	padding-top: 70px;
}
.page-content input {
	background-color: gray;
	border: 0;
	opacity: 0.6;
	width: 70%;
	margin-right: 2%;
	min-height: 50px;
	border-radius: 5px;
}
.page-content button {
	color: #33333e;
	background-color: white;
	border: 0;
	max-width: 28%;
	padding: 15px 15px;
	float: right;
}
.triangle {
	border-top: 370px solid #c2002f;
	border-right: 560px solid transparent;
	position: absolute;
	top:0;
	left: 0;
	z-index: 100;
}
.new-version {
	color: white;
	z-index: 150;
	position: absolute;
	top:80px;
	left: 50px;
	font-size: 3em
}
	.gray-layer:after, .gray-layer:before  {
		height: 110%;
	}
@media (max-width: 1890px) {
	.barizco-global .barizco-back {
	width: 2270px;
	margin-left: -380px;
	}
	.triangle {
		border-top: 270px solid #c2002f;
		border-right: 460px solid transparent;
	}
	.new-version {
		font-size: 2em;
		top:60px;
		left: 40px;
	}
	.page-content {
	  left: 33%;
	  top: 15%;
	}
	.barizco-logo {
	  width: 350px;
	}
	.gray-layer:after, .gray-layer:before  {
		height: 130%;
	}
}

@media (max-width: 1890px) {
	.page-content {
	  left: 24%;
	}
}
@media (max-width: 1889px) and (min-width: 1200px) {
	.page-content {
	  left: 38%;
	}
}
@media (max-width: 767px) {
	.barizco-global .barizco-back {
	width: 1890px;
	margin-left: -610px;
	}
	.triangle {
		border-top: 170px solid #c2002f;
		border-right: 360px solid transparent;
	}
	.new-version {
		font-size: 1.5em;
		top:40px;
		left: 30px;
	}
	.page-content {
	  left: 24%;
	}
	.barizco-logo {
	  width: 280px;
	}
	.gray-layer:after, .gray-layer:before  {
		height: 130%;
	}
	.page-content h1 {
		font-size: 4em;
	}
	.page-content p {
		font-size: 2em;
	}
	.page-content input {
		width: 100%;
		margin-right: 0;
		margin-bottom: 25px;
	}
	.page-content button {
		width: 50%;
		max-width: 100%;
		margin: 0 auto;
		float: none;
	}
}

@media (max-width: 600px) {
.page-content {
	  left: 0%;
	}
}