/*
DEFINICION ELEMENTOS COMUNES VARIABLES GENERALES
 */

:root {
    /*
    --especial-color1: #fcea10;*/
    --especial-color1: #0073b1;
}


body {


    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: black;

    /* display: grid;*/
     grid-gap: 0em;

     background-color: white;

     /*
      fix in mobiles todo
      background-attachment: scroll;*/
    margin: 0px;
   z-index: -10000;

}


video { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #video-background {
    background-color: #000;
	background-image: url("cover-jorge-medina-black-1.jpg");
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
   left: 0;
   opacity: 0.3;
     
   }
  
  header {
    top: 0;
    width: 100%;
    text-align: center;
    color: white;
    position: absolute;
    background-color: white;
    opacity: 0.9;
    align-items: center;
  }

  .subhead {
    padding-top: 15px;
    position: relative;
    max-width: 800px;
    min-height: 80px;
   margin-right: auto;
   margin-left: auto;
   display: block;
  }


  #lema {
	  margin: 0;
    min-height: 100px;
    text-align: center;
     position: absolute;
    
   font-style: italic;
    font-size: 1rem;
    text-align: center;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   
    color: #fff;
 }

 .sect {
    width: 100%;
    
  }

  #sect1 {
    position: relative;

    min-height: 100%;
    height: 60vh;
    width: 100%;
    background-color: #333;
    overflow: hidden;
  }
  



  











p {

    font-size: 1em;

}


h1 {

    font-size: 1.1em;
    font-weight: normal;
    grid-gap: 0em;

}

h2 {

    font-size: 0.8em;
    font-weight: normal;


}


h4 {

    font-size: 1.6em;
    font-weight: normal;

}

a {
    color: black;
    text-decoration: none !Important;
/*font-weight: bold;*/
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;

}

button {
border: 0;
background: none;
outline: 0;
cursor: pointer;


}

#nav {

display: block;


}

/* todo revisión

mover a archivo específico de estilos de jorge personalizados
font-weight: 400;

*/
.custom-home-intro p {
    font-size: 1.15em;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.legal-text{



    padding-right: 10px;
    padding-left: 1px;

}




.table-legal{
    font-size: 0.7em;


}

.home-intro p span:not(.highlighted-word) {
    color: #FFF;
    display: block;
    font-size: 0.8em;
    font-weight: 300;
    padding-top: 5px;
    opacity: 0.7;
}

.esp-alto-1 {


}

.textopad{
    padding-left: 40px;
    padding-right: 40px;
}

.db1 {
    display: block;
}

.txt-titulo {
    font-size: 1.6em;
    font-weight: bold;
}

.txt-0 {
    font-size: .9em;
}

.txt-1 {
    font-size: 1.1em;
}

.txt-2 {
    font-size: 1.2em;
}

.txt-3 {
    font-size: 1.3em;
}

.txt-4 {
    font-size: 1.4em;
}

.txt-5 {
    font-size: 1.5em;
}

.txt-6 {
    font-size: 1.6em;

}

.txt-7 {
    font-size: 1.7em;
}

.pt-0 {
    padding-top: 0px;
}

.pt-1 {
    padding-top: 3px;
}

.pt-2 {
    padding-top: 6px;
}

.pt-3 {
    padding-top: 9px;
}

.pd-2 {
    padding-top: 2em;
    padding-bottom: 2em;

}

.opa-10 {

    position: relative;

    z-index: 5000;


}

.aboton {

    background: var(--especial-color1);
    border-width: 2px;
    border-style: solid;
    border-color: black;

    position: relative;
    text-decoration: none !Important;
    font-size: 0.7rem;
    text-align: right;
    color: #a2a2a2;
    /* background: white;*/

    z-index: 1;


    /*font-weight: 600;*/

}

.btn-menu {

    position: relative;


    background: var(--especial-color1);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 20px;

    z-index: 1;

    height: 50px;
    width: 100px;

}

.btn-base {

    display: grid;

    align-content: center;
    position: relative;
    /*f
         border-width: 2px;
         border-style: solid;
         border-color: black;
    */
        text-decoration: none !Important;
    font-size: 0.9em;
         border-radius: 30px;

         z-index: 1;

         height: 50px;

         padding-left: 15px;
         padding-right: 15px;

         /*font-weight: 600;*/

}

.btn-base-blue {
    font-weight: 500;
    background: #ededed;
    color: #0070ae;


}

.btn-base-white {

    background: white;
    color: var(--especial-color1);


}

.btn-base-yellow {


    border-width: 2px;
    border-style: solid;
    border-color: black;


}

.btn-largo {
    width: 140px;

}

.main-menu {

    color: white;

    font-size: 0.8rem;

    text-align: center;

    display: inline-block;

}

.main-menu li {
    list-style: none;
    padding: 0 8px;
    text-decoration: none !Important;
    padding-bottom: 10px;
    text-transform: uppercase;

}

.main-menu a {
    color: white;
    padding: 0px 0;
    line-height: 0;

}

.flags-menu {


    color: #d1d1d1;
    font-size: 0.8rem;
    text-align: right;

    padding-top: 0px;

    display: grid



}


.flags-menu  img{

    padding: 0 10px;
    height: 35px;

}

/* ayudas y reglas para moverse modo debug */
.box {

    color: #fff;
    border-radius: 8px;
    padding: 10px;


}


/* GLOBAL */
.global {

    margin-top: 0px;
    margin-bottom: 0px;

    display: grid;
    grid-gap: 0em;


    align-self: center;
    justify-self: center;


    background: white;



}

/* PRIMER NIVEL DE CAJAS */
.header {

    display: grid;
    grid-template-columns: minmax(200px, 35%) minmax(150px, 35%);

    background: var(--especial-color1);

    justify-content: center;


    /* background-color: #c70d83; */


    height: 80px;

}


.footer {

    display: flex;

    background-color: #272727;

    border-radius: 8px;
    padding: 8px;


    height: 50px;

}


/* SEGUNDO NIVEL DE CAJAS */
.comun2n {

    display: grid;
    grid-gap: 1em;

    grid-template-columns: 1fr;

    justify-content: center;
    align-content: center;

    align-items: center;
    justify-items: center;

    text-align: center;


}

.comun2n img {
    height: auto;
    max-width: 100%;

}

.splash {

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));


    align-self: center;

}

.separador2c {

    grid-template-columns: 1fr;

    color: #fff;
    border-radius: 0px;

    height: 50px;
    background: black;

    /*
     fix in mobiles todo
     background-attachment: scroll;*/

    background-attachment: fixed;
    background-position: center;

}

.pie {

    grid-template-columns: 10px repeat(auto-fit, minmax(100px, 150px)) 10px;

    color: black;
    border-radius: 0px;

    height: 150px;
    background: black;

    background: var(--especial-color1);
    background-image: url("../img/patron-iconos-fondo.png");

    background-repeat: repeat;
    background-size: 65em;


    /*
     fix in mobiles todo
     background-attachment: scroll;*/

    background-attachment: fixed;
    background-position: center;

}

.pieblanco {



}

/* ELEMENTOS TERCER NIVEL */
.wrapper2 {

    background-color: cornflowerblue;

    justify-self: center;
    align-self: center;

}

/* alinea el texto al medio */
.alimedi {

    text-align: center;

}


.cardimg3 {

    display: grid;

    grid-template-columns: 100%;
    grid-template-rows: 50px 70px 30px 20px 20px 70px;

    border-radius: 0px;


}

.cardimg3 .i1 {

    align-self: end;

}

.cardimg3 .i2 {

    padding-bottom: 10px;
    align-items: center;
    align-self: self-end;
    padding-left: 10px;


    font-weight: bold;
    text-transform: uppercase;

}

.cardimg3 .i3 {

    text-align: center;
    font-size: 1.3em;
    padding-left: 10px;
    padding-right: 10px;
}

.cardimg3 .i3SUB {

    text-align: center;
    font-size: 1.1em;
    padding-left: 10px;
    padding-right: 10px;
    color: #919191;
}

.cardimg3 .i4 {
    display: grid;
    text-decoration: none;
    justify-content: center;

}


.cardtxt1 {

    display: grid;

    font-size: 0.9em;

    grid-template-columns: 255px;
    grid-template-rows: 255px;

    border-radius: 25px;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);


    align-items: center;

    background: white;
    color: black;

}


.cardtxt1 .i1 {
    padding: 25px;
}

.cardtxt1 .i1i {
    padding: 25px;
    background: var(--especial-color1);
}


.colorespecial {

    background: var(--especial-color1);

}

.textonegro {

    color: black;

}

.rellenafondo {

    position: relative;

    background-image: url("../img/patron-iconos-fondo@2x.jpg");

    background-repeat: repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;

    opacity: 0.5;

    /*
     fix in mobiles todo
     background-attachment: scroll;*/

    z-index: -1000;

}


/* VAMOS CON LOS AJUSTES
and (orientation: portrait)
and (orientation: landscape)

*/
/*
480
*/

/*Primero tot global y luego vamos a casos específicos*/

.btn-etico {
    display:grid;
    position: relative;
    color: black !important;
    background-color: white;
    z-index: 9999;
    cursor: pointer;
    padding: 15px 12px 15px 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;


    border: 1px solid grey;
    border-top: none;
    text-decoration: none !important;
}

.m1new {
    grid-template-columns: repeat(2, 300px);

    padding: 10px;

    gap: 3em;

}

.m1newsolo {
    grid-template-columns: 1fr;


    padding: 10px;

    gap: 3em;

}

.m1newsolob {
    grid-template-columns: 1fr;

    background: var(--especial-color1);

    padding: 10px;

    gap: 3em;

}

.m1newsolobhead {
    grid-template-columns: 1fr;
    background: #272727;
    /*background-color: #084260;*/
    gap: 3em;

}

.m1newsololegal {
    display: grid;
    grid-template-columns: minmax(300px, 1280px);
    text-align: justify;

    size: 1.2em;
     /*background-color: #084260;*/


    line-height: 1.5;
    padding: 20px;

 }

.m1newsololegal h2{

    font-size: 1.4em;
    font-weight: bold;


}

.m1pie {
    grid-template-columns: repeat(1, 400px);

    padding: 10px;

    gap: 3em;

    background: #0070ae;
}

.m1c {

    display: grid;

    padding-top: 10px;
    padding-bottom: 10px;


    justify-content: center;
    justify-items: center;

    /*background-color: blue;*/

}

.m1c2 {
    grid-template-columns: 1fr;

    padding: 5px;

}


.m2c {
    grid-template-columns: minmax(400px, 45%) minmax(450px, 45%);
    gap: 2em;
    padding: 10px;

    /*background-color: blue;*/
}


.m3c {
    grid-template-columns: repeat(3, 200px);

    padding: 10px;

    gap: 3em;

    /*background-color: #fffef2;*/

}

.m3cp2 {
    grid-template-columns: repeat(3, 400px);

    padding: 5px;

    background: var(--especial-color1);
    background-image: url("../img/patron-iconos-fondo.png");

    background-repeat: repeat;
    background-size: 65em;


    /*
     fix in mobiles todo
     background-attachment: scroll;*/

    background-attachment: fixed;
    background-position: center;


    height: 300px;

}

.m4c {


    grid-template-columns: repeat(3, 200px);

    padding: 10px;

    gap: 3em;

}

.list-inline-item{
    padding-right: 10px;

}


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

    .global {
        grid-template-columns: minmax(100%, 100%);


    }

    .m2c {
        grid-template-columns: minmax(100px, 90%);
        gap: 2em;
        padding: 30px;

        /*background-color: blue;*/
    }


    .cardimg3 .i3 {


        font-size: 1.6em;

    }

    .m3c {
        grid-template-columns: repeat(3, 150px);
    }

    .m3cp2 {
        grid-template-columns: repeat(1, 200px);
        gap: 3em;
        height: 900px;
    }

    .m4c {
        grid-template-columns: repeat(2, 250px);
        gap: 1em;
    }


    .separador2c {

        height: 50px;

    }



    .pieblanco {
        height: 150px;
        gap: 0.1em;
        padding: 0px;
    }

    #nav {

        font-size: 0.7rem;
        padding-top: 4px;

    }

}

}