@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital&display=swap');
/* Universal css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
  height: 100%;
}

body{
  height: 100vh;
}

/* Main Sections */
head{
  margin: 0;
  padding: 0;
}


header{
  position: absolute;
  border-top: 2px #ffffff solid;
  width: 100%;
  top: 0%; 
  margin-right: 60%;
  display: inline-flex;
  width: 100%;
}

.logo{
  color: #fff;
  background-repeat: no-repeat;
  background-size: cover;  
  margin-left: 25%;
  margin-top: 25%;
  width: 50%;
  margin-bottom: 15%;
  /* background-color: #326063; */
}

/* navbar */
.menu-ul{
  text-align: left;  
  padding-left: 30px;
  list-style: none;
}

/* nav arrows */
.right-dir{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  border: solid  #000;
  border-width: 1px 5px 5px 1px;
  display: inline-block;
  padding: 3px;
}

body {
  color: #101820;
  line-height: 1.5;
}

.wrap {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.panel {
  position: fixed;
  left: -15.625em; /*or width of your navigation panel*/
  width: 15.625em; /*should match the above value*/
  color: #000;
  background: #2b3331;
  border-right: 2px solid #272e2c;
  box-shadow: 0px 3px 1px rgb(255, 255, 255);
  z-index: 3;
}

.arrow.right-dir{
  border-color: #fff;
}

.panel a {
  color: #000;
  font-weight: bold;
  line-height: 50px;
  font-size: 1.2em;
  text-decoration-line: none;
  width: 100%;
  padding: 5px 0px; 
  text-transform: uppercase;
  margin-left: -15px;
}

.panel a:hover{
  
}

.panel a:active{
  margin-left: -15px;
  margin-bottom: -20px;
}

.panel-highlight{
  color: rgb(0, 0, 0);
  background-color: #e6db49;
  border: 1px rgb(0, 0, 0) solid;
  padding: 5px 10px;
  margin: 0px 0px 0px -2px;
}

.panel-left{
  letter-spacing: 5px;
  color: #dee4e3;
  padding: 5px 5px; 
  background-color: #000000;
  
  border: 1px #000 solid; 
}

.menu-link{
  color: #b85757;
  text-decoration: none;
  margin: 10%;
  position: fixed;
}

.menu-link:hover{
  
}

/* hamburger menu two */
.menu-link.open span.m, .menu-link.open span.n, .menu-link.open span.u {
  opacity: 1;
}
.menu-link span.m, .menu-link span.n, .menu-link span.u {
  font-size: 1.05rem;
  opacity: 0;
  -webkit-transition: 250ms;
  transition: 250ms;
  letter-spacing: 2px;
}
.menu-link span.e {
  display: inline-block;
  height: 12px;
  width: 17px;
}
.menu-link span.e.btn-close span.bar:nth-child(1) {
  -webkit-transition: 250ms;
  transition: 250ms;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 5px;
}
.menu-link span.e.btn-close span.bar:nth-child(2) {
  opacity: 0;
  -webkit-transition: 250ms;
  transition: 250ms;
}
.menu-link span.e.btn-close span.bar:nth-child(3) {
  -webkit-transition: 250ms;
  transition: 250ms;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  bottom: 5px;
}
.menu-link span.e span.bar {
  -webkit-transition: 250ms;
  transition: 250ms;
  position: relative;
  display: block;
  background: #212121;
  border-radius: 1px;
  border-bottom: 1px solid #616161;
  width: 15px;
  height: 1px;
}
.menu-link span.e span.bar:nth-child(2) {
  margin: 3px 0;
}

.menu-link:hover span.m, .menu-link:hover span.n, .menu-link:hover span.u {
  opacity: 1;
  -webkit-transition: 250ms;
  transition: 250ms;
}


/* video inside of text */

.banner{  
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  
.banner video{
  position: absolute;
  
  object-fit: cover;
  display: flex;
  }

.banner-title{
  /*without position absolute gives it a cool side panel video */
  width: 100%;
  height:100%;
  padding-top: 10vh;
  font-size: 20vw;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  mix-blend-mode: screen;
  border: #000 5px solid;
  background: linear-gradient( to bottom, #fffffffa 20%, transparent);
  font-family: Poppins;
}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .banner-title{
      font-size: 17vw;
    }
}

@media screen 
  and (max-device-width: 100px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    .banner-title{
      font-size: 15vw;
    }
} 

/* new button */
#container{
  display: flex;
  justify-content: center;
}

/* Button Styles */
.button {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #BFC0C0;
  margin: 20px 20px 20px 20px;
  color: #BFC0C0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: #BFC0C0;
  text-decoration: none;
  letter-spacing: 1px;
}

footer{
    position: relative;
    height: 10%;
    text-align: center;
    width: 100%;
    background-color: #2b3331;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #fff;
    border-top: 2px #f3f56f solid;
}

/* new social media icons */
.media-outer{
  box-sizing: border-box;
  background-color: #2b3331;
  border-top: 2px #f3f56f solid;
  border-bottom: 1px #f3f56f solid;
}

.effect{
  width: 100%;
}

.buttons {
  margin: 10px 0px;
  display: flex;
  justify-content: center;
  
}
  
.effect a {
    text-decoration: none;
    width: 50px;
    height: 50px;
    margin: 10px;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 25px;
    overflow: hidden;
    position: relative;  
    color:#fff;
    background-color: #212121;
    border: 2px solid #fff;
    display: inline-flex;
}

.effect a:first-child {
  margin-left: 0px;
}

.effect a:last-child {
      margin-right: 0px;
}


/* thurio effect */
  
.effect.thurio a {
    transition: border-radius 0.2s linear 0s;
    transform: rotate(45deg);
}
    
.effect.thurio i {
      transition: transform 1s linear 0s;
      transform: rotate(-45deg);
      position: relative;
      z-index: 3;
}
  
.effect a:hover {
      border-radius: 5px;
      border-color: #000000;
      background-color: #fff;
      color: #000;
}



/* box containers of info*/
  .paragraph{
  color: #252d33;
  line-height: 70px;
  text-align: center;
  text-transform: uppercase;
} 

/*photo gallery*/
.photos-container{
  background-color: #000;
  z-index: 1;
}

.ul-container{
  display: inline-flex;
  margin-bottom: 0;
}

.image-container{
  width: 100%;
  list-style: none;
}

.gallery-img{
  background-repeat: no-repeat;
  background-size: cover;
  width: auto;
  background-color: #71b1ff;
  max-width: 100%;
  height: auto;
}

/*Comparison slider CSS & caption */
.caption-container{   
  background-color: #1b2531;
  /* background-color: #cadef7; */
  list-style: none;
  font-weight: bold;
  width: 100%;
}

.inner-container{
  margin: 10% 10%;
}

.preset-title{
  width: 100%;
  font-size: 3.5vw;
  line-height: 4vw;
  color: #231900;
  padding: 5px;
  color: #fff;
  border-left: 2px solid #e0350a;
  padding-left: 10%;
}

.highlight-title{
  color: #e24923;
  text-decoration: underline;
}

.preset-paragraph{
  font-size: 2vw;
  color: #fff;
}

img-comparison-slider {
  --divider: 3px solid #c0c0c0;
  --hint-opacity: 0.6;
  z-index: 2;
}

/* new button */

.button_container {
  display: flex;
  justify-content: center;
}

.btn {
  border: 2px #000 solid 10px;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  overflow: hidden;
  position: absolute;
  top: 80vh;
  color: #000;
  font-weight: bold;
  padding: 17px 60px;
  
  box-shadow: 0px 0px 0px 1px  rgb(255, 255, 255),
              1px 1px 0px rgb(0, 0, 0),
              2px 2px 0px rgb(0, 0, 0),
              3px 3px 0px rgb(0, 0, 0),
              4px 4px 0px rgb(0, 0, 0),
              5px 5px 0px rgb(0, 0, 0),
              6px 6px 0px rgb(0, 0, 0),
              7px 7px 0px rgb(0, 0, 0),
              8px 8px 0px rgb(0, 0, 0),
              9px 9px 0px rgb(0, 0, 0),
              9px 9px 0px rgb(0, 0, 0),
              10px 10px 0px rgb(255, 255, 255);
}

.btn span {
  position: relative;
  z-index: 1;
}

.button_container:hover{
  color:#fff;
}

.btn:active{
  margin-top: 2px;
}

.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

/* test */


.footer-widget p {
    margin-bottom: 27px;
}
footer p {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color:white;
    line-height: 28px;
}

   .animate-border {
  position: relative;
  display: block;
  width: 115px;
  height: 3px;
  background: #007bff; }

.animate-border:after {
  position: absolute;
  content: "";
  width: 35px;
  height: 3px;
  left: 0;
  bottom: 0;
  border-left: 10px solid #fff;
  border-right: 10px solid #fff;
  -webkit-animation: animborder 2s linear infinite;
  animation: animborder 2s linear infinite; }

@-webkit-keyframes animborder {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(113px);
    transform: translateX(113px); } }

@keyframes animborder {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  100% {
    -webkit-transform: translateX(113px);
    transform: translateX(113px); } }

.animate-border.border-white:after {
  border-color: #fff; }

.animate-border.border-yellow:after {
  border-color: #F5B02E; }

.animate-border.border-orange:after {
  border-right-color: #007bff;
  border-left-color: #007bff; }

.animate-border.border-ash:after {
  border-right-color: #EEF0EF;
  border-left-color: #EEF0EF; }

.animate-border.border-offwhite:after {
  border-right-color: #F7F9F8;
  border-left-color: #F7F9F8; }

/* Animated heading border */
@keyframes primary-short {
  0% {
    width: 15%; }
  50% {
    width: 90%; }
  100% {
    width: 10%; } }

@keyframes primary-long {
  0% {
    width: 80%; }
  50% {
    width: 0%; }
  100% {
    width: 80%; } } 

.dk-footer {
  background-color: #151414;
  position: relative;
  z-index: 2; }
  .dk-footer .contact-us {
    padding: 10px; }
    
  .dk-footer .contact-icon i {
    font-size: 24px;
    margin-left: 40px;
    top: -15px;
    position: relative;
    color:#007bff; }
  
    .dk-footer .location{
      width: 300px;
      margin:0;
      background-color:#202020;
      border-left: 1px #f3f56f solid;
      border-top: 1px #f3f56f solid;
      border-bottom: 1px #f3f56f solid;
      border-right: 1px #f3f56f solid;
    }

.dk-footer-box-info {
  padding: 40px;
  position: absolute;
  top: -75px;
  border-left: 1px #f3f56f solid;
  border-top: 1px #f3f56f solid;
  border-bottom: 1px #f3f56f solid;
  border-right: 1px #f3f56f solid;
  background: #202020;

  z-index: 2; 
  margin-left: -100px;}
  
  .dk-footer-box-info .footer-social-link h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 25px; }
  .dk-footer-box-info .footer-social-link ul {
    list-style-type: none;
    padding: 0;
    margin: 0; }
  .dk-footer-box-info .footer-social-link li {
    display: inline-block; }
  .dk-footer-box-info .footer-social-link a i {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background: #000;
    margin-right: 5px;
    color: #fff; }
    .dk-footer-box-info .footer-social-link a i.fa-facebook {
      background-color: #3B5998; }
    .dk-footer-box-info .footer-social-link a i.fa-twitter {
      background-color: #55ACEE; }
    .dk-footer-box-info .footer-social-link a i.fa-google-plus {
      background-color: #DD4B39; }
    .dk-footer-box-info .footer-social-link a i.fa-linkedin {
      background-color: #0976B4; }
    .dk-footer-box-info .footer-social-link a i.fa-instagram {
      background-color: #B7242A; }

.footer-awarad {
  margin-top: 285px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -moz-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .footer-awarad p {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-left: 20px;
    padding-top: 15px; }

.footer-info-text {
  margin: 26px 0 32px; }

.footer-left-widget {
  padding-left: 40px; }

.footer-widget .section-heading {
  margin-bottom: 35px; }

.footer-widget h3 {
  font-size: 24px;
  color: #fff;
  position: relative;
  margin-bottom: 15px;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content; }

.footer-widget ul {
  width: 50%;
  
  list-style: none;
  margin: 0;
  padding: 0; }

.footer-widget li {
  margin-bottom: 18px; }

.footer-widget p {
  margin-bottom: 27px; }

.footer-widget a {
  color: #878787;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  .footer-widget a:hover {
    color: #007bff; }

.footer-widget:after {
  content: "";
  display: block;
  clear: both; }

.dk-footer-form {
  position: relative; }
  .dk-footer-form input[type=email] {
    padding: 14px 28px;
    border-radius: 50px;
    background: #2E2E2E;
    border: 1px solid #2E2E2E; }
  .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::-webkit-input-placeholder {
    color: #878787;
    font-size: 14px; }
  .dk-footer-form input::-webkit-input-placeholder, .dk-footer-form input::-moz-placeholder, .dk-footer-form input:-ms-input-placeholder, .dk-footer-form input::-ms-input-placeholder, .dk-footer-form input::placeholder {
    color: #878787;
    font-size: 14px; }
  .dk-footer-form button[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px 24px 12px 17px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border: 1px solid #007bff;
    background: #007bff;
    color: #fff; }
  .dk-footer-form button:hover {
    cursor: pointer; }

/* ==========================

    Contact

=============================*/
.contact-us {
  position: relative;
  z-index: 2;
  margin-top: 65px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.contact-icon {
  position: absolute; }
  .contact-icon i {
    font-size: 36px;
    top: -5px;
    position: relative;
    color: #007bff; }

.contact-info {
  margin-left: 75px;
  color: #fff; }
  .contact-info h3 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 0; }

.copyright {
  padding: 28px 0;
  margin-top: 55px;
  background-color: #202020; }
  .copyright span,
  .copyright a {
    color: #878787;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear; }
  .copyright a:hover {
    color:#007bff; }

.copyright-menu ul {
  text-align: right;
  margin: 0; }

.copyright-menu li {
  display: inline-block;
  padding-left: 20px; }

.back-to-top {
  position: relative;
  z-index: 2; }
  .back-to-top .btn-dark {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #2e2e2e;
    border-color: #2e2e2e;
    display: none;
    z-index: 999;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear; }
    .back-to-top .btn-dark:hover {
      cursor: pointer;
      background: #FA6742;
      border-color: #FA6742; }

/* Test borders */
 
 /* html, body {
  background: rgb(20,20,20);
  text-align: center;
  height: 100%;
  overflow: hidden;
}   */

.svg-wrapper {
  position: relative;
  
  transform: translateY(-0%);
	margin: 0 auto;
  width: 320px;  
}
.shape {
  stroke-dasharray: 140 540;
  stroke-dashoffset: -450;
  stroke-width: 6px;
  fill: transparent;
  stroke:#007bff;
  border-bottom: 5px solid black;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: 'Roboto Condensed';
  text-align: left;
  padding-left: 15px;
  font-size: 16px;
  line-height: 5px;
  letter-spacing: 5px;
  color: #fff;
  top: -28px;
  position: relative;
  text-transform: uppercase;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
}