@import url(http://fonts.googleapis.com/css?family=Open+Sans);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;       
}

body {
    font-family: 'Open Sans', sans-serif;         
    font-size: 24px;
    font-weight: 500;
}

span {
    font-family: 'Open Sans';         
    font-size: 36px;         
    font-weight: bold;  
}

.iframe {
        width: 550px;
}

p {
    font-family: 'Open Sans', sans-serif;         
    font-size: 30px;    
}

.imgche
{
    width: 40px;
}

.icon-facebook {
    color: #72d5e7;   
    align-content: space-around;
}

.icon-instagram-2 {
    color: #72d5e7;   
    align-content: space-between;
}

.navbar {
    box-shadow: 0 2px 2px 5px #ffffff;
    opacity: .9;
    z-index: 99999;
}

.navbar .navbar-brand img {
    width: 300px;
}

.navbar-toggler .icon-menu-1 {
    font-size: 25px;
    color:  lightgray;
    border-color: white;
    align-content: center;    
    background-color: white;
}

.navbar-item {
    color: gray;
    border-color: white;
    background-color: white;    
}

.nav-link {
    color: gray; /* Color Links Pasivos */
    border-color: white;
    font-size: 28px; 
    font-weight: normal;    
}

.nav-link:hover {
    color: rgb(100, 100, 100);
    font-weight: bold;
    font-size: 29px; 
    /* #859999; */
}

.icon-menu-outline {
    font-size: 20px;
    color:  darkgray;
    align-content: center;
    border-color: white;
    background-color: white;
}


.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 65%;
}



.colorcarrusel {
    color: #72d5e7;  /* rgba(45,204,211,0.5);  */
}

.colorpanton {
    color: #72d5e7;  
    background-color: white;    
}

.colorletra {
    color: #848484;
    background-color: white;
}

.titulo {
    color: #72d5e7; 
    font-family:'verdana'; 
    font-size: 40px; 
    font-weight: bold; 
    word-spacing: 1px; 
    letter-spacing: 0px; 
    line-height: 36px;
    text-align: center;
}

.subtitulo {
    color: #72d5e7; 
    font-family:'verdana'; 
    font-size: 28px; 
    font-weight: bold; 
    word-spacing: 1px; 
    letter-spacing: 0px; 
    line-height: 36px;
    text-align: center;
}

.cardcuerpo{
    font-size: 20px;
    text-align: left;
}


/*---------------- PARPADEO CON COLOR -------------*/
@keyframes blink {  
  0% { color: #e58a1a; }
  100% { color: #72d5e7; }
}
@-webkit-keyframes blink {
  0% { color: #e58a1a; }
  100% { color: #72d5e7; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}



        
.texto-centrado {
    position: absolute;                          
    left: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    background: rgba(0,0,0);
    background-color: rgba(0,0,0,0.4);               
    color: rgba(45,204,211,0.3); /* rgba(45,204,211,0.5)      */
}        


.micontainer {
    display: flex;
    position: relative;
    align-content: center;
    text-align: justify;    
}


.textoen40{
    font-size: 40px;  
}


.colortexto40{
    color: #72d5e7; 
    font-family:'verdana'; 
    font-size: 35px;  
    font-weight: bold; 
    word-spacing: 1px; 
    letter-spacing: 0px; 
    line-height: 1px;
}

#logoini {
    width: 380px;
}

#logofin {
    width: 350px;
}


.columna1 {
    width: 40%;
    float: left;
    line-height: 1px;
    word-spacing: 1px; 
}

.columna2 {
    width: 0%;
    line-height: 0px; 
}

.columna3 {
    width: 60%;
    float: left;
    word-spacing: 1px; 
    line-height: 1px;
}


.inflado:hover{
    opacity: 0.8; 
    color: white; 
    transition-delay: 0.2s;
    transition-duration: 3s;
    transform: scale(1.45);
    cursor:pointer;
}

.inflado2:hover{
    opacity: 0.8; 
    color: white; 
    transition-delay: 0.1s;
    transition-duration: 2s;
    transform: scale(1.1);
    cursor:pointer;
}

#map{
    padding: 1%;
}

#mapa iframe{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.buttonmy4 {
    background-color: white;
    color: black;
    border: 3px solid #e42020; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s;
}

.buttonmy4:hover {
    background-color: #e42020; 
    color: white;
}


.buttonsocialwh {
    background-color:  #25D366;
    color: #fff;
    border: 3px solid #25D366;
    font-size: 24px;
    border-radius: 50%;
}

.buttonsocialwh2:hover {
    background-color: white; 
    color:  #25D366;
}

.buttonsocialmail {
    background-color:  #2d0af5;
    color: #fff;
    border: 3px solid  #2d0af5;
    font-size: 24px;
    border-radius: 50%;
}

.buttonsocialhome {
    background-color:  #88860c;
    color: #fff;
    border: 3px solid   #88860c;
    font-size: 24px;
    border-radius: 48%;
}


.clasefin {
    font-size: 22px;  
    line-height: 2px;
}


.portada__cabecera{
    position: absolute;
    top: 50%;
    left: 5%;
    color: white;
    font-size: 2.5em;
    text-shadow: 2px 2px 5px red;   
}

.portada__texto{
    position: absolute;
    top: 80%;
    left: 15%;
    color: white;
    font-size: 1.4em;
}



.banner1
{
    width: auto;
    height: 200px;
    border: 2px solid #1cdbdb;
    margin: auto;
    align-content: flex-end;                              
    background-size: 100% 100%;            
    animation-name: banner1;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-direction:normal;
    /*animation-direction: alternate;            *
    /* lineas juntas 
    animation: banner  10s  infinite;   */   
}

.banner2
{
    width: auto;
    height: 200px;
    border: 2px solid #1cdbdb;
    margin: auto;
    align-content: flex-end;                              
    background-size: 100% 100%;            
    animation-name: banner2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-direction:normal;
}

.banner3
{
    width: auto;
    height: 200px;
    border: 2px solid #1cdbdb;
    margin: auto;
    align-content: flex-end;                              
    background-size: 100% 100%;            
    animation-name: banner3;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-direction:normal;
}


@keyframes banner1 {
    0%, 20% {
        background-image: url("../img/linea01.jpg");
        opacity: 1;
    }   
    20%, 40% {
        background-image: url("../img/linea02.jpg");
        opacity: 1;
    }
    40%, 60% {
        background-image: url("../img/linea03.jpg");
        opacity: 1;
    }
    60%, 80% {
        background-image: url("../img/linea04.jpg");
        opacity: 1;
    }
    80%, 100% {
        background-image: url("../img/linea05.jpg");
        opacity: 1;
    }
}

@keyframes banner2 {
    0%, 20% {
        background-image: url("../img/linea06.jpg");
        opacity: 1;
    }   
    20%, 40% {
        background-image: url("../img/linea07.jpg");
        opacity: 1;
    }
    40%, 60% {
        background-image: url("../img/linea08.jpg");
        opacity: 1;
    }
    60%, 80% {
        background-image: url("../img/linea09.jpg");
        opacity: 1;
    }
    80%, 100% {
        background-image: url("../img/linea10.jpg");
        opacity: 1;
    }
}

@keyframes banner3 {
    0%, 20% {
        background-image: url("../img/linea04.jpg");
        opacity: 1;
    }   
    20%, 40% {
        background-image: url("../img/linea06.jpg");
        opacity: 1;
    }
    40%, 60% {
        background-image: url("../img/linea02.jpg");
        opacity: 1;
    }
    60%, 80% {
        background-image: url("../img/linea05.jpg");
        opacity: 1;
    }
    80%, 100% {
        background-image: url("../img/linea07.jpg");
        opacity: 1;
    }
}


.contenedor__subcabecera{
    position: absolute;
    top: 3%;
    left: 2%;    
    font-size: 45px;    
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}


.contenedor__boton{
    position: absolute;
    top: 40%;
    right: 5%;    
}


/* Styling the button */
.btntransparente {    
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    border: 3px solid white;
    background-color: transparent;    
    width: 360px;
    color: white;
    font-size: 35px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
}

.btntransparente:hover {    
    cursor: pointer;
    text-decoration: none;
    border: 3px solid white;
    background-color: orange; 
    color: white;
    transform: scale(1.05);                 
}












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

    body {
        font-size: 18px;
    }    

    p {
        font-family: 'Open Sans', sans-serif;         
        font-size: 14px;  
    }

    .textoen40{
        font-size: 24px;  
    }
    


    .colortexto40{        
        color: #72d5e7;          
        font-family:'verdana'; 
        font-size: 28px;  
        font-weight: bold; 
        word-spacing: 1px; 
        letter-spacing: 0px; 
        line-height: 1px;
    }    

    .imgche
    {
        width: 25px;
    }


    b {
        font-size: 14px;  
    }

    .cardcuerpo{
        font-size: 15px;
        text-align: justify;
    }

    .navbar .navbar-brand img {
        width: 220px;
    }

    .nav-link {        
        font-size: 16px; 
    }
    
    .nav-link:hover {        
        font-size: 17px; 
    }
    
    .carousel .item>img {
        width: 100%;
        height:75vh;
    }

    .titulo {
        font-size: 26px; 
        line-height: 25px;
    }
    
    iframe {
        width: 320px;
    }
    
    #logoini {
        width: 280px;
    }

    #logofin {
        width: 280px;
    }

    .columna1 {
        width: 100%;
        float: left;
        line-height: 1px;
        word-spacing: 1px; 
    }

    .columna2 {
        width: 100%;
        line-height: 3px;
        word-spacing: 1px; 
    }
    
    .columna3 {
        width: 100%;
        float: left;
        word-spacing: 1px; 
        line-height: 1px;
    }



    .buttonsocialwh {
        background-color:  #25D366;
        color: #fff;
        border: 3px solid #25D366;
        font-size: 14px;
        border-radius: 50%;
    }

    
    .buttonsocialmail {
        background-color:  #2d0af5;
        color: #fff;
        border: 3px solid  #2d0af5;
        font-size: 14px;
        border-radius: 50%;
    }
    
    .buttonsocialhome {
        background-color:  #88860c;
        color: #fff;
        border: 3px solid   #88860c;
        font-size: 14px;
        border-radius: 48%;
    }
    


    .clasefin {
        font-size: 14px;  
        line-height: 2px;
        height: auto;
    }






    .contenedor__subcabecera{
        position: absolute;
        top: 3%;
        left: 2%;    
        font-size: 25px;    
        color: white;
        text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    }
    
    
    .contenedor__boton{
        position: absolute;
        bottom: 0;
        right: 5%;    
    }
    
    
    /* Styling the button */
    .btntransparente {    
        cursor: pointer;
        text-decoration: none;
        border-radius: 10px;
        border: 3px solid white;
        background-color: transparent;    
        width: 360px;
        color: white;
        font-size: 22px;
        box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
    }
    
    .btntransparente:hover {    
        cursor: pointer;
        text-decoration: none;
        border: 3px solid white;
        background-color: orange; 
        color: white;
        transform: scale(1.05);                 
    }
    




}