/*
	PARTS
	- defined by 'ALL CAPS'
	- parts within parts, will cause styles to conflict & cascading issues
	- seperate into different files, eg: parts-main, parts-singles, parts-blog
*/



/* HEADER */

.HEADER {
	background: #fff;
	height: 100%;
	transition: background 0.25s;
	box-shadow: inset 0 -1px 0 rgba(84,88,90,0.3);
}

.HEADER .b-frame {
	padding-top: 0;
	padding-bottom: 0;
	height: 100%;
}

.HEADER .inset {
	position: relative;
	height: 100%;
}

.HEADER .two11-container {
	position: absolute;
	top: 0;
	right: 43px;
}

.HEADER .logo {
	position: absolute;
	display: block;
	top: 56%;
	left: 0;
	width: 424px;
	height: 78px;
	background: #333;
	transform: translate(0, -50%);
	transform-origin: 0 50%;
}

.HEADER .nav-trigger {
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	width: 40px;
	height: 40px;
	background: url(../img/ui-nav.svg) no-repeat center;
	transform: translate(0, -50%);
	transform-origin: 0 50%;
}

.HEADER nav {
	position: absolute;
	top: 56%;
	right: 0;
	height: 48px;
	transform: translate(0, -50%);
}

.HEADER nav a:not(.b-button) {color:#2C2A29;transition: color 0.25s;}
.HEADER nav a:not(.b-button):hover {color:#DA291C;}
.HEADER nav label.b-button {padding: 0 41px;}
/* teir 1 */

.HEADER nav > ul > li {
	position: relative;
	float: left;
	margin: 0 0 0 25px;
	line-height: 48px;
	height: 48px;
	font-size: 18px;
	font-weight: 700;
}

/* teir 2 */

.HEADER nav ul span {
	color: #2C2A29;
}
.HEADER nav ul span:hover {
	color: #DA291C;
}

.HEADER nav ul ul {
	display: block !important;
	position: absolute;
	overflow: hidden;
	top: 48px;
	left: 0px;
	background: #fff;
	border-radius: 19px;
	width: 375px;
	opacity: 0;
	transform: translate(0, 40px);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s, color 0.25s;
	box-shadow: 0 2px 12px 0 rgba(44,42,41,0.08);
}

.HEADER nav ul ul svg {
	display: inline-block;
	vertical-align: middle;
	width: 19px;
	margin-bottom: 3px;
}

.HEADER nav ul ul > li {
	padding: 10px 20px 12px 20px;
	line-height: 33px;
	font-size: 15px;
	font-weight: 400;
	color: #2C2A29;
	transition: all 0.25s;
}

.HEADER nav ul ul > li:hover a,  .HEADER nav > ul > li:hover > a:not(.btn) {
	color: #DA291C;
	background-color: #FFECEA;
}

.HEADER nav ul ul > li a {
	padding: 10px 17px;
	border-radius: 11px;
	transition: all 0.25s;
}

.HEADER nav > ul > li > span, .HEADER nav > ul > li > a:not(.btn) {
	padding: 5px 20px;
	border-radius: 11px;
	transition: all 0.25s;
}

.HEADER nav > ul > li:hover > span {
	background-color: #FFECEA;
    color: #DA291C;
    cursor: pointer;
}

.HEADER nav ul ul > li:first-child {padding-top:25px;}
.HEADER nav ul ul > li:last-child {padding-bottom:25px;}

/* teir 2 toggle functionality */

.HEADER nav > ul > li:hover > ul {
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: auto;
}

@media screen and (max-width: 900px) {
	.HEADER .logo {top: 50%; transform:translate(0, -50%) scale(0.6666);}
	.HEADER .nav-trigger {display:block;}
	.HEADER nav {display:none;}
}



/* FOOTER */

.FOOTER .b-frame {
	padding-bottom: 20px;
}

.FOOTER .logo {
    vertical-align: top;
    display: inline-block;
    width: 198px;
    height: 164px;
    background: url(../img/logo-footer.svg) no-repeat center;
	margin-left: -17px;
}

.FOOTER .nav-band {
	border-top: 3px solid #DA291C;
	border-bottom: 1px solid rgba(84,88,90,0.3);
}

.FOOTER .nav-band .b-columns .b-column:first-child {
	flex-grow: 1;
}

.FOOTER .nav-band a, .FOOTER .nav-band span {
	font-size: 16px;
	line-height: 43px;
}

.FOOTER .nav-band span {
	color: #2c2a2980;
}

.FOOTER .nav-band .subtitle {
	margin-top: 48px;
	font-size: 13px;
	line-height: 22px;
	color: #2c2a2980;
}

.FOOTER .legal-band .b-frame {
	padding-top: 30px;
	padding-bottom: 30px;
}

.FOOTER .legal-band {
	font-size: 13px;
	color: rgba(44,42,41,0.5);
}

.FOOTER .legal-band a {
	color: #282726;
	transition: color 0.25s;
}

.FOOTER .legal-band a:hover {
	color: #DA291C;
	transition: color 0.25s;
}

.FOOTER .legal-band .socials {
	text-align: right;
}

.FOOTER .legal-band .socials svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: 25px;
}
.FOOTER .legal-band .socials a:first-child svg {
    margin-left: 0px;
}

@media screen and (max-width: 900px) {
	.FOOTER .nav-band .b-columns {
		justify-content: space-between;
	}
	.FOOTER .legal-band .socials {
		text-align: left;
	}
}

/* NAV */

.NAV {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: #fff;
	transform: translate(0, -80px);
	transition: transform 0.25s;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
}

.NAV::-webkit-scrollbar {
	display: none;
}

.NAV .b-frame {
	padding-top: 20px;
}

.NAV nav {
	overflow: hidden;
}

.NAV nav input {
	display: none;
}

.NAV nav input ~ label {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 60px;
	background: rgba(0,0,0,0.0);
}

.NAV nav label + a {
	padding-right: 60px;
}

.NAV nav a:not(.b-button) {color:#282726;}
.NAV nav a:not(.b-button):hover {color:#DA291C;}
.NAV nav .b-button {width:100%;}

/* teir 1 */

.NAV nav > ul > li {
	color: #282726;
	position: relative;
	line-height: 60px;
	border-bottom: 1px solid #ddd;
	transition: all 0.25s; 
}

.NAV nav > ul > li:hover {
	color:#DA291C;
}

.NAV nav > ul > li > label {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 60px;
	background: url(../img/ui-expand.svg) center right no-repeat;
}

.NAV nav > ul > li > a {
	display: block;
	padding: 0;
}
.NAV nav > ul > li > ul {
	background-color: #f6f6f7;
}

.NAV nav > ul > li > ul > li > a {
	padding: 10px 0 10px 15px;
}

.NAV nav > ul > li > ul > li > a svg {
	display: inline-block;
	vertical-align: sub;
}

.NAV nav > ul > li:last-child {
	border-bottom: none;
	margin-top: 40px;
}

/* teir 2 */

.NAV nav ul ul {
	line-height: 40px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s;
}

.NAV nav ul ul li:first-child {margin-top:0px !important;}
.NAV nav ul ul li:last-child {margin-bottom:20px !important;}

.NAV nav ul ul li a {
	display: block;
	padding: 0 0 0 20px;
}

/* teir 2 show/hide functionality */

.NAV nav input:checked ~ label {transform:scaleY(-1);}
.NAV nav input:checked ~ label {width:60px;}
.NAV nav input:checked ~ ul {max-height:360px;}

#toggle-nav:checked ~ .b-nav .NAV {transform:translate(0, 0);}
#toggle-nav:checked ~ .b-page .HEADER {background:#fff;}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {background-image:url(../img/ui-nav-close.svg);}

/* fix to make sure the nav can always be closed */

#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {display:block;}
#toggle-nav:checked ~ .b-page[data-scroll] .b-page-head {transform:translate(0, 100%);}
#toggle-nav:checked ~ .b-page .HEADER nav {display:none;}



/* MODAL */

.MODAL {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translate(0, 80px);
	transition: transform 0.25s;
}

.MODAL .overlay {
	position: absolute;
	top: -100px;
	bottom: -100px;
	left: -100px;
	right: -100px;
	background: #000;
	opacity: 0.8;
}

.MODAL .frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 900px;
	max-width: calc(100% - 20px);
	max-height: calc(100% - 80px);
	background: #fff;
	transform: translate(-50%, -50%);
	transition: transform 0.25s;
	overflow: hidden;
}

.MODAL .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	background: no-repeat center url(../img/ui-nav-close.svg);
}

.MODAL .content {
	box-sizing: border-box;
	padding: 40px;
	max-height: 80vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* height: 500px; scrollable content areas need a fixed height */
}

/* fix for scroll in non-webkit browsers */

.MODAL .content {padding-bottom: 0 !important;}
.MODAL .content::after {content:"";	height:40px; display:block;}

.MODAL .image {
	padding-bottom: 50%;
	background: #eee no-repeat center;
	background-size: cover;
	margin: 20px 0;
}

#toggle-modal:checked ~ .b-modal .MODAL {transform:translate(0, 0);}

@media screen and (max-width: 900px) {
	.MODAL .frame {width:400px;}
	.MODAL .close {top:5px; right:5px;}
	.MODAL .content {padding:20px;}
	.MODAL .content::after {height:20px;}
}