/*
 Theme Name:   Lynkeos
 Description:  Custom theme
 Author:       Carnoustie Creative
 Author URI:   https://www.carnoustiecreative.co.uk
 Template:     baseline
 Version:      1.0.6
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  baseline-child

font-family:'DIN Next W01 Regular';
font-family:'DIN Next W01 Medium';
font-family:'DIN Next W01 Black';
font-family:'DIN Next W01 Cn Medium';
font-family:'DIN Next W01 Cn Bold';

*/

:root {
    --l-dim-grey: #696B6B;
    --l-yinmn-blue: #164F86;
    --l-antiflash-white: #E9ECEE;
    --l-black: #000000;
    --l-white: #FFFFFF;
    --l-light-grey: #A6AAA9;
    --l-gradient: linear-gradient(116.66deg, rgba(166, 170, 169, 0.99) 0.77%, #EFF0F0 99.32%);
}


body.baseline {
    --cde-edge-padding: 8rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.4;
    font-family:'DIN Next W01 Regular';
    font-size: clamp(1.7rem, 2vw, 2rem );
}

.baseline h1 {
    font-family:'DIN Next W01 Black';
    font-size: clamp(4.5rem, 4.5vw, 6rem); 
    line-height: 1.2;
}

.baseline .pagetitle h1,
.baseline.blog h1.pagetitle {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-size: clamp(3.9rem, 4vw, 5rem); 
}

.baseline.blog h1.pagetitle {
    margin-top: 3rem;
    margin-bottom: 4rem;
}

.flex-elm.pagetitle .inner,
.baseline.blog .before-content-page .textwidget {
    text-align: center;
}

.baseline .pagetitle h1:after,
.baseline.blog h1.pagetitle:after {
    content: "";
    width: 100%;
    height: 1.4rem;
    display: block;
    background-image: url('lynkeos-line3.png');
    background-repeat: repeat-x; 
    background-size: auto 100%;
}

.baseline h2,
.baseline h3,
.baseline h4 {
    font-family:'DIN Next W01 Black';
    line-height: 1.2;
}

.baseline h2 {    
    font-size: clamp(3.2rem, 3vw, 4.5rem);
    margin-bottom: 2rem;
}

.baseline h3 {    
    font-size: clamp(2.5rem, 1.8vw, 3rem);
    margin-bottom: 2rem;
}

.baseline h1 em {
    font-style: normal;
    color: var(--l-light-grey);
}

.header-wrap .container,
footer .container {
    width: 96%;
    max-width: 96%;
}

.widget-area.footer-bottom .custom-html-widget {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

@media ( max-width: 960px ) {

    .widget-area.footer-bottom .custom-html-widget {
        flex-wrap: wrap;
    }

}

.baseline header .custom-logo {
    width: 17rem !important;
}

.header-wrap .second {
    top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-wrap .second .menu {
    padding-left: 6rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media ( max-width: 980px ) {

    .header-wrap .second,
    .header-wrap .second .menu {
        display: none;
    }

}

.header-wrap .second .menu li.divider-before:after {
    content: "";
    display: block;
    height: 1rem;
    width: 0.5rem;
    border-left: 0.1rem solid #A6AAA9;
}

.header-wrap .second .menu li a,
footer .footer-side .menu li a {
    font-size: clamp(1.9rem, 1.6vw, 2rem);
    font-family:'DIN Next W01 Cn Medium';
    text-transform: uppercase;    
    letter-spacing: clamp(0.04rem, 0.3vw, 0.07rem);
}

.header-wrap .second .menu li a i {
    font-size: clamp(1.5rem, 1.5vw, 1.7rem);
    width: 1.7rem;
    display: block;
}

.header-wrap .second .menu li a:hover i {
    color: var(--l-yinmn-blue);
}

.header-wrap .second .menu li a {
    padding: 1rem 0;
    border-bottom: 0.2rem solid transparent;
    border-top: 0.2rem solid transparent;    
    color: var(--l-dim-grey);
}

.header-wrap .second .menu li.current-menu-item a,
.header-wrap .second .menu li a:hover {
    border-bottom: 0.2rem solid var(--l-yinmn-blue);
    text-decoration: none;
    color: #000;
}

.header-wrap .second .menu li.icon.current-menu-item a,
.header-wrap .second .menu li.icon a:hover {
    border-bottom: 0.2rem solid transparent;
    border-top: 0.2rem solid transparent;    
    color: var(--l-dim-grey);
}

footer .container .row:first-child {
    max-width: 120rem;  
    margin: 0 auto;
}

.baseline footer {
    padding-top: 4rem;
}

.widget-area.footer-bottom {
    margin-top: 6rem;
}

footer .row .six.columns:first-child {
    width: 70%;
    margin: 0 3% 0 0;
}

footer .row .six.columns:last-child {
    width: 27%;
    margin: 0;
}

@media ( max-width: 900px ) {

    footer .row .six.columns:first-child,
    footer .row .six.columns:last-child {
        width: 100%;
    }

}

.header-wrap .second .menu li.divider a {
    pointer-events: none;
    color: var(--l-dim-grey);
    opacity: 0.4;
}

.header-overlay .main .content {
    display: none;
}

@media ( min-width: 980px ) {

    .header-overlay .header-wrap {
        position: absolute;
        height: 10rem;
        width: 100%;
        z-index: 9;
        background-color: transparent;
    }

    .header-overlay .header-wrap:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 150%;
        display: block;
        background: linear-gradient(180deg, #000000 38.54%, rgba(0, 0, 0, 0) 100%);
    }

}

.header-overlay .header-wrap .second .menu li a {
    color: var(--l-white);
}

#home-hero {
    height: 90vh;
    min-height: 30rem;
} 

#home-hero .wrapper .container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100%;
    padding: 5rem;    
    max-width: 100%;
    width: 100%;
}

#home-hero .wrapper .inner {
    margin-left: 57%;
    display: inline-block;
}

@media ( max-width: 600px ) {

    #home-hero .wrapper .inner {
        margin-left: 0;
        display: inline-block;
    }

}

.baseline #home-hero h1 {
    line-height: 1;
    color: var(--l-white);
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.86);
}

#applications.flex-elm {
    padding: 10rem 0 10rem 0;
    background: var(--l-gradient);
}

.baseline #applications.flex-elm h2 {
    color: #fff;
}

#applications.flex-elm .before {
    padding-left: 4rem;
    border-left: 0.5rem dotted #fff;
    max-width: 40rem;
    margin-bottom: 5rem;
    padding-bottom: 3rem;
}

.icons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 8rem;
}

@media ( max-width: 800px ) {
    .icons {
        display: grid;
        grid-template-columns: 1fr 1fr ;
        grid-column-gap: 4rem;
    }
}

#applications .icon-img,
#applications .icon-text {
    padding-left: 4rem;
}

#applications .icon-text {
    margin-top: 3rem;
    border-left: 0.5rem dotted #fff;
    font-family:'DIN Next W01 Medium';
    color: #000;
    max-width: 20rem;
    line-height: 1.1;
}

.cde-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.baseline #how-does h2 {
    color: var(--l-dim-grey);
}

.baseline h3.upper {
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    font-family:'DIN Next W01 Cn Medium';
}

#how-does h3 {
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 0.5rem dotted var(--l-yinmn-blue);
}

.flex-elm.cde-two-cols.cols6040 .inner {    
    grid-template-columns: 54% 1fr;    
}

@media ( max-width: 980px ) {

    .flex-elm.cde-two-cols.cols6040 .inner {    
        grid-template-columns: 1fr;    
    }

}

.flex-elm#how-does {
    padding-top: 2rem;
}

#how-does .inner {    
    grid-gap: 4rem;
}

#how-does .left-col p {
    max-width: 50rem;
}

#how-does .right-col {
    margin-bottom: -11vw;
}

.baseline .wp-caption {        
    text-align: center;
    text-transform: none;
    font-size: 1.7rem;
}

#how-does figcaption {
    background: unset;
    margin-top: 2rem;
    margin-bottom: -4rem;
    color: #000;
}

#how-does figcaption:before {
    content: "\f05a";
    font-family: "Font Awesome 6 Pro";
    color: var(--l-yinmn-blue);
    margin-right: 0.8rem;
}

#how-does .right-col {
    border: 1.5rem solid var(--l-yinmn-blue);
    background-color: var(--l-white);
    padding: 4rem 5rem;
}

.has-more .inner p:last-child a,
.has-more .before p:last-child a {
    margin-top: 4rem;
    display: inline-block;
    text-decoration: none;
    font-family:'DIN Next W01 Cn Medium';
    text-transform: uppercase;
    border-bottom: none;
    font-size: 1.8rem;
    letter-spacing: 0.02rem;
}

.has-more .inner p:last-child a:after,
.has-more .before p:last-child a:after {
    content: "\f0a9";
    margin-left: 1rem;
    position: relative;
    font-family: "Font Awesome 6 Pro";
    color: var(--l-yinmn-blue);
    font-weight: 900;
    transition-duration: 0.3s;
}

.has-more .inner p:last-child a:hover:after,
.has-more .before p:last-child a:hover:after {
    margin-left: 1.8rem;
}

#about-header.flex-elm .wrapper {
    position: relative;
    min-height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--l-yinmn-blue);    
}

#about-header.flex-elm .cde-bgvid {    
    mix-blend-mode: multiply;
    filter: grayscale(1)
}

.baseline #about-header h2 {
    color:#fff;
    text-align: center;
}

@media ( max-width: 980px ) {

    .baseline #about-header h2 {
        margin: 0 15%;
    }

}

.baseline #about-header h2:after {
    content: "";
    display: block;
    margin-top: 3rem;
    height: 14rem;
    width: 0.5rem;
    margin-left: calc( 50% - 0.25rem );
    border-left: 0.5rem dotted var(--l-white);
}

#about-text.flex-elm {
    padding: 3rem 0;
}

#about-text.flex-elm .inner {
    max-width: 80rem;
    margin: 0 auto;
}

#menu-footer-line-2 li {
    margin-left: 4rem;
}

@media ( max-width: 600px ) {

    #menu-footer-line-2 li {
        margin: 0 3rem;
    }

    footer .first,
    footer .second {
        margin: 2rem 0;
    }

}

.baseline .button a, 
.baseline a.button, 
.baseline .mobile-nav li.button, 
.baseline button, 
.baseline input[type=reset], 
.baseline input[type=button], 
.baseline input[type=submit], 
.baseline .woocommerce-page.woocommerce #respond input#submit, 
.baseline .woocommerce-page.woocommerce a.button, 
.baseline .woocommerce-page.woocommerce button.button, 
.baseline  .woocommerce-page.woocommerce input.button {
    font-family:'DIN Next W01 Cn Medium';
    letter-spacing: 0.05rem;
    font-size: 1.7rem;
    padding: 1.4rem 3rem;
    line-height: 1.3;
}

.baseline footer .first li.button a,
.baseline footer .second li.button a {
    padding: 1.4rem 3rem;
    line-height: 1.3;
    display: block;
}

.baseline footer .first li.button,  
.baseline footer .second li.button {
    padding: 0;
}

.blog .main .content.container,
.archive .main .content.container,
.category .main .content.container {
    padding-top: 5rem;
}

.blog article h1,
.archive article h1,
.category article h1 {
    font-size: clamp(3.2rem, 3vw, 4.1rem);
}

.blog article,
.archive article,
.category article {
    padding: 3rem;
    background-color: var(--l-white);
    box-sizing: border-box;
    margin-bottom: 3rem;
}

.baseline .featured.left+.article-text-block, 
.baseline .featured.left.under+p {
    margin-left: 50%;
    width: 50%;
}

.blog h2.widgettitle,
.archive h2.widgettitle,
.category h2.widgettitle,
.single h2.widgettitle {
    font-family:'DIN Next W01 Cn Medium';
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 0.03rem;
    padding: 2rem;
    background-color: var(--l-yinmn-blue);
    color: var(--l-white);
}

.baseline .sidebar .widget {
    padding: 0;
    background-color: var(--l-light-grey);
}

.baseline .sidebar .widget ul,
.baseline .sidebar .widget select {
    margin: 2rem;
}

.baseline .sidebar .widget ul a {
    color: var(--l-white);
}

.animation-text-wipe {
    opacity: 0;
    -webkit-mask-image: linear-gradient(to left, #0000 25%, #000 75%);
    -webkit-mask-size: 500%;
}

.animation-text-wipe.animate-in {
    animation-name: text-wipe;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;    
}

.anim-delay-1 { animation-delay: 0.25s; }
.anim-delay-2 { animation-delay: 0.50s; }
.anim-delay-3 { animation-delay: 0.75s; }

/**
 * Safari has issues if you try to animate
 * mask-size, so we set that on the element
 * and only translate the position.
 */
@keyframes text-wipe {
    0% {
        opacity: 1;
        -webkit-mask-position: 100%;
    }

    100% {
        opacity: 1;
        -webkit-mask-position: 0%;
    }
}

.baseline video {
    height: 100%;
}

#menu-choices-side.expandable li.divider {
    display: none;
}

#home-case {
    padding: 4rem 0 4rem 4rem;    
    position: relative;
}

#home-case:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 1rem;
    border-left: 0.5rem dotted var(--l-yinmn-blue);
    height: 20rem;
}

#home-case .cde-shared-content > h2 {
    margin-bottom: 5rem;
}

.baseline .items-per-row-2 {
    grid-gap: 7rem;
}

@media ( max-width: 700px ) {

    .baseline .items-per-row-2 {
        grid-template-columns: 1fr;
    }

}

.box-menu-item {
    background-color: var(--l-yinmn-blue);
}

.box-menu-item h2 {
    position: relative;
    z-index: 3;
    padding: 1.5rem 2rem 1.5rem 4rem;
    margin-bottom: 0;
    background-color: var(--l-black);
    color: var(--l-white);
    display: inline-block;
    font-family:'DIN Next W01 Cn Medium';
    font-size: 2.5rem;
    text-transform: uppercase;
}

.box-menu-item p {
    padding: 2rem 4rem 4rem 4rem;
    color: var(--l-white);
    line-height: 1.4;
}

.baseline .cde-box-menu .box-menu-item .img {
    height: 28rem;
    margin-bottom: -3rem;
}

@media ( max-width: 700px ) {

    .baseline .cde-box-menu .box-menu-item .img {
        height: 23rem;
        margin-bottom: -3rem;
    }

}

footer .widget-area.footer-side .menu li {
    margin-bottom: 3rem;
}

.baseline .float-left {
    max-width: 70%;
}

.baseline .float-right {
    max-width: 30%;
}

header .ten.columns {
    margin-left: 2%;
    width: 84.6666666667%
}

footer .second .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Testimonials - grid/flickty */

.testi .flickity-viewport {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.testi .container {
    width: 100%;
    max-width: 100%;    
}

.testi .cde-grid-item {        
    width: 100%;        
    box-sizing: border-box;    
}

.testi .cde-grid-item-inner {    
    margin: 0 10%;    
    background-color: var(--l-yinmn-blue);                
    padding: 6rem;
    color: #fff;
    text-align: center;        
    display: grid;    
    grid-column-gap: 4rem;
}

.testi .flickity-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testi .cde-grid-item-inner .item-label {
    opacity: 0.8;
    font-size: 1.6rem;    
    text-transform: uppercase;
}

.testi .cde-grid-item-inner .item-subtitle {
    font-size: 1.7rem;
    max-width: 50rem;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.testi .cde-grid-item-inner .item-content {
    margin-left: 2rem;
    margin-right: 2rem;
    font-size: clamp(1.7rem, 3vw, 2rem);    
    position: relative;
}

.testi .cde-grid-item-inner .item-content:before {
    content: "";
    width: 4rem;
    height: 4rem;
    display: block;
    position: absolute;
    left: -2rem;
    top: -2rem;
    border-left: 0.2rem solid #fff;
    border-top: 0.2rem solid #fff;
    opacity: 0.3;
}

.testi .cde-grid-item-inner .item-content:after {
    content: "";
    width: 4rem;
    height: 4rem;
    display: block;
    position: absolute;
    right: -2rem;
    bottom: -1rem;
    border-right: 0.2rem solid #fff;
    border-bottom: 0.2rem solid #fff;
    opacity: 0.3;
}

.testi .xl .cde-grid-item-inner .item-content {
    font-size: clamp(2.3rem, 2vw, 3rem);
}

@media ( max-width: 720px ) {

    .testi .cde-grid-item-inner {
        margin: 0 2rem;
        padding: 3rem;
    }

    .testi .cde-grid-item-inner .item-label {
        font-size: 1.5rem;
    }

}

.testi .flickity-button {
    background: var(--l-black);
    color: #fff;
    border-radius: 0.5rem;    
}

.testi .item-image img {
    max-width: 25rem;
}

.testi .logo-smaller .item-image img {
    max-width: 15rem;
}

.testi.flex-elm.col-white .col-none p {
    background-color: transparent;
    color: #fff;
}

.testi .item-image {
    margin-bottom: 2rem;
}

.testi .item-content {
    margin-top: 3rem;
}

@media ( max-width: 720px ) {

    .cde-grid-list.testi.has-bgcolor:not(.col-none) {
        padding: 1rem 0;
    }

    .baseline .flickity-prev-next-button {
        width: 2rem;
        height: 2rem;
        padding: 2rem 2rem;
    }

    .testi .item-image img {
        max-width: 20rem;
    }

}


/* End of testimonials */


.blog article:first-child {
    margin-top: 0;
}

#home-case .box-menu-item {
    background-color: var(--l-dim-grey);
}

.flex-elm.narrow .inner {
    max-width: 80rem;
    margin: 0 auto;
}

.people ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

li.person {
    width: 30%;
    display: block;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.person_name h3 {
    font-family:'DIN Next W01 Cn Bold';
    margin-bottom: 0;
    text-align: center;
}

.person_photo {
    text-align: center;   
    position: relative; 
}

.person_photo img {    
    height: 20rem;
    width: auto;
    position: relative;
    display: inline-block;
}

.person_photo_wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.person_photo_wrap:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: -2rem;
    left: -1rem;
    background: var(--l-gradient);
    padding: 0rem 1rem 0rem 1rem;
    border-radius: 3.3rem;
}

.person_title {
    text-align: center;
    font-size: 1.7rem;
}

.person_bio {
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.3;
    max-width: 40rem;
    margin: 2rem auto 0 auto;
}

.person_name i {
    font-style: normal;
    font-size: 0.8em;
}

.cde-people .before {
    max-width: 80rem;
    margin: 0 auto 6rem auto;
}

.baseline .flex-elm figcaption {
    display: block;
}

.baseline .flex-elm figcaption:empty {
    display: none;
}

.baseline .flex-elm figure {
    position: relative;
}

.flex-elm.cosmic-muons {
    position: relative;
}

.flex-elm.cosmic-muons:before {
    content: "";
    display: block;
    width: 80%;
    top: -15rem;
    left: -15rem;
    height: 90rem;
    position: absolute;
    background-image: url('cosmic-muons.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    opacity: 0.7;
}

#what-muons .right-col {
    font-size: clamp(1.5rem, 1.8vw, 1.75rem );
}

#what-muons .right-col ul:last-child {
    margin-bottom: 0;
}

.big-video h2 {
    margin-bottom: 5rem;
}

.big-video iframe {
    width: 100%;
    aspect-ratio: 1 / 0.565;
    height: unset;
}

.baseline .flex-elm.cde-grid-list.services {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.services .cde-grid-item {
    border: 0.5rem solid var(--l-antiflash-white);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.services .item-image {
    margin-bottom: 1rem;
    text-align: center;
}

.services .before {
    max-width: 60rem;
    margin: 0 auto 2rem auto;
}

.services .item-label {
    text-align: center;
    font-size: 2.5rem;
    font-family:'DIN Next W01 Medium';    
    margin-bottom: 1rem;
}

.services .item-content {
    text-align: center;
}

.baseline .flex-elm.col-white .col-none h2,
.baseline .flex-elm.col-antiflashwhite  h2 {
    color: var(--l-yinmn-blue);
}

.baseline .cde-image-left-text-right .right .inner, 
.baseline .cde-text-left-image-right .left .inner {
    padding-right: 5rem;
    padding-left: 5rem;
}

.baseline .inner p:last-child {
    margin-bottom: 0;
}

.cde-gallery-grid.two-l-one-r .cols-two {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-rows: 30rem 30rem;
    grid-gap: 4rem;
}

.cde-gallery-grid.two-l-one-r .cols-two #cde-ps-img-1 {
    grid-row: span 2;
} 

.cde-gallery-grid.two-l-one-r .image-grid-wrap {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-column-gap: 4rem;
}

.cde-gallery-grid.two-l-one-r .image-grid-wrap ul {
    padding-top: 0;
}

.baseline .cde-two-cols .inner {
    grid-row-gap: 1rem;
}

.baseline .cde-text-left-image-right.no-left-pad .left .inner {
    padding-left: 3rem;
}


.cde-box-menu.items-per-row-1.style-1 {
    grid-row-gap: 5rem;
}

@media ( min-width: 600px ) {

    .cde-box-menu.items-per-row-1.style-1 a {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        grid-column-gap: 4rem;
    }
    
    .cde-box-menu.items-per-row-1.style-1 a .img {
        grid-row: span 2;
        height: 100%;
        min-height: 30rem;
    }
    
    .cde-box-menu.items-per-row-1.style-1 h2 {
        margin-top: 3rem;
        margin-left: -4rem;
        font-size: 3rem;
    }

    .cde-box-menu.items-per-row-1.style-1 a p {
        min-height: 15rem;
        padding-left: 0;
    }

}

.baseline.blog .featured.left {
    margin-right: 2.5rem;
}

h4.blue,
.has-bgcolor h4.blue {
    color: var(--l-yinmn-blue);
}

.case-image img {
    margin-bottom: 0;
    margin-top: 5rem;
}