/****************************** Headroom ******************************/

#fixed-wrapper {
    width: 100%;
    top: 0;
    z-index: 100;
    padding: 0;
    border-top: 5px solid var(--dark-green);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    position: relative;
}

/* Medium and up */
@media screen and (min-width: 40em) {
    #fixed-wrapper {
        padding: 2rem 0 !important;
    }
}

section#main-nav {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    max-width: 2000px;
    margin: 0 auto;
}

section#main-nav a,
section#main-nav i {
    color: #000;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

section#main-nav .off-canvas a,
section#main-nav .off-canvas i {
    color: var(--primary-color);
}


section#main-nav a:hover {
    color: var(--dark-green);
}

section#main-nav .menu .active > a {
    background: none;
    color: var(--hover);
}

/****************************** Reveal JS *********************************/
section.hero .reveal-viewport {
    height: 700px;
    max-height: 95%;
    width: 100%;
    background: none;
}

section.hero-page .reveal-viewport {
    height: 700px;
    max-height: 95%;
    width: 100%;
    background: none;
}

.reveal .slides > section {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.reveal .progress span {
    background-color: var(--primary-reveal);
}

.progress {
    margin-bottom: 0;
}

.slide-content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: normal;
    justify-content: flex-start;
    padding: 3rem;
    text-align: left;
}


.slide-content p {
    color: #000;
    background-color: rgba(255, 255, 255, .5);
    display: inline-block;
    padding: 3px 7px;
}

section.hero .reveal {
    display: block;
    max-width: 100%;
    overflow: hidden;
    top: 0;
    z-index: 1;
    height: 1080px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .1);
    border: 0 none;
}

.reveal {
    display: block;
    max-width: 100%;
    overflow: hidden;
    top: 0;
    z-index: 1;
    height: 900px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .1);
    border: 0 none;
}

.slide-content h2 {
    font-size: 4rem;
    margin: 0;
    transition: 1s all ease-out;
    color: var(--primary-reveal);
    text-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.slide-content p {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 100;
}

.reveal section.present .slide-content {
    background-color: var(--highlight-color);
    transition: 1s all ease-out;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

.reveal section.present .slide-content:hover {
    background-color: var(--shadow-color);
}

.reveal .controls button {
    color: var(--secondary-reveal);
}

@media screen and (max-width: 39.9375em) {
    section.hero,
    section.hero .reveal {
        height: 500px;
    }
    .slide-content h2 {
        font-size: 3rem;
    }
}

/****************************** Masonry Grid ******************************/
.grid-mas {
  max-width: 1200px;
}

/* clearfix */
.grid-mas:after {
  content: '';
  display: block;
  clear: both;
}

/****************************** Masonry Grid Item & Fancybox ******************************/
.grid-item {
  width: 25%;
  height: auto;
  float: left;
  padding: 10px;
}

.grid-item img {
    width: 100%;
    height: 100%;
}

.grid-item img:after {
  content: '';
  display: block;
  clear: both;
}

.mas-container {
    max-width: 1200px;
    margin: 70px auto 100px;
}

.fancybox-button svg {
    display: none;
}

.fancybox-button--arrow_right {
    opacity: 0.4 !important;
    background: url('../images/btn-right.png') center center no-repeat;
}

.fancybox-button--arrow_left {
    opacity: 0.4 !important;
    background: url('../images/btn-left.png') center center no-repeat;
}

.fancybox-slide {
    padding: 20px;
}

body.page-app .fancybox-content iframe {
    max-width: 1200px !important;
}

.fancybox-toolbar {
    display: none;
}

@media screen and (min-width: 1200px) {
    body.page-app .fancybox-content {
        max-width: 1200px;
    }
}

@media screen and (max-width: 1023px) {
    .grid-item {
      width: 33.333%;
    }
}

@media screen and (max-width: 639px) {
    .grid-item {
      width: 50%;
    }
}