*{
	box-sizing: border-box
}	
html, body {
	height: 100%;
    padding-left:20px;
    background: aliceblue;
}


/* CSS BASIC STYLING */
*{
	margin: 0px;
	padding: 0px;
    font-family: sans-serif;
}
body{
    display: flex;
	flex-direction: row;
    width: 100%;
    /* min-height: 100vh;
    max-width: 1024px; */
}

.main{
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    justify-content: flex-start;
}

.head{
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
}

#img1{
    height: 150;
    width:  270px;
}
#img2{
    height: 120;
    width:  200px;
}
#img3{
    height: 120px;
    width:  180px;
}
#img4{
    height: 100px;
    width:  300px;
}



.colegio,.pax,.viaje,.precio,.representante,.hermanos{
    font-family: monospace;
    width: 98%;
    padding: 8px;
    border: solid 0px;
    border-radius: 4px;
    
}
.rubro{
    background:rgb(25 173 188);
    width: 100%;
    padding: 6px 0px 6px 20px;
    display: inline-block;
    text-align: left;
    color: white;
    font-size: 24px;
    font-weight: bold;
    
}
.linea{
    padding: 5px 20px;
    display: flex;
}
.linea label{
    font-size: 25px;
    width: 10%;
    /* background-color: rgb(96, 206, 206); */
    padding: 4px ;
    margin-right: 10px;
}

.linea input{
    width: 81%;
    padding-left: 10px;
    font-size: 21px;
}
#cole_loc,#pax_loc,#cole_prov,#pax_prov,#destino,#colegio{
    width: 34%;
    padding-left: 10px;
    font-size: 21px;
}
#cole_loc{
    width: 30%;
}
#ano2{
    width: 6%;
    text-align: center;
    font-size: 21px;
}
#destino{background: #ddd;border: solid 1px;}
#id{
    width: 6%;
    border: solid 1px;
    text-align: center;
    /* background: #ddd; */
    /* margin-left: 6px; */
}
#colegio{width: 50%;}
#destino{width: 20%;}
#curso{width: 10%;text-align: center;}
#division{width: 10%;text-align: center;}
#turno{width: 10%;font-size: 22px;}
#ape,#nombre,#cel,#mail,#fb,#dire{
    width: 55%;
}


#dni,
#repre_dni{
    width: 20%;
    text-align: center;
}   

#fecha,#nro,#ano,#repre_fecha{ width: 11%;text-align: center;}
#sexo,#talle{  
    width: 8%;
    font-size: 21px;
    text-align: center;
}
/* #dire,#fb{width: 60%;} */
#cole_prov,#pax_prov{
    width: 15%;
}
#ano{background: #ddd;border: solid 1px;}
#sena,
#cuota0{
    width: 10%;
    text-align: center;
    /* background: #ddd; */
    border: solid 1px;
}

/* .planes{
    width: 90%;
    border: none;
    display: flex;
    flex-direction: column;
} */
.planes label, 
.planes input,
.precio label,
.precio input,
.precio p,
.planes p{
    font-size: 25px;
}


.a{
    display: flex;
}
.a p{
    font-size: 24px;
    margin: auto;
}


.b{
    display: flex;
    width: 20%;
}
#opcion2{
    width: 70%;
    padding-left: 10px;
    font-size: 21px;
    border: solid 1px;
}

#hno_ape,#hno_ape2{width: 40%;}
#hno_cole,#hno_cole2{width: 25%;}
#hno_div,#hno_div2{width: 25%;}


.bases{
    display: flex;
    flex-direction: column;
    width: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    border: solid 1px;
    background-color: darkcyan;
    color: white;
    font-size: 30px;
    text-align: center;
    padding: 20px 0px;
    justify-content: center;
}

.bases-cont{
    overflow: auto;
    display: flex;
}

.bases .linea{
    text-align: center;
    justify-content: center;
}
.bases .linea button{
    margin-left: 20px;
    border: solid 1px;
    border-radius: 4px;
    padding: 5px 10px;
}

.bases .linea button:hover{
    cursor: pointer;
    background-color: rgb(26, 98, 98);
    color: #ffff;
}
#btn_ok{
    padding: 20px 40px;
    border: solid 1px;
    border-radius: 4px;
    font-Size: 20px

}
#btn_ok:hover{
    cursor: pointer;
    background:rgb(25 173 188);
}


#repre_ape,#repre_nom,#repre_cel{
    width: 55%;
}
/* 
.head img{
    width: 10%  ;
} */





@media screen and (max-width: 767px) {
    .bases{
        /* width: 250%; */
        top: 8%;
        left: 8%;
        resize: both;
    }

}