@import url('../../fonts/blogger-sans.css');

html, body, head{
	margin:0;
	padding:0;
}

::-webkit-input-placeholder { /* Edge */
  color: #FFFFFF;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFFFFF;
}

::placeholder {
  color: #FFFFFFs;
}

html,
body{
	background:#3c3c3c;
    font-family: 'Blogger Sans';
	background: rgb(0,95,120);
	background: -moz-linear-gradient(90deg, rgba(0,95,120,1) 0%, rgba(0,95,120,1) 50%, rgba(60,60,60,1) 50%, rgba(60,60,60,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,95,120,1) 0%, rgba(0,95,120,1) 50%, rgba(60,60,60,1) 50%, rgba(60,60,60,1) 100%);
	background: linear-gradient(90deg, rgba(0,95,120,1) 0%, rgba(0,95,120,1) 50%, rgba(60,60,60,1) 50%, rgba(60,60,60,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005f78",endColorstr="#3c3c3c",GradientType=1);
}


.container{
	max-width:1368px;
	margin:0 auto;
	display: flex;
    justify-content: space-between;
}

.content-side{
	width: 35vw;
	color:#FFFFFFF;
	box-sizing:border-box;
	padding: 100px 20px 20px 20px;
	position:relative;
}

.content-block{
	background: rgb(0,95,120);
	background: -moz-linear-gradient(90deg, rgba(0,95,120,1) 0%, rgba(20,125,150,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(0,95,120,1) 0%, rgba(20,125,150,1) 100%);
	background: linear-gradient(90deg, rgba(0,95,120,1) 0%, rgba(20,125,150,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005f78",endColorstr="#147d96",GradientType=1);
	width: 60vw;
	min-height: 100vh;
	color:#FFFFFF;
	padding: 100px 120px 20px 120px;
	box-sizing:border-box;
}

.content-block .inside-content{
	max-width: 450px;
}


.huge-icon{
	background:url('../../logo/openbanking-symbol.png') no-repeat center center;
	background-size:contain;
	width:337px;
	height: 479px;
	position:absolute;
	top:10%;
	right:50%;
	transform:translateX(-37%);
}

.content-block h1{
	background:url('../../logo/openbanking-logotipo.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:200px;
	height:39px;
	text-indent:-9999px;
	margin-bottom: 40px;
}

.content-block h2{
	font-size: 38px;
    font-family: 'Blogger Sans', serif !important;	
	color:#FFFFFF;
	font-weight: 500;
	line-height:1.3;
}


.content-block form{
	margin:20px 0;
	position:relative;
}

.content-block p{
	margin-top:15px;
	font-size: 15px;
    font-family: 'Open Sans', 'Arial', serif;	
	color:#FFFFFF;
	font-weight: 500;
	line-height:1.4;
}

.content-block .formGroup{
	margin-bottom:10px;
}
.content-block .formGroup label{
	display:none;
}


.content-block .formGroup input{
	background:#013d50;
	border-radius:50px;
	color:#FFFFFF;
	box-sizing:content-box;
	padding:6px 0;
	width:100%;
	border:1px transparent none;
	text-indent: 12px;
	margin-right:12px;
	line-height:36px;
}

.content-block input[type=button], .button {
	color:#013d50 !important;
	border-radius:50px;
	font-weight:600;
	background:#FFFFFF !important;
	width:100%;
	border:1px transparent none;
	text-decoration:none;
	box-sizing:border-box;
	line-height:30px;
	display:inline-block;

}

.button{
	padding:10px 20px!important;
	display:inline !important;
}


.content-block .formGroup input:focus{
	outline:0;
}

#PSlinks a{
	display:block;
	color:#FFFFFF !important;
	padding:0;
	margin:10px 0;
	line-height:30px;
	text-decoration:none;
}

.rememberMe{
	display:none;
}

.alert{
	position:fixed;
	bottom: 20px;
	left:50%;
	transform:translateX(-50%);
	background:rgba(0,0,0,.9);
	border-radius:10px;
	z-index:998;
	padding:20px;
	box-sizing:border-box;
	color:#FFFFFF;
	text-align:center;
	width: auto;
	max-width: 500px;
	display:none;
	
}


.alert p{
	color:#FFFFFF;
	text-align:center;	
}



#loaderWrapper{
	display:none;
	width:100px;
	height:100px;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,.69) url('../../loader/loading-200px.gif') center center no-repeat;
	background-size: 90px 90px;
	padding:10px;
	border-radius:10px;
	box-sizing:content-box;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	backdrop-filter:blur(2px);
}


.tutorials{
	display:block;
	margin-bottom:40px;
}


.content-block-is{
	text-align:left;
	color:#FFFFFF;
	padding-left:110px;
	display:block;
}

.tutorials ul{
	list-style:none;
}

.tutorials ul li{
	position:relative;
}

.tutorials ul li:before{
	content: "";
	width:18px;
	height:18px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAANnRSTlMAoFj8chQCevn25NTPkFE5Ggru6964sq2MgHYiDvLFY0AuBcnCqJ2XaksxKh8HiGcE6NldRib93BrOAAAB9klEQVRYw6WX23aCMBBFBwvBVgQRuYkKaq13a2/5/0/riiZMlk/MuJ94IHtBmMwcoKW6BF/zwImAR/whNe8HYDAayJaX4QyorBbS5q0HREr5QFoBhXOiFvWny1EdaMOrvyIIwtv6X3V5deda8d1AZ3y1IDP7mUuN40FHtur2HRj2E20Yf0I3HHW3tfPxpa8ViyVJgBzfTVEUMUmA1IkpipAnAK8t7uxEEiDRwBTF9MoSwGr6qhWDiCRATpnUfHgkARK+aUPywxNAXLyYTnEkCZClOez9S0wSIPVYKyZ7ngA8R2ryEUmANKYo5q5gCWDlm6IIIpIAqVJzwrYzjsAuiq+QJ4DZ0BRFIUgC5LDWhiFTAGKni2JPFCDe5v4xmAIcRBFfALeW6T4h8HEbeQL3WUH65CvspKLhCuLi3huAKQj16KxZAuzTOXAE2BSyGUfQ4KziHGfPsSIUXSA+x9a8pgsOaysxUATYiTCz0AW9dkDWnMFSpdaIpgvOZd8KCXTB73c7ka5AF4w29kwkC4Q7x6nMCVmByQXlmRPztubTp3+cmHcOrL8PjsDH/x+ewJWK9QG6ULRxH1kmKu4L6MSPEmweS6DsedCR4+1tG2AjknubOlVuNigF0OlJCx8Y5BLJgYG34D0BIqbm1DsCePy5m8l4vT0CjX+oKJ9zeplu5AAAAABJRU5ErkJggg==);
	background-size:cover;
	position:absolute;
	top: 45px;
	transform: translateY(-50%);
	left:-26px;
}

.tutorials ul li strong a{
	display:block;
	color:#FFFFFF;
	font-size:22px;
	padding-top:30px;
	text-decoration:none;    
	font-family: 'Open Sans', Arial;
}

.tutorials ul li p{
	display:block;
	color:rgba(255,255,255,.6);
	font-size:14px;
	padding-top:5px;
	line-height:1.3;
	text-align:justify;

}

@media screen and (max-width: 1260px){
	.huge-icon{
		display:none;		
	}
		
	.alert{
		width: 90%;
		max-width: 500px;
		
	}
	
	.container{
		display:block;
	}
	
	.content-block{
		width: 100vw;
		color:#FFFFFF;
		padding: 50px 20px 50px 20px;
		box-sizing:border-box;
		height:auto;
		min-height: 0;
	}
	
		
	.content-block h2{
		font-size: 28px;
		font-family: 'Blogger Sans', serif !important;	
		color:#FFFFFF;
		font-weight: 500;
		line-height:1.3;
	}
	
	
	.content-side {
		background:#3c3c3c;
		width: 100%;
		text-align: center;
		color: #FFFFFFF;
		box-sizing: border-box;
		padding: 60px 0;
		position: relative;
	}

	.content-block-is{
		text-align:left;
		color:#FFFFFF;
		padding:0 40px 0 10px;
		box-sizing:border-box;
	}
	.content-block input[type=button]{
		display:block !important;
		padding: 6px 20px;
		height:auto;
	}
	
	.button{
		width:100%;
		margin:0 auto;
		display:block !important;
		text-align:center;
		margin-left:5%;
		padding: 6px 20px;
	}

	
}