*{
    box-sizing:border-box; /*Todos los elementos no creceran más alla del tamaño que les di*/
}

html{
    scroll-behavior: smooth;/*realiza un deslizamiento suave a los identificadores id*/
}

body{
    font-family: 'Roboto', sans-serif; /*Tipo de Fuente*/
    margin: 0%;/*margen del documento visible*/
}

h1{ font-size: 3.5em;}/*Tamaño fuentes*/
h2{ font-size: 2.7em;}
h3{ font-size: 2em;}
p{ font-size: 1.25em;}
ul{ list-style: none;}/*Quitar puntos de las listas*/
li{ font-size: 1.25em;}

button{/*Estilizar los botones*/
    font-size: 1.5em;
    font-weight: bold;/*Negrita*/
    padding: 10px 20px;
    border-radius: 10px;/*redondear esquinas*/
    border: 1px solid rgba(0, 0, 0, 0.5);/*tamaño y color del borde*/
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);/*sombras del borde*/
    color: white;/*color de la fuente*/
    background-color:  rgb(206, 51, 59);/*color del boton*/
}
button:hover{ /*cambiar de color el boton al posicionar*/
    background-color: rgb(180, 0, 0);
}
.container{
    max-width: 1400px; /*margen maximo*/
    margin: auto; /*margen automatico*/
}
/************************************************/
.color-acento{
    color: rgb(206, 51, 59);
}
/************************************************/
header{
    background-color: rgb(206, 51, 59);
    position: fixed;
    width: 100%;
}
header .logo{ /*Header texto Izquierdo*/
    margin:0; /*para subir al limite*/
    padding: 12px 15px;
    font-weight: bold;/*Negrita*/
    color: rgb(255, 255, 255);/*color del texto logo*/
    font-size: 1.20em;/*Tamaño texto cabina roja*/
}
header .container{ /*coloca los textos a la derecha y los centra al ser responsives*/
    display: flex;
    flex-direction: column;
    /*flex-direction: column-reverse;*/
    /*flex-direction: row-reverse;*/
    align-items: center;
    padding: 12px 15px;
}

header nav{/*coloca los textos en columna al ser responsive*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 25px;
}
header a{/*estilo textos a la derecha*/
    padding: 5px 12px;
    text-decoration: none;
    font-weight: bold;
    color: rgb(255, 255, 255);
}
header a:hover{/*color de los textos header al posicionarse*/
    color: rgb(163, 156, 156);
}
header p{/*estilo textos a la derecha*/
    text-decoration: none;
    font-weight: bold;
    color: rgb(255, 255, 255);
}
/************************************************/
.EstiloIcono{
    background-image: url(/media/ICO/ICOinicio.png);
    /*display: block;/*Centrar imagen*/
    /*margin-left: auto;*/
    margin-right: auto;
    /*margin-right: 10px;*/
    /*margin-left: 20px;/*Margen hacia derecha*/
}
/************************************************/
#idGrupoVip1full{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 90vh; /*ocupara el 90% de la pantalla*/
    color: rgb(218, 194, 190);
    background-image: linear-gradient( /*sirve para poner filtro a la imagen*/
        0deg, /*direccion del gradiente*/
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
        )
    ,url("/media/GrupoVip/ImgTLfull1.jpg");
    background-repeat: no-repeat; /*no repetir la imagen*/
    background-size: cover; /*para que ocupe todo el espacio disponible*/
    background-position: center center;
}
#idGrupoVip2full{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 90vh; /*ocupara el 90% de la pantalla*/
    color: rgb(218, 194, 190);
    background-image: linear-gradient( /*sirve para poner filtro a la imagen*/
        0deg, /*direccion del gradiente*/
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
        )
    ,url("/media/GrupoVip/ImgTLfull2.jpg");
    background-repeat: no-repeat; /*no repetir la imagen*/
    background-size: cover; /*para que ocupe todo el espacio disponible*/
    background-position: center center;
}
#idGrupoVip3full{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    height: 90vh; /*ocupara el 90% de la pantalla*/
    color: rgb(218, 194, 190);
    background-image: linear-gradient( /*sirve para poner filtro a la imagen*/
        0deg, /*direccion del gradiente*/
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
        )
    ,url("/media/GrupoVip/ImgTLfull3.jpg");
    background-repeat: no-repeat; /*no repetir la imagen*/
    background-size: cover; /*para que ocupe todo el espacio disponible*/
    background-position: center center;
}
/************************************************/
#idGrupoVip1 .container{
    text-align: center;
    padding: 90px 12px;
}
#idGrupoVip2 .container{
    text-align: center;
    padding: 90px 12px;
}
#idGrupoVip3 .container{
    text-align: center;
    padding: 90px 12px;
}
#idGrupoVip4 .container{
    text-align: center;
    padding: 90px 12px;
}
#idGrupoVip5 .container{
    text-align: center;
    padding: 90px 12px;
}

/************************************************/
/*@media del encabezado*/
@media (min-width: 720px){/*tamaño en pixeles de la pantalla para aplicar los siguientes estilos*/
    header{
        position: fixed;/*el encabezado se mantendra arriba*/
        width: 100%;
    }
    header .container{
        flex-direction: row; /*se mantendrá el despliegue a lo largo de la fila*/
        justify-content: space-between;/*separa los elementos a la esquina*/
        justify-content: center;
    }
    header nav{/*Los textos del header los pone en horizontal*/
        flex-direction: row;
        padding-bottom: 0;
        padding-right: 20px;
    }
    /************************************************/
    #idGrupoVip1 .container{
        display: flex;/*Imagen a la izqierda y texto a la derecha*/
        justify-content: space-evenly;/*separa los elementos en partes iguales entre los bordes*/
    }
    
    #idGrupoVip1 .texto{
        width: 50%;/*solo el 50% lo va ocupar el texto y el otro 50% se lo dejara a la imagen*/
        max-width: 600px;/*Maximo anchura del texto*/
        text-align: initial;/*Texto justificado a la izquierda*/
        padding: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #idGrupoVip1 h2{
        margin-top: 0px;
    }
    #idGrupoVip1 .img-cantainer-ImgLogoTL{/*Selecciona el primero de los hermanos carta*/
        background-image: url("/media/GrupoVip/ImgLogoTL.png");
        background-repeat: no-repeat;
        /*background-size: cover;*/
        background-position: center center;
        height: 500px;
        width: 400px;
    }
    /************************************************/
    #idGrupoVip2 .container{
        display: flex;/*Imagen a la izqierda y texto a la derecha*/
        justify-content: space-evenly;/*separa los elementos en partes iguales entre los bordes*/
    }
    #idGrupoVip2 .texto{
        width: 50%;/*solo el 50% lo va ocupar el texto y el otro 50% se lo dejara a la imagen*/
        max-width: 600px;/*Maximo anchura del texto*/
        text-align: initial;/*Texto justificado a la izquierda*/
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #idGrupoVip2 h2{
        margin-top: 0px;
    }
    #idGrupoVip2 .img-cantainer-ImgTL2{
        background-image: url("/media/GrupoVip/ImgTL2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 500px;
        width: 400px;
    }
    /***********************************************/
    #idGrupoVip3 .container{
        display: flex;/*Imagen a la izqierda y texto a la derecha*/
        justify-content: space-evenly;/*separa los elementos en partes iguales entre los bordes*/
    }
    #idGrupoVip3 .texto{
        width: 50%;/*solo el 50% lo va ocupar el texto y el otro 50% se lo dejara a la imagen*/
        max-width: 600px;/*Maximo anchura del texto*/
        text-align: initial;/*Texto justificado a la izquierda*/
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #idGrupoVip3 h2{
        margin-top: 0px;
    }
    #idGrupoVip3 .img-cantainer-ImgTL3{
        background-image: url("/media/GrupoVip/ImgTL3.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 500px;
        width: 400px;
    }
    /***********************************************/
    #idGrupoVip4 .container{
        display: flex;/*Imagen a la izqierda y texto a la derecha*/
        justify-content: space-evenly;/*separa los elementos en partes iguales entre los bordes*/
    }
    #idGrupoVip4 .texto{
        width: 50%;/*solo el 50% lo va ocupar el texto y el otro 50% se lo dejara a la imagen*/
        max-width: 600px;/*Maximo anchura del texto*/
        text-align: initial;/*Texto justificado a la izquierda*/
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #idGrupoVip4 h2{
        margin-top: 0px;
    }
    #idGrupoVip4 .img-cantainer-ImgTL4{
        background-image: url("/media/GrupoVip/ImgTL4.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        height: 500px;
        width: 400px;
    }

}
.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:30px;
    box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
    text-decoration: none;
    color: #25d366;
  background-color:#fff;
}
.my-float{
    margin-top:16px;
}