:root {
    /*********************************************************************************/
    /* COLORS */
    /* The color palette was taken from Open Color https://yeun.github.io/open-color */
    /*********************************************************************************/
    
    /* Common */
    --white: #ffffff;
    --black: #000000;
    
    /* Gray */
    --gray-0: #f8f9fa;
    --gray-3: #dee2e6;
    --gray-5: #adb5bd;
    --gray-8: #343a40;
    
    /* Blue */
    --blue-9: #1864ab;
    
    /* Red */
    --red-8: #e03131;
    --red-9: #c92a2a;
    
    /*********************************/
    /* BORDER RADIUS */
    /*********************************/
    --rounded-none: 0px;
    --rounded-sm: 2px;
    --rounded: 4px;
    --rounded-md: 6px;
    --rounded-lg: 8px;
    --rounded-xl: 12px;
    --rounded-2xl: 16px;
    --rounded-3xl: 24px;
    --rounded-full: 9999px;
    
    /****************************
    * TRANSITION DURATION
    *****************************/
    --transition-dur: 0.2s;
}

/**************************** 
* Common classes
*****************************/

/* Make figure invisible */
@media (max-width: 960px) {
    .uc-partners .invisible {
        display: none;
    }
}

/****************************
* Intro Block
*****************************/
@media (max-width: 1200px) {
    .uc-intro .samgtu-photo {
        display: none;
    }
}


/* Mobile Nav */
.uc-mobile-menu li {
    text-align: left;
}
    
.uc-mobile-menu nav {
    margin: 0;
}
    
/* Index Block */
.presentation {
    background-color: transparent;
    border: 1px solid var(--white);
    border-radius: var(--rounded);
    transition: background-color var(--transition-dur);
}
    
.tn-molecule:hover .presentation {
    background-color: var(--white);
}
    
.presentation__title {
    color: var(--white);
    transition: color var(--transition-dur);
}
    
.tn-molecule:hover .presentation__title {
    color: var(--gray-8);
}
    
.tn-molecule .presentation__icon svg path {
    stroke: var(--white);
    transition: stroke var(--transition-dur);
}
    
.tn-molecule:hover .presentation__icon svg path {
    stroke: var(--gray-8);
}

/* Feedback */    
@media (max-width: 1200px) {
    .feedback-bg-logo {
        display: none;
    }
}
    
.feedback-form .t-checkbox__control {
    display: flex;
    align-items: center;
}
    
.feedback-form a:link,
.feedback-form a:visited {
    color: var(--blue-9) !important;
    transition: color var(--transition-dur) !important;
}
    
.feedback-form a:hover,
.feedback-form a:active {
    color: var(--red-9) !important;
}
    
/*******************************
* Review block
********************************/
.uc-review-block .review {
    border: 1px solid var(--gray-3);
    border-radius: var(--rounded);
}
    
.uc-reviews .review-nav-button svg polygon {
    transition: fill var(--transition-dur);
    fill: var(--gray-3);
}
    
.uc-reviews .review-nav-button:hover svg polygon {
    fill: var(--gray-5);
}
    
.uc-reviews .review-nav-button:hover {
    cursor: pointer;
}
    
.uc-review-block {
    transition: opacity var(--transition-dur);
    opacity: 0;
}
    
.review-block--show {
    transition: opacity var(--transition-dur);
    opacity: 1;
}

/**************************
* Services Block
***************************/
.uc-services-preview .tn-molecule .details-arrow svg path,
.uc-services-preview .tn-molecule .services-arrow svg path {
    stroke-width: 2;
}

.uc-services-preview .tn-molecule .details-arrow svg path {
    stroke: var(--gray-0) !important;
}

.uc-services-preview .tn-molecule .services-arrow svg path {
    stroke: var(--red-9) !important;
}
    
.uc-services-preview .tn-molecule .details-arrow,
.uc-services-preview .tn-molecule .services-arrow {
    transition: transform var(--transition-dur);
}
    
.uc-services-preview .tn-molecule:hover .details-arrow,
.uc-services-preview .tn-molecule:hover .services-arrow {
    transform: translateX(2px);
}
    
.uc-services-preview .tn-molecule:hover {
    cursor: pointer;
}

/*************************
* For all service pages
**************************/
.service-icon svg path {
    stroke-width: 1;
    opacity: 0.3;
}

.feature-icon svg path {
    stroke-width: 1;
}

.uc-service-intro .service-icon svg path,
.uc-service-features .feature-icon svg path {
    stroke: var(--gray-0) !important;
}

.uc-service-advantage .service-icon svg path {
    stroke: var(--gray-8) !important;
}

.uc-service-features .feature-icon-ekv svg path,
.uc-service-features .feature-icon-ekv svg polygon {
    fill: var(--gray-0) !important;
}

@media (max-width: 960px) {
    .uc-service-features .feature-icon-ekv,
    .uc-service-intro .service-icon, 
    .uc-service-advantage .service-icon {
        display: none;
    }
}

/************************
* Footer
*************************/
.uc-footer .tn-molecule {
    color: var(--gray-8);
    fill: var(--gray-8);
    
    transition: color 0.2s, fill 0.2s;
}

.uc-footer .tn-molecule:hover {
    color: var(--red-9);
    fill: var(--red-9);
}

/*************************
* History page
**************************/
.uc-history-content .history-date svg path {
    fill: var(--gray-8) !important;
}

.uc-history-content .history-date-light svg path {
    fill: var(--gray-0) !important;
}

/**************************
* Cases page
***************************/
.uc-cases .tn-molecule,
.uc-services .tn-molecule {
    border: 1px solid #f1f3f5 !important;
    border-radius: 4px;
    transition: box-shadow 0.2s;
    background-color: #f8f9fa;
}
    
.uc-cases .tn-molecule:hover,
.uc-services .tn-molecule:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    cursor: pointer;
}
    
.uc-cases .tn-molecule .case-photo-preview,
.uc-services .tn-molecule .service-photo-preview {
    filter: grayscale(1);
    transition: filter 0.4s;
}
    
.uc-cases .tn-molecule:hover .case-photo-preview,
.uc-services .tn-molecule:hover .service-photo-preview {
    filter: grayscale(0);
}

/*************************
* Single Case page
**************************/
.uc-case-results .case-results-icon svg path {
    stroke: var(--red-9) !important;
    stroke-width: 8;
}

/*************************
* Contancts page
**************************/
.uc-management .tn-molecule .business-card {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
    
.uc-management .tn-molecule .phone-icon svg path,
.uc-management .tn-molecule .envelope-icon svg path {
    fill: var(--gray-0);
}

.uc-address .address-icon svg path {
    fill: var(--red-8);
}

/******************************
* Docs and Credentials page
*******************************/
.uc-docs .tn-molecule .docs-link {
    color: var(--gray-8);
    transition: color 0.2s;
}

.uc-docs .tn-molecule .outer-link svg path {
    fill: var(--gray-8);
    transition: fill 0.2s;
}

.uc-docs .tn-molecule:hover .docs-link {
    color: var(--red-9);
}

.uc-docs .tn-molecule:hover .outer-link svg path {
    fill: var(--red-9) !important;
}