/*hoja de estilo para pagina web*/
/***********************************************/
* {
    box-sizing:border-box;    
}
body { /*selector*/
    /*background-color:#241f1c; propiedad:valor*/
    background-color:#1a1a1aff; /*propiedad:valor*/
    margin:0;
}
/***********************************************/
.article {
    color:white;
}
.article h3 {
    margin-top:1vw;
    margin-bottom:1vw;
    font-size: 3vw;
    text-align:center;
}
.article p {
    width:80%;
    margin-left:auto;
    margin-right:auto;
    font-size: 2.2vw;
}
.divimagen1{
    text-align:center;
}
.imagen1{
    width:40%;  
    border-radius: 0.8vw;
}
/***********************************************/
header {
     margin-top: 1vw;
     display: flex;
     align-items: center;
}
.logo {
    display: inline-block;
    margin-left:2vw;
}
.logo img {
    width: 14vw;
}
.navbar {
    display:inline-block;
    width:50%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.ul1 {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 1.0vw;
    background-color: #28220bff;
}
.ul1 li {
    float:left;
}
.nvaritem {
    display: block;
    color: white;
    font-size: 2.0vw;
    text-decoration: none;
    /*argin-left: 0.5vw;
    margin-right: 0.5vw;*/
    padding: 0.5vw 0.5vw;
}
.nvaritem:hover {
    background-color: darkgrey;
}
.contactonvar {
    display:inline-block;
    width:20vw;
    margin-right:2vw;
    border-radius: 1.0vw;
    background-color: darkgrey;
    color:white;
    text-align:center;
    font-size: 1.5vw;
}
/***********************************************/
/*stilos para galeria*/
.slideshowContainer {
  position: relative;
  overflow: hidden;
  margin-left:auto;
  margin-right:auto;
  /*margin: 50px 0 75px;*/
  width: 60vw;
  height: 50vw;
}
.imageSlides {
  position: absolute;
  left: 50%;
  top: 45%;
  border-radius:1vw;
  transform: translate(-50%, -50%);
  width: 60vw;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}
/* add 'visible' class via Javascript */
.visible {
  opacity: 1;
}
.slideshowArrow {
  font-size: 12vw;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.slideshowArrow:hover {
  opacity: 0.75;
}
#leftArrow {
  position: absolute;
  left: 4%;
  top: 45%;
  transform: translate(-50%, -50%);
}
#rightArrow {
  position: absolute;
  right: 4%;
  top: 45%;
  transform: translate(50%, -50%);
}
.slideshowCircles {
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.circle {
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  border: solid 2px rgba(255, 255, 255, 0.5);
  transition: 1s ease-in-out;
}
.dot {
  background-color: rgba(255, 255, 255, 0.7);
  border: solid 2px rgba(255, 255, 255, 0.5);
}
/***********************************************/
.footer1 {
    background-color:darkgrey;
}
.footercontainer {
    display:flex;
    width:80%;
    margin-left:auto;
    margin-right:auto;

}
.divfooter1 {
    width: 60%;
}
.divfooter2 {
    width: 40%;
}
.ulfooter {
    list-style-type: none;
    font-size: 2vw;
    margin:0;
    padding:0;
}