* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
    background: #fff;
    font-size: 16px;
    font-family: sans-serif;
    color: rgb(43, 43, 43);
}


.gridContainer {
    display: grid;
    /* grid-gap: 20px; */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, auto);

    grid-template-areas: 'header header header'
                        'slider slider slider'
                        'sectionQuienesSomos sectionQuienesSomos sectionQuienesSomos'
                        'sectionServicios sectionServicios sectionServicios'
                        'sectionContactanos sectionContactanos sectionContactanos'
                        'footer footer footer';

    
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    padding-bottom: 15px; 
  }
  
   .double-clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    padding-bottom: 30px; 
  }

  .themeColor {
    color: #1f9e5b;
  }

/**************************** header ***********************/
.gridContainer .header {
    width: 100%;
    height: 100px;
    /* background: rgb(230, 165, 165); */
    box-shadow: 0 0 3px #828077;

    grid-area: header;
}
/**************************** header ***********************/

/**************************** menu de navegacion ***********************/
.navContainer {
  margin: auto;
  width: 80%;
  /* padding: 0 2em 0 2em; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* background-color: #b5e7fd; */
}

.imgLogo {
  width: 50%;
  /* margin-left: 5%; */
}

.header nav {
    width: 100%;
    max-width: 600px;
    /* margin: 20px aut; */
    margin-top: 20px;
    margin-bottom: 20px;
    background: #fff;
    z-index: 4;
  }
  
  .menu_bar {
    position: relative;
    display: none;
    z-index: 3;
  }
  
  
  .header nav ul {
    overflow: hidden;
    list-style: none;
  
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  
  /*header nav ul li {
    float: left;
  
  }*/
  
  .header nav ul li a {
    color: #6a6359;
    padding: 20px;
    display: block;
    text-decoration: none;
    font-family: sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;  
  
  }
  
  .header nav ul li a:hover {
    color: #037e8c;
  }
  
  .header nav ul li span {
    margin-right: 10px;
  }
/**************************** menu de navegacion ***********************/

/**************************** slider ***********************/
.gridContainer .slider {
    position: relative;
    grid-area: slider;
    width: 100%;
    height: auto;
}

.splide__slide img {
	width : 100%;
	height: auto;
}

.splideContainer {
  position: relative;
}

.texto_slides {
  position: absolute;
  background: rgba(0,0,0, .5);
  width: 100%;
  height: auto;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  text-align: center;
}

.texto_slides h1 {
  margin-top: 15%;
  text-transform: uppercase;
  color: #fff;
  font-size: 3.5rem;
}

.texto_slides h2 {
  margin-top: 1%;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 1.2rem;
}
/**************************** slider ***********************/

/**************************** boton ***********************/
.boton {
    display: block;
    width: auto;
    max-width: 300px;
    padding: 1.1em 1.1em;
    height: 50px;
    line-height: 1;
    background: #1f9e5b;
    color: #fff;
    border: 1px solid #1f9e5b;
    border-radius: 20px;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    transition: ease-in-out 0.3s;
}

.boton:hover {
    background: transparent;
    color: #1f9e5b;
}


/**************************** boton ***********************/

/**************************** quienes somos ***********************/
.gridContainer .sectionQuienesSomos {
    padding: 3em;
    background: #faf9f5;
    grid-area: sectionQuienesSomos; 
}

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

.sectionTitleQ h1 {
    font-size: 36px;
    text-transform: uppercase;
}

.sectionQuienesSomos .flexContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 1em 1em;
}

.sectionQuienesSomos .misionContent {
   width: 60%;
}

.sectionQuienesSomos .misionImage {
   width: 40%;
   
}

.sectionQuienesSomos p {
    font-size: 1.3rem;
}

.topaz-div-bg {
   
    width: 100%;
    
}

.device-content.macbook {
    width: 500px;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 3.1% 11.9% 0% 1%;
}

.device-content img {
    width: 52%;
}

/**************************** quienes somos ***********************/

/**************************** servicios ***********************/
.gridContainer .sectionServicios {
    grid-area: sectionServicios;
    padding: 3em;

    background-image: url(../img/servicios_background_2.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.sectionServicios .sectionTitleS {
    text-align: center;
    /*color: #fff;*/
}

.sectionTitleS h1 {
    font-size: 36px;
    text-transform: uppercase;
    color: #232323;
}

.sectionServicios .flexContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 1em;
}

.flexContainer .cardServicio {
    /*text-align: center;*/
    margin: auto;
    width: 500px;
    padding: 1em;
}

.flexContainer .servicio_1 h1{
    color: #8cc63e;
    /*text-shadow: 0px 2px 10px #fff;*/
}

.flexContainer .servicio_1 p{
    color: #232323;
    font-size: 1.3rem;
}

.cardServicio .textoServicios {
    height: 170px;
}

.cardServicio .textoServicios p {
    color: #232323;
    font-size: 1.3rem;
}
/**************************** servicios ***********************/

/**************************** contactanos ***********************/
.gridContainer .sectionContactanos {
    grid-area: sectionContactanos;
    background: #faf9f5;
    padding: 3em;
}

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

.sectionTitleC h1 {
  font-size: 36px;
  text-transform: uppercase;
}

.sectionTitleC p {
  color: #57a053;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.3rem;
}

.prefooter .prefooterFlex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.cardContactanos {
  padding: 1em;
  /* border: solid 1px #57a053;
  border-radius: 10px; */
}

.cardContactanos > h2 {
  text-transform: uppercase;
  font-size: 1.5rem;
}

.cardContactanos > a, p {
  display: block;
  margin-bottom: 0.5em;
  color: #383838;
  font-size: 1.2rem;
}

.cardContactanos > a {
  text-decoration: none;
  transition: all ease 0.3s;
}

.cardContactanos > a:hover {
  color: #57a053;
}

/* .cardContactanos > p {
  color: #383838;

} */
/**************************** contactanos ***********************/

/**************************** footer ***********************/
.gridContainer .footer {
    grid-area: footer;
    text-align: center;
    background: #1d1d1d;
    color: #fff;
    height: 70px;
    line-height: 70px;
}
/**************************** footer ***********************/


/**************************** Media queries ***********************/

@media screen and (max-width: 1024px) {
  body {
    font-size: 15px;
  }

  .texto_slides h1 {
    margin-top: 15%;
    text-transform: uppercase;
    color: #fff;
    font-size: 2.8rem;
  }
}

@media screen and (max-width: 900px) {

    .imgLogo {
      width: 35%;
      /*margin-left: 30%;*/
    }

    .header nav {
        width: 60%;
        height: 100%;
        right: -100%;
        margin: 0;
        position: fixed;
        box-shadow: 0 0 10px #878787;
        z-index: 1;
        transition: all ease-in-out 0.4s;
      }

      .navContainer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
	   }
	  

      .header nav ul {
        flex-direction: column;
        justify-content: flex-start;
      }

      .header nav ul li {
        display: block;
        float: none;
        border-bottom: 1px solid rgba(255,255,255, .3);
      }

      .menu_bar {
        display: block;
        width: 100%;
        background: #ccc;
      }

      .menu_bar .btn-menu {
        background-color: #FFFFFF;
        margin-top: 8px;
        margin-right: 15px;
        display: block;
        float: right;
        padding: 0.458em 0.625em;
        font-size: 24px;
        line-height: 1;
        color: #919191;
        text-decoration: none;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        border: 1px solid #d0cdbc;
      }

      .menu_bar span {
        /*float: right;*/
        font-size: 25px;
	  }

    .gridContainer {
      display: grid;
      /* grid-gap: 20px; */
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, auto);
  
      grid-template-areas: 'header header'
                          'slider slider'
                          'sectionQuienesSomos sectionQuienesSomos'
                          'sectionServicios sectionServicios'
                          'sectionContactanos sectionContactanos'
                          'footer footer';
  
      
  }

  .prefooter .prefooterFlex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  	
}


@media screen and (max-width: 768px) {

  .imgLogo {
    width: 40%;
    /*margin-left: 30%;*/
  }

	.sectionQuienesSomos .flexContainer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 1em 1em;
	}

	.sectionQuienesSomos .misionContent {
		width: 90%;
	 }

	.misionContent .rubros {
		margin-top: 2em;
		margin-bottom: 2em;
	}

	.sectionServicios .flexContainer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 1em 1em;
	}

	.flexContainer .cardServicio {
		text-align: center;
		margin: auto;
		width: 90%;
		padding: 1em;
	}

	.cardServicio .textoServicios {
		height: auto;
		width: 100%;
		margin-bottom: 2em;
	}
}

@media screen and (max-width: 600px) {

  .imgLogo {
    width: 50%;
    /*margin-top: 20px;*/
    /*margin-left: 30%;*/
  }

  .texto_slides h1 {
    margin-top: 15%;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.7rem;
    }

    .misionImage {
      display: none;
    }

    .cardServicio > img {
    width: 80%;
  }

  .sectionTitleQ h1 {
    font-size: 1.7rem;
  }

  .sectionTitleS h1 {
    font-size: 1.7rem;
  }

  .sectionTitleC h1 {
    font-size: 1.7rem;
  }

}

@media screen  and (max-width: 480px){
  .imgLogo {
    width: 50%;
    margin-top: 10px;

  }
}


@media screen  and (max-width: 430px){
  .imgLogo {
    width: 55%;
    margin-top: 10px;

  }
}


@media screen and (max-width: 342px) {
  .imgLogo {
    width: 55%;
    margin-top: -40px;

  }
}