@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap');
:root {
	--teal: #00a99d;
	--graydark: #23282d;
	--graymid: #2e3338;
	--graylite: #34393d;
}
* {
	outline: none;
}
body {
	padding: 80px 0 0;
	margin: 0;
	background: white;
	color: rgba(0,0,0,0.5);
	font-family: Lato;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 300;
	position: relative;

}
h1,h2,h3 {
	font-weight: 300;
}
h1 {
	font-size: 2.5em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.5em;
}
a {
	text-decoration: none;
	color: #0af;
}
.white {
	color: white;
}
.black {
	color: black;
}
/*//////////*/
.padding {
	padding: 50px;
}
.body-container {
	display: flex;
	/*max-width: 1280px;*/
	margin: auto;
}
.body-container .body,
.body-container .sidebar {
	height: 100vh;
	overflow-y: scroll;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
div.body::-webkit-scrollbar,
div.sidebar::-webkit-scrollbar {
	width: 0 !important;
}
div.body {
	flex: 3;
}
div.sidebar {
	background: var(--teal);
}
div.sidebar .padding {
	background: rgba(255,255,255,0.75);
	min-height: calc(100vh - 100px);
}
div.sidebar h3,
div.sidebar a {
	color: var(--teal);
}
div.sidebar a {
	cursor: pointer;
}
div.sidebar h3 {
	padding: 0 0 15px;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--teal);
}
section.header,
section.footer {
	background: var(--teal);
}
section.header {
	position: fixed;
	width: 100vw;
	top: 0;
    z-index: 1;
}
section.header .contain {
	/*max-width: 1280px;*/
	margin: auto;
	padding: 20px 30px;
	position: relative;
}
section.footer {
	padding: 30px;
	color: rgba(255,255,255,0.5);
	clear: both;
}
/*//////////*/
#nav-logo,
.nav-links {
	display: inline-block;
	transition: .2s linear;
}
.nav-links a:hover {
	color: white;
	background: rgba(0,0,0,.1);
}
#nav-logo {
	/*width: 120px;*/
	height: 40px;
}
#nav-logo img {
	height: 100%;
	/*opacity: .5*/
}
.nav-links {
	/*overflow: auto;*/
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}
.nav-links .slide-out-logo,
#nav-links span.link-section {
	display: none;
}
.nav-links a {
	display: inline-block;
	padding: 13px 20px;
    margin-right: -3px;
	color: white;
	transition: .2s linear;
}
.nav-links a:last-child {
    margin-right: 0px;
}

#mobile-menu {
	overflow: auto;
    padding: 13.5px 16px;
    cursor: pointer !important;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
#mobile-menu span {
	width: 23px;
    height: 1px;
    background: white;
    display: block;
    margin: 5px 0;
    transition: .2s linear;
}
#mobile-menu:hover span {
    background: black;
}
/*//////////*/
#slide-out-tray {
	max-width: 400px;
	width: 100%;
    height: 100vh;
    background: var(--graymid);
    box-shadow: none;
    position: fixed;
    overflow: scroll;
    top: 0;
    right: -400px;
    transition: .2s linear;
    z-index: 3;
}
#slide-out-tray.show {
    display: block;
    box-shadow: 0 0 100px black;
    right: 0;
}
div#slide-out-tray:after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: block;
    position: fixed;
    top: 0;
    left: 100vw;
    opacity: 0;
    z-index: 1;
    transition: opacity .2s linear;
}
#slide-out-tray.show:after {
    opacity: 1;
    left: 0;
}
/*//////////*/
#slide-out-tray #slide-out-close,
.mobile-menu-close {
    cursor: pointer !important;
    /*background: rgba(255,255,255,.1);*/
    padding: 24px 15px;
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}
.mobile-menu-close {
    cursor: pointer !important;
    /*background: rgba(255,255,255,.1);*/
    padding: 24px 15px;
    display: none;
    top: 10px;
    right: -50px;
    z-index: 5;
}
#nav-links.show .mobile-menu-close {
	position: fixed;
}
#slide-out-close span,
.mobile-menu-close span {
	width: 20px;
    height: 1px;
    background: white;
    display: block;
    margin: 0;
    position: relative;
    transition: .2s linear;
}
#slide-out-close span:nth-child(1),
.mobile-menu-close span:nth-child(1) {
	transform: rotate(45deg);
    position: relative;
    top: 2px;
}
#slide-out-close span:nth-child(2),
.mobile-menu-close span:nth-child(2) {
	transform: rotate(-45deg);
	top: -2px;
}
#slide-out-tray #slide-out-close:hover span:nth-child(1),
.mobile-menu-close:hover span:nth-child(1) {
	top: 1px;
	background: black;
}
#slide-out-tray #slide-out-close:hover span:nth-child(2),
.mobile-menu-close:hover span:nth-child(2) {
    top: 0px;
    background: black;
}
/*//////////*/
.slide-out-content-wrap {
	position: relative;
	z-index: 3;
	background: var(--graymid);
	height: 100vh;
}
/*//////////*/

.slide-body {
	padding: 30px;
}
/*//////////*/
.mobile-menu-logo {
	display: none;
}
#slide-out-mobile-menu {
	display: none;
}
#slide-out-mobile-menu.show {
	display: block;
}
#slide-out-other-menu {
	display: none;
}
#slide-out-other-menu.show {
	display: block;
}
/*//////////*/
.portfolio-body {
	padding: 1px;
}
.portfolio-body .thumb-container {
	display: block;
    float: left;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: .5s linear;
    overflow: hidden;
    position: relative;
}
.portfolio-body .thumb-container.show {
    width: calc(12.5% - 4px);
    padding-top: 12.5%;
    margin: 2px;
    position: relative;
    opacity: 1;
    transition: .5s linear;
}
.portfolio-body .thumb-container img {
	object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/*//////////*/

#photo-filters a {
	color: var(--teal);
	display: block;
	padding: 10px 15px;
}
#photo-filters a:hover {
	background: rgba(0,169,157,.075);
}
.slide-out-header {
	display: none;
}
/*//////////*/
@media (max-width: 1500px) {
	.portfolio-body .thumb-container.show {
	    width: calc(20% - 4px);
	    padding-top: 20%;
	}
}
@media (max-width: 991px) {
    .portfolio-body .thumb-container.show {
	    width: calc(33.33% - 4px);
	    padding-top: 33.33%;
	}
	.mobile-menu-logo {
		display: block;
		text-align: left;
	}
	.mobile-menu-logo img {
		max-height: 40px;
	    width: 78px;
	}
	/**/
	section.header {
	    text-align: center;
	}
	#photo-filters .slide-out-header {
		display: block;
		color: white;
		padding: 15px 30px;
	    margin: 0 0 1px;
	    border: none;
		background: linear-gradient(90deg, rgba(0,0,0,.2), transparent);
	}
	/**/
	#nav-logo {
		text-align: center;
	    position: relative;
	}
	#mobile-menu {
	    display: block;
	}
	#photo-filters-header {
		cursor: pointer;
		text-align: center;
		padding: 0;
		margin: 0;
		border: none;
	}
	div.sidebar .padding {
		padding: 15px 30px;
	}
	#nav-links,
	#photo-filters {
		text-align: left;
		max-width: 400px;
	    width: 100%;
	    height: calc(100vh - 30px);
	    padding: 0 0 15px;
	    overflow-y: scroll;
	    transform: none;
	    background: var(--teal);
	    box-shadow: none;
	    position: fixed;
	    top: 0;
	    right: -400px;
	    transition: .2s linear;
	    z-index: 3;
	}
	#nav-links .mobile-menu-close,
	#nav-links .slide-out-logo,
	#photo-filters .mobile-menu-close {
		display: block;
	}
	#nav-links .slide-out-logo {
		border-bottom: 1px solid rgba(255,255,255,.05);
	}
	#nav-links .slide-out-logo img {
		height: 37px;
		display: block;
		text-align: center;
		margin: auto;
	}
	#nav-links a,
	#photo-filters a {
		display: block;
		margin: 0;
		padding: 15px 30px;
		color: white;
		cursor: pointer;
	}
	#photo-filters a:hover {
		background: rgba(0,0,0,.1);
	}
	#nav-links span.link-section {
		display: block;
		/*padding: 15px 30px;*/
		font-size: 1.25em;
		color: rgba(255,255,255,.25);
		background: linear-gradient(90deg, rgba(0,0,0,.2), transparent);
	}
	#nav-links.show,
	#photo-filters.show {
	    right: 0;
	}
	#nav-links.show .mobile-menu-close,
	#photo-filters.show .mobile-menu-close {
		right: 10px;
		transition: .2s linear;
	}
	#nav-links.show + .mobile-menu-overlay,
	#photo-filters.show + .mobile-menu-overlay {
		width: 100vw;
	    height: 100%;
	    background: rgba(0,0,0,0.75);
	    position: fixed;
	    top: 0;
	    right: 0;
	    z-index: 2;
	    transition: none;
	    cursor: e-resize;
	}
}
@media (max-width: 991px) {
	.body-container {
	    display: block;
	}
	.body-container .sidebar,
	.body-container .body  {
	    height: auto;
	    overflow-y: unset;
	}
	.body-container .sidebar .padding {
		min-height: auto;
	}
}