@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400&display=swap');
body{
	font-family: 'Oswald', sans-serif;
	transition: color 0.5s, background-color 0.5s;
}
@font-face {
  font-family: "encorpada_classicregular";
  src: url("encorpada_classic-webfont.woff2") format("woff2"), url("encorpada_classic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; 
}
h1{
	font-family: "encorpada_classicregular";
	font-size: 48px;
}
svg path{
	transition: fill 0.5s;
}
h2, p, a{
	transition: color 0.25s;
}
p{
	font-weight: 300;
}
div.hide{
	display: none;
}
header{
	background-color: white;
}
header .navbar-brand{
	position: relative;
	z-index: 2;
}
header .logo{
	height: 30px;
}
header svg path{
	transition: fill 0.25s;
}
.navbar{
	padding: 30px 20px;
}
.nav-item.sub{
	padding-left: 20px;
	margin-bottom: 20px;
}
.navbar-toggler-icon{
	position: relative;
	height: 1em;
	z-index: 2;
}
.navbar-toggler-icon:before, .navbar-toggler-icon:after{
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background-color: black;
	transition: width 1s ease, background-color 0.25s;
}
.navbar-toggler-icon:before{
	top: 0;
	left: 0;
}
.navbar-toggler-icon:after{
	bottom: 0;
	right: 0;
}
.navbar-toggler:hover .navbar-toggler-icon:before, .navbar-toggler:hover .navbar-toggler-icon:after{
	width: 70%;
}
.navbar-collapse{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	background-color: black;
	padding: 20px;
	padding-top: 100px;
	z-index: 1;
    -webkit-transition: opacity .25s;
    -o-transition: opacity .25s;
    -moz-transition: opacity .25s;
    transition: opacity .25s;
}
.navbar-collapse.collapse:not(.show) {
    display: block;
    opacity: 0;
    pointer-events: none;
}
.navbar.show svg path{
	fill: white;
}
.navbar.show .navbar-toggler-icon:before, .navbar.show .navbar-toggler-icon:after{
	background-color: white;
}
.nav-link{
	color: white;
	font-size: 24px;
	font-family: 'encorpada_classicregular';
}
.nav-link:hover{
	color: rgba(255, 255, 255, 0.8);
}
.jump{
	padding: 10px 20px;
	background-color: rgba(0,0,0,0.05);
	border-bottom: 1px solid rgba(0,0,0,0.8);
}
#collapseJump{
	padding: 10px 20px;
	border-bottom: 1px solid rgba(0,0,0,0.8);
}
.jump-link{
	color: black;
	text-decoration: none;
	display: block;
	padding: 10px 0;
}
#top{
	background-color: black;
}
#brands, #opus, #ideation, #ashley{
	padding-top: 100px;
	padding-bottom: 100px;
}
section .logo{
	margin-bottom: 40px;
	max-height: 200px;
}
section h2{
	margin-bottom: 40px;
}
#brands .logo{
	max-height: 140px;
	margin-bottom: 20px;
}
.social-links{
	margin-top: 30px;
	margin-bottom: 30px;
}
.social-links:after{
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background-color: black;
	margin-top: 20px;
	margin-left: 12px;
	transition: background-color 0.5s;
}
.social-links a{
	color: black;
	font-size: 22px;
	display: block;
	line-height: 1em;
	transform-origin: 11px 11px;
	transition: transform 0.5s ease, color 0.5s;
}
.social-links a:hover{
	transform: scale(1.15, 1.15);
}
.instagram_feed .round{
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.5s ease;
}
.instagram_feed .round:hover{
	transform: scale(1.15, 1.15);
}
footer{
	padding: 40px 0;
}
/* Colors 

#000000
#B07D62
#DDBEA8

*/
.color-1 body{
	background-color: #000000;
	color: white;
}
.color-1 section svg path{
	fill: white;
}
.color-1 h2, .color-1 p{
	color: white;
}
.color-1 .social-links a{
	color: white;
}
.color-1 .social-links:after{
	background-color: white;
}
.color-2 body{
	background-color: #B07D62;
	color: white;
}
.color-2 section svg path{
	fill: white;
}
.color-2 h2, .color-2 p{
	color: white;
}
.color-2 .social-links a{
	color: white;
}
.color-2 .social-links:after{
	background-color: white;
}
.color-3 body{
	background-color: #DDBEA8;
	color: black;
}
.color-3 section svg path{
	fill: black;
}
.color-3 h2, .color-3 p{
	color: black;
}
.color-3 .social-links a{
	color: black;
}
.color-3 .social-links:after{
	background-color: black;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	section .logo{
		margin-bottom: 0;
		max-height: none;
	}
	.navbar-collapse{
		padding: 100px;
		padding-top: 200px;
	}
	.nav-link{
		font-size: 32px;
	}
	.ratio-md-16x9{
		--aspect-ratio: calc(9 / 16 * 100%);
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}