/* BLUE mode */
.mode-blue .icon-round,
.mode-blue hr.h1,
.mode-blue .Oval,
.mode-blue div#myBtn,
.mode-blue div#myBtn:hover,
.mode-blue div#myBtn:active,
.mode-blue #slogan,
.mode-blue .price .icon,
.mode-blue #contacts,
.mode-blue #contacts button:hover,
.mode-blue #contacts button:active,
.mode-blue .topbutton,
.mode-blue #services .slick-prev:active,
.mode-blue #services .slick-next:active,
.mode-blue #portfolio .slick-prev:active,
.mode-blue #portfolio .slick-next:active,
.mode-blue #brands .slick-prev:active,
.mode-blue #brands .slick-next:active {
    background-color: #008ECF;
}

.mode-blue div#myBtn:hover a,
.mode-blue div#myBtn:active a,
.mode-blue #services .item span.name,
.mode-blue #portfolio .slick-dots li button:before,
.mode-blue #contacts button,
.mode-blue #no_found span,
.mode-blue div#myBtn:hover a{
    color: #008ECF;
}

.mode-blue div#myBtn:hover,
.mode-blue div#myBtn:active,
.mode-blue #contacts button{
    border: solid 2px #008ECF;
}
.mode-blue #equipment .nav-tabs>li.active>a,
.mode-blue #equipment .nav-tabs>li.active>a:focus,
.mode-blue #equipment .nav-tabs>li.active>a:hover,
.mode-blue #equipment .nav-tabs>li.active>a:active,
.mode-blue #equipment .nav-tabs>li>a:hover{
    border-right: 4px solid #008ECF;
}

.mode-blue #services .icon.svg svg path,
.mode-blue #services .icon.svg svg polygon{
    fill: #008ECF;
}
.mode-blue #success-alert {
    border-top: 3px solid #008ECF;
    border-bottom: 3px solid #008ECF;
}

.mode-blue .button {
    background-color: #008ECF;
    color: #FFF;
}

@media (min-width: 1023px) {
    .mode-blue #portfolio .slick-prev:hover,
    .mode-blue #portfolio .slick-next:hover {
        background-color: #008ECF;
    }
    .mode-blue #services .slick-prev:hover,
    .mode-blue #services .slick-next:hover,
    .mode-blue #brands .slick-prev:hover,
    .mode-blue #brands .slick-next:hover{
        background-color: #008ECF;
    }
}

@media (min-width: 320px) and (max-width: 1023px)  {
    .mode-blue .navbar-default .navbar-toggle .icon-bar{
        background-color: #008ECF;
    }

    .mode-blue .navbar-default .navbar-nav>.active>a,
    .mode-blue .navbar-default .navbar-nav>.open>a,
    .mode-blue .navbar-default .navbar-nav>.active>a,
    .mode-blue .navbar-default .navbar-nav>.active>a:focus,
    .mode-blue .navbar-default .navbar-nav>.active>a:hover,
    .mode-blue #navbar-close{
        color: #008ECF;
    }
}
@media (min-width: 320px) and (max-width: 767px)   {

}

@media (min-width: 1024px) {
    /* services hover only for desktop */
    .mode-blue #services .item:hover {
        background-color: #008ECF;
    }
    .mode-blue #services .item:hover .pdf-icon-fill{
        fill: #008ECF;
    }
    /* /end services hover only for desktop */
}

/* GREEN mode */
.mode-green .icon-round,
.mode-green hr.h1,
.mode-green .Oval,
.mode-green div#myBtn,
.mode-green div#myBtn:hover,
.mode-green div#myBtn:active,
.mode-green #slogan,
.mode-green .price .icon,
.mode-green #contacts,
.mode-green #contacts button:hover,
.mode-green #contacts button:active,
.mode-green .topbutton,
.mode-green #services .slick-prev:active,
.mode-green #services .slick-next:active,
.mode-green #portfolio .slick-prev:active,
.mode-green #portfolio .slick-next:active,
.mode-green #brands .slick-prev:active,
.mode-green #brands .slick-next:active {
    background-color: #509E2F;
}

.mode-green #services .item span.name,
.mode-green #portfolio .slick-dots li button:before,
.mode-green #contacts button,
.mode-green #no_found span,
.mode-green div#myBtn:hover a{
    color: #509E2F;
}

.mode-green div#myBtn:hover,
.mode-green div#myBtn:active,
.mode-green #contacts button{
    border: solid 2px #509E2F;
}
.mode-green #equipment .nav-tabs>li.active>a,
.mode-green #equipment .nav-tabs>li.active>a:focus,
.mode-green #equipment .nav-tabs>li.active>a:hover,
.mode-green #equipment .nav-tabs>li.active>a:active,
.mode-green #equipment .nav-tabs>li>a:hover{
    border-right: 4px solid #509E2F;
}

.mode-green #services .icon.svg svg path,
.mode-green #services .icon.svg svg polygon{
    fill: #509E2F;
}
.mode-green #success-alert {
    border-top: 3px solid #509E2F;
    border-bottom: 3px solid #509E2F;
}

.mode-green .button {
    background-color: #509E2F;
    color: #FFF;
}

@media (min-width: 1023px) {
    .mode-green #portfolio .slick-prev:hover,
    .mode-green #portfolio .slick-next:hover {
        background-color: #509E2F;
    }
    .mode-green #services .slick-prev:hover,
    .mode-green #services .slick-next:hover,
    .mode-green #brands .slick-prev:hover,
    .mode-green #brands .slick-next:hover{
        background-color: #509E2F;
    }
}

@media (min-width: 320px) and (max-width: 1023px)  {
    .mode-green .navbar-default .navbar-toggle .icon-bar{
        background-color: #509E2F;
    }

    .mode-green .navbar-default .navbar-nav>.active>a,
    .mode-green .navbar-default .navbar-nav>.open>a,
    .mode-green .navbar-default .navbar-nav>.active>a,
    .mode-green .navbar-default .navbar-nav>.active>a:focus,
    .mode-green .navbar-default .navbar-nav>.active>a:hover,
    .mode-green #navbar-close{
        color: #509E2F;
    }
}
@media (min-width: 320px) and (max-width: 767px)   {

}

@media (min-width: 1024px) {
    /* services hover only for desktop */
    .mode-green #services .item:hover {
        background-color: #509E2F;
    }
    .mode-green #services .item:hover .pdf-icon-fill{
        fill: #509E2F;
    }
    /* /end services hover only for desktop */
}

/* PURPLE mode */
.mode-purple .icon-round,
.mode-purple hr.h1,
.mode-purple .Oval,
.mode-purple div#myBtn,
.mode-purple div#myBtn:hover,
.mode-purple div#myBtn:active,
.mode-purple #slogan,
.mode-purple .price .icon,
.mode-purple #contacts,
.mode-purple #contacts button:hover,
.mode-purple #contacts button:active,
.mode-purple .topbutton,
.mode-purple #services .slick-prev:active,
.mode-purple #services .slick-next:active,
.mode-purple #portfolio .slick-prev:active,
.mode-purple #portfolio .slick-next:active,
.mode-purple #brands .slick-prev:active,
.mode-purple #brands .slick-next:active {
    background-color: #702082;
}

.mode-purple #services .item span.name,
.mode-purple #portfolio .slick-dots li button:before,
.mode-purple #contacts button,
.mode-purple #no_found span,
.mode-purple div#myBtn:hover a{
    color: #702082;
}

.mode-purple div#myBtn:hover,
.mode-purple div#myBtn:active,
.mode-purple #contacts button{
    border: solid 2px #702082;
}
.mode-purple #equipment .nav-tabs>li.active>a,
.mode-purple #equipment .nav-tabs>li.active>a:focus,
.mode-purple #equipment .nav-tabs>li.active>a:hover,
.mode-purple #equipment .nav-tabs>li.active>a:active,
.mode-purple #equipment .nav-tabs>li>a:hover{
    border-right: 4px solid #702082;
}

.mode-purple #services .icon.svg svg path,
.mode-purple #services .icon.svg svg polygon{
    fill: #702082;
}
.mode-purple #success-alert {
    border-top: 3px solid #702082;
    border-bottom: 3px solid #702082;
}

.mode-purple .button {
    background-color: #702082;
    color: #FFF;
}

@media (min-width: 1023px) {
    .mode-purple #portfolio .slick-prev:hover,
    .mode-purple #portfolio .slick-next:hover {
        background-color: #702082;
    }
    .mode-purple #services .slick-prev:hover,
    .mode-purple #services .slick-next:hover,
    .mode-purple #brands .slick-prev:hover,
    .mode-purple #brands .slick-next:hover{
        background-color: #702082;
    }
}

@media (min-width: 320px) and (max-width: 1023px)  {
    .mode-purple .navbar-default .navbar-toggle .icon-bar{
        background-color: #702082;
    }

    .mode-purple .navbar-default .navbar-nav>.active>a,
    .mode-purple .navbar-default .navbar-nav>.open>a,
    .mode-purple .navbar-default .navbar-nav>.active>a,
    .mode-purple .navbar-default .navbar-nav>.active>a:focus,
    .mode-purple .navbar-default .navbar-nav>.active>a:hover,
    .mode-purple #navbar-close{
        color: #702082;
    }
}
@media (min-width: 320px) and (max-width: 767px)   {

}

@media (min-width: 1024px) {
    /* services hover only for desktop */
    .mode-purple #services .item:hover {
        background-color: #702082;
    }
    .mode-purple #services .item:hover .pdf-icon-fill{
        fill: #702082;
    }
    /* /end services hover only for desktop */
}

/* RED mode */
.mode-red .icon-round,
.mode-red hr.h1,
.mode-red .Oval,
.mode-red div#myBtn,
.mode-red div#myBtn:hover,
.mode-red div#myBtn:active,
.mode-red #slogan,
.mode-red .price .icon,
.mode-red #contacts,
.mode-red #contacts button:hover,
.mode-red #contacts button:active,
.mode-red .topbutton,
.mode-red #services .slick-prev:active,
.mode-red #services .slick-next:active,
.mode-red #portfolio .slick-prev:active,
.mode-red #portfolio .slick-next:active,
.mode-red #brands .slick-prev:active,
.mode-red #brands .slick-next:active {
    background-color: #D22630;
}

.mode-red #services .item span.name,
.mode-red #portfolio .slick-dots li button:before,
.mode-red #contacts button,
.mode-red #no_found span,
.mode-red div#myBtn:hover a{
    color: #D22630;
}

.mode-red div#myBtn:hover,
.mode-red div#myBtn:active,
.mode-red #contacts button{
    border: solid 2px #D22630;
}
.mode-red #equipment .nav-tabs>li.active>a,
.mode-red #equipment .nav-tabs>li.active>a:focus,
.mode-red #equipment .nav-tabs>li.active>a:hover,
.mode-red #equipment .nav-tabs>li.active>a:active,
.mode-red #equipment .nav-tabs>li>a:hover{
    border-right: 4px solid #D22630;
}

.mode-red #services .icon.svg svg path,
.mode-red #services .icon.svg svg polygon{
    fill: #D22630;
}
.mode-red #success-alert {
    border-top: 3px solid #D22630;
    border-bottom: 3px solid #D22630;
}

.mode-red .button {
    background-color: #D22630;
    color: #FFF;
}

@media (min-width: 1023px) {
    .mode-red #portfolio .slick-prev:hover,
    .mode-red #portfolio .slick-next:hover {
        background-color: #D22630;
    }
    .mode-red #services .slick-prev:hover,
    .mode-red #services .slick-next:hover,
    .mode-red #brands .slick-prev:hover,
    .mode-red #brands .slick-next:hover{
        background-color: #D22630;
    }
}

@media (min-width: 320px) and (max-width: 1023px)  {
    .mode-red .navbar-default .navbar-toggle .icon-bar{
        background-color: #D22630;
    }

    .mode-red .navbar-default .navbar-nav>.active>a,
    .mode-red .navbar-default .navbar-nav>.open>a,
    .mode-red .navbar-default .navbar-nav>.active>a,
    .mode-red .navbar-default .navbar-nav>.active>a:focus,
    .mode-red .navbar-default .navbar-nav>.active>a:hover,
    .mode-red #navbar-close{
        color: #D22630;
    }
}
@media (min-width: 320px) and (max-width: 767px)   {

}

@media (min-width: 1024px) {
    /* services hover only for desktop */
    .mode-red #services .item:hover {
        background-color: #D22630;
    }
    .mode-red #services .item:hover .pdf-icon-fill{
        fill: #D22630;
    }
    /* /end services hover only for desktop */
}

/* DARKBLUE mode */
.mode-darkblue .icon-round,
.mode-darkblue hr.h1,
.mode-darkblue .Oval,
.mode-darkblue div#myBtn,
.mode-darkblue div#myBtn:hover,
.mode-darkblue div#myBtn:active,
.mode-darkblue #slogan,
.mode-darkblue .price .icon,
.mode-darkblue #contacts,
.mode-darkblue #contacts button:hover,
.mode-darkblue #contacts button:active,
.mode-darkblue .topbutton,
.mode-darkblue #services .slick-prev:active,
.mode-darkblue #services .slick-next:active,
.mode-darkblue #portfolio .slick-prev:active,
.mode-darkblue #portfolio .slick-next:active,
.mode-darkblue #brands .slick-prev:active,
.mode-darkblue #brands .slick-next:active {
    background-color: #005691;
}

.mode-darkblue #services .item span.name,
.mode-darkblue #portfolio .slick-dots li button:before,
.mode-darkblue #contacts button,
.mode-darkblue #no_found span,
.mode-darkblue div#myBtn:hover a{
    color: #005691;
}

.mode-darkblue div#myBtn:hover,
.mode-darkblue div#myBtn:active,
.mode-darkblue #contacts button{
    border: solid 2px #005691;
}
.mode-darkblue #equipment .nav-tabs>li.active>a,
.mode-darkblue #equipment .nav-tabs>li.active>a:focus,
.mode-darkblue #equipment .nav-tabs>li.active>a:hover,
.mode-darkblue #equipment .nav-tabs>li.active>a:active,
.mode-darkblue #equipment .nav-tabs>li>a:hover{
    border-right: 4px solid #005691;
}

.mode-darkblue #services .icon.svg svg path,
.mode-darkblue #services .icon.svg svg polygon{
    fill: #005691;
}
.mode-darkblue #success-alert {
    border-top: 3px solid #005691;
    border-bottom: 3px solid #005691;
}

.mode-darkblue .button {
    background-color: #005691;
    color: #FFF;
}

@media (min-width: 1023px) {
    .mode-darkblue #portfolio .slick-prev:hover,
    .mode-darkblue #portfolio .slick-next:hover {
        background-color: #005691;
    }
    .mode-darkblue #services .slick-prev:hover,
    .mode-darkblue #services .slick-next:hover,
    .mode-darkblue #brands .slick-prev:hover,
    .mode-darkblue #brands .slick-next:hover{
        background-color: #005691;
    }
}

@media (min-width: 320px) and (max-width: 1023px)  {
    .mode-darkblue .navbar-default .navbar-toggle .icon-bar{
        background-color: #005691;
    }

    .mode-darkblue .navbar-default .navbar-nav>.active>a,
    .mode-darkblue .navbar-default .navbar-nav>.open>a,
    .mode-darkblue .navbar-default .navbar-nav>.active>a,
    .mode-darkblue .navbar-default .navbar-nav>.active>a:focus,
    .mode-darkblue .navbar-default .navbar-nav>.active>a:hover,
    .mode-darkblue #navbar-close{
        color: #005691;
    }
}
@media (min-width: 320px) and (max-width: 767px)   {
}

@media (min-width: 1024px) {
    /* services hover only for desktop */
    .mode-darkblue #services .item:hover {
        background-color: #005691;
    }
    .mode-darkblue #services .item:hover .pdf-icon-fill{
        fill: #005691;
    }
    /* /end services hover only for desktop */
}