@font-face{
    font-family: "Myriad-Pro";  
    src: url(http://www.anaveer.in/honda/font/MYRIADPRO-BOLD.OTF) format("truetype");
}
html *{
    font-family: "Myriad-Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: large;
    color: #6D6E71;
}
body {
    margin: 0;
    margin-bottom:50px !important;
}

.layout {
    position: fixed;
    display: flex;
    flex-direction: column;
    opacity: 1 !important; 
    /* object-fit: fill; */
}

.layoutBackground {
  opacity: .60;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background-image: url(../public/fondo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed !important;
  background-position: center;
}

.navbar {
    width: 100%;
    min-height: 8%;
    overflow: auto;
    background: linear-gradient(
      to bottom, 
    #ffffff 0%, 
    #ffffff 50%, 
    #bef0ff 50%, 
    #bef0ff 100%
    );
    /* height: 9.5vh; */
  }

.children {
  padding: 0 0 10vh 0;
  height: 100%;
}

.bottom-right {
  /* right: 0 !important; */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0rem 2vw 1vh 0;
}

footer {
    /* position: fixed; */
    padding: .2em;
    /* bottom: 0; */
    width: 100%;
    background: #bef0ff;
    text-align: center;
}

ul {
  display: flex;
  justify-content: center;
	list-style: none;
  margin-top: .5em;
  /* height: 50%; */
  margin-bottom: 0;
	/* contain the list items */
	
	/*margin: 0 auto;
	display: table;*/ /* ul will behave like a table now */
	
	text-align: center;
}

  li {
    text-align: center;
    width: 11em
  }
  
  a {
    text-decoration: none;
    color: #333;
    text-align: center;
    margin-top: .2em;
  }

  .selectedBottom {
    margin: 0;
    height: 100%;
  }
  
  .tab {
    float: left;
    /* height: 3vh; */
    margin: 0 0 0 0;
    border: 1px solid #3D9DD4;
    background: #3D9DD4;
    border-radius: 8px 8px 0 0;
    height: 40%;
    /* top | right | bottom | left */
    /* padding: 30em, 50em, 50em, 40em; */
  }
  
  .tab, .tab a {
    transition: all .25s;
  }
  
  .tab a {
    display: inline-block;
    width: 100%;
  }
  
  .tab a:first-child {
    white-space: nowrap;
  }
  
  .tab.tabClosed, .tab.tabClosed a:first-child {
    margin-right: 0;
    border-width: 0;
  }
  
  .tab.tabClosed {
    width: 0 !important;/* use important because we need to set the width of tabs in javascript in order to be able to animate them to 0 */
  }
  
  .tab.tabClosed a {
    opacity: 0;
  }
  
  .tab:hover {
    background: #bef0ff;
    border: 1px solid #bef0ff;
    cursor: pointer; 
  }
  
  li.selected {
    border: 1px solid #bef0ff;
    background: #bef0ff;
    height: 100% !important;
  }

  a.selected {
    background: white;
    width: 90%;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin: .5em .5em 0 .3em;
    border-radius: 8px 8px 8px 8px;
  }

  .selectedBottom {
    width: 100%;
    background-color: rgb(190, 240, 255);
  }

  .body {
    width: 100%;
    height: 100%;
  }

  .otrosServicios {
    border-radius: 10px;
    max-width: 600px;
    min-width: 300px;
    height: auto;
  }
/*
  .otrosServiciosBorderLeft {
    border-radius: 10px;
    margin: 0 1rem 0 1rem;
    width: 23.44vw;
    height: 38.9vh;
  }

  .otrosServiciosBorderRight {
    border-radius: 10px;
    margin: 0 0 0 0;
    width: 23.44vw;
    height: 38.9vh;
    object-fit: cover;
  } */


  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .cvRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 45.2vh;
    justify-content: center;
    margin-top: 1rem;
  }

  .cvContainer {
    width: 65%;
    height: 100%;
    overflow:auto;
    border-radius: 10px;
    text-align: justify;
    background-color: white;
    border: 10px solid #bef0ff;
    resize: none;
  }

  .cvText {
    padding: 1rem;
  }
  
  .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }

  .sectionTitle{
    text-align: center;
    color: black;
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .serviciosPicContainer1 {
    max-width: 650px;
    max-height: 500px;
    min-width: 350px;
    min-height: 200px;
    /* position: relative;
    object-fit: none;
    object-position: 30% 0; */
    /* margin: 0 1rem 0 0; */
    /* margin-right: 1rem; */
  }

  .serviciosPicContainer2 {
    width: 548px;
    height: 400px;
    position: relative;
    object-fit: none;
    object-position: 30% 0;
    /* margin: 0 1rem 0 0; */
    /* margin-right: 1rem; */
  }

  .serviciosPicContainer3 {
    width: 595px;
    height: 400px;
    position: relative;
    object-fit: none;
    object-position: 30% 0;
    /* margin: 0 1rem 0 0; */
    /* margin-right: 1rem; */
  }

  .slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }

  .slider > a {
  transition: all .25s;
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  background: #3D9DD4;
  border: 3px solid #6D6E71;
  text-decoration: none;
  align-items: center;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 .5rem .5rem .5rem;
  position: relative;
  font-size: 2rem;
}

.slider > a:hover {
  background: white;
  cursor: pointer; 
}

.slider > a.selectedSlider {
  background: white;
}

.slide-1 {
  opacity: 1;
  transition: all 1s;
}

.imageFit {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 15%;
}

.imageCover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.background {
  object-fit: contain;
}

.inicioTopLeft {
  margin-bottom: .5rem;
  width: 18vw;
  height: 40vh ;
}

.inicioBottomLeft {
  width: 18vw;
  height: 30vh ;
}

.inicioTopCenter {
  width: 23vw;
  height: 30vh ;
  margin-bottom: .5rem;
  border-radius: 10px;
}

.inicioBottomCenter {
  width: 23vw;
  height: 40vh ;
  border-radius: 10px;
}

.inicioTopRight {
  width: 23vw;
  height: 40vh ;
  margin-bottom: .5rem;
  border-radius: 10px;
}

.inicioBottomRight {
  width: 23vw;
  height: 30vh ;
  border-radius: 10px;
}

.slide {
  transition: opacity 0.3s ease,
}

.imageAppear {
  transition: opacity 0.7s ease,
}

.topTopQS {
  width: 15vw;
  height: 25.32vh;
  transform: rotate(10deg);
}

.topBottomQS {
  width: 16.67vw;
  height: 23.51vh;
  margin: 2rem 0 0 5rem;
  transform: rotate(360deg);
}

.bottomLeftQS {
  width: 16.67vw;
  height: 23.51vh;
  margin: 0 0 0 1rem;
  transform: rotate(340deg);
}

.bottomCenterQS {
  width: 25vw;
  height: 36.16vh;
  margin: 0 0 0 0rem;
}

.bottomRightQS {
  width: 16.67vw;
  height: 27.12vh;
  margin: 1rem 1rem 0 0rem;
  transform: rotate(340deg);
}

.star {
  -webkit-mask-image: image(url('../public/star.png'));
  /* -webkit-mask-size: contain; */
  -webkit-mask-repeat: no-repeat;
  mask-image: image(url('../public/star.png'));
  /* mask-size: contain; */
  mask-repeat: no-repeat;

  -webkit-mask-repeat: no-repeat;
    /* -webkit-mask-size: cover; */
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    /* mask-size: cover; */
    mask-position: center;
    -webkit-mask-size: 60%;
    mask-size: 60%;
}


.star img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hexagon {
  -webkit-mask-image: image(url('../public/hexagon.png'));
  -webkit-ask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: image(url('../public/hexagon.png'));
  mask-size: contain;
  mask-repeat: no-repeat;

  -webkit-mask-repeat: no-repeat;
    /* -webkit-mask-size: cover; */
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    /* mask-size: cover; */
    mask-position: center;
}


.hexagon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer {
  /* position: fixed; */
  bottom: 0;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.contacto {
  max-width: 95%;
  height: auto;
  border-radius: 10px;
}

.oval {
  border-radius: 50%;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  /* display: inline-block; */
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}