:root {
    --pad-bottom: 6em;
}

@media all and (min-width: 992px) {
    :root {
      --pad-bottom: 8em;    
    }   
}

/* -----  Grid  ------------------------------------------- */

.container-fluid {
    max-width: 100em;
    padding-left: 6vw !important;
    padding-right: 6vw !important;
}

.container-fluid.pad-top {
    padding-top: var(--pad-bottom);
}
.container-fluid.pad-bottom {
    padding-bottom: var(--pad-bottom);
}

@media all and (min-width: 768px) {
    .container-fluid {
        padding-left: 7vw !important;
        padding-right: 7vw !important; 
    }    
}
@media all and (min-width: 992px) {
    .container-fluid {
        padding-left: 5vw !important;
        padding-right: 5vw !important; 
    }    
}
@media all and (min-width: 1200px) {
    .g-custom {
        --bs-gutter-x: 1.25rem !important;
        --bs-gutter-y: 1.5rem !important;
    }    
}
@media all and (min-width: 1400px) {
    .g-custom {
        --bs-gutter-x: 2rem !important;
        --bs-gutter-y: 2.5rem !important;
    }    
}
@media all and (min-width: 1600px) {
    .g-custom {
        --bs-gutter-x: 3rem !important;
        --bs-gutter-y: 3rem !important;
    }    
}

/* -----  Helpers  ------------------------------------------- */

.col-sec {
	color: #07192e;
}
.font-sec {
	font-family:"Bodoni Moda";
}
.textbox {
    font-size: 1em;
    font-weight: 400;
}
.textbox a {
	color: #339933;
	transition:color .3s;
}
.textbox a:hover {
	color: #003300;
}
.notransit {
	transition: none !important;
}

@media all and (min-width: 1400px) {
    .textbox {
        font-size: 1.1em;
    }    
}

.doFade {
	transition:transform 0.8s, opacity 0.8s;
	transform:translateY(50px);
	opacity:0 !important;
}
.fadein {
	transform:translateY(0);
	opacity:1  !important;
}

/* -----  Background  ------------------------------------------- */

.fullbg {background-image:url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 50%;resize: both;
}
#bg {
	position:fixed; width:100%; height:120vh;
	z-index:-1;
	top:0; left:0;
    opacity: 0;
    transition: opacity 1s;
}
@media all and (min-width: 768px) {
    #bg {
        position:absolute; width:100%; height:70%;
        z-index:-1;
        top:0; left:0;

    }   
}

/* -----  Headline  ------------------------------------------- */

.headline-holder {
    padding-top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 50px;
}
.headline {
    color: white;
    font-weight: 300;
    font-size: 3.5em;
    line-height: 110%;   
    margin-bottom: 1em;
    width: 100%;
}
.head-wonder {
    padding-left: 0.1em;
}
.head1 {
	color:#ffff99;
}
.headline span {
	font-weight:500 !important;
	font-style:italic;
}
@media all and (min-width: 480px) {
    .headline-holder {
        height: 100vh;
    }
    .head-wonder {
        padding-left: 0.5em;
    }
    .headline {
        font-size: 3.4em;
        line-height: 110%;    
        margin-bottom: 0;
        padding: 0;
    }    
}
@media all and (min-width: 768px) {
    .copy-holder {
        transition-delay: .8s;
    }
    .headline-holder {
        padding: 10em 0 2em;
        height: auto;
        display: block;
    }
    .head-wonder {
        padding-left: 0.5em;
    }
    .headline {
        font-size: 10vw;
        line-height: 110%;    
        margin-bottom: 0;
    }    
}
@media all and (min-width: 992px) {
    .headline {
        font-size: 8vw;
        line-height: 110%;        
    }    
}
@media all and (min-width: 1200px) {
    .headline-holder {
        padding: 10em 0 0em;
    }
    .headline {
        font-size: 7vw;
        line-height: 110%;        
    }      
}
@media all and (min-width: 1400px) {
    .headline {
        font-size: 6.5vw;
        line-height: 110%;        
    }        
}
@media all and (min-width: 1600px) {
    
}
@media all and (min-width: 1900px) {
    .headline {
        font-size: 6em;
        line-height: 110%;        
    }    
}


/* -----  Feature Box  ------------------------------------------- */

.feature-box {
    background-color: rgba(0,0,0,0.8);
    padding: 0em 0px 0.5em 0;
    margin-bottom: 1em;

}
.feature-box figure img {
    object-fit: cover;
    aspect-ratio: 3 / 2;
}

.feature-box .feature-info-holder {
    display: flex;
    flex-direction: row;
    padding: 0em 1.5em 1em 1.5em;
    text-align: center;
}
.feature-box .feature-num {
    font-size: 0.9em;
}
.feature-box .ttl {
    text-transform: uppercase;
    font-size: 1.3em;
    line-height: 135%;
    margin-bottom: 10px;
    margin-top: 2px;
}

.feature-box a:hover {
	color: #fc6e6e;
}

.feature-info .desc, .feature-info a {
    font-size: 0.9em;
    line-height: 140%;
    color: #ccc;
}
.feature-box a {
    color: #ffcc66;
    transition:color .3s;
}

@media all and (min-width: 768px) {
    .feature-holder  {
      display: flex;
      flex-wrap: wrap;
    }
    .feature-box .feature-info-holder {
        padding: 0em 1.25em 0 1.25em;
    }
    .feature-box {
        height: 100% 

    }
    .feature-box .ttl {
        font-size: 1.3em;
        line-height: 130%;
        margin-bottom: 10px;
    }
    .feature-box figure img {
        object-fit: cover;
        aspect-ratio: 3 / 3;
    }
}
@media all and (min-width: 992px) {   
    .feature-box figure img {
        aspect-ratio: 3 / 3;
    } 
    .feature-box .ttl {
        font-size: 1.3em;
        line-height: 130%;
        margin-bottom: 10px;
    } 
	.fb2 {
		transition-delay:.15s;
	}
	
	.fb3 {
		transition-delay:.3s;
	}	
 	.fb4 {
		transition-delay:.45s;
	}   
}
@media all and (min-width: 1400px) {
	.feature-box .ttl {
        font-size: 1.3em;
        line-height: 130%;
    }
    .feature-box figure img {
        aspect-ratio: 3 / 2.5;
        
    } 
}
@media all and (min-width: 1600px) {
	.feature-box .ttl {
        font-size: 1.35em;
        line-height: 130%;
    }
}

/* -----  Hover  ------------------------------------------- */

@media (hover: hover) {
    .btn-read {
        color: #fc6e6e;
        transition: color .4s;
    }
    .feature-box figure {
        overflow: hidden;
    }
    .feature-box figure img {
        transition: .6s transform;
    }
    .feature-box:hover figure img {
        transform:scale(1.1);
    }
    .feature-box:hover .btn-read {
        color: #ffcc66;
    }
    .arte-holder img {
        transition: .4s transform;
    }    
    .arte-holder:hover img {
        transform:scale(1.2);
    }
}

/* -----  Timeline CTA  ------------------------------------------- */

.container-timeline {
    background: #292724;
}
.container-timeline .ttl {
    text-transform: uppercase;
    font-size: 2.5em;
    line-height: 130%;
    margin-bottom: 0.5em;    
}
.btn-explore {
	font-size:.9em;
	color: #ffcc66;
	border:1px solid #ffcc66;
	padding: 5px 12px;
	transition:color .3s;
	display:inline-block;
}

.btn-explore:hover {
	cursor:pointer;
	color: #fc6e6e;
}

/* =====  Bubble  ==================================================== */


.nav-bubble {
	position:absolute;
	text-align:center;
	top:0; left:0;
	z-index:9999;
	color:#eaeaea;
	font-weight:400;
	overflow:visible;
	width:200px;
	height:100px;
	max-width:14em;
	font-size:0.825em;
	letter-spacing:0.2px;
	line-height:150%;
	top:0%; left:50%;
	transition-delay:.2s;
	transform:translate(-50%, 0);
	transition:transform .6s;
	pointer-events: none;
}

.bubble-text {
	opacity:0;
	padding:.9em .9em;
	width:100%;
	background-color: rgba(0, 0, 0, .7);
	transform:translateY(0%);
	transition-delay:.2s;
	transition:opacity .6s;
	z-index:100;
	color:#dadada;
	border-radius:5px;
	font-size:1.1em;
	font-style:italic;
}
.bubble-line {
	position:absolute;
	z-index:-1;
	bottom:40px; left:50%;
	transform-origin: top center;
	transform:translateY(100%) scaleY(0);
	transition-delay:.2s;
	transition:transform .6s;
	height:4em;
	width:1px; border-left:1px solid #fff;
}

.nav-bubble-m {
	position:absolute;
	width:100%; height:100%;
	text-align:center;
	z-index:9999;
	background-color: rgba(0, 0, 0, .4);
	display:none;
}
.nav-bubble-m .pic {
	max-width:15em;
	margin:auto;
}
.bubble-text-m  {
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%, -50%);
	width:60%;
	max-width:25em;
	background-color: rgba(0, 0, 0, .8);
	font-size:0.85em;
	line-height:140%;
	font-weight:400;
	padding:1em 1.5em 2em 1.5em;
}

@media all and (min-width: 30em) { /*Min 480*/
	.bubble-text-m  {
	    font-size:0.925em;
	    line-height:145%;
		padding:2em 2em 3em 2em;
	}
}

@media all and (min-width: 48em) { /*Min 768 */
    .timeline-holder {
        
    }
	.arte-holder {
		height:100%;
		position:relative;
		display:flex;
	}
	.liner {
		position:absolute;
		width:100%;
		left:0;
		top:50%;
		height:1px; 
		border-bottom:1px solid purple;
	}
	.liner0 {
		border-color: #fc6e6e;
	}
	.liner1 {
		border-color: #a3abfd;
	}
	.liner2 {
		border-color: #99cc99;
	}
	.liner3 {
		border-color: #ffff99;
	}			
	.arte {
		position:relative;
		align-self: center;
	}

}
@media all and (min-width: 1200px) {
    .timeline-holder {
        padding: 0 3em !important;
    }
}
@media all and (min-width: 1400px) {
    .timeline-holder {
        padding: 0 4em !important;
    }
}

/* -----  Footer  ------------------------------------------- */

#footer-holder {
    background: #000;
}