Mini Shell

<style type="text/css">
	#sobre{position: relative; overflow: hidden}
	#sobre .flex{display: flex; justify-content: center; align-items: center; gap: 30px}
	#sobre .flex .item-flex{max-width: 20%}

	#sobre .bloco-imagens{padding: 80px 0}
	#sobre .btn-padrao{border: solid 1px #101010; color: #101010; border-radius: 100px; background: none; padding: 12px 30px}
	#sobre .btn-padrao:hover{background: #101010; color: #fff}

	#sobre .section1{padding: 80px 0; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,175,122,1) 100%); padding-bottom: 20px}
	#sobre .section1 h2{font-size: 16px}

    #footer{padding: 80px 0; padding-bottom: 10px}
    #footer .flex2{display: flex; justify-content: space-between; align-items: flex-end; gap: 50px}
    #footer .conteudo{z-index: 5 !important; position: relative;}
    #footer .menu li{list-style: none; display: inline-block;}
    #footer .menu li a{color: #1d1d1d; font-size: 12px; text-transform: uppercase; padding: 0 5px}
    #footer .infs{display: flex; gap: 30px; font-size: 12px}
    #footer .img-footer{width: 700px}
    #footer .flut{position: absolute; bottom: -150px; padding: 0 40px; z-index: 1 !important}

    #footer .flames{position: relative; z-index: 100}


    @media(min-width: 2000px){
        #footer .flut{position: absolute; bottom: -300px; padding: 0 40px; z-index: 1 !important}
    }

    @media(max-width: 1660px){
        #footer .flut{position: absolute; bottom: -130px; padding: 0 40px; z-index: 1 !important}
        #footer .flames{display: none}
    }


    @media(max-width: 1450px){
        #footer .flut{position: absolute; bottom: -100px; padding: 0 40px; z-index: 1 !important}
    }


    @media(max-width: 767px){
        #contato h1{font-size: 26px}
    	#footer{padding-top: 0}
        #footer .flex2{display: block;}
        #footer .infs{display: block;}
        #footer .flutuante{max-width: 90%}
        .bloco-imagens .flex{display: block !important;}
        #sobre .flex .item-flex{max-width: 100% !important; margin-bottom: 40px !important}
    }

</style>

<div id="sobre">
	<div id="banner">
		<img width="100%" src="<?php echo RAIZ ?>img/banner.jpg">
	</div>
	<div class="section1">
		<div class="container">
			<h1>A HISTÓRIA DO MELHOR<br>FESTIVAL DE CHURRASCO<br>DO BRASIL COMEÇOU<br>EM 2019.</h1>
			<div class="clear60"></div>
			<div class="row">
				<div class="col-md-4">
					<img class="img-fluid wow slideInUp" src="<?php echo RAIZ ?>img/s3.png">
				</div>
				<div class="clear60 visible-xs"></div>
				<div class="col-md-4">
					<img class="img-fluid" src="<?php echo RAIZ ?>img/s2.png">
					<div class="clear10"></div>
					<h2>Em uma festa onde cada detalhe foi pensado para que a família inteira se divirta, independente da idade.</h2>
					<div class="clear30"></div>
					<img class="img-fluid" src="<?php echo RAIZ ?>img/tpc.png">
				</div>
				<div class="clear60 visible-xs"></div>
				<div class="col-md-4">
					<img class="img-fluid wow slideInUp" src="<?php echo RAIZ ?>img/s1.png">
				</div>
			</div>
		</div>
	</div>
	<div class="bloco-imagens">
		<div class="container">
			<div class="flex">
				<div class="item-flex hidden-xs">
					<img class="img-fluid" src="<?php echo RAIZ ?>img/i5.jpg">
				</div>
				<div class="item-flex">
					<img class="img-fluid" src="<?php echo RAIZ ?>img/i1.jpg">
				</div>
				<div class="item-flex">
					<img class="img-fluid" src="<?php echo RAIZ ?>img/i2.jpg">
				</div>
				<div class="item-flex">
					<img class="img-fluid" src="<?php echo RAIZ ?>img/i3.jpg">
				</div>
				<div class="item-flex">
					<img class="img-fluid" src="<?php echo RAIZ ?>img/i4.jpg">
				</div>
			</div>
			<div class="clear80"></div>
			<center><a class="btn-padrao transition" href="<?php echo RAIZ ?>">Voltar</a></center>
		</div>
	</div>
    <div id="footer">
    	<div class="container">
    		<center><img class="flames img-fluid" src="<?php echo RAIZ ?>img/flames.png"></center>
    	</div>
    	<div class="clear60"></div>
        <img class="flut wow slideInUp hidden-xs" width="100%" src="<?php echo RAIZ ?>img/footer.png">
        <div class="container conteudo">
            <div class="flex2">
                <div class="menu hidden-xs">
                    <?php include('templates/func/menu.php') ?>
                </div>
                <div class="logo"><img src="<?php echo RAIZ ?>img/logo-footer.png"></div>
                <div class="clear30 visible-xs"></div>
                <div class="infs">
                    <div class="info1">21  |  SETEMBRO  |  2024</div>
                    <div class="info2">SEMINÁRIO SÃO JOSÉ  |  CASCAVEL - PR</div>
                </div>
            </div>
        </div>
    </div>
</div>