/*HEXAGONO*/

/* generador de figuras geometricas :  http://brenna.github.io/csshexagon/ */
/*EFECTO  (alejandro)*/
.hexagon:hover {
    transition: all 1s ease;
    transform:rotate(-360deg);
}
/* FIN - EFECTO */

.hexagon {
    position: relative;
    width: 100px;
    height: 57.74px;
    /*background-color: #ffffff;*/
    margin: 28.87px 0;
    border-left: solid 3px #CDCDCD;
    border-right: 3px solid #CDCDCD;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 70.71px;
  height: 70.71px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11.6447px;
}
.hexagon:before {
  top: -35.3553px;
  border-top: solid 4.2426px #CDCDCD;
  border-right: solid 4.2426px #CDCDCD;
}
.hexagon:after {
  bottom: -35.3553px;
  border-bottom: solid 4.2426px #CDCDCD;
  border-left: solid 4.2426px #CDCDCD;
}
 /* HEXAGONO CON FONDO TRANSPARENTE */

/* ANIMACIONES */
.fadeIn1{
    opacity:0;
    -webkit-animation: fadein 1.5s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1.5s forwards; /* Firefox < 16 */
    -ms-animation: fadein 1.5s forwards; /* Internet Explorer */
    -o-animation: fadein 1.5s forwards; /* Opera < 12.1 */
    animation: fadein 1.5s forwards;          
}
.fadeIn3{
    opacity:0;
    -webkit-animation: fadein 1s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s forwards; /* Firefox < 16 */
    -ms-animation: fadein 1s forwards; /* Internet Explorer */
    -o-animation: fadein 1s forwards; /* Opera < 12.1 */
    animation: fadein 1s forwards;     
    animation-delay: 3s;     
}           
.fadeIn2{
    opacity:0;
    -webkit-animation: fadein 1s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s forwards; /* Firefox < 16 */
    -ms-animation: fadein 1s forwards; /* Internet Explorer */
    -o-animation: fadein 1s forwards; /* Opera < 12.1 */
    animation: fadein 1s forwards; 
    animation-delay: 1s;

}
    @keyframes fadein {
        0%   {opacity: 0;}
        25%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Firefox < 16 */
    @-moz-keyframes fadein {
        0%   {opacity: 0;}
        25%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
        0%   {opacity: 0;}
        25%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Internet Explorer */
    @-ms-keyframes fadein {
        0%   {opacity: 0;}
        25%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Opera < 12.1 */
    @-o-keyframes fadein {
        0%   {opacity: 0;}
        25%   {opacity: 0;}
        100% {opacity: 1;}
    }
    .animationLeft{
        left: -100%;
        -webkit-animation:animationLeft 1.5s forwards; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation:animationLeft 1.5s forwards; /* Firefox < 16 */
        -ms-animation:animationLeft 1.5s forwards; /* Internet Explorer */
        -o-animation:animationLeft 1.5s forwards; /* Opera < 12.1 */
        animation:animationLeft 1.5s forwards; 
        animation-delay: 0.5s;
    }
    @keyframes animationLeft {
        from { opacity:0;left: -100%; }
        to   { opacity:1;left: 0px; }
    }
    
    /* Firefox < 16 */
    @-moz-keyframes animationLeft {
        from { opacity:0;left: -100%; }
        to   { opacity:1;left: 0px; }
    }
    
    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes animationLeft {
        from { opacity:0;left: -100%; }
        to   { opacity:1;left: 0px; }
    }
    
    /* Internet Explorer */
    @-ms-keyframes animationLeft {
        from { opacity:0;left: -100%; }
        to   { opacity:1;left: 0px; }
    }
    
    /* Opera < 12.1 */
    @-o-keyframes animationLeft {
        from { opacity:0;left: -100%; }
        to   { opacity:1;left: 0px; }
    }



    .animationTop{
        -webkit-animation: animationtop 2s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: animationtop 2s; /* Firefox < 16 */
        -ms-animation: animationtop 2s; /* Internet Explorer */
        -o-animation: animationtop 2s; /* Opera < 12.1 */
        animation: animationtop 2s;       
    }
    @keyframes animationtop {
            from { opacity:0;top: -60px; }
            to   { opacity:1;top: 135px; }
    }
        
        /* Firefox < 16 */
        @-moz-keyframes animationtop {
            from { opacity:0;top: -60px; }
            to   { opacity:1;top: 135px; }
        }
        
        /* Safari, Chrome and Opera > 12.1 */
        @-webkit-keyframes animationtop {
            from { opacity:0;top: -60px; }
            to   { opacity:1;top: 135px; }
        }
        
        /* Internet Explorer */
        @-ms-keyframes animationtop {
            from { opacity:0;top: -60px; }
            to   { opacity:1;top: 135px; }
        }
        
        /* Opera < 12.1 */
        @-o-keyframes animationtop {
            from { opacity:0;top: -60px; }
            to   { opacity:1;top: 135px; }
        }
    
        .animationActu{
            -webkit-animation: animationActu 4s; /* Safari, Chrome and Opera > 12.1 */
                   -moz-animation: animationActu 4s; /* Firefox < 16 */
                    -ms-animation: animationActu 4s; /* Internet Explorer */
                     -o-animation: animationActu 4s; /* Opera < 12.1 */
                        animation: animationActu 4s;   
                        animation-delay: 2s;     
            }
            /* Firefox < 16 */
            @-moz-keyframes animationActu { 
                0%   {right: -382px;}
                25%  {right: 0px;}
                75%  {right: 0px;}
                100% {right: -382px;}
            }
            
            /* Safari, Chrome and Opera > 12.1 */
            @-webkit-keyframes animationActu {
                0%   {right: -382px;}
                25%  {right: 0px;}
                75%  {right: 0px;}
                100% {right: -382px;}
            }
            
            /* Internet Explorer */
            @-ms-keyframes animationActu {
                0%   {right: -382px;}
                25%  {right: 0px;}
                75%  {right: 0px;}
                100% {right: -382px;}
            }
            
            /* Opera < 12.1 */
            @-o-keyframes animationActu {
                0%   {right: -382px;}
                25%  {right: 0px;}
                75%  {right: 0px;}
                100% {right: -382px;}
            }
    


        .animationFacebook{
            -webkit-animation: animationFacebook 4s; /* Safari, Chrome and Opera > 12.1 */
                   -moz-animation: animationFacebook 4s; /* Firefox < 16 */
                    -ms-animation: animationFacebook 4s; /* Internet Explorer */
                     -o-animation: animationFacebook 4s; /* Opera < 12.1 */
                        animation: animationFacebook 4s;   
                        animation-delay: 2s;     
            }
            .animationFacebook2{
                -webkit-animation: animationFacebook 4s; /* Safari, Chrome and Opera > 12.1 */
                       -moz-animation: animationFacebook 4s; /* Firefox < 16 */
                        -ms-animation: animationFacebook 4s; /* Internet Explorer */
                         -o-animation: animationFacebook 4s; /* Opera < 12.1 */
                            animation: animationFacebook 4s; 
                            animation-delay: 4s;      
                }
            /* Firefox < 16 */
            @-moz-keyframes animationFacebook { 
                0%   {left: -380px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -380px;}
            }
            
            /* Safari, Chrome and Opera > 12.1 */
            @-webkit-keyframes animationFacebook {
                0%   {left: -380px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -380px;}
            }
            
            /* Internet Explorer */
            @-ms-keyframes animationFacebook {
                0%   {left: -380px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -380px;}
            }
            
            /* Opera < 12.1 */
            @-o-keyframes animationFacebook {
                0%   {left: -380px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -380px;}
            }

        /* ANIMATION FACEBOOK BOTTOM */
        .animationFacebook-bottom{
            -webkit-animation: animationFacebook-bottom 4s; /* Safari, Chrome and Opera > 12.1 */
               -moz-animation: animationFacebook-bottom 4s; /* Firefox < 16 */
                -ms-animation: animationFacebook-bottom 4s; /* Internet Explorer */
                 -o-animation: animationFacebook-bottom 4s; /* Opera < 12.1 */
                    animation: animationFacebook-bottom 4s;   
                    animation-delay: 2s; 
        }
            /* Firefox < 16 */
            @-moz-keyframes animationFacebook-bottom {
                0%   {bottom: -284px;}
                25%  {bottom: 0px;}
                75%  {bottom: 0px;}
                100% {bottom: -284px;}
            }
            
            /* Safari, Chrome and Opera > 12.1 */
            @-webkit-keyframes animationFacebook-bottom {
                0%   {bottom: -284px;}
                25%  {bottom: 0px;}
                75%  {bottom: 0px;}
                100% {bottom: -284px;}
            }
            
            /* Internet Explorer */
            @-ms-keyframes animationFacebook-bottom {
                0%   {bottom: -284px;}
                25%  {bottom: 0px;}
                75%  {bottom: 0px;}
                100% {bottom: -284px;}
            }
            
            /* Opera < 12.1 */
            @-o-keyframes animationFacebook-bottom {
                0%   {bottom: -284px;}
                25%  {bottom: 0px;}
                75%  {bottom: 0px;}
                100% {bottom: -284px;}
            } 
            
                .fadeOut{
                    -webkit-animation:fadeOut 3s forwards; /* Safari, Chrome and Opera > 12.1 */
                    -moz-animation:fadeOut 3s forwards; /* Firefox < 16 */
                    -ms-animation:fadeOut 3s forwards; /* Internet Explorer */
                    -o-animation:fadeOut 3s forwards; /* Opera < 12.1 */
                    animation:fadeOut 3s forwards; 
                    animation-delay: 1.5s;
                }
                    @keyframes fadeOut {
                        0%   {opacity: 1;}
                        99%{height: 100vh;}
                        100%   {opacity: 0;height:0;}
                    }
                    
                    /* Firefox < 16 */
                    @-moz-keyframes fadeOut{
                        0%   {opacity: 1;}
                        99%{height: 100vh;}
                        100%   {opacity: 0;height:0;}
                    }
                    
                    /* Safari, Chrome and Opera > 12.1 */
                    @-webkit-keyframes fadeOut {
                        0%   {opacity: 1;}
                        99%{height: 100vh;}
                        100%   {opacity: 0;height:0;}
                    }
                    
                    /* Internet Explorer */
                    @-ms-keyframes fadeOut {
                        0%   {opacity: 1;}
                        99%{height: 100vh;}
                        100%   {opacity: 0;height:0;}
                    }
                    
                    /* Opera < 12.1 */
                    @-o-keyframes fadeOut {
                        0%   {opacity: 1;}
                        99%{height: 100vh;}
                        100%   {opacity: 0;height:0;}
                    }
                    
                    .slideZoomEfect{
                        -webkit-animation: slideZoom 4s forwards; /* Safari, Chrome and Opera > 12.1 */
                        -moz-animation: slideZoom 4s forwards; /* Firefox < 16 */
                        -ms-animation: slideZoom 4s forwards; /* Internet Explorer */
                        -o-animation: slideZoom 4s forwards; /* Opera < 12.1 */
                        animation: slideZoom 4s forwards; 
                    }
                        @keyframes slideZoom {
                            0%   {transform: scale(1);}
                            100% {transform: scale(1.2);}
                        }
                        
                        /* Firefox < 16 */
                        @-moz-keyframes slideZoom {
                            0%   {transform: scale(1);}
                            100% {transform: scale(1.2);}
                        }
                        
                        /* Safari, Chrome and Opera > 12.1 */
                        @-webkit-keyframes slideZoom {
                            0%   {transform: scale(1);}
                            100% {transform: scale(1.2);}
                        }
                        
                        /* Internet Explorer */
                        @-ms-keyframes slideZoom {
                            0%   {transform: scale(1);}
                            100% {transform: scale(1.2);}
                        }
                        
                        /* Opera < 12.1 */
                        @-o-keyframes slideZoom {
                            0%   {transform: scale(1);}
                            100% {transform: scale(1.2);}
                        }
                
/* TSUNAMI */                       

.tsunami {
    background-size: 201% auto;
    background-position: 100% 0%;
    transition: background-position 0.5s;
}
.tsunamiDark {
    background-image: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 50%, transparent 50%, transparent 100%);
}
.tsunamiLight {
    background-image: linear-gradient(90deg, var(--color-2) 0%, var(--color-2) 50%, transparent 50%, transparent 100%);
}
.tsunamiWarning {
    background-image: linear-gradient(90deg, var(--color-3) 0%, var(--color-3) 50%, transparent 50%, transparent 100%);
}
.tsunamiDanger {
    background-image: linear-gradient(90deg, var(--color-4) 0%, var(--color-4) 50%, transparent 50%, transparent 100%);
}
.tsunamiInfo {
    background-image: linear-gradient(90deg, var(--color-5) 0%, var(--color-5) 50%, transparent 50%, transparent 100%);
}
.tsunamiPrimary {
    background-image: linear-gradient(90deg, var(--color-6) 0%, var(--color-6) 50%, transparent 50%, transparent 100%);
}
.tsunamiSuccess {
    background-image: linear-gradient(90deg, var(--color-7) 0%, var(--color-7) 50%, transparent 50%, transparent 100%);
}
.tsunamiSecondary {
    background-image: linear-gradient(90deg, var(--color-8) 0%, var(--color-8) 50%, transparent 50%, transparent 100%);
}
.tsunamiShadowDark {
    background-image: linear-gradient(90deg, var(--color-9) 0%, var(--color-9) 50%, transparent 50%, transparent 100%);
}
.tsunamiShadowLight {
    background-image: linear-gradient(90deg, var(--color-10) 0%, var(--color-10) 50%, transparent 50%, transparent 100%);
}

.tsunami:hover{
    background-position: 0 0;
    color:var(--color-2) !important;
    transition: background-position 0.5s,color 0.3s linear 0.2s, background-color 0s linear 0.5s;
 
}
.tsunami:hover >i, .tsunami:hover >span, .tsunami:hover >span > i, .tsunami:hover >p    {
    color:var(--color-2) !important;
  transition:color 0.3s linear 0.2s;
}
.tsunamiShadowLight:hover >i, .tsunamiShadowLight:hover >span, .tsunamiShadowLight:hover >span > i, .tsunamiShadowLight:hover > p   {
    color:var(--color-1) !important;
  transition:color 0.3s linear 0.2s;
}
.tsunamiLight:hover >i, .tsunamiLight:hover >span, .tsunamiStsunamiLighthadowLight:hover >span > i, .tsunamiStsunamiLighthadowLight:hover > p {
    color:var(--color-1) !important;
  transition:color 0.3s linear 0.2s;
}


/* FIN - TSUNAMI */                       

/* .btn-cool{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:10px;
} */
.btn-cool:hover > i {color:black !important; transition:0.75s;}

.btn-cool > span {
    overflow:hidden;
    opacity:0;
    font-size:0;
    transition:0.5s;
    
}
.btn-cool:hover > span {
    opacity:1 !important;
    font-size:18px;
    padding-left:5px;
    transition:0.5s !important;
}

.triangle-tl{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 200px 200px 0 0;
	border-color: rgba(255,255,255,0.5) transparent transparent transparent;
}	
.triangle-tl > a {
	position: absolute;
	bottom: 90px;
    left: 15px;				
}
.triangle-tr{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 200px 200px 0;
	border-color: transparent rgba(255,255,255,0.5) transparent transparent;			
}	
.triangle-tr > a {
	position: absolute;
	top: 30px;
	left: 120px;		
}

.triangle-bl{
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 200px 0 0 200px;
	border-color: transparent transparent transparent rgba(255,255,255,0.5);		
}	
.triangle-br{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 200px 200px;
	border-color: transparent transparent rgba(255,255,255,0.5) transparent;			
}	


.giro:hover {
    transition: all 1s ease;
    transform:rotate(-360deg);
}



.flip:hover{
    -webkit-animation:flip 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation:flip 1s; /* Firefox < 16 */
    -ms-animation:flip 1s; /* Internet Explorer */
    -o-animation:flip 1s; /* Opera < 12.1 */
    animation:flip 1s; 
}

.flip2:hover > div, .flip2:hover i{
    -webkit-animation:flip 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation:flip 1s; /* Firefox < 16 */
    -ms-animation:flip 1s; /* Internet Explorer */
    -o-animation:flip 1s; /* Opera < 12.1 */
    animation:flip 1s; 
}
.flip2 i, .flip2 span,.flip2 > div{transition:1s;}
@keyframes flip{
    0%{
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) rotateY(-1turn);
        transform:perspective(400px) rotateY(-1turn)
    }40%{
        -webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) rotateY(-190deg);
        transform:perspective(400px)  rotateY(-190deg)
    }50%{-webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) rotateY(-170deg);
        transform:perspective(400px) rotateY(-170deg)
    }80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;
        -webkit-transform:perspective(400px)  rotateY(0deg);
        transform:perspective(400px) rotateY(0deg)
    }to{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px)  rotateY(0deg);
        transform:perspective(400px)  rotateY(0deg)
    }
}