.base-color {
    color: #a6a6a6 !important;
}

.site-main-nav .navbar-nav {
    margin-left: 0 !important;
}

.site-main-nav .navbar-nav .nav-item {
    border-left: 0;
}

.site-main-nav .navbar-nav .nav-item .nav-link {
    font-size: 16px;
    color: #a6a6a6;
    -webkit-transition: color 800ms ease;
    -moz-transition: color 800ms ease;
    -ms-transition: color 800ms ease;
    -o-transition: color 800ms ease;
    transition: color 800ms ease;
}

.site-main-nav .navbar-nav .nav-item .nav-link:hover {

    color: #f5b819;
}

.search-form .form-control {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    height: 30px;
    background: #a6a6a6;
    -webkit-transition: background 800ms ease;
    -moz-transition: background 800ms ease;
    -ms-transition: background 800ms ease;
    -o-transition: background 800ms ease;
    transition: background 800ms ease;
}

.search-form .form-control:focus {
    background: #fff;
}

.top-menu {
    border: 0 !important;
}

.topbar {
    background: #fff !important;
}

.header-logo {
    min-width: 20%;
    min-height: 20%;
}

.out-links {
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.out-links .link-item {
    max-width: 10rem;
    margin-left: 2%;
}

body.scroll .top-menu {
    /*background: {{ $data['website']->colors->layout_background }}     !important;*/
}

.sp-footer {
    margin-top: 2%;
    background: url('/template-front/business-royan-spicefic-2019/royan-footer.png') no-repeat;
    /*-webkit-background-size: cover;*/
    /*background-size: cover;*/
    height: 225px;;

}

.sp-footer .box {

    max-height: 55px;
    padding: 0 4%;
}

.sp-footer .royan-footer-icon {
    /*max-width: 300px;*/
    /*max-height: 300px;*/
}

.sp-footer .s-links {
    /*max-width: 300px;*/
    /*max-height: 300px;*/
    position: absolute;
    bottom: 0;
    left: 15px;
}

.blue-line {
    background: #0081a0;
    height: 2px;
}

.blog-tabs .tab-content {
    padding-top: 0 !important;
}

.blog-tabs .nav-pills {
    justify-content: flex-start;
}

.blog-tabs .nav-pills {
    position: relative;
}

.blog-tabs .nav-pills .nav-item .tab-pill {
    margin: 0 !important;
    -webkit-border-radius: 0 0 15% 15% / 0 0 60% 60% !important;
    -moz-border-radius: 0 0 15% 15% / 0 0 60% 60% !important;
    border-radius: 0 0 15% 15% / 0 0 60% 60% !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-right: 2rem !important;
    padding-left: 0.75rem !important;
    box-shadow: -2px 0px 2px 0px #565656;
    color: #fff;
    position: absolute;
}

.blog-tabs .nav-pills .nav-item:nth-last-of-type(odd) .tab-pill {
    background: #b3b5b8;
}

.blog-tabs .nav-pills .nav-item:nth-last-of-type(even) .tab-pill {
    background: #939598;
}

.introduction .blog-tabs ul.nav-pills li.nav-item a.active, .blog-tabs .tab-pill:hover {
    -webkit-border-radius: 0 0 15% 15% / 0 0 60% 60% !important;
    -moz-border-radius: 0 0 15% 15% / 0 0 60% 60% !important;
    border-radius: 0 0 15% 15% / 0 0 60% 60% !important;
    background: #0081a0 !important;

    z-index: 20 !important;
}

.blog-tabs .blog-yield {
    margin-top: 35px !important;
}

.blog-tabs .blog-fig {
    margin-top: -9px !important;
}

.multi-col .row .box .col-circle {
    position: relative;
    width: 180px;
    line-height: 200px;
    height: 180px;
}

.multi-col .row .box .col-circle .fa {
    color: #b3b5b8;
    transition: color 800ms ease;
}

.multi-col .row .box .col-circle:before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    border-top: 10px solid #c33;
    border-right: 10px solid #c33;
    border-left: 10px solid #297acc;
    border-bottom: 10px solid #297acc;
    width: 180px;
    height: 180px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transition: transform 800ms linear,
    border-top-color 800ms linear,
    border-right-color 800ms linear,
    border-bottom-color 800ms linear,
    border-left-color 800ms linear;
    /*transform: rotate(135deg);*/
}

.multi-col .row .box:first-child .col-circle:before {
    border-top-color: #00a859 !important;
    border-right-color: #00a859 !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    transform: rotate(42deg);
}

.multi-col .row .box:first-child:hover .col-circle:before {
    color: #00a859;
    border-bottom-color: #00a859 !important;
    border-left-color: #00a859 !important;
    transform: rotate(0deg);
}

.multi-col .row .box:first-child:hover .fa {
    color: #00a859;
}

.multi-col .row .box:nth-child(2) .col-circle:before {
    border-top-color: #f5b819 !important;
    border-right-color: #f5b819 !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    transform: rotate(136deg);
}

.multi-col .row .box:nth-child(2):hover .col-circle:before {
    border-bottom-color: #f5b819 !important;
    border-left-color: #f5b819 !important;
    transform: rotate(0deg);
}

.multi-col .row .box:nth-child(2):hover .fa {
    color: #f5b819;
}

.multi-col .row .box:nth-child(3) .col-circle:before {
    border-top-color: #0081a0 !important;
    border-right-color: #0081a0 !important;
    border-bottom-color: #0081a0 !important;
    border-left-color: #0081a0 !important;
    transform: rotate(136deg);
}

.multi-col .row .box:nth-child(3):hover .fa {
    color: #0081a0;
}

.multi-col .row .box:nth-child(4) .col-circle:before {
    border-top-color: #00a859 !important;
    border-right-color: #00a859 !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    transform: rotate(-45deg);
}

.multi-col .row .box:nth-child(4):hover .col-circle:before {
    border-bottom-color: #00a859 !important;
    border-left-color: #00a859 !important;
    transform: rotate(0deg);
}

.multi-col .row .box:nth-child(4):hover .fa {
    color: #00a859;
}

.multi-col .row .box:last-child .col-circle:before {
    border-top-color: #0081a0 !important;
    border-right-color: #0081a0 !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    transform: rotate(-137deg);
}

.multi-col .row .box:last-child:hover .col-circle:before {
    border-bottom-color: #0081a0 !important;
    border-left-color: #0081a0 !important;
    transform: rotate(0deg);
}

.multi-col .row .box:last-child:hover .fa {
    color: #0081a0;
}

.royan-title {
    max-width: 20%;
}

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

    .top-menu .nav-item .nav-link {
        display: flex;
        justify-content: center;
    }

    .top-menu .nav-item .nav-link .fa {
        margin-left: 5%;
    }

    .topbar .part-3 {
        display: none;
    }

    .topbar .part-1 {
        padding: 0 !important;
        max-width: 20%;
    }

    .topbar .part-2 {
        padding: 0;
    }

    .header-logo {
        width: 60%;
        height: auto;
    }

    .topbar .part-1 .icons {
        flex-flow: column !important;
        align-items: flex-end;
    }

    .topbar .part-1 .icons a {
        margin: 0 !important;
    }

    .topbar .items {
        flex-flow: row-reverse;
    }

    .site-main-nav .navbar-nav .nav-item {
        padding: 0 !important;
        border-bottom: 1px ridge #abababa8;
    }

    .blog-tabs .blog-yield {
        margin: 0 !important;
    }

    .blog-tabs .blog-fig {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 !important;
    }

    .blog-tabs .fake-col {
        flex: 0 0 0%;
        width: 0%;
        display: none;
    }

    -blog-style {
        flex: 0 0 100%;
        width: 100%;
    }

    .blog-tabs.blue-line {
        position: relative;
    }

    .blog-tabs .nav-pills {
        display: flex !important;
        flex-wrap: wrap;
        flex-flow: column;
    }

    .blog-tabs .nav-pills .nav-item {
        margin-top: -1%;
    }

    .blog-tabs .nav-pills .nav-item .nav-link {
        position: relative !important;
        right: 0 !important;
        -webkit-border-radius: 0 0 7% 7% / 0 0 60% 60% !important;
        -moz-border-radius: 0 0 7% 7% / 0 0 60% 60% !important;
        border-radius: 0 0 7% 7% / 0 0 60% 60% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .introduction .blog-tabs ul.nav-pills li.nav-item a.active, .blog-tabs .tab-pill:hover {
        -webkit-border-radius: 0 0 7% 7% / 0 0 60% 60% !important;
        -moz-border-radius: 0 0 7% 7% / 0 0 60% 60% !important;
        border-radius: 0 0 7% 7% / 0 0 60% 60% !important;
    }

    .introduction .blog-tabs ul.nav-pills li.nav-item .collapse {
        margin: 20px 0;
    }

    .sp-footer {
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        height: 100px;
    }

    .sp-footer .s-links .list-inline {
        margin: 0 !important;
    }

    .sp-footer .s-links .list-inline .list-inline-item .fa {
        font-size: 1rem;
    }

    .royan-title {
        max-width: 50%;
    }
}