/* CIRCULO */
.circulo{
    position: relative;
    width: 110px;
    height: 110px;
    padding-top: 15px;
    border:3px solid white ;
    border-radius:50%;
}
.circulo:hover {
/*     color:yellow;
    border-color:yellow; */
    transition: all 1s ease;
    transform:rotate(-360deg);
}
/* FIN - CIRCULO */
/*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 3s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s forwards; /* Firefox < 16 */
    -ms-animation: fadein 3s forwards; /* Internet Explorer */
    -o-animation: fadein 3s forwards; /* Opera < 12.1 */
    animation: fadein 3s forwards;  
    animation-delay: 1s;        
}

    @keyframes fadein {
        0%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Firefox < 16 */
    @-moz-keyframes fadein {
        0%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Internet Explorer */
    @-ms-keyframes fadein {
        0%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    /* Opera < 12.1 */
    @-o-keyframes fadein {
        0%   {opacity: 0;}
        100% {opacity: 1;}
    }
    
    .animationTop{
        -webkit-animation: animationtop 2s forwards; /* Safari, Chrome and Opera > 12.1 */
               -moz-animation: animationtop 2s forwards; /* Firefox < 16 */
                -ms-animation: animationtop 2s forwards; /* Internet Explorer */
                 -o-animation: animationtop 2s forwards; /* Opera < 12.1 */
                    animation: animationtop 2s forwards;       
        }
        @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; }
        }
    
        .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: -300px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -380px;}
            }
            
            /* Safari, Chrome and Opera > 12.1 */
            @-webkit-keyframes animationFacebook {
                0%   {left: -300px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -300px;}
            }
            
            /* Internet Explorer */
            @-ms-keyframes animationFacebook {
                0%   {left: -300px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -300px;}
            }
            
            /* Opera < 12.1 */
            @-o-keyframes animationFacebook {
                0%   {left: -300px;}
                25%  {left: 0px;}
                75%  {left: 0px;}
                100% {left: -300px;}
            }

        /* 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;}
            } 
            
            .showLeft{
                left:-75%;
                -webkit-animation:showLeft 2s forwards; /* Safari, Chrome and Opera > 12.1 */
                -moz-animation:showLeft 2s forwards; /* Firefox < 16 */
                -ms-animation:showLeft 2s forwards; /* Internet Explorer */
                -o-animation:showLeft 2s forwards; /* Opera < 12.1 */
                animation:showLeft 2s forwards; 
                animation-delay: 1s;     
            }
            @keyframes showLeft {
                0%   {opacity: 0;left:-75%;}
                100%   {opacity: 1;left:0px;}
            }
                    
            /* Firefox < 16 */
            @-moz-keyframes showLeft{
                0%   {opacity: 0;left:-75%;}
                100%   {opacity: 1;left:0px;}
            }
                    
            /* Safari, Chrome and Opera > 12.1 */
            @-webkit-keyframes showLeft {
                0%   {opacity: 0;left:-75%;}
                100%   {opacity: 1;left:0px;}
            }
                    
            /* Internet Explorer */
            @-ms-keyframes showLeft {
                0%   {opacity: 0;left:-75%;}
                100%   {opacity: 1;left:0px;}
            }
                    
            /* Opera < 12.1 */
            @-o-keyframes showLeft {
                0%   {opacity: 0;left:-75%;}
                100%   {opacity: 1;left:0px;}
            }    



            .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;}
            }
                
            

.tsunamiDark {
    background-image: url('tsunamiDark.png');
    background-repeat: repeat-y;
    background-size: 0px 100%;
    transition: 0.5s;
}

.tsunamiDark:hover {
    background-size: 100% 100%;
    background-color:transparent;
    transition: 0.5s;
}
.tsunamiDanger {
    background-image: url('tsunamiDanger.png');
    background-repeat: repeat-y;
    background-size: 0px 100%;
    transition: 0.5s;
}

.tsunamiDanger:hover {
    background-size: 100% 100%;
    background-color:transparent;
    color:white !important;
    transition: 0.5s;
}


/* .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 div{
    -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 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{transition:1s;}
/* .flip2:hover i{
    color:yellow !important;
    border-color:yellow !important;
    transition:1s;
}
.flip2:hover span{
    color:yellow !important;
    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)
    }
}

/* .lightSpeedInLeft {
	-webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft; 
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedInLeft {
	0% {
		opacity:0; -webkit-transform: translate3d(-100% , 0, 0) skewX(30deg);transform: translate3d(-100% , 0, 0) skewX(30deg);
	}
	60% {
		opacity:1; -webkit-transform:skewX(-20deg);transform:skewX(-20deg);
	}
	80% {
		-webkit-transform:skewX(5deg);transform:skewX(5deg);
	}
	to {
		-webkit-transform:translateZ(0);transform:translateZ(0);
	}
}
@keyframes lightSpeedInLeft {
	0% {
		opacity: 0; -webkit-transform: translate3d(-100% , 0, 0) skewX(30deg);transform: translate3d(-100% , 0, 0) skewX(30deg);
	}
	60% {
		opacity: 1; -webkit-transform: skewX(-20deg);transform: skewX(-20deg);
	}
	80% {
		-webkit-transform: skewX(5deg);transform: skewX(5deg);
	}
	to {
		-webkit-transform: translateZ(0);transform: translateZ(0);
	}
}
 */