/* =====================================================================
   template-style.css - template base styles (cleaned)
   Load order: template CSS first, custom.css LAST.

   1. Typography         6. Containers and padding
   2. Tables and media   7. Margins
   3. Backgrounds        8. Carousel
   4. Header and menu    9. Social tiles and forms
   5. Colors and buttons 10. Mobile (768px, 480px)
   ===================================================================== */


/* =====================================================================
   1. TYPOGRAPHY
   ===================================================================== */
body {
  background: #fff;
}

body, p, li, a {
  font-weight: 400;
  font-family: "Barlow", Arial, sans-serif;
  font-size: 0.95rem;
}

p {
  color: #777;
  line-height: 1.6rem;
}

a, a:link, a:visited, a:hover, a:active {
  color: #777;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: #000;
  font-family: "Barlow", Arial, sans-serif;
  margin-bottom: 15px;
  margin-top: 0;
}

h1, .h1 { font-size: 50px; font-weight: 100; }
h2, .h2 { font-size: 1.4rem; font-weight: 400; }
h3, .h3 { font-size: 1.2rem; font-weight: 400; }
h4, .h4 { font-size: 1.1rem; font-weight: 400; }
h5, .h5 { font-size: 1rem; font-weight: 400; }
h6, .h6 { font-size: 0.9rem; font-weight: 400; }

/* Text sizes */
.text-size-12 { font-size: 12px !important; line-height: 1.4; }
.text-size-16 { font-size: 16px !important; line-height: 1.4; }
.text-size-20 { font-size: 20px !important; line-height: 1.4; }
.text-size-25 { font-size: 25px !important; line-height: 1.4; }
.text-size-30 { font-size: 30px !important; line-height: 1.4; }
.text-size-40 { font-size: 40px !important; line-height: 1.4; }
.text-size-50 { font-size: 50px !important; line-height: 1.4; }
.text-size-60 { font-size: 60px !important; line-height: 1.4; }
.text-size-70 { font-size: 70px !important; line-height: 1.4; }
.text-size-80 { font-size: 80px !important; line-height: 1.4; }
.text-size-90 { font-size: 90px !important; line-height: 1.4; }
.text-size-100 { font-size: 100px !important; line-height: 1.4; }

/* Text weights */
.text-extra-thin { font-weight: 100; }
.text-thin { font-weight: 300; }
b, strong, .text-strong { font-weight: 700; }
.text-extra-strong { font-weight: 800; }

/* Text transform and line height */
.text-line-height-1 { line-height: 1; }
.text-uppercase { text-transform: uppercase; line-height: 1.15; }
.text-uppercase.text-line-height-1 { line-height: 1; }

.text-drop-cap {
  float: left;
  font-size: 75px;
  line-height: 55px;
  padding-right: 10px;
  padding-top: 10px;
  font-weight: 700;
  color: #454545;
}

.text-padding {
  display: inline-block !important;
  padding: 15px 20px;
}

.text-padding-small {
  display: inline-block !important;
  padding: 7px 10px;
}


/* =====================================================================
   2. TABLES AND MEDIA
   ===================================================================== */
table {
  background: none repeat scroll 0 0 #fff;
  border: 0;
  font-size: 0.85rem;
  line-height: 1.6rem;
}
table tr td, table tr th { padding: 10px; }
table tfoot, table thead {
  background: none repeat scroll 0 0 #f5f5f5;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
table tr:nth-of-type(2n) {
  background: none repeat scroll 0 0 #f5f5f5;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
th, td { border-right: 1px solid #fff; }

iframe, video { display: block; }
iframe { margin: 0; }


/* =====================================================================
   3. BACKGROUNDS
   ===================================================================== */
.background-image {
  background-repeat: no-repeat;
  background-size: cover;
}

.background-none {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
  border: 0;
}

.background-white  { background-color: #fff !important; }
.background-orange { background-color: #E4A600 !important; }
.background-red    { background-color: #C81010 !important; }
.background-blue   { background-color: #005881 !important; }
.background-aqua   { background-color: #00B5A6 !important; }
.background-dark   { background-color: #002633 !important; }
.background-grey   { background-color: #f5f5f5 !important; }
.background-sand   { background-color: #f9f2e2 !important; }


/* =====================================================================
   4. HEADER AND MENU
   ===================================================================== */
section, header { position: relative; }

nav {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 0;
  padding: 25px 0;
  position: relative;
  z-index: 2;
}

.logo img {
  margin: 0;
  max-width: 300px;
  width: 203px;
  position: relative;
}

.top-nav li { padding: 1.5rem 0; }

.top-nav li a {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 1rem 1.3rem;
  position: relative;
  text-transform: uppercase;
  transition: all 0.20s linear 0s;
}

.background-white .top-nav li a {          /* menu on a white header */
  color: #002633;
  font-size: 0.85rem;
  padding: 0.7em 1.25em;
}

/* Drop-down (submenu) */
.top-nav ul ul { background: #fff none repeat scroll 0 0; }
.top-nav li ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.top-nav li ul li:last-child { border-bottom: 0; }
.top-nav li ul li a,
.background-white .top-nav li ul li a,
.top-nav .active-item li a {
  background: #fff none repeat scroll 0 0;
  color: rgba(0, 0, 0, 0.75);
}

ul.chevron .submenu > a::after,
ul.chevron .sub-submenu > a::after,
ul.chevron .aside-submenu > a::after,
ul.chevron .aside-sub-submenu > a::after {
  margin: 0 0 0 0.625rem;
}


/* =====================================================================
   5. COLORS AND BUTTONS
   ===================================================================== */

/* Text on white and dark backgrounds */
.background-white, .background-white p, a.background-white, .background-white a,
.background-white a:link, .background-white a:visited, .background-white a:hover, .background-white a:active {
  color: #999;
}

.background-dark, .background-dark p, a.background-dark, a.background-dark:visited, a.background-dark:link,
.background-dark a, .background-dark a:link, .background-dark a:visited, .background-dark a:hover, .background-dark a:active {
  color: #7697A2;
}

/* Text on colored backgrounds: soft white */
.image-hover-overlay-content *,
.background-orange, .background-orange p, a.background-orange, a.background-orange:visited, a.background-orange:link,
.background-orange a, .background-orange a:link, .background-orange a:visited, .background-orange a:hover, .background-orange a:active,
.background-red, .background-red p, a.background-red, a.background-red:visited, a.background-red:link,
.background-red a, .background-red a:link, .background-red a:visited, .background-red a:hover, .background-red a:active,
.background-blue, .background-blue p, a.background-blue, a.background-blue:visited, a.background-blue:link,
.background-blue a, .background-blue a:link, .background-blue a:visited, .background-blue a:hover, .background-blue a:active,
.background-aqua, .background-aqua p, a.background-aqua, a.background-aqua:visited, a.background-aqua:link,
.background-aqua a, .background-aqua a:link, .background-aqua a:visited, .background-aqua a:hover, .background-aqua a:active {
  color: rgba(255, 255, 255, 0.75);
}

/* Headings */
.background-white h1, .background-white h2, .background-white h3, .background-white h4, .background-white h5, .background-white h6,
.background-white .h1, .background-white .h2, .background-white .h3, .background-white .h4, .background-white .h5, .background-white .h6 {
  color: #002633;
}

.background-dark h1, .background-dark h2, .background-dark h3, .background-dark h4, .background-dark h5, .background-dark h6,
.background-dark .h1, .background-dark .h2, .background-dark .h3, .background-dark .h4, .background-dark .h5, .background-dark .h6,
.background-orange h1, .background-orange h2, .background-orange h3, .background-orange h4, .background-orange h5, .background-orange h6,
.background-orange .h1, .background-orange .h2, .background-orange .h3, .background-orange .h4, .background-orange .h5, .background-orange .h6,
.background-red h1, .background-red h2, .background-red h3, .background-red h4, .background-red h5, .background-red h6,
.background-red .h1, .background-red .h2, .background-red .h3, .background-red .h4, .background-red .h5, .background-red .h6,
.background-blue h1, .background-blue h2, .background-blue h3, .background-blue h4, .background-blue h5, .background-blue h6,
.background-blue .h1, .background-blue .h2, .background-blue .h3, .background-blue .h4, .background-blue .h5, .background-blue .h6,
.background-aqua h1, .background-aqua h2, .background-aqua h3, .background-aqua h4, .background-aqua h5, .background-aqua h6,
.background-aqua .h1, .background-aqua .h2, .background-aqua .h3, .background-aqua .h4, .background-aqua .h5, .background-aqua .h6 {
  color: #fff;
}

/* Text colors */
.text-white, .text-white * { color: #fff !important; }
.text-orange, .text-orange * { color: #E4A600 !important; }
.text-red, .text-red * { color: #C81010 !important; }
.text-blue, .text-blue * { color: #005881 !important; }
.text-aqua, .text-aqua * { color: #00B5A6 !important; }
.text-dark, .text-dark * { color: #002633 !important; }

/* Hover colors */
.text-primary-hover, .text-white-hover, .text-red-hover, .text-blue-hover, .text-aqua-hover, .text-dark-hover {
  transition: color 0.20s linear 0s;
}
.text-white-hover:hover { color: #fff !important; }
.text-red-hover:hover { color: #C81010 !important; }
.text-blue-hover:hover { color: #005881 !important; }
.text-aqua-hover:hover { color: #00B5A6 !important; }
.text-dark-hover:hover { color: #002633 !important; }

/* Buttons */
.button, a.button, a.button:link, a.button:visited {
  border: 0;
  color: white;
  display: inline-block;
  padding: 0.625rem 1.25rem;
  text-align: center;
  transition: all 0.20s linear 0s !important;
}

.button:hover, a.button:hover, a.button:link:hover, a.button:visited:hover {
  box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.25) inset;
}


/* =====================================================================
   6. CONTAINERS AND PADDING
   ===================================================================== */
.section { padding: 7rem 1.25rem; }
.section-top-padding { padding: 7rem 1.25rem 0 1.25rem; }
.padding { padding: 1.25rem !important; }
.padding-2x { padding: 2.5rem !important; }
.center { display: block !important; }


/* =====================================================================
   7. MARGINS
   ===================================================================== */
.margin-top { margin-top: 1.25rem !important; }
.margin-left { margin-left: 1.25rem !important; }
.margin-right { margin-right: 1.25rem !important; }
.margin-top-bottom { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }
.margin-left-right { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }

.margin-top-0, .margin-top-10, .margin-top-15, .margin-top-20, .margin-top-30, .margin-top-40, .margin-top-50, .margin-top-60, .margin-top-70, .margin-top-80,
.margin-bottom-0, .margin-bottom-10, .margin-bottom-15, .margin-bottom-20, .margin-bottom-30, .margin-bottom-40, .margin-bottom-50, .margin-bottom-60, .margin-bottom-70, .margin-bottom-80,
.margin-top-bottom-0, .margin-top-bottom-10, .margin-top-bottom-15, .margin-top-bottom-20, .margin-top-bottom-30, .margin-top-bottom-40, .margin-top-bottom-50, .margin-top-bottom-60, .margin-top-bottom-70, .margin-top-bottom-80 {
  display: block;
}

.margin-top-0 { margin-top: 0 !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-15 { margin-top: 15px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-50 { margin-top: 50px !important; }
.margin-top-60 { margin-top: 60px !important; }
.margin-top-70 { margin-top: 70px !important; }
.margin-top-80 { margin-top: 80px !important; }

.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }
.margin-bottom-60 { margin-bottom: 60px !important; }
.margin-bottom-70 { margin-bottom: 70px !important; }
.margin-bottom-80 { margin-bottom: 80px !important; }

.margin-top-bottom-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.margin-top-bottom-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.margin-top-bottom-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.margin-top-bottom-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.margin-top-bottom-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.margin-top-bottom-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.margin-top-bottom-50 { margin-top: 50px !important; margin-bottom: 50px !important; }
.margin-top-bottom-60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.margin-top-bottom-70 { margin-top: 70px !important; margin-bottom: 70px !important; }
.margin-top-bottom-80 { margin-top: 80px !important; margin-bottom: 80px !important; }

.margin-left-0 { margin-left: 0 !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-left-15 { margin-left: 15px !important; }
.margin-left-20 { margin-left: 20px !important; }
.margin-left-30 { margin-left: 30px !important; }
.margin-left-40 { margin-left: 40px !important; }
.margin-left-50 { margin-left: 50px !important; }
.margin-left-60 { margin-left: 60px !important; }
.margin-left-70 { margin-left: 70px !important; }
.margin-left-80 { margin-left: 80px !important; }

.margin-right-0 { margin-right: 0 !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-right-15 { margin-right: 15px !important; }
.margin-right-20 { margin-right: 20px !important; }
.margin-right-30 { margin-right: 30px !important; }
.margin-right-40 { margin-right: 40px !important; }
.margin-right-50 { margin-right: 50px !important; }
.margin-right-60 { margin-right: 60px !important; }
.margin-right-70 { margin-right: 70px !important; }
.margin-right-80 { margin-right: 80px !important; }


/* =====================================================================
   8. CAROUSEL (Owl Carousel 2)
   ===================================================================== */
.carousel-main .carousel-content {
  bottom: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  transform-style: preserve-3d;
}

.carousel-fade-transition .item { padding: 190px 0; }

/* Arrows */
.owl-carousel .owl-nav div {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 0;
  border-radius: 0;
  color: #C9C9C9 !important;
  font-size: 20px;
  height: auto;
  line-height: 0;
  margin-top: -20px;
  opacity: 0.5;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  width: auto;
  transition: all 0.20s linear 0s;
}

.owl-carousel .owl-nav div:hover { opacity: 1; }
.owl-carousel .owl-nav .owl-prev { left: 1.25rem; }
.owl-carousel .owl-nav .owl-next { right: 1.25rem; }

/* Dots */
.owl-dots { margin-top: 1.25rem; }
.carousel-main .owl-dots {
  bottom: 0;
  padding: 1.25rem;
  position: absolute;
  width: auto;
}

.owl-carousel .owl-dots { text-align: center; }
.owl-carousel.text-left .owl-dots { text-align: left; }
.owl-carousel .owl-dot { display: inline-block; }

.owl-carousel .owl-dot span {
  background: #434343;
  border-radius: 0;
  display: block;
  height: 15px;
  margin: 0 1px;
  width: 15px;
  opacity: 0.3;
  transition: all 0.20s linear 0s;
}

.owl-carousel .owl-dot.active span { opacity: 1; }
.background-dark .owl-carousel .owl-dot span { background: #fff; }

/* White navigation variant */
.carousel-nav-white.owl-carousel .owl-dots span { background: #fff none repeat scroll 0 0; }
.carousel-nav-white.owl-carousel .owl-nav div { color: #fff !important; border: 0; }


/* =====================================================================
   9. SOCIAL TILES AND FORMS
   ===================================================================== */

/* Social tile colors (the icons themselves are inline SVG) */
.facebook, a:link.facebook,
.twitter, a:link.twitter,
.linkedin, a:link.linkedin,
.instagram, a:link.instagram,
.youtube, a:link.youtube { color: #fff !important; }

.facebook, a:link.facebook { background: #3b5998 none repeat scroll 0 0; }
.twitter, a:link.twitter { background: #55acee none repeat scroll 0 0; }
.linkedin, a:link.linkedin { background: #007bb5 none repeat scroll 0 0; }
.instagram, a:link.instagram { background: #125688 none repeat scroll 0 0; }
.youtube, a:link.youtube { background: #bb0000 none repeat scroll 0 0; }

/* Contact form */
form.customform input, form.customform textarea, form.customform select {
  background: rgba(0, 0, 0, 0.03) none repeat scroll 0 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 12px;
  padding: 0.625rem;
  width: 100%;
}

form.customform input:hover, form.customform textarea:hover, form.customform select:hover,
form.customform input:focus, form.customform textarea:focus, form.customform select:focus {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.customform input, .customform textarea {
  border: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff;
  font-size: 15px !important;
}

.customform .required { border-bottom: 2px solid #dd442c !important; }


/* =====================================================================
   10. MOBILE
   ===================================================================== */
@media screen and (max-width: 768px) {
  .top-nav .right { float: none; }

  nav {
    padding: 10px 0;
    height: 60px;
  }

  .top-nav li { padding: 0; }

  .logo img {
    max-width: 300px;
    max-height: 40px;
    margin: 0 auto;
    width: auto;
  }

  .padding-2x.logo { padding: 14px 0 14px 45px !important; }

  /* Mobile menu */
  .top-nav, .nav-text, .top-nav li a, .background-white .top-nav li a {
    background: none repeat scroll 0 0 #454545;
    color: #fff !important;
  }

  .top-nav li a, .background-white .top-nav li a {
    font-size: 1.1em;
    padding: 1em;
    text-align: center;
  }

  .nav-text::after { color: #454545; }
  .nav-text { margin-right: 0; }

  .padding-2x { padding: 2.5rem 1.25rem !important; }

  .owl-nav, .owl-dots { display: none; }
  .carousel-main .owl-item img { max-width: 300%; width: auto; }
  .background-image { background-position: center; }
}