@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

html, body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Nanum Gothic', sans-serif!important;
}



:root {
  --main-color : rgba(35,135,55, 1);
  --main-black-color : rgba(0,0,0, 1);
  --second-color : rgba(100,180,77, 1);
  --third-color:#c1d4c1;
  --main-grey-color: #555555;
  --height-banner-logo : 120px;
}


/* ANIMATIONS HANDMADE*/




@keyframes revealFromLeft {
  0% {
    transform:translateX(-1em);
    opacity:0;
  }
  100% {
    opacity:1;
    transform:translateX(0);
  }
}
@keyframes reveal {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes scaleVertical {
  0% {
    transform:scaleY(0);

  }
  100% {
    transform:scaleY(1);
  }
}
@keyframes revealScaleUp {
  0% {
    opacity:0;
    transform:scale(0.5);
  }
  50% {
     opacity:1;
     transform:scale(1.3);

  }
  100% {
    opacity:1;
    transform:scale(1);

  }
}


/* MAIN CSS */

div#main-frame {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  min-height:100vh;
  max-height:100vh;
  background-color: #FFF;
  background-size:cover;
  background-repeat:no-repeat;
}

/*  BUTTONS */

a.main-button {
  padding:10px 30px 10px 30px;
  background-color:#791a12;
  color:#cbcbcb;
  font-size:1.1rem;
}

a.sec-button {
  padding:10px 30px 10px 30px;
  color: #791a12;
  font-size:1.2rem;
}

a.call-button {
  display:block;
  text-transform:uppercase;
  position:relative;
  padding:20px 60px 20px 60px;
  background-color:#791a12;
  color:#cbcbcb;
  font-size:1rem;
}

div.section {
  position:relative;
  width:100%;
  left:0px;
  padding:0px;
  margin:0px;
  margin-top:60px;
}

div.section div.grid-of {
  padding:0px;
  margin:0px;
}

div.section div.grid-of div.row {
  padding:0px;
  margin:0px;
}

div.section div.grid-of div.titulo-section {
  padding-top:60px;
  padding-bottom:0px;
  padding-left:40px;
  background-color: #791a12;
  color:#ffffff;
}

div.section div.grid-of div.titulo-section div.vertical-line {
  position: absolute;
  bottom: -29%;
  left: 50%;
 width: 6px; /* Line width */
 background-color: white; /* Line color */

 background: rgba(255,255,255,1);
 background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(170,40,40,1) 52%, rgba(170,40,40,0.96) 95%, rgba(170,40,40,0.96) 100%);
 background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(52%, rgba(170,40,40,1)), color-stop(95%, rgba(170,40,40,0.96)), color-stop(100%, rgba(170,40,40,0.96)));
 background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(170,40,40,1) 52%, rgba(170,40,40,0.96) 95%, rgba(170,40,40,0.96) 100%);
 background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(170,40,40,1) 52%, rgba(170,40,40,0.96) 95%, rgba(170,40,40,0.96) 100%);
 background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(170,40,40,1) 52%, rgba(170,40,40,0.96) 95%, rgba(170,40,40,0.96) 100%);
 background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(170,40,40,1) 52%, rgba(170,40,40,0.96) 95%, rgba(170,40,40,0.96) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#aa2828', GradientType=0 );



 height: 100%; /* Override in-line if you want specific height. */
 float: left; /* Causes the line to float to left of content.
   You can instead use position:absolute or display:inline-block
   if this fits better with your design */
}

div.section div.grid-of div.titulo-section span.small {
  font-size:1.2rem;
  line-height: 1rem;
}

div.section div.grid-of div.titulo-section span.big {
  font-size:2.4rem;
  line-height: 1.6rem;
}

div.section div.grid-of div.espacio-destacado {
  padding:60px 40px 40px 120px;
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: right center;

}

div.section div.grid-of div.espacio-destacado div.texto div.titulo span {
  font-size:1.6rem;
  color:#282828;
}

div.section div.grid-of div.espacio-destacado div.texto div.texto p {
  font-size:0.8rem;
  color: var(--main-grey-color);
  padding-right:40px;
}

div.section div.grid-of div.espacio-destacado div.call-button {
  text-align:center;
}

div.section div.grid-of div.espacio-destacado div.call-button a i{
  margin-right:20px;
}

div.photos {
  margin-top:20px;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

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

section {
    /* background-color:white; */
    margin-top:80px;
    margin-bottom:80px;
}

section#whywithus {
    /* background-color:white; */
    margin-top:160px;
    margin-bottom:100px;
}

div.sec-conteiner {
  text-align:center;
}

div.sec-conteiner header.heading-group {
  text-align:center;
}

header.heading-group h2 {
  color: var(--main-color);
  text-align: center;
  margin: 1em 0 0 0;
  font-size: 2.5em;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 900;
}


div.sec-conteiner header.heading-group p.subtitle {

}

span.change-content-button {
  padding:10px 60px 10px 60px;
  border-bottom:2px solid transparent;
  font-size:1.4rem;
}

span.change-content-button:hover, span.change-content-button.selected {
  cursor:pointer;
  border-bottom:1px solid var(--main-color);
  color:var(--main-color);
}