@font-face {

  font-family: 'Montserrat-Bold';

  src: url('../fonts/Montserrat-Bold.eot');

  src: url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Montserrat-Bold.woff') format('woff'),

    url('../fonts/Montserrat-Bold.ttf') format('truetype');

  font-weight: bold;

  font-style: normal;

}



@font-face {

  font-family: 'Montserrat-Regular';

  src: url('../fonts/Montserrat-Regular.eot');

  src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Montserrat-Regular.woff') format('woff'),

    url('../fonts/Montserrat-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}

@font-face {

    font-family: 'Montserrat-Light';

    src: url('../fonts/Montserrat-Light.eot');

    src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),

        url('../fonts/Montserrat-Light.woff') format('woff'),

        url('../fonts/Montserrat-Light.ttf') format('truetype');

    font-weight: 300;

    font-style: normal;

}

@media (max-width: 1023px) {
	@font-face {
    font-family: 'Gabriola';
    src: url('../fonts/Gabriola.eot');
    src: url('../fonts/Gabriola.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gabriola.woff') format('woff'),
        url('../fonts/Gabriola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}
}



@media (min-width: 769px) {

  .btcolapse {

    display: none; }



  .bxcolapse {

    display: block;

    position: relative;

    width: auto; } }

/**/

.btcolapse {

  position: absolute;

  top: 80px;

  right: 0;

  width: 40px;

  height: 40px;

  margin-right: 15px;

  transform: translate(0, -50%);

  -o-transform: translate(0, -50%);

  -ms-transform: translate(0, -50%);

  -moz-transform: translate(0, -50%);

  -webkit-transform: translate(0, -50%); 

}

@media (max-width: 767px) {

	.btcolapse {

		top: 80px;

	}

}



.btcolapse span {

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 6px;

    border-radius: 2px;

    background-color: transparent;

    transform: translate(-50%, -50%);

    -webkit-transition-duration: 0.2s;

    -moz-transition-duration: 0.2s;

    -ms-transition-duration: 0.2s;

    -o-transition-duration: 0.2s;

    transition-duration: 0.2s; }



.btcolapse span:before {

      content: "";

      display: block;

      position: absolute;

      top: 50%;

      left: 50%;

      width: 100%;

      height: 6px;

      border-radius: 2px;

      background-color: #6c6c6c;

      -webkit-transform: translate(-50%, -50%) rotate(45deg);

      -moz-transform: translate(-50%, -50%) rotate(45deg);

      -ms-transform: translate(-50%, -50%) rotate(45deg);

      -o-transform: translate(-50%, -50%) rotate(45deg);

      transform: translate(-50%, -50%) rotate(45deg);

      -webkit-transition-duration: 0.2s;

      -moz-transition-duration: 0.2s;

      -ms-transition-duration: 0.2s;

      -o-transition-duration: 0.2s;

      transition-duration: 0.2s; }



.btcolapse span:after {

      content: "";

      display: block;

      position: absolute;

      top: 50%;

      left: 50%;

      width: 100%;

      height: 6px;

      border-radius: 2px;

      background-color: #6c6c6c;

      -webkit-transform: translate(-50%, -50%) rotate(-45deg);

      -moz-transform: translate(-50%, -50%) rotate(-45deg);

      -ms-transform: translate(-50%, -50%) rotate(-45deg);

      -o-transform: translate(-50%, -50%) rotate(-45deg);

      transform: translate(-50%, -50%) rotate(-45deg);

      -webkit-transition-duration: 0.2s;

      -moz-transition-duration: 0.2s;

      -ms-transition-duration: 0.2s;

      -o-transition-duration: 0.2s;

      transition-duration: 0.2s; }



.btcolapse.collapsed span {

    background-color: #6c6c6c; }



.btcolapse.collapsed span:before {

      margin-top: -11px;

      -webkit-transform: translate(-50%, -50%) rotate(0deg);

      -moz-transform: translate(-50%, -50%) rotate(0deg);

      -ms-transform: translate(-50%, -50%) rotate(0deg);

      -o-transform: translate(-50%, -50%) rotate(0deg);

      transform: translate(-50%, -50%) rotate(0deg); }



.btcolapse.collapsed span:after {

      margin-top: 11px;

      -webkit-transform: translate(-50%, -50%) rotate(0deg);

      -moz-transform: translate(-50%, -50%) rotate(0deg);

      -ms-transform: translate(-50%, -50%) rotate(0deg);

      -o-transform: translate(-50%, -50%) rotate(0deg);

      transform: translate(-50%, -50%) rotate(0deg); }



.btcolapse.op2 span:before { background-color: #6c6c6c; }

.btcolapse.op2 span:after {background-color: #6c6c6c; }

.btcolapse.op2.collapsed span { background-color: #6c6c6c; }



/*****MENU*****/

.menuprincipal { z-index: 30; position: absolute; width: 100%;}

.menuprincipal ul {display: block;text-align: center; }

.menuprincipal ul li {display: block; }



.menuprincipal ul li a {display: block;font-family: 'Gabriola', arial, sans-serif;color: #fff;font-size: 1.7em;  text-transform: uppercase;}





@media(max-width: 769px){

  .menuprincipal ul li a {background:#ff733b; color: #FFF; text-align: center; padding: 10px 10px;}   

    .men{ display: block; position: relative; margin-left: -30px; margin-right: -30px;}    

    .menuprincipal ul li img{display: block; margin: 2px auto;}    

     .logo{margin: 10px auto; max-height: 130px;  } 

    .menuprincipal ul li + li { border-top: 1px solid #FFF; }

    .menuprincipal ul li a:hover, .menuprincipal ul li.active a {background: #6c6c6c; color:#FFF; }

}

.header{z-index: 150; background-color: #FFF; width: 100%;}

@media (min-width: 769px) {  

  .menuprincipal {width: 100%;position: relative;text-align: center;  }  

  .menuprincipal ul li a:hover, .menuprincipal ul li.active a  {color:#6c6c6c; background: transparent; }

    .menuprincipal ul li a {padding: 0px 15px;}

  .menuprincipal ul li {display: inline-block; }

  .menuprincipal ul li + li {border-top: 0; }   

  .logo{position: absolute; z-index: 10;  top: 0;}

  

}





h1,h2,h3,h4,h5,h6{font-family: 'Gabriola'; text-transform: uppercase; text-align: center;}

p{font-family: 'Gabriola'; color: black; text-align: justify; font-size: 1.7em;}



#myCarousel .carousel-inner > .item > img{width: 100%;}

.carousel-caption h3{font-family: 'Gabriola'; font-weight: bold; color: #FFF; text-shadow: none; font-size: 3em;}



@media(min-width:769px){

    #myCarousel .carousel-inner .item{width: 100%; height: 700px;}

    #myCarousel .carousel-inner > .item > img{object-fit: cover; height: 700px}

    .gris{background: #6c6c6c; padding: 15px 10px;}

    .gris p{color: #FFF; font-family: 'Gabriola'; font-size: 1.7em; margin-left: 22%; margin-bottom: 0;}

    .naranja{background: #ff733b; padding: 15px 10px;}

    .carousel-caption{ width: 100%; background: #ff733b; left: 0; bottom: 0;}

    .dos{object-position: 10%  10%;}

    .tres{object-position: 10%  30%;}

    .cuatro{object-position: 10%  50%;}

}

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

	.men { margin-left: 211px; }

	.menuprincipal ul li a { font-size: 1.4em; }

	.gris { padding: 15px 0px; }

	.gris p { margin-left: 30%; }

}

@media (min-width: 1000px) and (max-width: 1199px) {

	.gris p { margin-left: 25%; }

	.men { margin-left: 211px; }

}

@media(max-width:769px){

    #myCarousel .carousel-inner .item{width: 100%; height: 300px;}

    #myCarousel .carousel-inner > .item > img{object-fit: cover; height: 300px}

    .gris p{display: none;}

    .carousel-caption{ width: 100%; background: #ff733b; left: 0; bottom: 0; padding-top: 5px; padding-bottom: 5px;}

    .carousel-caption h3{font-size: 2em;}

}

#inicio #seccion2 h3{color: #ff733b;}

#inicio #seccion2 p{text-align: center;}



.link{text-align: center; margin: 20px auto;}

.btn-naranja{background: #ff733b; border-radius: 15px; padding: 20px 3%; color: #FFF; font-family: 'Gabriola'; text-transform: uppercase; font-size: 1.7em;}

.btn-naranja:hover{background: #6c6c6c; color: #FFF; text-decoration: none;}



#inicio #seccion3{background: #6c6c6c;}

#myCarousel .carousel-control.left{background-image:url('../imagenes/izquierdo.jpg'); background-repeat: no-repeat;  top: 50%;}

#myCarousel .carousel-control.right{background-image:url('../imagenes/derecha.jpg'); background-repeat: no-repeat;  background-position-x: 100%; top:50%;}



#myCarousel2 .carousel-control.left{background-image:url('../imagenes/flecha-izq.png'); background-repeat: no-repeat; }

#myCarousel2 .carousel-control.right{background-image:url('../imagenes/flecha-der.png'); background-repeat: no-repeat;  background-position-x: 100%;}

#myCarousel2 h3{color: #FFF; font-family: 'Gabriola'; text-transform: unset; }

#topf{background: #ff733b;}

#bottomf p, #topf h3, #topf p,#topf h5{color: #FFF; text-align: center;}

#bottomf{background: #000; padding: 15px 10px;}

#bottomf img{opacity: 0.5;}

#bottomf img:hover{opacity: 1;}





@media(min-width:769px){

    #inicio #seccion2, #inicio #seccion3,#topf{padding: 50px 10px;}

    #inicio #seccion2 h3,#topf h3 {font-size: 3em; padding-bottom: 1.6em;}

    #inicio #seccion2 p{padding-bottom: 2em; line-height: 30px; font-size: 1.7em;}

    

    #myCarousel2 h3{font-size: 3em; line-height: 35px; padding: 10px 15%;}

    #myCarousel2 .carousel-inner .item{width: 100%; height: 150px;}    

    

    #inicio #seccion4 .bximg {width: 25%; float: left; display: block; position: relative; height: auto; object-fit: contain;}    

    #inicio #seccion4 .bximg img{ width: 100%;  height: 250px;object-fit: cover; border: 1px solid #FFF;}

    

    #topf img{margin: 40px auto; display: block;}    

    #topf h5{font-size: 1.7em;}

    

    

    

}



@media(max-width:769px){

    #inicio #seccion2,#inicio #seccion3,#topf{padding: 30px 10px;}

    #inicio #seccion2 h3,#topf h3 {font-size: 2em; padding-bottom: 1.6em;}

    #inicio #seccion2 p{padding-bottom: .5em; line-height: 30px; }

    

    #myCarousel2 h3{font-size: 2em; line-height: 30px;}

    #myCarousel2 .carousel-inner .item{width: 100%; height: 200px;}

    

    #inicio #seccion4 .bximg {width:100%; float: left; display: block; position: relative; height: auto;  object-fit: contain;}    

    #inicio #seccion4 .bximg img{ width: 100%;  height: 250px;object-fit: cover; border: 1px solid #FFF;}

    

    #topf img{margin: 15px auto; display: block;}

    #topf h5{font-size: 1.7em;}

    #bottomf p{font-size: 1.5em;}

    

    

}

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

	#myCarousel2 h3 { padding-top: 40px; }

}

/****************************************************************************/

#contacto #seccion1, #servicios #seccion1, #nosotros #seccion1, #preguntas #seccion1{background: #6c6c6c;}

#contacto #seccion1 h3, #nosotros #seccion1 h3, #servicios #seccion1 h3, #preguntas #seccion1 h3{color: #FFF;}

    

#contacto #seccion2 h3, #nosotros #seccion2 h3, #servicios #seccion2 h3, #preguntas #seccion2 h3, #contacto #seccion2 h4{color: #ff733b;}



.listpg li{font-family: 'Gabriola'; color: black; text-align: justify;}

.listpg li:before { content: "»";  color:#ff733b;}



.pregunta{background: #ff733b; color:#FFF;font-family: 'Gabriola'; padding: 10px 50px; display: block;  margin-bottom: 1.5em;}

.pregunta:hover, .pregunta:focus{color: #FFF; text-decoration: none;}

.pregunta-bloque{padding: 1em;}



.tavs li a{background: #ff733b; color: white;  border-bottom: 1px solid #FFF; font-family: 'Gabriola'; font-size: 1.7em; padding: 20px 15px}

.tavs li a:hover, .tavs li.active a{color: #FFF; background: #6c6c6c;}

#fbolsa p{text-align: center;}

#fbolsa .just{text-align: justify;}



@media(min-width:769px){

    #contacto #seccion1, #nosotros #seccion1, #servicios #seccion1,#preguntas #seccion1{padding: 30px 10px;}

    #contacto #seccion1 h3,#nosotros #seccion1 h3, #servicios #seccion1 h3, #preguntas #seccion1 h3{font-size: 3em;}

    

    #contacto #seccion2, #nosotros #seccion2, #servicios #seccion2, #preguntas #seccion2{padding: 50px 10px;}    

    #contacto #seccion2 h3, #nosotros #seccion2 h3, #servicios #seccion2 h3, #preguntas #seccion2 h3{font-size: 3em; padding-bottom: 1em;}

    #nosotros #seccion2 img, #preguntas #seccion2 img{border-radius: 15px; display: block; margin:20px auto;}

    

    #contacto #seccion2 h4{font-size: 1.7em;}

    

    #contacto #seccion2 h5 {font-size: 1.7em; padding-bottom: 1em; text-align: left;}

    

    .pregunta{border-radius: 15px;  font-size: 1.7em; font-family: 'Gabriola'}

    

    .listpg li{font-size: 1.7em; line-height: 25px; display: flex;}

    .listpg li:before {font-size: 30px; margin-right: 6px;}

    

    .caja {position: relative; width: 340px; height:300px; background: #000000; margin: 10px auto;}



    .image {opacity: 1; display: block;  width: 340px; height: 300px; object-fit: cover; transition: .5s ease; backface-visibility: hidden;}



    .middle {transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 5%; transform: translate(0%, -50%);

    -ms-transform: translate(0%, -50%); width: 90%;}



    .caja:hover .image {opacity: 0.3;}



    .caja:hover .middle {opacity: 1;}



    .text {color: #FFF; font-size: 1.6em; padding: 0% 1%; font-family: 'Gabriola'; font-weight: bold; text-align: center; border: 2px solid #FFF;}

    

    .text span{font-family: 'Gabriola'; font-size: .9em;}

    

    .redondo{border-radius: 10px 10px 0 0;}

    .redondo2{border-radius:0px 0px 10px 10px;}

    

    #map{height: 500px; border-radius: 15px;}

}



@media(max-width:769px){

    #contacto #seccion1, #nosotros #seccion1, #servicios #seccion1, #preguntas #seccion1{padding: 20px 10px;}

    #contacto #seccion1 h3, #nosotros #seccion1 h3, #servicios #seccion1 h3, #preguntas #seccion1 h3{font-size: 2em;}

    

     #nosotros #seccion2, #servicios #seccion2, #preguntas #seccion2{padding: 30px 10px;}    

     #contacto #seccion2 h3, #servicios #seccion2 h3, #preguntas #seccion2 h3{font-size: 2em; padding-bottom: 1em;}

    #nosotros #seccion2 h3 {font-size: 2em; padding-bottom: 1em;}

    #nosotros #seccion2 img, #preguntas #seccion2 img{border-radius: 15px; display: block; margin:20px auto;}

    #contacto #seccion2{padding-bottom: 30px;}

    

    .pregunta{font-size: 1.7em; text-align: center;}

    

    .listpg li{font-size: 1.7em; line-height: 25px; display: flex;}

    .listpg li:before {font-size: 30px; margin-right: 6px;}

    

    .caja {position: relative; width: 100%; height: 300px; background: #000000; margin: 10px auto;}



    .image {opacity: .3; display: block; width: 100%; height: 300px;object-fit: cover; transition: .5s ease; backface-visibility: hidden;}



    .middle {transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 5%; transform: translate(0%, -50%);

    -ms-transform: translate(0%, -50%); width: 90%; opacity: 1;}    



    .text {color: #FFF; font-size: 1.5em; padding: 2% 1%; font-family: 'Gabriola'; font-weight: bold; text-align: center; border: 2px solid #FFF;}

    

    .text span{font-family: 'Gabriola'; font-size: .9em;}

    

    .tavs{margin-top: 0;}

    

    #map{height: 350px; margin-right: -45px; margin-left: -45px;}

    .formu{margin-right: -30px; margin-left: -30px;}

}

.formu label, .formu label a{color: black;}

.formu label a:hover{text-decoration: none;}

.formu{

  color: black;

  font-family: 'Gabriola';

  padding-top: 45px;

}

.formu textarea{

  

    padding: 6px;

    height: 188px;

    display: block;

    font-weight: normal;

    font-size: 1.8rem;

    border: 0;

    background-color: #e3e3e3;

    margin-bottom: 20px;

    color: #000;

    width: 100%;

}

@media(min-width: 768px){

  

  

  /*.formu textarea{width: 50%; float: right; position: absolute; left: 51%; top:-224px;}

    .formu input{width: 50%}

    .formu button{position: absolute; top: 81%; left:52%;}

    */

    .formu input[type=checkbox] {width: 3%;}

    .formu label{position: absolute; top:3%; left: 5%;}

}



@media(max-width: 768px){ 

    .formu input[type=checkbox] {width: 3%;}

    .formu label{position: absolute; top:3%; left: 10%}

}

.formu input {    

  padding: 6px;

    height: 39px;

    display: block;

    font-weight: normal;

    font-size: 1.8rem;

    border: 0;

    width: 100%;

    background-color: #e3e3e3;

    margin-bottom: 20px;

    color: #000;

}

.formu input[type=checkbox] {    

  padding: 6px;

    height: 15px;

    display: block;

    font-weight: normal;

    font-size: .8rem;

    border: 0;

    background-color: #6c6c6c;

    margin-bottom: 20px;

    color: #000;

}

.formu button{    

  padding: 6px 19%;

  font-family: 'Gabriola-Regular';

  font-size: 1.5em;

  border: 0;

  background: #ff733b;

  color: white!important; 

}

.formu button:hover, .formu button:focus{background: #6c6c6c;}

.bot{text-align: center;}

::-webkit-input-placeholder { 

  color: #000;

}

::-moz-placeholder { 

  color: #000;

}

:-ms-input-placeholder { 

  color: #000;

}

:-moz-placeholder { 

  color: #000;

}