@charset "UTF-8";

/* ====================== [ Changelog ] ====================== */

/* === 2024-04-07 ==== */

.body-link span {
  color: #8FF0FF;
  padding-bottom: 3px;
}

.body-link span:hover {
  padding-bottom: 3px;
  box-shadow: inset 0 -4px 0 rgb(143, 240, 255, 0.4); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  -webkit-box-shadow: inset 0 -4px 0 rgb(143, 240, 255, 0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: inset 0 -4px 0 rgb(143, 240, 255, 0.4);  /* Firefox 3.5 - 3.6 */
  /* border-bottom: 4px solid rgba(143, 240, 255, 0.4); */
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  z-index: 3;
}

.hamenu .logo {
    position: absolute;
    top: 8px;
    left: 60px;
}

.hamenu .menu-links .main-menu > li .link .fill-text {
  font-size: 30px;
  padding-bottom: 6px;
}

.hamenu .menu-links .main-menu > li .link .fill-text:hover {
  font-size: 30px;
  padding-bottom: 6px;
  box-shadow: inset 0 -4px 0 rgb(255, 255, 255, 0.2); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  -webkit-box-shadow: inset 0 -4px 0 rgb(255, 255, 255, 0.2);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow: inset 0 -4px 0 rgb(255, 255, 255, 0.2);  /* Firefox 3.5 - 3.6 */
  /* border-bottom: 4px solid rgba(143, 240, 255, 0.4); */
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
  z-index: 3;
}

.hamenu {
  background: #242424;
}

.hamenu .cont-info:after {
  background: #242424;
}

.hamenu .menu-links .main-menu > li .link {
  border-top: 1px solid rgba(36, 36, 36, 1);
}

.hamenu .menu-text:after {
  background: rgba(112, 112, 112, 1);
}

.hamenu .menu-links .main-menu > li:last-of-type .link {
  border-bottom: 1px solid rgba(36, 36, 36, 1);
}

  .parallax-slider-bg-01 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/property-pair.png);
    /* data-background="assets/imgs/works/full/property-pair.png" */
  }

  .parallax-slider-bg-02 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/massif-plank.png);
  }

  .parallax-slider-bg-03 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/footprint.png);
  }

  .parallax-slider-bg-04 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/burgess-shale.png);
  }

.full-showcase .parallax-slider .caption h1{
  font-size: 42px;
  font-weight: 300 !important;
  line-height: 52px;
  letter-spacing: 2px !important;
}

/* === Device Viewports ==== */

@media screen and (max-width: 611px) {

  .container {
    /* max-width: 590px; */
  }

  .container .logo {
    padding-left: 30px !important;
  }

  .hamenu .logo {
    left: 40px  !important;
  }

  .hamenu.open .logo {
    width: 70px !important;
    vertical-align: unset !important;
    top: 0px !important;
    left: 0px !important;
    margin-left: 46px !important;
    margin-top: 16px !important;
  }

  .hamenu .close-menu {
    text-align: right !important;
    padding-right: 10px !important;
  }

  .parallax-slider-bg-01 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/property-pair-mobile.png) !important;
    /* data-background="assets/imgs/works/full/property-pair.png" */
  }

  .parallax-slider-bg-02 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/massif-plank-mobile.png) !important;
  }

  .parallax-slider-bg-03 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/footprint-mobile.png) !important;
  }

  .parallax-slider-bg-04 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/burgess-shale-mobile.png) !important;
  }

  .full-showcase .parallax-slider .swiper-slide .valign {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;    
    -webkit-box-align: unset !important;
    -ms-flex-align: unset !important;
    align-items: unset !important;
    padding-top: 160px !important;
  }

  .sub-title{
    padding-left: 30px !important;
  }

  .full-showcase .parallax-slider .caption h1{
    font-size: 22px;
    font-weight: 300 !important;
    line-height: 32px;
    letter-spacing: 2px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .full-showcase .swiper-controls .swiper-button-prev {
    left: 50px !important;
  }

  .full-showcase .swiper-controls .swiper-button-prev i {
    font-size: 30px !important;
    font-weight: 600 !important;
    left: 0px !important;
    margin-left: 0px !important;
  }

  .full-showcase .swiper-controls .swiper-button-next {
    right: 50px !important;
  }

  .full-showcase .swiper-controls .swiper-button-next i {
    font-size: 26px !important;
    font-weight: 600 !important;
  }

}

@media only screen and (min-width: 612px) and (max-width: 999px) {

  .container {
    /* width: 700px !important; */
  }

  .container .logo {
    padding-left: 30px !important;
  }

  .hamenu .logo {
    left: 40px  !important;
  }

  .hamenu.open .logo {
    width: 70px !important;
    vertical-align: unset !important;
    top: 0px !important;
    left: 0px !important;
    margin-left: 46px !important;
    margin-top: 16px !important;
  }

  .hamenu .close-menu {
    text-align: right !important;
    padding-right: 10px !important;
  }

  .parallax-slider-bg-01 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/property-pair-mobile.png) !important;
    /* data-background="assets/imgs/works/full/property-pair.png" */
  }

  .parallax-slider-bg-02 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/massif-plank-mobile.png) !important;
  }

  .parallax-slider-bg-03 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/footprint-mobile.png) !important;
  }

  .parallax-slider-bg-04 {
    background-image: url(https://interslice.agency/assets/imgs/works/full/burgess-shale-mobile.png) !important;
  }
  
  .full-showcase .parallax-slider .swiper-slide .valign {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;    
    -webkit-box-align: unset !important;
    -ms-flex-align: unset !important;
    align-items: unset !important;
    padding-top: 160px !important;
  }

  .sub-title{
    padding-left: 30px !important;
  }

  .full-showcase .parallax-slider .caption h1{
    font-size: 28px;
    font-weight: 300 !important;
    line-height: 38px;
    letter-spacing: 2px !important;
    padding-left: 30px !important;
    padding-right: 30px
  }

  .full-showcase .swiper-controls .swiper-button-prev {
    left: 50px !important;
  }

  .full-showcase .swiper-controls .swiper-button-prev i {
    font-size: 30px !important;
    font-weight: 600 !important;
    left: 0px !important;
    margin-left: 0px !important;
  }

  .full-showcase .swiper-controls .swiper-button-next {
    right: 50px !important;
  }

  .full-showcase .swiper-controls .swiper-button-next i {
    font-size: 26px !important;
    font-weight: 600 !important;
  }

}

@media screen and (min-width: 1000px) {

  .container {
    /* max-width: 920px; */
  }

  .container .logo {
    padding-left: 30px !important;
  }

  .hamenu .logo {
    left: 40px  !important;
  }

  .hamenu.open .logo {
    width: 70px !important;
    vertical-align: unset !important;
    top: 0px !important;
    left: 0px !important;
    margin-left: 46px !important;
    margin-top: 16px !important;
  }

  .hamenu .close-menu {
    text-align: right !important;
    padding-right: 10px !important;
  }

  .full-showcase .parallax-slider .swiper-slide .valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .sub-title{
    padding-left: 30px !important;
  }

  .full-showcase .parallax-slider .caption h1{
    font-size: 38px;
    font-weight: 300 !important;
    line-height: 48px;
    letter-spacing: 2px !important;
    padding-left: 30px !important;
  }

  .full-showcase .swiper-controls .swiper-button-prev {
    left: 76px !important;
  }

  .full-showcase .swiper-controls .swiper-button-prev i {
    font-size: 30px !important;
    font-weight: 600 !important;
    left: 0px !important;
    margin-left: 0px !important;
  }

  .full-showcase .swiper-controls .swiper-button-next {
    right: 76px !important;
  }

  .full-showcase .swiper-controls .swiper-button-next i {
    font-size: 26px !important;
    font-weight: 600 !important;
  }

}

.caption h1 a:hover span {
  text-decoration: underline;
  text-decoration-color: #999;
  -webkit-text-stroke-color: transparent;
}

/* 
h1 a:hover {
    font-style: italic;
}
h1 a:hover span {
    color: #4ACA54 !important;
}

Source: https://forum.squarespace.com/topic/267327-customizing-hover-effects-on-links-for-headings-71/
*/

.text-dark h1 a:hover span {
  text-decoration: underline;
  text-decoration-color: #FF0A0A;
  -webkit-text-stroke-color: transparent;
}

.ti-align-right {
font-size: 40px;
}

.fp-arc-loader {
width: 30px;
height: 30px;
}

.full-showcase .swiper-pagination-bullet {
  background: transparent;
  margin: 0 30px !important;
}

.hamenu .close-menu {
  font-size: 40px;
 }

.hamenu .close-menu {
width: 220px;
height: 220px;
border: 0px solid rgba(255, 255, 255, 0.2);
}

::placeholder {
  color: #878787;
  opacity: 1; /* Firefox */
}


::-ms-input-placeholder { /* Edge 12 -18 */
  color: #878787;
}

/* === 2024-12-31 ==== */

/* ====================== [ Main Nav ] ====================== */

.main-nav-hover:hover {
    color: rgba(255, 10, 10, 1) !important;
}


/* ====================== [ Font Weights ] ====================== */

.weight-200 {
  font-weight: 200 !important;
}


/* ====================== [ Form Button ] ====================== */

.form-button {
  background: #6B6B6B !important;
  color: #F0F0F0 !important;
}

.form-button:hover {
  background: #fff !important;
  color: #000 !important;
}


/* ====================== [ Alert Box ] ====================== */

/*
input, textarea {
  border-radius: 5px;
  border: 2px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
  outline: none;
}

label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

label span {
  font-size: 1rem;
}

*/

p.fail-alert, .success-alert {
font-size: 1rem !important;
font-weight: 400 !important;
letter-spacing: 0.25px !important;
color: #E6E6E6 !important;
display: block !important;
margin-top: 5px !important;
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
-moz-animation: fadeIn 2s;
-o-animation: fadeIn 2s;
-ms-animation: fadeIn 2s;
}

p.recaptchaalert {
font-size: 0.875rem !important;
font-weight: 600 !important;
letter-spacing: 0.25px !important;
color: #FF0A0A !important;
display: block !important;
margin-top: 5px !important;
animation: fadeIn 2s;
-webkit-animation: fadeIn 2s;
-moz-animation: fadeIn 2s;
-o-animation: fadeIn 2s;
-ms-animation: fadeIn 2s;
}

label.error {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.25px !important;
    color: #FF0A0A !important;
    background-color: rgba(29, 29, 29, 1);
    background: rgba(29, 29, 29, 1);
    display: block !important;
    margin-top: 5px !important;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

/*

label.error.fail-alert {
    border: 2px solid #FF0A0A;
    border-radius: 4px;
    line-height: 1;
    padding: 2px 0 6px 6px;
    background: #ffe6eb;
}
*/

input.valid.success-alert, textarea.valid.success-alert {
    border-bottom: 1.5px solid #008002 !important;
    color: #E6E6E6 !important;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

input.error, textarea.error {
    border-bottom: 1.5px solid #D60000 !important;
    color: #E6E6E6;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

[type="submit"], [type="reset"], button, html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    color: #000000;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}

.close {
  display: none;
  color: #000 !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0px !important;
  padding: 0px 10px 0px 0px !important;
  margin: 0px 0px 0px 0px !important;
  font-size: 30px !important;
  line-height: 0px !important;
}