/*------------------------------------*\
            defa.feature-top-slidert.css
\*------------------------------------*/
/*
    * General.....................General use
    * Media Query.................RWD Setting
*/





/*------------------------------------
            $General
------------------------------------*/
.feature-topnav{ opacity: 0; }
.feature-topnav .feature-top-slider{ 
    border-bottom: 1px solid #c2c2c2;
    list-style: none; 
    padding: 0;
    margin: 0;
    height: 200px;
}
.feature-topnav .feature-top-slider .effect{
    margin: 0 0.911458vw; /*17.5*/
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    /*visibility: hidden;*/
}
.feature-topnav .feature-top-slider .effect a{
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
}
.feature-topnav .feature-top-slider .effect a:focus{ outline: none; }
.feature-topnav .feature-top-slider .effect a img{ 
    width: 100%;
    max-width: 100px; 
    max-height: 100px; 
}
.feature-topnav .feature-top-slider .effect a p.selected{ 
    color: #505050; 
    display: none;
    font-family: BebasNeueBold, sans-serif;
    font-size: calc( 26.4px + 1.125vw ); /*48-30*/
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}
.feature-topnav .feature-top-slider .effect a p.selected span,
.feature-topnav .img-wrapper p span{ font-family: sans-serif; }

    .feature-topnav .img-wrapper{ position: relative; }
    .feature-topnav .img-wrapper p{
        color: #fff;
        font-family: BebasNeueBold, sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        text-transform: uppercase;
        position: absolute;
        top: 50%;
        left:0;
        right:0;
        -webkit-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	    transform: translateY(-50px);
    }
    .feature-topnav .img-wrapper .mask{
        border-radius: 50%;
        background:rgba( 0, 0, 0, 0.5 );
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .feature-topnav .img-wrapper p,
    .feature-topnav .img-wrapper .mask{
        opacity: 0;
        -webkit-transition: opacity 0.35s ease-out, -webkit-transform 0.3s ease-out;
	    transition: opacity 0.35s ease-out, -webkit-transform 0.3s ease-out;
		transition: opacity 0.35s ease-out, transform 0.3s ease-out;
    }

/*--- hover ---*/
    .feature-topnav .feature-top-slider .effect a:hover,
    .feature-topnav .feature-top-slider .effect a:focus{ text-decoration: none; }
    .feature-topnav .img-wrapper:hover p,
    .feature-topnav .img-wrapper:hover .mask{ opacity: 1; }
    .feature-topnav .img-wrapper:hover p{
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

/*--- active ---*/
    .feature-topnav .feature-top-slider .effect a.active img{ 
        max-width: 130px;
        max-height: 130px; 
    }
    .feature-topnav .feature-top-slider .effect a.active p.selected{ display: block; text-align: left; }
    .feature-topnav .feature-top-slider .effect a.active .img-wrapper{ margin-right: 1.30208vw; /*25*/ }
    .feature-topnav .feature-top-slider .effect a.active .img-wrapper p,
    .feature-topnav .feature-top-slider .effect a.active .img-wrapper .mask{ display: none; }






/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 991px){
    /*------------------------------------
                $General
    ------------------------------------*/
    .feature-topnav .feature-top-slider .effect a{
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    /*--- active ---*/
    .feature-topnav .feature-top-slider .effect a.active img{ 
        max-width: 100px;
        max-height: 100px; 
    }
}

@media screen and (max-width: 800px){
    /*------------------------------------
                $General
    ------------------------------------*/
    .feature-topnav .feature-top-slider .effect a p.selected{ font-size: calc( 4vw ); /*32px*/ }
}

@media screen and (max-width: 500px){
    /*------------------------------------
                $General
    ------------------------------------*/
    .feature-topnav .feature-top-slider .effect a p.selected{ font-size: calc( 6.4vw ); /*34px*/ }
}

@media screen and (max-width: 350px){
    /*------------------------------------
                $General
    ------------------------------------*/
    .feature-topnav .feature-top-slider .effect a p.selected{ font-size: 30px; }
}