#gallery {
    padding: 0 10px;
    margin-top: 10px;
}

#gallery>.body {
    padding: 10px;
    background: #fff;
    border: 1px solid #999
}

#gallery .gallery .main-image {
    border: 1px solid #c5c7c9
}

#gallery .gallery .additional-images a,
#gallery .gallery .main-image {
    background-position: center
}

#gallery .gallery .main-image {
    background-size: contain
}

#gallery .gallery .additional-images a {
    background-size: cover
}

#gallery .gallery .main-image iframe {
    width: 100%;
    height: 100%
}

#gallery .tags>.flex {
    height: 100%
}

#gallery .tags a,
#gallery .tags a span {
    display: block;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s
}

#gallery .tags a {
    padding: 0 10px;
    border: 1px solid #2e2e2e;
    text-transform: uppercase;
    color: #2e2e2e;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 2px;
    font-weight: 700
}

#gallery .tags a:not(.view-all) {
    margin-bottom: 10px
}

#gallery .tags a .before {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    font-size: 20px;
    line-height: 20px;
    color: #fff
}

#gallery .tags a.active,
#gallery .tags a:not(.view-all):hover {
    color: #fff
}

#gallery .tags a.house1 .before,
#gallery .tags a.house1.active,
#gallery .tags a.house1:hover,
#gallery .tags a.house2 .before,
#gallery .tags a.house2.active,
#gallery .tags a.house2:hover,
#gallery .tags a.house3 .before,
#gallery .tags a.house3.active,
#gallery .tags a.house3:hover,
#gallery .tags a.house4 .before,
#gallery .tags a.house4.active,
#gallery .tags a.house4:hover,
#gallery .tags a.office .before,
#gallery .tags a.office.active,
#gallery .tags a.office:hover {
    background: #1c4a47
}

#gallery .tags a.business .before,
#gallery .tags a.business.active,
#gallery .tags a.business:hover {
    background: #2e2e2e
}

#gallery .tags a.commerce .before,
#gallery .tags a.commerce.active,
#gallery .tags a.commerce:hover {
    background: #4a4a4a
}

#gallery .tags a.territory .before,
#gallery .tags a.territory.active,
#gallery .tags a.territory:hover {
    background: #1c4a1e
}

#gallery .tags a.parking .before,
#gallery .tags a.parking.active,
#gallery .tags a.parking:hover {
    background: #1c334a
}

#gallery .tags a.video .before,
#gallery .tags a.video.active,
#gallery .tags a.video:hover {
    background: #4a1c1c
}

#gallery .tags a.video .before::before,
#gallery .tags a.view-all .before::before {
    content: '';
    position: absolute
}

#gallery .tags a.view-all .before::before {
    left: 2px;
    top: 17px;
    border: 4px solid transparent;
    border-left: 7px solid #2e2e2e
}

#gallery .tags a.video .before::before {
    top: 12px;
    left: 15px;
    border: 8px solid transparent;
    border-left: 13px solid #fff
}

#gallery .gallery .additional-images a {
    display: block;
    width: 25vh;
    height: 15vh
}

#gallery .gallery .additional-images a.active::before,
#gallery .gallery .additional-images a:hover::before {
    content: '';
    position: absolute;
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    top: -5px;
    left: -5px;
    border: 1px solid #323232
}

#gallery .gallery .additional-images {
    margin-left: 5px;
    overflow: hidden;
    height: 100%;
    max-height: 100%
}

#gallery .gallery .additional-images .mCSB_inside>.mCSB_container {
    margin-right: 15px
}

.popup-gallery .next,
.popup-gallery .prev {
    background: rgba(0, 0, 0, .8)
}

.popup-gallery .image iframe {
    height: 100%;
    width: 100%;
    display: block;
    margin: 0 auto
}

#gallery .gallery .additional-images a {
    margin: 10px 5px 10px 5px
}

#gallery .tags ul {
	padding: 0;
	margin: 0;
}

#gallery .tags .list:not(:hover) .sub {
	opacity: 0;
	pointer-events: none;
}

#gallery .tags .sub {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	z-index: 1;
}

#gallery .tags .sub li {
	display: block;
}

#gallery .tags .sub a {
	margin: 0;
	padding: 13px 12px;
	background: #fff;
}

#gallery .tags .sub a:hover {
	background: #1c4a47;
}

#gallery .tags .sub li:first-child a {
	border-top: 0;
}

#gallery .tags .sub li:not(:last-child) a {
	border-bottom: 0;
}

@media (min-width:769px) {
    #gallery {
        margin-left: 51px
    }
    #gallery .gallery {
        margin-right: 10px
    }
    #gallery .gallery,
    #gallery .gallery .main-image {
        height: 85vh
    }
    .gallery .main-image .next,
    .gallery .main-image .prev {
        background: rgba(0, 0, 0, .4)
    }
    #gallery .gallery .additional-images a:first-child {
        margin-top: 5px
    }
    #gallery .gallery .additional-images.loaded {
        overflow-y: visible
    }
}

@media (max-width:768px) {
    #gallery .gallery .additional-images .inner {
        display: -webkit-inline-box!important;
        display: -webkit-inline-flex!important;
        display: -moz-inline-box!important;
        display: -ms-inline-flexbox!important;
        display: inline-flex!important;
        -webkit-align-self: auto
    }
    .gallery .main-image {
        height: 50vw
    }
    #gallery .gallery .additional-images.loaded {
        overflow-x: visible
    }
    #gallery .gallery .additional-images .mCSB_inside>.mCSB_container {
        margin-bottom: 23px
    }
    .popup-gallery .next,
    .popup-gallery .prev {
        border-top: 1px solid rgba(255, 255, 255, .4)
    }
    .popup-gallery .image.video {
        padding-top: 60px
    }
}