/* 
File:   _global.scss 
Usage:  Declare global varibles for all scss
*/
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local(''), url('../webfonts/montserrat-v15-latin-500.woff2') format('woff2'), url('../webfonts/montserrat-v15-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: local(''), url('../webfonts/poppins-v15-latin-300.woff2') format('woff2'), url('../webfonts/poppins-v15-latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('../webfonts/poppins-v15-latin-regular.woff2') format('woff2'), url('../webfonts/poppins-v15-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: local(''), url('../webfonts/poppins-v15-latin-500.woff2') format('woff2'), url('../webfonts/poppins-v15-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: local(''), url('../webfonts/poppins-v15-latin-600.woff2') format('woff2'), url('../webfonts/poppins-v15-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: local(''), url('../webfonts/poppins-v15-latin-700.woff2') format('woff2'), url('../webfonts/poppins-v15-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'VideoJS';
  font-style: normal;
  font-weight: normal;
  src: local(''), url('../webfonts/videojs.woff2') format('woff2'), url('../webfonts/videojs.woff') format('woff');
}
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background: #044f94;
}
.container {
  padding-left: 4rem;
  animation: loadLeft 0.8s ease-in-out forwards;
}
h1 {
  font-size: 3rem;
  font-weight: 300;
}
hr {
  width: 33% !important;
  height: 0.1rem !important;
  background: rgba(255, 255, 255, 0.4);
}
p {
  font-size: 1.5rem;
  font-weight: 300;
}
p strong {
  font-weight: 600;
  color: #ffd207;
}
.logo {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  z-index: 10;
  height: 5.5rem;
}
.logo img {
  height: 100%;
}
a {
  font-weight: 600;
  color: #ffd207;
  text-decoration: none;
}
a:hover {
  color: #ffd207;
}
@media screen and (max-width: 320px) {
  .container {
    padding-left: 0rem;
    padding-right: 4rem;
  }
  h1 {
    font-size: 1.5rem;
  }
  p {
    font-size: 1rem;
  }
  .logo {
    left: 2rem;
    top: 2rem;
    height: 2.75rem;
  }
}
@media screen and (min-width: 321px) and (max-width: 540px) {
  .container {
    padding-left: 0rem;
    padding-right: 4rem;
  }
  h1 {
    font-size: 1.8rem;
  }
  p {
    font-size: 1.1rem;
  }
  .logo {
    left: 2rem;
    top: 2rem;
    height: 3.5rem;
  }
}
@media screen and (min-width: 541px) and (max-width: 960px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 4rem;
  }
  h1 {
    font-size: 2.25rem;
  }
  p {
    font-size: 1.25rem;
  }
  .logo {
    left: 3.5rem;
    top: 4rem;
    height: 4.5rem;
  }
}
@media screen and (min-width: 961px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  h1 {
    font-size: 2.25rem;
  }
  p {
    font-size: 1.25rem;
  }
  .logo {
    left: 3.5rem;
    top: 4rem;
    height: 4.5rem;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1367px) and (hover: none) and (pointer: coarse) {
  /* .container {
        padding-left: 3rem;
        padding-right: 3rem;
    } */
  /* h1 {
        font-size: 3rem;
    }

    p {
        font-size: 1.8rem;
    } */
  .logo {
    left: 3.5rem;
    top: 4rem;
    height: 4.5rem;
  }
}
@keyframes loadLeft {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  100% {
    transform: translate(2rem, 0);
    opacity: 1;
  }
}
.borderLeftRight {
  display: inline-block;
  position: relative;
}
.borderLeftRight::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -3px;
  left: 0;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.borderLeftRight::after {
  background: #ffd207;
}
.borderLeftRight:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}