/*
Theme Name: Scarinish
Author: Submarine Ltd
Author URI: http://submarine.studio/
Description: Scarinish Theme
Version: 1.0
*/

div,h1,h2,h3,h4,h5,h6,p,address,ul,ol,li,a,img,meta {margin: 0; padding: 0; border: 0;}
ul,li {list-style-type: none;}


div {display:block;}

body {
  margin:0;
  padding:0;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  overflow: auto;
  font-size: 18px;
  font-family: "nimbus-sans", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #fff;

}


::selection {background: #6262FF; color: #FFACAC} ::-moz-selection {background: #6262FF; color: #FFACAC}

h1, h2, h3, h4 {font-size:1em; line-height: 1em; font-weight: 300;}
p {font-size:1em; line-height: 1.4em; margin-bottom: 20px;}
a {text-decoration: none; color: #fff}
:focus, :active {outline: none;}
blockquote {color: #000 !important}

* {
    cursor: none !important;
}

#custom-cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 172, 172);
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  display: block;
  z-index: 9999999999;

}


#custom-cursor.hover {
  width: 15px;
  height: 15px;
  background-color: #6262FF;
  mix-blend-mode: normal;
}

.big a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 2px;
    background: #fff;
    transition: width .3s;
}
.big a:hover::after {
  width: 100%;
}

.navDesktop a {text-transform: uppercase; color: #FFACAC !important; font-size: 1.11em !important;}
.betaDesktop a {font-size: 1.13em !important; color: #6262FF !important; font-weight: 900; font-style: italic; text-transform: uppercase; }


.navDesktop a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #FFACAC;
    transition: width .3s;
}
.navDesktop a:hover::after {
  width: 100%;
}

.betaDesktop a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #6262FF;
    transition: width .3s;
}
.betaDesktop a:hover::after {
  width: 100%;
}

#elementor-popup-modal-71 .dialog-close-button {bottom: 15px !important; top: auto;}
ul.mobNavLinks {text-align: center;}
ul.mobNavLinks li {margin-bottom: 10px;}
ul.mobNavLinks a {font-size: 2.22em; text-transform: uppercase; color: #FFACAC;}

ul#nav {position: relative; display: block; float: left; margin: 40px 0 0 40px}
ul#nav li {display: inline-block; margin-right: 36px; font-size: 0.8em}
a.logo img {position: absolute; width: 400px; top: 15px; left: 50%; margin-left: -250px; z-index: 99}
button.navOpen {position:fixed; width:65px; height:65px; top: 20px; left:40px; border:none; cursor: pointer; z-index: 99999;}

.elementor-nav-menu li {width:fit-content}
.menu-item a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 2px;
    background: #fff;
    transition: width .3s;
	bottom: -10px;
}
.menu-item a:hover::after {
  width: 100%;
}

.big p {font-size: 2.67em; line-height: 1em;}

.big h1 {font-size: 10em;}
.small h1 {font-size: 5em; line-height: 0.9em;}

.copy h1 {margin-bottom: 20px; font-weight: 500;}
.copy h2 {margin-bottom: 20px; font-weight: 500;}
.copy h3 {margin-bottom: 20px; font-weight: 500;}

.copy p a {border-bottom: 1px solid; padding-bottom: 2px}
.copy ul {margin-left: 5px; margin-bottom: 20px}
.copy li {list-style-type: decimal; margin-bottom: 5px; margin-left:20px;}
.copy strong {font-weight: 500; font}

.homeCopy h1, .homeCopy h2 {font-size: 1.6em; margin-bottom: 20px; font-weight: 500;}
.homeCopy p {font-size: 1.6em;}

.studioLists ul li {margin-bottom: 10px;}



/* Homepage */

.uppercaseHeader h2 {text-transform: uppercase; font-size: 2.75em;}

.homeWorkLink a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #fff;
    transition: width .3s;
}
.homeWorkLink a:hover::after {
  width: 100%;
}

/* Pages */

.projectFeedTitle p {font-size: 1.67em;}

.betaTitle h1 {font-size: 3.33em; color: #6262FF; font-weight: 900; font-style: italic; text-transform: uppercase;}
.betaIntro p {color: #6262FF;}
.betaIntro h3 {color: #6262FF; text-transform: uppercase; margin-bottom: 20px;}
.betaCopy p {color: #6262FF;}
.betaProjectTitle h2 {color: #6262FF; text-transform: uppercase; font-size: 3.33em;}

.testimonial p, .projectPageCta p {font-size: 1.67em; }
.testimonial p a {border-bottom: 1px solid;}
.projectPageCta a {border-bottom: 1px solid #fff; padding-bottom: 2px}

.award a {border-bottom: 1px solid #fff; padding-bottom: 2px;}

.contact ul li {margin-bottom: 15px;}
.contact a {border-bottom: 1px solid; padding-bottom: 2px}

.fourOhFour p {font-size: 10em; font-weight: 900; font-style: italic; line-height: 1em;}

.projectSubTitle {margin-top: 10px;}

.introMedium p {font-size: 30px;}
.introMedium h1 {font-size: 30px; margin-bottom: 20px;}


/* Footer */

#footer li, #footer a {color: #251E27;}
#footer p {margin-bottom: 0;}

.footerCta a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 2px;
    background: #251E27;
    transition: width .3s;
}
.footerCta a:hover::after {
  width: 100%;
}

.cta a {font-size: 1.2em; border-bottom: 2px solid;}

.callToAction p {color: #251E27;}
.callToAction a {color: #251E27 !important; text-transform: uppercase; font-size: 3.4em !important;}




.elementor-element .swiper .elementor-swiper-button {top: auto !important; bottom: -60px}
.elementor-element .swiper .elementor-swiper-button-prev {left: 150px !important}
.elementor-element .swiper .elementor-swiper-button-next {right: 150px !important}

.servicesList li {margin-bottom: 5px;}

.elementor-gallery-item {background:#2D2641; padding:15%;}

.clientList li {margin-bottom: 50px;}
.clientList li a {display: inline-block;}

/*
.clientList li a::after {   
  content: '';
    display: block;
    width: 0px;
    height: 1px;
    background: #fff;
    transition: width .3s;
}
.clientList li a:hover::after {
  width: 100%;
}
*/

.clientList li a::after {
    background-image: url('images/white-link.svg');
    background-size: 12px 12px;
    display: inline-block;
    width: 12px; 
    height: 12px;
    content:"";
    margin-left: 10px;
}


.projectDetails {background: #2D2641;}
.projectDetails p {margin-bottom: 5px;}
.projectDetails a {text-decoration: underline !important; font-weight: 500;}
.projectDetails li {margin-bottom: 5px;}


@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

@media (max-width: 1600px) {


}

@media (max-width: 1250px) {


}

@media (max-width: 1024px) {

.elementor-element .swiper .elementor-swiper-button {top: auto !important; bottom: -60px}
.elementor-element .swiper .elementor-swiper-button-prev {left: 40px !important}
.elementor-element .swiper .elementor-swiper-button-next {right: 40px !important}


}

@media (max-width: 767px) {

body {font-size: 16px;}

.big p {font-size: 2em;}

.big h1 {font-size: 4em;}
.small h1 {font-size: 4em;}

.homeCopy h1, .homeCopy h2 {font-size: 1.3em;}
.homeCopy p {font-size: 1.3em;}

.uppercaseHeader h2 {text-transform: uppercase; font-size: 2em;}

.homeSectorTitle h2 {font-size: 2em;}

.projectFeedTitle p {font-size: 1.33em;}

.betaTitle h1 {font-size: 2.75em;}
.betaProjectTitle h2 {font-size: 2.75em;}

.callToAction a {font-size: 2.75em !important;}

.text-dark .esg-filterbutton {font-size: 2.75em !important; line-height: 0.8em !important;}
.eg-project-element-1 {font-size: 1.33em !important;}

.testimonial p, .projectPageCta p{font-size: 1.33em; }

.fourOhFour p {font-size: 4em;}


#footer li {margin-top: 10px;}
.elementor-element .swiper .elementor-swiper-button-prev {left: 15px !important}
.elementor-element .swiper .elementor-swiper-button-next {right: 15px !important}

}

@media (max-width: 643px) {

#custom-cursor {display:none}
* {
    cursor: auto !important;
}


}

@media (max-width: 320px) {


}