body{ font-family: 'AvenirNext-Regular', sans-serif !important; } h1, h2, h3, h4, h5, h6 { font-family: 'AvenirNext-Bold', sans-serif !important; } iframe{ display: block; max-width: 100%; width: 100%; } .regular{ font-family: 'AvenirNext-Regular', sans-serif !important; } .medium{ font-family: 'AvenirNext-Medium', sans-serif !important; } .bold{ font-family: 'AvenirNext-Bold', sans-serif !important; } img{ display: block; max-width: 100%; } header{ } header .logo-wrapper{ } header .logo-wrapper a.logo{ } header .logo-wrapper a.logo img{ } header .header-links-wrapper{ } header .header-links-wrapper ul.header-links{ padding: 0; margin: 0; list-style: none; display: inline-flex; align-content: center; align-items: center; height: 100%; } header .header-links-wrapper ul.header-links li{ display: inline-block; margin-left: 10px; } header .header-links-wrapper ul.header-links li.header-link{ } header .header-links-wrapper ul.header-links li.social-link{ } header .header-links-wrapper ul.header-links li.menu-link{ margin-left: 30px; } header .header-links-wrapper ul.header-links li a{ display: block; width: 42px; height: 42px; line-height: 42px; text-align: center; padding: 3px; background-color: #006947; border-radius: 50%; opacity: .8 } header .header-links-wrapper ul.header-links li:hover a{ opacity: 1 } header .header-links-wrapper ul.header-links li.header-link a{ } header .header-links-wrapper ul.header-links li.social-link a{ } header .header-links-wrapper ul.header-links li.menu-link a{ } header .header-links-wrapper ul.header-links li a i{ font-size: 20px; color: #FFF; } header .header-links-wrapper ul.header-links li.header-link a{ } header .header-links-wrapper ul.header-links li.social-link a{ } header .header-links-wrapper ul.header-links li.menu-link a{ } #main-menu{ cursor: pointer; } #main-menu-container{ position: absolute; width: 100%; background: #278252; z-index: 100; left: 0; color: #fff; padding: 20px 0 20px; } .main-menu-wrapper{ visibility: hidden; opacity: 0; transition: visibility 1s, opacity 1s ; } .main-menu-wrapper.active{ visibility: visible; opacity: 1; } .main-menu-wrapper ul{ padding: 0; margin:0; list-style: none; text-align: center; } .main-menu-wrapper li{ display: inline-block; padding: 4px 8px; margin:0 4px; } .main-menu-wrapper a.logout{ background: #FFF; color:#278252; border-radius:4px; padding: 4px 10px; } .main-menu-wrapper a.register{ background: #FFF; color:#278252; border-radius:4px; padding: 4px 10px; } .hero{ display: block; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: bottom center; color: #FFF; padding-top: 100px; margin-bottom: -100px; } .hero .hero-inner-content{ } .hero .hero-inner-content video{ } .hero .hero-inner-image{ position: relative; padding-top: 40px; } .hero .hero-inner-image .hero-inner-description{ position: absolute; padding-right: 180px; position: absolute; } .hero .hero-inner-image .hero-inner-description h3{ } .hero .hero-inner-image .hero-inner-description h2{ } .hero .hero-inner-image .hero-inner-description p{ } .hero .hero-inner-image img{ } .blog-links-wrapper{ display: block; border-radius: 5px; margin-bottom: 100px } .blog-links-wrapper h2.blog-links-heading{ color: #FFF; text-align: center; margin-bottom: 40px; } .blog-links-wrapper ul.blog-links{ display: block; font-size:0; padding:0; margin:0 auto; background: #FFF; box-shadow:0 10px 20px rgba(0,0,0,0.3); border-radius: 5px; } .blog-links-wrapper ul.blog-links li.blog-link{ font-size: 0; display: inline-block; position: relative; width: 180px; height: 160px; padding: 25px 12px; margin:0; border-radius: 5px; text-align: center; background: #FFF; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .blog-links-wrapper ul.blog-links li.blog-link::before{ content: ""; border-radius: 5px; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .blog-links-wrapper ul.blog-links li.blog-link::after{ content:''; position: absolute; height: 50%; width: 3px; top:25%; left:-1px; background: #1F9C80 } .blog-links-wrapper ul.blog-links li.blog-link:first-child{ } .blog-links-wrapper ul.blog-links li.blog-link:first-child::after{ background: transparent; } .blog-links-wrapper ul.blog-links li.blog-link:last-child{ } .blog-links-wrapper ul.blog-links li.blog-link .blog-link-inner{ display: grid; align-content: center; align-self: center; align-items: center; } .blog-links-wrapper ul.blog-links li.blog-link .item-image{ display: block; } .blog-links-wrapper ul.blog-links li.blog-link .item-image img{ height: 38px; margin: 0 auto; margin-bottom: 10px; } .blog-links-wrapper ul.blog-links li.blog-link .item-text{ display: block; color: #1F9C80; } .blog-links-wrapper ul.blog-links li.blog-link .item-text span{ display: block; color: #1F9C80; font-size: 12px; line-height: 13px; text-transform: uppercase; } .blog-links-wrapper ul.blog-links li.blog-link .item-link{ display: none; } .blog-links-wrapper ul.blog-links li.blog-link .item-link a{ position: absolute; bottom: 20px; left: 50%; margin-left: -16px; display: block; width: 32px; height: 32px; line-height: 32px; background: #FFF; border-radius: 50%; font-size: 22px; } .blog-links-wrapper ul.blog-links li.blog-link .item-link a i{ color: #1F9C80; } .blog-links-wrapper ul.blog-links li.blog-link:hover{ z-index: 2; -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25); background: #1F9C80; padding: 16px 12px; } .blog-links-wrapper ul.blog-links li.blog-link:hover::before{ } .blog-links-wrapper ul.blog-links li.blog-link:hover::after{ opacity: 1; background: transparent; } .blog-links-wrapper ul.blog-links li.blog-link:hover .item-image{ } .blog-links-wrapper ul.blog-links li.blog-link:hover .item-image img{ } .blog-links-wrapper ul.blog-links li.blog-link:hover .item-text{ } .blog-links-wrapper ul.blog-links li.blog-link:hover .item-text span{ color: #FFF } .blog-links-wrapper ul.blog-links li.blog-link:hover .item-link{ display: block; } .blog-links-wrapper ul.blog-links li.blog-link:hover .item-link a{ } .dg-container{ width:100%; height:480px; position:relative; padding: 20px 0; } .dg-wrapper{ width:600px;height:400px;margin:0 auto;position:relative;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;-moz-perspective:1000px;-o-perspective:1000px;-ms-perspective:1000px;perspective:1000px} .dg-wrapper .slide_item{ width:600px; height:400px; display:block; position:absolute;left:0;top:0; box-shadow:0 10px 20px rgba(0,0,0,0.3); background-color: #17A54D; } .dg-wrapper .slide_item .slide_inner{ width: 100%; height:100%; display:block; position:relative; padding-right: 80px; transition: padding-right 0.2s; -webkit-transition: padding-right 1s; background: #17A54D; } .dg-wrapper .slide_item .course_image{ background-repeat: no-repeat; background-size: cover; display: block; width: 100%; height: 100%; } .dg-wrapper .slide_item .course_info{ display: block; position: absolute; right: 0; top:0; width: 80px; height: 100%; background: #17A54D; padding: 20px; color: #FFF; box-shadow:0 10px 20px rgba(0,0,0,0.3); } .dg-wrapper .slide_item .course_info .course_title{ opacity: 0; display: none; transition: opacity 1s, display 0.1s; -webkit-transition: opacity 1s, display 1s; } .dg-wrapper .slide_item .course_info .course_desc{ opacity: 0; display: none; transition: opacity 1s, display 0.1s; -webkit-transition: opacity 1s, display 1s; } .dg-wrapper .slide_item .course_info .course_title_rotated{ opacity: 1; transform-origin: 20px 20px; transform: rotate(90deg); -webkit-transform-origin: 20px 20px; -webkit-transform: rotate(90deg); height: 100%; display: block; width: 360px; transition: opacity 1s, display 0.2s; -webkit-transition: opacity 1s, display 0.6s; } .dg-wrapper .slide_item.dg-center{ } .dg-wrapper .slide_item.dg-center .slide_inner{ padding-right: 240px; } .dg-wrapper .slide_item.dg-center .course_info{ width: 240px; /*height: 440px; top:-20px;*/ display: grid; align-content: center; align-items: center; animation: all 1s ease-in-out; -webkit-animation: all 1s ease-in-out; /*-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); */ } .dg-wrapper .slide_item.dg-center .course_info .course_title{ opacity: 1; display: block; } .dg-wrapper .slide_item.dg-center .course_info .course_desc{ opacity: 1; display: block; } .dg-wrapper .slide_item.dg-center .course_info h4{ font-size: 20px; } .dg-wrapper .slide_item.dg-center .course_info .course_desc{ font-size: 14px; } .dg-wrapper .slide_item.dg-center .course_info .course_desc ul{ list-style: disc; } .dg-wrapper .slide_item.dg-center .course_info .course_desc ul li{ } .dg-wrapper .slide_item.dg-center .course_info .course_desc p{ } .dg-wrapper .slide_item.dg-center .course_info a{ font-size: 14px; display: block; border-radius: 20px; border: 1px solid #FFF; width: 120px; padding: 6px 10px; text-align: center; } .dg-wrapper .slide_item.dg-center .course_info .course_title_rotated{ width: 0; opacity: 0; display: none; } .dg-wrapper .slide_item.dg-transition{-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;transition:all .8s ease-in-out} .dg-wrapper .slide_item.dg-center div{display:block} .dg-container nav.dg-controls{ width:1200px; position:absolute; z-index:1000; top: 50%; margin-top: -18px; left:50%; margin-left:-600px; } .dg-container span.dg-control{ float:left; cursor:pointer; width:36px; height:36px; opacity:.8; position: relative; } .dg-container span.dg-control:hover{ opacity:1 } .dg-container span.dg-prev{ float: left; } .dg-container span.dg-next{ float: right; } .dg-container span::after{ font-family: 'Font Awesome 5 Free'; font-weight: bold; display: block; color: #1F9C80; line-height: 36px; font-size: 36px } .dg-container span.dg-prev::after{ content: '\f104'; } .dg-container span.dg-next::after{ content: '\f105'; text-align: right; } .mobile-slider{ margin: 0 30px; background: #17A54D; color: #FFF } .mobile-slider .slide_item{ display: block; padding: 20px; text-align: center; background: #17A54D; } .mobile-slider .slide_item img{ display: block; width: 100%; margin: 0 auto; } .mobile-slider .slide_item .course_info h4{ font-size: 20px; } .mobile-slider .slide_item .course_info .course_desc{ font-size: 14px; } .mobile-slider .slide_item .course_info .course_desc ul{ list-style: disc; } .mobile-slider .slide_item .course_info .course_desc ul li{ } .mobile-slider .slide_item .course_info .course_desc p{ } .mobile-slider .slide_item .course_info a{ color: #17A54D; font-size: 14px; display: block; border-radius: 20px; border: 1px solid #FFF; width: 120px; margin:0 auto; padding: 6px 10px; text-align: center; background: #FFF; font-size: 14px; display: block; border-radius: 20px; border: 1px solid #777777; width: 140px; margin-top: 15px; } .hero{ } .hero-inner-content{ /*display: grid; align-self: center; align-items: center; align-content: center;*/ } .hero-inner-image{ position: relative; } .hero-inner-image .hero-inner-description{ } .blog-links-wrapper{ } .blog-links-wrapper .blog-links-heading{ } .blog-links-wrapper .blog-links{ } .blog-links-wrapper .blog-link{ } .blog-links-wrapper .blog-link .item-image{ } .blog-links-wrapper .blog-link .item-image img{ } .blog-links-wrapper .blog-link .item-text{ } .blog-links-wrapper .blog-link .item-text span{ } .blog-links-wrapper .blog-link .item-link{ } .blog-links-wrapper .blog-link .item-link a{ } .blog-links-wrapper .blog-link .item-link i{ } .blog-links-wrapper .blog-link.in-hover .item-image{ } .blog-links-wrapper .blog-link.in-hover .item-image img{ } .blog-links-wrapper .blog-link.in-hover .item-text{ } .blog-links-wrapper .blog-link.in-hover .item-text span{ } .blog-links-wrapper .blog-link.in-hover .item-link{ } .blog-links-wrapper .blog-link.in-hover .item-link a{ } .blog-links-wrapper .blog-link.in-hover .item-link i{ } #slider-blocks-wrapper.slider-blocks-wrapper{ display: block; padding-top: 100px; padding-bottom: 20px; } #slider-blocks-wrapper.slider-blocks-wrapper .slider-blocks-heading.text-center { } #slider-blocks-wrapper.slider-blocks-wrapper .slider-blocks-heading.text-center h2 { color: #17A54D; display: block; margin-bottom: 30px; } #slider-blocks-wrapper.slider-blocks-wrapper { } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks { margin: 0; padding: 0; list-style: none; } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks li.slide-block { padding: 0 20px; } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks li.slide-block a.slide-block { color: #2B2621; } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks li.slide-block a.slide-block div.slide-image { } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks li.slide-block a.slide-block div.slide-image img { display: block; max-width: 100%; } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks li.slide-block a.slide-block div.slide-heading { } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks li.slide-block a.slide-block div.slide-heading span { display: block; margin-top: 15px; } #slider-blocks-wrapper .slick-prev::before, .slick-prev::before { color: #1F9C80; } #slider-blocks-wrapper .slick-next::before, .slick-prev::before { color: #1F9C80; } #slider-news-wrapper.slider-news-wrapper{ display: block; padding-top: 100px; padding-bottom: 100px; margin-bottom: 0px; } #slider-news-wrapper.slider-news-wrapper .slider-news-heading.text-center { } #slider-news-wrapper.slider-news-wrapper .slider-news-heading.text-center h2 { color: #17A54D; display: block; margin-bottom: 30px; } #slider-news-wrapper.slider-news-wrapper { } #slider-news-wrapper.slider-news-wrapper ul.slider-news { margin: 0; padding: 0; list-style: none; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block{ position: relative; font-size: 0; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block div.slide-image { display: inline-block; width: 70%; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block div.slide-image img { display: block; max-width: 90%; margin:0 auto; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block{ display: inline-block; width: 40%; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block .slide-info { display: grid; position: absolute; width: 40%; top: 0; right: 10px; height: 100%; align-content: center; align-items: center; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block .slide-info-inner { display: grid; background: #FFF; box-shadow:0 1px 10px rgba(0,0,0,0.3); padding: 35px; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block .slide-info h3 { text-transform: uppercase; font-size: 22px } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block .slide-info .slide-content { font-size: 16px; line-height: 25px; } #slider-news-wrapper .slick-prev::before, .slick-prev::before { color: #1F9C80; } #slider-news-wrapper .slick-next::before, .slick-prev::before { color: #1F9C80; } .btn.btn-light.btn-white{ background: #FFF; font-size: 14px; display: block; border-radius: 20px; border: 1px solid #777777; width: 140px; margin-top: 15px; } .webinars-wrapper{ background: #F3F3F3; padding-top: 100px; padding-bottom: 100px; } .webinars-wrapper .white-background{ background: #FFF; padding: 30px; } .webinars-wrapper .btn.btn-green{ background: #17A54D; font-size: 14px; display: block; border-radius: 20px; color: #FFF; width: 140px; margin: 0 auto; } .webinar-main-inner{ } .webinar-main-inner .webinar-title{ } .webinar-main-inner .webinar-description{ margin-bottom: 10px; } .webinar-main-inner .webinar-image{ margin-bottom: 10px; } .webinar-main-inner .webinar-link{ } ul.webinars-list{ list-style: none; padding: 0; margin: 0; } ul.webinars-list li.webinar{ display: block; width: 100%; font-size: 0; margin-bottom: 30px; } ul.webinars-list li.webinar .column-wrapper{ display: inline-block; font-size: 12px; } ul.webinars-list li.webinar .column-wrapper.date-wrapper span{ display: block; } ul.webinars-list li.webinar .column-wrapper.info-wrapper{ } ul.webinars-list li.webinar .column-wrapper.image-wrapper{ } ul.webinars-list li.webinar .column-wrapper h4{ } ul.webinars-list li.webinar .column-wrapper span.date{ display: block; margin-bottom: 10px; } ul.webinars-list li.webinar .column-wrapper .info-wrapper-description{ font-size: 12px; display: block; margin-bottom: 10px; } ul.webinars-list li.webinar .column-wrapper a{ text-decoration: underline; } .webinars-wrapper .events-date-wrapper{ display: block; width: 100%; position: relative; font-size: 18px; margin-top: 5px; margin-bottom: 30px; } .webinars-wrapper .events-date-wrapper span{ position: relative; background: #FFF; z-index: 2; padding-right: 15px; } .webinars-wrapper .events-date-wrapper::after{ content: ''; left: 0; width: 100%; height: 1px; top: 55%; display: block; background: #D8D8D8; position: absolute; z-index: 1; } .newsletter-wrapper{ background-image: url('/images/bg.png'); color: #FFF; margin-bottom: -60px; } .newsletter-wrapper .form-wrapper { display: grid; align-content: center; } .newsletter-wrapper .form-wrapper label { display: block; width: 100%; margin-bottom: 5px } .newsletter-wrapper .form-wrapper label input{ display:block; width: 100%; background: transparent; border: 0; display: block; border-bottom: 1px solid #FFF; color:#FFF; padding: 10px 0; } .newsletter-wrapper button.btn.btn-red{ background: #B22A2E; font-size: 14px; display: block; border-radius: 20px; border: 1px solid #777777; width: 140px; color: #FFF; padding: 10px; margin-top: 20px; } .form-wrapper h2{ } .slick-next::before, .slick-prev::before { font-size: 30px !important; } .slick-next, .slick-prev{ z-index: 9999; } footer{ background: #EFEFF5; padding-top: 50px; padding-bottom: 50px; } footer a.link-footer{ display: flex; width: 100%; background: #FFF; font-size: 0; position: relative; } footer a.link-footer .image-wrapper{ display: inline-block; width: 30%; } footer a.link-footer .image-wrapper img{ display: block; width: 64px } footer a.link-footer .link-wrapper{ display: grid; width: 70%; align-content: center; } footer a.link-footer .link-wrapper span{ font-size: 12px; padding-right: 20px; } footer a.link-footer .link-wrapper span::after{ content: '\f105'; position: absolute; right: 10px; font-family: 'Font Awesome 5 Free'; font-weight: bold; display: block; color: #777777; font-size: 22px; top: 30%; } footer .link-outer{ display: grid; align-self: center; align-content: center; align-items: center; } .newsletter-wrapper input::placeholder{ color: #FFF; } .newsletter-wrapper ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #FFF; } .newsletter-wrapper :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #FFF; opacity: 1; } .newsletter-wrapper ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #FFF; opacity: 1; } .newsletter-wrapper :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #FFF; } .newsletter-wrapper ::-ms-input-placeholder { /* Microsoft Edge */ color: #FFF; } .newsletter-wrapper ::placeholder { /* Most modern browsers support this now. */ color: #FFF; } @media all and ( max-width: 480px ){ .blog-links-wrapper ul.blog-links li.blog-link { width: 130px; } } @media all and ( max-width: 768px ){ .main-menu-wrapper li{ display: block; width: 100%; margin-bottom: 10px; } h1{ font-size: 32px } h2{ font-size: 28px } h3{ font-size: 24px } h4{ font-size: 20px } .webinars-wrapper { padding-top: 40px; } .webinars-wrapper .white-background { padding: 20px; } .webinars-list-inner.white-background h2{ text-align: center; } .webinars-wrapper .events-date-wrapper span { padding-right: 15px; padding-left: 15px; } .webinars-wrapper .events-date-wrapper { text-align: center; } .column-wrapper.image-wrapper{ margin-top: 15px; } } @media all and ( max-width: 1024px ){ .hero .hero-inner-image .hero-inner-description{ position: relative; padding: 0 !important; text-align: center; } .blog-links-wrapper{ margin-bottom:0 !important; } .blog-links-wrapper ul.blog-links{ margin: 30px; text-align: center; box-shadow: unset; } .blog-links-wrapper ul.blog-links li.blog-link{ width: 140px; padding: 30px 12px; margin: 5px; background: #FFF; box-shadow: 0 10px 20px rgba(0,0,0,0.3); border-radius: 5px; height: 190px; } .blog-links-wrapper ul.blog-links li.blog-link .item-link{ display: block; } .blog-links-wrapper ul.blog-links li.blog-link .item-link a{ display: block; background: #1F9C80; } .blog-links-wrapper ul.blog-links li.blog-link .item-link a i{ color: #FFF; } .blog-links-wrapper ul.blog-links li.blog-link::after{ background: transparent; } #slider-blocks-wrapper.slider-blocks-wrapper ul.slider-blocks{ margin: 0 30px; } #slider-news-wrapper.slider-news-wrapper ul.slider-news{ margin: 0 20px; padding-bottom: 40px; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block{ display: block; width: 100% } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block div.slide-image{ display: block; width: 100%; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block .slide-info{ display: block; position: relative; width: 100%; padding: 15px; top: 0; left: 0; } #slider-news-wrapper.slider-news-wrapper ul.slider-news li.slide-block .slide-info-inner{ display: block; width: 100%; padding: 25px; } #slider-news-wrapper.slider-news-wrapper{ margin-bottom: 0; } .column-wrapper h4{ text-align: center; } .newsletter-wrapper .form-wrapper{ padding: 50px 25px; } footer{ text-align: center; padding-top: 30px; padding-bottom: 100px; } footer .link-outer{ margin-bottom: 10px; } footer img{ display: block; margin: 0 auto; margin-bottom: 10px } .contact_form_wrapper{ max-width: 100%; right: 0 !important; } .btn.btn-light.btn-white{ margin: 0 auto } #slider-blocks-wrapper.slider-blocks-wrapper{ padding-top: 40px; } } #cookieWrapper { position: fixed; bottom: 0; z-index: 4; }