@font-face {
	font-family: "Bebas";
	src: url("BebasKai.otf") format("opentype");
}

@font-face {
	font-family: "Script";
	src: url("Lane.ttf") format("truetype");
}

@font-face {
	font-family: "Title";
	src: url("Anton.ttf") format("truetype");
}

@font-face {
	font-family: "Montserrat";
	src: url("Montserrat-Regular.otf") format("opentype");
}

@keyframes FadeOut {
	0% {
		display:block;
		opacity: 1;
	}
	100% {
		opacity: 0;
		display:none;
	}
}

@keyframes FadeIn {
	0% {
		opacity: 0;
	}
	100% {
		display:block;
		opacity: 1;
	}
}

*:focus {
	outline: none;
}

::selection{
	background:rgba(13,50,115,1);
}

body{
	position: fixed;
	overflow: hidden;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	background:rgba(23,60,125,1);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.login-div{
	position:fixed;
	display:block;
	width:100%;
	height:100%;
	background:none;
	z-index:2;
	opacity:0;
	-webkit-animation-name: FadeIn;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}

.login-div-hidden{
	position:fixed;
	display:block;
	width:100%;
	height:100%;
	background:none;
	z-index:1;
	-webkit-animation-name: FadeOut;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}

.main-div{
	position:fixed;
	display:block;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:none;
	z-index:2;
	opacity:0;
	-webkit-animation-name: FadeIn;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}

.main-div-hidden{
	position:fixed;
	display:none;
	width:100%;
	height:100%;
	background:none;
	z-index:1;
	-webkit-animation-name: FadeOut;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 1s;
}

@media screen and (orientation:portrait) {
	.login-container{
		position:relative;
		display:block;
		left:50%;
		top:40%;
		background:none;
		width:800px;
		transform:translate(-50%,-50%);
	}

	.login-container-inline{
		position:relative;
		display:inline-block;
		width:100%;
		background:none;
	}

	.login-container-left{
		position:relative;
		display:block;
		float:left;
		width:250px;
		height:50px;
		background:none;
		font-family:"Title";
		font-size:42px;
		color:white;
		text-align:right;
		padding-right:15px;
	}

	.login-container-right{
		position:relative;
		display:block;
		float:left;
		width:535px;
		height:50px;
		background:none;
		text-align:right;
	}

	.userinput{
		background:none;
		margin-top:5px;
		width:535px;
		height:50px;
		font-family:"Montserrat";
		font-size:32px;
		color:rgba(192,192,192,1);
		border:none;
	}

	.login-button{
		position:fixed;
		display:block;
		left:50%;
		transform:translateX(-50%);
		bottom:15%;
		background-image:url("../img/login.png");
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		background-color:rgba(23,60,125,1);
		/*background-blend-mode:difference;*/
		width:260px;
		height:260px;
		border:none;
		margin-left:auto;
		margin-right:auto;
		cursor:pointer;
		opacity:.8;
	}

	.login-button::-moz-focus-inner{
		border:none;
	}

	.login-button:focus{
		opacity:1;
	}

	.login-button:hover{
		opacity:1;
	}

	.bg-image{
		position:fixed;
		display:block;
		top:50%;
		transform:translateY(-650px);
		/*left:-280px;*/
		left:50%;
		margin-left:-400px;
		height:800px;
		width:800px;
		background:url("../img/Sedicosa.png");
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		background-color:none;
		z-index:1;
		opacity:.1;
	}

	.login-container-error-hidden{
		display:inline-block;
		width:100%;
		height:30px;
		opacity:0;
		margin-top:20px;
	}

	.login-container-error{
		display:inline-block;
		width:100%;
		height:30px;
		background:none;
		text-align:center;
		font-family:"Montserrat";
		font-size:16px;
		margin-top:20px;
		color:orange;
	}
}
@media screen and (orientation:landscape) {
	.login-container{
		position:relative;
		display:block;
		left:50%;
		top:40%;
		background:none;
		width:800px;
		transform:translate(-50%,-50%);
	}

	.login-container-inline{
		position:relative;
		display:inline-block;
		width:100%;
		background:none;
	}

	.login-container-left{
		position:relative;
		display:block;
		float:left;
		width:250px;
		height:50px;
		background:none;
		font-family:"Title";
		font-size:42px;
		color:white;
		text-align:right;
		padding-right:15px;
	}

	.login-container-right{
		position:relative;
		display:block;
		float:left;
		width:535px;
		height:50px;
		background:none;
		text-align:right;
	}

	.userinput{
		background:none;
		margin-top:5px;
		width:535px;
		height:50px;
		font-family:"Montserrat";
		font-size:32px;
		color:rgba(192,192,192,1);
		border:none;
	}

	.login-button{
		position:fixed;
		display:block;
		right:50px;
		bottom:50px;
		background-image:url("../img/login.png");
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		background-color:rgba(23,60,125,1);
		/*background-blend-mode:difference;*/
		width:160px;
		height:160px;
		border:none;
		margin-left:auto;
		margin-right:auto;
		cursor:pointer;
		opacity:.8;
	}

	.login-button::-moz-focus-inner{
		border:none;
	}

	.login-button:focus{
		opacity:1;
	}

	.login-button:hover{
		opacity:1;
	}

	.upload-btn-wrapper {
		position: relative;
		overflow: hidden;
		display: inline-block;
	}

	.btn{
		width:200px;
		height:200px;
		border:none;
		background-image:url("../img/camera.png");
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		background-color:rgba(23,60,125,1);
	}

	.upload-btn-wrapper input[type=file] {
		width:200px;
		height:200px;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.bg-image{
		position:fixed;
		display:block;
		left:0px;
		top:50%;
		transform:translateY(-300px);
		height:600px;
		width:600px;
		background:url("../img/sedileft.png");
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		background-color:none;
		z-index:1;
		opacity:.1;
	}

	.login-container-error-hidden{
		display:inline-block;
		width:100%;
		height:30px;
		opacity:0;
		margin-top:20px;
	}

	.login-container-error{
		display:inline-block;
		width:100%;
		height:30px;
		background:none;
		text-align:center;
		font-family:"Montserrat";
		font-size:16px;
		margin-top:20px;
		color:orange;
	}
}