/* CSS Estilos del index */
#header{
    z-index: 12 !important;
}
#imagenMap_movil {
    display: none;
    width: 100%;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 15px;
}
.error_invitacion{
/*    border: 1px solid #E40513;*/
    color: white;
    /* padding: .1em; */
    display: inline-block;
    font-size: .8em;
    background: #E40513;
    display: none;
    margin-bottom: 1em;
        }
.cruz{
    width: 8vh;
}
#modal img{
    position: fixed;
    top: 0;
    right: 0;
    margin-top: 40px;
    margin-right: 17%;
    border: 2px solid white;
    border-radius: 50%;
}
#formularioinvitacion{
    margin: 0px auto;
    width: 80vh;
    top: 0;
/*    position: fixed;*/
    right: 0;
    left: 0;
    top: 5%;
}
#formularioinvitacion input{
   border: none;
    outline: none;
    padding: 0 20px 0 20px;
    width: 64%;
        height: 3em;
/*    margin-bottom: 1%;*/
    border-radius: 4px;
    color: black;
    margin-top: 11px;
}
#formularioinvitacion input::placeholder{
    color: #666666;
    font-weight: 800;

}
#formularioinvitacion p{
    color: white;
}
#formularioinvitacion div:nth-child(1){
/*    margin-top: 10%;*/
    margin-bottom: 5%;
    font-size: 19px;
    
}
#formularioinvitacion div:nth-child(2){
   
    
}
#formularioinvitacion div:nth-child(3){
    margin-top: 10%;
    margin-bottom: 10%;
    
}
#formularioinvitacion div:nth-child(4){
 font-size: 14px;   
      width: 77%;  
}
@media (max-width: 1000px)
{
    .navbar {
        margin-bottom: 0px;
        padding-top: 7px;        
    }
    #header_mobile {
        background-color: #FFFFFF;
    }
}
@media (max-width: 700px)
{
    .cruz{
    width: 7vh;
}
    .oculto_movil{
        display: none;
    }
    #imagenMap_movil{
        display: block;
    }
}
@media (max-width: 545px)
{
    #imagenMap_movil {
        display: block;
        width: 97%;
    }
}
html
{
	display:none;
}
html,body
{
	background-color:#FFF;
	width:100%;
	height:100%; 
	margin:0;
	font-family: 'Circular-Book',Arial,sans-serif;
}
br
{
	clear:left;
	clear:right;
}
.link{ 
	text-decoration:underline;
	color:#06F;
}

#header, #header_mobile
{
	width:100%;
	background-color: #FFF;
	padding-bottom:10px;
	height:17%;
	padding-top:1%;
	z-index:1 !important;
	position:absolute;
}
#header > .container, #header_mobile > .container
{
	margin-left:4%;
	margin-right:3%;
	overflow:hidden;
	z-index:1 !important;
	
}
#header > .container > img {
    float: left;
    width: 12.5%;
    margin-top: .6em;
    margin-bottom: 1em;
}
#header > .container > form
{
	float:right;
	margin-top:1em;
}
.input-index
{
	font-size:1em;
	padding: .8em .5em .5em;
	border:1px #000 solid;
	background-color: #f5f5f5;
	margin-top:.75em;
	font-weight: bold;
	width: 11em;
	font-family: 'Circular-Book',Arial,sans-serif;
}

.img-input
{
	position:absolute;
	top:1.4em;
	left:.7em;
	height:1.2em;
}

#header > .container > form > div > a
{
	font-size:.9em;
	text-decoration:underline;
	color:#999 !important;
	display:block;
	margin-top:.6em;
}
#header > .container > form > div > a:visited
{
	color:#000;
}
#header > .container > form > div > input[id='login']
{
	background-position:5% 50%;
	padding-left: 37px; 
	background-repeat: no-repeat;
	margin-right: 1.5em;
	z-index:10 !important;
    border-radius: 8px;
    border: 1.4px solid black
}
#header > .container > form > div > input[id='password']
{
	background-position:5% 50%;
	padding-left: 37px; 
	background-repeat: no-repeat;
	margin-right: .8em;
    border-radius: 8px;
    border: 1.4px solid black
}

#body
{
	width:100%;
	background-image: url(../banca/index_gnbl/fondo_index_2.png);
	background-position: 5.3% -10%;
	height:100%;
	z-index:2;
}
#body > .container
{
	margin-left:4%;
	margin-right:3%;
	overflow:hidden;
	z-index:2;
	padding-top:10% !important
}
#body > .container > .left
{
	float:left;
	width:50%;
	text-align:left;
	z-index:3;
}
#body > .container > .left > p
{
	width:100%;
	font-size:2.3em;
	text-align:justify;
	line-height: 1.5em;
	font-weight:lighter;
	color:#666666;
	position:relative;
	z-index:4;

}
#body > .container > .left > p > .texto
{
	width:100%;
	max-width:592px;
	position:absolute;
	top:-0.9em;
	z-index:10 !important;
}
#body > .container > .left > .registro
{
	width:40%;
	font-size:1.1em;
	font-style:italic;
	text-align:right;
	font-weight:normal;
	/*margin-top:28%;*/
	margin-top: 20%;
	margin-left:4%;	
}
.img_registro{
	padding-top: 36px;
}
#body > .container > .left > .registro > a
{
	text-decoration:none;
}
.btn-registro{
	width:270px;
	/*
	min-width:100%;
	*/
}
/*
.btn-registro:hover
{
	width: 120%;
}
*/
#body > .container > .left > p
{
	height:32%;
	position:relative
}
#body > .container > .left > p > a
{
	font-size:.57em;
	font-weight:normal;
	color: #2B70BB;
	position:absolute;
	bottom:12%;
	right:55%;
}
#body > .container > .right
{
	float:left;
	margin: .8em;
	width:40%;
}
#body > .container > .right > img
{
	width:95%;
	margin-top:2em;
	margin-left:2em;
	margin-bottom:1.5em;
	max-width:440px;
}
#footer
{
	clear:left;
	width:100%;
	position:absolute !important;
	bottom:0;
	margin-bottom:.3em;
}
#footer > .container
{
	padding:1em;
	padding-left:5%;
	padding-right:4%;
	display:block;
}
#footer > .container > ul
{
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
}

#footer > .container > ul > li
{
	display:table-cell;
	padding:0 5px 0 5px;
	margin:0;
	text-align:center;
	font-size:1em;
	padding-right:1.5em;
}
#footer > .container > ul > li > a > img
{
	width:100%;
	-webkit-transition-property: all;
    -webkit-transition-duration: 200ms;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 0;
    /* Standard syntax */
    transition-property: all;
    transition-duration: 400ms;
    transition-timing-function: ease;
    transition-delay: 0;
}

#footer > .container > ul > li > a > img:hover
{
	/*width:105%;*/
}

.form-group{ float:left; position:relative;}
.error {
    border: 1px solid #E40513;
    color: #E40513;
    padding: .1em;
    margin-top: .5em;
    display: block;
    float: left;
    margin-left: 0px;
    font-size: 0.8em;
    margin-right: 50%;
/*    margin-bottom: 15px;*/
}
.input-error{
	font-size:1em;
	padding: .8em .5em .5em;
	border:1px #E40513 solid;
	background-color: #EFEFEF;
	margin-top:.7em;
    font-weight: bold;
    width: 11em;
}
	.error {
    border: 1px solid #E40513;
    color: #E40513;
    padding: .1em;
    margin-top: .5em;
    display: block;
    float: left;
    margin-left: 0px;
    font-size: 0.8em;
}

.zoom-block
{
	height: 3em;
	width:10em;
	text-align:center;
}
/*
.zoom
{
	-webkit-transition-property: all;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease;
    -webkit-transition-delay: 0;
    transition-property: all;
    transition-duration: 400ms;
    transition-timing-function: ease;
	transition-delay: 0;
}
*/
.zum{
    transition: transform .4s;
    cursor: pointer;
            }
.zum:hover {
    transform: scale(1.1); 
            }

button[type='submit'] > img
{
	width:100%;
}
/*
button[type='submit'] > img:hover
{
	width:110%;
}
*/
button[type='submit']
{
	border:none;
/*	padding-right:8%;*/
	background:none;
	margin-top:.5em;
	border-style:none;
}
.margin-bottom{ margin-bottom:1px;}
.margin-bottom2{ margin-bottom:1px;}
area,a,img, button:focus {
	outline:0px !important;
}
#header_mobile{
	display: none;
	padding-bottom: 0px;
    background-color: #FFFFFF;
}
#footer_mobile{
	display: none;
}
#cont_ingresarLogin{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 6;
	display: none;
	background: #FFFFFF;
}
#ingresarLogin{
	position: relative;
/*	float: left;*/
    width: 90%;
    margin: 0 auto;
    padding-top: 70px;
    background: white;
    font-family: arial;
}
#ingresarLogin input[type="text"], #ingresarLogin input[type="password"]{
	width: 85%;
	padding-left: 10%;
	position: relative;
	float: left;
/*	font-weight: normal;*/
}
#ingresarLogin .form-group{
	width: 95%;
	margin-left: 2.5%;
	position: relative;
	float: left;
}
@media (max-width: 1000px) {
        button[type='submit']
{
    background-color: #E40513;
    color: #FFF;
    border: none;
    font-size: 1.2em;
    padding: .8em;
    font-weight: bolder;
}
	#header
	{
		display: none;
	}
	#footer{
		display: none;
	}
	#body > .container > .left > .registro {
		display: none;
	}
	#header_mobile{
		display: block;
	}
	#footer_mobile{
		display: block;
	}
	#body > .container > .left
	{
		width:45%;
		font-size:2.3em;
		text-align:justify;
		line-height: 1.5em;
		font-weight:lighter;
		color:#666666;
		position:relative;
		z-index:4;
		padding-top: 0px;
	
	}
	#body > .container > .left > p > .texto
	{
		width:100%;
		max-width:592px;
		position:absolute;
		top:0px;
		z-index:10 !important;
	}
	#body > .container > .left > p
	{
		margin-bottom: 0px; margin-top: 0px;
	}
	#body > .container > .right
	{
		width:45%;
		font-size:2.3em;
		text-align:justify;
		line-height: 1.5em;
		font-weight:lighter;
		color:#666666;
		position:relative;
		z-index:4;
		padding-top: 0px;
		margin-top: 0px;
		text-align: center;
	
	}
	#body > .container > .right > img
	{
		width:95%;
		margin-bottom:1.5em;
		margin-top: 0px;
		margin-left: auto;
		max-width:300px;
	}
	#footer_mobile
	{
		position:fixed;
		bottom:0;
		width:100%;
		height:3em;
		z-index:5;
	}
	
	#footer_mobile > div {
		width: 50%;
		display: inline-block;
		margin: 0px !important;
		margin-right: 0px;
		text-align: center;
		height: 100%;
		color: #FFF !important;
		box-sizing: border-box;
		position: relative;
		text-decoration: none;
		float: left;
	}
	a.btn:active
	{
		color:#FFF !important;
		text-decoration:none;
	}
	a.btn:visited
	{
		color:#FFF !important;
		text-decoration:none;
	}
	a.btn{
		color:#FFF !important;
	}
	.btn > img
	{
		height:100%;
		vertical-align:middle;
		display:inline-block;
		padding:10px;
		box-sizing:border-box;
	}
	span.btn-text
	{
		display:inline-block;
		margin-top:6px;
	}
	
	#footer > div > a.btn
	{
		color:#FFF !important;
	}
	
	div.btn-green
	{
		background-color:#59B235;
	}
	 div.btn-blue
	{
		background-color:#2B70BB;
	}
}

@media (max-width: 700px) {
    .forget{
    margin-top: 1.5em;
    display: block;
    }
    #ingresarLogin h2{
    text-align: left;
    color: #2B70BB;
    font-weight: 900;
    font-size: 1.4em;
    padding-left: 2.5%;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
    }
    #modal img{
    margin: 10px;
}
    #formularioinvitacion{
    width: 17em;
    top: -4em;
    position: absolute;
    left: -25%;
    right: -25%;    
    }
    #formularioinvitacion p{
/*    font-size: 13px;*/
    }
    #formularioinvitacion input{
    width: 75%;
    margin-bottom: 1%;
    margin-top: 0.9%;
    }
#formularioinvitacion div:nth-child(1){
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 15px;
    
}
#formularioinvitacion div:nth-child(2){
   
       
}
#formularioinvitacion div:nth-child(3){

        margin-top: 20%;
    margin-bottom: 20%;
}
#formularioinvitacion div:nth-child(4){
width: unset;
}

	#ingresarLogin input[type='password'], #ingresarLogin input[type='text'] {
		border-style: none;
		border: 1px solid #CCC;
		font-size: 1em;
        padding: 1.1em 1em 0.8em 2em;
		width: 100%;
		box-sizing: border-box;
        margin-bottom: 1em;
		background-color: #fff;
		padding-left: 2rem;
	}
	.img-input {
		position: absolute;
		top: 1.7em;
		left: .7em;
		height: 1.2em;
	}
	button[type='submit'] > img {
		width: auto;
	}
	button[type='submit'] > img:hover
	{
		width:auto;
	}
	button[type='submit'] {
		background-color: #E40513;
		color: #FFF;
		border: none;
		font-size: 1.2em;
		padding: 0px;
		font-weight: bolder;
        width: 100%;
        height: 60px;
        margin-top: 2em;
        margin-bottom: 0.4em;
	}

	#body {
		width: 100%;
		height: 100%;
		z-index: 2;
		background-image: url(../banca/fondo/fondo_moviles_vertical.png);
		background-position: 0 3.4em;
		
	}
	#cont_ingresarLogin{
		background-image: url(../banca/fondo/fondo_moviles_vertical.png);
		background-position: 0 3.4em;
	}
	
	#body > .container > .left
	{
		width:100%;
		font-size:2.3em;
		text-align:justify;
		line-height: 1.5em;
		font-weight:lighter;
		color:#666666;
		position:relative;
		z-index:4;
		padding-top: 10px;
		min-height: 200px;
	
	}
	#body > .container > .left > p > .texto
	{
		width:100%;
		max-width:592px;
		position:absolute;
		top: 0px;
		z-index:10 !important;
	}
	#body > .container > .left > p
	{
		margin-bottom: 0px; margin-top: 0px;
	}
	#body > .container > .right
	{
		width:100%;
		margin: 0px;
		font-size:2.3em;
		text-align:justify;
		line-height: 1.5em;
		font-weight:lighter;
		color:#666666;
		position:relative;
		z-index:4;
		padding-top: 0px;
		margin-top: 0px;
		text-align: center;
	
	}
	#body > .container > .right > img
	{
		width:75%;
		margin-bottom:1.5em;
		margin-top: 15px;
		margin-left: auto;
		max-width:315px;
	}
	#body > .container{
		padding-top: 50px !important;
	}
	
}
@media (max-width: 480px) {

	#body > .container > .left {
		width: 100%;
		font-size: 2.3em;
		text-align: justify;
		line-height: 1.5em;
		font-weight: lighter;
		color: #666666;
		position: relative;
		z-index: 4;
		padding-top: 26px;
		min-height: 170px;
	}
	#body > .container > .right > img{
		width:69%;
		margin-bottom:1.5em;
		margin-top: 35px;
		margin-left: auto;
		max-width:315px;
	}
}
input:-webkit-autofill {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
	color: #333 !important;
	font-family: 'Circular-Book',Arial,sans-serif !important;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
@media (max-width: 445px) {
	#body > .container > .left {
		width: 100%;
		font-size: 2.3em;
		text-align: justify;
		line-height: 1.5em;
		font-weight: lighter;
		color: #666666;
		position: relative;
		z-index: 4;
		padding-top: 26px;
		min-height: 135px;
	}
}
/*
@media only screen and (orientation: landscape) and (max-width: 700px)
{
	body{
		transform: rotate(90deg);
	}
}*/