/*----------------------------------

Color CSS file

Main Color: #0C7ABF

Include it after main stylesheet:

<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/agen-color-1.css">

------------------------------------*/

a,a:hover,
a:focus,
.primary,
#main-nav .nav .active > a,
#main-nav .nav a:hover,
.features .icon,
.features .media:hover h4,
.member-details .title,
.project-item .hover-mask .fa:hover,
.close-preview,
.pricing .item .btn,
.pricing .item.featured .btn:hover,
#map-address:hover,
#main-footer .social-links li:hover a,
.modal-content .close:hover,
.contact-item .icon,
.btn.transparent,
.btn.transparent:focus,
.btn.white,
.btn.white:focus,
.btn.white.transparent:hover,
.btn.white.transparent:active
{
    color:#0C7ABF;
}

#page-loader span,
.color-bg,
.overlay-color:before,
.team-member .member-socials li a:hover,
#filter-works ul li.active a,
#filter-works ul li:hover a,
.project-item .hover-mask,
#project-slider .flex-control-paging li a:hover,
#project-slider .flex-control-paging li a.flex-active,
.pricing .item.featured,
.pricing .item .btn:hover,
#main-footer .mc-newsletter .btn:hover,
.btn,
.btn:focus,
.btn.white:hover,
.btn.white:active,
.btn.transparent:hover,
.btn.transparent:active,
.btn.transparent:focus{
    background:#0C7ABF;
}

.btn.transparent:hover,
.btn.transparent:active,
.btn.transparent:focus{
    color: #fff;
}


.features .icon {
    border-bottom-color:#0C7ABF;
    border-right-color:#0C7ABF;
}

#filter-works ul li.active a,
#filter-works ul li:hover a,
#project-slider .flex-control-paging li a,
.btn.transparent,
.btn.transparent:focus{
    border-color:#0C7ABF;
}

#main-nav .btn{
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 300;
    margin:15px 0 0;
}

#main-nav .btn:hover{
    background: #056AaF;
}

#main-nav{
    visibility: hidden;
    opacity: 0;
}
#main-nav.is-sticky{
    visibility: visible;
    opacity: 1;
}

.drop-shadow{
    box-shadow: 0 0 30px 3px rgba(0,0,0,0.6);
}

.text-gray{
    color: #abacad;
}

.sales{
    margin:40px 0;
    font-size: 1.3em;
}

.sales .primary{
    color: #313131;
    font-size: 1.4em;
    font-weight: 400;
}

.reg-price{
    margin-top: 10px;
}

.reg-price .price{
    position: relative;
}

.reg-price .price:after{
    display: block;
    position: absolute;
    content: '';
    top:50%;
    left: 50%;
    height: 3px;
    width:100px;
    background: #F25454;
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    transform: translate(-50%,-50%) rotate(-45deg);
}

.one-price p{
    margin:10px 0;
    font-size: 128px;
    line-height: 1;
    color:#0C7ABF;
}

#themes h2{
    font-weight: 600;
}

.img-link{
    position: relative;
    display: block;
    top:0;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.img-link:hover{
    top:-10px;
    opacity: 0.6;
}

@media (max-width:767px){
    #main-nav .site-logo{
        margin-top: 8px;
        max-width: 150px;
        height: auto;
    }

    #main-nav .text-right{
        position: absolute;
        right: 15px;
        top: 2px;
    }

    #main-nav .btn{
        font-size: 12px !important;
    }

    #themes img{
        margin-bottom: 40px; 
    }

    [class*=col-] + [class*=col-]{
        margin-top: 40px;
    }

    .section-description{
        margin-bottom: 80px;
    }

    .padding-top-bottom{
        padding: 80px 0;
    }

    #home{
        background: url(../images/bundle-banner-sm.jpg) !important;
        background-position: 50% 0 !important;
        background-size: cover !important;
    }
    
    body,p{
        line-height: 1.4;
    }
    .img-link{
        top:0 !important;
    }
}