*,
::after,
::before {
  box-sizing: border-box;
}

@font-face {
  font-family: "Gotham";
  src: url("/font/Gotham-Light.woff");
}

@font-face {
  font-family: "Gotham Lighter";
  src: url("/font/Gotham-XLight.woff");
}

@font-face {
  font-family: "Gotham Black";
  src: url("/font/Gotham-Bold.woff");
}

@font-face {
  font-family: "Gotham Book";
  src: url("/font/Gotham-Book.otf");
}

@font-face {
  font-family: "Montserrat";
  src: url("/font/Montserrat-Regular.ttf");
}

/* @font-face {
  font-family: "flexslider-icon";
  src: url('/font/flexslider-icon.eot');
  src: url('/font/flexslider-icon.woff') format('woff'), 
       url('/font/flexslider-icon.ttf') format('truetype'), 
       url('/font/flexslider-icon.svg') format('svg');
} */
@font-face {
  font-family: "flexslider-icon";
  src: url("/font/flexslider-icon.eot");
  src: url("/font/flexslider-icon.eot?#iefix") format("embedded-opentype"),
    url("/font/flexslider-icon.woff") format("woff"),
    url("/font/flexslider-icon.ttf") format("truetype"),
    url("/font/flexslider-icon.svg#flexslider-icon") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "Montserrat";
  margin: 0;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  font-weight: 900;
  letter-spacing: 1px;
}

p,
h1,
h2,
div,
header,
img,
.flexslider {
  float: left;
  position: relative;
  width: 100%;
  display: block;
}

.loading{
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 10000000;
  background: white;
  transition : all .3s;
  -wekit-transition : all .3s;
  -moz-transition : all .3s;
  animation: ease-out 3s;
}

.loading h1{
  text-align: center;
  color: #111035;
  margin-top: 0;
  top: -1em;
  font-size: 1.7em;
}

svg{
  margin-top: 32.5%;
  /* top: 50%; */
  /* transform: translate(0%, 15%); */
  width: 100%;
  height: auto;
}


/* .path{
  //fill: transparent;
  animation: ease-in 1s;
  fill: #111035;
  fill: rgba(0,0,0,0), #ff3d00;
  //stroke: #111035;
  //stroke-width: 1;
  opacity: 1;
  //animation-fill-mode: forwards;
  stroke-dasharray: 1 2 3;
  //stroke-dashoffset: -553.32;
  animation: dash 3s linear forwards;
  //animation: reveal 1s ease-in-out 0s forwards;
  .cls-1{fill:#111035;}.cls-2{fill:none;stroke:#111035;}
} */

/* @keyframes dash {
  0% {
    stroke-dasharray: 0, 1254.3531494140625;
  }
  100% {
    stroke-dasharray: 1254.3531494140625, 0;
  }
} */

.path{
  stroke: #111035;
  stroke-width: 1;
  /* fill: transparent; */
  stroke-dasharray: -553.3999;
  stroke-dashoffset: -553.3999;
  /* stroke-dashoffset: -2; */
  animation: dash .5s linear forwards;
}

svg {
  fill: transparent;
  animation: filler .25s linear forwards .5s;
}

@keyframes filler{
  to{
    fill: #111035;
  }
}

@keyframes dash {
  /* from {
    stroke-dasharray: -553.32
  } */
  
  0% {
    stroke-dasharray: 0, 1254.3531494140625;
  }
  100% {
    stroke-dasharray: 1254.3531494140625, 0;
  }
}



h2{
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.banner {
  text-transform: uppercase;
  width: 100%;
}

.flexslider {
  margin: 0 !important;
  border: none !important;
}

p {
  color: #1c737d;
  /* background-color: black; */
  float: left;
  /*width: 100%;*/
  font-family: "Montserrat";
  font-size: .7em;
}

/* div.container p{
  margin-bottom: 0;
} */
h1,
h2 {
  color: black;
  display: inline;
}

header img {
  display: inline-block;
  width: 16%;
}

header h1{
  display: inline-block;
  /* margin-top: 100px; */
  width: auto;
  letter-spacing: 2.5px;
  font-size: 1.1em;
  line-height: 1em;
  margin-bottom: 0;
  margin-top: .9em;
  color: #111035;
}

.about h2 {
  letter-spacing: 5px;
  font-size: 1em;
  line-height: 1em;
  text-transform: uppercase;
}

a {
  color: #111035;
  text-decoration: none;
}

a.flex-prev,
a.flex-next{
  text-align: center !important;
}

.flexslider+div {
  padding: 1em;
  padding-bottom: 0;
}

div a {
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: .8em;
}

div a:first-child {
  float: left;
}

div a:last-child {
  float: right;
}

.container:not(.flexslider) {
  /* width: 100%; */
  padding-left: 1em;
  padding-right: 1em;
}

header.container {
  padding-top: .25em;
  padding-bottom: .25em;
}

header div {
  max-width: 285px;
  margin: auto;
  float: none;
}

div.about,
div.contact {
  display: none;
  background: rgba(84, 84, 84, .9);
  position: absolute;
  margin: .75em;
  margin-top: .5em;
  margin-bottom: .5em;
  width: auto;
  z-index: 10000;
}
div.contact{
  /* bottom: 0; */
  height: 100%;
}

div.about,
div.contact {
  max-width: 510px;
}

.about h2,
.about p,
.about a {
  color: white;
}

.about a,
.contact a.close-contact {
  color: white;
  font-size: 1em;
  width: auto;
  text-align: right;
  padding: .75em;
  float: right !important;
}

.about h2 {
  text-align: center;
  font-size: .85em;
}

.about p {
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 0;
}

form {
  float: left;
  padding: .75em;
  padding-top: 0;
}

form label,
form input,
form textarea {
  display: block;
  width: 100%;
}

input:invalid,
textarea:invalid {
  /* box-shadow: 0px 0px 0px 2px rgb(0, 100, 0); */
  box-shadow: none;
}

input:-moz-submit-invalid,
textarea:-moz-submit-invalid {
  /* box-shadow: 0px 0px 0px 2px rgb(0, 100, 0); */
  box-shadow: none;
}

input:-moz-ui-invalid,
textarea:-moz-ui-invalid {
  /* box-shadow: 0px 0px 0px 2px rgb(0, 100, 0); */
  box-shadow: none;
}

form textarea{
  height: 15em;
}

#form-messages{
  text-align: center;
  color: white;
}

form {
  width: 100%;
}

form label {
  color: white;
  margin-bottom: .5em;
}

.field {
  margin-bottom: 1em;
}

select,
button {
  color: white;
  border: solid 1px white;
  border-radius: 0;
  background: none;
}

.flex-direction-nav {
  display: none;
}

/*** Styles added to fix the issue with zoom in on iphone ***/
/* iPhone < 5: */
@media screen and (device-aspect-ratio: 2/3) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size: 16px; }
}

/* iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size: 16px; }
}

/* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */
@media screen and (device-aspect-ratio: 375/667) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size: 16px; }
}

/* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */
@media screen and (device-aspect-ratio: 9/16) {
  select, textarea, input[type="text"], input[type="password"],
  input[type="datetime"], input[type="datetime-local"],
  input[type="date"], input[type="month"], input[type="time"],
  input[type="week"], input[type="number"], input[type="email"],
  input[type="url"]{ font-size: 16px; }
}

@media only screen and (min-width: 360px) {
  
}

@media only screen and (min-width: 400px) {
  /* @keyframes dash {
    0% {
      stroke-dasharray: 0, 1254.3531494140625;
    }
    100% {
      stroke-dasharray: 610.33, 610.33;
    }
  } */
  body,
  p {
    font-weight: 100;
    font-family: "Montserrat";
  }
}

@media only screen and (min-width: 415px) {
  .flex-direction-nav {
    display: block;
  }
}

@media only screen and (min-width: 500px) {
  header h1{
    font-size: 1.35em;
    line-height: 1.25em;
    margin-top: .7em;
  }

  header div {
    max-width: 340px;
  }

  div a {
    font-size: 1.1em;
  }

  p {
    font-size: 1em;
  }

  .about p{
    font-size: .95em;;
  }

  .about h2 {
    font-size: 1.2em;
  }
  .loading h1{
    top: -3em;
  }
  /* @keyframes dash {
    0% {
      stroke-dasharray: 0, 1254.3531494140625;
    }
    100% {
      stroke-dasharray: 611.111, 611.111;
    }
  } */
  svg{
    margin-top: 138px;
  }
}

@media only screen and (min-width: 534px) {
  svg{
    margin-top: 15%;
  }
}

@media only screen and (min-width: 595px) {
  body {
    max-width: 595px;
    margin: auto;
    float: none;
  }
  div.contact{
    height: 730.72px;
  }
  form textarea{
    height: 36.25em;
  }
}