/** Theme Name: PrimeroTheme Theme URI: https://primerotrader.com Author: Primero Trader Author URI: https://primerotrader.com Description: Tema de Primero Trader. Version: 1.0.0 Text domain: primeroTrader License: Private. **/ /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Using SCSS variables to store breakpoints */ .roundbut { background-color: #FDB000; display: inline-flex; height: 40px; border-radius: 20px; padding: 0 30px; justify-content: center; align-items: center; } .roundbut a { color: #012942; text-decoration: none; font-weight: bold; } .section { padding-top: 100px; padding-bottom: 100px; } /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; font-weight: normal; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } body { background: #030246; } .container, .content { max-width: 100%; } #header2 { border-radius: 0 0 40px 40px; background-color: rgba(1, 26, 59, 0.9); padding: 0 40px; position: fixed; width: 100%; z-index: 9999; font-weight: bold; } #header { background-color: #011A3B; padding: 0 40px; } #header .grid { display: grid; gap: 20px; min-height: 140px; } @media (min-width: 1024px) { #header .grid { grid-template-columns: auto 3fr 1fr; } } @media (max-width: 1024px) { #header .grid .mobilmenu { display: block; position: absolute; top: 60px; left: 100px; color: white; font-size: 24px; } } #header .grid .innerHeader1 { display: flex; margin: auto; } @media (min-width: 1024px) { #header .grid .innerHeader1 { margin-right: 200px; } } #header .grid .innerHeader2, #header .grid .innerHeader3 { display: flex; } @media (min-width: 1024px) { #header .grid .innerHeader2, #header .grid .innerHeader3 { padding: 0 40px; } } #header .grid .innerHeader2 ul, #header .grid .innerHeader3 ul { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } #header .grid .innerHeader2 ul li, #header .grid .innerHeader3 ul li { border-bottom: 1px transparent; padding-bottom: 5px; } #header .grid .innerHeader2 ul li:hover, #header .grid .innerHeader3 ul li:hover { border-bottom: 1px solid #FDB000; } #header .grid .innerHeader2 ul a, #header .grid .innerHeader3 ul a { color: white; font-size: 20px; } #header .grid .innerHeader2 .mobileMenu, #header .grid .innerHeader3 .mobileMenu { flex-direction: column; align-items: flex-start; gap: 10px; } #header .grid .innerHeader2 .mobileMenu li:last-child, #header .grid .innerHeader3 .mobileMenu li:last-child { background-color: #FDB000; display: flex; height: 40px; margin-top: 10px; border-radius: 20px; padding: 0 30px; justify-content: center; align-items: center; } #header .grid .innerHeader2 .mobileMenu li:last-child a, #header .grid .innerHeader3 .mobileMenu li:last-child a { text-decoration: none; color: #012942; } #header .grid .innerHeader2 .dsktopMenu, #header .grid .innerHeader3 .dsktopMenu { display: none; } @media (min-width: 1024px) { #header .grid .innerHeader2 .dsktopMenu, #header .grid .innerHeader3 .dsktopMenu { display: flex; } } #header .grid .innerHeader3 li:last-child { background-color: #FDB000; display: flex; height: 40px; border-radius: 20px; padding: 0 30px; justify-content: center; align-items: center; } #header .grid .innerHeader3 li:last-child a { text-decoration: none; color: #012942; } #header .grid .innerHeader3 a { color: #FDB000; text-decoration: underline; font-size: 20px; } #section1 { background: url(assets/img/WELCOME2.png); background-size: cover; min-height: 70vh; display: flex; align-items: end; justify-content: center; } #section1 .slider { padding: 0 20px; margin-bottom: 5vh; margin-left: 50px; margin-right: 50px; } #section1 h1 { color: white; font-size: 50px; line-height: 1.2; margin-bottom: 40px; font-weight: bold; } #section1 h2 { color: white; font-size: 25px; line-height: 1.5; margin-bottom: 40px; } #section1 .roundbut { margin-right: 50px; padding: 0 50px; } #section2 { background: url(assets/img/sec2bg.png); color: #012942; background-size: cover; text-align: center; } #section2 h2 { color: #012942; font-size: 50px; margin-bottom: 60px; font-weight: bold; } #section2 h3 { font-size: 20px; max-width: 70%; line-height: 1.4; margin: auto; margin-bottom: 20px; } #section2 ul { display: grid; max-width: 80%; margin: auto; justify-content: space-evenly; margin-top: 50px; gap: 80px; } @media (min-width: 1024px) { #section2 ul { grid-template-columns: repeat(4, minmax(200px, 1fr)); } } #section2 ul li { display: block; text-align: center; } #section2 ul li img { max-height: 95px; margin: auto; } #section2 ul li p { font-weight: bold; font-size: 20px; } #section2 ul li .marg { margin: revert; } #section_base, .section.post-video { background-size: cover; min-height: 90vh; } #section2_2, .section.post-video { background: url(assets/img-new-design/login/login.jpg); background-size: cover; min-height: 80vh; } #section2_2 .grid, .section.post-video .grid { display: grid; grid-template-columns: 3fr 1fr; } #section2_2 .text, .section.post-video .text { text-align: center; max-width: 400px; } #section2_2 h1, .section.post-video h1 { color: white; margin-top: 10px; font-size: 50px; margin-bottom: 60px; font-weight: bold; } #section2_2 p, .section.post-video p { color: white; font-size: 20px; line-height: 1.5; margin-bottom: 60px; justify-content: space-evenly; margin-left: 100px; margin-right: 100px; } #section2_2 .marg, .section.post-video .marg { margin: revert; } #section2_2 ul, .section.post-video ul { display: grid; max-width: 80%; margin-top: 20px; margin: auto; justify-content: space-evenly; margin-top: 80px; gap: 20px; } @media (min-width: 1024px) { #section2_2 ul, .section.post-video ul { grid-template-columns: repeat(2, minmax(200px, 2fr)); align-items: center; } } #section2_2 ul li, .section.post-video ul li { display: block; text-align: center; } #section2_2 ul li img, .section.post-video ul li img { max-height: 400px; margin: auto; items-aligned: center; } #section2_3 { background: url(assets/img/PRIMEROCHATBACK.png); background-position: bottom center; background-size: cover; position: relative; color: white; } #section2_3 .grid { display: grid; grid-template-columns: 2fr 1fr; } #section2_3 .text { text-align: center; max-width: 400px; } #section2_3 h1 { color: white; font-size: 50px; margin-bottom: 60px; font-weight: bold; } #section2_3 p { color: white; font-size: 20px; line-height: 1.5; margin-bottom: 60px; justify-content: space-evenly; margin: auto; margin-left: 100px; margin-right: 100px; } #section2_3 ul { display: grid; max-width: 80%; margin: auto; justify-content: space-evenly; margin-top: 80px; gap: 20px; } @media (min-width: 1024px) { #section2_3 ul { grid-template-columns: repeat(2, minmax(200px, 1fr)); } } #section2_3 ul li { display: block; text-align: center; } #section2_3 ul li img { max-height: 600px; margin: auto; } #section3 { background: url(assets/img/CALENDARIOBACK.png); background-size: cover; min-height: 1064px; position: relative; z-index: 2; padding-top: 10vh; color: white; text-align: center; } #section3 .grid { display: grid; grid-template-columns: 2fr 1fr; } #section3 .text { text-align: center; max-width: 400px; } #section3 h2 { color: white; margin-top: 10px; font-size: 50px; margin-bottom: 60px; font-weight: bold; } #section3 p { color: white; font-size: 20px; line-height: 1.5; margin-bottom: 60px; justify-content: space-evenly; margin-left: 100px; margin-right: 100px; } #section3 ul { display: grid; max-width: 80%; margin-top: 20px; margin: auto; justify-content: space-evenly; margin-top: 80px; gap: 20px; } @media (min-width: 1024px) { #section3 ul { grid-template-columns: repeat(2, minmax(200px, 2fr)); align-items: center; } } #section3 ul li { display: block; text-align: center; } #section3 ul li img { max-height: 400px; margin: auto; items-aligned: center; } #section3_2 { background: url(assets/img/SIMULADORBACK.png); background-position: bottom center; background-size: center; position: relative; color: white; } #section3_2 .grid { display: grid; grid-template-columns: 2fr 1fr; } #section3_2 .text { text-align: center; max-width: 400px; } #section3_2 h1 { color: white; font-size: 50px; margin-bottom: 60px; font-weight: bold; } #section3_2 p { color: white; font-size: 20px; line-height: 1.5; margin-bottom: 60px; justify-content: space-evenly; margin: auto; margin-left: 100px; margin-right: 100px; } #section3_2 ul { display: grid; max-width: 80%; margin: auto; justify-content: space-evenly; gap: 40px; } @media (min-width: 1024px) { #section3_2 ul { grid-template-columns: repeat(2, minmax(200px, 1fr)); } } #section3_2 ul li { display: block; text-align: center; } #section3_2 ul li img { max-height: 700px; margin: auto; } #section3_3 { background: url(assets/img/GRAFICABACK.png); background-position: center; background-size: cover; position: relative; color: white; } #section3_3 .grid { display: grid; grid-template-columns: 2fr 1fr; } #section3_3 .text { text-align: center; max-width: 400px; } #section3_3 h2 { color: #012942; font-size: 50px; margin-bottom: 60px; font-weight: bold; } #section3_3 p { color: #012942; font-size: 20px; line-height: 1.5; margin-bottom: 60px; justify-content: space-evenly; margin: auto; margin-left: 100px; margin-right: 100px; } #section3_3 ul { display: grid; max-width: 80%; margin: auto; justify-content: space-evenly; margin-top: 80px; gap: 10px; } @media (min-width: 1024px) { #section3_3 ul { grid-template-columns: repeat(2, minmax(200px, 1fr)); } } #section3_3 ul li { display: block; text-align: center; } #section3_3 ul li img { max-height: 350px; margin: auto; } #section3_4 { background: url(assets/img/Scannerback.png); background-position: auto; background-size: cover; position: relative; color: white; } #section3_4 .grid { display: grid; grid-template-columns: 2fr 1fr; } #section3_4 .text { text-align: left; max-width: 400px; } #section3_4 h2 { color: #012942; font-size: 50px; margin-bottom: 60px; margin-left: 100px; font-weight: bold; text-align: left; } #section3_4 p { color: #012942; font-size: 20px; line-height: 1.4; text-align: left; margin-bottom: 60px; justify-content: space-evenly; margin: auto; margin-left: 100px; margin-right: 100px; } #section3_4 ul { display: grid; max-width: 80%; margin: auto; justify-content: space-evenly; margin-top: 30px; gap: 10px; } @media (min-width: 1024px) { #section3_4 ul { grid-template-columns: repeat(2, minmax(200px, 1fr)); } } #section3_4 ul li { display: block; text-align: center; } #section3_4 ul li img { max-height: 1200px; margin: auto; } #section3_5 { background: url(assets/img/Dinerorealback.png); background-position: auto; background-size: cover; position: relative; color: white; } #section3_5 .grid { display: grid; grid-template-columns: 1fr 1fr; } #section3_5 .text { text-align: center; max-width: 400px; } #section3_5 h1 { color: #012942; font-size: 50px; margin-bottom: 60px; font-weight: bold; text-align: center; } #section3_5 p { color: #012942; font-size: 20px; line-height: 1.4; text-align: center; margin-bottom: 60px; justify-content: space-evenly; margin: auto; margin-left: 100px; margin-right: 100px; } #section3_5 ul { display: grid; max-width: 80%; margin: auto; justify-content: space-evenly; gap: 10px; } @media (min-width: 1024px) { #section3_5 ul { grid-template-columns: repeat(1, minmax(200px, 1fr)); } } #section3_5 ul li { display: block; text-align: center; } #section3_5 ul li img { max-height: 700px; margin: auto; } #section4 { text-align: center; padding-top: 20vh; background: #FDB000; margin-top: 20vh; } #section4 .separator { margin-top: -30vh; margin-bottom: 10vh; } @media (min-width: 1024px) { #section4 .separator { margin-top: -40vh; } } #section4 h2 { color: #012942; margin-top: 40px; font-size: 80px; margin-bottom: 40px; font-weight: bold; } #section4 .content { display: grid; grid-template-columns: 1fr 1fr 1fr; color: #012942; padding: 0 40px; gap: 100px; } #section4 .content > div { display: flex; flex-direction: column; text-align: left; } #section4 .content .num { font-size: 80px; margin-bottom: 40px; font-weight: bold; } #section4 .content .title { font-size: 40px; margin-bottom: 20px; font-weight: bold; } #section4 .content .subtitle { font-size: 30px; margin-bottom: 20px; } #section4 .content .cta { grid-column: 1/-1; text-align: center; margin-bottom: 10vh; display: block; } @media (min-width: 1024px) { #section4 .content .cta { margin-top: 100px; margin-bottom: 20vh; } } #section4 .content .roundbut.blue { background: #012942; color: white; font-weight: 600; font-size: 32px; height: auto; padding: 10px 60px; border-radius: 36px; } #footer { padding-left: 40px; padding-right: 40px; gap: 20px; width: 100%; display: flex; flex-direction: column; justify-content: center; background: #F8BB2C; color: #011a3b; } #footer .colorfuente { color: #011a3b; font-size: 11.5px; } @media (max-width: 600px) { #footer .footermenu .flex { flex-direction: column; gap: 10px; margin-bottom: 20px; text-align: center; } } .copyrights { background: #011623; padding: 5px 0; color: white; } #section2_2.registro { align-items: center; justify-content: center; display: flex; padding-bottom: 30vh; } #section2_2.registro h2 { font-size: 40px; color: white; text-align: center; margin-bottom: 20px; } #section2_2.registro .content { display: flex; flex-direction: column; text-align: center; } #section2_2.registro .formcont { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; width: 600px; margin: auto; } @media (max-width: 600px) { #section2_2.registro .formcont { width: 100%; } } #section2_2.registro .formcont > div { margin-bottom: 10px; } #section2_2.registro .formcont > div:last-child { margin-top: 40px; display: flex; } #section2_2.registro .formcont > div i { margin-right: 10px; } #section2_2.registro .formcont > div .title { font-weight: bold; color: #F8BB2C; font-size: 20px; margin-bottom: 10px; } #section2_2.registro .formcont > div input.register { height: 57px; width: 100%; padding: 0 30px; color: black; border-radius: 20px; } #section2_2.registro .formcont > div input.register::placeholder { color: #6B6B7E; text-align: center; } #section2_2.registro .formcont > div .roundbut { width: auto; margin: auto; } .color { width: 200px; } .page-template-bienvenida h1 { font-size: 58px; font-weight: bold; } .page-template-bienvenida h2 { font-weight: bold; font-size: 24px; } .category .banner, .category-educacion .banner, .page-template-educacion .banner, .page-template-bienvenida .banner { background-size: cover; background-position: center; height: 430px; } .category .banner, .category .sidemenu, .category .videos, .category-educacion .banner, .category-educacion .sidemenu, .category-educacion .videos, .page-template-educacion .banner, .page-template-educacion .sidemenu, .page-template-educacion .videos, .page-template-bienvenida .banner, .page-template-bienvenida .sidemenu, .page-template-bienvenida .videos { border: 1px solid white; border-radius: 4px; } @media (max-width: 660px) { .category .banner, .category-educacion .banner, .page-template-educacion .banner, .page-template-bienvenida .banner { height: 200px; } } .category .sidemenu, .category .videos, .category-educacion .sidemenu, .category-educacion .videos, .page-template-educacion .sidemenu, .page-template-educacion .videos, .page-template-bienvenida .sidemenu, .page-template-bienvenida .videos { min-height: 400px; } .category .sidemenu > ul, .category-educacion .sidemenu > ul, .page-template-educacion .sidemenu > ul, .page-template-bienvenida .sidemenu > ul { list-style: none; } .category .sidemenu ul > li > a, .category-educacion .sidemenu ul > li > a, .page-template-educacion .sidemenu ul > li > a, .page-template-bienvenida .sidemenu ul > li > a { color: white; font-weight: bold; } .category .sidemenu ul ul, .category-educacion .sidemenu ul ul, .page-template-educacion .sidemenu ul ul, .page-template-bienvenida .sidemenu ul ul { margin: 20px 0 20px 40px; list-style: disc; } .category .sidemenu ul ul li, .category-educacion .sidemenu ul ul li, .page-template-educacion .sidemenu ul ul li, .page-template-bienvenida .sidemenu ul ul li { color: white; font-weight: normal; } .category .sidemenu ul ul li a, .category-educacion .sidemenu ul ul li a, .page-template-educacion .sidemenu ul ul li a, .page-template-bienvenida .sidemenu ul ul li a { color: white; font-weight: normal; } .category #title img, .category-educacion #title img, .page-template-educacion #title img, .page-template-bienvenida #title img { display: inline; } .category .sidemenu img, .category-educacion .sidemenu img, .page-template-educacion .sidemenu img, .page-template-bienvenida .sidemenu img { display: inline-block; margin-right: 15px; } .category #title, .category-educacion #title, .page-template-educacion #title, .page-template-bienvenida #title { font-size: 24px; font-weight: bold; } .category .videos .title, .category-educacion .videos .title, .page-template-educacion .videos .title, .page-template-bienvenida .videos .title { font-weight: bold; margin-bottom: 20px; font-size: 24px; } .banda .bg-secundario { position: relative; overflow: hidden; } .banda .bg-secundario::after { display: block; position: absolute; background: url(assets/img/banda4.png) no-repeat; background-size: cover; top: 0; right: 0; content: ""; width: 100%; height: 612px; } @media (max-width: 767px) { .banda .bg-secundario { position: relative; overflow: hidden; } .banda .bg-secundario::after { display: block; position: absolute; background: url(assets/img/banda3.png) no-repeat; background-size: cover; margin-top: -150px; right: 0; margin-left: 80px; content: ""; width: 640px; height: 915px; } } @media (max-width: 500px) { .banda .bg-secundario { position: relative; overflow: hidden; } .banda .bg-secundario::after { display: block; position: absolute; background: url(assets/img/banda3.png) no-repeat; background-size: cover; margin-top: -50px; right: 0; margin-left: 80px; content: ""; width: 440px; height: 915px; } } #p-intermedio, #p-superior { filter: blur(4px); } .flexInfo { flex-grow: 3; display: flex; flex-direction: column; justify-content: space-around; } .flexProfile { flex-grow: 1; } #avatarcont { height: 150px; display: flex; overflow: hidden; justify-content: center; align-items: center; width: 150px; } #profileGrid { grid-template-columns: 200px 1fr; } #avGrid { grid-template-columns: 150px 1fr; gap: 10px; } #avGrid .icons { display: flex; flex-direction: column; padding: 30px 0 0 0; justify-content: space-evenly; } #quienes { background: url(assets/img/BackQuienesSomos.png); background-size: cover; min-height: 70vh; display: flex; align-items: end; justify-content: center; } #quienes h1 { color: white; font-family: italic; font-size: 30px; text-align: center; position: relative; font-style: italic; } #quienesp2 { padding: 0 10vw; background: url(assets/img/QuienesBack2.png); background-size: auto; } #quienesp2 h1 { color: white; font-size: 70px; text-align: center; position: relative; font-weight: bold; top: 20px; } #quienesp2 p { color: white; font-size: 20px; text-align: center; position: relative; top: 100px; margin-bottom: 30px; } #quienesp3 { background: url(assets/img/Quienesp3back2.png); background-size: cover; margin-top: -10px; text-align: center; } #quienesp3 ul { display: grid; max-width: 70%; margin: auto; justify-content: space-evenly; margin-top: 130px; gap: 110px; } @media (max-width: 400px) { #quienesp2 { min-height: 20vh; } } #quienesp3 ul { grid-template-columns: repeat(3, minmax(150px, 1fr)); } @media (max-width: 800px) { #quienesp3 ul { grid-template-columns: repeat(2, minmax(150px, 1fr)); } } @media (max-width: 400px) { #quienesp3 ul { grid-template-columns: repeat(1, minmax(150px, 1fr)); } } #quienesp3 ul.centrado { grid-template-columns: repeat(1, minmax(200px, 1fr)); } #quienesp3 ul li p { font-weight: bold; font-size: 18px; margin-top: 20px; } #quienesp3 h1 { font-weight: bold; font-size: 35px; margin-bottom: 150px; } #quienesp3 p { font-weight: bold; font-size: 20px; margin-bottom: 50px; } #quienesp4 { background-color: #001B2B; background-size: cover; } .precios { overflow-x: scroll; scrollbar-color: #869CAA #001B2B; } @media (max-width: 600px) { .terminosChecks { display: flex; } } @media (max-width: 600px) { .menu { display: grid; } } /*# sourceMappingURL=style.css.map */