/*-------------------------------*/
/*- OFF CANVAS ------------------*/
/*-------------------------------*/
section[class*=' off-canvas-']{
    position: fixed;
    top: 0;
    padding: 40px 0;
    z-index: 1;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-in-out 0s;
}
.off-canvas-right{
    width: 240px;
    height: 100%;
    right: 0;
}
.off-canvas-left{
    width: 240px;
    height: 100%;
}
.off-canvas-top{
    width: 100%;
    height: 200px;
}

.open[class*=' off-canvas-']{
    opacity: 1;
    transform: scale(1);
    overflow-y: scroll;
}
.off-canvas-right.open + .wrapper-site{
    transform: translateX(-240px);
}
.off-canvas-left.open + .wrapper-site{
    transform: translateX(240px);
}
.off-canvas-top.open + .wrapper-site{
    transform: translateY(200px);
}

/*-------------------------------*/
/*- ADVANCED LAYOUTS ------------*/
/*-------------------------------*/
.advanced-layout{display: flex; flex-direction: row;}
.advanced-layout .container{margin: auto;}

.advanced-layout header .container{padding: 0;}

.advanced-layout-left header{order: 1; width: 20%;}
.advanced-layout-left .wrapper-content{order: 2; width: 80%;}

.advanced-layout-right header{order: 2; width: 20%;}
.advanced-layout-right .wrapper-content{order: 1;}
.advanced-layout-right .nav-vertical .sub-menu{left: -220px;}
.advanced-layout-right .nav-vertical li:hover > .sub-menu{left: -210px;}


/*-------------------------------*/
/*- HEADERS ---------------------*/
/*-------------------------------*/

    .header-site{background: #f3f3f3;}

    /*---------------------------*/
    /*- ALIGNMENT LEFT ----------*/
    .header-left .logo{float: left; overflow: hidden;}
    .header-left .sitename{margin: 0 10px 0 0;}

    .header-left .site-logo-link img{max-height: 60px; width: auto;}
    .header-left nav{float: right;}

    /*---------------------------*/
    /*- ALIGNMENT RIGHT ---------*/
    .header-right .logo{float: right; overflow: hidden;}
    .header-right .sitename{margin: 0 10px 0 0;}

    .header-right .site-logo-link img{max-height: 60px; width: auto;}
    .header-right nav{float: left;}

    /*---------------------------*/
    /*- ALIGNMENT CENTER --------*/
    .header-center{text-align: center;}
    .header-center .logo{float: none;}
    .header-center .site-description{display: block; margin: 0;}

        .header-center .site-logo-link + .site-description{margin-top: 10px;}
        .header-center .site-logo-link + .tagline{margin-top: 10px;}

    .header-center nav{clear: both; text-align: center; margin-top: 20px; line-height: unset;}

    /*---------------------------*/
    /*- ALIGNMENT INLINE --------*/
    .header-inline .logo{text-align: center;}
    .header-inline .site-description{display: block; margin: 0;}
    .header-inline .site-logo-link + .site-description{margin-top: 10px;}
    .header-inline .site-logo-link img{max-height: 60px; width: auto;}

    /*---------------------------*/
    /*- POSITION OVERLAY --------*/
    .header-fixed{background: none; position: absolute; top: 0px; left: 0; width: 100%; z-index: 100;}

    /*---------------------------*/
    /*- NAVIGATION POSITION -----*/
    .nav-clear .logo{float: none;}

        .nav-clear .site-logo-link + .sitename{margin-top: 10px;}
        .nav-clear .site-logo-link + .tagline{margin-top: 10px;}
        .nav-clear .sitename + .tagline{margin-top: 5px;}

    .nav-clear nav{float: none; clear: both; margin: 10px 0;}

    /*---------------------------*/
    /*- SECONDARY HEADER --------*/
    .header-secondary nav{margin: 0; font-size: 1.2rem;}
    .header-secondary .sub-menu{display: none;}

/*-------------------------------*/
/*- SLIDER ----------------------*/
/*-------------------------------*/

    /*---------------------------*/
    /*- SLIDER CONTENT ----------*/
    .swiper-container.container{padding: 0; max-width: 1000px;}
    
    .swiper-slide .container{position: relative; top: 50%;}
    
    .swiper-slide .copy-container{max-width: 1040px; margin: auto; padding: 0; position: relative; top: 50%; transform: translateY(-50%);}
    .swiper-slide .image-container{position: relative; top: 50%; transform: translateY(-50%); text-align: center;}

    .swiper-slide .overlay.darken{background-color: rgba(0, 0, 0, 0.2);}

    .swiper-slide .section-title.large .excerpt{max-width: none;}
    .swiper-slide.image-top.text-center .excerpt{max-width: 745px;}

    /*---------------------------*/
    /*- SLIDER IMAGES -----------*/

    .image-left .copy-container{float: right; width: 49%;}
    .image-left .image-container{float: left; width: 49%;}

    .image-right .copy-container{float: left; width: 49%;}
    .image-right .image-container{float: right; width: 49%;}

    .has-image.image-top .container{position: relative; top: 50%; transform: translateY(-50%);}
    .has-image.image-top .copy-container{top: auto; transform: none;}
    .has-image.image-top .image-container{top: auto; transform: none;}

    .image-top .copy-container + .image-container{margin-top: 40px;}

    /*---------------------------*/
    /*- SLIDER COPY -------------*/
    .swiper-slide .section-title{margin-bottom: 20px;}
    .swiper-slide.text-center .excerpt{margin-left: auto; margin-right: auto;}


    /*---------------------------*/
    /*- SLIDER NAVIGATION -------*/

        /*-----------------------*/
        /*- PAGINATION ----------*/
        .swiper-container .pages{position: absolute; bottom: 0px; opacity: 0; z-index: 2000; width: 100%; text-align: center;}
        .swiper-container:hover .pages{bottom: 16px; opacity: 1;}

        .swiper-container .swiper-pagination-switch{display: inline-block; width: 16px; height: 16px; margin: 0 8px; padding: 0; opacity: 0.7; background: transparent; border: 4px solid #fff; border-radius: 100px; overflow: hidden; text-indent: -999px;}
        .swiper-container .swiper-pagination-switch:hover{opacity: 1; background: #fff;}
        .swiper-container .swiper-pagination-switch.swiper-visible-switch.swiper-active-switch{opacity: 1; background: #fff;}

        /*-----------------------*/
        /*- ARROWS --------------*/
        .swiper-container .arrows{position: absolute; top: 50%; width: 100%; z-index: 2000; margin-top: -50px;}
        .swiper-container .arrows a{position: absolute; opacity: 0; display: block; width: 50px; height: 100px; background-repeat: no-repeat; background-position: center; background-size: 16px 30px; overflow: hidden;}
        .swiper-container .arrows .arrow-left{left: 0px; background-image: url(../images/slider-arrow-left.png);}
        .swiper-container .arrows .arrow-right{right: 0px; background-image: url(../images/slider-arrow-right.png);}

        .swiper-container:hover .arrows .arrow-left{left: 10px; opacity: 1;}
        .swiper-container:hover .arrows .arrow-right{right: 10px; opacity: 1;}


/*-------------------------------*/
/*- STORY -----------------------*/
/*-------------------------------*/
.story{font-size: 1.8rem;}

.story p{margin-bottom: 26px;}
.story ul{list-style: disc; margin: 0 0 26px 35px;}
.story ul li{list-style: disc; margin: 0 0 6px;}

.story ol{list-style: decimal; margin: 0 0 26px 35px;}
.story ol li{list-style: decimal; margin: 0 0 6px;}

.story ul ul, .story ul ol, .story ol ol, .story ol ul{margin-bottom: 0;}

.story a{border-bottom: 1px solid #ddd;}
.story a:hover{border-color: #999;}

.story .feature-list{list-style: none; margin-left: 15px;}

.story dl{margin: 0 0 26px;}
.story dd{margin-left: 36px;}

.story code, .story pre{}
.story img{display: block; max-width: 98%; height: auto;}

.story h1{margin-bottom: 26px; font-size: 3.2rem; font-weight: 600; color: #323232;}
.story h2{margin-bottom: 26px; font-size: 2.2rem; font-weight: 400; color: #323232;}
.story h3{margin-bottom: 26px; font-size: 2.0rem; font-weight: 400; color: #323232;}
.story h4{margin-bottom: 26px; font-size: 1.8rem; font-weight: 400; color: #323232;}
.story h5{margin-bottom: 26px; font-size: 1.4rem; font-weight: 400; color: #323232;}

.story table{font-size: 1.4rem;}

.story blockquote{padding: 20px; margin-bottom: 26px; background: #f0f0f0; color: #999;}
.story blockquote p:last-child{margin-bottom: 0;}

.wp-caption{max-width: 100%; padding: 10px; background: #f0f0f0;}
.wp-caption.alignright, .story img.alignright{float: right; max-width: 320px; margin: -10px 0px 10px 20px;}
.wp-caption.alignleft{float: left; max-width: 320px; margin: 0 20px 10px 0;}
.wp-caption p.wp-caption-text{padding: 10px 5px 5px; margin: 0; color: #777; font-size: 1.4rem;}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}


/*-------------------------------*/
/*- COMMENTS FORM ---------------*/
/*-------------------------------*/
.comment-notes{margin-bottom: 20px; font-size: 1.2rem; color: #999;}

p[class*='comment-form'] input{margin-bottom: 15px;}
p[class*='comment-form'] .required{color: #900;}

.comment-reply-title{font-size: 2.8rem; color: #323232;}
.logged-in-as{font-size: 1.6rem; color: #8F8F8F; margin-bottom: 20px;}
.form-allowed-tags{font-size: 1.4rem; margin-bottom: 15px;}
.form-allowed-tags code{padding: 0; background: none;}
.form-submit input[type=submit]{display: inline-block; padding: 4px 14px; background: #454545; border: none; border-radius: 4px; text-align: center; font-weight: 600; color: #fff; vertical-align: middle; cursor: pointer; transition: all 0.2s ease-in-out;}
.form-submit input[type=submit]:hover{background: #323232; color: #fff;}


/*-------------------------------*/
/*- WORDPRESS WIDGETS -----------*/
/*-------------------------------*/
.sidebar .widget li{padding: 0 0 6px; margin: 0 0 6px; border-bottom: 1px solid #ddd;}
.sidebar .widget li:last-child{border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
.sidebar .widget li ul{margin: 6px 0 0 10px;}

#footer .widget li{padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #ddd;}


/*-------------------------------*/
/*- MAP - ADD ON ----------------*/
/*-------------------------------*/
.row.has-map{padding-top: 0;}
.hatch-map img{width: auto; max-width: none;}