/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/*Variables Start*/
/*Variables End*/
* { box-sizing: border-box; }

html { width: 100%; max-width: 100%; margin: auto; min-height: 100vh; height: auto; }

a { text-decoration: none; }

.clear { clear: both; }

strong { font-weight: 900 !important; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #757575; opacity: 1; /* Firefox */ }

:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #1825AA; }

::-ms-input-placeholder { /* Microsoft Edge */ color: #1825AA; }

body { font-family: 'Poppins', sans-serif; margin-bottom: 4em; }
body .content { width: 100%; }
body .content .header { width: 100%; text-align: center; border-bottom: 1px solid #E70600; }
body .content .header .logoHeader { margin: 2em 0; }
body .content .header .logoHeader img { width: 60%; max-width: 220px; height: auto; }
body .content .context { max-width: 1200px; width: 90%; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 1240px) { body .content .context { width: 85%; } }
@media screen and (max-width: 680px) { body .content .context { width: 80%; } }
body .content .context .counterContent { text-align: center; margin: 4em 0; }
body .content .context .counterContent .counter { font-weight: 700; }
body .content .context .counterContent .counter .counterNums { font-size: 4em; margin-bottom: 0.2em; }
@media screen and (max-width: 680px) { body .content .context .counterContent .counter .counterNums { font-size: 3.5em; margin-bottom: 0.5em; } }
body .content .context .counterContent .counter .counterText { font-size: 1.5em; }
body .content .context .counterContent .counter .counterText span { color: #FFC800; }
body .content .context .innerContext { text-align: justify; }
body .content .context .innerContext p { font-size: 1.2em; margin-bottom: 1.2em; line-height: 1.5em; }
@media screen and (max-width: 680px) { body .content .context .innerContext p { font-size: 1em; margin-bottom: 1.2em; line-height: 1.4em; } }
body .content .context .innerContext .black { color: #000000; font-weight: 600; }
body .content .context .innerContext .grey { font-weight: 400; }
body .content .context .innerContext .greyCont { color: #606060; }
body .content .context .innerContext .greyCont span { color: #000000; font-weight: 700; font-size: 1.6em; }
body .content .contForm { max-width: 1200px; width: 90%; margin-left: auto; margin-right: auto; text-align: center; margin-top: 60px; }
body .content .contForm #formSign input { padding: 1.2em; font-weight: 600; font-size: 1.5em; }
body .content .contForm #formSign .textBoxArea { border-left: 2px solid #000000; border-top: 2px solid #000000; border-bottom: 2px solid #000000; border-right: 0; color: #000000; }
body .content .contForm #formSign .textBoxArea:focus-visible { outline: -webkit-focus-ring-color auto 0px; }
@media screen and (max-width: 680px) { body .content .contForm #formSign .textBoxArea { width: 75%; border-left: 2px solid #000000; border-top: 2px solid #000000; border-right: 2px solid #000000; border-bottom: 0; text-align: center; } }
@media screen and (max-width: 450px) { body .content .contForm #formSign .textBoxArea { width: 90%; } }
body .content .contForm #formSign .buttonSubmit { background: #FFC800; color: #000000; font-weight: 700; cursor: pointer; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; border: 2px #000 solid; }
body .content .contForm #formSign .buttonSubmit:hover { background: #000000; color: #FFC800; }
@media screen and (max-width: 680px) { body .content .contForm #formSign .buttonSubmit { width: 75%; } }
@media screen and (max-width: 450px) { body .content .contForm #formSign .buttonSubmit { width: 90%; } }
@media screen and (max-width: 450px) { body .content .contForm #formSign input { width: 100%; text-align: center; } }
body .content .contForm .mensaje { padding: 2% 0; color: forestgreen; font-weight: 600; font-size: 1.1em; letter-spacing: 0.5px; display: none; }
body .content .contShare { max-width: 1200px; width: 90%; margin-left: auto; margin-right: auto; }
