section[data-cattype="500"] { background-image: linear-gradient(180deg, rgba(248,151,31,1) 0%, rgba(255,194,43,1) 33%, rgba(255,230,170,1) 100%); background-size: 100% 100%; background-color: rgb(255,230,170); background-repeat: no-repeat; padding: 0; margin-top: -5px; overflow: hidden; animation: gradient 8s ease-in-out infinite; } section[data-cattype="500"].wrapper_middle{ padding: 0px 0px 80px 0px; } [data-cattype="500"] ul.contain { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 0; margin: 0; } [data-cattype="500"] ul.contain li { width: calc(50% - 22px); text-align: center; list-style:none; } [data-cattype="500"] ul.contain li.images-left { height: 540px; background-position: center left; background-repeat: no-repeat; background-size: contain; margin-left: -24px; } [data-cattype="500"] ul.contain li.right { padding: 0% 13% 0% 5%; } [data-cattype="500"] h1 { font-family: 'Public Sans', sans-serif; font-weight: 800; color: #fff; font-size: 72px; text-align: left; line-height: 1.24; } [data-cattype="500"] .overview { text-align: left; color: #000; font-family: 'Public Sans', sans-serif; font-weight: 300; font-size: 25px; line-height: 1.5; margin-top: 15px; } @media (min-width: 1200px) and (max-width: 1600px) { section[data-cattype="500"].wrapper_middle { padding: 50px 0px 0px 0px; } [data-cattype="500"] ul.contain li.images-left { height: auto; } [data-cattype="500"] ul.contain li.right { padding: 0% 5% 0% 4%; } [data-cattype="500"] ul.contain li { width: calc(50% - 20px); } } @media (min-width: 768px) and (max-width: 980px) { section[data-cattype="500"].wrapper_middle{ padding: 70px 0px 30px 0px; } [data-cattype="500"] ul.contain li.images-left { height: auto; } [data-cattype="500"] ul.contain li { width: calc(100% - 20px); } } @media (max-width: 767px) { section[data-cattype="500"].wrapper_middle { padding: 50px 0px 10px 0px; } [data-cattype="500"] ul.contain li { width: calc(100% - 20px); } [data-cattype="500"] ul.contain li.images-left { height: 250px; } [data-cattype="500"] .overview { text-align: center; font-size: 1.5em; line-height: 1.26; margin-bottom: 3vh; font-weight: 200; } [data-cattype="500"] h1 { font-size: 2.4em; line-height: 1.26; text-align: center; } [data-cattype="500"] h4 { font-size: 17px; line-height: 25px; text-align: center; } [data-cattype="500"] ul.contain li.right { padding: 0; margin: auto; } } @media (max-width: 480px) { } @keyframes gradient { 0% { background-size: 100% 100%; } 50% { background-size: 100% 60%; } 100% { background-size: 100% 100%; } }