/* Define font families */
@font-face {
  font-family: 'Circular Std Black';
  src: url('../assets/fonts/circular/CircularStd-Black.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Book';
  src: url('../assets/fonts/circular/CircularStd-Book.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Medium';
  src: url('../assets/fonts/circular/CircularStd-Medium.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Black Italic';
  src: url('../assets/fonts/circular/CircularStd-BlackItalic.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Bold';
  src: url('../assets/fonts/circular/CircularStd-Bold.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Bold Italic';
  src: url('../assets/fonts/circular/CircularStd-BoldItalic.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Book Italic';
  src: url('../assets/fonts/circular/CircularStd-BookItalic.otf') format('woff');
}

@font-face {
  font-family: 'Circular Std Medium Italic';
  src: url('../assets/fonts/circular/CircularStd-MediumItalic.otf') format('woff');
}

/* Set default styles for all elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  font-family: 'Circular Std Medium';
  font-size: 16px;
  line-height: 1;
  color: #fff;
  background-color: #1A213D;
}

/* Set styles for headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
  color: #fff;
}

h1 {
  font-size: 4rem;
  font-family: 'Circular Std Medium';
}

h2 {
  font-size: 3rem;
  font-family: 'Circular Std Medium';
}

h3 {
  font-size: 2rem;
  font-family: 'Circular Std Medium';
}

h4 {
  font-size: 1rem;
  font-family: 'Circular Std Medium';
}

h5 {
  font-size: 0.8rem;
  font-family: 'Circular Std Medium';
}

h6 {
  font-size: 0.6rem;
  font-family: 'Circular Std Medium';
}

/* Set styles for paragraphs and lists */
p, ol, ul {
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.5;
  font-family: 'Circular Std Medium';
}

ol, ul {
  padding-left: 20px;
}

/* Set styles for images */
img {
  height: auto;
}

/* Set styles for links */
a {
  text-decoration: none;
}


/* ! Grid System */
.grid { margin: 0 auto; padding: 0 15px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}

/* ! Helpers  */
.mt-0{margin-top: 0; }
.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.mt-3{margin-top: 40px;}
.mt-4{margin-top: 100px; }

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mb-3{margin-bottom: 40px;}
.mb-4{margin-bottom: 100px;}

.p-0{padding: 0;}
.p-1{padding: 10px;}
.p-2{padding: 20px;}
.p-3{padding: 40px;}
.p-4{padding: 100px;}

.pt-1{padding-top: 10px;}
.pt-3{padding-top: 20px;}
.pt-3{padding-top: 40px;}
.pt-4{padding-top: 15vh;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 40px;}
.pb-4{padding-bottom: 15vh;}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}