/*------------------------Fonts----------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

/*---------TUF Google Fonts--------*/
.squada{
    font-family: 'Squada One', cursive;
}

h2.squada{
    font-size:2.8rem;
}

h3.squada{
    font-size:2rem;
}

h4.squada{
    font-size:1.5rem;
}

h5.squada{
    font-size:1.2rem;
}



/*------------------------ TUF Fonts -----------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/


.machinen{
    font-family: machinen;
}

h2.machinen{
    font-size:3rem;
}

h3.machinen{
    font-size:2.5rem;
}

h4.machinen{
    font-size:2rem;
}

h5.machinen{
    font-size:1rem;
}


/*------------------------Resets---------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

body{
    background-color: #000;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 14px;
}

ul{
    padding: 0!important;
}

.container{
    background-color: #000;
    max-width: 720px !important;
}


.card{
    background-color: #000!important;
}


.card-title{
    margin-bottom: 0!important;
}


.nav {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;
}


.small, small {
    font-size: 80%!important;
    color: #676363!important;
}


/*5-column layout with Bootstrap 4*/
.col-2dot4, .col-sm-2dot4, .col-md-2dot4, .col-lg-2dot4, .col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}


/*------------------------TUF Main Title ---------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

.tuf-main-title{
    background: rgb(86, 86, 86);
    background: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgb(86, 86, 86) 100%);
    background: -o-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgb(86, 86, 86) 100%);
    background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(86, 86, 86) 100%)
}


/*------------------------Color Borders---------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/


.blue-border-bottom{border-bottom: .15rem solid #007bff!important}

.red-border-bottom{border-bottom: .15rem solid #cc0c00!important}

.purple-border-bottom{border-bottom: .15rem solid #bb00ff!important}

.pink-border-bottom{border-bottom: .15rem solid #fc0281!important}

.cyan-border-bottom {border-bottom: .15rem solid #10b8b0!important}

.yellow-border-bottom {border-bottom: .15rem solid #f5b901!important}

.gray-border-bottom {border-bottom: .15rem solid #bcbcbc!important}


.blue-border-top{border-top: .15rem solid #007bff!important}

.red-border-top{border-top: .15rem solid #cc0c00!important}

.purple-border-top{border-top: .15rem solid #bb00ff!important}

.pink-border-top{border-top: .15rem solid #fc0281!important}

.cyan-border-top {border-top: .15rem solid #10b8b0!important}

.yellow-border-top {border-top: .15rem solid #f5b901!important}

.gray-border-top {border-top: .15rem solid #bcbcbc!important}



/*------------------------Titles Colors--------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/


.blue-title{color: #007bff!important}

.red-title{color: #cc0c00!important}

.purple-title{color: #bb00ff!important}

.pink-title{color: #fc0281!important}

.cyan-title {color: #10b8b0!important}

.gray-title {color: #bcbcbc}

.yellow-title {color: #FFBF3B!important}



/*-------------------- Menu 01 - Hover Icon----------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

.hover{
    cursor: pointer; 
    border: solid 1px #292929; 
}

.hover a{
    padding-top: 10px;
    display: block;
}

.hover h5{
    text-align: center;
    color: #9999;
    margin-top: 10px
}

.hover a .active-img{
    display: none;
}

.hover a .static-img{
    display: block;
    margin: 0 auto;
}


.hover a:hover .active-img,
.hover a.active .active-img{
    display: block;
    margin: 0 auto;
}

.hover a:hover .static-img,
.hover a.active .static-img{
    display: none;

}

/*--prime--*/
.prime-hover a:hover,
.prime-hover a.active {
    background: rgb(28,246,255);
    background: -webkit-linear-gradient(bottom, rgba(28,246,255,1) 49%, rgb(63, 210, 253) 100%);
    background: -o-linear-gradient(bottom, rgba(28,246,255,1) 49%, rgb(63, 210, 253) 100%);
    background: linear-gradient(to top, rgba(28,246,255,1) 49%, rgb(63, 210, 253) 100%);
    border-bottom: solid 8px #14808a;
    display: block;
}

.prime-hover a:hover h5,
.prime-hover a.active h5{
    color: #000
}


/*--tuf--*/
.tuf-hover a:hover,
.tuf-hover a.active {
    background: rgb(66,66,66);
    background: -webkit-linear-gradient(bottom, rgba(66,66,66,1) 0%, rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(bottom, rgba(66,66,66,1) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(to top, rgba(66,66,66,1) 0%, rgba(0,0,0,1) 100%);
    border-bottom: solid 8px #FFBF3B;
    display: block;
}

.tuf-hover a:hover h5,
.tuf-hover a.active h5{
    color:#f5ba00
}






/*-------------------- Menu 02 - Zoom Image----------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

.zoom{
    border: none;  
    cursor: pointer; 
    overflow: hidden;
    padding: 15px 0;
}

.zoom a{
    background: rgba(0,0,0,0.9);
}

.zoom img{
    transition: 0.5s;
    cursor: pointer;
}

.zoom:hover img{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.zoom h5{
    padding: 10px;
    font-weight: normal;
    margin: 0;
    text-align: center;
    color: #999;
    cursor: pointer;
    transition: 0.3s;
    z-index: 9999;
    background: rgba(0,0,0,0.9);
}

/*--Blue Zoom--*/
.blue-zoom a.active h5,
.blue-zoom:hover h5{
    color: #007bff;
}

/*--Red Zoom--*/
.red-zoom a.active h5,
.red-zoom:hover h5{
    color: #cc0c00;
}

/*--Purple Zoom--*/
.purple-zoom a.active h5,
.purple-zoom:hover h5{
    color: #bb00ff;
}

/*--Pink Zoom--*/
.pink-zoom a.active h5,
.pink-zoom:hover h5{
    color: #fc0281;
}

/*--Cyan Zoom--*/
.cyan-zoom a.active h5,
.cyan-zoom:hover h5{
    color: #10b8b0;
}


/*-------------------- Menu 03 - Skew----------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/


.skew h5{
    margin-bottom: 0;
    -webkit-transform: skewX(-25deg);
       -moz-transform: skewX(-25deg);
        -ms-transform: skewX(-25deg);
         -o-transform: skewX(-25deg);
            transform: skewX(-25deg);
}

.skew a{
    padding: 10px;
    text-align: center;
}

.skew{
    cursor: pointer;
    background-size: 200% auto;
    margin: 3px;
    -webkit-transform: skewX(25deg);
       -moz-transform: skewX(25deg);
        -ms-transform: skewX(25deg);
         -o-transform: skewX(25deg);
            transform: skewX(25deg);
}

/*--Blue Skew--*/

.blue-skew{
    border: 2px solid #007bff;
    color: #496DD3;
}

.blue-skew a.active,
.blue-skew:hover{
    color: #007bff;
    color: #fff;    
    background: #007bff;
    background: -webkit-linear-gradient(left,#007bff 0%,#0b4d94);
    background: -moz-linear-gradient(left,#007bff 0%,#0b4d94);
    background: -o-linear-gradient(left,#007bff 0%,#0b4d94);
    background: linear-gradient(to right,#007bff 0%,#0b4d94);
}

/*--Red Skew--*/

.red-skew{
    border: 2px solid #cc0c00;
    color: #cc0c00;
}

.red-skew a.active,
.red-skew:hover{
    color: #cc0c00;
    color: #fff;    
    background: #550003;
    background: -webkit-linear-gradient(right, #550003 0%,#C20011 );
    background: -moz-linear-gradient(right, #550003 0%,#C20011 );
    background: -o-linear-gradient(right, #550003 0%,#C20011 );
    background: linear-gradient(to left, #550003 0%,#C20011 );
}

/*--Purple Skew--*/

.purple-skew{
    border: 2px solid #bb00ff;
    color: #bb00ff;
}

.purple-skew a.active,
.purple-skew:hover{
    color: #bb00ff;
    color: #fff;    
    background: #7600FF;
    background: -webkit-linear-gradient(left,#C61AD6 0%,#7600FF);
    background: -moz-linear-gradient(left,#C61AD6 0%,#7600FF);
    background: -o-linear-gradient(left,#C61AD6 0%,#7600FF);
    background: linear-gradient(to right,#C61AD6 0%,#7600FF);
}

/*---Pink Skew--*/

.pink-skew{
    border: 2px solid #fc0281;
    color: #fc0281;
}

.pink-skew a.active,
.pink-skew:hover{
    color: #fc0281;
    color: #fff;    
    background: #fc0281;
    background: -webkit-linear-gradient(left,#fc0281 0%,#8c094b);
    background: -moz-linear-gradient(left,#fc0281 0%,#8c094b);
    background: -o-linear-gradient(left,#fc0281 0%,#8c094b);
    background: linear-gradient(to right,#fc0281 0%,#8c094b);
}

/*---Cyan Skew--*/

.cyan-skew{
    border: 2px solid #10b8b0;
    color: #10b8b0;
}

.cyan-skew a.active,
.cyan-skew:hover{
    color: #10b8b0;
    color: #fff;    
    background: #10b8b0;
    background: -webkit-linear-gradient(left,#10b8b0 0%,#135a59);
    background: -moz-linear-gradient(left,#10b8b0 0%,#135a59);
    background: -o-linear-gradient(left,#10b8b0 0%,#135a59);
    background: linear-gradient(to right,#10b8b0 0%,#135a59);
}


/*---Yellow Skew--*/

.yellow-skew{
    border: 2px solid #f5b901;
    color: #f5b901;
}

.yellow-skew a.active,
.yellow-skew:hover{
    color: #fff;  
    background: #f5b901;
    background: -webkit-linear-gradient(left,#f5b901 0%,#ab840b);
    background: -moz-linear-gradient(left,#f5b901 0%,#ab840b);
    background: -o-linear-gradient(left,#f5b901 0%,#ab840b);
    background: linear-gradient(to right,#f5b901 0%,#ab840b);
}



@media screen and (max-width: 500px) {

    .skew h5,
    .zoom h5{
        font-size: 1rem;
    }

}




/*-------------------- Menu 04 - Simple Line----------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/

.line{
    border: none;  
    cursor: pointer; 
    overflow: hidden;
    padding: 15px 0;
}

.line a{
    background: rgba(0,0,0,0.9);
}

.line img{
    transition: 0.5s;
    cursor: pointer;
}

.line:hover img{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.line h5{
    font-weight: normal;
    margin: 0;
    text-align: center;
    color: #999;
    cursor: pointer;
    transition: 0.3s;
    z-index: 9999;
    background: rgba(0,0,0,0.9);
}

/*--Blue line--*/
.blue-line a.active h5,
.blue-line:hover h5{
    color: #007bff;
}

/*--Red line--*/
.red-line a.active h5,
.red-line:hover h5{
    color: #cc0c00;
}

/*--Purple line--*/
.purple-line a.active h5,
.purple-line:hover h5{
    color: #bb00ff;
}

/*--Pink line--*/
.pink-line a.active h5,
.pink-line:hover h5{
    color: #fc0281;
}

/*--Cyan line--*/
.cyan-line a.active h5,
.cyan-line:hover h5{
    color: #10b8b0;
}


/*--Yellow line--*/
.yellow-line a.active h5,
.yellow-line:hover h5{
    color: #f5b901;
}