@font-face {
      font-display: swap;
      font-family: GoboldRegular;
      src: url("../fonts/GoboldRegular.otf") format("opentype");
  }
  @font-face {
      font-display: swap;
      font-family: GoboldLight;
      src: url("../fonts/GoboldLight.otf") format("opentype");
  }

  /* cyrillic-ext */
@font-face {
  font-display: swap;
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0-ExcOPIDUg-g.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-display: swap;
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0aExcOPIDUg-g.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-display: swap;
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0yExcOPIDUg-g.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-display: swap;
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0KExcOPIDU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  body{
    font-family: PT Sans, arial,helvetica;
    font-weight: normal;
  }

/* Style for our header texts
  * --------------------------------------- */
  h1.name{
    font-size: 62px;
    font-family: GoboldRegular, arial,helvetica;
    color: #ffffff;
    margin:0;
    padding:0;
    text-align: left;
    letter-spacing: 3px;
  }
  h2.jobtitle{
    color: #cfc801;
    font-family: GoboldLight, arial,helvetica;
    font-size: 37px;
    text-align: left;
    letter-spacing: 3px;
  }
  h3.section-header{
    color: #cfc801;
    font-family: GoboldRegular, arial,helvetica;
    color: white;
    font-size: 58px;
    text-align: left;
    margin-bottom: 10px;
  }
  h3.section-header:after {
   content: " .";
   color: #cfc801;
  }
  /* gallery: line up with the section header (nanoGallery centers it by default) */
  #nanoGallery .nanoGalleryContainerParent{
    text-align: left;
    margin: 0 -5px; /* thumbnails have 5px padding around the image */
  }
  #nanoGallery .nanoGalleryPagination{
    margin-left: 0;
    text-align: left;
  }
  h4.title{
    color: #cfc801;
    font-family: GoboldRegular, arial,helvetica;
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
  }


  /* Centered texts in each section
  * --------------------------------------- */
  /* Defining each sectino background and styles
  * --------------------------------------- */
  #section0{
    background-image: url(../img/bg1.png);
    background-size: 40%;
    background-position:  left bottom;
    background-repeat: no-repeat;

  }
  .bg2{
    background-image: url(../img/bg2.png);
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Bottom menu
  * --------------------------------------- */
  #infoMenu li a {
    color: #fff;
  }

  /// CUSTOM
  .left-align{
    text-align: left;
  }
  .row{
    display: flex;
    width: 50%;
    justify-content: center
  }
  .section-text{
    color: white;
    text-align: left;
    font-size: 16px;
  }

/* MENU */

#menu li {
  display:inline-block;
  margin: 10px;
  color: #FFF;
}
#menu li.active{
  color: #cfc801;
}
#menu li a{
  text-decoration:none;
  color: #fff;
}
#menu li.active a:hover{
  color: #cfc801;
}
#menu li:hover{
  color: #cfc801;
}
#menu li:visited{
  color: #fff;
}
#menu li a,
#menu li.active a{
  padding: 9px 18px;
  display:block;
}
#menu li.active a{
  color: #cfc801;
}
#menu{
  position:fixed;
  top:0;
  height: 40px;
  z-index: 70;
  width: 100%;
  left: 55%;
  padding: 0;
  margin: 0 auto;
}


div.boltforms-row, form.boltforms > div > div {
    margin: 0.75em 0;
}

.boltform label.required:after {
}

.boltform label {
  display: none;
}

p.boltform-debug, p.boltform-error, li.boltform-error, p.boltform-info, p.boltform-message {
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

p.boltform-debug {
    border: 1px solid #EED3D7;
    color: #B94A48;
    background-color: #F2DEDE;
}

p.boltform-error {
    border: 1px solid #EED3D7;
    color: #B94A48;
    background-color: #F2DEDE;
}

ul.boltform-error {
    margin-left: 0;
    padding-left: 0;
}

li.boltform-error {
    list-style: none;
    border: 1px solid #EED3D7;
    color: #B94A48;
    background-color: #F2DEDE;
}

p.boltform-message {
    border: 1px solid #D6E9C6;
    color: #468847;
    background-color: #DFF0D8;
}

.boltforms-preview-image {
    display: inline-block;
}
.left{
  text-align: left;
}

.boltforms-row button, .boltforms-row button:active, form.boltforms button, form.boltforms button:active{
    float: right;
    display: block;
    background-color: #cfc801;
    border: 0px;
    border-radius: 0;
    color: black;
    font-family: GoboldRegular, arial,helvetica;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 12px 36px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
form.boltforms button:hover, form.boltforms button:focus{
    background-color: white;
    color: black;
}
/* keep the floated button inside the form (on mobile the text comes right after it) */
form.boltforms:after{
    content: "";
    display: table;
    clear: both;
}

/* contact text: top of the first line level with the first form field */
#section3 .section-text{
  margin-top: 0.75em;
}
#section3 .section-text > :first-child{
  margin-top: 0;
}

/* "Made by Axonet", at the bottom of the last section (fullPage has no room for a real footer) */
.credits{
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: #888;
}
.credits a{
  color: #888;
  text-decoration: none;
  border-bottom: 1px solid #555;
}
.credits a:hover{
  color: #cfc801;
  border-color: #cfc801;
}

/* Instagram icon, in the menu and above the credits */
a.instagram, .credits a.instagram{
  color: #fff;
  border: 0;
  line-height: 0;
}
a.instagram:hover, .credits a.instagram:hover{
  color: #cfc801;
}
a.instagram svg{
  vertical-align: middle;
}
.credits a.instagram{
  display: inline-block;
  margin-bottom: 10px;
}
#menu li.menu-instagram a{
  padding-left: 0;
  padding-right: 0;
}

.fp-tableCell{
  vertical-align: top;
  margin-top: 20px;
}
.grid-pad.first{
  margin-top: 20% !important;
}
.white{
  background-color: white;
  border: 1px solid red;
}

.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2);

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.item{
width: 300px;
padding: 5px;
margin-top: 5px;
}
.container-carousel{
  width: 300px;
}
.container-carousel img{
  float: left;
  width: 50% !important;
  display: block;
}
.owl-carousel .owl-item img{
  max-height: 150px;
  width: auto !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */
@media (max-width: 660px) {
    .section-text{
      font-size: 14px;
    }
    #menu{
      left: 0%;
      margin-left: 10px;
    }
    #menu li {
      display:inline-block;
      margin: 4px;
      color: #FFF;
    }
    #menu li a,
    #menu li.active a{
      padding: 3px 5px;
      display:block;
    }
    h3.section-header{
      font-size: 20px;
      padding-top: 10px;
    }
    #section0{
      background-image: url(../img/bg1.png);
      background-size: 70%;
      background-repeat: no-repeat;
      background-position: bottom left;
    }
    h1.name{
      font-size: 30px;
    }
    h2.jobtitle{
      font-size: 25px;
    }
    h4.title{
    font-size: 18px;
     margin: 0px 10px 0px 10px;
  }
  .input{
    /*margin: 4px;*/
    padding: 5px;
  }

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 660px) and (max-width: 820px)  {
    h1.name{
      font-size: 30px;
    }
    h2.jobtitle{
      font-size: 25px;
    }
    h3.section-header{
      font-size: 20px;
      padding-top: 10px;
    }
    h4.title{
      font-size: 18px;
      margin: 0px 10px 0px 10px;
    }

    #menu{
      float: right;
    }
    #menu li {
      display:inline-block;
      margin: 4px;
      color: #FFF;
    }
    #menu li a,
    #menu li.active a{
      padding: 3px 5px;
      display:block;
    }
    .section-text{
      font-size: 13px;
    }

}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}