/* =========================================================================
   ------------------------ NORMALIZE AND CSS-RESET ------------------------
   ========================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body, div, span, h2, h3, p, a, ul, li, button, img, small, form, label, footer, header, nav, output, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  outline: 0;
  list-style: none;
  text-decoration: none;
  vertical-align: baseline;
  background: transparent;
  color: #fff;
}

footer, header, nav, section {
  display: block;
}

body {
  line-height: 1.2;
}

button {
  cursor: pointer;
}

/* =========================================================================
                                    GLOBAL
   ========================================================================= */
html {
  background-color: transparent;
}

body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* =========================================================================
                                    LAYOUT
   ========================================================================= */
/* ----------------------
    Containers
   ---------------------- */
.ubi-section-container {
  display: inline-block;
  width: 100%;
}

.ubi-element-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* ----------------------
    Size
   ---------------------- */
.full-height {
  height: 100%;
}

/* ----------------------
    Alignment
   ---------------------- */
/* Flex */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Absolute */
.abs-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Text Align */
.text-center {
  text-align: center;
}

/* ----------------------
    Spacing
   ---------------------- */
/* General */
.triple-padding {
  padding: 108px;
}

.triple-top-padding {
  padding-top: 108px;
}

.single-bottom-padding {
  padding-bottom: 36px;
}

.single-top-padding {
  padding-top: 36px;
}

@media (min-width:1699px) {
  .triple-padding {
    padding: 45px;
  }

  .triple-top-padding {
    padding-top: 45px;
  }

  .single-bottom-padding {
    padding-bottom: 47px;
  }
  .single-top-padding {
    padding-top: 33px;
  }
}

@media (max-width:1699px) {
  .triple-padding {
    padding: 72px;
  }

  .triple-top-padding {
    padding-top: 72px;
  }

  .single-bottom-padding {
    padding-bottom: 24px;
  }
  .single-top-padding {
    padding-top: 24px;
  }
}

@media (max-width:1499px) {
  .triple-padding {
    padding: 54px;
  }

  .triple-top-padding {
    padding-top: 54px;
  }

  .single-bottom-padding {
    padding-bottom: 18px;
  }
}

@media (max-width:959px) {
  .triple-padding {
    padding: 54px 36px;
  }
}

/* =========================================================================
                                     THEME
   ========================================================================= */
/* ----------------------
    Text
   ---------------------- */
@media (max-width: 1200px){
  html {
     font-size: 0.8vw;
  }
}

h1,
.h1 {
  font-size: 35px;
  line-height: 1.2;
}

@media (max-width: 339px) {
  h1,
  .h1 {
    font-size: 28px;
  }
}

h2,
.h2 {
  font-size: 29px;
  line-height: 1.3;
}

h3,
.h3 {
  font-size: 32px;
  line-height: 1.2;
}

h4,
.h4 {
  font-size: 20px;
  line-height: 1.2;
}

h5,
.h5 {
  font-size: 17px;
  line-height: 1.2;
}

h6,
.h6 {
  font-size: 14px;
  line-height: 1.2;
}

p,
li,
dt,
dd,
dl,
address,
label,
small,
pre,
code {
  font-size: 15px;
  line-height: 1.75;
}

aside p,
aside li,
aside dt,
aside dd,
aside dl,
aside address,
aside label,
aside small,
aside pre,
aside code {
  font-size: 0.933em;
}

/* ----------------------
    Background Colors
   ---------------------- */
/* (darkest to lightest) */
.ubi-dark-1 {
  background-color: #000;
}

.ubi-dark-2 {
  background-color: #121212;
}

.ubi-dark-3 {
  background-color: #1a1a1a;
}

.ubi-dark-4 {
  background-color: #121212;
}

.ubi-dark-5 {
  background-color: #0e0e0e;
}

/* Accent Color */
.ubi-accent {
  background-color: #26bbff;
}

.ubi-light-1 {
  background-color: #fff;
}

/* =========================================================================
                                    MODULES
   ========================================================================= */
/* ----------------------
    Header Navigation Menu
   ---------------------- */
/* Header Container */
.ubi-header {
  width: 100%;
  position: relative;
  display: inline-block;
  float: left;
  height: 82px;
  z-index: 10;
}

/* Header Logo */
.header-logo {
  fill: rgb(255, 255, 255);
  width: auto;
  float: left;
}

/* Header Navigation Container */
.header-menu {
  background-color: inherit;
  float: left;
  padding-left: 9px;
  height: 82px;
}

/* Header Navigation Items */
.nav-item {
  position: relative;
  color: #fff;
  text-align: center;
  float: left;
  font-size: 20px;
  padding: 16px 30px 12px;
  z-index: 99;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.first-nav-item {
  padding: 16px 14px 12px 12px;
}

/* Header Active Navigation Item */
.nav-item.active:after {
  background: #3498db;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.nav-item.active:after {
  transform: skew(-10deg);
  -webkit-transform: skew(-10deg);
  -moz-transform: skew(-10deg);
  -o-transform: skew(-10deg);
  background-image: url(../img/nav-item-bg.jpg);
  background-size: cover;
  background-position: right center;
}

/* Hamburger Menu */
.mobile-menu-button {
  position: relative;
  float: right;
  line-height: 0px;
  padding: 27px 36px;
  cursor: pointer;
  transition: 0.3s;
}

@media screen and (max-width: 960px) {
  .mobile-menu-button {
    display: inline-block;
    opacity: 1 !important;
  }
}

/* Hamburger Menu Animation */
.lines {
  position: relative;
}

.lines:before {
  top: 6px;
}

.lines:after {
  top: -6px;
}

.lines,
.lines:before,
.lines:after {
  display: inline-block;
  width: 20px;
  height: 2px;
  border-radius: 5px;
  background-clip: padding-box;
  background: #ffffff;
}

.lines:before,
.lines:after {
  position: absolute;
  left: 0;
  content: "";
  -webkit-transform-origin: 10px center;
  transform-origin: 10px center;
  transform-origin: 50% 50%;
  transition: top 0.3s 0.6s ease-in-out, transform 0.3s ease-in-out;
}

.close .lines {
  transition: background 0.3s 0s ease-in-out;
  background: transparent !important;
}

.close .lines:before {
  transform: rotate3d(0, 0, 1, 45deg);
}

.close .lines:after {
  transform: rotate3d(0, 0, 1, -45deg);
}

.close .lines:before,
.close .lines:after {
  transition: top 0.3s ease-in-out, transform 0.3s 0.5s ease-in-out;
  top: 0;
  width: 20px;
}

/* ----------------------
    Grid
   ---------------------- */
/* Grid Container */
.ubi-grid-container {
  position: relative;
  width: 100%;
}

/* Grid Column Spacing */
.equal-height-columns {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
}

.sm-gutter .ubi-grid-wrap {
  margin: -20px -20px 0 0;
}

.sm-gutter .grid-item-contianer {
  padding: 20px 20px 0 0;
}



/* Grid Columns */
.three-col .grid-item-contianer {
  width: 33.3333%;
  float: left;
}

.two-col .grid-item-contianer {
    width: 50%;
    float: left;
}

.one-col .grid-item-contianer {
    width: 100%;
    float: left;
    padding-bottom: 2.2%;
}

@media (max-width:959px) {
  .three-col .grid-item-contianer {
    width: 50%;
  }
}

@media (max-width:559px) {
  .three-col .grid-item-contianer {
    /* width: 100%; */
  }
}

/* Grid Item Content */
.grid-item {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  /* padding-top: 67%; */
  border-radius: 6px;
}

.grid-item-text {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  position: absolute;
  padding: 10px 8px;
  width: 100%;
  bottom: 0;
  text-align: left;
}

/* ----------------------
    Elements
   ---------------------- */
/* Titles */
.section-title:after {
  /* background: #3498db; */
  /* position: absolute; */
  /* content: ''; */
  /* width: 100%; */
  /* height: 100%; */
  /* top: 0; */
  /* left: 0; */
  /* z-index: -1; */
}

.section-title:after {
  /* transform: skew(-13deg); */
  /* -webkit-transform: skew(-13deg); */
  -moz-transform: skew(-13deg);
  -o-transform: skew(-13deg);
  /* background-image: url(../img/title-bg.jpg); */
  /* background-size: cover; */
}

/* Buttons */
.ubi-button {
  text-align: center;
  padding: 12px 45px;
  font-size: 15px;
  letter-spacing: 0.1px;
  color: #fff;
  background-color: transparent;
  border-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-radius: 50px;
  font-weight: 600;
}



/* =========================================================================
                                    RESPONSIVE
   ========================================================================= */

   /* =========================================================================
                                       GLOBAL
      ========================================================================= */
   @media (max-width: 1200px) {
     html {
       font-size: 0.8vw;
     }
   }

   /* ----------------------
       Spacing
      ---------------------- */
   /* General */
   @media (max-width: 1200px) {
     .triple-padding {
       padding: 3.8rem 2.7rem;
     }

     .triple-top-padding {
       padding-top: 4.8rem;
     }

     .single-bottom-padding {
       padding-bottom: 3.6rem;
     }

     .single-top-padding {
       padding-top: 3.6rem;
     }

     /* =========================================================================
                                        THEME
      ========================================================================= */
     /* ----------------------
       Text
      ---------------------- */
     h1,
     .h1 {
       font-size: 3.5rem;
       line-height: 1.2;
     }

     h2,
     .h2 {
       font-size: 2.9rem;
       line-height: 1.3;
     }

     h3,
     .h3 {
       font-size: 3.2rem;
       line-height: 1.2;
     }

     h4,
     .h4 {
       font-size: 2rem;
       line-height: 1.2;
     }

     h5,
     .h5 {
       font-size: 1.7rem;
       line-height: 1.2;
     }

     h6,
     .h6 {
       font-size: 1.4rem;
       line-height: 1.2;
     }

     p,
     li,
     dt,
     dd,
     dl,
     address,
     label,
     small,
     pre,
     code {
       font-size: 1.5rem;
       line-height: 1.75;
     }

     aside p,
     aside li,
     aside dt,
     aside dd,
     aside dl,
     aside address,
     aside label,
     aside small,
     aside pre,
     aside code {
       font-size: 0.933rem;
     }

     /* =========================================================================
                                       MODULES
      ========================================================================= */
     /* ----------------------
       Header Navigation Menu
      ---------------------- */
     /* Header Container */
     .ubi-header {
       height: 8.2rem;
     }

     /* Header Navigation Container */
     .header-menu {
       padding-left: 0.9rem;
       height: 8.2rem;
     }

     /* Header Navigation Items */
     .nav-item {
       font-size: 2.5rem;
       padding: 1.6rem 3rem 1.2rem;
       letter-spacing: 0;
     }

     .first-nav-item {
       /* padding: 1.6rem 1.4rem 1.2rem 1.2rem; */
     }

     /* Header Active Navigation Item */
     /* Hamburger Menu */
     .mobile-menu-button {
       line-height: 0rem;
       padding: 2.7rem 3.6rem;
     }

     /* Hamburger Menu Animation */
     .lines:before {
       top: 1.2rem;
     }

     .lines:after {
       top: -1.2rem;
     }

     .lines,
     .lines:before,
     .lines:after {
       width: 4rem;
       height: 1px !important;
       border-radius: 0.5rem;
     }

     .lines:before,
     .lines:after {
       -webkit-transform-origin: 2rem center;
       transform-origin: 2rem center;
     }

     .close .lines:before,
     .close .lines:after {
       width: 4rem;
     }

     /* ----------------------
       Grid
      ---------------------- */
     .sm-gutter .ubi-grid-wrap {
       margin: -2rem -2rem 0 0;
     }

     .sm-gutter .grid-item-contianer {
       padding: 2rem 2rem 0 0;
     }

     /* Grid Item Content */
     .grid-item {
       border-radius: 0.6rem;
     }

     .grid-item-text {
       border-bottom-left-radius: 0.6rem;
       border-bottom-right-radius: 0.6rem;
       padding: 1rem 0.8rem;
     }

     /* ----------------------
       Elements
      ---------------------- */
     /* Buttons */
     .ubi-button {
       padding: 2.2rem 9rem;
       font-size: 2.6rem;
       letter-spacing: 0.01rem;
       border-width: 0.1rem;
       border-radius: 5rem;
     }
   }