* {margin: 0; padding: 0; font-family: Bahnschrift, sans-serif; font-size: 40px;}
body {background-color: #FEFEF4;}
h4 {font-size: 90px; font-family: Coiny, sans-serif; margin-bottom: 20px;}
h1 {font-size: 40px; font-family: Coiny, sans-serif; color: #FEFEF4; letter-spacing: 1px; margin-bottom: 2px;}
h2 {font-size: 40px; font-family: Coiny, sans-serif; color: #6396c3; letter-spacing: 1px;}
h3 {font-size: 40px; font-family: Coiny, sans-serif; color: #E83A7E; letter-spacing: 1px;}
h5 {font-size: 49px; font-family: Coiny, sans-serif; color: #E83A7E; line-height: 65px;}
.tittle {width: 100%; height: 710px;  background-color: #6396c3; margin: 0 auto; min-width: 1200px;}
.presentationtittle {width: 100%; height: 100%;}
.definesentence {width:80%; height:310px; min-width: 1200px; margin: 0 auto; text-align: center; padding-top: 220px;}
@keyframes animation1 {from{transform: translateX(-1350px);} to{transform: translateX(0);}}
.animation1 {animation: animation1 2s ease-in-out; background-color: #F9D1E3; padding-left: 20px; color: #E83A7E;}

.mainelement1 {width: 100%; height:600px; margin: 0 auto; margin-top: 80px; float: left; min-width: 1200px;}
.note1 {width: 50%; height:100%; float: left;}
.textcontainer {width: 82%; height: 150px; padding-left: 14%; padding-top: 470px;}
.explanation2 {width: 100%; height:50%; color: #E83A7E; text-align: right;}
.bebe {width: 50%; height: 100%; float: left;}
.mainevent1 {width: 82%; height: 100%; float: left;}
.visualbottle {width: 100%; height: 100%; object-fit: cover; margin-left: 4.9%;}

.blue {width: 100%; height: 700px; background-color: #6396c3; margin: 0 auto; min-width: 1200px; float: left; margin-top: 80px; margin-bottom: 80px;}
.explanation1 {width: 100%; height:660px; margin: 0 auto; margin-top: 30px; float: left; min-width: 1200px;}
.conpect {color: #FEFEF4; font-size: 20px; width: 41%; text-align: right; float: left; padding-left: 7%; margin-top: 10%;}

.tito {height: 60px; float: left; width: 100%; text-align: right;}
.ti {width: 86%; height: 100%; margin: 0 auto;}
.conceptbottle {width: 100%; height:552px; margin: 0 auto; float: left; min-width: 1200px; margin-top: 30px;}
.scketch {width: 50%; height: 100%; float: left;}
.s1 {width: 100%; height: 50%; float: left;}
.skt {width:82%; height: 100%; object-fit: cover; padding-left: 14%;}
.renderbottle {width: 50%; height: 100%; float: left;}
.renderb {width: 82%; height: 100%; object-fit: cover; margin-left: 4%;}

.tito2 {height: 60px; float: left; width: 100%; margin-top: 80px;}
.ti2 {width: 86%; height: 100%; margin: 0 auto;}

.graphicsbottle {width: 100%; height:950px; margin: 0 auto; margin-top: 50px; float: left; min-width: 1200px;}

.feistytimeline {width: 86%; height: 240px; margin: 0 auto; display: flex; overflow-x: auto; overflow: hidden;}
.group {display: flex; height: 100%; align-items: center; justify-content: center; animation: spin 15s infinite linear; width: 100%; min-width: 100%;}
.lo {text-align: center; align-content: center; width:20%; height: 100%; margin-right: 5%;}
@keyframes spin {from {translate: 0;} to {translate: -100%;}}

.note3 {width: 50%; height: 720px; float: left;}
.note2 {width: 82%; height:600px; padding-left: 14%; margin-top: 60px;}
.fruit {width: fit-content; height:fit-content; color: #E83A7E;}

.feistylogo {width: 50%; height: 720px; float: left;}
.finallogo {width: 82%; height: 600px; padding-left: 4%; margin-top: 60px;}
.feisy {width: 100%; height: 600px; object-fit: scale-down;}
.g1 {width: 100%; height: 100%; object-fit: scale-down;}

.backbutton {width: 100%; height:142px; float: left; background-color: #6396c3; min-width: 1200px;}
.back {width: 40%; height:100%; min-width: 440px; border: none; cursor: pointer; float: right; font-size: 50px; background-color: transparent; color:#FEFEF4; padding-left: 60px;}
.back:hover {color:#F9D1E3;}
.back:active {color:#E83A7E;}