*{
	padding: 0px;
    margin: 0px;
}

body{
    height: 100vh;
}

p{
    text-align: justify;
}

.banner{
    padding: 0px;
}

.banner1{
    width: 100%;
    height: auto;
}

#cosas_c{
    margin-right: 0px;
    padding-right: 0px;
}

.menu{
    background-color:#F6DE7E;
    width: 100%;
    height: auto;
}

.menu nav{
    width: 100%;
    height: auto;
    margin: 3px auto;
    padding: 3px;
    /*diseño flex*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu nav .navbar-nav a{
    background: transparent;

    color: black;
    text-decoration: none;
    font-size: 17px;
    margin: 5px;
    font-family: Cambria;
    font-weight: bold;
}

.menu nav .navbar-brand{
    font-family: Cambria;
    color: black;
    font-weight: bold;
    font-size: 23px;
}

.menu nav a:hover{
    -webkit-animation: hover 1200ms linear 2 alternate;
    animation: hover 1200ms linear 2 alternate;
    color: white;
}

.menu nav #d1:hover{
    -webkit-animation: hover 1200ms linear 2 alternate;
    animation: hover 1200ms linear 2 alternate;
    color: #FFBD59;
}

.menu nav a:active {
    color: white; 
}

#booto{
    background-color: white;
}
/*Fondo*/
.contenedorP{
    height: 100%;
    background-image: url(../dist/img/fondo.jpg); 
    background-size: 100% ;
}

.todo{
    height: 100vh;
    margin: 0px;
    background-color: transparent;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.h1class{
    font-weight: lighter;
}

.form-control:focus{
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0);
}

input:valid{
    border: 2.5px solid #ffc107;
}

.desaparecer{
    display: none;
}

.card1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.cardbody{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.Carru{
    padding: 0px;
    text-align: justify;
}


.cardSec{
    background-color: #F3F3F3;
    border: 0px;
    color: black;
    font-family: Cambria;
}

.cardSec .card{
    background-color: transparent;
    border: 0px;
}

.cardSec h1{
    color: black;
    font-family: Cambria;
    font-size: 38px;
    font-weight: bold;
}

.cardSec p{
    color: black;
    font-family: Cambria;
    text-align: justify;
    font-size: 20px;
}

.contenedorIma {
  position: relative;
  height: 360px;
  width: 360px;
  margin: auto;
  float: left;
}

.contenedorIma img {
  position: absolute;
  left: -30px;
  top: -15px;
  transition: opacity 0.5s ease-in-out;
}

.contenedorIma img.top:hover {
  opacity: 0;
}

/*TITULO*/
.titulo{
    font-size: 50px;
    background: url("../dist/img/TextOrange.png") repeat-y;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;

    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;

    animation: textA 62s linear infinite 0s;
    -webkit-animation: textA 62s linear infinite 0s;
    -moz-animation: textA 62s linear infinite 0s;
}

@keyframes textA {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@-webkit-keyframes textA {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@-moz-keyframes textA {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.textt{
    display: flex;
    flex-direction: row;
}

.textt1{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.card1 a{
    background-color: #CD84E5;
    border: #522D83 solid 2px;
    color: white;
}

.card1 a:hover{
    background-color: #7A63AA;
    border: #522D83 solid 2px;
    color: white;
}


.animacion{
    animation-duration: 2s;
    animation-name: slide;
  }
  
@keyframes slide{
    from {
      margin-top: -50%;
    }
  
    to {
      margin-top: 0%;
    }
}

/*Responsive bonito ;3*/
@media screen and (max-width: 575px){
    .contenedorP{
        background-color: #ECEDE7;
        background-image: none;
    }
/*TITULO*/
    .titulo{
    font-size: 50px;
    background: url("../dist/img/TextOrange.png") repeat-y;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;

    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;

    animation: textA 62s linear infinite 0s;
    -webkit-animation: textA 62s linear infinite 0s;
    -moz-animation: textA 62s linear infinite 0s;
}
    .card1{
        background-size: 180% 100%;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px){
    .contenedorP{
        background-size: 165% 100%;
    }
    .card1{
        background-size: 165% 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px){
    .contenedorP{
        background-size: 140% 100%;
    }
    .card1{
        background-size: 140% 100%;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px){
    .contenedorP{
        background-size: 120% 100%;
    }
    .card1{
        background-size: 120% 100%;
    }
}