/*
Main Stylesheets
*/

/* INITIAL CSS */
* {box-sizing: border-box;}
html {font-size: 10px;}
html .gen-anm {visibility: hidden;}

@media only screen and (min-width: 1600px) {
	html {font-size: 12px;}
}
@media only screen and (min-width: 1900px) {
	html {font-size: 14px;}
}
@media only screen and (min-width: 2400px) {
	html {font-size: 18px;}
}
@media only screen and (max-width: 1024px) {
	html {font-size: 9px;}
}

body {color: #233C45; font-family: 'RegularFont', Arial, Verdana; font-size: 1.4rem; line-height: 1.5; position: relative; overflow-x: hidden;}

b, strong {font-family: 'BoldFont', Arial, Verdana;}
i, em {font-family: 'ItalicFont', Arial, Verdana;}
b i, i b, b em, em b, strong i, i strong, strong em, em strong {font-family: 'BoldItalicFont', Arial, Verdana;}

.ft-light {font-family: 'LightFont', Arial, Verdana !important;}
.ft-medium {font-family: 'MediumFont', Arial, Verdana !important;}
.ft-semibold {font-family: 'SemiBoldFont', Arial, Verdana !important;}
.ft-bold {font-family: 'BoldFont', Arial, Verdana !important;}
.ft-extrabold {font-family: 'ExtraBoldFont', Arial, Verdana !important;}

h1, h2, h3, h4, h5 {font-family: 'RegularFont', Arial, Verdana; color: #233C45; line-height: 1.3;}
h1 b, h2 b, h3 b, h4 b, h5 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {font-family: 'BoldFont', Arial, Verdana; font-weight: bold;}
h1 i, h2 i, h3 i, h4 i, h5 i, h1 em, h2 em, h3 em, h4 em, h5 em{font-family: 'ItalicFont', Arial, Verdana;}
h1 b i, h2 b i, h3 b i, h4 b i, h5 b i,
h1 i b, h2 i b, h3 i b, h4 i b, h5 i b,
h1 b em, h2 b em, h3 b em, h4 b em, h5 b em,
h1 em b, h2 em b, h3 em b, h4 em b, h5 em b,
h1 strong i, h2 strong i, h3 strong i, h4 strong i, h5 strong i,
h1 i strong, h2 i strong, h3 i strong, h4 i strong, h5 i strong,
h1 strong em, h2 strong em, h3 strong em, h4 strong em, h5 strong em,
h1 em strong, h2 em strong, h3 em strong, h4 em strong, h5 em strong {font-family: 'BoldItalicFont', Arial, Verdana; font-weight: bold;}

h1 {font-size: 4.2rem; margin-bottom: 2.5rem;}
h2 {font-size: 3.6rem; margin-bottom: 2.5rem;}
h2.sub-headline-1 {font-size: 2.4rem; margin-bottom: 2.5rem;}
h3 {font-size: 3.0rem; margin-bottom: 2.5rem;}
h3.sub-headline-1 {font-size: 2.4rem; margin-bottom: 2.5rem;}
h3.sub-headline-2 {font-size: 2.0rem; margin-bottom: 2.5rem;}
h4 {font-size: 2.4rem; margin-bottom: 2.5rem;}
h5 {font-size: 2.0rem; margin-bottom: 2.5rem;}
h1:only-child, h2:only-child, h3:only-child, h4:only-child, h5:only-child,
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child  {margin-bottom: 0;}

.ov-hidden {overflow: hidden;}

.cl-black, .cl-black a {color: #000 !important;}
.cl-white, .cl-white a {color: #fff !important;}
.cl-primary, .cl-primary a {color: #233C45 !important;}
.cl-secondary, .cl-secondary a {color: #EB4B40 !important;}
.cl-ternary, .cl-ternary a {color: #FDF6EE !important;}

.text-shadow {text-shadow: 0.3rem 0.3rem 0.3rem #444;}
.text-bg-wrapper {padding: 2.5rem; background: #FDF6EE;}
.text-bg-wrapper.secondary {background: #EB4B40;}

p {font-size: 1.4rem; color: #233C45;}
p.small, a.small {font-size: 1.3rem;}
p a:hover {text-decoration: underline; color: #EB4B40;}

a {color: #EB4B40; font-size: 1.5rem; text-decoration: none;
transition: color 0.2s linear, background 0.2s linear;
-webkit-transition: color 0.2s linear, background 0.2s linear;
-moz-transition: color 0.2s linear, background 0.2s linear;
-o-transition: color 0.2s linear, background 0.2s linear;}
a:hover {color: #00A0E4; text-decoration: underline;}
a.und {text-decoration: underline;}

u {text-decoration: underline;}

img {display: block; max-width: 100%;
backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden;}
img.full-width {width: 100%; display: block;}
img.centered {margin: 0 auto; display: block; max-width: 100%; height: auto;}
img.round-border {border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}

.gen-img-wrap {margin-bottom: 3rem; position: relative;}
.gen-img-wrap.no-mb {margin-bottom: 0;}
.gen-img-wrap img {max-width: 100%; display: block;}
.gen-img-wrap img.centered {margin-left: auto; margin-right: auto;}

.full-img-wrap {position: relative;}
.full-img-wrap img {width: 100%; display: block;}

.ta-center {text-align: center;}
.ta-left {text-align: left;}
.ta-right {text-align: right;}
.ta-justify {text-align: justify;}

.fl-left {float: left;}
.fl-right {float: right;}
.fl-clear {clear: both;}

.sfw {float: left; width: 100%; position: relative;}

.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top: 1rem !important;}
.mt-2 {margin-top: 2rem !important;}
.mt-3 {margin-top: 3rem !important;}
.mt-4 {margin-top: 4rem !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom: 1rem !important;}
.mb-2 {margin-bottom: 2rem !important;}
.mb-3 {margin-bottom: 3rem !important;}
.mb-4 {margin-bottom: 4rem !important;}
.mb-6 {margin-bottom: 6rem !important;}

.rnd-corner {border-radius: 1rem;}

.d-none {display: none;}
.d-block {display: block;}

.ft-regular {font-family: 'RegularFont', Arial, Verdana;}
.ft-semibold {font-family: 'SemiBoldFont', Arial, Verdana;}
.ft-bold {font-family: 'BoldFont', Arial, Verdana;}

.ps-relative {position: relative;}

@media only screen and (max-width: 1024px) {
	h1 {font-size: 4.0rem;}
	h2 {font-size: 3.6rem;}
	h3 {font-size: 3.0rem;}
	h4 {font-size: 2.4rem;}
	h5 {font-size: 1.8rem;}
}

@media only screen and (max-width: 768px) {
	h1 {font-size: 3.6rem;}
	h2 {font-size: 3.2rem;}
	h3 {font-size: 2.8rem;}
	h4 {font-size: 2.4rem;}
	h5 {font-size: 1.8rem;}
}

@media only screen and (max-width: 500px) {
	h1 {font-size: 3.2rem;}
	h2 {font-size: 2.8rem;}
	h3 {font-size: 2.4rem;}
	h4 {font-size: 2.1rem;}
	h5 {font-size: 1.8rem;}
}

@media only screen and (max-width: 420px) {
	h1 {font-size: 3.0rem;}
	h2 {font-size: 2.6rem;}
	h3 {font-size: 2.2rem;}
	h4 {font-size: 1.9rem;}
	h5 {font-size: 1.7rem;}

}
/* /INITIAL CSS */


/* GENERAL LAYOUT CSS */
#main-title {position: absolute; top: -9999px; left: -9999px; overflow: hidden;}

header {}
main {min-height: 30rem;}
footer {}

section {z-index: 100; padding-top: 6rem; margin: 0; min-height: 10rem;}
section.with-bg {padding: 6rem 0;}
section.with-bg.no-ptb {padding-top: 0; padding-bottom: 0;}
main > section:first-of-type {margin-top: 8rem !important;}
main > section:last-of-type.with-bg {margin-bottom: 0;}
main > section + section {padding-top: 10rem;}
main > section.with-bg + section {padding-top: 6rem;}

.flex {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap;}
.flex.start {justify-content: flex-start;}
.flex.end {justify-content: flex-end;}
.flex.rtl {flex-direction: row-reverse;}
.flex.centered {justify-content: center;}
.flex.align-centered {align-items: center;}
.flex.two-cols .left, .flex.two-cols .right {width: 48%;}

.grid {display: grid; justify-content: space-between; width: 100%; }
.grid.rtl {direction: rtl;}
.grid.rtl > div {direction: ltr;}
.grid.align-centered {align-items: center;}
.grid.align-bottom {align-items: end;}
.grid.col-6 {grid-template-columns: repeat(6, 1fr); column-gap: 1.5rem;}
.grid.col-10 {grid-template-columns: repeat(10, 1fr); column-gap: 1.5rem;}
.grid.col-12 {grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem;}
.grid .colspan-1 {grid-column: span 1;}
.grid .colspan-2 {grid-column: span 2;}
.grid .colspan-3 {grid-column: span 3;}
.grid .colspan-4 {grid-column: span 4;}
.grid .colspan-5 {grid-column: span 5;}
.grid .colspan-6 {grid-column: span 6;}
.grid .colspan-7 {grid-column: span 7;}
.grid .colspan-8 {grid-column: span 8;}
.grid .colspan-9 {grid-column: span 9;}
.grid .colspan-10 {grid-column: span 10;}
.grid .colspan-11 {grid-column: span 11;}
.grid .colspan-12 {grid-column: span 12;}
.grid .colspan-fw {grid-column: 1 / -1;}

#grid-ruler {position: fixed; top: 0; width: 100%; z-index: 1000;}
#grid-ruler .grid-unit {height: 100vh; background: rgba(255, 0, 0, 0.05); position: relative; grid-column: span 1;}
#grid-ruler .grid-unit p {position: absolute; right: 1.5rem; bottom: 0.5rem; font-size: 1rem; color: #7f7f7f;}

.container {margin: 0 auto; /* width: 92%; */ margin-bottom: 6rem; width: calc((1440 - (62 * 2)) / 1440 * 100vw);}
.container-small {margin: 0 auto; width: 70%; margin-bottom: 6rem;}
.container-fluid {margin: 0 auto; width: 100%; margin-bottom: 6rem;}
.container:last-child, .container-small:last-child, .container-fluid:last-child {margin-bottom: 0;}

.row {margin-bottom: 6rem;}
.row.mb-med {margin-bottom: 4rem;}
.row:last-child, .row.mb-med:last-child {margin-bottom: 0;}

@media only screen and (min-width: 1600px) {
	.container {width: 90%;}
}

@media only screen and (max-width: 1200px) {
	main > section:first-of-type {margin-top: 12rem;}
}

@media only screen and (max-width: 1024px) {
	.grid.col-12 {grid-template-columns: repeat(6, 1fr); column-gap: 2rem;}

	section.with-bg {padding: 6rem 0;}
}

@media only screen and (max-width: 768px) {
	.container, .container-small {width: 90%;}

	/* main > section {margin-bottom: 6rem;}
	main > section.no-bg + section.no-bg {margin-top: 12rem;}
	main > section.with-bg + section.with-bg {margin-top: -6.2rem;}

	main > section + section.mt-min {margin-top: -3rem;}
	main > section + section {padding-top: 6rem;} */
}

@media only screen and (max-width: 600px) {
	.grid.col-12 {grid-template-columns: repeat(4, 1fr); column-gap: 2rem;}
}
/* /GENERAL LAYOUT CSS */


/* WYSIWYG CONTENT */
.wysiwyg-content, .wysiwyg-content p, .wysiwyg-content a, .wysiwyg-content ul li, .wysiwyg-content ol li {font-size: 1.6rem; color: #233C45; font-family: 'RegularFont', Arial, Verdana;}
.wysiwyg-content.white, .wysiwyg-content.white p, .wysiwyg-content.white a, .wysiwyg-content.white ul li, .wysiwyg-content.white ol li {color: #fff;}
.wysiwyg-content.color, .wysiwyg-content.color p, .wysiwyg-content.color a, .wysiwyg-content.color ul li, .wysiwyg-content.color ol li {color: #EB4B40;}
.wysiwyg-content.big, .wysiwyg-content.big p, .wysiwyg-content.big a, .wysiwyg-content.big ul li, .wysiwyg-content.big ol li {font-size: 1.8rem; font-family: 'RegularFont', Arial, Verdana;}
.wysiwyg-content ul li {margin-left: 0; padding-left: 3.6rem; background: url(../images/icon/arrow-right-color.svg) no-repeat top -0.1rem left; background-size: 2.4rem auto; margin-bottom: 1.5rem;}
.wysiwyg-content ul.black li {background: url(../images/icon/arrow-right-black.svg) no-repeat top 0.1rem left; background-size: 2.0rem auto;}
.wysiwyg-content ul li:last-child {margin-bottom: 0;}
.wysiwyg-content img {}
.wysiwyg-content img.fr-dib {display: block; margin: 0 auto;}
.wysiwyg-content img.fr-dib.fr-fil {text-align: left;}
.wysiwyg-content img.fr-dib.fr-fir {text-align: right;}
.wysiwyg-content img.fr-dii {}
.wysiwyg-content img.fr-dii.fr-fil {float: left; margin-right: 30px;}
.wysiwyg-content img.fr-dii.fr-fir {float: right; margin-left: 30px;}

ul.default-icon {}
ul.default-icon li {margin-left: 0; list-style-type: none; padding-left: 2.5rem; background: url(../images/icon/bullet-general.svg) no-repeat left 0.4rem; background-size: 1.4rem !important; margin-bottom: 1.5rem;}
ul.default-icon.narrow-mb li{margin-bottom: 0.5rem;}
ul.default-icon.white li {background: url(../images/icon/bullet-white.svg) no-repeat left 0.4rem; color: #fff;}
ul.default-icon.white.blue-dot > li {background: url(../images/icon/bullet-blue-2.svg) no-repeat left 0.4rem; color: #fff;}
ul.default-icon li:last-child {margin-bottom: 0;}
/* /WYSIWYG CONTENT */


/* TABLE */
table.gen-table {width: 100%;}
table.gen-table thead {}
table.gen-table thead tr {background: transparent;}
table.gen-table thead tr td {color: #333; vertical-align: middle; font-size: 2rem; font-family: 'RegularFont', Arial, Verdana; padding: 1.5rem 2rem; border-bottom: 0.1rem solid #333;}
table.gen-table tbody tr {}
table.gen-table tbody tr td {padding: 1.5rem 2rem; vertical-align: middle;}
table.gen-table tbody tr td, table.gen-table tbody tr td p, table.gen-table tbody tr td a, table.gen-table tbody tr td p a {font-size: 1.4rem; color: #333; font-family: 'RegularFont', Arial, Verdana;}
table.gen-table tbody tr td a, table.gen-table tbody tr td p a {color: #EB4B40;}
table.gen-table tbody tr td a:hover, table.gen-table tbody tr td p a:hover {text-decoration: underline;}
table.gen-table tbody tr:nth-child(odd) td{background: #fff;}
table.gen-table tbody tr:nth-child(even) td{background: #EAEEF0;}
table.gen-table tbody tr td:last-child {}
table.gen-table tbody tr:last-child td {}
table.gen-table tbody tr td.vtop {vertical-align: top;}

@media only screen and (max-width: 768px) {
	table.gen-table thead tr td, table.gen-table tbody tr td {padding: 1.2rem 1.5rem;}
	table.gen-table thead tr td {font-size: 1.8rem;}
}

@media only screen and (max-width: 500px) {
	table.gen-table thead tr td {font-size: 1.6rem;}
	table.gen-table tbody tr td, table.gen-table tbody tr td p, table.gen-table tbody tr td a, table.gen-table tbody tr td p a  {font-size: 1.3rem;}
}
/* /TABLE */


/* FORM */
form.gen-form {}
form.gen-form .gen-form-row {display: flex; display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; margin-bottom: 3rem;}
form.gen-form .gen-form-row.captcha-row, form.gen-form .gen-form-row:last-child {margin-bottom: 0;}
form.gen-form .gen-form-row .gfr-third {width: 31%;}
form.gen-form .gen-form-row .gfr-half {width: 45%;}
form.gen-form .gen-form-row .gfr-full {width: 100%;}
form.gen-form .gen-form-row .gfr-custom-36 {width: 36%;}
form.gen-form .gen-form-row .gfr-custom-20 {width: 20%;}

input[type=text], input[type=email], input[type=password], textarea {font-family: 'RegularFont', Arial, Verdana; height: 3.6rem; font-size: 1.5rem; color: #233C45; width: 100%; border-bottom: 0.2rem solid #233C45; background: none;
transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
input[type=text]:hover, input[type=text]:focus, input[type=email]:hover, input[type=email]:focus, input[type=password]:hover, input[type=password]:focus, textarea:hover, textarea:focus {outline: 0;}
textarea {padding: 1.5rem; min-height: 14rem; border: 0.1rem solid #fff;
border-radius: 0.4rem; -webkit-border-radius: 0.4rem; -moz-border-radius: 0.4rem; -o-border-radius: 0.4rem;}
textarea.no-resize {resize: none;}
input[type=text].datepicker {padding-right: 1.7rem; background: url(../images/icon/calendar.svg) no-repeat right 15px center; background-size: auto 20px;}

select {font-family: 'RegularFont', Arial, Verdana; font-size: 1.6rem; padding: 0 3rem 0 1.2rem; color: #21252C;}
select:hover, select:focus {outline: 0;}
.styled-select-wrapper {width: 100%; overflow: hidden; border: 1px solid #7F7F7F; height: 4.5rem; background: url(../images/icon/arrow-down.svg) no-repeat right 1.5rem center #fff; background-size: 2rem auto;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
.styled-select-wrapper select {display: block; width: 120%; border: none; background: transparent; height: 4.5rem; padding: 0 3rem 0 1.2rem;}
.styled-select-wrapper select option {background: none;}

input[type="checkbox"] {font-family: 'RegularFont', Arial, Verdana; font-size: 0.6rem;}
.styled-checkbox-wrapper {margin-bottom: 1rem;}
.styled-checkbox-wrapper input[type="checkbox"] {display: none;}
.styled-checkbox-wrapper label {font-family: 'RegularFont'; font-size: 1.5rem; color: #fff; display: inline-block; padding-left: 3.0rem; padding-top: 0.7rem; background: url(../images/icon/checkbox.svg) no-repeat left top 1.0rem; background-size: 1.6rem auto; text-align: justify;}
.styled-checkbox-wrapper label:hover {cursor: pointer;}
.styled-checkbox-wrapper label a {color: #EB4B40;}
.styled-checkbox-wrapper input[type="checkbox"]:checked + label {background: url(../images/icon/checkbox-checked.svg) no-repeat left top 1.0rem; background-size: 1.6rem auto;}

input[type="radio"] {font-family: 'RegularFont', Arial, Verdana;font-size: 15px;}
.styled-radio-wrapper{position: relative;}
.styled-radio-wrapper input[type="radio"] {display:none;}
.styled-radio-wrapper label {display:inline-block; padding: 1px 0px 0px 31px; font-size: 15px; font-family: 'RegularFont', Arial, Verdana; background: url(../images/icon/radio-off.png) no-repeat left top 3px; cursor: pointer; background-size: 20px auto;}
.styled-radio-wrapper input[type="radio"]:checked + label {background: url(../images/icon/radio-on.png) no-repeat left top 3px; background-size: 20px auto;}

input[type="file"] {font-family: 'RegularFont', Arial, Verdana;}
.styled-input-file-wrapper {cursor: pointer; font-size: 0.5rem; color: #808080; background: #dbdbdb; border: 1px solid #dbdbdb; font-family: 'RegularFont', Arial, Verdana; padding: 0.5rem; height: 50px; text-align: center;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
.styled-input-file-wrapper:hover {background: #282e68; color: #fff;}
.styled-input-file-wrapper input[type="file"] {display: none;}
.styled-input-file-wrapper label {}
label.upload-file-info {}
label.upload-file-info.warning {display: block; margin-top: 0.5rem; font-size: 0.4rem;}

input[type="submit"], a.gen-btn {border: 0.1rem solid #EB4B40; background-color: #EB4B40; display: inline-block; color: #fff; font-size: 1.6rem; font-family: 'BoldFont', Arial, Verdana; padding: 1.2rem 2.5rem; text-align: center; cursor: pointer; min-width: 14rem; border-radius: 1rem;
transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear;}
input[type="submit"]:hover, input[type="submit"]:focus, a.gen-btn:hover, a.gen-btn:focus {border: 0.1rem solid #a32c24; background-color: #a32c24; text-decoration: none;}
input[type="submit"].white, a.gen-btn.white {border-color: #fff; color: #fff;}
input[type="submit"].white:hover, input[type="submit"].white:focus, a.gen-btn.white:hover, a.gen-btn.white:focus {border-color: #EB4B40; color: #233C45;}
input[type="submit"].inverse, a.gen-btn.inverse {color: #EB4B40; border: 1px solid #EB4B40; background: transparent;}
input[type="submit"].inverse:hover, input[type="submit"].inverse:focus, a.gen-btn.inverse:hover {background: #EB4B40; color: #fff;}
input[type="submit"].full-width {width: 100%;}
.gen-form input[type="submit"] {width: 15rem;}
button {font-family: 'RegularFont', Arial, Verdana; font-size: 1.3rem; cursor: pointer; padding: 0.5rem 1.5rem;}
a.gen-btn.disabled {color: #fff; background: #BFBFBF; cursor: default; pointer-events: none;}
a.flat-btn {display: inline-block; font-size: 1.6rem;}
a.flat-btn.back {padding-left: 2.5rem; background: url(../images/icon/arrow-back.svg) no-repeat left center; background-size: 1.6rem auto;}
a.gen-btn.small {font-size: 1.3rem; padding: 0.7rem 2.0rem; border-radius: 0.6rem;}
a.gen-btn.arr-down {padding-right: 5rem; background-image: url(../icons/ui/arrow-down.svg); background-repeat: no-repeat; background-position: right 2rem center; background-size: 1.6rem auto;}
a.gen-btn.survey {padding-left: 5rem; background-image: url(../images/survey/survey-icon-2.svg); background-repeat: no-repeat; background-position: left 2rem center; background-size: 1.6rem auto;}

.gen-form-wrapper {margin-bottom: 20px;}
.gen-form-wrapper.no-mb {margin-bottom: 0;}
.gen-form-wrapper.inline {}
.gen-form-wrapper.inline .gfw-title {float: left; width: 22%; margin-right: 3%;}
.gen-form-wrapper.inline .gfw-sep {float: left; width: 3%; margin-right: 3%;}
.gen-form-wrapper.inline .gfw-input {float: left; width: 69%;}
.gen-form-wrapper.inline label {font-size: 15px;}

::placeholder {color: #5f5f5f;}

.form-notification {display: block; position: relative; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; border: 1px solid transparent;
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;}
.form-notification p {font-size: 0.5rem; padding-right: 1rem; font-family: 'BoldFont', Arial, Verdana;}
.form-notification .close-btn {position: absolute; top: 50%; transform: translateY(-50%); right: 0.6rem; width: 0.4rem; height: 0.4rem; cursor: pointer;}
.form-notification.success {background: #d9ffd8; border: 1px solid #00b400;}
.form-notification.success p {color: #00b400;}
.form-notification.success .close-btn {background: url(../images/icon/amt-form-close-success.png) no-repeat center; background-size: 0.4rem 0.4rem;}
.form-notification.failed {background: #ffdddf; border: 1px solid #f03a17;}
.form-notification.failed p {color: #f03a17;}
.form-notification.failed .close-btn {background: url(../images/icon/amt-form-close-failed.png) no-repeat center; background-size: 0.4rem 0.4rem;}

label.form-label {font-size: 1.4rem; font-family: 'BoldFont', Arial, Verdana; color: #233C45; margin-bottom: 1rem; display: block;}
.text-required {color: #ff0000;}

input[type="text"].half-width {width: 50%;}

@media only screen and (max-width: 1024px) {
	form.gen-form .gen-form-row .gfr-half {width: 47%;}
	
	input[type="submit"], a.gen-btn {font-size: 1.4rem;}
}

@media only screen and (max-width: 768px) {
	input[type="submit"], a.gen-btn {font-size: 1.3rem; padding: 0.7rem 1.8rem;}
}

@media only screen and (max-width: 500px) {
	form.gen-form .gen-form-row .gfr-half {width: 100%; margin-bottom: 3rem;}
	form.gen-form .gen-form-row .gfr-half:last-child {margin-bottom: 0;}

	.styled-checkbox-wrapper label {padding-left: 2.8rem;}
	.styled-checkbox-wrapper label, .styled-checkbox-wrapper label a {font-size: 1.4rem;}
	.styled-checkbox-wrapper label, .styled-checkbox-wrapper input[type="checkbox"]:checked + label {background-position: left top 0.9rem;}

	a.gen-btn.survey {font-size: 1.6rem; padding: 1.2rem 3rem; padding-left: 6rem; background-size: 2.8rem 2.8rem;}
}

.error {
	color: red;
}

.alert-success {
	color: green;
}

.alert-danger {
	color: red;
}
/* /FORM */


/* TYPOGRAPHY */
.title-row-responsive {display: none;}

.white-title {color: #fff; line-height: 1.3; text-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25); /*text-shadow: 0 0.4rem 0.4rem #777;*/}

.main-section-title {text-align: center; margin-bottom: 4rem; padding-left: 4rem; padding-right: 4rem;}
.main-section-title:only-child {margin-bottom: 0;}
.main-section-title h2 {margin-bottom: 0.5rem;}
.main-section-title h2:only-child {margin-bottom: 0;}

.float-info {position: absolute; text-align: center; z-index: 300;}
.float-info p {font-size: 1vw;}
.anim-text {opacity: 0; display: none;}

@media only screen and (max-width: 1200px) {
	.float-info p {font-size: 1.2vw;}
}

@media only screen and (max-width: 768px) {
	.float-info p {font-size: 1.35vw;}
} 

@media only screen and (max-width: 600px) {
	.title-row-desktop {display: none;}
	.title-row-responsive {display: block;}
	
	.float-info p {font-size: 2.6vw;}
} 

@media only screen and (max-width: 500px) {
	.float-info p {font-size: 3.2vw;}
}

@media only screen and (max-width: 420px) {
	.main-section-title h2 {font-size: 2.4rem;}
}
/* /TYPOGRAPHY */


/* HEADER */
#header-top-section {position: fixed; top: 0; left: 0; z-index: 500; width: 100%; background: #233C45; padding: 2.5rem 0;}

#header-logo-col {grid-column: 1 / span 2; margin-left: -1.2rem;}
img#logo {/* height: 4.73rem; */ height: calc(53 / 1440 * 100vw);  aspect-ratio: 300/81;}

#header-nav-col {grid-column: 3 / span 10;}
ul.header-nav-list {}
ul.header-nav-list > li {margin-right: 5.32rem;}
ul.header-nav-list > li:last-child {margin-right: 1.2rem;}
ul.header-nav-list > li > a {font-size: 1.4rem; display: inline-block; color: #fff; font-family: 'BoldFont', Arial, Verdana;}
ul.header-nav-list > li > a:hover {color: #EB4B40; text-decoration: none;}
ul.header-nav-list > li > a.active {color: #EB4B40; border-bottom: 0.15rem solid #e8dad9;}

#header-nav-resp-col {display: none; grid-column: 12;}
#header-nav-resp-section {display: none;}

@media only screen and (max-width: 1250px) {
	ul.header-nav-list > li {margin-right: 5rem;}
}

@media only screen and (max-width: 1200px) {
	#header-top-section {padding: 1.5rem 0;}

	img#logo {height: 4rem;}

	#header-nav-col {display: none;}
	#header-nav-resp-col {display: block; cursor: pointer; width: 2.6rem; height: 2.6rem; margin-left: auto; margin-right: 0; background: url(../icons/ui/nav.svg) no-repeat center; background-size: 2.6rem auto;}

	#header-nav-resp-section {position: fixed; z-index: 1000;}
	#header-nav-resp-section .cover {position: fixed; z-index: 1100; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
	#header-nav-resp-section .nav-list-section {position: fixed; z-index: 1200; top: 0; left: auto; right: 0; height: 100%; padding: 9rem 3rem 4rem 3rem; width: 30rem; background: #233C45;}
	#header-nav-resp-section .nav-list-section .close {position: absolute; top: 3rem; right: 3rem; width: 2.4rem; height: 2.4rem; background: url(../icons/ui/cross-heavy.svg) no-repeat center; background-size: 2.4rem auto; cursor: pointer;}

	ul.nav-resp-list {}
	ul.nav-resp-list > li {margin-bottom: 2rem;}
	ul.nav-resp-list > li:last-child {margin-bottom: 0;}
	ul.nav-resp-list > li > a {font-size: 1.5rem; display: inline-block; color: #fff; font-family: 'SemiBoldFont', Arial, Verdana;}
	ul.nav-resp-list > li > a:hover {color: #EB4B40; text-decoration: none;}
	ul.nav-resp-list > li > a.active {color: #EB4B40; border-bottom: 0.15rem solid #EB4B40;}

	.logo-resp-section {position: absolute; left: 3rem; bottom: 4rem; height: 4rem;}
	.logo-resp-section img {height: 4rem; display: block;}
}

@media only screen and (max-width: 1024px) {
	#header-nav-resp-col {grid-column: 6;}
}

@media only screen and (max-width: 768px) {
	#header-nav-resp-col {width: 2.4rem; height: 2.4rem; background-size: 2.4rem auto;}
}

@media only screen and (max-width: 600px) {
	#header-nav-resp-col {grid-column: 4;}
}

@media only screen and (max-width: 420px) {
	#header-nav-resp-col {width: 2.2rem; height: 2.2rem; background-size: 2.2rem auto;}

	#header-nav-resp-section .cover {display: none;}
	#header-nav-resp-section .nav-list-section {right: auto; left: 0; height: auto; width: 100%;}
	.logo-resp-section {display: none;}
}
/* /HEADER */


/* TOP BANNER */
#top-banner {margin-top: 0 !important;}

.video-banner {width: 100%; position: relative;}
.video-banner .cover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15);}
.video-banner video {width: 100%; display: block;}

.video-caption {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center;}
.video-caption a.gen-btn {margin-top: 2rem;}
.video-caption a.gen-btn.responsive {display: none;}

ul.video-icon-list {margin-top: 3rem;}
ul.video-icon-list > li {margin-right: 1rem;}
ul.video-icon-list > li:last-child {margin-right: 0;}
/* ul.video-icon-list > li img {width: 7.6rem;} */
ul.video-icon-list:only-child {margin-top: 0;}
ul.video-icon-list > li a:hover {text-decoration: none;}
ul.video-icon-list > li .wrapper {width: 8rem; height: 8rem; padding: 0.7rem; background: #FDF6EE; border-radius: 1.2rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25);}
ul.video-icon-list > li .wrapper img {height: 4rem; max-width: 100%; margin: 0 auto;}
ul.video-icon-list > li .wrapper h3 {font-size: 1rem; line-height: 1; color: #EB4B40;} 
ul.video-icon-list > li .wrapper img + h3 {margin-top: 0.5rem;}

@media only screen and (max-width: 1200px) {
	.video-caption h2 {font-size: 3.2rem;}
}

@media only screen and (max-width: 1024px) {
	.video-banner {height: 75rem;}
	.video-banner video {height: 100%; object-fit: cover;}

	.video-caption {width: 85%;}
	.video-caption h2 {font-size: 3.6rem;}
}

@media only screen and (max-width: 768px) {
	.video-caption {top: 60%; transform: translate(-50%, -60%);}
	.video-caption h2 {font-size: 3.2rem;}
}

@media only screen and (max-width: 500px) {
	.video-banner {height: 60rem;}
	.video-caption h2 {font-size: 2.6rem;}
	.video-caption a.gen-btn {display: none; margin-top: 0;}
	.video-caption a.gen-btn.responsive {display: inline-block;}
}

@media only screen and (max-width: 420px) {
	.video-banner {height: 90vh;}
	.video-caption h2 {font-size: 2.2rem;}
}
/* /TOP BANNER */


/* NIKOTIN VS TAR */
/* .animation-scroll {background: gainsboro;} */
#nikotin-vs-tar {background: #ECFAF5;}

.nikotin-vs-tar-content {position: relative; margin-top: -2%; margin-bottom: -10%; overflow-x: hidden;}
#nikotin-vs-tar-animation {position: relative; margin: 0 auto; overflow-x: hidden;}
#nikotin-vs-tar-animation-mobile {position: relative; margin: 0 auto; display: none; overflow-x: hidden;}
#nikotin-vs-tar-animation > svg {}

.float-info.nvt {width: 15%; /* background: rgba(200, 200, 200, 0.5); */}
.float-info.nvt.title {width: 25%;}
.float-info.nvt.title h2 {font-size: 2.6vw;}
#nvt-title-1 {top: 7%; left: 24%;}
#nvt-title-2 {top: 7%; left: 51%;}
#nvt-info-1 {top: 22.5%; left: 11%;}
#nvt-info-2 {top: 39.5%; left: 8.5%;}
#nvt-info-3 {top: 54%; left: 7%;}
#nvt-info-4 {width: 18%; top: 70%; left: 7.5%;}
#nvt-info-5 {top: 32.5%; left: 74%;}
#nvt-info-6 {width: 18%; top: 47.5%; left: 75%;}
#nvt-info-7 {top: 62%; left: 72%;}

.sec-button-row {position: relative; z-index: 300;}

@media only screen and (max-width: 1200px) {
	#nikotin-vs-tar-animation {width: 110%; margin-left: -5%;}
	
	.float-info.nvt {width: 18%;}
	#nvt-title-1 {left: 23%;}
	#nvt-title-2 {left: 52%;}
	#nvt-info-1 {left: 6%;}
	#nvt-info-2 {left: 3%;}
	#nvt-info-3 {left: 1.5%;}
	#nvt-info-4 {left: 5%;}
	#nvt-info-5 {left: 77%;}
	#nvt-info-6 {width: 20%; top: 48%; left: 78%;}
	#nvt-info-7 {width: 20%; left: 75%;}
}

@media only screen and (max-width: 768px) {			
	.nikotin-vs-tar-content {margin-bottom: -14%;}
	#nikotin-vs-tar-animation {width: 115%; margin-left: -7.5%;}

	.float-info.nvt {}
	.float-info.nvt.title h2 {font-size: 2.8vw;}
	.float-info.nvt p {font-size: 1.25vw;}

	#nvt-title-1 {left: 22%;}
	#nvt-title-2 {left: 53%;}
	#nvt-info-1 {top: 21.5%; left: 5%;}
	#nvt-info-2 {width: 16%; top: 37.5%; left: 3%;}
	#nvt-info-3 {top: 53%; left: 0.5%;}
	#nvt-info-4 {width: 22%; top: 68%; left: 1%;}
	#nvt-info-5 {left: 77.5%;}
	#nvt-info-6 {width: 17%; top: 45%; left: 80%;}
	#nvt-info-7 {left: 74%;}
}

@media only screen and (max-width: 600px) {	
	#nikotin-vs-tar .title-row-responsive h2 {font-size: 4.5vw;}
	.nikotin-vs-tar-content {margin-top: -10%; margin-bottom: -21%;}

	#nikotin-vs-tar-animation {display: none;}
	#nikotin-vs-tar-animation-mobile {display: block; width: 80%;}

	.float-info.nvt {width: 32%;}
	.float-info.nvt.title h2 {font-size: 3.6vw;}
	.float-info.nvt p {font-size: 2.6vw;}
	
	#nvt-title-1 {top: 38.5%; left: 17.5%;}
	#nvt-title-2 {top: 85%; left: 53%;}
	#nvt-info-1 {top: 10%; left: 56%;}
	#nvt-info-2 {width: 32%; top: 19.5%; left: 53.5%;}
	#nvt-info-3 {width: 36%; top: 29.5%; left: 54%;}
	#nvt-info-4 {width: 40%; top: 41%; left: 54%;}
	#nvt-info-5 {width: 32%; top: 60%; left: 19%;}
	#nvt-info-6 {width: 32%; top: 69%; left: 12.5%;}
	#nvt-info-7 {width: 33%; top: 78.5%; left: 5%;}
}

@media only screen and (max-width: 500px) {
	.nikotin-vs-tar-content {margin-top: -12%; margin-bottom: -26%;}

	#nikotin-vs-tar-animation-mobile {width: 100%;}
	
	.float-info.nvt {width: 42%;}
	.float-info.nvt.title h2 {font-size: 4.4vw;}
	.float-info.nvt p {font-size: 3.2vw;}
	
	#nvt-title-1 {top: 38%; left: 13%;}
	#nvt-title-2 {top: 85%; left: 59%;}
	#nvt-info-1 {width: 40%; top: 10.5%; left: 57%;}
	#nvt-info-2 {width: 40%; top: 20%; left: 55%;}
	#nvt-info-3 {width: 42%; top: 29.5%; left: 54%;}
	#nvt-info-4 {width: 42%; top: 40%; left: 55%;}
	#nvt-info-5 {width: 36%; top: 60%; left: 16%;}
	#nvt-info-6 {width: 40%; top: 69%; left: 4%;}
	#nvt-info-7 {width: 36%; top: 78%; left: 2%;}
} 

/* /NIKOTIN VS TAR */


/* PEMBAKARAN VS PEMANASAN */
#pembakaran-vs-pemanasan {background: #FDF6EE;}

.pembakaran-vs-pemanasan-content {position: relative; margin-top: -8%; margin-bottom: -10%; overflow-x: hidden;}

#pembakaran-vs-pemanasan-animation {position: relative; z-index: 200; margin: 0 auto; overflow-x: hidden;}
#pembakaran-vs-pemanasan-animation-mobile {position: relative; z-index: 200; margin: 0 auto; display: none; overflow-x: hidden;}

.pmb-pms-video-container {position: absolute; top: 65%; left: 50%; transform: translate(-50%, -65%); width: 50%; height: 53%;}
.pmb-pms-video-left {position: absolute; top: 0; left: 0; width: 50%; height: 100%;}
.pmb-pms-video-right {position: absolute; top: 0; left: 50%; width: 50%; height: 100%;}
.pmb-pms-video-content {width: 100%; height: 100%;}
.pmb-pms-video-content video {position: relative; z-index: 200; width: 100%; height: 100%; object-fit: cover;}
video#pembakaran-rokok-video {object-position: left 50%;}
.pmb-pms-video-title {text-align: center; position: absolute; top: -25%; left: 50%; transform: translateX(-50%); width: 100%;}
.pmb-pms-video-left .pmb-pms-video-title {width: 65%;}
.pmb-pms-video-title h3 {font-size: 1.7vw;}
.pmb-pms-video-title h3.mobile {display: none;}

.float-info.pvp {width: 17%;}
#pvp-info-1 {top: 34%; left: 3.5%;}
#pvp-info-2 {top: 53.5%; left: 3.5%;}
#pvp-info-3 {top: 68.5%; left: 3.5%;}
#pvp-info-4 {top: 34%; left: 79.5%;}
#pvp-info-5 {top: 52%; left: 79.5%;}
#pvp-info-6 {top: 68.5%; left: 79.5%;}

@media only screen and (max-width: 1200px) {	
	.pembakaran-vs-pemanasan-content {margin-bottom: -6%;}

	.pmb-pms-video-container {width: 55%;}
	.pmb-pms-video-title h3 {font-size: 2vw;}
	.pmb-pms-video-right .pmb-pms-video-title {width: 110%;}

	#pembakaran-vs-pemanasan-animation {width: 110%; margin-left: -5%;}

	.float-info.pvp {width: 15%;}
	#pvp-info-1 {top: 32.5%; left: 2.5%;}
	#pvp-info-2 {top: 53.5%; left: 2.5%;}
	#pvp-info-3 {top: 68.5%; left: 2.5%;}
	#pvp-info-4 {top: 32.5%; left: 83%;}
	#pvp-info-5 {top: 52%; left: 83%;}
	#pvp-info-6 {top: 66.5%; left: 83%;}
}

@media only screen and (max-width: 768px) {
	.pembakaran-vs-pemanasan-content {margin-bottom: -12%;}

	.float-info.pvp {width: 16%; text-align: left;}	
	#pvp-info-1 {top: 31.5%; left: 1.5%; text-align: right;}
	#pvp-info-2 {top: 52.5%; left: 1.5%; text-align: right;}
	#pvp-info-3 {top: 68%; left: 1.5%; text-align: right;}
	#pvp-info-4 {top: 31.5%;}
	#pvp-info-5 {top: 51.5%;}
	#pvp-info-6 {top: 66%;}
}

@media only screen and (max-width: 600px) {	
	#pembakaran-vs-pemanasan .title-row-responsive h2 {font-size: 4.5vw;}
	
	.pembakaran-vs-pemanasan-content {margin-top: -28%; margin-bottom: -26%;}

	#pembakaran-vs-pemanasan-animation {display: none;}
	#pembakaran-vs-pemanasan-animation-mobile {display: block;}
	
	.pmb-pms-video-container {top: 0; left: 0; transform: none; width: 100%; height: 100%;}
	.pmb-pms-video-left {top: 15%; left: 0; width: 100%; height: 30%;}
	.pmb-pms-video-right {top: 56.5%; left: auto; right: 0; width: 100%; height: 30%;}
	.pmb-pms-video-left video {width: 48%;}
	.pmb-pms-video-right video {width: 48%; float: right;}
	
	.pmb-pms-video-title {text-align: left; width: 32% !important; transform: none;}
	.pmb-pms-video-left .pmb-pms-video-title {top: 2%; left: 56%;}
	.pmb-pms-video-right .pmb-pms-video-title {top: 2%; left: 15%;}
	.pmb-pms-video-title h3 {font-size: 3.6vw;}
	.pmb-pms-video-title h3.desktop {display: none;}
	.pmb-pms-video-title h3.mobile {display: block;}

	.float-info.pvp {width: 30%; text-align: left !important;} 	
	.float-info.pvp p {font-size: 2.6vw;}
	#pvp-info-1 {top: 20.3%; left: 56%;}
	#pvp-info-2 {top: 33%; left: 56%;}
	#pvp-info-3 {top: 38%; left: 56%;}
	#pvp-info-4 {top: 62.5%; left: 15%;}
	#pvp-info-5 {top: 75%; left: 15%;}
	#pvp-info-6 {top: 80.5%; left: 15%;}
}

@media only screen and (max-width: 500px) {
	.pembakaran-vs-pemanasan-content {margin-bottom: -24%;}

	.pmb-pms-video-left {top: 13%; height: 32%;}
	.pmb-pms-video-right {top: 56%; height: 34%;}

	.pmb-pms-video-title {width: 40% !important;}
	.pmb-pms-video-left .pmb-pms-video-title {}
	.pmb-pms-video-right .pmb-pms-video-title {left: 7%;}
	.pmb-pms-video-title h3 {font-size: 4.4vw;}
	.pmb-pms-video-right .pmb-pms-video-title {top: 0;}
	
	.float-info.pvp {width: 37%;}	
	.float-info.pvp p {font-size: 3.2vw;}
	#pvp-info-1 {top: 20%;}
	#pvp-info-2 {top: 32.6%;}
	#pvp-info-3 {top: 37.7%;}
	#pvp-info-4 {top: 62%; left: 7%;}
	#pvp-info-5 {top: 74.5%; left: 7%;}
	#pvp-info-6 {top: 80%; left: 7%;}
}
/* /PEMBAKARAN VS PEMANASAN */


/* ASAP VS UAP */
#asap-vs-uap {background: #FACA82;}

.asap-vs-uap-content {position: relative; margin-top: -2%; margin-bottom: -15%; overflow-x: hidden;}

#asap-vs-uap-animation {position: relative; z-index: 300; margin: 0 auto; overflow-x: hidden;}
#asap-vs-uap-animation-mobile {position: relative; z-index: 300; margin: 0 auto; display: none; overflow-x: hidden;}

.avu-video-container {position: absolute; top: 35%; left: 50%; transform: translate(-50%, -35%); width: 52%; height: 50%;}
.avu-video-left {position: absolute; top: 0; left: 2.5%; width: 45%; height: 100%;}
.avu-video-right {position: absolute; top: 0; right: 2.5%; width: 45%; height: 100%;}
.avu-video-title-abs {position: absolute; top: -28%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;}
.avu-video-title-abs h3 {font-size: 1.7vw;}
.avu-video-left .avu-video-title-abs {width: 40%;}
.avu-video-right .avu-video-title-abs {width: 110%;}
.avu-video-content {width: 100%; height: 100%; border-radius: 2rem; overflow: hidden;}
.avu-video-content .cover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 250; background: rgba(253, 247, 237, 0.4); border-radius: 2rem;}
.avu-video-content video {position: relative; z-index: 200; width: 100%; height: 100%; object-fit: cover;}
.avu-video-title {position: absolute; z-index: 300; top: 68%; left: 50%; transform: translateX(-50%); width: 80%; text-align: center;}
video#asap-video {}
video#uap-video {transform: scale(2.5) translate(-30%, 25%);}

.additional-description-col {grid-column: 2 / span 10; padding-left: 4rem; padding-right: 4rem;}
.additional-description {background: #ECFAF5; border-radius: 2.5rem; padding: 3rem 4rem;}

.float-info.avu {width: 18%;}
#avu-info-1 {top: 26.5%; left: 2.5%;}
#avu-info-2 {top: 37.5%; left: 2.5%;}
#avu-info-3 {top: 47.7%; left: 2.5%;}
#avu-info-4 {top: 27%; left: 79.5%;}
#avu-info-5 {top: 38%; left: 79.5%;}
#avu-info-6 {top: 47%; left: 79.5%;}

@media only screen and (max-width: 1200px) {
	.avu-video-title-abs h3 {font-size: 1.9vw;}
	.avu-video-right .avu-video-title-abs {width: 120%;}
}

@media only screen and (max-width: 1024px) {
	.additional-description-col {grid-column: 1 / -1; padding-left: 7.5%; padding-right: 7.5%;}
}

@media only screen and (max-width: 768px) {
	.asap-vs-uap-content {margin-bottom: -18%;}

	.float-info.avu {width: 18%; text-align: left;}
	.float-info.avu p {font-size: 1.3vw;}
	#avu-info-1 {top: 24%; left: 2.5%; text-align: right;}
	#avu-info-2 {top: 37%; left: 2.5%; text-align: right;}
	#avu-info-3 {top: 45%; left: 2.5%; text-align: right;}
	#avu-info-4 {top: 25%;}
	#avu-info-5 {top: 37.5%;}
	#avu-info-6 {width: 20%; top: 46%;}

	.additional-description-col {grid-column: 1 / -1; padding-left: 0; padding-right: 0;}
}

@media only screen and (max-width: 600px) {	
	#asap-vs-uap .title-row-responsive h2 {font-size: 4.5vw;}

	.asap-vs-uap-content {margin-top: -24%; margin-bottom: -22%;}
	
	#asap-vs-uap-animation {display: none;}
	#asap-vs-uap-animation-mobile {display: block;}
	
	.avu-video-container {top: 0; left: 0; width: 100%; height: 100%; transform: none;}
	.avu-video-left {top: 13%; left: 0; width: 47%; height: 32%;}
	.avu-video-right {top: 56%; right: 0; width: 47%; height: 32%;}	
	.avu-video-title {transform: none; width: 40%;}
	.avu-video-title h3 {font-size: 4.5vw;}
	.avu-video-left .avu-video-title {top: 72%; left: 37%;}
	.avu-video-right .avu-video-title {top: 65%; left: 21%;}
	.avu-video-left .avu-video-content, .avu-video-left .avu-video-content .cover {border-top-left-radius: 0; border-bottom-left-radius: 0;}
	.avu-video-right .avu-video-content, .avu-video-right .avu-video-content .cover {border-top-right-radius: 0; border-bottom-right-radius: 0;}
	.avu-video-title-abs {display: none;}

	.avu-video-title h3 {font-size: 3.6vw;}

	.float-info.avu {width: 32%; text-align: left !important;}
	.float-info.avu p {font-size: 2.6vw;}
	#avu-info-1 {top: 15.8%; left: 56%;}
	#avu-info-2 {top: 24.5%; left: 56%;}
	#avu-info-3 {width: 36%; top: 31.4%; left: 56%;}
	#avu-info-4 {top: 58.5%; left: 10%;}
	#avu-info-5 {top: 67%; left: 10%;}
	#avu-info-6 {width: 36%; top: 74%; left: 10%;}
}

@media only screen and (max-width: 500px) {
	.avu-video-title h3 {font-size: 4.4vw;}

	.float-info.avu {width: 40% !important;}
	.float-info.avu p {font-size: 3.2vw;}
	#avu-info-1 {top: 15.5%;}
	#avu-info-2 {top: 24%;}
	#avu-info-4 {top: 58%; left: 5%;}
	#avu-info-5 {top: 66.5%; left: 5%;}
	#avu-info-6 {top: 73.5%; left: 5%;}
}

@media only screen and (max-width: 420px) {
	.asap-vs-uap-content {margin-top: -30%; margin-bottom: -24%;}
}
/* /ASAP VS UAP */


/* ROKOK VS PTA */
#rokok-vs-pta {}

.rokok-vs-pta-content {position: relative; margin-top: -2%; margin-bottom: -8%; overflow-x: hidden;}

#rokok-vs-pta-animation {position: relative; z-index: 200; margin: 0 auto; overflow-x: hidden;}
#rokok-vs-pta-animation-mobile {position: relative; z-index: 200; margin: 0 auto; display: none; overflow-x: hidden;}

.float-info.rvp {width: 14%; /* background: rgba(200, 200, 200, 0.5); */}
.float-info.rvp.title {width: 40%;}
.float-info.rvp.title h3 {font-size: 2.1vw;}
#rvp-title-1 {top: 6%; left: 10%;}
#rvp-title-2 {top: 6%; left: 55%;}
#rvp-info-1 {top: 32%; left: 8%;}
#rvp-info-2 {width: 11%; top: 45.5%; left: 7%;}
#rvp-info-3 {top: 61%; left: 7%;}
#rvp-info-4 {width: 12%; top: 25%; left: 69%}
#rvp-info-5 {top: 34%; left: 72%;}
#rvp-info-6 {top: 42.5%; left: 71.5%;}
#rvp-info-7 {top: 55%; left: 83%;}
#rvp-info-8 {top: 61.5%; left: 84%;}
#rvp-info-9 {top: 68%; left: 85%;}
#rvp-info-10 {top: 75%; left: 83.5%;}

@media only screen and (max-width: 1200px) {
	.float-info.rvp {width: 16%;}
	.float-info.rvp.title h3 {font-size: 2.4vw;}
	
	#rvp-title-1 {left: 10%;}
	#rvp-title-2 {left: 58%;}

	#rvp-info-1 {left: 5%;}
	#rvp-info-2 {width: 14%; left: 5%;}
	#rvp-info-3 {left: 5%;}
	#rvp-info-4 {width: 16%; left: 71%;}
	#rvp-info-5 {top: 33%; left: 72%;}
	#rvp-info-6 {top: 42%;}
	#rvp-info-7 {top: 53.5%; left: 82.5%;}
	#rvp-info-8 {top: 60%; left: 83.5%;}
	#rvp-info-9 {width: 14%; top: 67%; left: 84%;}
	#rvp-info-10 {top: 74%;}
}

@media only screen and (max-width: 768px) {	
	.rokok-vs-pta-content {margin-bottom: -12%;}

	.float-info.rvp {width: 16%; text-align: left;}
	.float-info.rvp p {font-size: 1.25vw;}
	#rvp-info-1 {top: 31%; left: 2.5%; text-align: right;}
	#rvp-info-2 {width: 16%; top: 44.5%; left: 2%; text-align: right;}
	#rvp-info-3 {top: 60%; left: 2.5%; text-align: right;}
	#rvp-info-4 {top: 24%; left: 71.5%;}
	#rvp-info-5 {top: 34%; left: 72.5%;}
	#rvp-info-6 {top: 42.5%; left: 71.5%;}
	#rvp-info-7 {left: 84%;}
	#rvp-info-8 {top: 61%; left: 85%;}
	#rvp-info-9 {top: 68%; left: 85%;}
	#rvp-info-10 {top: 76%;}
}

@media only screen and (max-width: 600px) {	
	#rokok-vs-pta {background: #FDF7ED;}
	.rokok-vs-pta-content {margin-top: -20%; margin-bottom: -18%;}
	#rokok-vs-pta .title-row-responsive h2 {font-size: 4.1vw;}

	#rokok-vs-pta-animation {display: none;} 
	#rokok-vs-pta-animation-mobile {display: block;}
	
	.float-info.rvp {width: 32% !important; text-align: right;}
	.float-info.rvp.title h3 {font-size: 3.6vw;}
	.float-info.rvp.title {width: 32%; text-align: center;}
	.float-info.rvp p {font-size: 2.6vw;}

	#rvp-title-1 {top: 31.5%; left: 7.7%;}
	#rvp-title-2 {top: 88%; left: 63%;}
	
	#rvp-info-1 {top: 14%; left: 57%; text-align: left;}
	#rvp-info-2 {top: 20%; left: 59%; text-align: left;}
	#rvp-info-3 {top: 25%; left: 57%; text-align: left;}
	#rvp-info-4 {top: 44.5%; left: 10.5%;}
	#rvp-info-5 {top: 49.5%; left: 9%;}
	#rvp-info-6 {top: 54.5%; left: 10.5%;}
	#rvp-info-7 {top: 67%; left: 11%;}
	#rvp-info-8 {top: 71.5%; left: 9%;}
	#rvp-info-9 {top: 76.5%; left: 9%;}
	#rvp-info-10 {top: 81.5%; left: 11%;}
}

@media only screen and (max-width: 500px) {
	.rokok-vs-pta-content {margin-top: -24%; margin-bottom: -22%;}

	.float-info.rvp {width: 36% !important;}
	.float-info.rvp.title h3 {font-size: 4vw;}
	.float-info.rvp p {font-size: 3.2vw;}

	#rvp-title-1 {left: 5.5%;}
	#rvp-title-2 {top: 87%; left: 61%;}
	#rvp-info-1 {left: 58%;}
	#rvp-info-2 {left: 60%;}
	#rvp-info-3 {left: 58%;}
	#rvp-info-4 {left: 5%;}
	#rvp-info-5 {top: 49%; left: 3.5%;}
	#rvp-info-6 {width: 30% !important; top: 54%;}
	#rvp-info-7 {left: 5%;}
	#rvp-info-8 {top: 71%; left: 4%;}
	#rvp-info-9 {top: 76%; left: 4%;}
	#rvp-info-10 {top: 81%; left: 5%;}
}
/* /ROKOK VS PTA */


/* VAPE VS TEMBAKAU */
#vape-vs-tembakau {margin-top: -4rem; padding-bottom: 0;}

.vape-vs-tembakau-content {position: relative; margin-top: -5%; overflow-x: hidden;}

#vape-vs-tembakau-animation {position: relative; z-index: 200; margin: 0 auto; overflow-x: hidden;}
#vape-vs-tembakau-animation-mobile {position: relative; z-index: 200; margin: 0 auto; display: none; overflow-x: hidden;}

#vvt-outer-wrap {}
#vvt-left-col {position: absolute; top: 0; left: 0; width: 35%; height: 100%; background: #FAF2BE;}
#vvt-middle-col {position: absolute; top: 0; left: 35%; width: 30%; height: 100%; background: #FDF7ED;}
#vvt-right-col {position: absolute; top: 0; left: 65%; width: 35%; height: 100%; background: #FAF2BE;}
#vvt-left-col-resp, #vvt-middle-col-resp, #vvt-right-col-resp {display: none;}
.vvt-content-col {padding-left: 5rem; padding-right: 5rem; padding-top: 4rem; text-align: center;}
.vvt-content-col h3 {display: inline-block; margin: 0 auto; width: 100%; font-size: 2vw;}
.vvt-content-col h3 span {display: block;}

.vvt-button-col {position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); z-index: 300;}

.float-info.vvt {width: 11%;}
#vvt-info-1 {width: 14%; top: 25%; left: 17%;}
#vvt-info-2 {top: 27%; left: 45%;}
#vvt-info-3 {top: 27%; left: 71%;}
#vvt-info-4 {top: 35%; left: 86%;}
#vvt-info-5 {top: 67%; left: 87%;}
#vvt-info-6 {top: 77%; left: 71%;}
#vvt-info-7 {top: 77%; left: 52.5%;}
#vvt-info-8 {top: 77%; left: 37%;}
#vvt-info-9 {top: 77%; left: 18.2%;}
#vvt-info-10 {width: 12%; top: 45%; left: 0.5%;}

@media only screen and (max-width: 1200px) {
	.float-info.vvt {width: 14%;}

	#vvt-info-1 {width: 18%; top: 23%; left: 15%;}
	#vvt-info-2 {top: 25.5%; left: 43%;}
	#vvt-info-3 {top: 25.5%; left: 69%;}
	#vvt-info-4 {top: 35%;}
	#vvt-info-5 {left: 86%;}
	#vvt-info-6 {left: 70%;}
	#vvt-info-7 {left: 51%;}
	#vvt-info-8 {left: 35.5%;}
	#vvt-info-9 {left: 16.5%;}
	#vvt-info-10 {top: 43.5%;}
}

@media only screen and (max-width: 1024px) {
	.vvt-content-col h3 {font-size: 2vw;}
	.vvt-content-col {padding-left: 3rem; padding-right: 3rem;}
	.vape-vs-tembakau-content {margin-top: -2%;}
}

@media only screen and (max-width: 900px) {
}

@media only screen and (max-width: 768px) {
	/* .vape-vs-tembakau-content {margin-top: -10%; margin-bottom: -12%; padding-bottom: 0;}

	#vape-vs-tembakau-animation {display: none;}
	#vape-vs-tembakau-animation-mobile {display: block;}

	#vvt-left-col, #vvt-middle-col, #vvt-right-col {display: none;}

	#vvt-left-col-resp, #vvt-middle-col-resp, #vvt-right-col-resp {display: block; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); height: auto;}
	#vvt-left-col-resp {top: 1%;}
	#vvt-middle-col-resp {top: 30.5%;}
	#vvt-right-col-resp {top: 61%;}
	.vvt-content-col h3 {font-size: 2.4rem;}

	.float-info.vvt {width: 24% !important; text-align: left;}
	#vvt-info-1 {top: 7%; left: 51%;}
	#vvt-info-10 {top: 16.5%; left: 58%;}
	#vvt-info-9 {top: 25.5%; left: 51%;}

	#vvt-info-2 {top: 37.5%; left: 25%; text-align: right;}
	#vvt-info-8 {top: 46%; left: 17%; text-align: right;}
	#vvt-info-7 {top: 55%; left: 26%; text-align: right;}

	#vvt-info-3 {top: 68%; left: 48%;}
	#vvt-info-4 {top: 74%; left: 58%;}
	#vvt-info-5 {top: 81%; left: 58%;}
	#vvt-info-6 {top: 87%; left: 47%;} */
	
	#vvt-outer-wrap {padding-bottom: 3rem;}

	.float-info.vvt {}
	.float-info.vvt p {font-size: 1.25vw;}

	#vvt-info-5 {left: 85.5%;}

	.vvt-button-col {bottom: 3%;}
}

@media only screen and (max-width: 600px) {	
	#vvt-outer-wrap {padding-bottom: 0;}
	.vape-vs-tembakau-content {margin-bottom: -12%;}
	#vape-vs-tembakau-animation {display: none;}
	#vape-vs-tembakau-animation-mobile {display: block;}
	
	#vvt-left-col, #vvt-middle-col, #vvt-right-col {z-index: 500; width: 100%; left: 0; height: auto; background: none;}
	#vvt-left-col {top: 0.5%;}
	#vvt-middle-col {top: 31.5%;}
	#vvt-right-col {top: 63.5%;}
	.vvt-content-col h3 {font-size: 3.6vw; font-family: 'BoldFont', Arial, Verdana !important;}
	.vvt-content-col h3 span {display: inline;}

	.float-info.vvt {width: 30% !important; text-align: left;}
	.float-info.vvt p {font-size: 2.6vw;}
	#vvt-info-1 {width: 36% !important; top: 7%; left: 51%;}
	#vvt-info-10 {top: 16%; left: 58%;}
	#vvt-info-9 {top: 24.5%; left: 51%;}

	#vvt-info-2 {top: 37%; left: 20%; text-align: right;}
	#vvt-info-8 {top: 45.5%; left: 12%; text-align: right;}
	#vvt-info-7 {top: 54%; left: 20%; text-align: right;}

	#vvt-info-3 {top: 67.5%; left: 47%;}
	#vvt-info-4 {top: 73.5%; left: 58%;}
	#vvt-info-5 {top: 80.5%; left: 58%;}
	#vvt-info-6 {top: 86.5%; left: 47%;}

	.vvt-button-col {bottom: 4%;}
}

@media only screen and (max-width: 500px) {
	.vvt-content-col h3 {font-size: 4.2vw;}
	#vvt-left-col {top: -1%;}
	#vvt-middle-col {top: 30.5%;}
	#vvt-right-col {top: 63%;}

	.float-info.vvt {width: 36% !important;}
	.float-info.vvt p {font-size: 3.2vw;}
	#vvt-info-1 {width: 42% !important; top: 6.5%; left: 52%;}
	#vvt-info-10 {top: 15.5%; left: 59%;}
	#vvt-info-9 {top: 24%; left: 52%;}

	#vvt-info-2 {top: 36.5%; left: 12%;}
	#vvt-info-8 {top: 45%; left: 4%;}
	#vvt-info-7 {top: 53.5%; left: 12%;}

	#vvt-info-3 {top: 67%; left: 48%;}
	#vvt-info-4 {top: 73%; left: 59%;}
	#vvt-info-5 {top: 80%; left: 59%;}
	#vvt-info-6 {left: 48%;}
}

@media only screen and (max-width: 420px) {		
	#vvt-middle-col {top: 30%;}
	#vvt-right-col {top: 62.5%;}
}
/* /VAPE VS TEMBAKAU */


/* DISCLAIMER */
#disclaimer {}
/* /DISCLAIMER */


/* NEWSLETTER */
#newsletter {background: #FDF7ED;}

.subscribe-newsletter-col {grid-column: 3 / span 8;}

.newsletter-form input[type="submit"] {border-radius: 2rem; padding: 1.5rem 3rem; width: 100%; box-shadow: 0 0.3rem 0.3rem #bfbfbf;}
.asterisk {color: #EB4B40;}

@media only screen and (max-width: 1024px) {
	.subscribe-newsletter-col {grid-column: 2 / span 4;}
}

@media only screen and (max-width: 768px) {
	.subscribe-newsletter-col {grid-column: 1 / -1;}
}

@media only screen and (max-width: 600px) {
	.newsletter-form {margin: 0 auto; width: 40rem !important;}
	.newsletter-form .gfr-custom-36, .newsletter-form .gfr-custom-20 {width: 100% !important; margin-bottom: 5rem; text-align: center;}
	.newsletter-form .gfr-custom-36:last-child, .newsletter-form .gfr-custom-20:last-child {margin-bottom: 0;}
	.newsletter-form label.form-label {text-align: center;}
	.newsletter-form input[type="submit"] {width: 20rem; margin: 0 auto;}
}

@media only screen and (max-width: 420px) {
	.newsletter-form {width: 80% !important;}
	.newsletter-form input[type="submit"] {width: 16rem;}
}
/* /NEWSLETTER */


/* FOOTER */
#footer-top-section {padding: 4rem 0; background: #EB4B40;}

.footer-copyright-col {grid-column: 1 / span 5;}
.footer-socmed-col {grid-column: 8 / span 5; text-align: right;}

ul.socmed-list {margin-top: 1rem;}
ul.socmed-list:only-child {margin-top: 0;}
ul.socmed-list > li {margin-right: 2rem;}
ul.socmed-list > li:last-child {margin-right: 0;}
ul.socmed-list > li > a img {filter: invert(1); height: 2.4rem; transition: all 0.2s linear;}
ul.socmed-list > li > a img:hover {transform: scale(1.1);}

@media only screen and (max-width: 768px) {
	#footer-top-section {padding: 3rem 0;}
}

@media only screen and (max-width: 600px) {
	.footer-copyright-col, .footer-socmed-col {grid-column: 1 / -1; text-align: center;}
	.footer-copyright-col {margin-bottom: 2rem;}
	
	ul.socmed-list.flex.end {justify-content: center;}
}

@media only screen and (max-width: 500px) {
}
/* /FOOTER */


/* GO TO TOP */
#go-top-icon {display: none; position: fixed; z-index: 1000; right: 8%; bottom: 8%; width: 4rem; height: 4rem; background: url(../icons/ui/arrow-up.svg) no-repeat center #EB4B40; background-size: 1.8rem auto !important; border-radius: 0.8rem; box-shadow: 0 0 0.4rem #afafaf; transition: background 0.2s linear; cursor: pointer;}
#go-top-icon:hover {background: url(../icons/ui/arrow-up.svg) no-repeat center #a32c24;}
/* /GO TO TOP */

/* SURVEY POPUP */
.popup-outer-container {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000;}
.overlay-bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2100; background: rgba(0, 0, 0, 0.7);}

#survey-icon {position: fixed; z-index: 1000; left: 5%; bottom: 11rem; width: 6rem; height: 6rem; background: url(../images/survey/survey-icon-2.svg) no-repeat 60% center #EB4B40; background-size: 3.6rem 3.6rem !important; cursor: pointer; border-radius: 1.2rem; box-shadow: 0 0 0.2rem #afafaf; transition: background 0.2s linear;}
#survey-icon:hover {background: url('../images/survey/survey-icon-2.svg') no-repeat 60% center #a32c24;}

#popup-survey {display: none;}
.popup-content {position: fixed; width: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2200;}
.popup-container {width: 45rem; background: #233C45; min-height: 5rem; padding: 6rem 4rem 4rem 4rem; text-align: center;}
.popup-container p {font-size: 1.2rem; color: #fff;}
.popup-close {position: absolute; top: 1.5rem; right: 1.5rem; width: 2.4rem; height: 2.4rem; background: url(../icons/ui/cross.svg) no-repeat center; background-size: 2.4rem 2.4rem; cursor: pointer;}
h2.popup-title {font-size: 2.0rem; color: #fff;}

ul.survey-choice-list {}
ul.survey-choice-list > li {margin-bottom: 1.0rem;}
ul.survey-choice-list > li:last-child {margin-bottom: 0;}
ul.survey-choice-list > li > a {display: block; position: relative; font-size: 1.6rem; color: #233C45; background: #FDF6EE; padding: 1rem 2rem; text-align: center; cursor: pointer; font-family: 'SemiBoldFont', Arial, Verdana;}
ul.survey-choice-list > li > a:hover {background: #EB4B40; text-decoration: none; color: #fff;}
ul.survey-choice-list.with-value > li > a {text-align: left; padding-right: 10rem;}
ul.survey-choice-list.with-value > li > a:hover {color: #233C45; background: #FDF6EE; cursor: text;}
ul.survey-choice-list.with-value > li > a .survey-value {position: absolute; top: 0; right: 0; width: 8.5rem; height: 100%; background: #EB4B40;}
ul.survey-choice-list.with-value > li > a .survey-value span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.6rem; color: #fff; font-family: 'SemiBoldFont', Arial, Verdana;}

.popup-container a.gen-btn {margin-top: 2rem;}
.popup-container a.gen-btn:only-child {margin-top: 0;}

#survey-question {display: none;}

#survey-result {display: none;}

ul.survey-choice-list + p, ul.survey-choice-list + a {margin-top: 3rem;}

@media only screen and (max-width: 1024px) {
	#survey-icon {bottom: 9rem;}
}

@media only screen and (max-width: 768px) {
	#survey-icon {left: 5%;}
}

@media only screen and (max-width: 600px) {
	#survey-icon {bottom: 15.5rem;}
}

@media only screen and (max-width: 500px) {
	#survey-icon {display: none;}

	.popup-content {width: 90%;}
	.popup-container {width: 100%; padding: 5rem 3rem 3rem 3rem;}
	.popup-close {width: 2rem; height: 2rem; background-size: 2rem 2rem;}

	ul.survey-choice-list > li > a {font-size: 1.5rem; padding: 1rem 1.5rem;}
	ul.survey-choice-list.with-value > li > a .survey-value span {font-size: 1.6rem;}
}

@media only screen and (max-width: 420px) {
	ul.survey-choice-list.with-value > li > a {font-size: 1.4rem; padding-right: 8.5rem;}
	ul.survey-choice-list.with-value > li > a .survey-value {width: 7rem;}
	ul.survey-choice-list.with-value > li > a .survey-value span {font-size: 1.5rem;}
}
/* /SURVEY POPUP */