html, body, div, p, ul, ol, li, h1, h2, h3, h4, pre, form, p, button, img, a img, menu, footer { border: 0 none; margin: 0; padding: 0; }
ul, li { list-style-type: none; }
*, div { box-sizing: border-box; }
mark { background: transparent; }


html.index { scroll-behavior: smooth; }

a:hover { opacity: 0.9; }

body { background: #fff; font-family: 'Chivo', sans-serif; font-size: 20px; }
input { font-family: 'Chivo', sans-serif; font-size: 1em; }
::selection { background: #35b5b4; color: #fff; }

#page_top { position: absolute; top: 0; }

.section1 { display: flex; width: 100%; overflow: hidden; }
.section1 .col1 { width: 40%; padding: 5em; }
.section1 .col2 { width: 60%; background: url('images/rosak3.jpg'); background-size: cover; background-position: center center; }
.section1 .elpida, .test .elpida { position: absolute; right: 5em; top: 1.5em; height: 2.5em }
.section1 .logo, .test .logo { position: absolute; left: 5.2em; top: 2.3em; height: 1em; }
.section1 h2 { font-size: 2.5em; margin: 1em 0; }
.section1 p {  margin-bottom: 1.5em; line-height: 1.5em; }
.section1 .button1 { margin-top: 3em; }
.section1 .button2 { margin-bottom: 5em; }

#video_overlay .close_button { position: fixed; right: 2em; top: 2em; width: 3em; z-index: 21 }
#video_overlay .close_button img { width: 100%; cursor: pointer; }
#video_overlay { display: none; position: fixed; top: 0; left: 0; background: #000; width: 100%; height: 100vh; z-index: 20; padding: 2em; }
.section1 video { width: 100%; height: 90vh; object-fit: contain; object-position: center center;  }

.section2 { display: flex; width: 100%; overflow: hidden; }
.section2 .col1 { width: 50%; padding: 5em; background: #35b5b4; color: #fff; }
.section2 .col2 { width: 50%; padding: 5em; background: #fff; }
.section2 h2 { font-size: 2.5em; margin: 1em 0; }
.section2 h3.head{ margin-bottom: 2em }
.section2 h3 { font-size: 1.5em; margin: 1em 0; }
.section2 p {  margin-bottom: 1.5em; line-height: 1.5em; }
.section2 a { color: inherit; text-decoration: none; border-bottom: 1px dotted #000; transition: 0.1s; }
.section2 p a:hover { color: #35b5b4; }
.section2 .col1 h3 { margin-top: 2em; }

.section3 { width: 100%; overflow: hidden; background: #f8f4f2; }
.section3_inner { display: flex; }
.section3 .col { width: 50%; padding: 5em; padding-bottom: 0; }
.section3 .col1 { padding-right: 2.5em }
.section3 .col2 { padding-left: 2.5em }
.section3 h2 { font-size: 2.5em; margin: 2.5em auto 1em auto; text-align: center; max-width: 15em; }
.section3 h3 { font-size: 1.5em; margin-bottom: 0.5em  }
.section3 p {  margin-bottom: 1.5em; line-height: 1.5em; }
.section3 .col2 { padding-top: 12em }
.section3 .box { background: #fff; padding: 2em 2em 1em 2em; margin-bottom: 5em }
.section3a { padding: 0 0 3em 0 }

.section4 { display: flex; width: 100%; overflow: hidden; padding: 3em 8em; }
.section4 .col { width: 50%; padding: 5em; }
.section4 .elpida { height: 3em }
.section4 h2 { font-size: 2.5em; margin: 1em 0;  text-align: left;}
.section4 .col1 img { width: 100%; margin-bottom: 1em; }
.section4 p {  margin-bottom: 1.5em; line-height: 1.5em; }
.section4 a { color: inherit; text-decoration: none; border-bottom: 1px dotted #000; transition: 0.1s; }
.section4 a:hover { color: #35b5b4; }

/* test */

.section5 { width: 100%; overflow: hidden; margin-top: 6em; background: #f8f4f2; }
.section5 .inner { width: 80%; max-width: 900px; margin: auto; padding: 1.5em 0 2.5em 0; }
.section5 h2 { font-size: 2.5em; margin: 1em 0; line-height: 1.25em; }
.section5 p, .section5 li {  margin-bottom: 1.25em; line-height: 1.5em; }
.section5 img { width: 75%; margin-bottom: 1.5em;  }
.section5 form .text { padding: 1em; width: 80%; margin-bottom: 1em; border: 1px solid #aaa; }
.section5 form .text:required { box-shadow: none; outline: none; }
.section5 form .checkbox { padding: 0 0 0.5em 0; font-size: 3em; display: flex; }
.section5 form .checkbox div { border: 1px solid #000; width: 1em; height: 1em; text-align: center; display: block; float: left; border: 1px solid #aaa; transition: 0.1s; }
.section5 form .checkbox div:hover { background: #fff; }
.section5 form .checkbox div img { width: 0.8em; align-self: center; width: 75%; height: 60%; opacity: 0; margin-top: 0.15em; } 
.section5 form .checkbox input:checked ~ div img { opacity: 1 } 
.section5 form .checkbox input { display: none; }
.section5 form .checkbox ::selection { color: none; background: none; }
.section5 form span { font-size: 0.25em; margin-left: 2em; align-self: center; }
.section5 form span a { color: #000; }
.section5 p a { text-decoration: none; border-bottom: 1px dotted #000; color: #000 }
.section5 .center { text-align: center; }
.section5 .final { padding: 3em 0 }
.section5 .question p, .section5 .question li { font-family: 'Lierata', serif; font-size: 1.05em; }

.section5 h2.infohead { margin: 2em auto 2em auto; font-size: 0.95em;  color: #aaa;  line-height: 1.5em;  }
.section5 .button1 { float: left; margin-right: 1em; margin-bottom: 6em; }


.section6 { width: 100%; overflow: hidden; padding-top: 5em; margin-bottom: 10em; }
.section6 .inner { width: 95%; max-width: 1800px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-around; }
.section6 h2 { font-size: 1.5em; margin: 1em 0; width: 80%; text-align: center; max-width: 900px; margin: auto; line-height: 1.5em; margin-bottom: 2.25em; }
.section6 h3 { margin-bottom: 0.5em; width: 100%; }
.section6 p {  margin-bottom: 1.5em;  font-size: 0.8em; line-height: 1.4em; }
.section6 .box { text-decoration: none;  color: inherit; width: 20%; cursor: pointer;  box-shadow: 3px 3px 10px #ddd; border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; padding: 1.5em 2em 1em 2em; margin: 1em 0.5em; border: 1px solid #eee; text-align: center; background: #f8f4f2; transition: 0.1s  }
.section6 .head { width: 80%; max-width: 900px; margin: 1em auto 3em auto; text-align: center; font-size: 1.5em; line-height: 1.5em }
.section6 .box:hover { background: #35b5b4; color: #fff; transition: 0s  }
.section6 .box:active { background: #000; }

.test .hidden { display: none; }
#slide-9 { padding-bottom: 6em; float: left; }

.revolver { margin-bottom: 3em; padding: 0.8em 0 0.7em 0; overflow: hidden; display: flex; align-items: center; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff }
.revolver .item { width: 80%; margin: auto; display: flex; align-items: center; transition: 0.25s; overflow: hidden; }
.revolver .item .image { width: 30%; text-align: center;}
.revolver .item img { height: 10em; padding: 1em; max-width: 100%; object-fit: contain; }
.revolver .text { width: 50%; margin-top: -1em; font-size: 1.2em; line-height: 1.25em; padding: 1em;  }
.revolver .text small { font-size: 0.6em; }
.revolver .arrow { cursor: pointer; }
.revolver .arrow:hover img { filter: invert(0); }
.revolver .arrow img { filter: invert(1); width: 1.5em; }
.revolver .hidden { display: none; }
.revolver .transparent { opacity: 0; transition: 0.25s; }

.button1, a.button1 { background: #35b5b4; border-bottom: 3px solid #000; display: block; padding: 1em 2em 0.95em 2em; color: #fff; width: max-content; text-transform: uppercase; text-decoration: none; letter-spacing: 0.5px; margin-bottom: 1em; text-align: center; line-height: 1.5em; transition: color 0.1s; }
input.button1 { font-size: 1em; cursor: pointer; border: 0; border-bottom: 3px solid #000; }
.button1.center { margin-left: auto; margin-right: auto; }

.button2 { text-decoration: none; text-align: left; line-height: 1.5em; border-bottom: 1px dotted #000; color: #000; transition: color 0.1s; }
.button2:hover { color: #35b5b4;  }


.play_button { cursor: pointer; text-decoration: none; position: absolute; width: 6em; top: 50%; right: 22.5%; transform: translate(-50%, -50%); justify-content: center; display: flex; flex-wrap: wrap; }
.play_button .button { font-size: 3em; text-decoration: none; padding: 0.75em; overflow: hidden; color: #000; background: #fff; width: 1em; height: 1em; border-radius: 50%; display: flex; line-height: 0; text-align: center; justify-content: center; align-items: center; transition: 0.1s; }
.play_button .button img { height: 0.5em; }
.play_button .text { color: #000; border-bottom: 2px solid #000; width: max-content; text-align: center; margin-top: 0.5em; font-size: 0.8em; }


@media only screen and (max-width: 1600px) {
body { font-size: 18px; }
.section3 .box { margin-bottom: 5em; }
.section4 .col { padding: 2em; }
}

@media only screen and (max-width: 1300px) {
body { font-size: 17px; }
.section6 .box { width: 30%; }
.section6 p { font-size: 0.9em }
}

@media only screen and (max-width: 1000px) {
.section, .section3_inner { display: block; }
.col { width: 100% !important; padding: 0 3em !important; margin: 0 !important; }
.col .box { margin-bottom: 2em; }
.section1 .col1 { margin-top: 6em !important;  }
.section1 .col2 { height: 35em; margin-top: 3em !important; }
.section2 .col1 { padding-bottom: 1em !important; }
.section2 { margin-top: 0; }
.section2 .col2 { padding-bottom: 3em !important; margin: 3em }
.logo { left: 3.25em !important; }
.play_button  { text-decoration: none; position: relative; width: 6em; top: 50%; left: 50%; z-index: 10}
.section2 h2 { margin: 0 0 0.5em 0; padding-top: 1em }
.section4 .col { padding: 0em !important; }
.section4 .elpida { margin: 1em 0 0 0; height: 2em; }
.revolver  { margin-bottom: 2em; }
.section6 .box { width: 40%; }
}

@media only screen and (max-width: 800px) {
body { font-size: 13px; }
.revolver { border: 0; }
.section6 p { font-size: 1em }
}