section[data-cattype="701"].wrapper_middle { padding: 20px 0px 0px 0px; z-index: 5 !important; } [data-cattype="701"] .sub-heading { font-size: 45px; color: #fc712c; margin-top: 3vh; font-weight: 500; } [data-cattype="701"] h1.heading-project { font-size: 3.4em; color: #000; font-weight: 600; padding-bottom: 20px; margin-top: 0; } [data-cattype="701"] ul.list-point { display: flex; flex-wrap: wrap; margin-bottom: 15px; flex-wrap: wrap; justify-content: center; align-items: stretch; margin-top: 20px; } [data-cattype="701"] ul.list-point > li { width: auto; font-size: 0.9em; opacity: 0; } [data-cattype="701"] ul.list-point > li::after { content: "|"; padding-left: 20px; padding-right: 20px; font-weight: bold; color: #fc9103; } [data-cattype="701"] ul.list-point > li:last-child::after{ content: ""; } [data-cattype="701"] ul.list-point > li *, [data-cattype="701"] ul.list-point > li a{ color: #282828; } [data-cattype="701"] ul.list-point > li a:hover{ color: #000; } [data-cattype="701"] ul.list-point > li label { font-weight: bold; font-size: 0.9em; color: #000; padding-bottom: 1px; margin-bottom: 3px; } [data-cattype="701"] .background-img { height: 500px; background-position: center right; background-repeat: no-repeat; background-size: cover; border-radius: 0px 40px 40px 40px; top: 30px; position: absolute; width: 100%; left: 70px; z-index: 2; } [data-cattype="701"] .overview { padding: 160px 120px 0px 140px; } [data-cattype="701"] .btn-more { margin: 0.9em 0; font-size: 20px; color: #f87733; font-weight: 300; } [data-cattype="701"] .btn-more { color: #000; } [data-cattype="701"] .btn-more span { width: 25px; height: 25px; background-repeat: no-repeat; background-position: center center; background-image: url('../../../data/repo/images/right_orange.svg'); display: inline-block; vertical-align: bottom; transition: 0.3s; } [data-cattype="701"] .btn-more:hover span { transform: translateX(15px); background-image: url('../../../data/repo/images/right_black.svg'); transition: 0.3s; } [data-cattype="701"] .bg-left { position: relative; } .nav-down [data-cattype="701"].loadeds .vertical-divider, .reached-top [data-cattype="701"] .vertical-divider { height: 120px; margin-top: 50px; } [data-cattype="701"] .vertical-divider { border-left: 2px solid #f8920a; height: 0; position: absolute; left: 50%; margin-left: -15px; top: 150px; content: ""; z-index: 130; } [data-cattype="701"] .video-bg { width: 600px; height: 540px; position: absolute; top: 25%; overflow: hidden; border-radius: 0px 0px 40px 0px; } [data-cattype="701"] video { width: 500px; width: 1040px; position: absolute; left: 0; } [data-cattype="701"] #toggle-btn { display: none; } @media (min-width: 1600px) { [data-cattype="701"] ul.list-point > li { font-size: 1em; } } @media (min-width: 1200px) and (max-width: 1440px) { [data-cattype="701"] .overview { padding: 120px 40px 40px 140px; } [data-cattype="701"] ul.list li { width: 170px; margin: 5px; font-size: 15px; } [data-cattype="701"] .background-img { height: 360px; } [data-cattype="701"] .video-bg { height: 370px; } [data-cattype="701"] .vertical-divider { left: 50%; margin-left: 30px; top: 135px; } .nav-down [data-cattype="701"].loadeds .vertical-divider, .reached-top [data-cattype="701"] .vertical-divider { height: 80px; margin-top: 60px; } } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="701"] .video-bg { width: 400px; height: 340px; position: absolute; top: 40%; overflow: hidden; border-radius: 0px 0px 40px 0px; z-index: -2; } [data-cattype="701"] .background-img { height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0px 40px 40px 40px; top: 30px; position: relative; width: 90%; left: 90px; z-index: 2; } [data-cattype="701"] .overview { padding: 160px 50px 20px 50px; } } @media (max-width: 767px) { } @media (max-width: 480px) { [data-cattype="701"] ul.list-point { margin: 20px; } [data-cattype="701"] h1.heading-project { font-size: 2.1em; padding: 0; } [data-cattype="701"] ul.list-point > li { width: 40%; } [data-cattype="701"] .background-img { height: 200px; } [data-cattype="701"] .overview { padding: 30px; } [data-cattype="701"] .project-overview { text-align: justify; } [data-cattype="701"] .btn { margin-left: auto; margin-right: auto; display: block; width: 50%; } [data-cattype="701"] ul.list-point > li::after { display: none; } [data-cattype="701"] ul.list-point > li { width: 100%; margin: 5px; text-align: left; border-bottom: solid 1px #ccc; padding-bottom: 5px; } [data-cattype="701"] ul.list-point > li:last-child { border-bottom: none; } [data-cattype="701"] .background-img { height: 245px; width: 80%; right: 0; border-radius: 0px 0px 0px 20px; } [data-cattype="701"] .overview { padding: 30px; margin-top: 265px; } [data-cattype="701"] .video-bg { width: 100%; height: 250px; position: absolute; top: 25%; overflow: hidden; border-radius: 0px 0px 40px 0px; } [data-cattype="701"] .sub-heading { font-size: 35px; color: #fc712c; margin-top: 3vh; font-weight: 500; } [data-cattype="701"] .content-container { position: relative; max-height: 250px; overflow: hidden; transition: 0.3s; } [data-cattype="701"] .content-paragraph { margin: 0; padding: 10px; background-color: white; } [data-cattype="701"] .overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 150px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white); } [data-cattype="701"] .hiddenx { display: none; } [data-cattype="701"] .content-container p { text-align: justify; } [data-cattype="701"] #toggle-btn { color: #000; text-align: center; } [data-cattype="701"] button#toggle-btn { background-color: transparent; border: transparent; padding: 0; display: block; text-align: center; margin: auto; } [data-cattype="701"] button#toggle-btn .fas { width: 100%; padding: 10px; } [data-cattype="701"] button#toggle-btn .fa-chevron-down::before, [data-cattype="701"] button#toggle-btn .fa-chevron-up::before { background-color: #dc661d; padding: 10px; border-radius: 50%; color: #fff; transition: 0.3s; } [data-cattype="701"] button#toggle-btn:hover .fa-chevron-down::before, [data-cattype="701"] button#toggle-btn:hover .fa-chevron-up::before { background-color: #333; transition: 0.3s; } [data-cattype="701"] .btn-more { color: #000; text-align: center; margin-top: 40px; } [data-cattype="701"] #toggle-btn { display: block; } [data-cattype="701"] .heading-project-mobile { margin-bottom: -20px; } [data-cattype="701"] .sub-heading { font-size: 20px; margin-top: 0; } }