/* Button Style */
.button {
  display: inline-flex;
  height: 45px;
  width: 150px;
  border: 1px solid #474f54;
  background: #474f54;
  /*border: 3px solid #ededed;
  /*margin: 20px 20px 20px 20px;*/
  color: #fff; /*#61AFD6;*/
  font-family: "Manrope",  Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button a {
  color: #fff; /*#61AFD6;*/
  text-decoration: none;
  letter-spacing: 1.5px;
}
.button a:hover {
  color: #474f54 !important;
}

.button2 {
  display: inline-flex;
  height: 45px;
  width: auto;
  border: 3px solid #fff;
  color: #474f54;
  font-family: "Manrope",  Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button2 a {
  color: #474f54;
  text-decoration: none;
  letter-spacing: 1.5px;
}

/* Second Button */

#button-2 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-2 a {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  left: -200px;
  background: #fff; /*#ededed;*/
  color: #474f54 !important;
  position: absolute;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-2:hover #slide {
  left: 0;
}

#button-2 a:hover {
  color: #474f54 !important;
}

/* Third Button */

#button-3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  color: #61AFD6;
}

#button-3 a {
  position: relative;
  transition: all .35s ease-Out;
}

#button-3:hover #slide {
  left: 0;
}

#button-3:hover  {
  color: #fff !important;
}

/* Fourth Button */

#button-4 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-4 a {
  position: relative;
  transition: all .45s ease-Out;
}

#underline {
  width: 100%;
  height: 2.5px;
  margin-top: 20px;
  align-self: flex-end;
  left: -200px;
  background: #7eced5; /*#f9ec8e; - yellow*/
  position: absolute;
  transition: all .3s ease-Out;
  bottom: 0;
}

#button-4:hover #underline {
  left: 0;
}

/* animated link */

.link-1 {
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: black;
  padding: 0 1px;
  transition: color ease 0.3s;
  
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 5%;
    left: 0;
    bottom: 0;
    background-color: #7eced5;
    transition: all ease 0.3s;
  }
  
  &:hover {
    color: white;
    
    &::after {
      height: 100%;
    }
  }
}

.link {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 1px;
   overflow: hidden;
   color: #474f54;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.link::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-color: #7eced5;
   transition: transform .25s ease-out;
}

.link:hover { 
   color: #fff; 
}
.link:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}

.customer-logos {
  background-color: none;
}

/* Slider */
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.action-link {
  display: block;
  /*left: 0;*/
  margin: 24px auto;
  position: relative;
  background: #fff;
  border: 1px solid #61AFD6;
  color: #61AFD6;
  padding: 10px 24px;
  overflow: hidden;
  max-width: 230px;
  min-width: 120px;
}
.action-link2 {
  display: block;
  /*left: 0;*/
  margin: 24px auto;
  position: relative;
  background: #61AFD6;
  border: 1px solid #61AFD6;
  color: #fff;
  padding: 10px 24px;
  overflow: hidden;
  max-width: 230px;
  min-width: 120px;
}
.action-btn {
  display: block;
  left: 0;
  position: relative;
  background: transparent;
  border: 1px solid #61AFD6;
  color: #fff;
  padding: 10px 24px;
  overflow: hidden;
  max-width: 230px;
  min-width: 120px;
}
.action-red {
  display: block;
  left: 0;
  position: relative;
  background: transparent;
  border: 1px solid #f17925;
  color: #fff;
  padding: 10px 24px;
  overflow: hidden;
  max-width: 230px;
  min-width: 120px;
}
.action-link:hover,
.action-link2:hover,
.action-btn:hover,
.action-red:hover {
  text-decoration: none !important;
}
.action-link .link-content,
.action-link2 .link-content,
.action-btn .link-content,
.action-red .link-content,
input[type="submit"] .link-content,
button[type="submit"] .link-content {
  position: relative;
  z-index: 3;
  -webkit-transition: color 0.35s;
  transition: color 0.35s;
  font-weight: 600 !important;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.blip-link .blip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.blip-link .blip-click {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #fff;
}
.blip-link:hover .link-content {
  color: #fff;
}
.blip-link:hover .blip {
  width: 375px;
  height: 375px;
}
.blip-link .clicked {
  color: #707070;
}
.blip-link.black .blip {
  background: #707070;
}
.blip-link.black:hover .link-content.clicked {
  color: #707070;
}
.blip-link.red {
  border-color: #61AFD6;
}
.blip-link.red .blip {
  background: #61AFD6;
}
.blip-link.red .blip-click {
  background: #fff;
}
.blip-link.red .link-content {
  color: #61AFD6;
}
.blip-link.red:hover .link-content {
  color: #fff;
}
.blip-link.red:hover .link-content.clicked {
  color: #61AFD6;
}
.blip-link.black-to-red {
  background: #707070;
}
.blip-link.black-to-red .blip {
  background: #61AFD6;
}
.blip-link.black-to-red .link-content {
  color: #fff;
}
.blip-link.black-to-red .blip-click {
  background: #707070;
}
.blip-link.black-to-red:hover {
  border-color: #61AFD6;
}
.blip-link.black-to-red:hover .link-content {
  color: #fff;
}
.blip-link.black-to-red:hover .link-content.clicked {
  color: #fff;
}
.curtain-link .curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  right: 100%;
  background: #fff;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.curtain-link:hover .curtain {
  left: 0;
  right: 0;
}
.curtain-link:hover .link-content {
  color: #61AFD6 !important;
  text-decoration: none;
}
.curtain-link.primary {
  border-color: #61AFD6;
  background: #61AFD6;
}
.curtain-link.primary .link-content {
  color: #fffff;
}
.curtain-link.primary .curtain {
  background: #fff;
}
.curtain-link.primary:hover .link-content {
  color: #61AFD6;
}
.curtain-link.red {
  border-color: #f17925;
  background: #f17925;
}
.curtain-link.red .link-content {
  color: #fff;
}
.curtain-link.red .curtain {
  background: #1d49a7;
}
.curtain-link.red:hover .link-content {
  color: #f17925 !important;
}
.curtain-link.white-red {
  border-color: #f1ece2;
  background: transparent;
}
.curtain-link.white-red .link-content {
  color: #f1ece2;
}
.curtain-link.white-red .curtain {
  background: #f1ece2;
}
.curtain-link.white-red:hover .link-content {
  color: #161616 !important;
}

.curtain-link.white {
  border-color: #61AFD6;
  background: transparent;
}
.curtain-link.white .link-content {
  color: #61AFD6;
}
.curtain-link.white .curtain {
  background: #61AFD6;
}
.curtain-link.white:hover .link-content {
  color: #fff !important;
}
.curtain-link.primary-to-white {
  background: #61AFD6;
  border-color: #61AFD6;
}
.curtain-link.primary-to-white .link-content {
  color: #fff;
}
.curtain-link.primary-to-white .curtain {
  background: #fff;
}
.curtain-link.primary-to-white:hover {
  border-color: #61AFD6;
}
.curtain-link.primary-to-white:hover .link-content {
  color: #61AFD6 !important;
}

.curtain-link.black-to-white {
  background: transparent;
  border-color: #161616;
}
.curtain-link.black-to-white .link-content {
  color: #161616;
}
.curtain-link.black-to-white .curtain {
  background: #161616;
}
.curtain-link.black-to-white:hover {
  background: transparent;
}
.curtain-link.black-to-white:hover .link-content {
  color: #ffffff !important;
}
.curtain-link.black {
  background: #161616 !important;
  border-color: #161616;
}
.curtain-link.black .link-content {
  color: #f0ece3 !important;
}
.curtain-link.black .curtain {
  background: #161616 !important;
}
.curtain-link.black:hover {
  background: #f0ece3 !important;
}
.curtain-link.black:hover .link-content {
  color: #161616;
}
.line-animation .gradient-animation {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
  background-size: 71px 77px;
  background-position: 0 0;
  background-color: #61AFD6;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-animation: gradientAnimation 0.35s infinite;
          animation: gradientAnimation 0.35s infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.line-animation:hover {
  border-color: #61AFD6;
}
.line-animation:hover .gradient-animation {
  opacity: 0.3;
}
.line-animation:hover .link-content {
  color: #61AFD6;
}
.pulse {
  background-color: #f2f2f2;
  -webkit-animation: pulse 2s infinite;
          animation: pulse 2s infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.pulse:hover {
  background-color: #707070;
}
.pulse:hover .link-content {
  color: #fff;
}
.pulse.red:hover {
  background-color: #61AFD6;
}

.links {
  *zoom: 1;
  /*padding: 50px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #313131;*/
  text-align: center;
}
.links:before, .links:after {
  content: "";
  display: table;
}
.links:after {
  clear: both;
}

.link-effect-3 a {
  color: #474f54;
  margin: auto;
  padding: 10px 0;
  position: relative;
  -moz-transition: ease-out 0.3s 0.1s;
  -o-transition: ease-out 0.3s 0.1s;
  -webkit-transition: ease-out 0.3s;
  -webkit-transition-delay: 0.1s;
  transition: ease-out 0.3s 0.1s;
}
.link-effect-3 a::after {
  height: 2px;
  width: 100%;
  background: #474f54;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0;
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.link-effect-3 a:hover::after {
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.underline a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(#222b40, #222b40),
    linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#feb2b2, #feb2b2);
  background-size: 20px 2px, 100% 2px, 0 2px;
  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear, background-position 2s linear;
}

.underline a:hover {
  background-size: 20px 2px, 0 2px, 100% 2px;
  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}

/* Responsive Table CSS */
   
.dataTable {
  display: block;
  width: 100%;
  margin: 1em 0;
}

.dataTable thead, .dataTable tbody, .dataTable thead tr, .dataTable th {
  display: block;
}

.dataTable thead {
  float: left;
}

.dataTable tbody {
  width: auto;
  position: relative;
  overflow-x: auto;
}

.dataTable td, .dataTable th {
  padding: .625em;
  line-height: 1.5em;
  border-bottom: 1px dashed #ccc;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.dataTable th {
  text-align: left;
  background: #FFF;
  border-bottom: 1px dashed #aaa;
}

.dataTable tbody tr {
  display: table-cell;
}

.dataTable tbody td {
  display: block;
}

.dataTable tr:nth-child(odd) {
  background: #FFF;
}

@media screen and (min-width: 50em) {

  .dataTable {
    display: table;
  }
  
  .dataTable thead {
    display: table-header-group;
    float: none;
  }
  
  .dataTable tbody {
    display: table-row-group;
  }
  
  .dataTable thead tr, .dataTable tbody tr {
    display: table-row;
  }
  
  .dataTable th, .dataTable tbody td {
    display: table-cell;
  }
  
  .dataTable td, .dataTable th {
    width: 50%;
  }
  
}

/****** PLACE YOUR CUSTOM STYLES HERE ******/
.grid-container,
.grid4-info,
.grid4 { 
	display: grid; 
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
	justify-items: stretch;
    align-items: stretch;
	position: relative;
} 
.grid-container > div,
.grid3-main > div { 
    /*border: 1px solid #ededed;*/
	/*border-bottom: 5px solid #7eced5; */
	background: #f8f8f8;
	outline: solid 2px #000;
    transition: outline 0.3s linear;
    margin: 0.1em;
} 
.grid4-info > div,
.grid3 > div,
.grid2 > div,
.grid2-diff > div { 
    /*border: 1px solid #ededed;*/
	/*border-bottom: 5px solid #7eced5; */
	background: #fff;
	/*outline: solid 2px #EBEBEB;
    transition: outline 0.3s linear;*/
	box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.10);
    margin: 0.1em;
	padding: 24px 32px;
	border-radius: 10px;
} 
/*.grid2-blank > div { 
	padding: 24px 32px;
} */
.grid-container > div:hover,
.grid4-info > div:hover,
.grid3-main > div:hover,
.grid3 > div:hover,
.grid2 > div:hover,
.grid2-diff > div:hover { 
    /*padding: 20px 24px;
	background: #7eced5;
	color: #fff;*/
	/*border: 1px solid #7eced5; 
	outline-width: 10px;*/
	box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.20);
} 
/*.grid2 > div,
.grid4 > div { 
    border: 1px solid #ededed;
    margin: 0.1em;
} */
.grid2-diff {
    display: grid; 
    grid-template-columns: 60% 40%;
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
	justify-items: stretch;
    align-items: stretch;
	position: relative;
}
.grid2-blank { 
	display: grid; 
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 5px; 
    grid-row-gap: 5px; 
	justify-items: stretch;
    align-items: stretch;
	position: relative;
} 
.grid4-blank { 
	display: grid; 
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
	justify-items: stretch;
    align-items: stretch;
	position: relative;
} 
.item1 {
  grid-column-start: 1;
}
.intro {
  min-height: 100px !important;
}
/*@media only screen and (max-width: 600px) {
  .grid-container,
  .grid3 { 
	display: grid; 
    grid-template-columns: auto; 
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
  } 
}*/
.grid2 { 
	display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
	justify-items: stretch;
    align-items: stretch;
	position: relative;
} 

.grid3-main,
.grid3 { 
	display: grid; 
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
	justify-items: stretch;
    align-items: stretch;
	position: relative;
} 
.grid > div { 
    padding: 20px; 
    border: 1px solid #221f1f; 
}

@media only screen and (max-width: 600px) {
  .grid-container,
  .grid3-main,
  .grid4-info,
  .grid,
  .grid2,
  .grid2-blank,
  .grid3,
  .grid4,
  .grid5,
  .parent { 
	display: grid; 
    grid-template-columns: auto; 
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
  } 
  .grid4-blank { 
	display: grid; 
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 20px; 
    grid-row-gap: 20px; 
  } 
}

.grid4 ul li {margin-left:64px !important;}