/* Global CSS */

/**
 * CONTENTS
 *
 * BASE
 * Media.................WP specific img aligns and iframe styling.
 * Typography............@fontfaces, base text and vertical rhythm setup.
 *
 * COMPONENTS
 * Margin/Padding........Utility Margin/Padding Classes
 * Clearfix..............Properly clear floats.
 *
 * Objects
 * Icons.................Icon Elements.
 * Buttons...............Button elements.
 * Tables................Table Styles.
 * Forms.................Form Elements.
 * Pagination............Pagination.
 *
 */



/*------------------------------------*\
    BASE
\*------------------------------------*/


/**
 * Media
 *
 * These selectors are hard cast because they are only used
 * by wordpress wyswyg when adding images to content
 */
 .wp-caption.alignright,
 .wp-caption.alignleft,
 .wp-caption.aligncenter {
     display: table;
 }
 
 .wp-caption.alignright,
 .wp-caption.alignleft,
 .wp-caption.alignnone,
 .wp-caption.aligncenter {
     margin: 0;
     width: auto !important;
     /* to overwrite inline widths */
 }
 
 img.alignright,
 .wp-caption.alignright,
 img.alignleft,
 .wp-caption.alignleft {
     height: 190px;
     max-width: 100%;
     width: 100%;
     object-fit: cover;
 }
 
 img.alignnone,
 .wp-caption.alignnone img,
 img.aligncenter,
 .wp-caption.aligncenter img {
     height: auto;
     max-width: 100%;
 }
 
 img.alignnone,
 .wp-caption.alignnone,
 img.aligncenter,
 .wp-caption.aligncenter {
     margin: 0 0 22px 0;
 }
 
 img.alignright,
 .wp-caption.alignright {
     margin: 0 0 22px 0;
 }
 
 img.alignleft,
 .wp-caption.alignleft {

     margin: 20px 0 20px 0;
 }
 
 img.aligncenter,
 .wp-caption.aligncenter img {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
 .wp-caption.aligncenter {
     margin-left: auto;
     margin-right: auto;
 }
 
 .wp-caption-text {
     caption-side: bottom;
     display: table-caption;
 }
 
 @media (min-width: 768px) {
     img.alignright,
     .wp-caption.alignright,
     img.alignleft,
     .wp-caption.alignleft {
         height: 215px;
         width: 285px;
     }
 
     img.alignright,
     .wp-caption.alignright {
         float: right;
         margin: 0 0 22px 22px;
     }
 
     img.alignleft,
     .wp-caption.alignleft {
         float: left;
         margin: 0 22px 10px 0;
     }
 }
 



iframe,
img {
    max-width: 100%;
}

/* Fade-in for lazyloaded images */
.will-lazyload {
    opacity: 0;
    transition: opacity .25 linear;
}

.will-lazyload.lazyloaded {
    opacity: 1;
}



/**
  * Typography
  */

/*
  - Please set up line-heights in ems
  - Set up typography styling based on styles found in .xd file under Assets > Character Styles
  */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  font-weight: 700;
}

h1, 
.h1 {
    font-size: 26px;
    line-height: 1.26em;
}

h2, 
.h2 {
  padding-bottom: 7px;
  font-size: 36px;
  line-height: 1.222em;
  color: #004B86;
}

h3, 
.h3 {
  padding-bottom: 15px;
  font-size: 22px;
  line-height: 1.36em;
  color: #004B86;
}

h4, 
.h4,
.subheading {
  font-size: 16px;
  line-height: 1.3125em;
  text-transform: uppercase;
  color: #F17503;
  padding-bottom: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media (min-width: 768px) {
  h1, 
  .h1 {
      font-size: 42px;
  }

  h2, 
  .h2 {
      font-size: 45px;
      line-height: 1.155em;
  }

  h3, 
  .h3 {
      font-size: 28px;
  }
  
  h4, 
  .h4,
  .subheading {
      font-size: 25px;
      line-height: 1.1em;
  }
}

@media (min-width: 1200px) {
    h1, 
    .h1 {
        font-size: 60px;
    }

    h2, 
    .h2 {
        font-size: 55px;
        line-height: 1.15em;
    }

    h3, 
    .h3 {
        font-size: 38px;
    }
    

    h4, 
    .h4,
    .subheading {
        font-size: 25px;
        line-height: 1.12em;
    }
}

p, ul, ol {
  list-style: none;
  margin: 0;
  padding: 0 0 20px 0;
  font-size: 16px;
  line-height: 1.75em;
}

.page-content ul,
.page-content ol {
    /* fix for bulleted lists not wrapping around images correctly in Wordpress */
    width: auto;
    overflow: hidden;
    padding-left: 15px;
}

.page-content ul {
    list-style-type: none;
}

@media (min-width: 768px) {
  .list--two-columns {
    column-count: 2;
  }
}

ol,
ul {
    padding-left: 20px;
}


ol li {
    counter-increment: list;
    position: relative;
    list-style-type: none;
}
ol {
  counter-reset: list;
}
ol ol {
  counter-reset: list;
}
ol > ol > li {
  counter-increment: list;
}

ol li:before {
    content: counter(list) ".";
    position: absolute;
    left: 0;
}

ul li ,
ol li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
}
ul li:last-child{
  margin-bottom: 15px;
}

ul li:before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #1B78C1;
    left: 0;
    top: 12px;
}
p:has( + ul) {
  padding-bottom: 5px;
}
p:last-child {
  padding-bottom: 0;
}
a {
    background: linear-gradient(to bottom, #F3F3F5 0%, #F3F3F5 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 6px 3px;
    color: #004B86;
    font-weight: 700;
    text-decoration: none;
    transition: background-size .2s;
}

.bg-gray a:not(.btn){
  background: linear-gradient(to bottom, #d9dfe38f 0%, #d9dfe38f 100%);
  background-position: 0 100%;
  background-size: 6px 6px;
  background-repeat: repeat-x;
  text-decoration: none;
  transition: background-size .2s;
}
.bg-gray a:not(.btn):hover{
  background-size: 6px 50px;
  background: linear-gradient(to bottom, #d9dfe38f 100%, #d9dfe38f 100%);
}

.bg-white {
  background: #ffffff;
}

.bg-gray {
  background: #F3F3F5;
}

.bg-blue {
  background: #004B86;
  color: #FFF
}

.bg-blue h4 {
  color: #F17503
}

.bg-blue h1,.bg-blue h2,.bg-blue h3 {
  color: #FFF
}

.bg-blue p a:not(.btn) {
  background: linear-gradient(to bottom,rgba(255,255,255,.29) 0%,rgba(255,255,255,.29) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 6px 6px;
  color: #fff
}

.bg-blue ul li:before {
  background: #fff
}

.bg-blue .btn-primary {
  background: #1B78C1
}

.bg-gray blockquote {
  background: rgba(217,223,227,.56)
}

.bg-blue blockquote {
  background: rgba(232,243,252,.25);
  color: #FFF
}

.bg-blue blockquote strong {
  color: #FFF
}

.bg-blue ul li::before {
  background: #fff
}

blockquote {
  margin: 15px 0 50px;
  padding: 30px 40px;
  font-size: 16px;
  line-height: 1.75em;
  font-weight: 400;
  color: #585F65;
  position: relative;
  background: #F3F3F5;
  clip-path: polygon(0 0, 92% 0, 100% 100%, 6% 100%);
}

blockquote strong {
  color: #004B86;
}


@media (min-width: 768px) {
  ol,
  ul {
      padding-left: 26px;
  }

  blockquote {
      margin: 15px 0 50px;
      padding: 30px 78px;
      clip-path: polygon(0 0, 93% 0, 100% 100%, 5% 100%);
  }
}

@media (min-width: 1200px) {
  
    a:hover {
      background: linear-gradient(to bottom, #E8F3FC 0%, #E8F3FC 100%);
      background-size: 6px 50px;
    }
    a.icons-text:hover {
        background-color: #fff !important;
    }


    ol,
    ul {
        padding-left: 40px;
    }

    
    blockquote {
      margin: 25px -32px 50px;
      padding: 30px 82px;
      clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
      width: calc(100% + 64px);
    }
}



/*------------------------------------*\
    COMPONENTS
\*------------------------------------*/




/**
 * Utility Margin/Padding Classes
 *
 */

/* Used on outer-most section container so section margins collapse */
.section-margins {
    margin-top: var(--section-margins);
    margin-bottom: var(--section-margins);
}

/* Used only for sections with colored backgrounds */
.section-padding {
    padding-top: var(--section-margins);
    padding-bottom: var(--section-margins);
}




/**
* Clearfix
* Apply clearing without adding additional markup
*/

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




/*--------------------------------------------------------------*\
     OBJECTS
     Objects are independent generic stylibf classes or UI peices.
     All styles for objects should be self contained.
 
     e.g. an object shouldn't rely on trump helpers to apply padding etc.
 \*--------------------------------------------------------------*/


/**
 * Buttons
 */

.btn {
    display: inline-block;
    position: relative;
    letter-spacing: 0.1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1em;
    text-transform: uppercase;
    background: #004B86;
    color: #fff;
    padding: 17px 60px 17px 38px;
    clip-path: polygon(0 0, 90% 0%, 100% 50%, 100% 100%, 10% 100%, 0 50%);
    transition: all .3s ease-in-out;
    border: none;
}

.btn::after {
    position: absolute;
    content: '\e903';
    font-family: 'icomoon';
    color: #F17503;
    right: 40px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 11px;
}

.btn-primary {
    background: #004B86;
}

.btn-secondary {
    background: #F17503;
}

.btn-secondary::after {
    color: #004B86;
}
.btn-jump-link::after {
  content: '\e901';
  color: #004B86;
}


.btn-block {
    display: block;
    width: 100%;
}

.btn+.btn {
    margin-top: 30px;
}

@media (min-width: 600px) {

    .btn+.btn {
        margin-top: 0;
        margin-left: 20px;
    }

}


@media (min-width: 1200px) {

    .btn:hover,
    .btn-primary:hover {
        background: #1B78C1;
        border: none;
    }
    
    .btn-secondary:hover {
        background: #AE5402;
        border: none;
    }

}


/**
 * Icons
 */

/* add icon code here */

@font-face {
    font-family: 'icomoon';
    src:  url('/wp-content/themes/geostabilization/assets/fonts/icomoon.eot?7h4hho');
    src:  url('/wp-content/themes/geostabilization/assets/fonts/icomoon.eot?7h4hho#iefix') format('embedded-opentype'),
      url('/wp-content/themes/geostabilization/assets/fonts/icomoon.ttf?7h4hho') format('truetype'),
      url('/wp-content/themes/geostabilization/assets/fonts/icomoon.woff?7h4hho') format('woff'),
      url('/wp-content/themes/geostabilization/assets/fonts/icomoon.svg?7h4hho#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-analysis:before {
    content: "\e900";
  }
  .icon-arrow-down:before {
    content: "\e901";
  }
  .icon-arrow-left:before {
    content: "\e902";
  }
  .icon-arrow-right:before {
    content: "\e903";
  }
  .icon-arrow-top:before {
    content: "\e904";
  }
  .icon-assetment:before {
    content: "\e905";
  }
  .icon-bridge:before {
    content: "\e906";
  }
  .icon-building:before {
    content: "\e907";
  }
  .icon-careers:before {
    content: "\e908";
  }
  .icon-checkmark:before {
    content: "\e909";
  }
  .icon-concrete:before {
    content: "\e90a";
  }
  .icon-dig:before {
    content: "\e90b";
  }
  .icon-dropdown:before {
    content: "\e90c";
  }
  .icon-email:before {
    content: "\e90d";
  }
  .icon-facebook:before {
    content: "\e90e";
  }
  .icon-folder:before {
    content: "\e90f";
  }
  .icon-images:before {
    content: "\e910";
  }
  .icon-instagram:before {
    content: "\e911";
  }
  .icon-installation:before {
    content: "\e912";
  }
  .icon-layers:before {
    content: "\e913";
  }
  .icon-linkedin:before {
    content: "\e914";
  }
  .icon-machine:before {
    content: "\e915";
  }
  .icon-menu:before {
    content: "\e916";
  }
  .icon-metro-phone:before {
    content: "\e917";
  }
  .icon-mine:before {
    content: "\e918";
  }
  .icon-phone:before {
    content: "\e919";
  }
  .icon-pin:before {
    content: "\e91a";
  }
  .icon-rail:before {
    content: "\e91b";
  }
  .icon-road:before {
    content: "\e91c";
  }
  .icon-rockfall:before {
    content: "\e91d";
  }
  .icon-search:before {
    content: "\e91e";
  }
  .icon-sketch:before {
    content: "\e91f";
  }
  .icon-tower:before {
    content: "\e920";
  }
  .icon-warranty:before {
    content: "\e922";
  }
  .icon-x-logo:before {
    content: "\e923";
  }
  .icon-icon-close:before {
    content: "\e924";
  }
  .icon-icon-warning:before {
    content: "\e925";
  }
  


/**
 * Forms
 */

 label {
  display: block;
  font-size: 18px;
  color: #004B86;
  font-weight: 700;
  padding: 0 0 9px;
}

label sup {
  color: #1B78C1;
  font-size: 18px;
  top: 0;
  right: 0;
}

.form-col {
  display: inline-block;
  width: 100%;
  margin-top: 32px;
}

select {}

textarea {}

/* Removes default webkit form styling */
input:not([type="radio"]):not([type="checkbox"]),
button,
textarea {
    -webkit-appearance: none;
}

input:active,
textarea:active,
select:active,
input:focus,
textarea:focus,
select:focus,
textarea:focus {
    outline: none;
    /* Removes blue border on focus */
    border: 1px solid #ccc;
    /* TODO: Please add a branded border for active and focus */
}

/* default text input style */
[type="text"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="url"],
[type="week"],
[type="date"],
textarea {
  width: 100%;
  height: 46px;
  border: 1px solid #D9DFE3;
  border-radius: 4px;
  outline: none;
  padding: 15px;
  color: #1B78C1;
}

textarea {
  min-height: 128px;
}

/* Removes inconsistent padding from Firefox buttons */
button::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border: none;
    padding: 0;
}

::placeholder {
  opacity: 1;
  color: rgba(88, 95, 101, 0.60) !important;
}

@media(min-width: 768px) {
  .form-col {
    margin-top: 15px;
  }

  .form-col-btn {
    margin-top: 35px;
  }

  label {
    padding: 0 0 7px;
  }  
}

/* Hide reCaptcha badge */
.grecaptcha-badge {
    visibility: hidden;
}




/**
 * Pagination
 */

.wp-pagenavi {
    margin-top: 50px;
}

.wp-pagenavi .pages {
    border: 0;
    margin-left: 0;
    padding-left: 0;
}

.wp-pagenavi span.current,
.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 6px 11px;
}

.wp-pagenavi span.current {
    background-color: #ddd;
    border-color: #ddd;
}

@media (min-width: 1025px) {

    .wp-pagenavi {
        margin-top: 70px;
    }

}



/**
 * Sticky Sidebar
 */

@media(min-width: 1025px) {
    .sticky-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 125px;
        /* TODO: update to match how far down page when sidebar should stick */
    }
}


.bg-gray:not(.testimonials) + .bg-gray:not(.testimonials) ,
.bg-white + .bg-white ,
.bg-blue + .bg-blue  {
  margin-top: 0;
  padding-top: 0;
}

.masthead--innerpage:has(+ .bg-blue):after {
  background-color : #004B86
}
.masthead--innerpage:has(+ .bg-gray):after {
  background-color : #F3F3F5
}
.bg-blue a:not(.btn) {
  color: #fff;
}
.bg-blue a:not(.btn):hover{ 
  background:  #F17503;
  color: #ffffff;
}

.icons-text:hover ,
.icons-text-item a:hover {
    background-color: #fff !important;
}
.search-form {
  display: none;
  top: auto;
}
.search-form.js-search-active{
  display: flex;
  align-items: center;
  position: absolute;
  top: auto;
  right: 0;
  margin-top: 0;
  background: #fff;
  height: auto;
  padding: 25px;
}
.search-form > form {
  display: flex;
  align-items: center;
  margin-right: 0;
  flex-wrap: wrap;
}
.search-form > form > input {
     width: 100%;
    border-radius: 0;
    height: 49px;
}
.search-form > form > .btn {
   height: 49px;
   clip-path: unset !important;
   background: #1B78C1;
}
.search-form > form > .btn:hover {
    background: #004B86;
}
.search-form > form > .btn::after {
   color: #fff;
}
.btn__close{
  background: transparent;
  color: #F17503;
  font-size: 24px !important;
  margin:0 !important;
  display: none;
}
.hidden-desktop:is(.js-search-active){
  display: flex !important;
  flex-wrap: wrap;
  width: 100%;
}
.hidden-tablet{
  display: none !important;

}
.no-padding{
  padding: 0;
}
.search-form>form>input{
  margin-bottom: 15px;
}
.search-form>form {
  width: 100%;
}
.search-form>form>.btn {
  width: 100%;
}

@media(min-width:680px) {
  .search-form > form {
    flex-wrap: nowrap;
    width: 100%;
  }
  .hidden-desktop:is(.js-search-active){
    flex-wrap: nowrap;
  }
  .search-form > form > input {
    margin-bottom: 0;
  }
  .search-form>form>.btn {
    width: auto;
  }
}
@media(min-width:768px) {
  .search-form > form > input {
     width: 410px;
     margin-bottom: 0;
  }
  .btn__close{
    display: block;
  }
  .search-form > form{
    flex-wrap: nowrap;
    margin-right: 30px;
    width: auto;
   
  }
  .hidden-desktop:is(.js-search-active){
      width: auto;
  }
}

@media(min-width:1200px) {
  .search-form.js-search-active {
     top: 0;
     margin-top: 50px;
     height: 99px;
  }
  .hidden-tablet:is(.js-search-active){
    display: flex !important;
    flex-wrap: nowrap;
  }
  .hidden-desktop,
  .hidden-desktop.js-search-active {
    display: none !important;
  }

  .page-header:not(.js-scrolled) .search-form {
    margin-top: 64px;
  }
}

.wpcf7-form-control-wrap .choices {
  margin-bottom: 0;
}

.media-gallery__play-icon {
  width: 70px;
  height: 70px;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-gallery__play-icon svg {
  width: 25px;
  height: auto;
  fill: #004B86;
}

.mktoFieldDescriptor.mktoFormCol,
.mktoFieldWrap.mktoRequiredField{
	width: 100% !important;
	float: initial;
	display: block;
}

.mktoFieldWrap label {
	display: inline-block;
	width: auto !important;
	margin-bottom: 5px !important;
}

.mktoFieldWrap input {
	width: 100% !important;
	display: block;
	float: initial;
	box-shadow: none !important;
	border-radius: 5px !important;
}

.mktoModalMain,
form#mktoForm_1009{
	width: 100% !important;
}

.mktoForm .mktoButtonWrap.mktoRound {
	margin-left: 0 !important;
}

.mktoForm .mktoButtonWrap.mktoRound .mktoButton {
	background-color: #004B86 !important;
	padding: 17px 38px 17px 38px !important;
	font-weight: bold;
	font-size: 16px !important;
	clip-path: polygon(0 0, 90% 0%, 100% 50%, 100% 100%, 10% 100%, 0 50%);
	background-image: none !important;
	border-radius: 4px !important;
	text-transform: uppercase;
	line-height: 1em;
}

.mktoModalContent {
	max-width: 800px;
	left: calc(50% - 400px) !important;
	padding: 40px !important;
}

@media (max-width: 800px) {
	.mktoModalContent {
		width: calc(100% - 30px) !important;
		left: 15px !important;
	}
}