/*=================================================== 01 - CONFIGURAÇÕES GERAIS 02 - HEADER 03 - HERO 04 - AÇÃO 05 - TITULO 06 - VIDEOS 07 - CARTA 08 - PALAVRA 09 - AÇÃO 02 10 - RODAPE 11 - RESPONSIVO c-acao3-btn ====================================================== 0 - IMPORTAÇÕES ===========================*/ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); /*=================================================== 01 - CONFIGURAÇÕES GERAIS ======================================================*/ * { margin: 0; padding: 0; outline: 0; } html { /* a cada 1rem será considera 10px */ font-size: 62.5%; box-sizing: border-box; } html, body { height: 100vh; font-family: "Source Sans Pro"; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; } body { font-size: 1.6rem; } h2 { color: #9f0a0a; font-size: 2.5rem; line-height: 4.6rem; } h3 { color: #9f0a0a; font-size: 2.8rem; line-height: 3.8rem; } .icone { width: 30px; filter: invert(100); padding-left: 11px; margin: -5px; } .icone2 { width: 60%; padding-left: 11px; margin: -5px; } .button { display: inline; font-size: 2rem; font-weight: 600; color: rgb(255, 255, 255); background-color: #23A455; padding: 20px 18%; text-decoration: none; border-radius: 20px; transition: all 150ms linear 0s; box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%); } .whatsap { width: 4%; } .button:hover { opacity: 0.9; } p { font-family: Arial, Sans-serif; font-size: 1.8rem; font-weight: 600; } .espaco { padding: 0 0; } #imagemlogo { max-width: 26%; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } /*=================================================== 02 - HEADER ======================================================*/ .topo { padding: 10px 0; text-align: center; background-color: #9f0a0a; } .imagem-logo { width: 35%; } /*=================================================== 03 - HERO ======================================================*/ .container-hero { padding: 0 10% 40px 10%; display: flex; margin: auto; align-items: center; } .c-hero { width: 90%; padding: 10px; text-align: center; } .c-hero h2 { padding: 10px 30px; font-size: 2.7rem; line-height: normal; } .c-hero iframe { border-radius: 20px; } .c-hero img { max-width: 100%; } .c-hero-imagem-padre img { border-radius: 20px; } /*=================================================== 04 - ACAO ======================================================*/ .container-acao { width: 90%; max-width: 1100px; display: flex; margin: auto; align-items: center; } .container-1 { width: 90%; max-width: 1100px; display: flex; margin: auto; align-items: center; } .recanto h2 { width: 100%; text-align: center; padding: 40px 0 15px 0; font-size: 5.0rem; } .c-acao-txt { width: 100%; text-align: center; padding: 40px 0 15px 0; font-size: 3.5rem; } .c-acao-btn { margin-top: 40px; text-align: center } /*=================================================== 05 - TITULO ======================================================*/ .container-h2 { width: 90%; max-width: 1100px; display: flex; margin: auto; align-items: center; } .c-h2 { width: 100%; } .c-h2 h2 { text-align: center; padding: 40px 0 15px 0; font-size: 3.5rem; } .container-h3 { width: 90%; max-width: 1100px; display: flex; margin: auto; align-items: center; } .c-h3 { width: 100%; } .c-h3 h3 { text-align: center; padding: 40px 0 15px 0; font-size: 3.5rem; } /*=================================================== 06 - VIDEOS ======================================================*/ .container-videos { padding: 20px 0 0 0; width: 90%; max-width: 1200px; display: flex; margin: auto; align-items: center; } .c-videos { width: 100%; padding: 10px; } .c-videos h2 { text-align: center; padding: 40px 0 15px 0; font-size: 3.5rem; } .container-videos .c-videos iframe { border-radius: 20px; } #container { background-color: #567890; width: 90%; margin: 0 auto; border: 4px solid #222; display: flex; } .vidwrapper { width: 100%; max-width: 800px; border-radius: 20px; } .vidcontainer { width: 100%; max-width: 100%; height: 0; padding-bottom: 56.25%; position: relative; border-radius: 20px; } .vidcontainer iframe { width: 100%; max-width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 20px; } /*=================================================== 07 - CARTA ======================================================*/ .container-carta { background-color: #9f0a0a; } .container-carta-txt { width: 90%; max-width: 1100px; display: flex; margin: auto; align-items: center; } .c-carta-txt a, .c-carta-txt p { align-items: center; color: #fff; } .c-carta-txt { width: 100%; } .c-carta-txt h2 { text-align: center; padding: 40px 0 15px 0; font-size: 3.5rem; color: #fff; } .container-carta-img { width: 90%; max-width: 1100px; display: flex; margin: auto; align-items: center; } .c-carta-img { width: 100%; } .imagem-carta { border-radius: 20px; box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%); width: 92%; } .container-carta-img .c-carta-img p { color: white; text-align: center; padding-top: 5px; } /*=================================================== 08 - PALAVRA ======================================================*/ .container-palavra { padding: 20px 0 0 0; width: 90%; max-width: 1200px; display: flex; margin: auto; align-items: center; } .c-palavra-img { width: 90%; padding: 10px; text-align: center; } .texto-hero { font-weight: 200; } .h1-inicio { color: #9f0a0a; font-size: 4rem; } .c-palavra-txt { width: 60%; padding: 10px; } .imagem-palavra { width: 70%; border-radius: 20px; } /*=================================================== 9 - AÇÃO 2 ======================================================*/ .c-acao3-btn { width: 7%; padding: 10px; vertical-align: top; /* position: fixed; */ position: fixed; bottom: 30px; left: 93.5%; top: 89%; } .container-acao2 { padding: 20px 0 0 0; width: 90%; max-width: 1200px; display: flex; margin: auto; align-items: center; } .c-acao2-txt { width: 50%; padding: 10px; font-size: 26px; text-align: center; } .c-acao2-btn { width: 50%; padding: 10px; vertical-align: top; } .c-acao2-btn-div { text-align: center; } /*=================================================== 10 - RODAPE ======================================================*/ .imagem-rodape { max-width: 150px; /* padding-bottom: 20px; */ border-radius: 15px; } .container-rodape { display: flex; text-align: center; background-color: #F0EEF0; } .c-rodape { width: 100%; padding: 1rem; } .c-rodape p { color: #2D85C1; padding-top: 20px; } /*=================================================== FIM ======================================================*/ /* INICIO */ /* DO */ /* RESPONSIVO */ /*================= RESPONSIVO < 600PX ==================*/ @media only screen and (max-width: 600px) { .icone2 { width: 30%; padding-left: 11px; margin: -5px; } .c-acao3-btn { width: 50%; padding: 10px; vertical-align: top; /* position: fixed; */ position: fixed; bottom: 30px; left: 80%; top: 90%; } .container-hero { padding: 10px 2% 40px 2%; display: flex; flex-direction: column; flex: 0 0 100%; margin: auto; align-items: center; } .imagem-logo { width: 85%; } .vidwrapper { width: 100%; max-width: 800px; border-radius: 20px; } .c-hero h2 { padding: 5px; font-size: 2rem; } .container-videos { padding: 10px 0 0 0; width: 90%; max-width: 1200px; display: flex; flex-direction: column-reverse; margin: auto; align-items: center; } .c-acao-txt h2 { line-height: normal; } .c-h2 h2, .c-h3 h3, .c-carta-txt h2 { font-size: 2.9rem; } .container-carta-img { width: 85%; display: flex; flex-direction: column; align-items: center; text-align: center; } .c-carta-img { padding: 5px 0; } .container-palavra { flex-direction: column; } .container-acao2 { flex-direction: column-reverse; } .c-palavra-txt { width: 85%; } .c-acao2-txt { width: 100%; padding-bottom: 30px; padding: 30px 0 0 0; } .c-acao2-btn { width: 100%; } .button { padding: 20px 16%; } .c-acao2-btn-div { text-align: center; } .imagem-palavra { width: 100%; } h3 { line-height: 3rem; } }