/*
    Project: gCast
    Author: Andres Saavedra
*/

/* Global Styles */

/* Variables */

body {
    margin: 0;
}

:root {
    --white-colour: #fff;
    --black-colour: #000;
    --orange-colour: #F5A018;
    --space: 50px;
    --side-space: 50px;
}
  
  /* Colours */
  
  .white {
    color: var(--white-colour) !important;
  }
  .white-bg {
    background-color: var(--white-colour);
  }
  .orange {
    color: var(--orange-colour);
  }
  .orange-bg {
    background-color: var(--orange-colour);
  }
  .black-bg {
      background-color: var(--black-colour);
  }
  
  /* End Colours */
  
  /* Flexbox */
  
  .single-box-col-1{
    width: 8.333333333333333%;
    box-sizing: border-box;
  }
  .single-box-col-2{
    width: 16.6666666666666%;
    box-sizing: border-box;
  }
  .single-box-col-3{
    width: 25%;
    box-sizing: border-box;
  }
  .single-box-col-4{
    width: 33.3333333333%;
    box-sizing: border-box;
  }
  .single-box-col-5{
    width: 41.6666666667%;
    box-sizing: border-box;
  }
  .single-box-col-6{
    width: 50%;
    box-sizing: border-box;
  }
  .single-box-col-7{
    width: 58.3333333333%;
    box-sizing: border-box;
  }
  .single-box-col-8{
    width: 66.6666666667%;
    box-sizing: border-box;
  }
  .single-box-col-9{
    width: 75%;
    box-sizing: border-box;
  }
  .single-box-col-10{
    width: 83.3333333333%;
    box-sizing: border-box;
  }
  .single-box-col-11{
    width: 91.6666666667;
    box-sizing: border-box;
  }
  .single-box-col-12{
    width: 100%;
    box-sizing: border-box;
  }
  .flexbox {
    display: flex;
  }
  .flex-column {
    flex-direction: column;
  }
  .flex-center {
    align-items: center;
    justify-content: center;
  }
  .flex-start {
    align-items: center;
    justify-content: flex-start;
  }
  .flex-between {
    align-items: center;
    justify-content: space-between;
  }
  .flex-around {
    align-items: center;
    justify-content: space-around;
  }
  .wrap {
    flex-wrap: wrap;
  }
  @media screen and (max-width: 768px) {
    .reverse {
        flex-direction: column-reverse;
    }
    .single-box-col-1, .single-box-col-2, .single-box-col-3, .single-box-col-4, .single-box-col-5, .single-box-col-6, .single-box-col-7, .single-box-col-8, .single-box-col-9, .single-box-col-10, .single-box-col-11 {
        width: 100%;
        box-sizing: border-box;
    }
  }
  /* End Flexbox */
  
  /* General */
  
  .overflow-visible {
    overflow: visible;
  }
  .left {
    text-align: left;
  }
  .center {
    text-align: center;
  }
  .right {
    text-align: right;
  }
  .uppercase, .uppercase button {
    text-transform: uppercase;
  }
  button {
    background-image: none !important;
  }
  .no-padding-top {
    padding-top: 0 !important;
  }
  .no-padding-bottom {
    padding-bottom: 0 !important;
  }
  .no-padding-left {
    padding-left: 0 !important;
  }
  .no-padding-right {
    padding-right: 0 !important;
  }
  .underline {
    text-decoration: underline;
  }
  .full-width {
      width: 100%;
  }
  a {
    display: inline-block;
    margin: 15px 0;
    text-decoration: none;
  }
  p {
      margin-bottom: 35px;
  }
  ol {
    max-width: 400px;
    counter-reset: custom-counter;
    list-style: none;
    padding-left: 60px;
  }
  ol li {
    margin: 0 0 2rem 0;
    counter-increment: custom-counter;
    position: relative;
  }
  ol li::before {
    content: counter(custom-counter);
    color: var(--white-colour);
    font-size: 1.5rem;
    font-weight: bold;
    position: absolute;
    --size: 32px;
    left: calc(-1 * var(--size) - 30px);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    top: 0;
    background: var(--orange-colour);
    border-radius: 50%;
    text-align: center;
  }
  @media screen and (min-width: 992px) {
    header .container {
        padding: 0 var(--side-space);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .container section {
        position: relative;
        padding: var(--space) var(--side-space);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .container .inner-section {
        position: relative;
        padding: calc(var(--space)/2) var(--side-space);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .reduced-width {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    .reduced-right-width {
        width: 75%;
        margin-right: auto;
    }
    .half-width {
        width: 55%;
        margin-left: auto;
        margin-right: auto;
    }
  }
  @media screen and (max-width: 991px) {
    header .container {
        padding: 0 calc(var(--side-space)/2);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    header .gcast-logo {
        flex-direction: column;
    }
    header .gcast-logo picture {
        text-align: left;
    }
    .container section {
        position: relative;
        padding: var(--space) calc(var(--side-space)/2);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .container .inner-section {
        position: relative;
        padding: calc(var(--space)/2) calc(var(--side-space)/2);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
  }
  
  /* End General */

/* Images */

picture, figure {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
}
img {
    max-width: 100%;
}
  
/* End Images */
  
  /* VHs */
  
  @media screen and (min-width: 992px) {
    .ten-vh {
        min-height: 10vh;
    }
    .twenty-vh {
        min-height: 20vh;
    }
    .thirty-vh {
        min-height: 30vh;
    }
    .fourty-vh {
        min-height: 40vh;
    }
    .fifty-vh {
        min-height: 50vh;
    }
    .sixty-vh {
        min-height: 60vh;
    }
    .seventy-vh {
        min-height: 70vh;
    }
    .eighty-vh {
        min-height: 80vh;
    }
    .ninety-vh {
        min-height: 90vh;
    }
    .hundred-vh {
        min-height: 100vh;
    }
    .ten-vh, .twenty-vh, .thirty-vh, .fourty-vh, .fifty-vh, .sixty-vh, .seventy-vh, .eighty-vh, .ninety-vh, .hundred-vh {
        max-height: 1080px;
    }
  }
  
  /* End VHs */
  
  /* Paddings and Margins */
  
  .vertical-half-padding {
    padding-top: calc(var(--space)/2) !important;
    padding-bottom: calc(var(--space)/2) !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .vertical-padding {
    padding-top: var(--space) !important;
    padding-bottom: var(--space) !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .padding-around {
    padding: 10px !important;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .margin-around {
    margin: 10px !important;
  }
  
  /* End Paddings /*
  
  /* End Global */
  
  /* gCast */
  
  /* Fonts */

  body {
    color: #717171;
    font-family: 'Montserrat', sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
        color: var(--black-colour);
  }
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 4em;
  }
  h3 {
      font-size: 2.2em;
  }
  h4 {
    font-size: 1.4em;
  }
  p {
    line-height: 1.6em;
  }

  /* End Fonts */
  
  /* End gCast */