/* Theme Name: Elevate-2022 Description: Custom theme for Elevate Prize Foundation Requires at least: WordPress 7.0 Version: 1.0.0 Last Update: 2022-0423 0335p Author: PaulGagu Text Domain: Ep2 */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); /*-------------------------------------------------------------- # Variables --------------------------------------------------------------*/ :root{ --text : #222222; --white : #FFFFFF; --black : #000000; --blaky : #282828; --light : #dddddd; --lite : #F8F8F8; --gold : #e6c412; --blue : #0047ff; --java : #1fc6cd; --green : #27b667; --pink : #ff9fe5; --red : #e7574a; --font-beba : 'Bebas Neue', sans-serif; --font-mont : 'Montserrat', sans-serif; --font-lg : 2.2rem; --font-md : 1.8rem; --font-sm : 1.4rem; } html { scroll-padding-top:140px; scroll-behavior: smooth; } html, body{ font-family: var(--font-mont); font-weight:300; } html{ font-size: 10px; } body{ font-size: 16px; line-height: 24px; line-height: 26px;} .header{ margin: 0; padding: 0; width:100vw; position:fixed; padding:0; z-index:999; height:80px; } .header-back{ height: 80px; } main{ min-height: 80vh; } section, .section { width:100%; margin:0; padding:0; position:relative; } .content { width:84%; margin:0 auto; padding:0; position:relative; } .width-84\% { width:84%; } .width-84vw { width:84vw; } @media ( max-width: 600px ){ .content { width:90%; margin:0 auto; } } h1, h2, h3, h4, h5, h6 { font-family: 'Bebas Neue', sans-serif; font-weight:300; line-height: 1.2; margin: 0 0 1.2rem; } h1{ font-size: 6.0rem; line-height: 7.2rem; } h2{ font-size: 4.8rem; line-height: 4.8rem; } h3{ font-size: 3.6rem; line-height: 3.6rem; } h4{ font-size: 2.4rem; line-height: 3.6rem; } h5{ font-size: 2.2rem; line-height: 3.4rem; } h6{ font-size: 1.8rem; line-height: 2.0rem; } p{ margin:0 0 1.2rem; } p:last-child { margin-bottom: 0; } .font-h1{ font-size: 6.0rem; line-height: 7.2rem; } .font-h2{ font-size: 4.8rem; line-height: 4.8rem; } .font-h3{ font-size: 3.6rem; line-height: 3.6rem; } .font-h4{ font-size: 2.4rem; line-height: 3.6rem; } .font-h5{ font-size: 2.2rem; line-height: 3.4rem; } .font-h6{ font-size: 1.8rem; line-height: 2.0rem; } .font-xl { font-size: 10.5rem; } .font-lg { font-size: 2.2rem; } .font-md { font-size: 1.8rem; } .font-sm { font-size: 1.4rem; } .font-intro{ font-size: 2.2rem; } .font-body { font-size: 1.8rem; } .font-small{ font-size: 1.4rem; } .line-lge { line-height: 2.2; } .line-med { line-height: 1.8; } .line-sml { line-height: 1.4; } .font-mont, .font-text { font-family: 'Montserrat', sans-serif; font-weight: 300; } .font-beba { font-family: 'Bebas Neue', sans-serif; font-weight: 300; } .mont, .text { font-family: 'Montserrat', sans-serif; font-weight: 300; } .beba { font-family: 'Bebas Neue', sans-serif; font-weight: 300; } /* - - color & backgrounds - - */ a{ text-decoration: none; color:var(--black); border-bottom: 1px solid var(--gold); font-weight: 500; } a:hover{ color:var(--gold); border-color:var(--black); } a.clean, a.link-clean{ border-bottom:0; } a:hover.link-clean{ border-bottom:0; } .bottom-lite { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--lite) 82% ); } .bottom-light { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--light) 82% ); } .bottom-java { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--java) 90% ); } .bottom-blue { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--blue) 90% ); } .bottom-gold { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--gold) 90% ); } .bottom-white { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--white) 90% ); } .bottom-black { background-image: linear-gradient( 180deg, #FFFFFF00 90%, var(--black) 90% ); } .top-lite { background-image: linear-gradient( 180deg, var(--lite) 10%, #FFFFFF00 10% ); } .top-light { background-image: linear-gradient( 180deg, var(--light) 10%, #FFFFFF00 10% ); } .top-java { background-image: linear-gradient( 180deg, var(--java) 10%, #FFFFFF00 10% ); } .top-blue { background-image: linear-gradient( 180deg, var(--blue) 10%, #FFFFFF00 10% ); } .top-gold { background-image: linear-gradient( 180deg, var(--gold) 10%, #FFFFFF00 10% ); } .top-white { background-image: linear-gradient( 180deg, var(--white) 10%, #FFFFFF00 10% ); } .top-black { background-image: linear-gradient( 180deg, var(--black) 10%, #FFFFFF00 10% ); } .both-white { background-image: linear-gradient( 180deg, var(--white) 10%, #FFFFFF00 10%, #FFFFFF00 90%, var(--white) 90% ); } .both-black { background-image: linear-gradient( 180deg, var(--black) 10%, #00000000 10%, #00000000 90%, var(--black) 90% ); } .pre-line:before { content:''; position:absolute; left:0; top:20px; display: inline-block; width:80px; height: 1px; background: var(--black); } .pre-line-:before { content:''; position:absolute; left:-100px; top:20px; display: inline-block; width:80px; height: 1px; background: var(--black); } .pre-line-white:before{ background: var(--white); } .btn-java, .btn-blue, .btn-white, .btn-black, .btn-blaky, .btn-green, .btn-gold, .btn { display:inline-block; line-height: 28px; padding:0 28px; cursor: pointer; border:0; font-family:var(--font-beba); font-size:16px; transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } .btn-java:hover, .btn-blue:hover, .btn-black:hover, .btn-blaky:hover, .btn-white:hover, .btn-green:hover, .btn-gold:hover, .btn:hover { transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } .btn, .btn-gold { color:var(--black); background-color:var(--gold); } .btn-java { color:var(--black); background-color:var(--java); } .btn-white { color:var(--black); background-color:var(--white); border:1px solid black; } .btn-blue { color:var(--white); background-color:var(--blue); } .btn-green { color:var(--black); background-color:var(--green); } .btn-black { color:var(--white); background-color:var(--black); } .btn-blaky { color:var(--white); background-color:var(--blaky); } .btn:hover, .btn-gold:hover { color:var(--white); background-color:var(--black); } .btn-java:hover { color:var(--white); background-color:var(--black); } .btn-white:hover { color:var(--white); background-color:var(--black); } .btn-blue:hover { color:var(--white); background-color:var(--black); } .btn-green:hover { color:var(--white); background-color:var(--black); } .btn-black:hover { color:var(--black); background-color:var(--gold); } .btn-blaky:hover { color:var(--blaky); background-color:var(--gold); } /* - - color & backgrounds - - */ .color-lite, .lite { color: var(--lite); } .color-light, .light { color: var(--light); } .color-java, .java { color: var(--java); } .color-blue, .blue { color: var(--blue); } .color-gold, .gold { color: var(--gold); } .color-green, .gold { color: var(--green); } .color-white, .white { color: var(--white); } .color-black, .black { color: var(--black); } .color-blaky, .blaky { color: var(--blaky); } .color-pink, .pink { color: var(--pink); } .color-red, .red { color: var(--red); } .has-lite-color { color: var(--lite); } .has-light-color { color: var(--light); } .has-java-color { color: var(--java); } .has-blue-color { color: var(--blue); } .has-gold-color { color: var(--gold); } .has-green-color { color: var(--green); } .has-white-color { color: var(--white); } .has-black-color { color: var(--black); } .has-blaky-color { color: var(--blaky); } .has-pink-color { color: var(--pink); } .has-red-color { color: var(--red); } .bg-lite { background-color: var(--lite); } .bg-light { background-color: var(--light); } .bg-java { background-color: var(--java); } .bg-blue { background-color: var(--blue); } .bg-gold { background-color: var(--gold); } .bg-green { background-color: var(--green); } .bg-white { background-color: var(--white); } .bg-black { background-color: var(--black); } .bg-blaky { background-color: var(--blaky); } .bg-pink { background-color: var(--pink); } .bg-red { background-color: var(--red); } svg{ vertical-align: middle; } .hover-lite:hover { color:var(--lite); } .hover-light:hover { color:var(--light); } .hover-java:hover { color:var(--java); } .hover-blue:hover { color:var(--blue); } .hover-gold:hover { color:var(--gold); } .hover-green:hover { color:var(--green); } .hover-black:hover { color:var(--black); } .hover-blaky:hover { color:var(--blaky); } .hover-white:hover { color:var(--white); } .hover-pink:hover { color:var(--pink); } .hover-red:hover { color:var(--red); } .hover-bg-lite:hover { background-color:var(--lite); } .hover-bg-light:hover { background-color:var(--light); } .hover-bg-java:hover { background-color:var(--java); } .hover-bg-blue:hover { background-color:var(--blue); } .hover-bg-gold:hover { background-color:var(--gold); } .hover-bg-green:hover { background-color:var(--green); } .hover-bg-white:hover { background-color:var(--white); } .hover-bg-black:hover { background-color:var(--black); } .hover-bg-blaky:hover { background-color:var(--blaky); } .hover-bg-pink:hover { background-color:var(--pink); } .hover-bg-red:hover { background-color:var(--red); } .has-links-lite a { color: var(--lite); border-bottom-color: var(--lite); } .has-links-light a { color: var(--light); border-bottom-color: var(--light); } .has-links-java a { color: var(--java); border-bottom-color: var(--java); } .has-links-blue a { color: var(--blue); border-bottom-color: var(--blue); } .has-links-gold a { color: var(--gold); border-bottom-color: var(--gold); } .has-links-green a { color: var(--green); border-bottom-color: var(--green); } .has-links-white a { color: var(--white); border-bottom-color: var(--white); } .has-links-black a { color: var(--black); border-bottom-color: var(--black); } .has-links-blaky a { color: var(--blaky); border-bottom-color: var(--blaky); } .has-links-red a { color: var(--red); border-bottom-color: var(--red); } .has-links-pink a { color: var(--pink); border-bottom-color: var(--pink); } .has-links-clean a { border: none; } .has-links-bg-lite a { background-color:var(--lite); } .has-links-bg-light a { background-color:var(--light); } .has-links-bg-java a { background-color:var(--java); } .has-links-bg-blue a { background-color:var(--blue); } .has-links-bg-gold a { background-color:var(--gold); } .has-links-bg-green a { background-color:var(--green); } .has-links-bg-white a { background-color:var(--white); } .has-links-bg-black a { background-color:var(--black); } .has-links-bg-blaky a { background-color:var(--blaky); } .has-links-300 a{ font-weight: 300; } .has-links-400 a{ font-weight: 400; } .has-links-500 a{ font-weight: 500; } .has-links-600 a{ font-weight: 600; } .has-links-700 a{ font-weight: 700; } .has-links-clean a{ border-bottom: 0; } .hover-links-lite a { color:var(--lite); } .hover-links-light a { color:var(--light); } .hover-links-java a { color:var(--java); } .hover-links-blue a { color:var(--blue); } .hover-links-gold a { color:var(--gold); } .hover-links-green a { color:var(--green); } .hover-links-white a { color:var(--white); } .hover-links-black a { color:var(--black); } .hover-links-blaky a { color:var(--blaky); } .hover-links-bg-lite:hover a { background-color:var(--lite); } .hover-links-bg-light:hover a { background-color:var(--light); } .hover-links-bg-java:hover a { background-color:var(--java); } .hover-links-bg-blue:hover a { background-color:var(--blue); } .hover-links-bg-gold:hover a { background-color:var(--gold); } .hover-links-bg-green:hover a { background-color:var(--green); } .hover-links-bg-white:hover a { background-color:var(--white); } .hover-links-bg-black:hover a { background-color:var(--black); } .hover-links-bg-blaky:hover a { background-color:var(--blaky); } .lined-lite, .lined-light, .lined-java, .lined-blue, .lined-gold, .lined-green, .lined-white, .lined-blaky, .lined-black{ -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; } .lined-lite { color: var(--lite); -webkit-text-stroke-color: var(--lite); } .lined-light{ color: var(--light); -webkit-text-stroke-color: var(--light); } .lined-java { color: var(--java); -webkit-text-stroke-color: var(--java); } .lined-blue { color: var(--blue); -webkit-text-stroke-color: var(--blue); } .lined-gold { color: var(--gold); -webkit-text-stroke-color: var(--gold); } .lined-green{ color: var(--green); -webkit-text-stroke-color: var(--green); } .lined-white{ color: var(--white); -webkit-text-stroke-color: var(--gold); } .lined-blaky{ color: var(--blaky); -webkit-text-stroke-color: var(--blaky); } .lined-black{ color: var(--black); -webkit-text-stroke-color: var(--black); } .grayscale { filter: grayscale(1); } .colored { filter: grayscale(0); } .hover-grayscale:hover { filter: grayscale(1); } .hover-colored:hover { filter: grayscale(0); } /* - - - - menu-tab section - - - - */ .menu-tab{ text-align: center; } .menu-tab a{ color:black; font-family: 'Bebas', sans-serif; font-weight:300; line-height: 1.2; font-size:25px; display:inline-block; margin:0 15px; text-decoration:none; border-bottom:3px solid transparent; } .menu-tab a:hover, .menu-tab a.active{ color:black; border-color:var(--orange); } /* - - - - wave/shapes sections - - - - */ /*-------------------------------------------------------------- # angled divs --------------------------------------------------------------*/ .angled-t:before{ content:' '; display:block; width:100vw; position: absolute; left:0; top:0; height:5.4vw; z-index: 700; background: linear-gradient( to top left, transparent 50%, #FFFFFF 50% ); } .angled-b:after { content:' '; display:block; width:100vw; position: absolute; left:0; bottom:0; height:5.4vw; z-index: 700; background: linear-gradient( to top left, #FFFFFF 50%, transparent 50% ); } .angled-t-white:before{ background: linear-gradient( to top left, transparent 50%, white 50% ); } .angled-t-black:before{ background: linear-gradient( to top left, transparent 50%, var(--black) 50% ); } .angled-t-blaky:before{ background: linear-gradient( to top left, transparent 50%, var(--blaky) 50% ); } .angled-t-gold:before { background: linear-gradient( to top left, transparent 50%, var(--gold) 50% ); } .angled-t-blue:before { background: linear-gradient( to top left, transparent 50%, var(--blue) 50% ); } .angled-t-lite:before { background: linear-gradient( to top left, transparent 50%, var(--lite) 50% ); } .angled-b-white:after{ background: linear-gradient( to top left, white 50%, transparent 50% ); } .angled-b-black:after{ background: linear-gradient( to top left, var(--black) 50%, transparent 50% ); } .angled-b-blaky:after{ background: linear-gradient( to top left, var(--blaky) 50%, transparent 50% ); } .angled-b-gold:after { background: linear-gradient( to top left, var(--gold) 50%, transparent 50%); } .angled-b-blue:after { background: linear-gradient( to top left, var(--blue) 50%, transparent 50%); } .angled-b-lite:after { background: linear-gradient( to top left, var(--lite) 50%, transparent 50%); } /*-------------------------------------------------------------- # venebox --------------------------------------------------------------*/ .head-line{ position:relative; overflow:hidden; } .head-line::after{ content:''; width:100%; height:2px; background:currentcolor; position:absolute; margin-left:30px; top:50%; z-index:0; } @media all and ( max-width: 600px ) { .head-line::after{ width:100%; top:-20px; } } .head-line-black::after{ background:black; } .head-line-white::after{ background:white; } /*-------------------------------------------------------------- # venebox --------------------------------------------------------------*/ .vbox-close { width: 50px; height: 50px; font-size: 50px; padding: 6px; line-height: 0.8; } vbox-figlio { box-shadow:none; } .responsive-container{ margin:30px 0; } .video-embed{ width:100%; position:relative; padding-top:57%; } .video-embed iframe.video{ position:absolute; top:0; left:0; width:100%; height:100%; } /*-------------------------------------------------------------- # carousel plugin --------------------------------------------------------------*/ .slick-dots li{ margin:0; bottom:0; } .slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:sans-serif;} .slick-dots li button:before{ font-size:50px; opacity:1; color:black;} .slick-dots li.slick-active button:before{opacity:.75;color:var(--gold)} .wp-block-cb-carousel .slick-next,.slick-prev{ width:30px; height:30px; font-size: 12px; text-decoration: none; } .wp-block-cb-carousel .slick-next:before, .wp-block-cb-carousel .slick-prev:before{ content:'\25BA'; font-size: 28px; } .wp-block-cb-carousel .slick-prev{ transform: scaleX(-1); } .wp-block-cb-carousel .slick-next:not(:hover):not(:active), .wp-block-cb-carousel .slick-prev:not(:hover):not(:active){ background-color:var(--grey);} .wp-block-cb-carousel .slick-dots li button:not(:hover):not(:active){ background-color:transparent;} .wp-block-cb-carousel .slick-next:hover:not(:active), .wp-block-cb-carousel .slick-prev:hover:not(:active){ background-color:var(--grey);} .wp-block-cb-carousel .slick-next:before, .wp-block-cb-carousel .slick-prev:before{ color:var(--black);} .wp-block-cb-carousel .slick-prev{ left:-40px !important; z-index:30; } .wp-block-cb-carousel .slick-next{ right:-40px !important; z-index:30; } /* .wp-block-cb-carousel .slick-next{ background-image:url(/wp-content/themes/elevate-2022/assets/svgs/arrow-next.svg); background-repeat: no-repeat; } .wp-block-cb-carousel .slick-prev{ background-image:url(/wp-content/themes/elevate-2022/assets/svgs/arrow-prev.svg); background-repeat: no-repeat; } */ .wp-block-cb-carousel.ctrl-white .slick-next:not(:hover):not(:active), .wp-block-cb-carousel.ctrl-white .slick-prev:not(:hover):not(:active){ color:var(--white);} .wp-block-cb-carousel.ctrl-white .slick-next:hover:not(:active), .wp-block-cb-carousel.ctrl-white .slick-prev:hover:not(:active){ color:var(--white);} .wp-block-cb-carousel.ctrl-gold .slick-next:not(:hover):not(:active), .wp-block-cb-carousel.ctrl-gold .slick-prev:not(:hover):not(:active){ color:var(--gold);} .wp-block-cb-carousel.ctrl-gold .slick-next:hover:not(:active), .wp-block-cb-carousel.ctrl-gold .slick-prev:hover:not(:active){ color:var(--gold);} /*-------------------------------------------------------------- # play --------------------------------------------------------------*/ .has-video-icon, figure:has(.video-icon){ position:relative; } .has-video-icon::after, figure:has(.video-icon)::after{ content:'\25BA'; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display:inline-block; font-size:60px; color:#FFFFFFA0; } /*-------------------------------------------------------------- # forms --------------------------------------------------------------*/ select, input[type="text"], input[type="email"] { width: 100%; background-color:white; border:0; border-radius:0; line-height: 44px; height:44px; padding:0 6px; } textarea{ width: 100%; background-color: white; border:0; } input[type="submit"] { display:inline-block; line-height: 28px; padding:0 28px; cursor: pointer; border:0; font-family:var(--font-beba); font-size:16px; background-color: var(--gold); color:black; transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s opacity ease-in-out; } input[type="submit"]:hover{ background-color: var(--black); color:white; } /*-------------------------------------------------------------- # box fill & rotates --------------------------------------------------------------*/ .box-fill{ position: absolute; top:0; left:0; right:0; bottom:0; background-size: cover; background-repeat: no-repeat; background-position: center center; } .rotate-3 { transform: rotate(-3deg); } .rotate-45{ transform: rotate(-45deg); } /*-------------------------------------------------------------- # drop-links --------------------------------------------------------------*/ .drop-links{ font-size:16px; font-weight:500; display:inline-block; padding:5px 10px; width: auto; border:2px solid;background:transparent; } .drop-links.light{ color:var(--black); } .drop-links.dark { color:var(--white); } .drop-links.gold { color:var(--gold); } /*-------------------------------------------------------------- # gravity forms --------------------------------------------------------------*/ .ep-form{ padding:0; margin:0; } .ep-form ul { padding:0; margin:0; list-style: none; display:block; } .ep-form li { display: block; width:100%; } .ep-form .gfield_label { display: block; width:100%; font-size:34px !important; line-height:1; font-family: 'Bebas Neue', sans-serif; color:white } .ep-form .ginput_container{ display: block; width:100%; } .ep-form .gfield_required{ display:none; } .ep-form select{ -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCA3LjMzbDIuODI5LTIuODMgOS4xNzUgOS4zMzkgOS4xNjctOS4zMzkgMi44MjkgMi44My0xMS45OTYgMTIuMTd6Ii8+PC9zdmc+"); background-repeat: no-repeat; background-position: 95% center; background-size: 12px; } .ep-form select, .ep-form input[type="text"], .ep-form input[type="email"]{ width: 100%; background-color:white; border:0; border-radius:0; line-height: 40px; height:40px; padding:0 6px; } .ep-form textarea{ width: 100%; background-color: white; border:0; } .ep-form li.ep-form-inline { display: table !important; vertical-align: middle; width:100%; } .ep-form .ep-form-inline .gfield_label { display: table-cell !important; width: 1px; white-space: nowrap; padding:0px 20px 0 0; vertical-align: middle; } .ep-form .ep-form-inline .ginput_container{ display: table-cell !important; } .ep-form .ep-form-nolabel .gfield_label { display: none !important; } .ep-form-small { font-size: 12px !important; color:white; } @media ( max-width: 600px ) { .ep-form li.ep-form-inline { display: block !important; } .ep-form .ep-form-inline .gfield_label { display: block !important; width: 100%; } .ep-form .ep-form-inline .ginput_container{ display: block !important; } } .acf-input select, .acf-input input[type="text"], .acf-input input[type="email"], .acf-input textarea{ border:2px solid #ccc; } .acf-input .acf-code { font-family: monospace; font-size: 13px; color:#027f2d; } .swiper-button-prev:after, .swiper-button-next:after { content: '\25BA'; font-family: sans-serif; font-size: 24px; } .swiper-button-prev{ transform: scaleX(-1) } .swiper-black .swiper-button-prev { left: -40px !important; color: black; } .swiper-white .swiper-button-prev { left: -40px !important; color: white; } .swiper-black .swiper-button-next { right: -40px !important; color: black; } .swiper-white .swiper-button-next { right: -40px !important; color: white; } .swiper-black .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-white .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -40px !important; top: auto !important; } .swiper-black .swiper-pagination-bullet{ background: white !important; } .swiper-white .swiper-pagination-bullet{ background: white !important; } .swiper-black .swiper-pagination-bullet-active{ background: var(--gold) !important; } .swiper-white .swiper-pagination-bullet-active{ background: var(--gold) !important; } /*-------------------------------------------------------------- # see more text --------------------------------------------------------------*/ .see-more-text{ font-size:inherit; transition:font-size 0.1s; cursor:pointer; pointer-events: none; } .see-more-text:before{ content:'READ LESS'; display:block; font-size:14px; margin:0 0 6px; pointer-events: auto; } .see-more-text a{ pointer-events: auto } .see-more-text.closed{ font-size:0px; transition:font-size 0.1s; } .see-more-text.closed:before{ content:'READ MORE'; font-size:14px; } .see-more-text:before{ color:var(--green); } /*-------------------------------------------------------------- # orderedd lists --------------------------------------------------------------*/ ol{ counter-reset: the-counter; list-style: none; padding-left: 40px; } ol li { margin: 0 0 0.5rem 0; counter-increment: the-counter; position: relative; } ol li::before { content: counter(the-counter); position: absolute; top: 3px; left:-40px; font-size: 14px; --size: 22px; line-height: var(--size); width: var(--size); height: var(--size); border-radius: 50%; border:1px solid black; text-align: center; } .in-circle{ display:inline-block; font-size: 22px; --size: 28px; line-height: var(--size); width: var(--size); height: var(--size); border-radius: 50%; border:1px solid black; text-align: center; } ol.circle-white li::before{ border-color:white; } /*-------------------------------------------------------------- # Q&A --------------------------------------------------------------*/ .Q { position: relative; display: block; margin:15px 0 0; padding:20px 50px 20px 20px; font-weight: 600; background:var(--lite); cursor: pointer; } .Q:first-child{ margin:0;} .A { display: block; padding: 10px 20px 20px; margin:0; background:var(--lite); display:none; } .Q s{ position: absolute; right:20px; top:15px; display: inline-block; width:30px; height: 30px; border-radius:50%; text-align: center; font-size:24px; font-weight:300; line-height: 28px; border:1px solid; text-decoration: none; cursor: pointer; } .rota45{ transform: rotate(-45deg); } /*-------------------------------------------------------------- # Opacity --------------------------------------------------------------*/ .only-hover{ opacity:0; } .only-hover:hover{ opacity:1; } .opacity-0{ opacity:0; } .opacity-1{ opacity:1; } .hover-opacity-0:hover{ opacity:0; } .hover-opacity-1:hover{ opacity:1; } @media ( max-width: 600px ) { .mobi-opacity-0{ opacity:0; } .mobi-opacity-1{ opacity:1; } }