@import "~bulma"
@import './colors';

html,body
  font-family: 'Open Sans', sans-serif !important;
  background: $white !important;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  overflow: hidden;

@font-face
  font-family: "Exo Black";
  src: url('../../static/fonts/exo-black.ttf') format('truetype');

#___gatsby
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;

.template-wrapper 
  position: relative;
  height: 100%;
  width: 100%;

.mainvid 
  height: auto !important;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: visible;
  width: 100vw;
  padding: 40px 0px;
@media screen and (min-width: 1024px)
  .mainvid
    margin-left: calc(480px - 50vw);
  
@media screen and (min-width: 1216px)
  .mainvid
    margin-left: calc(576px - 50vw);
@media screen and (min-width: 1408px)
  .mainvid
    margin-left: calc((672px - 50vw);
  
.content .taglist
  list-style: none
  margin-bottom: 0
  margin-left: 0
  margin-right: 1.5rem
  margin-top: 1.5rem
  display: flex
  flex-wrap: wrap
  justify-content: left
  align-items: center
  li
    padding: 0 2rem 1rem 0
    margin-bottom: 1.5rem
    margin-top: 0

.navbar
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 100;
  background: none !important;
  margin: 40px 0px;
  margin-bottom: 20px;
  .navbar-item
    padding: 0 !important;
  .title
    font-family: "Exo" !important;
    font-weight: 700 !important;
    font-size: 38px;

    color: $black;
    // padding: 0px 14px;
  .navbar-brand
    margin: 0 !important;
    margin-left: 0px !important;
  .navbar-start
    margin-left: 40px;
    margin-top: 22px;
    margin-left: auto;
    margin-right: 0px;
    .navbar-item
      padding: 0px
      margin-right: 14px;
      margin-top: -12px;
      color: $accent;
      font-weight: 600 !important;
      font-size: 20px !important;
      position: relative;
      text-decoration: none;
      pointer-events: all;
      cursor: pointer;
      &:before 
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: $accent;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
      &:hover:before
          visibility: visible;
          -webkit-transform: scaleX(1);
          transform: scaleX(1);

      &__active:before
          visibility: visible;
          -webkit-transform: scaleX(1);
          transform: scaleX(1);


.section
  padding: 0px !important;
  height: 100%;
  display: flex;
  flex-shrink: 1;
  position: relative;
  white-space: pre-wrap;
  &.work
    padding: 20px 0px !important;
    padding-bottom: 80px !important;
.contact-details
  display: flex;
  flex-direction: column;
  min-width: 400px;
  padding: 40px;
.column
  h3
    color: $black !important;
    font-weight: 700 !important;
    text-transform: lowercase;
    font-size: 18px;

.content
  padding: 0px 0px;
  h3
    color: $black !important;
    font-weight: 700 !important;
    text-transform: lowercase;
  p
    color: $black !important;
    font-weight: 500 !important;
    line-height: 20px;
.slick-slide
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
  div
    height: 100% !important;
.slick-list,.slick-track
  height: 100%;
.slick-slider
  height: 80%;
  width: 100%;
.container
.slick-arrow
  display: none !important;
