@import url ('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"rel="stylesgeet');

Html {

    font-family: 'Roboto', sans-serif
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

footer {
    bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    text-align: justify;
    flex-direction: row;
    background-color: #EA9D76;
    padding: 1em;
}

footer {
    padding: 1em;
    font-size: 2em;
}


footer {
    font-size: 0.8em;
    flex-direction: column;
    color: white;
}

footer div {
    margin-right: 1em;


}

footer p {
    font-size: 1em;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: white;
    margin-top: 0.3em;

}

.contacto {
    display: flex;
    color: white;
    font-size: .9em;
    justify-content: center;
    align-items: center;
    align-content: space-between;
}

.contacto img {
    margin-left: 3px;
    display: block;
    width: 1em;
    height: 1em;
}

@media (min-width:768px) {
    form {}
}

@media (min-width:480px) {
    form {}
}

/*Gustos*/

#logo {
    max-width: 15em;
    height: auto;
    margin-top: 10px;
    margin: auto;

}

#categorias {
    padding-bottom: 20px;
    color: #ce6b00;


}

#paso {
    color: #971B1C;
    margin-bottom: 10px;

}

button[type="button"] {
    background-color: #971B1C;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 20px;
    padding: 15px;
    width: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

button[type="button"]:hover {
    opacity: 1;

}

button[type="button"]:active {
    transform: scale(0.9)
}

#listo {
    text-decoration: none;
    color: white;
    margin: auto;

}

button[type="submit"] {
    background-color: #ce6b00;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 20px;
    padding: 10px;
}

button[type="submit"]:hover {
    opacity: 1;
}

button[type="submit"]:active {
    transform: scale(0.9)
}

#iniciarsesion {
    text-decoration: none;
    color: white;
}
.imagenes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#imagen {
    padding: 4px
}


/*Registro Tarjeta*/
body {
    margin: 0 auto;
    text-align: center;
    background-color: #FFEEC5;
    display: flex;
    flex-direction: column;
}

body img {
    max-width: 15em;
    height: auto;
    margin: auto;
}

button[type="submit2"] {
    background-color: #971B1C;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 20px;
    padding: 15px;
    width: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

button[type="submit2"]:hover {
    opacity: 1;
}

button[type="submit2"]:active {
    transform: scale(0.9)
}

h2,
.registro h2 {
    color: #971B1C;
    margin: auto;
    margin-bottom: 10px;
}

input,
.registro input {
    margin: 5auto;
    border: 1px solid #FFEEC5;
    padding: 5px 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
    color: white;
    background-color: #e2b681;

}

.logininputcontainer input {

    border-color: antiquewhite;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0.7em;

}

#expiracion {
    text-align: left;
    color: #ce6b00;
    list-style: none;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

#NyA {
    text-align: left;
    color: #ce6b00;
    list-style: none;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

#Numerotarjeta {
    text-align: left;
    color: #ce6b00;
    list-style: none;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

#DNI {

    text-align: left;
    color: #ce6b00;
    list-style: none;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

#seguridad {
    text-align: left;
    color: #ce6b00;
    list-style: none;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

.tarjeta {
    display: block;
    margin-bottom: 5px;
}

#codigo {
    width: 150px;

}


/*Login*/


h5 {
    color: #ce6b00;
    text-align: left;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

input,
.registro input {
    border: 1px solid #FFEEC5;
    padding: 5px 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;

    margin-bottom: 4px;
    color: white;
    background-color: #e2b681;


}


.logininputcontainer input {
    border-color: #FFEEC5;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0.7em;

}


button[type="submit1"] {
    background-color: #ce6b00;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    padding: 15px;
    width: 200px;
    border-radius: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

button[type="submit1"]:hover {
    opacity: 1;
}

button[type="submit1"]:active {
    transform: scale(0.9)
}

#clave {

    text-align: center;
    color: #ce6b00;
    list-style: none;
    margin-bottom: -15px;
}

button[type="button1"] {
    background-color: #971B1C;
    padding: 10px;
    border-radius: 20px;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;

}

button[type="button1"]:hover {
    opacity: 1;
}

button[type="button1"]:active {
    transform: scale(0.9)
}

#registro {
    text-decoration: none;
    color: white;
}

#miembro {
    color: #ce6b00;
    margin-bottom: -15px;
}


/*Registro*/

input {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 5px;
    border: #FFEEC5;
    color: white;

}

button[type="submit"] {
    background-color: #ce6b00;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px
}

button[type="submit"]:hover {
    opacity: 1;
}

button[type="submit"]:active {
    transform: scale(0.9)
}

button[type="button"] {
    background-color: #971B1C;
    border: 0;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    width: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-decoration: none;
}

button[type="button"]:hover {
    opacity: 1;
}

button[type="button"]:active {
    transform: scale(0.9)
}

input,
.registro input {
    margin: 5auto;
    border: 1px solid #FFEEC5;
    padding: 5px 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
    background-color: #e2b681;
    color: white;


}

.logininputcontainer select {

    margin: 5auto;
    margin-bottom: 5px;
    font-size: 14px;
    padding: 5px 10px;
    width: 100%;
    border-color: #FFEEC5;
    background-color: #e2b681;
    color: white;


}

.logininputcontainer input {

    border-color: #FFEEC5;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0.7em;
    color: white;
}

textarea {
    width: 100%;
    max-width: 100%;
    ;
    height: 150px;
    line-height: 150%;
    border: #FFEEC5;
    background-color: #e2b681;
    color: white;
    margin-top: 5px;
    font-family: roboto, sans-serif;
}

::-webkit-input-placeholder {
    color: white;
}

#caracteres {
    text-align: left;
    color: #ce6b00;
    margin-bottom: 10px;
    margin-left: 5px;
    font-family: roboto light, sans-serif;
}

#especialidad {
    margin-bottom: 5px;
}

#localidad {
    margin-bottom: 5px;
}

#siguiente {
    text-decoration: none;
    color: white;
}

#cuenta {
    color: #ce6b00;
}

#nacimiento {
    text-align: left;
    color: #ce6b00;

}

/*Agenda*/

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #971B1C;
    text-transform: uppercase;
    font-size: .6em;
}

header button {

    margin-left: .25em;
    z-index: 9999;
    position: relative;
    cursor: pointer;
    border: 0;
    background-color: #971B1C;
}

/*Menu desplegable*/
header nav {
    right: -50vw;
    height: 65vh;
    transition: all .3s ease;
    position: fixed;
    min-width: 30%;
    z-index: 9995;
    top: 0;
    bottom: 0;
    background-color: rgba(151, 27, 28, 0.9);
    padding: 5px;
    font-size: 12px;
}

/*menu de navegacion visible*/
nav.menuvisible {
    right: 0;
}

.usuario {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    text-align: center;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255, 255, 255, .25);
    color: antiquewhite;
}

.usuario img {
    border-radius: 50%;
    width: 20vmin;
    height: 20vmin;
    max-width: 15em;
    max-height: 15em;
    border: 3px solid #8F153F;
}

header nav a {
    color: antiquewhite;
    display: block;
    padding: 3px;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
}

#tutoriales a {
    color: #68AE6A;
    font-size: 12px;
}

#cursos a {
    color: #68AE6A;
    font-size: 12px;

}

.logo {
     margin: .15em;
    width: 6em;
}

#menu { 
     margin: .15em;
    width: 3em;
}
.encabezado h2 {
    display: flex;
    color: #971B1C;
    width: 100%;
    align-items: center;
    align-content: stretch;
    padding-left: 120px;
    background-color: #EA9D76;
    text-transform: uppercase;
    padding-top: 10px

}

.encabezado img {
    margin: .10em;
    display: block;
    width: 3em;
}

.encabezado {
    display: flex;
    width: 100%;
    align-items: center;
    align-content: space-between;
    background-color: #EA9D76;

}

.encabezado img {
    padding-left: 1em;
    display: block;
    width: 3em;
    font-weight: 50%;
    height: 2em;
    background-color: #EA9D76;
}

#dia2 {
    background-color: #68AE6A;
    color: white;
    font-family: roboto black, sans-serif;
    font-size: 1.1em;
}

#dia1 {
    background-color: #EA9D76;
 color: white;
    font-family: roboto black, sans-serif;
    font-size: 1.1em;
    text-decoration: none;
}

.calendario {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    color: gray;
    font-family: roboto regular, san-serif;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-top: 10px;
    font-size: 25px;
}

.calendario > * {
    width: 14.2857%;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center
}

.semana {
    display: flex;
    color: #971B1C;
    padding-top: 10px;
    font-size: 18px;
    padding-left: 40px;
}

.cursos {
    background-color:  #EA9D76;
    display: flex;
    margin-bottom: 10px;
}
.cursos1 {
    padding-bottom: 10px;
    padding-top: 10px;
    margin-right: 0px;
    margin-left: 20px
}

.cursos2 {
    padding-top: 10px;
    padding-left: 20px;
}

#tercerdia {
    font-size: 4em;
    color: white;
    background-color: #DA664C;
    margin-bottom: 5px;
    display: inline-block;
    line-height: 60px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 10px
}

#quincehoras {
    color: white;
    padding-bottom: 5px;
    font-size: 1em;
    margin-left: 10px;
    font-family: roboto light,sans-serif;
}

#pago1 {
    font-family: roboto black, sans-serif;
    font-size: 1.1em;
    color: #971B1C;
    padding-top: 5px;
}


#tejidos {
    color: white;
}

#tejido {
    color: white;
    font-family: roboto black, sans-serif;
    font-size: 1.8em;
    text-decoration: none;
}
#direccion {
    color:#971B1C;
    font-family: roboto light, sans-serif;
    font-size: 1em;
    padding-top: 5px
}

#dom {
    padding-right: 17px
}

#mes {
    display: flex;
    justify-content: center;
    color: #971B1C;
    font-family: roboto bold, sans-serif;
    font-size: 25px;
    padding-top: 10px;
}

#mes2 {
    display: flex;
    justify-content: center;
    color: #971B1C;
    font-family: roboto bold, sans-serif;
    font-size: 20px;
    padding-bottom: 20px
}