@font-face {
    font-family: 'Kepler Std';
    font-style: normal;
    font-weight: 400;
    src: local('Kepler Std'), url('/wp-content/themes/see-design/font/KeplerStdRegular.woff') format('woff');
}
@font-face {
    font-family: 'Kepler Std';
    font-style: normal;
    font-weight: 700;
    src: local('Kepler Std'), url('/wp-content/themes/see-design/font/KeplerStd-BoldScnDisp.woff') format('woff');
}
@font-face {
    font-family: 'Kepler Std';
    font-style: italic;
    font-weight: 700;
    src: local('Kepler Std'), url('/wp-content/themes/see-design/font/KeplerStd-BoldScnItDisp.woff') format('woff');
}
@font-face {
    font-family: 'Kepler Std Light';
    font-style: normal;
    font-weight: normal;
    src: local('Kepler Std Light'), url('/wp-content/themes/see-design/font/KeplerStdLight.woff') format('woff');
}

:root {
  --bar-height: 3px;
  --bar-space: 12px;
  --transition-duration: 0.3s;
  --transition-step-duration: calc(var(--transition-duration) / 2);
}

/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style-type: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Additional Reset */
html {
    font-size: 16px; /* Set a default font size for easier rem calculations */
		font-family:'Kepler Std',sans-serif;
    font-weight:normal;
}

a{color:#000;text-decoration: none}


/* Basic Styles */
body {
    line-height: 1.6;
}

header{position:relative;background:#EFDA01;padding:40px 0 20px 0;z-index:1000}
header.open{padding-top:20px}
header nav{margin:0 0 0 0}
header nav ul{display:none;text-align: center;max-width:80%;margin:12px auto 0}
header.open nav ul{display:block}
header nav ul li{border-bottom:1px solid #ccb823;font-size:1.2em;padding:20px 0}
header nav ul li.current-menu-item{}
header nav ul li.login{border-bottom:0px;padding-bottom:0 }
header nav ul li.login a{padding-right:20px;background:url(/wp-content/themes/see-design/img/icon-login-hd.png) no-repeat right 0px;background-size: 12px 16px}
a.logo{display: block;background:transparent url(/wp-content/themes/see-design/img/logo-see-2025.png) no-repeat;background-size: contain;width:110px;height:61px;position:absolute;top:20px;left:calc(50% - 55px);rotate:-8deg;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);}
a.logo span{display:none}
header.open a.logo{position:static;margin:0 auto}
header nav ul li a:hover{color:#fd0011}

main{opacity: 0;transition: opacity 0.8s ease;}
main.show{opacity:1}

.button {
  scale:.5;
  position: absolute;

  display: block;
  width: 50px;
  height: 50px;
  padding: 0;

  background-color: transparent;
  outline: none;
  border: none;

  cursor: pointer;
  right:18px;
  top:4px;
  z-index:1000;
}

.button__bars {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 50px;
  height: var(--bar-height);

  background-color: #000;
  border-radius: var(--bar-height);

  transform: translate(-50%, -50%);
  transition: background 0s var(--transition-step-duration);

  &::before,
  &::after {
    position: absolute;
    left: 0;

    display: block;
    width: 100%;
    height: var(--bar-height);

    background-color: #000;
    border-radius: var(--bar-height);
    content: "";

    transition-delay: var(--transition-step-duration), 0s;
    transition-duration: var(--transition-step-duration),
      var(--transition-step-duration);
  }

  &::before {
    top: calc(-1 * (var(--bar-height) + var(--bar-space)));

    transition-property: top, transform;
  }

  &::after {
    bottom: calc(-1 * (var(--bar-height) + var(--bar-space)));

    transition-property: bottom, transform;
  }
}

.button--open {
  .button__bars {
    background: none;

    &::before,
    &::after {
      transition-delay: 0s, var(--transition-step-duration);
    }

    &::before {
      top: 0;

      transform: rotate(45deg);
    }

    &::after {
      bottom: 0;

      transform: rotate(-45deg);
    }
  }
}


.stars{text-align: center;position:relative}
.stars .vid video{position:absolute;width:100%;height:100%;top:0;left:0;object-fit: fill;}
.stars .vid {padding-top:120px;position:relative;padding-top:45px}

.stars .intro{margin-bottom:0px;position:relative;z-index:10}
.stars .intro .container{max-width: 670px;margin:0 auto}

.stars .intro .frame{padding:0 20px}
.stars .intro h1{font-size:2.5em;line-height: 1em;}
.stars .intro p{font-size:1.25em;margin:0 auto;padding:0 25px}
.stars .mob_carousel{display:flex;flex-direction:row;padding:0 10px;justify-content: space-between;flex-wrap: wrap;align-items:flex-end;margin-top:66px}
.stars .clients_slide{display:none;flex-direction:row;padding:0 20px;justify-content: space-between;flex-wrap: wrap;align-items:flex-end;margin-top:66px}
.stars .clients_slide .togrow{width:48%;position:relative;align-content:flex-end}
.stars .clients_slide .overlay{position:relative;--myOpacity:0}
.stars .clients_slide .overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: var(--myOpacity);
  /*transition: opacity 0.3s ease;*/
  pointer-events: none;
}
 .clients_slide .over_bg{position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url(/wp-content/themes/see-design/img/gradient_bg2.png) repeat-x bottom left;
 pointer-events: none;/* click goes through */
 z-index: 1000;
}


.stars .clients_slide h2,.stars .clients_slide a{font-family: "Kepler Std Light",'Kepler Std',sans-serif;color:#fff;display:block;max-width:140px;margin:0 auto;font-size:1em;line-height:1.125em}
.stars .clients_slide .overlay img{display:block;width:100%;filter: brightness(50%)}
.stars .clients_slide div.container{position: absolute;width:100%;height:100%;text-align:center;z-index:100;top:0px;padding:0 20px}
.stars .clients_slide div.container h2{display: none}
.stars .clients_slide div.container span{display:flex;width:60%;height:60px;align-items:center;margin:40px auto 0px}
.stars .clients_slide div.container span.txt{margin:10px auto 0px;width:100%}
.stars .clients_slide div.container span img{max-width:100%;max-height:50px}
.stars .mob_carousel .container{width:48%;padding:0;color:#fff;position:relative;margin-bottom:10px}
.stars .mob_carousel .container span{display: block;max-width: 80%;height:80px;margin:0 auto;position:relative;z-index:2}
.stars .mob_carousel .container span img{max-width: 100%;max-height:100%}
.stars .mob_carousel .overlay{display:block;position:absolute;top:0;width: 100%;height:100%;background-color:rgba(0,0,0,.6)}
.stars .mob_carousel a{color:#fff;font-size:1.125em;position:relative;z-index:2;margin-top:0px;display:block}
.stars .mob_carousel a img{max-width: 100%;display:block;margin:0 auto}
.fading_text{height:360px;display:flex;align-items:center;justify-content: center;opacity:0}
.fading_text .smaller{}
.stars .intro h1 span.smaller{display:inline-block;font-size:0.6666em;line-height:1em}
/*.fading_text .frame{display:none}
.fading_text .fade{display:none}*/


/*.glow{
  color: #000;
  text-shadow:
    0 0 5px #EFDA01,
    0 0 10px #e6d527,
    0 0 20px #f0e359,
    0 0 40px #f5ec8a,
    0 0 80px #f7f3c7;
  transition: text-shadow 2s ease;
}*/

.numbers{position:relative;text-align: center;z-index:1;overflow:hidden;display:flex;flex-direction: row;margin:0 auto;justify-content: space-between;align-items:start;padding:0 10px}
.numbers div{width:31%}
.numbers div span{display:block}
.numbers div.b1{background:#EFE8D1 url(/wp-content/themes/see-design/img/tassels.png)no-repeat bottom left;background-size: contain;padding:0px 0 100px}
.numbers div.b1 h3{font-size:2.5em;line-height:1em;margin-top:10px}
.numbers div.b1 h3 span{font-size:0.45em;line-height: 1em;margin-top:10px}
.numbers div.b2 h3{font-size:5.25em;line-height:1em;margin-top:10px}
.numbers div.b2 h3 span{font-size:0.225em;line-height: 1em;margin-top:10px}
.numbers div.b2{background:#ecd62f url(/wp-content/themes/see-design/img/ybg.gif)no-repeat bottom left;background-size: contain;padding:40px 0 120px}
.numbers div.b1 img,.numbers div.b3 img{max-width:70%;margin:0 auto}

/*#slider{display:flex;flex-direction:row;flex-wrap:wrap;justify-content: space-between;padding:40px}*/
#slider .quote{text-align:center;width:100%;margin:0 auto}
#slider .quote p span{font-size:0.6666666666666666em;line-height:1.25em;display:block;margin-top:20px}
#slider .quote p span a:hover{text-decoration: underline;border:0px}
#slider .quote div.cl{display:flex;flex-direction:row;align-items: flex-start;justify-content:space-around;margin-top:30px}

#slider .quote div.cl > :last-child {
  align-self: flex-end;
  margin-bottom:35px       /* overrides just the last item */
}

#slider .quote .cl img{display:block;width:10%}
#slider .quote .cl p{display:block;width:65%;font-size:1.25em;line-height: 1.25em;margin-bottom: 30px;}

#clients_quote {
  position: relative;
  width: 100%;
 /*  max-width: 600px; */
  margin: 50px auto; /* Center on page */
  overflow: hidden;

}

#sliderWrapper {
  overflow: hidden;
  width: 100%;
}

/* ===== Flex‐based Slider ===== */
#slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

.slide footer {
  font-size: 0.9rem;
  color: #555;
}

.slide div.inner{
  display:block;
  width:85%;
  margin:0 auto;
  background: #f9f9f9;
  padding:50px 10px 20px;
  box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important
}

.slide div.inner .star_img{scale:.7}

/* ===== Arrow Buttons ===== */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,1);
  color: #fff;
  border: none;
  padding: 10px 8px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease-out;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  z-index: 10;
  user-select: none;
  display:none;
}

.arrow--prev {
  left: 10px;
}

.arrow--next {
  right: 10px;
}

.arrow:hover {
  color:#000;
  background-color: #EFDA01
}


.starfield {

  height: 100%;
  width: 100%;
}
.starfield-origin {

}

#clients_logos h2{font-size:2.5em;text-align:center;margin-top:40px}
.client-list-box{padding:30px;text-align:center}
.client-list-box .clients-list .hide{display:none}
.client-list-box .clients-list .show{display:flex;flex-wrap:wrap;justify-content: center;align-items:center}
.clients-list{text-align: center;margin-top:40px;display:flex;flex-wrap: wrap;justify-content: center;align-items:center}
.clients-list a{width:25%;margin-bottom:40px;filter:grayscale(1);}
.clients-list a:hover{filter:grayscale(0);}

.clients-list a img{max-width:60%;max-height:130px;display:block;margin:0 auto}
.clients-list a.smaller img{max-width:45%}
.clients-list .hide{display:none}
.services{text-align: center;padding:48px 40px}
.services.col2.alt{background-color:#f6f6f6}
.services h1{font-size:1.875em;line-height: 1.25em;margin-bottom:40px}
.services p,.services ul li{font-size:1.4375em}
.services ul li::marker {color:red}
.services ul li a{border-bottom:1px solid #d1d1d1}
.services ul li a:hover{border-bottom:1px solid #fd0011}
.services ul {list-style-type: square;padding-left:18px;text-align:left;margin-top:40px}
.services.main{background-color:#f6f6f6}
.textual{position:relative;text-align:center;clear:right;margin-bottom:40px;padding:0 20px}

#project-59 .textual,#project-419 .textual{padding:0}
#gallery image {
  transition: opacity 0.2s ease;
}

#gallery image:hover {
  opacity: 0.6;
  cursor: pointer;
}

.services img,.casestudy{max-width: 100%}
.services img.desktop,.services img.mobile{max-width:100%}
.services img.mobile{margin:40px auto 0}
.services .over{position:static;/*text-align:left*/}
.services.col2 .myimg video{max-width:100%;max-height:650px}

.casestudy{padding-top:100px}
.casestudy.main{padding-top:40px}
.casestudy.main .textual::before{content:"+";font-size:1.5em}
.casestudy.results{padding-top:100px}
.casestudy .textual .over{text-align:center;padding:0 20px;margin-bottom:40px}
.casestudy h1{font-size:2.25em;display:inline-block;margin-bottom:25px;line-height:1.25em}
.casestudy .sentence h1{font-size:2em;}
.casestudy h2{font-size:2em;display:inline-block;margin-bottom:20px}
.casestudy.results .sentence {display:none;text-align:center;margin:0 auto}

.casestudy p{font-size:1.3125em;margin:10px 0 40px;display:none}
.casestudy p.post-excerpt{display:block}
.casestudy .mycontent p{display: block}
.casestudy .mycontent figure a{display:inline-block}
/*.casestudy .mycontent figure.full a{display:block}*/
.casestudy .mycontent figure.full{width:100%}
.casestudy .mycontent figure.full img{max-width: 100%}
.casestudy .mycontent figure.notfull{width:auto;max-width: 100%;margin:0}

.casestudy .mycontent figure.notfull img{max-width: 100%}


.casestudy .mycontent figure.full{display:block}
.casestudy .mycontent figure.full{width:100%;max-width: 100%}


.casestudy .logo{display:none;position:relative;width:100%;margin-left:auto;margin-right:auto;transform-origin: top center;}
.casestudy .logo.mobile{display:block;position:relative;margin:15px auto 60px;}
.casestudy ul.categories li{font-family: "Kepler Std Light";background:#ededed;display:inline-block;padding:7px 9px 4px;font-size:0.75em;margin:0 13px 13px 0;transition: background-color 0.3s ease;text-transform:uppercase;letter-spacing:1px}
.casestudy ul.categories li.active,.casestudy ul.categories li.active:hover{background-color:#eedb03;}
.casestudy ul.categories li:hover{background-color:#dcdbdb;}
.casestudy img{margin-bottom:40px;max-width: 100%;width:100%}
.casestudy .logo.mobile img{display:block;position:relative;margin-left:auto;margin-right:auto;width: auto}

.casestudy .logo.mobile img{margin-bottom:25px}
.casestudy ul.categories li:active{background-color:#000;color:#fff}
.casestudy ul.categories li:active a{color: #fff}
.casestudy ul.wp-block-list{text-align:center;margin:0;list-style-type: square;list-style-position: inside;}
.casestudy ul.wp-block-list li{font-size:1.25em}
ul.cats{margin-top:50px}

.projects{padding:40px 20px;background: #F0E9D4}
.projects div a.hide{display:none;/*opacity:0;visibility:hidden;position:absolute;*/}
.projects div a{opacity:1;overflow:hidden;}
.projects div a:hover{opacity:1}
.projects div a img{width: 100%;height:100%;display:block}

.team .main_area{padding:60px;text-align:center;display:block}
.team .main_area img{width:100%}
.team .main_area h2{font-size:2em;padding-bottom:1em;margin-bottom:1em;border-bottom:2px dotted red}
.team .main_area h2 span{font-size:0.7em;display:block;color:#808285}
.team .main_area p{font-size:1.25em}
.team_list{background:#E7E9E8;display:flex;flex-wrap: wrap;justify-content: space-around;max-width:100%;padding:40px 20px;text-align:center}
.team_list li img{width:50%}
.team_list li{width:45%;margin-bottom:25px;padding-bottom:10px;cursor:pointer;}
.team_list li h2{font-size:1.3125em;width:70%;margin:0 auto;}
.team_list li h2 span{font-size:0.6em;display:block;color:#808285;}
.team_list li p{display:none}
.team_list li.active h2{border-bottom:2px dotted red;padding-bottom:20px}
.team_list li .hr{width:80%}

.wpcf7-form.init label{width:100%; max-width:inherit;}
.wpcf7-not-valid-tip{font-size: 0.875em;}
.wpcf7-response-output{display:none}
.cf7-highlight input,
.cf7-highlight textarea,
.cf7-highlight select {
  border-color: #b6b6b6 !important; /* change to your desired color */
}

.contact{padding-top:110px}
.contact h1{font-size:1.875em;}
.contact .intro{max-width: 100%;margin: 0 auto 60px;text-align: center}
.contact .intro p{font-size:1.25em;}
.contact .myform{max-width: 90%;margin:0 auto}
.contact .myform .flex{display:block;margin: 0 auto 30px;}
.contact label{font-weight:bold;font-size:1.25em}
.contact input,.contact textarea{padding:13px 13px 11px 13px;margin-bottom:15px;font-family:'Kepler Std',sans-serif;width:90%;border:1px solid #ececec;border-radius:6px; }
.contact input.wpcf7-not-valid,.contact textarea.wpcf7-not-valid{border:1px solid #fd0011;}
.wpcf7-not-valid-tip{display:none}
.contact textarea{max-width:90%;height: 204px;}
.contact .cta_bl{display:block;border:0px;padding:20px 35px 18px;width:120px;font-size:1.25em;border-radius: 0px;margin:0 auto 20px}
.contact .col{max-width: 100%;text-align:center}
.contact input::placeholder,.contact textarea::placeholder{font-size:0.875em;text-align:center;opacity:.8;transition: opacity 0.3s;}

.contact input:focus::placeholder,.contact textarea:focus::placeholder{
  opacity:.4;
}

.contact input:focus-visible,.contact textarea:focus-visible {
  outline:none;
  border-color: #fd0011;
}

footer{background-color: #484647;color:#fff;text-align: center;padding:30px 10px;}
footer p{font-size:1.25em}
footer h1{font-size:3.125em;margin:45px 0 20px}
footer .charity:hover,footer .links a:hover{text-decoration:underline;}
div.hr{width:95%;margin:0 auto;display:block;height:2px;margin-bottom:20px}
div.hr.hr1 hr{ display: block;height: 2px;border: 0;border-top: 2px dotted red;margin: 1em 0}
div.hr.hr1.mb35{margin-bottom:35px}
div.hr.hr2.mt35{margin-top:35px}
div.hr.hr2 hr{ display: block;height: 2px;border: 0;border-top: 2px dotted #504f4f;margin: 1em 0}
.desc div.hr{margin:1em auto}
.final,.rholdings{font-size:0.75em;color:#646466}
.rholdings{color:#646466;margin-bottom:20px}
.links a{color:#646466; font-size:0.875em;margin-right:20px}

ul.socials{padding-left:0;display:flex;flex-direction:row;list-style: none;flex-wrap:wrap;justify-content:space-between;align-items:center;}
ul.socials li{width:30%}
ul.socials img{margin:0 auto;display:block}
/*ul.socials li.rl a{display:block;width:128px;height:37px;}
ul.socials li.sh a{display:block;width:122px;height:44px;}

ul.socials li.tt a{display:block;width:134px;height:40px;}*/
.social_icons{margin-top:2px}
.social_icons a.li{display:inline-block;width:20px;height:20px;background:url(/wp-content/themes/see-design/img/icon-in.png)no-repeat;background-size:contain;margin-right:20px}
.social_icons a.ig{display:inline-block;width:20px;height:20px;background:url(/wp-content/themes/see-design/img/icon-ig.png)no-repeat;background-size:contain}


br.mobile_only{display:block}
br.desktop_only{display:none}
.cta_bl{display:inline-block;margin:45px auto 0;background:#000;color:#fff;font-size:1.25em;padding:20px 35px 18px;transition: all 0.2s ease-out;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);}
.cta_bl.mr20{margin-right:0px}
.cta_bl:hover{background:#EFDA01;color:#000}
.cta_bl.no_margin{margin:0 auto}
.ac{text-align:center}
.ac .cta_bl{margin:45px auto 45px}
.cta_wh{display:inline-block;margin:15px auto 0;background:#fff;color:#808285;font-size:1.25em;padding:19px 34px 17px;border:1px solid #808285;transition: all 0.2s ease-out}
.cta_wh:hover{color:#000;border:1px solid #000;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);}
/*.cta_wh:hover{background:#EFDA01;color:#000}*/
.sme-clients.hide{display:none}
.desktop{display:none}
.desktop-only{display:none}
.mobile{display:flex}

.my-slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.my-slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: clamp(300px, 60vw, 700px);
  perspective: 1000px;
  overflow: visible;
  touch-action: pan-y;
}

/*.my-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0;
  pointer-events: none;
}*/
.my-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s ease, opacity 0.6s ease;
  opacity: 0.5;
}

.my-slide img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  /*border-radius: 12px;*/
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  display: block;
  object-fit: contain;
  cursor: pointer;
}

.my-slide.my-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotateY(0deg);
  z-index: 3;

}

.my-slide.my-prev {
  opacity: 0.6;
  transform: translate(-80%, -50%) scale(0.8) rotateY(25deg);
  z-index: 2;
}

.my-slide.my-next {
  opacity: 0.6;
  transform: translate(-20%, -50%) scale(0.8) rotateY(-25deg);
  z-index: 2;
}

.my-controls {

  display: none;

}

.my-btn {
  background: rgba(255,255,255,0.85);
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.3s, transform 0.15s;
}
.my-btn:hover { background: white; }
.my-btn:active { transform: scale(0.96); }

/* Overlay popup */
.my-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: #000; /* solid black to avoid color bleed */
  z-index: 99999;
  padding: 20px;
  box-sizing: border-box;
}

.my-overlay.open { display: flex; }

/* When the actual image element is moved into the overlay we add this class */
.casestudy img.my-in-overlay {
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  width: auto;
  height: auto;
  /*border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);*/
  cursor: auto;
  display: block;
  margin-bottom:0
}


.my-placeholder {
  display: block;
  visibility: hidden; /* keeps space but invisible */
}

.animation-container{display:flex;width:100%;text-align:left;}
.has-inline-color.has-black-color{color:black;margin-bottom:10px;display:block}
.has-black-color{}

@media (max-width: 480px) {
  .my-slider {
    height: clamp(400px, 80vw, 500px);
  }
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

#popupContent iframe{display:block;width:100%;height:100vh}
#popupContent{width:85%}
.casestudy.main p a{text-decoration:underline;text-decoration-color:#cacaca}
.casestudy.main p a:hover{color:red}

/* Preloader overlay */
#preloader {
  position: fixed;
  top: 0; /* below the topbar */
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
}

/* Loader animation */
.loader {
  border: 6px solid #333;
  border-top: 6px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@media only screen and (min-width: 540px) {
  .cta_bl.mr20{margin-right:20px}
  .casestudy .cta_bl.mr20{margin-right:0px}
}

/* Mobile-first styles */
@media only screen and (min-width: 900px) {
    /* Styles for screens wider than 600px */
    ul.cats{margin-top:0px}
    .ml20{margin-left:20px}
    .cta_wh.ml20{margin-left:0}
    .mr20{margin-right:20px}
    .casestudy .cta_bl.mr20{margin-right:20px}
    header{padding:60px 0 15px 0;transform:all }
    header.scrolled {position:fixed;width:100%;padding:0 0 15px}
		main.scrolled{padding-top:120px}
    header nav{max-width:50%;margin:0 0 0 auto}
    header nav ul,header nav ul.open{display:flex;justify-content:space-around;flex-direction:row}
    header nav ul li{border-bottom:0px;padding-bottom: 5px;line-height: 1em;}

    header nav ul li,header nav ul li a{display:block;position:relative}
    header nav ul li.current-menu-item::after,.more-clients::after{

      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;

      /* customize */
      --dot-size: 3px;     /* square size */
      --dot-gap: 6px;     /* distance between starts of squares */
      --dot-color: red;

      height: var(--dot-size);

      background:
        linear-gradient(
          to right,
          var(--dot-color) 0 var(--dot-size),   /* solid red block */
          transparent var(--dot-size) var(--dot-gap) /* then space */
        )
        bottom left / var(--dot-gap) var(--dot-size) repeat-x;

      pointer-events: none;

    }
    .more-clients::after{--dot-color: grey;}


    header.scrolled nav ul li{}
    a.logo{width:220px;height:122px;position:absolute;transform: translateY(50px);left:110px;top:0;transition: all 0.2s ease-out}
    header.scrolled a.logo{width:110px;height:61px;transform: translateY(18px);top:8px}
	/*	header.scrolled a.logo{transform-origin: top left;transform:scale(.5)}*/
    .burger_menu{display:none}
    .stars{padding-top:0px}
    .stars .vid {position:relative;padding-top:0px}
    .stars .intro{margin-bottom:0px;padding-top:80px}
    .stars .intro h1{font-size:3em;margin-bottom:66px}
    .stars .intro p{font-size:1.4375em}
    .stars .clients_slide{margin-top:0;display:flex;position:relative;}
    .stars .mob_carousel{margin-top:0;display:none}
    .stars .clients_slide .togrow{width:15%;cursor: pointer}
    .numbers{padding: 0px}
    .numbers div{flex: 0 1 auto;width:20%;}
    .numbers div:first-child{margin-left:110px}
    .numbers div:last-child{margin-right:110px}
    .numbers div.b1 h3{font-size:3.75em}
    .numbers div.b2 h3{font-size:9.375em}

    #slider .quote .cl p{display:block;width:45%;font-size:1.875em;line-height: 1.5em;margin-bottom: 30px}
    .client-list-box{padding:0 70px 40px}
    .clients-list a{width:23%}
    .services{padding:80px 0 40px 100px}
    .services h1,.contact h1{font-size:3em}
    .services .over{position:absolute;text-align:left}
    .services.main .desktop{display:block;float:right;width:90%}
    .services.main .mobile{display:none}
    .services.col2{display:flex;justify-content:space-between; }
    .services.col2 .textual{text-align:left;width:45%}
    .services.col2 .myimg{width:45%;margin-right:20px;text-align:right}
    .services.col2 .myimg video{max-width:90%;max-height:650px}
    .services.col2 .myimg.myvideo{text-align:center}
    .services.col2.alt{background-color:#f6f6f6;flex-direction: row-reverse}
    .contact .intro{max-width: 620px;margin: 0 auto 60px;text-align: center;}
    .contact .intro p{font-size:1.25em;}
    .contact .myform .flex{display:flex;justify-content:space-between;max-width: 600px;margin: 0 auto 30px;}
    .contact label{font-weight:bold;font-size:1.25em}
    .contact input,.contact textarea{font-size:0.875em;text-align:center;padding:13px 13px 11px 13px;margin-bottom:15px;font-family:'Kepler Std',sans-serif }
    .contact textarea{max-width:250px;height: 210px;}
    .contact .col{max-width: 280px}
    .casestudy,.contact{padding-top:100px}
    .casestudy .textual .over{text-align:left;padding:0 130px}
    .casestudy.main .textual .over{text-align:left;padding:0 150px}
    .casestudy.results .textual{margin-bottom:0}
    .casestudy.results .textual .over{margin-bottom:17px}
    .casestudy h1{font-size:3em;display:inline-block;margin-bottom:55px;max-width:450px}
    .casestudy.results h1{max-width:100%;line-height:1em;margin-bottom:75px}

    .casestudy .sentence h1{margin-bottom:30px;margin-top:45px}
    .casestudy h2{font-size:2em;display:inline-block;margin-bottom:55px;margin:0 150px 40px;text-align:left;}
    .casestudy p{font-size:1.4375em;margin:10px 150px 40px;display: block;text-align:left}
    .casestudy p.mt35.ml150{margin:35px 0 30px;}
    .casestudy p.post-excerpt{margin:10px 0 40px}
    .casestudy.results h1{font-size:2.25em;line-height: 1em}
    .casestudy.results p{margin-bottom:45px}
    .casestudy.results ul{margin-bottom:0px}
    .casestudy .logo{display:block;position:absolute;right:50px;top:5px;width:auto;transform-origin: top right;}
    .casestudy .logo.mobile{display:none}
    .casestudy ul.categories li{display:inline-block;background:#ededed;padding:7px 9px 4px;font-size:0.75em;}
    .casestudy ul.wp-block-list{text-align:left;margin:0 150px}
    .casestudy ul.wp-block-list li{font-size:1.4375em}
    .casestudy img{margin-bottom:40px}
    .logo img{margin-bottom:0}
    .team_list li{width:25%}
    .team .main_area{display:flex;justify-content: space-around;text-align:left;align-items:center}
    .team .main_area .img{width:35%}
    .team .main_area .desc{width:50%}
    .team .main_area h2{font-size:3em;padding-bottom:20px;border-bottom:2px dotted red;margin-bottom:20px}
    .team .main_area h2 span{font-size:0.7em;display:block;color:#808285}
    .team .main_area p{font-size:1.25em}
    .projects{padding:40px 150px;background: #F0E9D4}
    br.mobile_only{display:none}
    br.desktop_only{display:block}
    .cta_bl{margin:60px auto 0}
    .cta_bl.mr20{margin:60px 20px 0 0}
    .cta_bl.ml20{margin:60px 0 0 20px}
    .results .cta_bl{margin:0px auto 45px}
    .results .cta_bl.mb75{margin:0px auto 75px}
    .desc div.hr{margin:0 0 20px 0}
    .fading_text{height:280px}

    footer p{font-size:1.4375em}
    .final,.rholdings{font-size:0.875em;}
    .my-controls {
      position: absolute;
      bottom: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }
    .casestudy.main .textual::before{content:""}
    .casestudy.main{padding-top:100px}
    .services p,.services ul li{font-size:0.875em}
    .casestudy.results .sentence {text-align:left}
    /*.services.col2 p,.services.col2 ul li{font-size:1em}*/
    .animation-container{display:block}
    div.hr{width:70%}
    .projects div a{opacity:.4;}
    .services p,.services ul li{font-size:1.125em}
    .desktop-only{display:block}
    #popupContent iframe{display:block;width:700px;height:100vh}
    #popupContent{width:auto}
    .mb40{margin-bottom:80px}
    .wp-block-video{width:100%;padding:0 150px}
    .slide div.inner .star_img{scale:1}
    .numbers div.b2 h3 span {font-size:0.18em}
    #st-irene{background:url(/wp-content/themes/see-design/img/laptop.png) no-repeat;background-size:cover;max-width:1050px;height:640px;background-position:center;margin:0 auto;position:relative}
    #st-irene iframe{position:absolute;top:-40px;left:0;scale:.7}
    #project-240{background:url(/wp-content/themes/see-design/img/stirene_bg_web.jpg) no-repeat; background-position:bottom center;background-size: cover;}
    .slide div.inner{width:65%}
    #project-240 .textual{margin-bottom:0px;padding-bottom:40px}
    .arrow{display:block}
    .numbers div.b1{padding-bottom:100px}
    .numbers div.b2{padding-bottom:120px}
    .casestudy .mycontent figure.notfull{width:auto;max-width: 100%;margin:0 150px 40px}
}


@media only screen and (min-width: 970px) {
  .stars .clients_slide h2,.stars .clients_slide a{font-size:1.125em;line-height:1.125em}
  #clients_quote {margin: 100px auto;}
  .casestudy h1{max-width:500px}
  .casestudy.results h1{max-width:100%}
}

@media only screen and (min-width: 1065px) {
  .services p,.services ul li{font-size:1.125em}
  div.hr{width:60%}
  .cta_wh.ml20{margin-left:20px}
  .casestudy h1{max-width:600px}
  .casestudy.results h1{max-width:100%}

}
@media only screen and (min-width: 1200px) {
  .services p,.services ul li{font-size:1.25em}
  header nav ul{max-width:600px;justify-content:flex-end;gap:45px;margin:0 50px 0 auto }
  header nav ul li{font-size:1.3em;}
  .casestudy h1{max-width:730px}
  .casestudy.results h1{max-width:100%;margin-bottom:45px}

}
@media only screen and (min-width: 1320px) {
  .services p,.services ul li{font-size:1.4375em}
    .casestudy h1{max-width:100%}
    .numbers div.b1{padding-bottom:140px}
    .numbers div.b2{padding-bottom:160px}
}

@media only screen and (min-width: 1600px) {
  .services p,.services ul li{font-size:1.4375em}
    .casestudy h1{max-width:100%}
    .numbers div.b1{padding-bottom:160px}
    .numbers div.b2{padding-bottom:210px}
}

/*----------------
Extented Client List
------------------*/

.more-clients{
display:inline-block;
position: relative;
text-align:center;
font-size:1.3125em;
line-height: 1em;
text-decoration: none;
margin-top:25px;
cursor:pointer;
margin-bottom:0px;
padding-bottom:5px;
padding-right:2px
}

.less-clients{
display:none;
text-align:right;
font-size:11px;
font-style:italic;
text-decoration:underline;
margin-top:8px;
cursor:pointer;
}


/*----------------
SME Clients List
----------------*/

.sme-clients{
display:flex;flex-direction: row;
margin-top:20px;
text-align:center;
font-size:13px;
text-decoration:underline;
margin-top:18px;
cursor:pointer;
line-height:20px;
}

.sme-clients a{
text-decoration:none;
display:inline-block;
padding:0 0 0 0;
margin:0 0 6px 0;
border-bottom:1px solid #999;
color:#999;
font-size:14px;
}

.sme-clients a:hover{
display:inline-block;
padding:0 0 0 0;
margin:0 0 6px 0;
border-bottom:1px solid #3b3a37;
color:#3b3a37;
text-decoration:none;
}
.sme{
width:50%;
}

.sme{
width:50%;
}