/**
 * CSS Lock
 * @param  float     $min-size:  1            Lowest value for the lock
 * @param  float     $max-size:  1.4          Highest value for the lock
 * @param  integer   $min-width: 20           Smallest width for lock
 * @param  integer   $max-width: 100          Largest width for lock
 * @param  string    $property:  font-size    Property to apply the lock on
 * @param  string    $unit:      px           Unit of the property to apply
 */
/**
 * Fonts
 **/
@font-face {
  font-family: "Chivo-Regular";
  src: url("../fonts/Chivo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/**
 * Colours
 **/
/**
 * CSS
 **/
/**
 * LAYOUT
 **/
/**
 * Breakpoints
 **/
h1, h2, h3, h4, h5, h6, p {
  color: #000000;
  font-family: 'Sarabun', sans-serif;
  font-weight: normal;
}

a {
  color: inherit;
  font-family: 'Sarabun', sans-serif;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  -webkit-transition: linear 250ms;
  transition: linear 250ms;
}

/**
 * Font sizes
 **/
h1,
h2,
h3,
h4 {
  margin: .5em 0;
  font-weight: 600;
  color: #000000;
  line-height: 1.2em;
}

h1 {
  font-size: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
}

@media (max-width: 320px) {
  h1 {
    font-size: 20px;
  }
}

@media (min-width: 1920px) {
  h1 {
    font-size: 40px;
  }
}

h2 {
  font-size: calc(21px + (37 - 21) * ((100vw - 320px) / (1920 - 320)));
}

@media (max-width: 320px) {
  h2 {
    font-size: 21px;
  }
}

@media (min-width: 1920px) {
  h2 {
    font-size: 37px;
  }
}

h3 {
  font-size: calc(16px + (27 - 16) * ((100vw - 320px) / (1920 - 320)));
}

@media (max-width: 320px) {
  h3 {
    font-size: 16px;
  }
}

@media (min-width: 1920px) {
  h3 {
    font-size: 27px;
  }
}

h3 {
  font-size: calc(16px + (27 - 16) * ((100vw - 320px) / (1920 - 320)));
}

@media (max-width: 320px) {
  h3 {
    font-size: 16px;
  }
}

@media (min-width: 1920px) {
  h3 {
    font-size: 27px;
  }
}

img {
  display: block;
}

p {
  line-height: 1.2em;
  margin: .2em 0;
}

body {
  margin: 0;
}

article {
  background-image: url("../../assets/img/bg.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 100vh;
}

.case-study {
  padding: 1rem;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mid-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1000px;
  margin: 0 auto 2rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-container .sm-container {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 22.5%;
          flex: 1 0 22.5%;
  margin-right: 1.5rem;
}

.flex-container .sm-container:last-child {
  margin-right: 0;
}

.flex-container.margin-btm {
  padding-bottom: 2rem;
}

.heading {
  margin-bottom: 1rem;
}


.margin-bottom {
  margin-bottom: 0;
}

.margin-top {
  margin-top: 2rem;
}
.border {
  border: 2px solid #fff;
  background: #2a2929;
}

.board {
  width: 100%;
  height: auto;
}

.modal {
  background: #000;
  border-radius: 0;
  padding: 0;
  max-width: 130vh;
}

.modal img {
  height: 100%;
}

.case-study-thumb {
  width: 100%;
  height: auto;
}

strong {
  font-weight: 700;
  font-size: 1.125rem;
}

p {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.play {
  position: relative;
}

.play:before {
  display: block;
  content: '';
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 60 60' style='fill:white;enable-background:new 0 0 60 60;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45.563,29.174l-22-15c-0.307-0.208-0.703-0.231-1.031-0.058C22.205,14.289,22,14.629,22,15v30 c0,0.371,0.205,0.711,0.533,0.884C22.679,45.962,22.84,46,23,46c0.197,0,0.394-0.059,0.563-0.174l22-15 C45.836,30.64,46,30.331,46,30S45.836,29.36,45.563,29.174z M24,43.107V16.893L43.225,30L24,43.107z'/%3E%3Cpath d='M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30 S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z'/%3E%3C/g%3E%3C/svg%3E%0A");
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
}

header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 2.5rem;
}

header .container img {
  width: auto;
}

header .container .logo {
  max-width: 350px;
  width: 100%;
  height: 100%;
}

header .container .logo-r {
  max-width: 180px;
  width: 100%;
  height: 100%;
}