.contVid  {display: flex; align-items: flex-start; width: fit-content; justify-content: center; margin: auto; gap: 20px;
}
.video1   {width: 400px;
}
.video2   {width: 128px;
}
.video3   {width: 128px;
}






.rachelleImg { width: 100%; max-width: 1200px; padding: 0px 5%; margin: 40px auto; display: block; box-sizing: border-box;}
.upper 		 { text-transform: uppercase; font-weight: 500;}
.text-bioInt { width: 100%;}

body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
font-weight: lighter; 
font-size: 17px;
line-height: 21px;
transition: all 0.2s;
}

.slider {
        background: url(images/baner-color.jpg);
        height: 100vh;
        background-size: cover;
        background-position: bottom;
        transition: all 0.2s ease-in-out 0s;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }


.expo-home {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
text-decoration: none;
font-size: 25px;
padding: 15px;
border-radius: 7px;
margin: 0px 0px 100px 0px;
}

.expo-home strong {
  margin: 0px 4px;
}

.bio {
        background: url(images/bio.jpg);
        height: 587px;
        background-size: cover;
        background-position: right;
        transition: all 0.2s ease-in-out 0s;
      }

.obra {
        background: url(images/obras1.jpg);
        height: 587px;
        background-size: cover;
        background-position: left;
        transition: all 0.2s ease-in-out 0s;
      }

.exposi {
        background: url(images/exposi.jpg);
        height: 587px;
        background-size: cover;
        background-position: right;
        transition: all 0.2s ease-in-out 0s;
      }   

.noticias1 {
        background: url(images/noticias1.jpg);
        height: 587px;
        background-size: cover;
        background-position: center;
        transition: all 0.2s ease-in-out 0s;
      }                  


.contact {
        background: url(images/contact.jpg);
        height: 100vh;
        background-size: cover;
        background-position: center;
        transition: all 0.2s ease-in-out 0s;
      }

.social {
        background: url(images/social.jpg);
        height: 587px;
        background-size: cover;
        background-position: center;
        transition: all 0.2s ease-in-out 0s;
      }   


.borde {border: 1px solid yellow; color: white}
.borde1 {border: 1px solid red;}

.fondo-nav {
  background: rgba(0,0,0,0.6);
  padding: 13px 25px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 999999;
  transition: all 0.2s ease-in-out 0s;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
  transition: all 0.2s ease-in-out 0s;
}

.fija {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  transition: all 0.2s ease-in-out 0s;
}

.logo {
  width: 210px;
  transition: all 0.2s ease-in-out 0s;
}

.datos1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
  transition: all 0.2s ease-in-out 0s;
}

.face {
  width: 40px;
  margin-left: 15px;
  transition: all 0.2s ease-in-out 0s;
}


.leng {
  color: white;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}

.leng:hover {
  color: white;
  text-decoration: underline;
  transition: all 0.2s ease-in-out 0s;
}


.raya1 {
  color: white;
  margin: 0px 9px;
  transition: all 0.2s ease-in-out 0s;
}


h2 {
  font-size: 40px;
  text-align: center;
  display: block;
  margin-top: 30px;
  line-height: 40px;
  transition: all 0.2s ease-in-out 0s;
}

.marque2 {
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  width: 1200px;
  position: relative;
  transition: all 0.2s ease-in-out 0s;
}

.bt-caja1 {text-align: center;  transition: all 0.2s ease-in-out 0s;
}
.bt-caja2 {text-align: left;  transition: all 0.2s ease-in-out 0s;
}
.bt-caja3 {text-align: right; transition: all 0.2s ease-in-out 0s;
}

.t-normal {font-weight: normal; transition: all 0.2s ease-in-out 0s;
}





.bt1 {
  margin: auto;
  display: inline-block;
  background-color: black;
  color: white; 
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}

.bt1:hover {
  margin: auto;
  display: inline-block;
  background-color: #b5b5b5;
  color: black; 
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}

.regla1 {
  width: 1200px;
  margin: auto;
  border: 1px solid black;
  margin-top: 30px;
  margin-bottom: 30px;
  transition: all 0.2s ease-in-out 0s;
}

.titulo1 {
  display: block;
  font-size: 38px;
  line-height: 38px;
  margin-bottom: 20px;
  font-weight: normal;
  transition: all 0.2s ease-in-out 0s;
}

.resena {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 1200px;
  margin: auto;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
  transition: all 0.2s ease-in-out 0s;
}

.rachelle1 {
  background-image: url(images/rachelle1.jpg);
  width: 493px;
  height: 530px;
  transition: all 0.2s ease-in-out 0s;
}

.texto1 {
  background-color: black;
  color: white;
  padding: 13px 15px;
  box-sizing: border-box;
  text-align: justify;
  width: 680px;
  transition: all 0.2s ease-in-out 0s;
}

.espacio {
  margin-top: 30px;
  transition: all 0.2s ease-in-out 0s;
}





.accesos {
  display: flex;
  width: 1200px;
  margin: auto;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}


.acceso {
  width: 32.55555%;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  color: white;
  padding: 40px 0px;
  background-color: gray;
  display: flex;
  align-items: center;
  justify-content: center;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}

.f1 {
  background-image: url(images/libros.jpg);
  background-size: cover;
  background-position: center;
  transition: all 0.2s ease-in-out 0s;
}

.f1:hover {
  filter: grayscale(90%);
  transition: all 0.2s ease-in-out 0s;
}



.f2 {
  background-image: url(images/obras.jpg);
  background-size: cover;
  background-position: center;
  transition: all 0.2s ease-in-out 0s;
}

.f2:hover {
  filter: grayscale(90%);
  transition: all 0.2s ease-in-out 0s;
}



.f3 {
  background-image: url(images/expo.jpg);
  background-size: cover;
  background-position: center;
  transition: all 0.2s ease-in-out 0s;
}

.f3:hover {
  filter: grayscale(90%);
  transition: all 0.2s ease-in-out 0s;
}








.footer {
  width: 100%;
  background-color: black;
  color: white;
  margin-top: 30px;
  padding: 20px 0px;
  transition: all 0.2s ease-in-out 0s;
}

.wrap {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}

.footer1 {

  transition: all 0.2s ease-in-out 0s;
}

.casitres {
  width: 17px;
  transition: all 0.2s ease-in-out 0s;
}

.casitres1 {
  color: #e0e0e0;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
}









/*----------------- BIOGRAFIA--------------*/


h1 {
  font-size: 50px;
  text-align: center;
  color: white;
  display: block;
  margin-top: 30px;
  line-height: 50px;

  text-shadow: 0.0em 0.3em 0.6em #000,
      -0.0em 0.9em 5em #000,
      0.0em -0.3em 2em #000;
  transition: all 0.2s ease-in-out 0s;
}

.arriba1 {
  margin-top: -210px;
  transition: all 0.2s ease-in-out 0s;
}

.cuadro {
  display: block;
  background-color: black;
  color: white;
  width: 648px;
  margin: auto;
  text-align: justify;
  padding: 24px 35px;
  margin-top: 27px;
  margin-bottom: 40px;
  transition: all 0.2s ease-in-out 0s;
}


.biografia {
  width: 1200px;
  margin: auto;
  transition: all 0.2s ease-in-out 0s;
}

.rachelle2 {
  background-image: url(images/rachelle2.jpg);
  background-size: cover;
  width: 508px;
  height: 762px;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.2s ease-in-out 0s;
}

.borderaya1 {
  width: 781px;
  padding: 40px 40px;
  display: inline-block;
  border: 2px solid black;
  vertical-align: middle;
  margin-left: -179px;
  transition: all 0.2s ease-in-out 0s;
}

.alineacion1 {
  width: 400px;
  float: right;
  display: block;
  text-align: justify;
  transition: all 0.2s ease-in-out 0s;
}



.rachelle3 {
  background-image: url(images/rachelle3.jpg);
  background-size: cover;
  width: 478px;
  height: 642px;
  background-position: center;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  z-index: -2;
  transition: all 0.2s ease-in-out 0s;
}

.borderaya2 {
  width: 763px;
  padding: 40px 40px;
  display: inline-block;
  border: 2px solid black;
  vertical-align: bottom;
  margin-right: -130px;
  margin-bottom: 40px;
  transition: all 0.2s ease-in-out 0s;
}

.alineacion2 {
  width: 530px;
  display: block;
  text-align: justify;
  float: left;
  transition: all 0.2s ease-in-out 0s;
}

.bio-alto {
  margin-top: -90px;
  transition: all 0.2s ease-in-out 0s;
}






/*----------------- PORTA --------------*/

.porta {
  width: 1200px;
  margin: auto;
  z-index: -1;
  text-align: center;
  transition: all 0.2s ease-in-out 0s;
}

.btbotones {
  width: 100%;
  margin-top: 90px;
  text-align: center;
  float: left;
  transition: all 0.2s ease-in-out 0s;
}

.arriba2 {
  margin-top: -110px;
  transition: all 0.2s ease-in-out 0s;
}

.fondo1 {
  background-color: black;
  transition: all 0.2s ease-in-out 0s;
}







/*----------------- EXPOSICIONES --------------*/

.expo {
  width: 1200px;
  margin: auto;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}


.fecha {
  background-color: gray;
  color: black;
  padding: 20px 25px;
  font-weight: bold;
  font-size: 55px; 
  display: flex;
  align-items: center;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}

.textobio {
  width: 1000px;
  text-align: justify;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 20px 0px;
  flex-wrap: wrap;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}











/*----------------- NOTICIAS   --------------*/

.noticias {
  width: 1200px;
  margin: auto;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  
  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}


.noti {
  box-sizing: border-box;
  margin-bottom: 40px;
  width: 19%;
  transition: all 0.2s ease-in-out 0s;
}


.bt-noti {
  text-decoration: none;
  color: black;
  display: block;
  font-size: 16px;
  line-height: 18px;
  transition: all 0.2s ease-in-out 0s;
}

.bt-noti:hover {
  text-decoration: underline;
  color: black;
  display: block;
  transition: all 0.2s ease-in-out 0s;
}

.arriba3 {
  margin-top: 100px;
  transition: all 0.2s ease-in-out 0s;
}




/*----------------- OBRAS SOCIALES --------------*/

.caritas {
  display: flex;
  width: 1200px;
  margin: auto;
  align-items: center;
  margin-bottom: 30px;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
  transition: all 0.2s ease-in-out 0s;
}

.img-caritas3 {
  width: 400px;
  margin-right: 15px;
  transition: all 0.2s ease-in-out 0s;
}

.texto-caritas {
  text-align: justify;
  transition: all 0.2s ease-in-out 0s;
}

.img-caritas1 {
  background-image: url(images/caritas1.jpg);
  width: 100%;
  height: 460px;
  background-size: cover;
  background-position: top;
  transition: all 0.2s ease-in-out 0s;
}

.caritas-cierre {
  text-align: justify;
  box-sizing: border-box;
  width: 100%;
  background-color: gray;
  color: white;
  padding: 20px 25px;
  transition: all 0.2s ease-in-out 0s;
}

.caritas-cierre1 {
  font-size: 26px;
  line-height: 26px;
  text-align: center;
  transition: all 0.2s ease-in-out 0s;
}


.caritas-cie {
  font-size: 24px;
  line-height: 26px;
  text-align: center;
  transition: all 0.2s ease-in-out 0s;
}









/*----------------- LIBROS --------------*/

.notas {
  margin: auto;
  margin-top: 100px;
  max-width: 550px;
  width: 90%;
}

.reglachica {
  width: 80%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}


.fichatec1 {
  display: block;
  max-width: 400px;
  width: 90%;
  margin: auto;
  text-align: justify;
}








/*----------------- CONTACTOS --------------*/


.contactos {
  background: url(images/contact.jpg);
  height: 100vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 680px;
  margin-bottom: -40px;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
        transition: all 0.2s ease-in-out 0s;
      }


.formu {
  width: 600px;
  background-color: rgba(0,0,0,0.6);
  box-sizing: border-box;
  padding: 20px 30px;
  margin-top: 80px;
  transition: all 0.2s ease-in-out 0s;
}

#frmContact {
  margin-top: 30px;
  transition: all 0.2s ease-in-out 0s;
}

.contaco-campo {
  display: block;
  width: 100%;
  margin: auto;
  margin-bottom: 12px;
  transition: all 0.2s ease-in-out 0s;
}

.contaco-campo input {
  font-size: 16px;
  width: 100%;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 6px 10px;
  background: none;
  border: 2px solid white;
  border-radius: 0px;
  color: white;
  font-weight: normal;
  outline: none;
  -webkit-box-sizing: border-box;‌​
     -moz-box-sizing: border-box;
      box-sizing: border-box;
  transition: all 0.3s; 
  box-sizing: border-box;
  transition: all 0.2s ease-in-out 0s;
}

.contaco-campo input:focus {
  border: 2px solid #92cbc2;
  transition: all 0.2s ease-in-out 0s;
}


::-webkit-input-placeholder { color: white;   transition: all 0.2s ease-in-out 0s;
} 
:-moz-placeholder { /* Firefox 18- */ color: white;   transition: all 0.2s ease-in-out 0s;
} 
::-moz-placeholder { /* Firefox 19+ */ color: white;  transition: all 0.2s ease-in-out 0s;
} 
:-ms-input-placeholder { color: white;  transition: all 0.2s ease-in-out 0s;
}
::-webkit-input-placeholder { color: white;   transition: all 0.2s ease-in-out 0s;
} 
:-moz-placeholder { /* Firefox 18- */ color: white;   transition: all 0.2s ease-in-out 0s;
} 
::-moz-placeholder { /* Firefox 19+ */ color: white;  transition: all 0.2s ease-in-out 0s;
} 
:-ms-input-placeholder { color: white;  transition: all 0.2s ease-in-out 0s;
}


.contaco-campo textarea {
  font-size: 16px;
  width: 100%;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 10px 10px 6px 10px;
  background: none;
  border: 2px solid white;
  border-radius: 0px;
  color: white;
  font-weight: normal;
  outline: none;
  -webkit-box-sizing: border-box;‌​
     -moz-box-sizing: border-box;
      box-sizing: border-box;
  transition: all 0.2s; 
  box-sizing: border-box;
  transition: all 0.2s ease-in-out 0s;
}

.contaco-campo textarea:focus {
  border: 2px solid #92cbc2;
  transition: all 0.2s ease-in-out 0s;
}



.contaco-campo button {
  width: 100%;
  cursor: pointer;
  background: gray;
  border: none;
  border-bottom: 4px solid #444343;
  color: #eee;
  font-size: 16px;
  line-height: 2.5em;
  transition: all 0.3s; 
  transition: all 0.2s ease-in-out 0s;
}

.contaco-campo button:hover {
  background: #444343;
  border-bottom: 4px solid black;
  transition: all 0.2s ease-in-out 0s;
}

.contaco-campo button:focus {
  outline: none;
  background: #356acc;
  border-bottom: 4px solid #284f99;
  transition: all 0.2s ease-in-out 0s;
}


.cusi1 {
  margin: auto;
  text-align: center;
  display: block;
  max-width: 1200px;
  width: 90%;
  margin-bottom: 30px;
  transition: all 0.2s ease-in-out 0s;
}


























@media all and  (max-width: 1250px) {

.marque2 {
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  width: 90%;
}

.regla1 {
  width: 90%;
  margin: auto;
  border: 1px solid black;
  margin-top: 30px;
  margin-bottom: 30px;
}


.resena {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 90%;
  margin: auto;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
}

.rachelle1 {
  background-image: url(images/rachelle1.jpg);
  width: 43%;
  height: 530px;
}

.texto1 {
  text-align: justify;
  width: 55%;
  font-size: 16px;
  line-height: 18px;
}


.accesos {
  display: flex;
  width: 90%;
  margin: auto;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}


.wrap {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}







/*----------------- BIOGRAFIA 1250 --------------*/

.biografia {
  width: 90%;
  margin: auto;
  text-align: center;
}


.rachelle2 {
  background-image: url(images/rachelle2.jpg);
  background-size: cover;
  background-position: center;
  width: 44%;
  height: 762px;
  display: inline-block;
  vertical-align: middle;
}

.borderaya1 {
  width: 54%;
  padding: 20px 20px;
  display: inline-block;
  border: 2px solid black;
  vertical-align: middle;
  margin-left: -129px;
}

.alineacion1 {
  width: 325px;
  float: right;
  display: block;
  text-align: justify;
}



.rachelle3 {
  background-image: url(images/rachelle3.jpg);
  background-size: cover;
  width: 40%;
  height: 642px;
  background-position: center;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  z-index: -2;
}

.borderaya2 {
  width: 58%;
  padding: 20px 20px;
  display: inline-block;
  border: 2px solid black;
  vertical-align: bottom;
  margin-right: -130px;
  margin-bottom: 40px;
}

.alineacion2 {
  width: 360px;
  display: block;
  text-align: justify;
  float: left;
}

.bio-alto {
  margin-top: -90px;
}




/*----------------- PORTA 1250 --------------*/

.porta {
  width: 90%;
  margin: auto;
  z-index: -1;
  text-align: center;
}





/*----------------- NOTICIAS 1250 --------------*/

.noticias {
  width: 90%;
  margin: auto;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}


.noti {
  box-sizing: border-box;
  margin-bottom: 40px;
  width: 32%;
}

.arriba3 {
  margin-top: 100px;
}







/*----------------- EXPOSICIONES --------------*/

.expo {
  width: 90%;
  margin: auto;
  margin-top: 40px;
  display: flex;
  justify-content: center;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}


.fecha {
  background-color: gray;
  color: black;
  padding: 20px 25px;
  font-weight: bold;
  font-size: 55px; 
  display: flex;
  align-items: center;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}

.textobio {
  width: 80%;
  text-align: justify;
  font-size: 16px;
  display: flex;
  margin-left: 10px;
  align-items: center;
  padding: 20px 0px;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}





/*----------------- OBRAS SOCIALES --------------*/

.caritas {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  margin-bottom: 30px;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}





}












@media all and  (max-width: 992px) {
  






}












@media all and  (max-width: 960px) {
  





/*----------------- BIOGRAFIA 960 --------------*/

.cuadro {
  display: block;
  background-color: black;
  color: white;
  width: 90%;
  box-sizing: border-box;
  margin: auto;
  text-align: justify;
  padding: 24px 35px;
  margin-top: 27px;
  margin-bottom: 40px;
}

.rachelle2 {
  background-image: url(images/rachelle2.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 362px;
  display: inline-block;
  vertical-align: middle;
}

.borderaya1 {
  width: 100%;
  margin-top: 20px;
  padding: 0px 0px;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid black;
  vertical-align: middle;
  margin-left: 0px;
}

.alineacion1 {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px;
  float: inherit;
  display: block;
  text-align: justify;
}



.rachelle3 {
  background-image: url(images/rachelle3.jpg);
  background-size: cover;
  width: 100%;
  height: 272px;
  background-position: bottom;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  z-index: -2;
}

.borderaya2 {
  width: 100%;
  padding: 0px 0px;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid black;
  vertical-align: bottom;
  margin-right: 0px;
  margin-bottom: 20px;
}

.alineacion2 {
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  display: block;
  text-align: justify;
  float: left;
}

.bio-alto {
  margin-top: 20px;
}







}















@media all and  (max-width: 820px) {

/*----------------- OBRAS SOCIALES --------------*/

.caritas {
  display: flex;
  width: 90%;
  margin: auto;
  align-items: center;
  flex-direction: column;
  margin-bottom: 15px;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}

.img-caritas3 {
  width: 100%;
  margin-right: 0;
  margin-bottom: 15px;
}

.texto-caritas {
  text-align: justify;
}

.img-caritas1 {
  background-image: url(images/caritas1.jpg);
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: top;
}

.caritas-cierre {
  text-align: justify;
  box-sizing: border-box;
  width: 100%;
  background-color: gray;
  color: white;
  padding: 20px 25px;
}

.caritas-cie {
  font-size: 22px;
  line-height: 24px;
  text-align: center;
}

.expo-home {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: white;
text-decoration: none;
font-size: 16px;
padding: 15px;
border-radius: 7px;
margin: 0px 0px 100px 0px;
}

}















@media all and  (max-width: 655px) {

body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
font-weight: lighter; 
font-size: 15px;
line-height: 17px;
transition: all 0.2s;
}


h1 {
  font-size: 35px;
  box-sizing: border-box;
  text-align: center;
  color: white;
  display: block;
  margin-top: 30px;
  line-height: 50px;

  text-shadow: 0.0em 0.3em 0.6em #000,
      -0.0em 0.1em 0.3em #000,
      0.0em -0.3em 0.6em #000;
}


.resena {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 90%;
  flex-direction: column;
  margin: auto;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
}

.rachelle1 {
  background-image: url(images/rachelle1.jpg);
  width: 100%;
  background-position: bottom;
  background-size: cover;
  height: 190px;
}

.texto1 {
  text-align: justify;
  width: 100%;
  margin-top: 10px;
  font-size: 16px;
  line-height: 18px;
}


.acceso {
  width: 32.55555%;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  color: white;
  padding: 30px 0px;
  background-color: gray;
}


.bt-caja2 {text-align: center;}




.noti {
  box-sizing: border-box;
  margin-bottom: 40px;
  width: 32%;
}


.formu {
  width: 90%;
}



}






@media all and (max-width: 576px) {

.logo {
  width: 150px;
}

.face {
  display: none;
  width: 40px;
}

.leng {
  color: white;
  text-decoration: none;
}

.fondo-nav {
  background: rgba(0,0,0,0.6);
  padding: 13px 9px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
}


.datos1 {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;
}


.wrap {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}

.footer1 {
  width: 100%;
  text-align: center;
  font-size: 15px;
}


.noti {
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 48%;
}




/*----------------- EXPOSICIONES --------------*/

.expo {
  width: 90%;
  margin: auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}


.fecha {
  background-color: gray;
  color: black;
  padding: 20px 25px;
  font-weight: bold;
  font-size: 55px; 
  display: flex;
  align-items: center;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}

.textobio {
  width: 100%;
  text-align: justify;
  font-size: 16px;
  display: flex;
  margin-left: 0px;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 15px;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}



/*----------------- OBRAS SOCIALES --------------*/

.img-caritas1 {
  background-image: url(images/caritas1.jpg);
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: top;
}

.caritas-cie {
  font-size: 18px;
  line-height: 19px;
  text-align: center;
}

.caritas-cierre {
  text-align: justify;
  box-sizing: border-box;
  width: 100%;
  background-color: gray;
  color: white;
  padding: 10px 12px;
}




.cuadro {
  display: block;
  background-color: black;
  color: white;
  width: 90%;
  box-sizing: border-box;
  margin: auto;
  text-align: justify;
  padding: 15px 17px;
  margin-top: 27px;
  margin-bottom: 40px;
}



}




@media all and (max-width: 470px) {

.accesos {
  display: flex;
  width: 90%;
  margin: auto;
  justify-content: space-between;
  flex-direction: column;

  display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; 
}


.acceso {
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  color: white;
  padding: 20px 0px;
  margin-bottom: 10px;
  background-color: gray;
}


}



@media all and (max-width: 570px) {

/*----------------- BIOGRAFIA 470 --------------*/

.bio {
        background: url(images/bio.jpg);
        height: 387px;
        background-size: cover;
        background-position: right;
      }

.obra {
        background: url(images/obras1.jpg);
        height: 387px;
        background-size: cover;
        background-position: left;
      } 

.exposi {
        background: url(images/exposi.jpg);
        height: 387px;
        background-size: cover;
        background-position: right;
      }   

.noticias1 {
        background: url(images/noticias1.jpg);
        height: 387px;
        background-size: cover;
        background-position: center;
      }                  

.contact {
        background: url(images/contact.jpg);
        height: 100vh;
        background-size: cover;
        background-position: right;
      }


.social {
        background: url(images/social.jpg);
        height: 387px;
        background-size: cover;
        background-position: center;
      }   



}