.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
:root{
    --main-color:#F8510E;
    --secondary-color:#0E699E;
}

.maincontent_wrapper{
    padding-top:0;
}
#main-wrapper{
    overflow:hidden;
}

.content-wrapper {
max-width: 94%;
width:100%;
margin-inline: auto;
text-align: center;
padding-block: 20px;
}

.loader_bg {
    position: fixed;
    background-color: #fefefe;
    z-index: 9999;
    height: 100%;
    width:100%;
    }
    .loader {
        background-image:url('/imageserver/Reusable/vulcan-vents22/flame.png');
        background-size:100%;
        background-repeat: no-repeat;
        height:250px;
        width:150px;
        position: absolute;
        top:calc(50vh - 75px);
        left:calc(50vw - 75px);
        animation:flame 1.5s forwards;
        }
        @keyframes flame {
            100%{
                transform:scale(2) rotate(360deg);
            }
        }

img{
    width:100%;
}
h1{
    font-size:4rem;
}
h2{
    font-size:2.2rem;
}
h3{
    font-size:1.8rem;
    margin-top:0;
}
p{
    font-weight:300;
}
.highlight{
    font-style: italic;
    color:var(--main-color);
    font-weight:700;
}
.grid-5050{
    display:grid;
    grid-template-columns: repeat(2, 50%);
}
.hero{
    position: relative;
    height:51vw;
    max-height:700px;
    overflow: hidden;
}
#preload-img{
    position: absolute;
    top:0;
    left:0;
    background-image: url('/imageserver/Reusable/vulcan-vents22/preload-min.png');
    background-size:cover;
    background-position:center;
    height:51vw;
    max-height:700px;
    width:100%;
    animation: preload-img 25s forwards;
}
@keyframes preload-img{
    5%{
        opacity:1
    }
    20% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
#hero_sun{
    position: absolute;
    top:0;
    left:0;
    background-image: linear-gradient(to bottom left,rgba(0,0,0,0) 0%, #A36446 100%), url("/imageserver/Reusable/vulcan-vents22/sun-min.png");
    height:51vw;
    max-height:700px;
    width:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center;
    overflow:hidden;
    animation: sun 25s ease-in-out infinite;
}
@keyframes sun{
    0% {
        opacity:1;
    }
    25%{
        opacity:1;
    }
    30%{
        opacity:.5;
    }
    35%{
        opacity:0;
    }
    60%{
        opacity:0;
    }
    70%{
        opacity:.6;
    }
    100%{
        opacity:1;
    }
}
@keyframes embers{
    0% {
        opacity:0;
    }
    25%{
        opacity:.2;
    }
    35%{
        opacity:.4;
    }
    45%{
        opacity:.5;
    }
    50%{
        opacity:.2;
    }
    70%{
        opacity:.2;
    }
    75%{
        opacity:.4;
    }
    80%{
        opacity:.4;
    }
    85%{
        opacity:.2;
    }
    90%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
@keyframes flames{
    0% {
        opacity:0;
    }
    25%{
        opacity:0;
    }
    50%{
        opacity:.3;
    }
    70%{
        opacity:.3
    }
    80%{
        opacity:.2;
    }
    85%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
.hills{
    position: absolute;
    opacity:1;
    top:0;
    height:52vw;
    max-height:700px;
    width:100%;
    background-image:url("/imageserver/Reusable/vulcan-vents22/hills-min.png");
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    overflow:hidden;
}
#hills-charred{
    position: absolute;
    opacity:1;
    top:0;
    height:52vw;
    max-height:700px;
    width:100%;
    background-image:url("/imageserver/Reusable/vulcan-vents22/charred-min.png");
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    overflow:hidden;
    animation: charred 25s ease-in-out infinite;
}
@keyframes charred{
    0% {
        opacity:0;
    }
    85%{
        opacity:.5
    }
    90%{
        opacity:1;
    }
    95%{
        opacity:.5;
    }
    100%{
        opacity:0;
    }
}
.firestorm{
    position: absolute;
    opacity:0;
    top:5px;
    width:100%;
    background-image:url("/imageserver/Reusable/vulcan-vents22/firestorm-min.png");
    height:52vw;
    max-height:700px;
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    overflow:hidden;
    animation: firestorm 25s ease-in-out infinite;
}
@keyframes firestorm{
    0% {
        opacity:0;
    }
    25%{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    80%{
        opacity:1
    }
    90%{
        opacity:.2;
    }
    95%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
.houses{
    position: absolute;
    opacity:1;
    top:0;
    height:52vw;
    max-height:700px;
    width:100%;
    background-image:url("/imageserver/Reusable/vulcan-vents22/houses-min.png");
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    overflow:hidden;
    z-index:75;
}
.videoWrapper {
    position: absolute;
    top:0;
    left:0;
    width:100%;
}
.videoWrapper video {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.hero_flames{
    animation: flames 25s ease-in-out infinite;
}
#flames-bg{
    background-image: url('/imageserver/Reusable/vulcan-vents22/sun-min.png');
    background-size: cover;
    background-position: top;
    z-index:50;
}
#embers{
    animation: embers 25s ease-in-out infinite;
    top:0;
    left:0;
    z-index:100;
 
}
.hero-container{
    position: absolute;
    display:grid;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:200;
}

#logo{
    position: absolute;
    top:0;
    left:0;
}

.hero-content{
    grid-column:1/2;
    grid-row:1/2;
    padding-left:10%;
    align-self:center;
    color:#fff;
    position: relative;
    max-height:75vh;
    z-index:10;
    overflow-y:hidden;
}

.desktop{
    display: inline-block;
    max-height:125px;
    overflow:hidden;
    font-size:5rem;
    text-transform:uppercase;
    display:inline-block;
    margin:0 -5px;
    padding:0;
}

.hero-content h1#mobile{
    display:none;
}
#vents{
    margin-left:15px;
}
.hero-content h3{
    overflow-x:hidden;
}
#hero-subtitle1{
    display:inline-block;
    transform:translateY(125px);
    overflow-x:hidden;
    font-size:2rem;
}
#hero-subtitle2{
    display:inline-block;
    transform:translateY(125px);
    overflow:hidden;
    font-size:2rem;
}

.wildfire-para {
    text-align: start;
    padding: 15px;
    border: 3px solid #72727234;
    border-radius: 12px;
    font-size: 1.12em;
    margin-block: 15px;
    }
    
    .title24-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-inline: auto;
    align-items: center;
    }

    .title24-row p {
        text-align: start;
        max-width: 95%;
        margin-inline: auto;
    }
    
    .row-left {
    flex-basis: 660px;
    flex-grow: 1;
    }
    
    .row-right {
    flex-basis: 660px;
    flex-grow: 1;
    }
    
    .title24-image img {
    max-width: 100%;
    width: 100%;
    }
    
    .catalog-section {
    background-color: #ececec;
    padding-block: 12px;
    }
    
    .catalog-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 35px;
 
    }
    
    .catalog-row .catalog-card {
    position: relative;
    flex-basis: 510px;
    flex-grow: 1;
    align-content: stretch;
    transition: transform 1500ms ease all;
    text-decoration: none;
    }
    
    .catalog-row .catalog-card img {
    max-width: 500px;
    width: 100%;
    margin-inline: auto;
    }

    .catalog-row .catalog-card h3 {
        color: #ffffff;
        background-color: var(--main-color);
        border: 2px solid #ffffff;
        padding: 8px;
        margin: 5px auto;
        width: 300px;
        text-decoration: none;
        font-size: 1.2em;
    }

    .catalog-row .catalog-card:hover {
        transform: scaleY(-20px);
    }

    .catalog-row .catalog-card:hover h3{
        background-color: #888888;
        
    }


/* ============== Media Queries ============== */

@media screen and (max-width:992px) {
    body,html{
        font-size:14px;
    }
    .hero-content{
        padding-left:0;
        padding:0 5%;
    }
    .hero-content h1#mobile{
        display:none;
    }
    .hero-content h1#desktop{
        display:none;
    }
 
}
@media screen and (max-width:800px) {
#mobile{
       font-size:48px;
   }
    #logo{
        position: relative;
        top:0;
        left:0;
        max-width:200px;
    }
    .hero-container{
        display:block;
        text-align: center;
    }
    #hero-subtitle1{
        animation: herosub 1.5s 1.5s forwards;
        transform:translateY(0px);
    }
    #hero-subtitle2{
        animation: herosub 1.5s 1.8s forwards;
        transform:translateY(0px);
    }

    .hero-content h1{
        max-height:max-content;
    }

    .desktop{
        display: inline;
    }
}



@media screen and (max-width:600px) {
    #hero-subtitle1{
        display:none;
    }
    #hero-subtitle2{
        display:none;
    }
#mobile{
       font-size:32px;
   }
}

@media screen and (max-width:400px) {
   #mobile{
       font-size:28px;
   }
}