/* ==== # INÍCIO FONTES # ==== */ @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* ==== # FIM FONTESL # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # INÍCIO GERAL # ==== */ /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Classes */ .clearfix:after { content: ''; display: block; clear: both; height: 0; line-height: 0; font-size: 0; visibility: hidden; overflow: hidden; } /* Classes */ /* ==== # FIM GERAL # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # INÍCIO BODY # ==== */ * { padding: 0px; margin: 0px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } body { font-family: 'Montserrat'; font-size: 1em; margin: 0px; padding: 0px; color: rgba(255,255,255,1); /*background-color: rgba(208,51,48,1);*/ } /* ==== # FIM BODY # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # INÍCIO ESTRUTURA WEBSITE # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # LANDPAGE START # ==== */ /* ==== # LANDPAGE START # ==== */ /* ==== # LANDPAGE START # ==== */ #particles-js { background-color: rgba(208,51,48,1); height: 100vh; position: relative; } #wrapper { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; width: 100%; } #logo { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; } #logo img { width: 75%; } #intro { color: rgba(255,255,255,1); margin-bottom: 50px; } #intro h1 { text-align: center; font-weight: 300; font-style: italic; font-size: 3.2em; } #intro p { font-weight: normal; text-align: center; font-size: 1.5em; } #brevemente { display: flex; align-items: center; justify-content: center; background-color: rgba(39,48,67,.8); width: 100%; height: 50px; padding: 0; margin: 0; margin-bottom: 30px; } #brevemente h2 { font-weight: normal; font-style: normal; font-size: 2em; color: rgba(255,255,255,1); text-align: center; padding: 0; margin: 0; } #wrapper ul { list-style-type: none; padding: 0; margin: 0; display: flex; } #wrapper ul li { margin: 0 10px 0 10px; } #wrapper ul li a { color: rgba(255,255,255,.7); } #wrapper ul li a:hover { color: rgba(255,255,255,1); } #wrapper ul li i { font-size: 3em; } /* ==== # LANDPAGE END # ==== */ /* ==== # LANDPAGE END # ==== */ /* ==== # LANDPAGE END # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # QUIZ PAGE START # ==== */ /* ==== # QUIZ PAGE START # ==== */ /* ==== # QUIZ PAGE START # ==== */ /* ==== # QUIZ PAGE END # ==== */ /* ==== # QUIZ PAGE END # ==== */ /* ==== # QUIZ PAGE END # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== */ /* ==== # FIM ESTRUTURA WEBSITE # ==== */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* INÍCIO MEDIA QUERIES */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP 3840x2160 pixels */ @media (min-width:3500px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP 3840x2160 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP 3440x1440 pixels */ @media (min-width:3100px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP 3440x1440 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP 2560x1440 pixels */ @media (min-width:2300px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP 2560x1440 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP 1920x1200 pixels */ @media (max-width:1920px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP 1920x1200 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP 1440x800 pixels */ @media (max-width:1440px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #intro h1 { font-size: 2.8em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP 1440x800 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP Landscape - 1366x768 pixels */ @media (max-width:1366px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP Landscape - 1366x768 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* iPAD PRO Landscape (12,9') - 1366x1024 pixels */ @media (max-width:1366px) and (-webkit-min-device-pixel-ratio: 2.0) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP Landscape (12,9') - 1366x1024 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP Landscape - 1280x768 pixels */ @media (max-width:1280px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #logo img { width: 60%; } #intro h1 { font-size: 2.5em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP Landscape - 1280x768 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP Landscape - 1280x768 pixels */ @media (max-width:1200px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP Landscape - 1280x768 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* iPAD PRO Landscape (10,5') - 1112x834 pixels */ @media (max-width:1112px) and (-webkit-min-device-pixel-ratio: 2.0) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #intro h1 { font-size: 2.2em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* iPAD PRO Landscape (10,5') - 1112x834 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP & iPAD Landscape - 1024x768 pixels */ @media (max-width:1024px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP & iPAD Landscape - 1024x768 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* IPAD Landscape (9,7') / (7,9') - 1024x768 pixels */ @media (max-width:1024px) and (-webkit-min-device-pixel-ratio: 2.0) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* IPAD Landscape (9,7') / (7,9') - 1024x768 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* DESKTOP Landscape - 768 to 992 pixels */ @media (max-width:992px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* DESKTOP Landscape - 1280x768 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* iPAD PRO Portrait (10,5') - 834x1112 pixels */ @media (max-width:834px) and (min-height:1112px) and (-webkit-min-device-pixel-ratio: 2.0) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #intro h1 { font-size: 2.5em; padding: 0 50px 0 50px; line-height: 1.5em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* iPAD PRO Portrait (10,5') - 834x1112 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* iPHONE X Portrait - 812x375 pixels */ @media (max-width:812px) and (-webkit-min-device-pixel-ratio: 3.0) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #wrapper { top: 0 !important; } #logo { margin-bottom: 0; margin-top: -20px; } #logo img { width: 50%; } #intro { padding: 0 150px 0 150px; margin-bottom: 10px; } #intro h1 { font-size: 2em; line-height: 1.5em; } #brevemente { height: 30px; margin-bottom: 10px; } #brevemente h2 { font-size: 1.5em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* iPHONE X Portrait - 812x375 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* Início iPAD Portrait - 768x1024 pixels */ @media (max-width:768px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #intro h1 { font-size: 2.5em; padding: 0 50px 0 50px; line-height: 1.5em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* Fim iPAD Portrait - 768x1024 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* Início iPAD Portrait - 768x1024 pixels */ @media (max-width:768px) and (-webkit-min-device-pixel-ratio: 2.0) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* Fim iPAD Portrait - 768x1024 pixels */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Samsung Portrait # ==== */ @media (max-width:736px) { //* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #wrapper { padding-top: 30px; } #logo { margin-bottom: 0; } #logo img { width: 50%; } #intro { margin-bottom: 20px; } #intro h1 { font-size: 2em; padding: 0 80px 0 80px; } #brevemente { height: 40px; margin-bottom: 20px; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Large Mobiles Landscape # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Samsung Portrait # ==== */ @media (max-width:667px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #intro { margin-bottom: 0; } #intro h1 { font-size: 1.8em; } #brevemente { height: 30px; margin-bottom: 15px; } #brevemente h2 { font-size: 1.5em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Large Mobiles Landscape # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Mobile Landscape | iPhone 5s # ==== */ @media (max-width:568px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #logo img { width: 40%; } #wrapper ul li i { font-size: 2.5em; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Mobile Landscape | iPhone 5s # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Mobile Medium 480px # ==== */ @media (max-width:480px) and (orientation: portrait) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Mobile Medium 480px # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Mobile Portrait | iPhone 6Plus # ==== */ @media (max-width:414px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #logo { margin-bottom: 20px; } #logo img { width: 45%; } #intro { margin-bottom: 20px; } #intro h1 { font-size: 2em; padding: 0 60px 0 60px; } #brevemente { height: 30px; margin-bottom: 30px; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Mobile Portrait | iPhone 6Plus # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Mobile Portrait | iPhone 6s # ==== */ @media (max-width:375px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Mobile Portrait | iPhone 6s # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ==== # Mobile Portrait | iPhone 5s & 4s # ==== */ @media (max-width:320px) { /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ /* ########################################################### */ /* ########################################################### */ #intro h1 { font-size: 1.6em; padding: 0 30px 0 30px; } /* ########################################################### */ /* ########################################################### */ /* ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== # ==== */ } /* ==== # Mobile Portrait | iPhone 5s & 4s # ==== */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* ########################################################### */ /* FIM MEDIA QUERIES */