/* GIROS */
.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; 
}
@keyframes flip{
    0%{
        -webkit-animation-timing-function:ease-out;
        animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
    }40%{
        -webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;
        -webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }50%{-webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
    }80%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);
        transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)
    }to{
        -webkit-animation-timing-function:ease-in;
        animation-timing-function:ease-in;
        -webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
    }
}
/* FIN - GIROS */
/* ROTATE */
.rotate{
    -ms-transform: rotate(1deg);
   -moz-transform: rotate(1deg);
   -webkit-transform: rotate(1deg);
   -o-transform: rotate(1deg);
   transform: rotate(1deg);
}
.rotate-1{
    -ms-transform: rotate(-2deg);
   -moz-transform: rotate(-2deg);
   -webkit-transform: rotate(-2deg);
   -o-transform: rotate(-2deg);
   transform: rotate(-2deg);
}
.rotate2{
    -ms-transform: rotate(2deg);
   -moz-transform: rotate(2deg);
   -webkit-transform: rotate(2deg);
   -o-transform: rotate(2deg);
   transform: rotate(2deg);
}
/* FIN - ROTATE */

/* HOVER */
.hover_scale:hover{
	-webkit-transform: scale(1.1);
    transform: scale(1.1);
	transition-duration: 0.3s;
}
.hscale:hover{transform: scale(1.2);transition:1s;}

.hover {
    position: absolute !important;
    min-height: 100%;
	min-width: 100%;
    top: 0px;
    background-image: none;
    text-align: center;
	opacity: 0;
}
.hover:hover {background-color: rgba(0, 0, 0, 0.27); opacity: 1 !important;}
.hover2{
    position:absolute !important;
    width:100%;
    height:100%;
    top:0px;
}
.hover2 div {
    background-color: rgba(0, 0, 0, 0.60); 
    width:100%;
    height:auto;
    border-bottom:2px solid white;
}
.hover2 > div > p{
    display:none;
    transition:0.3s;
}
.hover2 > div > a > i{
    display:none;
    transition:0.3s;
}
.hover2:hover {background-color: rgba(0, 0, 0, 0.60); padding:20px; transition:0.3s;}
.hover2:hover > div {background-color: rgba(0, 0, 0, 0.00) !important; height:100%; border-left:2px solid white;border-right:2px solid white;border-top:2px solid white; transition:0.3s; vertical-align: middle !important;display: flex;flex-flow: column;justify-content: center;}
.hover2:hover > div > p  {display:block !important;transition:0.3s;}
.hover2:hover > div > a > i  {display:block !important;transition:0.3s;}

.hover3{
    position:absolute !important;
    width:100%;
    height:100%;
    top:0px;
}
.hover3 div {
    background-color: rgba(0, 0, 0, 0.60); 
    width:100%;
    height:50px;
    border-bottom:2px solid white;

    display:none;
    transition:0.3s;
}
.hover3 > a > i{
    width: 60px;
    height: 60px;
    border: solid 2px white;
    padding: 10px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    border-radius: 50%;
    
    opacity: 0;
    display:none;
    transition:0.5s;
}
.hover3 > a > i:hover{
    transform: scale(1.1);
    transition:0.5s;
}
.hover3:hover {background-color: rgba(0, 0, 0, 0.60); padding:20px; transition:0.3s;}
.hover3:hover > div {
    background-color: rgba(0, 0, 0, 0.00) !important; 
    height:100%; 
    border-left:2px solid white;
    border-right:2px solid white;
    border-top:2px solid white; 
    
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    transition:0.3s;
    
}
.hover3:hover > a > i {display:block !important;opacity: 1;transition:0.5s;}

.hoverLight{ transition:0.5s;}
.hoverLight:hover{color:white !important; transition:0.5s;}
.hoverDark{ color:white ;transition:0.5s;}
.hoverDark:hover{color:#464348 !important; transition:0.5s;}
.hoverDark2:hover{color:#464348 !important; transition:0.5s;}
/* FIN - HOVER */

/* ZOOM */
.zoom{
    overflow:hidden;
    position:relative;
}
.zoom > a > img{transition:0.75s;}
.zoom > a > .lazy-background{transition:0.75s; }
.zoom:hover > a > img{transform:scale(1.3); transition:0.75s;}
.zoom:hover  > a > .lazy-background{transform:scale(1.3); transition:0.75s;}

.zoom2 {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.zoom2>a>img,.zoom2>a>.lazy-background  {
    border-radius: 50%;
    padding: 5px;
    transition: 0.25s;
}

.zoom2:hover>a>img,.zoom2:hover>a>.lazy-background  {
    padding: 0px !important;
    transition: 0.25s;
}

/* FIN - ZOOM */

/* TRANSITION */
.transition{width: 100%;height: 100%;}
.transition:hover{background-color: rgba(255, 255, 255, 0.27);}
.transition h4{margin-bottom: 0px;}
.transition div{
    transform: scaleY(0);
    transform-origin: 100% 0;
    transition: transform 250ms ease;
    background-color: rgba(13, 171, 211,0.53 );
    height: 100%;
}
.transition:hover div{transform: scaleY(1);}
.transition2{width: 100%;height: 100%;}
.transition2 div{
    transform: scaleY(0);
    transform-origin: 100% 0;
    transition: transform 250ms ease;
    background-color: rgba(255, 255, 255, 0.75);
    height: 100%;
}
.transition2:hover div{transform: scaleY(1);}
/* FIN - TRANSITION */

/*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 */

/* TRIANGULO */
.triangle-tl{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 120px 120px 0 0;
	border-color: rgba(0,0,0,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 120px 120px 0;
	border-color: transparent rgba(0,0,0,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: 120px 0 0 120px;
	border-color: transparent transparent transparent rgba(0,0,0,0.5);		
}	
.triangle-br{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 120px 120px;
	border-color: transparent transparent rgba(0,0,0,0.5) transparent;			
}	

.triangleImgLeft {
    width: 0;
    height: 0;
    border-bottom: 100px solid #fff;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    position: absolute;
    right: calc(50% - 100px);
    bottom: 0;
}

.triangleImgRight {
    width: 0;
    height: 0;
    border-bottom: 100px solid #fff;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;

    position: absolute;
    left: calc(50% - 100px);
    bottom: 0px;
}
/* FIN - TRIANGULO */
 


/* CARROUSEL BOOTSTRAP */
.carousel-inner{
  /*   height: 100vh; */
}
/* para hacer la transición mas suave  */
.carousel-item{
	/* transition: opacity 3s ease!important; */
}
/* FIN - para hacer la transición mas suave  */
/* .gadjet-slide-right, .gadjet-slide-right div {display:none;} */
/* FIN - CARROUSEL BOOTSTRAP */

@media only screen and (min-width: 576px){
    
}

@media only screen and (min-width: 768px){

}


@media only screen and (min-width: 992px){
    .container-face{
        position: absolute;
        top: 90px;
        left:-380px;
        z-index: 2;
        width: 481px;
        height: 500px;
        
        display:flex;
        align-items: start;
    
        transition:1s;
    }
    .container-face:hover{
        left:0px;
        transition:1s;
    }
    .container-face-bottom{
        align-items: center;
        position: absolute;
        bottom:-284px;
        left:0px;
        z-index: 2;
        width: 481px;
        height: 384px;
        
        flex-direction: column;
        justify-content: start;
        align-items: center;
    
        transition:1s;
    }
    .container-face-bottom:hover{
        bottom:0px;
        transition:1s;
    }
    .face-slide{
        background-color: #3b5998;
        border-radius: 0px 50px 50px 0px;
        width: 100px;
        padding: 10px;
        height: auto;
    }
    .face-slide-bottom{
        background-color: #3b5998;
        border-radius: 50px 50px 0px 0px;
        width: 100px;
        padding: 10px;
        height: auto;
    }
    .gadjet-slide-right div{
        display:flex;
    }
    .gadjet-slide-right{
        overflow:hidden;
        display:flex;
        position:absolute;
        right:0px;
        top:90px;
        border-radius: 60px 0px 0px 60px;
        width:100px;
        z-index: 1;
        transition:0.25s;
    }
    .gadjet-slide-right:hover{
        width:400px;
        transition:0.25s linear;
    }
    .gadjet-slide-right:hover p{
        opacity:1;
        animation-delay: 0.25s;
        transition:0.4s linear;
    }
    .gadjet-slide-right img{
        width:80px;
        height:80px;
        border-radius:50%;
    }
    .gadjet-slide-right p{
        opacity:0;
    }

    /* WIDGET ACTU */
    .container-actu{
        position: absolute;
        top: 150px;
        right:-310px;
        z-index: 1;
        width: 366px;
        display:flex;
        align-items: start;

        transition:1s;
    }
    .container-actu:hover{
        right:0px;
        transition:1s;
    }
    .actu-slide{
        border-radius: 50px 0px 0px 50px;
        width: 53px;
        padding: 10px;
        height: auto;
    }
    /* FIN - WIDGET ACTU */

    /* TRIANGULO */
    .triangleImgLeft {
        width: 0;
        height: 0;
        border-right: 100px solid #fff;
        border-left: inherit;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        position: absolute;
        right: 0;
        bottom: calc(50% - 100px);
    }
    
    .triangleImgRight {
        width: 0;
        height: 0;
        border-left: 100px solid #fefdfb;
        border-right: inherit;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        position: absolute;
        left: 0px;
        bottom: calc(50% - 100px); 
    }
     /* FIN - TRIANGULO */
}

@media only screen and (min-width: 1024px){
    
}

@media only screen and (min-width: 1200px){

}




/* 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;}
    }
    .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;     
        }
        .animationFacebook2{
            -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: 4s;      
            }
        /* Firefox < 16 */
        @-moz-keyframes animationActu { 
            0%   {right: -310px;}
            25%  {right: 0px;}
            75%  {right: 0px;}
            100% {right: -310px;}
        }
        
        /* Safari, Chrome and Opera > 12.1 */
        @-webkit-keyframes animationActu {
            0%   {right: -310px;}
            25%  {right: 0px;}
            75%  {right: 0px;}
            100% {right: -310px;}
        }
        
        /* Internet Explorer */
        @-ms-keyframes animationActu {
            0%   {right: -310px;}
            25%  {right: 0px;}
            75%  {right: 0px;}
            100% {right: -310px;}
        }
        
        /* Opera < 12.1 */
        @-o-keyframes animationActu {
            0%   {right: -310px;}
            25%  {right: 0px;}
            75%  {right: 0px;}
            100% {right: -310px;}
        }
    .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; }
        }
    
        .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);}
                        }