/*!
* Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/**************************************************************************/
/** FONTS *****************************************************************/
/*
@font-face {
font-family: "EXO-BLACK-ITALIC";
src: url('/public/font/EXO-BLACK-ITALIC.OTF');
}
@font-face {
font-family: "EXO-BLACK";
src: url('/public/font/EXO-BLACK.OTF');
}
@font-face {
font-family: "EXO-BOLD-ITALIC";
src: url('/public/font/EXO-BOLD-ITALIC.OTF');
}
*/
@font-face {
font-family: "EXO-BOLD";
src: url('/public/font/EXO-BOLD.OTF');
}
/*
@font-face {
font-family: "EXO-DEMIBOLD-ITALIC";
src: url('/public/font/EXO-DEMIBOLD-ITALIC.OTF');
}
@font-face {
font-family: "EXO-DEMIBOLD";
src: url('/public/font/EXO-DEMIBOLD.OTF');
}
*/
@font-face {
font-family: "EXO-EXTRABOLD";
src: url('/public/font/EXO-EXTRABOLD.OTF');
}
/*
@font-face {
font-family: "EXO-EXTRALIGHT-ITALIC";
src: url('/public/font/EXO-EXTRALIGHT-ITALIC.OTF');
}
@font-face {
font-family: "EXO-EXTRALIGHT";
src: url('/public/font/EXO-EXTRALIGHT.OTF');
}
@font-face {
font-family: "EXO-LIGHT";
src: url('/public/font/EXO-LIGHT.OTF');
}
@font-face {
font-family: "EXO-MEDIUM-ITALIC";
src: url('/public/font/EXO-MEDIUM-ITALIC.OTF');
}
@font-face {
font-family: "EXO-MEDIUM";
src: url('/public/font/EXO-MEDIUM.OTF');
}
@font-face {
font-family: "EXO-REGULAR-ITALIC";
src: url('/public/font/EXO-REGULAR-ITALIC.OTF');
}
*/
@font-face {
font-family: "EXO-REGULAR";
src: url('/public/font/EXO-REGULAR.OTF');
}
/*
@font-face {
font-family: "EXO-THIN-ITALIC";
src: url('/public/font/EXO-THIN-ITALIC.OTF');
}
@font-face {
font-family: "EXO-THIN";
src: url('/public/font/EXO-THIN.OTF');
}
*/
/**************************************************************************/
/** DEFAULT ***************************************************************/
html {
scroll-behavior: smooth;
}
body {
-webkit-text-size-adjust:none;
color: #19181a;
font-family: "EXO-REGULAR";
background-color: #EFE9E9 !important;
/*text-shadow: 0 1px 0 rgba(0,0,0,.2);*/
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/*
.container { width: 100%; max-width: 1024px; margin: 0 auto; }
*/
#wrapper { width: 100%; position: relative; font-size: 16px; background-color: unset !important; }
.flex-btn { display: none; }
b { font-family: "EXO-BOLD"; }
h1, h2, h3, h4, h5, h6 { font-family: "EXO-BOLD"; }
/**************************************************************************/
/** MOBILE ****************************************************************/
.mobile-menu li :before { content: "" !important; }
.mobile-menu li a { padding: 10px 20px 10px 50px !important; }
.mobile-menu li.a a { padding: 10px 20px 10px 10px !important; }
.mobile-menu li.b a { padding: 10px 20px 10px 25px !important; }
.mobile-menu li.c a { padding: 10px 20px 10px 35px !important; }
.mobile-menu li.a.active > a { font-weight: bold !important; }
.mobile-menu li.a a[href="#"]::after { content: "\f078"; text-align: right; float:right; color: #ffffff; font-family: "FontAwesome"; }
.mobile-menu li.a.mobile-open-nav a[href="#"]::after { content: "\f077"; text-align: right; float:right; color: #ffffff; font-family: "FontAwesome"; }
/**************************************************************************/
/** HEADER ****************************************************************/
header { display: block; width: 100%; height: 93px; }
header img { float: right; margin-top: 25px; }
header nav { float: left; margin-top: 47px; }
header .navbar-collapse.collapse { padding: 0 !important; }
header .navbar-nav li:hover > ul.dropdown-menu { display: block; }
header .navbar-nav > li > a { padding: 0 !important; color: #19181a; }
header .navbar-nav > li > a:hover { text-decoration: none; }
header .navbar-nav > li > a i { margin-left: 5px; font-size: 16px; }
header .dropdown-menu { min-width: 200px; }
header .dropdown-menu > li > a:hover,
header .dropdown-menu > li > a:focus { color: #fafafa; text-decoration: none; background-color: #ef7c45; }
header .dropdown-submenu { position:relative; }
header .dropdown-submenu .dropdown-toggle:after { font-family: FontAwesome; content: "\f105"; position: absolute; top: 3px; right: 10px; }
header .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top:-6px; }
header .dropdown-menu > li > a:hover:after { transform: rotate(-90deg); }
header .navbar-collapse { float: left; }
header .navbar-nav { list-style: none; margin: 0; padding: 0; }
header .nav-item { margin-right: 48px; }
header .nav-item:last-child { margin-right: 0; }
header .nav-link-button span { font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 10px 10px 5px !important; background-color: #D84728; color: #E9E9E9 !important; border-radius: 10px; }
header .nav-link-button span i { margin-right: 5px; }
header .pulse-nav { color: #D84826 !important; -webkit-animation: pulsate .5s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.5; }
@-webkit-keyframes pulsate { 0% { opacity: 0.5; } 50% { opacity: 1.0; } 100% { opacity: 0.5; } }
/**************************************************************************/
/** FOOTER ****************************************************************/
footer { background: #d84728; padding: 7px 0 34px 0; line-height: 18px; color: #ffffff; }
footer .row { border-top: #ffffff solid 1px; margin-top: 20px; }
footer h4 { margin: 16px 0 30px 0; }
footer .social { margin-top: 21px; }
footer .social a { height: 34px; width: 34px; margin: 0 5px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 100%; color: #373738; background: #ffffff; border-color: #343a40; }
footer .social i { font-size: 16px; }
footer .copy { padding: 17px 0 0 0; height: 22px; line-height: 22px; }
footer .copy a { position: relative; color: #ffffff; padding-left: 25px; }
footer .copy a:hover { text-decoration: none; }
footer .copy i { position: absolute; font-size: 19px; }
footer .copy i.fa-external-link { top: -2px; left: 0 }
footer .copy i.fa-globe { top: -2px; left: 0 }
footer .copy i.fa-chevron-up { top: 0; right: 0; font-size: 13px; }
footer .copy span { position: relative; margin-left: 17px; padding: 0 20px 0 25px; }
footer .copy .btn-link { color: #fff; padding: 0; font-size: 16px; border: 0; }
footer .copy .dropup a { color: #000; }
footer .copy .dropup:hover .dropdown-menu { display: block; margin-top: 0; }
footer b { text-decoration: underline; }
footer a b,
footer a.white { color: #FFFFFF !important; }
footer .row a.white { color: #FFFFFF !important; text-decoration: underline; }
footer .bs-hours { margin-top: 10px; }
footer .image img { height: 75px; }
footer .image2 img { height: 75px; width: 115px; }
@media (max-width: 767px) {
footer .text-left,
footer .text-right { text-align: center !important; }
footer .copy div.col-xs-6 { margin-top: 10px; }
footer {
padding: 7px 0 10px 0;
}
}
/**************************************************************************/
/** HOME ******************************************************************/
#home #slider { background: #f6f2e7; height: 100vh; }
#home #slider ul { list-style: none; margin: 0; padding: 0; width: 100%; height: 100vh; overflow: hidden; background: #f6f2e7; }
#home #slider li { display: inline-block; width: 100%; height: inherit; margin: 0; padding: 0; }
#home #slider li .block { display: flex; height: 93vh; align-items: top; justify-content: top; background-position: top; background-repeat: no-repeat; background-size: contain;}
#home #slider img { left: 0; top: 0; width: 100%; }
#home #slider .bx-wrapper { height: 95vh; }
#home #slider .bx-viewport { height: 100% !important; }
#home #slider .b-text { z-index: 100; position: absolute; left: 6%; top: 28%; overflow-wrap: break-word; }
#home #slider .b-text-1 { z-index: 100; position: absolute; left: 8%; top: 15%; overflow-wrap: break-word; }
#home #slider .b-text span { display: block; word-wrap: break-word; width: 70vh; }
#home #slider .b-text-1 img { width: 250px; margin-bottom: 30px; }
#home #slider .b-text #b-text-1 { font-size: 26px; }
#home #slider .b-text #b-text-2 { font-size: 50px; color: #D84826; }
#home #slider .b-text #b-text-3 { font-size: 26px; }
#home #slider .b-text-1 #b-text-4 { display: block; font-size: 20px; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-weight: 500; color: #ffffff; width: 350px; height: 230px; }
#home #slider .b-btn { text-align: center; }
#home #slider .b-btn a { font-size: 20px; font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; margin: 100px 10px 30px;}
#home #slider .b-btn-1 { text-align: left; width: 250px; height: 80px; }
#home #slider .b-btn-1 a { font-size: 16px; font-weight: bolder; border: 2px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; border-radius: 18px; width: 200px; height: 50px; background-image: linear-gradient(to right, #F16663, #FEBC10); line-height: 1.8; letter-spacing: 3px;}
#home #ways { background: #ef7c45; padding: 30px 0; }
#home #ways h3 { font-size: 50px; color: #f6f2e7; margin: 0 0 25px 0; padding: 0; }
#home #ways h4 { font-size: 30px; color: #f6f2e7; margin: 14px 0 10px 0; padding: 0; }
#home #ways p { font-size: 16px; color: #f6f2e7; margin: 0; padding: 0; }
#home #ways span { display: inline-block; height: 54px; width: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 100%; color: #d84728; background: #f6f2e7; font-size: 25px; font-weight: bold; margin-top: -35px; font-family: "EXO-EXTRABOLD"; }
#home #ways img { width: 100%; }
#home #info { background: #9ea9b2; padding: 85px 0; }
#home #info h4 { background: #d84728; padding: 25px 0 20px 0; margin: 0; text-align: center; color: #ececec; font-size: 20px; }
#home #info p { margin: 0; padding: 35px 10px; background: #ececec; height: 160px;}
#home #info img { width: 100%; }
#home #info a { text-decoration: none !important; color: unset !important; }
#home #faq { background: url(/public/img/faq.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#home #faq .content { width: 650px; margin: 135px auto 135px auto; background: #f4f4f4; padding-bottom: 100px; }
#home #faq h3 { margin: 0; padding: 12px 20px; font-size: 30px; line-height: 26px; color: #f4f4f4; background: #d84728; }
#home #faq h4 { margin: 15px 0 10px 0; padding: 0; font-size: 26px; line-height: 20px; color: #d84728; text-align: center; }
#home #faq p { padding: 0 35px; margin: 0; color: #000000; line-height: 16px; text-align: justify; font-size: 14px; }
#home #faq input { background: #f4f4f4; border: #19181a solid 1px; width: 458px; height: 30px; margin: 10px 5px 0 35px; padding: 0 10px; }
#home #faq button { background: #19181a; width: 100px; height: 30px; color: #ffffff; font-weight: bold; border-radius: 4px; border: 0; }
#home #faq ul.ul-1 { display: inline-block; list-style: none; margin: 20px 0 0 120px; padding: 0; }
#home #faq li.li-1 { margin: 5px 0; padding: 0; }
#home #faq i { display: inline-block; height: 24px; width: 24px; margin-right: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 100%; color: #d84728; border: #d84728 solid 1px; font-size: 16px; }
#home #faq span { display: inline-block; line-height: 24px; }
#home #faq .panel {
border: 0 !important;
background-color: transparent !important;
margin-bottom: 0 !important;
box-shadow: unset !important;
}
#home #faq .panel-heading {
border: 0 !important;
background-color: unset !important;
padding: 0 !important;
}
#home #faq .panel-heading a {
color: unset !important;
text-decoration: unset !important;
}
#home #modal-pop-up-reminder { text-align: center; }
@media screen and (min-width: 768px) {
#home #modal-pop-up-reminder:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
#home #modal-pop-up-reminder .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; width: 60vw; }
#home #modal-pop-up-reminder .modal-content { border-radius: unset; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/public/img/modal/pap-mate/background.jpg); }
#home #modal-pop-up-reminder .modal-body { padding: 0; display: flex; }
#home #modal-pop-up-reminder .modal-body div { width: 25vw; }
#home #modal-pop-up-reminder .modal-body div img { width: 11vw; margin: 4vw 7vw; }
#home #modal-pop-up-reminder .modal-body .cover-image { width: 35vw; }
#home #modal-pop-up-reminder .modal-content #close { right: .3vw; top: .3vw; position: absolute; border-radius: 1vw !important; border: 0 !important; width: 1.3vw; height: 1.3vw; color: #fff; background: #000; opacity: .7; padding: 0; font-size: 1vw; }
#home #modal-pop-up-reminder .modal-content #close:focus { outline: unset; }
#home #modal-pop-up-reminder .modal-body div p { margin: 2vw 2.4vw; font-size: 1vw; }
#home #modal-pop-up-reminder .modal-body div p span { display: block; font-size: 2.2vw; font-weight: bolder; margin-bottom: .5vw; color: #FE5301; }
#home #modal-pop-up-reminder .modal-body div a.btn { width: 20vw; margin: 2.5vw; border: 0; border-radius: 0; background-color: #FE5301; color: #FFFFFF; font-weight: bold; font-size: 2.5vh; padding: .5vw 1vw; }
#home #modal-pop-up-reminder .modal-body div div { width: 100%; }
#home #modal-pop-up-reminder .modal-body div div a { bottom: 1vh; position: absolute; left: 8.5vw; right: 44vw; font-size: .8vw; color: #FE5301; }
#home #modal-pop-up-reminder-mobile { text-align: center; }
@media screen and (min-width: 768px) {
#home #modal-pop-up-reminder-mobile:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
#home #modal-pop-up-reminder-mobile .modal-dialog {display: inline-block;text-align: left;vertical-align: middle;width: 90%;}
#home #modal-pop-up-reminder-mobile .modal-content { border-radius: unset; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/public/img/modal/pap-mate/background.jpg); }
#home #modal-pop-up-reminder-mobile .modal-body { padding: 0; display: flex; }
#home #modal-pop-up-reminder-mobile .modal-body div {/* width: 25vw; */}
#home #modal-pop-up-reminder-mobile .modal-body div img {width: 60%;margin: 10px;}
#home #modal-pop-up-reminder-mobile .modal-body .cover-image {width: 100%;}
#home #modal-pop-up-reminder-mobile .modal-content #close {right: 10px;top: 10px;position: absolute;border-radius: 20px;border: 0 !important;width: 26px;height: 26px;color: #fff;background: #000;opacity: .7;padding: 0;font-size: 20px;}
#home #modal-pop-up-reminder-mobile .modal-content #close:focus { outline: unset; }
#home #modal-pop-up-reminder-mobile .modal-body div p {margin: 5px 20px;font-size: 18px;}
#home #modal-pop-up-reminder-mobile .modal-body div p span {display: block;font-size: 28px;font-weight: bolder;margin-bottom: .5vw;color: #FE5301;}
#home #modal-pop-up-reminder-mobile .modal-body div a.btn {width: 90%;margin: 0 auto;border: 0;border-radius: 0;background-color: #FE5301;color: #FFFFFF;font-weight: bold;font-size: 26px;padding: 5px;}
#home #modal-pop-up-reminder-mobile .modal-body div div { width: 100%; }
#home #modal-pop-up-reminder-mobile .modal-body div div a {/* position: absolute; *//* left: 8.5vw; *//* right: 44vw; */font-size: 12px;color: #FE5301;margin: 20px;}
#home #modal-pop-up-home { text-align: center; }
@media screen and (min-width: 768px) {
#home #modal-pop-up-home:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
#home #modal-pop-up-home .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; width: 60vw; }
#home #modal-pop-up-home .modal-content { border-radius: unset; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/public/img/modal/pap-mate/background.jpg); }
#home #modal-pop-up-home .modal-body { padding: 0; display: flex; }
#home #modal-pop-up-home .modal-body div { width: 25vw; }
#home #modal-pop-up-home .modal-body div img { width: 11vw; margin: 4vw 7vw; }
#home #modal-pop-up-home .modal-body .cover-image { width: 35vw; }
#home #modal-pop-up-home .modal-content #close { right: .3vw; top: .3vw; position: absolute; border-radius: 1vw !important; border: 0 !important; width: 1.3vw; height: 1.3vw; color: #fff; background: #000; opacity: .7; padding: 0; font-size: 1vw; }
#home #modal-pop-up-home .modal-content #close:focus { outline: unset; }
#home #modal-pop-up-home .modal-body div p { margin: 2vw 2.4vw; font-size: 1vw; }
#home #modal-pop-up-home .modal-body div p span { display: block; font-size: 2.2vw; font-weight: bolder; margin-bottom: .5vw; color: #FE5301; }
#home #modal-pop-up-home .modal-body div a.btn { width: 20vw; margin: 2.5vw; border: 0; border-radius: 0; background-color: #FE5301; color: #FFFFFF; font-weight: bold; font-size: 2.5vh; padding: .5vw 1vw; }
#home #modal-pop-up-home .modal-body div div { width: 100%; }
#home #modal-pop-up-home .modal-body div div a { bottom: 1vh; position: absolute; left: 8.5vw; right: 44vw; font-size: .8vw; color: #FE5301; }
#home #modal-pop-up-home-mobile { text-align: center; }
@media screen and (min-width: 768px) {
#home #modal-pop-up-home-mobile:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
#home #modal-pop-up-home-mobile .modal-dialog {display: inline-block;text-align: left;vertical-align: middle;width: 90%;}
#home #modal-pop-up-home-mobile .modal-content { border-radius: unset; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(/public/img/modal/pap-mate/background.jpg); }
#home #modal-pop-up-home-mobile .modal-body { padding: 0; display: flex; }
#home #modal-pop-up-home-mobile .modal-body div {/* width: 25vw; */}
#home #modal-pop-up-home-mobile .modal-body div img {width: 60%;margin: 10px;}
#home #modal-pop-up-home-mobile .modal-body .cover-image {width: 100%;}
#home #modal-pop-up-home-mobile .modal-content #close {right: 10px;top: 10px;position: absolute;border-radius: 20px;border: 0 !important;width: 26px;height: 26px;color: #fff;background: #000;opacity: .7;padding: 0;font-size: 20px;}
#home #modal-pop-up-home-mobile .modal-content #close:focus { outline: unset; }
#home #modal-pop-up-home-mobile .modal-body div p {margin: 5px 20px;font-size: 18px;}
#home #modal-pop-up-home-mobile .modal-body div p span {display: block;font-size: 28px;font-weight: bolder;margin-bottom: .5vw;color: #FE5301;}
#home #modal-pop-up-home-mobile .modal-body div a.btn {width: 90%;margin: 0 auto;border: 0;border-radius: 0;background-color: #FE5301;color: #FFFFFF;font-weight: bold;font-size: 26px;padding: 5px;margin-bottom: 20px;}
#home #modal-pop-up-home-mobile .modal-body div div { width: 100%; }
#home #modal-pop-up-home-mobile .modal-body div div a {/* position: absolute; *//* left: 8.5vw; *//* right: 44vw; */font-size: 12px;color: #FE5301;margin: 20px;}
#home #modal-prompt-transaction { text-align: center; overflow: hidden; font-family: 'Abel';padding-right: 0 !important; }
@media screen and (min-width: 768px) {
#home #modal-prompt-transaction:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
/*
@media all and (min-width: 400px) {
#home #slider li .block { height: 32vh; }
#home #slider ul { height: 32vh; }
#home #slider { height: 32vh; }
#home #slider .bx-wrapper { height: 32vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 550px) {
#home #slider li .block { height: 37vh; }
#home #slider ul { height: 37vh; }
#home #slider { height: 37vh; }
#home #slider .bx-wrapper { height: 37vh; }
#home #slider .bx-viewport { height: 100% !important;}
} */
@media all and (min-width: 650px) and (orientation: landscape) {
#home #slider li .block { height: 42vh; }
#home #slider ul { height: 42vh; }
#home #slider { height: 42vh; }
#home #slider .bx-wrapper { height: 42vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 768px) and (orientation: landscape) {
#home #modal-prompt-transaction .modal-dialog { width: 100% !important; margin: 0; }
#home #slider li .block { height: 52vh; }
#home #slider ul { height: 52vh; }
#home #slider { height: 52vh; }
#home #slider .bx-wrapper { height: 52vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 800px) and (orientation: landscape) {
#home #slider li .block { height: 57vh; }
#home #slider ul { height: 57vh; }
#home #slider { height: 57vh; }
#home #slider .bx-wrapper { height: 57vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 850px) and (orientation: landscape) {
#home #slider li .block { height: 62vh; }
#home #slider ul { height: 62vh; }
#home #slider { height: 62vh; }
#home #slider .bx-wrapper { height: 62vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 900px) and (orientation: landscape) {
#home #slider li .block { height: 67vh; }
#home #slider ul { height: 67vh; }
#home #slider { height: 67vh; }
#home #slider .bx-wrapper { height: 67vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 1024px) and (orientation: landscape) {
#home #slider li .block { height: 72vh; }
#home #slider ul { height: 72vh; }
#home #slider { height: 72vh; }
#home #slider .bx-wrapper { height: 72vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (max-width: 1200px) and (orientation: landscape) {
header img { display: none; }
}
@media all and (min-width: 1200px) and (orientation: landscape) {
#home #slider li .block { height: 82vh; }
#home #slider ul { height: 82vh; }
#home #slider { height: 82vh; }
#home #slider .bx-wrapper { height: 82vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 1300px) and (orientation: landscape) {
#home #slider li .block { height: 92vh; }
#home #slider ul { height: 92vh; }
#home #slider { height: 92vh; }
#home #slider .bx-wrapper { height: 92vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
@media all and (min-width: 1500px) and (orientation: landscape) {
#home #slider li .block { height: 97vh; }
#home #slider ul { height: 97vh; }
#home #slider { height: 97vh; }
#home #slider .bx-wrapper { height: 97vh; }
#home #slider .bx-viewport { height: 100% !important;}
}
#home #modal-prompt-transaction .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; width: 30%; }
#home #modal-prompt-transaction .modal-content { background: transparent; border: 0; box-shadow: unset; }
#home #modal-prompt-transaction .modal-body .content { border-radius: unset; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: transparent; border: 0;}
#home #modal-prompt-transaction .modal-body .content { text-align: center; width: 362px; }
#home #modal-prompt-transaction .modal-body { padding: 0; }
#home #modal-prompt-transaction .modal-body
.content.pd-side { padding: 0 20px; }
#home #modal-prompt-transaction .modal-body
.content #title { font-size: 44px; position: relative; color: #FFFFFF; }
#home #modal-prompt-transaction .modal-body
.content #message { color: #636363; font-size: 20px; }
#home #modal-prompt-transaction .modal-body
.btn-container { position: unset; bottom: unset; width: 362px; margin: 0 auto; background-color: #e5e7e7 !important; padding: 10px 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;}
#home #modal-prompt-transaction .modal-body
.btn-container .btn { border: 0; border-radius: 0; color: #FFFFFF; font-size: 22px; padding: 8px; width: 70%; margin: 0 15%; }
#home #modal-prompt-transaction .content-title { padding: 100px 50px 21px 50px !important;margin: 0 auto !important; }
#home #modal-prompt-transaction .content-message { padding: 30px 20px 10px !important; margin: 0 auto !important; background-color: #e5e7e7 !important; }
#home #modal-prompt-transaction .content-title.success { background-image: url(/public/img/modal/transaction_success/background.png) !important; }
#home #modal-prompt-transaction .content-title.failed { background-image: url(/public/img/modal/transaction_failed/background.png) !important; }
#home .bg-light-gray { background-color: #BFC8CF; }
#home .bg-light-gray-2 { background-color: #ECECEC; }
#home .bg-white { background-color: #FFFFFF; }
#home span.required { color: #FF0000; }
#home .text-black { color: #000; }
#home .text-danger { color: red; }
#home .text-success { color: green; }
#home .text-orange { color: #D84826; }
#home .text-orange-2 { color: #FE5301; }
#home .text-orange-force { color: #D84826 !important; }
#home .text-orange-2-force { color: #FE5301 !important; }
#home .text-center { text-align: center; }
#home .text-center-force { text-align: center !important; }
#home .text-left { text-align: left; }
#home .text-left-force { text-align: left !important; }
#home .text-right { text-align: right; }
#home .text-right-force { text-align: right !important; }
#home .text-justify { text-align: justify; }
#home .text-bold { font-weight: bold; }
#home .font-weight-unset { font-weight: unset !important; }
#home .pretty.p-default input:checked~.state label:after { background-color: #000000!important; }
#home .checkbox-link-inside .pretty { width: calc(1em + 5px) !important; height: calc(1em + 5px) !important; }
#home .checkbox-link-inside .label-with-link { position: relative; left: 30px; bottom: 18px; font-size: 14px; padding-right: 30px; height: auto; }
#home .d-none { display: none !important; }
#home small.smaller { font-size: small !important; }
#home i.required { font-size: small !important; color: red !important; font-weight: bolder; }
#home .field-required { border: 1px solid red !important; }
#home .text-underline { text-decoration: underline !important; }
#home .dblock { display: block !important; }
#home .text-light-gray-2 { color: #3f3f3f !important; }
#home .input-group input { border-right: 0; }
#home .input-group .input-group-addon { border-radius: 0; background: #ffff; }
#home .input-group.readonly .input-group-addon { background-color: #eee; }
#home .input-group .input-group-addon .fa { font-size: 24px; }
/**************************************************************************/
/** TEMPLATE 1 ******************************************************************/
#home #t1-first-content .fc-con { position: relative; height: 86vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
#home #t1-first-content .fc-con img { left: 0; top: 0; width: 100%; }
#home #t1-first-content .fc-text { z-index: 100; position: absolute; left: 125px; top: 150px; overflow-wrap: break-word; }
#home #t1-first-content .fc-text span { display: block; word-wrap: break-word; width: 70vh; }
#home #t1-first-content .fc-text #fc-text-1 { font-size: 26px; }
#home #t1-first-content .fc-text #fc-text-2 { font-size: 50px; color: #D84826; }
#home #t1-first-content .fc-text #fc-text-3 { font-size: 26px; }
#home #t1-first-content .fc-btn a { font-size: 20px; font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; margin: 10px 30px;}
#home #t1-second-content .sc-text { overflow-wrap: break-word; text-align: center; padding: 5vh; font-size: 36px; font-weight: bold;}
#home #t1-second-content .sc-text span { display: block; }
#home #t1-third-content { padding: 0 0 40px !important; }
#home #t1-third-content.no-pd-btm { padding: 0 !important; }
#home #t1-third-content .row { display: flex; justify-content: center; margin: 0 !important; }
#home #t1-third-content .panel { border-radius: 0; border: unset; }
#home #t1-third-content .panel-heading { background-color: #8A939A; color: #E9E9E9; border: 0; border-radius: unset; text-align: center; font-size: 18px; font-weight: bolder; padding: 14px; }
#home #t1-third-content .tc-con { padding: 0; }
#home #t1-third-content .tc-text { font-size: 14px; padding: 30px 18px 10px; height: 15.5vh; }
/*col-md-4*/
#home #t1-third-content .col-md-4 .panel { border-radius: 0; border: unset; }
#home #t1-third-content .col-md-4 .panel-heading { background-color: #8A939A; color: #E9E9E9; border: 0; border-radius: unset; text-align: center; font-size: 18px; font-weight: bolder; padding: 14px; }
#home #t1-third-content .col-md-4 .tc-con { padding: 0; }
#home #t1-third-content .col-md-4 .tc-text { font-size: 14px; padding: 30px 18px 10px; height: 15.5vh; }
#home #t1-third-content .col-md-4 .tc-btn { text-align: center; }
#home #t1-third-content .col-md-4 .tc-btn a { font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; margin: 10px 8px 26px; }
#home #t1-third-content .col-md-4 .tc-btn #btn-1 { background-color: #D84728; color: #E9E9E9; }
#home #t1-third-content .col-md-4 .tc-btn #btn-2 { background-color: #FFFFFF; color: #000000; }
#home #t1-third-content .col-md-4 .bg-gray { background-color: #8A939A; }
#home #t1-third-content .col-md-4 .bg-orange { background-color: #D84728; }
/*col-md-3*/
#home #t1-third-content .col-md-3 .panel { border-radius: 0; border: unset; }
#home #t1-third-content .col-md-3 .panel-heading { color: #E9E9E9; border: 0; border-radius: unset; text-align: center; font-size: 18px; font-weight: bolder; padding: 10px; }
#home #t1-third-content .col-md-3 .tc-con { padding: 0; }
#home #t1-third-content .col-md-3 .tc-text { font-size: 14px; padding: 30px 18px 10px; height: 15.5vh; }
#home #t1-third-content .col-md-3 .tc-text.height-1 { height: 140px; }
#home #t1-third-content .col-md-3 .tc-btn { text-align: center; }
#home #t1-third-content .col-md-3 .tc-btn a { font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; margin: 10px 0 26px; }
#home #t1-third-content .col-md-3 .tc-btn #btn-1 { background-color: #D84728; color: #E9E9E9; }
#home #t1-third-content .col-md-3 .tc-btn #btn-2 { background-color: #FFFFFF; color: #000000; }
#home #t1-third-content .col-md-3 .bg-gray { background-color: #8A939A; }
#home #t1-third-content .col-md-3 .bg-orange { background-color: #D84728; }
#home #t1-fourth-content { margin-bottom: 50px; margin-top: 0; }
#home #t1-fourth-content.no-mg-btm { margin-bottom: 0 !important; }
#home #t1-fourth-content .row { display: flex; justify-content: center; margin: 0 !important; }
#home #t1-fourth-content .panel { border-radius: 0; margin-bottom: 5px; }
#home #t1-fourth-content .panel-heading { background-color: #ECECEC; color: #000000 !important; border-radius: unset; border: 0; font-size: 18px; padding: 0; }
#home #t1-fourth-content .foc-text { padding: 24px; font-size: 15px !important; }
#home #t1-fourth-content .foc-text.pd-b-0 { padding-bottom: 0 !important; }
#home #t1-fourth-content .foc-text.pd-t-1 { padding-top: 10px !important; }
#home #t1-fourth-content .foc-text * { font-family: "EXO-REGULAR" !important; }
#home #t1-fourth-content .panel-heading a { color: #000000; text-decoration: none; display: block; padding: 14px 18px; }
#home #t1-fourth-content .accordion-toggle::after { font-family: FontAwesome; content: "\f107"; float: right; color: grey; }
#home #t1-fourth-content
.accordion-toggle[aria-expanded="true"]::after { content: "\f106"; }
@media (max-width: 767px) {
#home #t1-third-content .row { display: block !important; }
#home #t1-fourth-content .row { display: block !important; }
}
@media all and (max-width: 768px) {
#home #t1-first-content .fc-con {
position: relative;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
#home #t1-first-content .fc-text {
z-index: 100;
position: absolute;
left: 20px;
top: 30px;
overflow-wrap: break-word;
}
#home #t1-first-content .fc-text #fc-text-2{
width: min-content;
}
}
/**************************************************************************/
/** TEMPLATE 2 ******************************************************************/
#home #t2-first-content .fc-con { position: relative; height: 86vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
#home #t2-first-content .fc-con img { left: 0; top: 0; width: 100%; }
#home #t2-first-content .fc-text { z-index: 100; position: absolute; left: 125px; top: 150px; overflow-wrap: break-word; }
#home #t2-first-content .fc-text span { display: block; word-wrap: break-word; width: 65vh; }
#home #t2-first-content .fc-text #fc-text-1 { font-size: 26px; }
#home #t2-first-content .fc-text #fc-text-2 { font-size: 50px; color: #D84826; width: 90vh; }
#home #t2-first-content .fc-text #fc-text-3 { font-size: 26px; width: 90vh; }
#home #t2-second-content .row { display: flex; justify-content: center; margin: 0 !important; }
#home #t2-second-content .sc-text { overflow-wrap: break-word; text-align: center; padding: 5vh; font-size: 30px; font-weight: bold;}
#home #t2-second-content .sc-text.pd-btm-0 { padding-bottom: 0 !important; }
#home #t2-second-content .sc-text span { display: block; }
#home #t2-second-content .sc-text #sc-text-1.tx-large { font-size: 38px; }
#home #t2-second-content .sc-text #sc-text-2 { font-size: 20px; margin-top: 20px; }
#home #t2-second-content .sc-text #sc-text-2.tx-large { font-size: 24px; }
#home #t2-second-content .sc-text #sc-text-2 { font-size: 20px; margin-top: 20px; }
#home #t2-second-content .sc-text #sc-text-3 { font-size: 34px; }
#home #t2-second-content .sc-paragraph { overflow-wrap: break-word; padding: 5vh 15vh 10vh 15vh; font-size: 36px; font-weight: bold;}
#home #t2-second-content .sc-paragraph span { display: block; }
#home #t2-second-content .sc-paragraph #sc-text-2 { font-size: 20px; margin-top: 20px; }
#home #t2-second-content .sc-paragraph #sc-text-2
ol[type="A"] .ol-a-li { margin-top: 30px !important; }
#home #t2-third-content .row { display: flex; justify-content: center; margin: 0 !important; }
#home #t2-third-content .panel { border-radius: 0; margin-bottom: 10px; }
#home #t2-third-content .panel-heading { background-color: #8A939A; color: #E9E9E9; border-radius: unset; text-align: center; font-size: 24px; font-weight: bolder; padding: 10px; }
#home #t2-third-content .tc-con { padding: 0; }
#home #t2-third-content .tc-text { padding: 24px 100px; font-size: 15px !important; }
#home #t2-third-content .tc-text.tc-text-style-1 { padding: 24px 120px; font-size: 20px !important; }
#home #t2-third-content .tc-text .tc-text-1 { font-size: 22px !important; }
#home #t2-third-content .tc-text * { font-family: "EXO-REGULAR" !important; }
#home #t2-third-content .tc-text ul.ul-1 { list-style-type: none; margin-top: 30px; margin-bottom: 30px; }
#home #t2-third-content .tc-text ol.ol-1 { margin-top: 30px; margin-bottom: 30px; }
#home #t2-third-content .tc-text li ol { margin: 0 !important; }
#home #t2-third-content .tc-text ul.ul-1 .li-text { display: flex; }
/* if browser is microsoft edge */
@supports (-ms-ime-align:auto) {
#home #t2-third-content .tc-text ul.ul-1 .li-text {
display: unset;
}
}
#home #t2-third-content .tc-text
ul.ul-1 li.li-text::before { content: "•"; color: #000000; padding-right: 10px; }
#home #t2-third-content .tc-text li.li-text span { display: contents; }
#home #t2-third-content .table1 { margin: 0; }
#home #t2-third-content .table1 th { padding: 12px 20px; color: #D84826; font-weight: bolder; text-align: center; }
#home #t2-third-content .table1 td { padding: 12px 20px; font-size: 15px; vertical-align: middle; }
#home #t2-third-content .table1 tr td:last-child { text-align: right; }
#home #t2-third-content .table1 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-third-content .table1 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-third-content .table2 { margin: 0; }
#home #t2-third-content .table2 th { padding: 12px 20px; color: #D84826; font-weight: bolder; text-align: center; vertical-align: middle; }
#home #t2-third-content .table2 td { padding: 12px 20px; font-size: 15px; vertical-align: middle; }
#home #t2-third-content .table2 td:not(:first-child) { text-align: right; padding: 12px 75px}
#home #t2-third-content .table2.tx-cntr
td:not(:first-child) { text-align: center !important; }
#home #t2-third-content .table2.td-pd-1
td:not(:first-child) { padding: 16px 10px}
#home #t2-third-content .table2.td-pd-2
td:not(:first-child) { padding: 16px 40px}
#home #t2-third-content .table2.tr-bg-2 tr:first-child { background-color: #D84826 !important; }
#home #t2-third-content .table2.tr-bg-2 th { color: #FFFFFF; }
#home #t2-third-content .table2 .tr-pd-1 th,
#home #t2-third-content .table2 .tr-pd-1 td { padding: 20px !important; }
#home #t2-third-content .table2 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-third-content .table2 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-third-content .table3 { margin: 0; }
#home #t2-third-content .table3 th { padding: 12px 20px; color: #D84826; font-weight: bolder; text-align: center; vertical-align: middle; }
#home #t2-third-content .table3 td { padding: 12px 60px; font-size: 15px; vertical-align: middle; }
#home #t2-third-content .table3 td:not(:first-child) { text-align: right; padding: 12px 150px}
#home #t2-third-content .table3 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-third-content .table3 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-fourth-content { margin-top: 20px; }
#home #t2-fourth-content .row { display: flex; justify-content: center; margin: 0 !important; }
#home #t2-fourth-content .panel { border-radius: 0; margin-bottom: 5px; }
#home #t2-fourth-content .panel-heading { background-color: #ECECEC; color: #000000 !important; border-radius: unset; border: 0; font-size: 18px; padding: 0; }
#home #t2-fourth-content .foc-text { padding: 24px; font-size: 15px !important; }
#home #t2-fourth-content .foc-text * { font-family: "EXO-REGULAR" !important; }
#home #t2-fourth-content .foc-text ul.ul-1 { list-style-type: none; }
#home #t2-fourth-content .foc-text
ul.ul-1 li::before { content: "•"; color: #D84826; padding-right: 30px; }
#home #t2-fourth-content .foc-text
ul.ul-1 li.li-no-bullet::before { content: ""; padding-right: 35px; }
#home #t2-fourth-content .foc-text
ul.ul-1 li.li-text::before { content: "•"; color: #000000; padding-right: 30px; }
ul.ul-1 li.li-text.li-flex { display: flex; }
#home #t2-fourth-content .panel-heading a { color: #000000; text-decoration: none; display: block; padding: 14px 18px; }
#home #t2-fourth-content .accordion-toggle::after { font-family: FontAwesome; content: "\f107"; float: right; color: grey; }
#home #t2-fourth-content
.accordion-toggle[aria-expanded="true"]::after { content: "\f106"; }
#home #t2-fourth-content .table1 { margin-top: 20px; }
#home #t2-fourth-content .table1 th { padding: 12px 20px; color: #D84826; font-weight: bolder; }
#home #t2-fourth-content .table1 td { padding: 12px 20px; font-size: 15px; vertical-align: middle; }
#home #t2-fourth-content .table1 tr th:nth-child(2),
#home #t2-fourth-content .table1 tr td:nth-child(2) { text-align: center; }
#home #t2-fourth-content .table1 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-fourth-content .table1 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-fourth-content .table2.no-margin-btm { margin-bottom: 0; }
#home #t2-fourth-content .table2 th { padding: 12px 20px; color: #D84826; font-weight: bolder; text-align: center; vertical-align: middle; }
#home #t2-fourth-content .table2 td { padding: 12px 20px; font-size: 15px; vertical-align: middle; }
#home #t2-fourth-content .table2 td:not(:first-child) { text-align: right; padding: 12px 100px}
#home #t2-fourth-content .table2 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-fourth-content .table2 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-fourth-content .table3 { table-layout: fixed; }
#home #t2-fourth-content .table3.no-margin-btm { margin-bottom: 0; }
#home #t2-fourth-content .table3 th { padding: 12px 20px; color: #D84826; font-weight: bolder; text-align: center; vertical-align: middle; }
#home #t2-fourth-content .table3 td { padding: 12px 20px; font-size: 15px; vertical-align: middle; }
#home #t2-fourth-content .table3 th:first-child { text-align: left;}
#home #t2-fourth-content .table3 td:first-child { font-weight: bold;}
#home #t2-fourth-content .table3 td:not(:first-child) { text-align: center;}
#home #t2-fourth-content .table3 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-fourth-content .table3 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-fourth-content .table4 { table-layout: fixed; }
#home #t2-fourth-content .table4.no-margin-btm { margin-bottom: 0; }
#home #t2-fourth-content .table4 th { padding: 12px 20px; color: #FFFFFF; font-weight: bolder; text-align: center; vertical-align: bottom; }
#home #t2-fourth-content .table4 td { padding: 12px 20px; font-size: 15px; vertical-align: middle; }
#home #t2-fourth-content .table4 th:first-child { text-align: left; }
#home #t2-fourth-content .table4 td:first-child { font-weight: bold; }
#home #t2-fourth-content .table4 td:last-child { font-weight: bold; color: #D84826; }
#home #t2-fourth-content .table4 td:not(:first-child) { text-align: center;}
#home #t2-fourth-content .table4 tr:first-child { background-color: #D84826 !important; }
#home #t2-fourth-content .table4 tr:nth-of-type(odd) { background-color: #ECECEC; }
#home #t2-fourth-content .table4 tr:nth-of-type(even) { background-color: #E3E7EA; }
#home #t2-fourth-content .tc-btn { text-align: center; padding: 50px; }
#home #t2-fourth-content .tc-btn a { font-size: 20px; font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; }
/*CORPORATE GOVERNANCE*/
#home #t2-fourth-content.corporate-governance-content li{ box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke-color: transparent; }
#home #t2-fourth-content.corporate-governance-content li a{box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke-color: transparent; color: rgb(255, 80, 0); transition: color 200ms ease 0s, background-color 350ms ease 0s; outline: 0px !important;}
#home #t2-fourth-content.corporate-governance-content .main-paragraph{box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke: 1px rgba(0, 0, 0, 0); margin-right: 0px; margin-bottom: 10px; margin-left: 0px; font-size: 17px; padding-bottom: 20px; color: rgb(51, 51, 51);}
#home #t2-fourth-content.corporate-governance-content .main-ul{box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke: 1px rgba(0, 0, 0, 0); margin-bottom: 10px; padding-bottom: 20px; color: rgb(51, 51, 51); font-size: 17px;}
#home #t2-fourth-content.corporate-governance-content .li-text p{box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke-color: transparent; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; /*padding-bottom: 20px; */ padding-bottom: 0; display: inline-block;}
#home #t2-fourth-content.corporate-governance-content .li-text ul{box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke-color: transparent; padding-bottom: 20px;}
#home #t2-fourth-content .foc-text ul.ul-1 li::before {content: "•";color: #D84826;padding-right: 30px;}
#home #t2-fourth-content .foc-text ul.ul-1 li::before {content: "•";}
#home #t2-fourth-content .foc-text ul.ul-1 li.li-text::before {content: "•";}
@media (max-width: 767px) {
#home #t2-second-content .row { display: block !important; }
#home #t2-third-content .row { display: block !important; }
#home #t2-third-content .tc-text { padding: 16px !important; }
#home #t2-fourth-content .row { display: block !important; }
}
@media all and (max-width: 768px) {
#home #t2-first-content .fc-con {
position: relative;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
#home #t2-first-content .fc-text {
z-index: 100;
position: absolute;
left: 20px;
top: 30px;
overflow-wrap: break-word;
}
#home #t2-first-content .fc-text #fc-text-2{
width: min-content;
}
#home #t2-second-content .sc-paragraph {
padding: 15px 25px 20px 25px;
}
}
/**************************************************************************/
/** TEMPLATE 3 ******************************************************************/
/* FORMS */
#home #t3-first-content .fc-con { position: relative; height: 86vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
#home #t3-first-content .fc-con img { left: 0; top: 0; width: 100%; }
#home #t3-first-content .fc-text { z-index: 100; position: absolute; left: 125px; top: 150px; overflow-wrap: break-word; }
#home #t3-first-content .fc-text span { display: block; word-wrap: break-word; width: 90vh; }
#home #t3-first-content .fc-text #fc-text-1 { font-size: 26px; }
#home #t3-first-content .fc-text #fc-text-2 { font-size: 50px; color: #D84826; }
#home #t3-first-content .fc-text #fc-text-3 { font-size: 26px; }
#home #t3-first-content .fc-btn a { font-size: 20px; font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; margin: 10px 30px;}
#home #t3-second-content.pd-b-1 { padding-bottom: 50px; }
#home #t3-second-content .row { display: flex; justify-content: center; margin: 0 auto; width: 68vw; padding: 20px; }
#home #t3-second-content .col-xs-3 { text-align: center; padding: 0; }
#home #t3-second-content .sc-text span { display: block; word-wrap: break-word; color: #A9B0B7; }
#home #t3-second-content .sc-text #sc-text-1 { font-size: 46px; font-weight: bold; margin: 0 auto 10px; padding: 6px; width: 70px; height: 70px; border-radius: 50%; }
#home #t3-second-content .sc-text #sc-text-2 { font-size: 16px; }
#home #t3-second-content .sc-text.active #sc-text-1 { color: #FFFFFF; background-color: #D84826; }
#home #t3-second-content .sc-text.active #sc-text-2 { color: #D84826; }
#home #t3-third-content { padding: 20px; }
#home #t3-third-content.pd-b-1 { padding-bottom: 70px; }
#home #t3-third-content .row { display: flex; justify-content: center; margin: 0 auto; }
#home #t3-third-content .tc-text { text-align: center; }
#home #t3-third-content .tc-text span { display: block; word-wrap: break-word; }
#home #t3-third-content .tc-text #tc-text-1 { font-size: 26px; color: #000; font-weight: bold; }
#home #t3-third-content .tc-text #tc-text-1.mg-t-1 { margin-top: 30px; }
#home #t3-third-content .tc-text #tc-text-2 { font-size: 13px; color: #A9B0B7; }
#home #t3-third-content .tc-text #tc-text-2 a { color: unset; cursor: pointer; text-decoration: underline; }
#home #t3-third-content .tc-text #tc-text-3 { font-size: 38px; font-weight: bold; }
#home #t3-third-content .tc-text #tc-text-4 { font-size: 30px; margin-top: 20px; }
#home #t3-third-content .tc-text #tc-text-4.mg-t-0 { margin-top: 0; }
#home #t3-third-content .tc-text #tc-text-5 { font-size: 13px; margin-top: 70px; }
#home #t3-third-content .tc-text #tc-text-5 span { display: inline-flex; }
#home #t3-third-content .tc-text #tc-text-6 { font-size: 16px; margin-top: 50px; }
#home #t3-third-content .tc-text #tc-text-7 { font-size: 20px; }
#home #t3-fourth-content .row { display: flex; justify-content: center; margin: 0 auto; }
#home #t3-fourth-content .row.pd-t { padding-top: 70px; }
#home #t3-fourth-content .row.pd-t-2 { padding-top: 35px !important; }
#home #t3-fourth-content .row.pd-t-3 { padding-top: 20px !important; }
#home #t3-fourth-content .row.pd-b { padding-bottom: 70px; }
#home #t3-fourth-content .row.pd-b-2 { padding-bottom: 35px; }
#home #t3-fourth-content .panel { border-radius: 0; margin-bottom: 10px; }
#home #t3-fourth-content .panel.pd-t { padding-top: 35px; }
#home #t3-fourth-content .panel.pd-b { padding-bottom: 35px; }
#home #t3-fourth-content .foc-text { text-align: center; padding: 10px; color: #D84826; font-weight: bolder; }
#home #t3-fourth-content .panel #foc-text-title { margin: 0 auto; font-size: 18px; }
#home #t3-fourth-content .panel #foc-text-sub-title { font-size: 12px; color: #000000; font-weight: unset; }
#home #t3-fourth-content .form-group { margin-bottom: 0; }
#home #t3-fourth-content .form-control { border-radius: 0; box-shadow: unset; height: 44px; font-size: 16px; }
#home #t3-fourth-content .form-control.input-as-text { color: #D84826; border: 0; padding: 0; background: transparent; }
#home #t3-fourth-content .form-control.bd-black { border-color: #000000; }
#home #t3-fourth-content textarea.form-control { height: unset; }
#home #t3-fourth-content .form-check { height: 44px !important; }
#home #t3-fourth-content .form-check .pretty { margin-top: 10px }
#home #t3-fourth-content .panel .row { padding: 0 10px; display: block; }
#home #t3-fourth-content .panel .row.row-flex { display: flex; justify-content: center; margin: 0 auto; }
#home #t3-fourth-content .panel .row.row-flex-force { display: flex !important; justify-content: center; margin: 0 auto; }
#home #t3-fourth-content
.foc-text ~ .row div[class^="col-"] { padding: 0 5px; margin-bottom: 15px; }
#home #t3-fourth-content
.foc-text ~ .row div[class^="col-"] .form-group { height: 80px; }
#home #t3-fourth-content .foc-text ~ .row
div[class^="col-"] .form-group.no-height { height: unset; }
#home #t3-fourth-content .foc-text ~ .row
div[class^="col-"].no-margin-btm { margin-bottom: 0; }
#home #t3-fourth-content .foc-text-danger { font-size: 12px; color: red; font-weight: bolder; }
#home #t3-fourth-content #foc-text-warning { font-size: 12px; color: #D84826; }
#home #t3-fourth-content .foc-text-warning { font-size: 12px; color: #D84826; }
#home #t3-fourth-content .inline-input { display: inline-flex; }
#home #t3-fourth-content .inline-input input:first-child{ margin-right: 5px; }
#home #t3-fourth-content .foc-btn { padding-top: 10px; }
#home #t3-fourth-content .foc-btn #foc-btn-1 { background: #ffffff; border: 1px solid #ccc; width: 49%; color: #A9B0B7; border-radius: 10px; }
#home #t3-fourth-content .foc-btn #foc-btn-2 { background: #D84826; border: 1px solid #D84826; width: 49%; color: #FFFFFF; border-radius: 10px; }
#home #t3-fourth-content .foc-btn #foc-btn-3 { background: #D84826; border: 1px solid #D84826; color: #FFFFFF; border-radius: 10px; }
#home #t3-fourth-content .foc-btn .foc-btn-1 { background: #ffffff; border: 1px solid #ccc; width: 49%; color: #A9B0B7; border-radius: 10px; padding: 6px 12px !important; }
#home #t3-fourth-content .foc-btn .foc-btn-2 { background: #D84826; border: 1px solid #D84826; width: 49%; color: #FFFFFF; border-radius: 10px; padding: 6px 12px !important; }
#home #t3-fourth-content .foc-btn .foc-btn-3 { background: #D84826; border: 1px solid #D84826; color: #FFFFFF; border-radius: 10px; }
#home #t3-fourth-content .foc-btn-1 { background-color: #000000; color: #FFFFFF; }
#home #t3-fourth-content .foc-text-2 { font-size: 14px; padding: 0; }
#home #t3-fourth-content .foc-text-2.pd-b { padding-bottom: 20px; }
#home #t3-fourth-content .foc-text-2.pd-b-2 { padding-bottom: 40px; }
#home #t3-fourth-content .foc-text-2.pd-t { padding-top: 20px; }
#home #t3-fourth-content .foc-text-2 span { display: block; word-wrap: break-word; }
#home #t3-fourth-content .foc-text-2 #foc-text-2-1 { font-size: 26px; color: #000; font-weight: bold; }
#home #t3-fourth-content .foc-text-2 #foc-text-2-2 { font-size: 12px; padding: 0 2vw; }
#home #t3-fourth-content .foc-text-2 #foc-text-2-3 { font-size: 13px; padding: 0 2vw; }
#home #t3-fourth-content .foc-text-2 #foc-text-2-4 { font-size: 20px; font-weight: bold; padding: 0 2vw; }
#home #t3-fourth-content .foc-text-2 #foc-text-2-5 { font-size: 13px; padding: 0 .5vw; color: #000; }
#home #t3-fourth-content .foc-text-2 .pretty { font-size: 14px; margin-top: 20px; }
#home #t3-fourth-content .foc-text-2 .pretty { white-space: inherit; width: 100%; }
#home #t3-fourth-content .foc-text-2 .pretty .state label{ text-indent: 0; padding-left: 3rem; }
#home #t3-fourth-content .foc-text-2 .pretty .state label:after,
#home #t3-fourth-content .foc-text-2 .pretty .state label:before { top: 0 !important; }
#home #t3-fourth-content .foc-text-2.foc-text-has-radio
.pretty .state label:after,
#home #t3-fourth-content .foc-text-2.foc-text-has-radio
.pretty .state label:before { top: calc((0% - (100% - 1em)) - 35%)!important; }
#home #t3-fourth-content .pretty.chk-orange
input:checked~.state label:after { background-color: #D84826!important; }
#home #t3-fourth-content .foc-text-2 ul.ul-1 { list-style-type: none; margin-top: 10px; margin-bottom: 30px; }
#home #t3-fourth-content .foc-text-2 ul.ul-1 .li-text { display: flex; }
#home #t3-fourth-content .foc-text-2
ul.ul-1 li.li-text::before { content: "•"; color: #000000; padding-right: 30px; }
#home #t3-fourth-content .foc-btn-2 { text-align: center; padding: 20px 0 50px; }
#home #t3-fourth-content .foc-btn-2 button { width: 200px; padding: 10px 0; font-size: 20px; }
#home #t3-fourth-content .foc-btn-2 #foc-btn-2-1 { background: #ffffff; border: 1px solid #ccc; color: #A9B0B7; border-radius: 10px; }
#home #t3-fourth-content .foc-btn-2 #foc-btn-2-2 { background: #D84826; border: 1px solid #D84826; color: #FFFFFF; border-radius: 10px; }
#home #t3-fifth-content .row { display: flex; justify-content: center; margin: 0 auto; }
#home #t3-fifth-content .fic-text { overflow-wrap: break-word; padding: 5vh 2vh; font-size: 15px; text-align: justify; }
#home #t3-fifth-content .fic-text span { display: block; }
#home #t3-fifth-content .fic-btn { text-align: center; padding: 40px 0 50px; }
#home #t3-fifth-content .fic-btn button { width: 200px; padding: 10px 0; font-size: 20px; }
#home #t3-fifth-content .fic-btn #fic-btn-1 { background: #ffffff; border: 1px solid #ccc; color: #A9B0B7; border-radius: 10px; }
#home #t3-fifth-content .fic-btn #fic-btn-2 { background: #D84826; border: 1px solid #D84826; color: #FFFFFF; border-radius: 10px; }
#home #t3-modal-confirmation { text-align: center; }
@media screen and (min-width: 768px) {
#home #t3-modal-confirmation:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
#home #t3-modal-confirmation .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }
#home #t3-modal-confirmation .modal-body .md-text { text-align: center; padding: 20px 0; }
#home #t3-modal-confirmation .modal-body #md-text-title { font-size: 24px; font-weight: bold; color: #D84826; }
#home #t3-modal-confirmation .modal-body #md-text-body { font-size: 14px; font-weight: bold; }
#home #t3-modal-confirmation .modal-body .md-text-2 { padding: 20px; text-align: justify; }
#home #t3-modal-confirmation .modal-body #md-text-2-body{ font-size: 14px; font-weight: bold; }
#home #t3-modal-confirmation .md-btn { text-align: center; padding: 10px 0; }
#home #t3-modal-confirmation .md-btn button { width: 200px; padding: 10px 0; font-size: 20px; }
#home #t3-modal-confirmation .md-btn #md-btn-1 { background: #ffffff; border: 1px solid #ccc; color: #A9B0B7; border-radius: 10px; }
#home #t3-modal-confirmation .md-btn #md-btn-2 { background: #D84826; border: 1px solid #D84826; color: #FFFFFF; border-radius: 10px; }
#home .t3-modal-validation { text-align: center; }
@media screen and (min-width: 768px) {
#home .t3-modal-validation:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }
}
@media (max-width: 767px) {
#home .t3-modal-validation .modal-dialog { display: block !important; }
#home .t3-modal-validation .md-btn button { font-size: 13px !important; }
}
#home .t3-modal-validation .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }
#home .t3-modal-validation .modal-header { border: 0; }
#home .t3-modal-validation .modal-body .md-text { text-align: center; padding: 20px 0 10px; }
#home .t3-modal-validation .modal-body .md-text.pd-b-0 { padding: 0; }
#home .t3-modal-validation .modal-body .md-text.pd-b-1 { padding: 20px; }
#home .t3-modal-validation .modal-body .md-text.pd-b-2 { padding-bottom: 0; }
#home .t3-modal-validation .modal-body #md-text-title { font-size: 24px; font-weight: bold; color: #D84826; }
#home .t3-modal-validation .modal-body #md-text-body { font-size: 18px; font-weight: bold; }
#home .t3-modal-validation .modal-body .md-text-2 { padding: 10px; text-align: justify; }
#home .t3-modal-validation .modal-body .md-text-2.pd-b-1{ padding: 20px; }
#home .t3-modal-validation .modal-body #md-text-2-body { font-size: 14px; font-weight: bold; }
#home .t3-modal-validation .modal-body #md-text-2-body-2{ font-size: 16px; font-weight: bold; }
#home .t3-modal-validation .md-btn { text-align: center; padding: 10px 0; }
#home .t3-modal-validation .md-btn button { padding: 10px 0; font-size: 20px; }
#home .t3-modal-validation .md-btn #md-btn-1 { background: #ffffff; border: 1px solid #ccc; color: #A9B0B7; border-radius: 10px; }
#home .t3-modal-validation .md-btn #md-btn-1.mg-t-1 { margin-top: 5px; }
#home .t3-modal-validation .md-btn #md-btn-2 { background: #D84826; border: 1px solid #D84826; color: #FFFFFF; border-radius: 10px; }
#home .t3-modal-validation .form-control { border-radius: 0; box-shadow: unset; height: 44px; font-size: 16px; color: #555; }
#home .t3-modal-validation .form-control.input-as-text { color: #D84826; border: 0; padding: 0; background: transparent; }
#home .t3-modal-validation .form-control.bd-black { border-color: #000000; }
#home .t3-modal-validation textarea.form-control { height: unset; }
@media (max-width: 767px) {
#home #t3-second-content .row { display: block !important; width: 100%; }
#home #t3-second-content .row { display: block !important; }
#home #t3-third-content .row { display: block !important; }
#home #t3-fourth-content .row { display: block !important; }
#home #t3-fourth-content .row.d-none { display: none !important; }
#home #t3-fifth-content .row { display: block !important; }
#home #t3-fourth-content .foc-text ~ .row
div[class^="col-"].no-margin-btm { margin-bottom: 15px; }
#home #t3-third-content .tc-text span { padding: 0 !important; }
#home #t3-fourth-content .panel .pd-changed { padding: 0 !important; }
#home #t3-fourth-content .form-check { height: unset !important; }
}
@media all and (max-width: 768px) {
#home #t3-first-content .fc-con {
position: relative;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
#home #t3-first-content .fc-text {
z-index: 100;
position: absolute;
left: 20px;
top: 30px;
overflow-wrap: break-word;
font-size: smaller;
}
#home #t3-first-content .fc-text #fc-text-2{
width: unset;
font-size: 32px;
}
}
/**************************************************************************/
/** TEMPLATE 4 ******************************************************************/
/* NEWS TEMPLATE */
#home #t4-first-content .fc-con { position: relative; height: 86vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
#home #t4-first-content .fc-con img { left: 0; top: 0; width: 100%; }
#home #t4-first-content .fc-text { z-index: 100; position: absolute; left: 125px; top: 150px; overflow-wrap: break-word; }
#home #t4-first-content .fc-text span { display: block; word-wrap: break-word; width: 70vh; }
#home #t4-first-content .fc-text #fc-text-1 { font-size: 26px; }
#home #t4-first-content .fc-text #fc-text-2 { font-size: 50px; color: #D84826; }
#home #t4-first-content .fc-text #fc-text-3 { font-size: 26px; }
#home #t4-first-content .fc-btn a { font-size: 20px; font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; margin: 10px 30px;}
#home #t4-second-content { padding: 15vh 25vh 5vh !important; }
#home #t4-second-content .row { justify-content: center; margin: 0 !important; }
#home #t4-second-content .row div[class^="col-"] { padding-left: 10px; padding-right: 10px; }
#home #t4-second-content .panel { border-radius: 0; }
#home #t4-second-content .panel-heading { background-color: #8A939A; color: #E9E9E9; border: 0; border-radius: unset; text-align: center; font-size: 18px; font-weight: bolder; padding: 14px; }
#home #t4-second-content .sc-con { padding: 0; }
#home #t4-second-content .sc-con .sc-primary-image { height: 125px; }
#home #t4-second-content .sc-text { padding: 6px 10px; height: 20vh; background-color: #ECECEC; }
#home #t4-second-content .sc-text.sc-text-height-1 { height: 50px; }
#home #t4-second-content .sc-text span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
#home #t4-second-content .sc-text #sc-text-1 { font-size: 15px; font-weight: bold; color: #D84826; margin-bottom: 5px; -webkit-line-clamp: 3; }
#home #t4-second-content .sc-text #sc-text-2 { font-size: 9px; font-weight: bold; -webkit-line-clamp: 3; }
#home #t4-second-content .sc-btn { text-align: center; background-color: #ECECEC; font-size: 12px; }
#home #t4-second-content .sc-btn a { font-weight: bolder; border: 1px #dddddd solid; padding: 8px 16px; margin: 10px 0 20px; }
#home #t4-second-content .sc-btn #btn-1 { background-color: transparent; color: #000000; }
#home #t4-second-content .sc-btn #btn-2 { background-color: #D84826; color: #ffffff; }
#home #t4-third-content { padding: 10vh 40vh 5vh !important; }
#home #t4-third-content .tc-text { }
#home #t4-third-content .tc-text span { display: block; word-wrap: break-word; }
#home #t4-third-content .tc-text #tc-text-title { font-size: 30px; color: #D84826; padding-bottom: 30px; }
#home #t4-third-content .tc-text #tc-text-sub-title { font-size: 12px; margin-bottom: 10px; color: #868686; }
#home #t4-third-content .tc-text #tc-text-body { font-size: 18px; text-align: justify; }
#home #t4-third-content .tc-text #tc-text-body span { display: unset; word-wrap: unset; }
#home #t4-third-content .tc-text #tc-text-body-2 span { display: inline-flex; word-wrap: unset; }
#home #t4-third-content .tc-text #tc-text-body-3 span { display: unset; word-wrap: unset; }
#home #t4-fourth-content { padding: 0 40vh 2vh !important; }
#home #t4-fourth-content .fc-btn { text-align: center; font-size: 12px; }
#home #t4-fourth-content .fc-btn.pd-t { padding-top: 5vh; }
#home #t4-fourth-content .fc-btn a { font-weight: bolder; border: 1px #dddddd solid; padding: 6px 0; margin: 10px 3px 20px; background-color: transparent; color: #000000; width: 100px; }
@media (max-width: 767px) {
#home #t4-second-content .row { display: block !important; }
#home #t4-second-content { padding: 30px 10px !important; }
#home #t4-third-content { padding: 30px !important; }
#home #t4-fourth-content { padding: 10px !important; }
}
@media all and (max-width: 768px) {
#home #t4-first-content .fc-con {
position: relative;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
#home #t4-first-content .fc-text {
z-index: 100;
position: absolute;
left: 20px;
top: 30px;
overflow-wrap: break-word;
}
#home #t4-first-content .fc-text #fc-text-2{
width: min-content;
}
}
/**************************************************************************/
/** TEMPLATE 5 ******************************************************************/
#home #t5-first-content .fc-con { position: relative; height: 86vh; background-position: center; background-repeat: no-repeat; background-size: cover;}
#home #t5-first-content .fc-con img { left: 0; top: 0; width: 100%; }
#home #t5-first-content .fc-text { z-index: 100; position: absolute; left: 125px; top: 150px; overflow-wrap: break-word; }
#home #t5-first-content .fc-text span { display: block; word-wrap: break-word; width: 70vh; }
#home #t5-first-content .fc-text #fc-text-1 { font-size: 26px; }
#home #t5-first-content .fc-text #fc-text-2 { font-size: 50px; color: #D84826; }
#home #t5-first-content .fc-text #fc-text-3 { font-size: 26px; }
#home #t5-first-content .fc-btn a { font-size: 20px; font-weight: bolder; border: 1px #ECECEC solid; padding: 10px 16px; background-color: #D84728; color: #E9E9E9; margin: 10px 30px;}
#home #t5-second-content .sc-text { overflow-wrap: break-word; text-align: center; padding: 7vh 7vw 4vh; font-size: 30px;}
#home #t5-second-content .sc-text.pd-btm-0 { padding-bottom: 0 !important; }
#home #t5-second-content .sc-text span { display: block; }
#home #t5-third-content { padding: 0 7vw !important; }
#home #t5-third-content .row { justify-content: center; margin: 0 !important; padding-bottom: 10vh; }
#home #t5-third-content .row div[class^="col-"] { padding-left: 10px; padding-right: 10px; margin-top: 10px; height: 32vh; }
#home #t5-third-content .tc-text { padding: 6px 10px; }
#home #t5-third-content .tc-text span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
#home #t5-third-content .tc-text #tc-text-title { font-size: 20px; font-weight: bold; color: #D84826; margin-bottom: 20px; -webkit-line-clamp: 3; }
#home #t5-third-content .tc-text #tc-text-body { font-size: 14px; -webkit-line-clamp: 5; }
@media (max-width: 767px) {
#home #t5-third-content .row div[class^="col-"] { height: unset; }
}
@media all and (max-width: 768px) {
#home #t5-first-content .fc-con {
position: relative;
background-position: right;
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
}
#home #t5-first-content .fc-text {
z-index: 100;
position: absolute;
left: 20px;
top: 30px;
overflow-wrap: break-word;
}
#home #t5-first-content .fc-text #fc-text-2{
width: min-content;
font-size: 32px;
}
}
/**************************************************************************/
/** CHAT BOT ******************************************************************/
#chat-box-click {
display: none;
}
.chat-box-label {
position: fixed;
right: 22px;
bottom: 18px;
height: 55px;
width: 55px;
background: -webkit-linear-gradient(left, #D84728, #EF7C45);
text-align: center;
line-height: 55px;
border-radius: 50px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
.chat-box-label i {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
}
.chat-box-label i.fas {
position: absolute;
opacity: 0;
pointer-events: none;
}
.chat-box-label i.fco {
transform: scale(-1, 1);
}
#chat-box-click:checked~label i.fas {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) rotate(180deg);
}
#chat-box-click:checked~label i.fco {
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) rotate(180deg);
}
.chat-box-tooltip {
width: 129px;
margin: 50px auto;
background: -webkit-linear-gradient(left, #D84728, #EF7C45);
padding: 8px;
text-align: center;
color: #fff;
position: fixed;
right: 81px;
bottom: -18px;
z-index: 1;
border-radius: 32px;
letter-spacing: 1.5px;
font-size: 10px;
visibility: visible;
opacity: 1;
}
.chat-box-tooltip.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.chat-box-tooltip:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
bottom: 3px;
z-index: 1;
border-left: 10px solid #EF7C45;
border-right: 10px solid transparent;
border-top: 10px solid #EF7C45;
border-bottom: 10px solid transparent;
right: -13px;
top: 7px;
}
.chat-box-wrapper {
position: fixed;
right: 30px;
bottom: 0px;
max-width: 400px;
background: #fff;
border-radius: 15px;
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* height: 80%; */
width: 375px;
}
#chat-box-click:checked~.chat-box-wrapper {
opacity: 1;
bottom: 85px;
pointer-events: auto;
}
.chat-box-wrapper .head-text {
line-height: 55px;
color: #fff;
border-radius: 15px 15px 0 0;
padding: 0px 10px;
font-weight: 500;
font-size: 20px;
background: -webkit-linear-gradient(left, #D84728, #EF7C45);
letter-spacing: .5px;
}
.chat-box-wrapper .head-text img {
width: 40px;
border-radius: 20px;
margin-right: 5px;
}
.chat-box-wrapper .head-text-warning {
text-align: center;
color: #000!important;
background-color: #ff9800!important;
font-size: small;
letter-spacing: 3px;
padding: 5px 0;
}
.chat-box-wrapper .head-text-warning.hidden {
display: none;
}
.chat-box-wrapper .chat-box {
/* padding: 20px; */
width: 100%;
}
.chat-box .desc-text {
color: #515365;
text-align: center;
line-height: 25px;
font-size: 17px;
font-weight: 500;
}
.chat-box form {
padding: 10px 15px;
margin: 20px 0;
border-radius: 25px;
border: 1px solid lightgrey;
}
.chat-box form .field {
height: 50px;
width: 100%;
margin-top: 20px;
}
.chat-box form .field:last-child {
margin-bottom: 15px;
}
.chat-box form .field input,
.chat-box form .field button,
.chat-box form .textarea textarea {
width: 100%;
height: 100%;
padding-left: 20px;
border: 1px solid lightgrey;
outline: none;
border-radius: 25px;
font-size: 16px;
transition: all 0.3s ease;
}
.chat-box form .field input:focus,
.chat-box form .textarea textarea:focus {
border-color: #fc83bb;
}
.chat-box form .field input::placeholder,
.chat-box form .textarea textarea::placeholder {
color: silver;
transition: all 0.3s ease;
}
.chat-box form .field input:focus::placeholder,
.chat-box form .textarea textarea:focus::placeholder {
color: lightgrey;
}
.chat-box form .textarea {
height: 70px;
width: 100%;
}
.chat-box form .textarea textarea {
height: 100%;
border-radius: 50px;
resize: none;
padding: 15px 20px;
font-size: 16px;
}
.chat-box form .field button {
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 18px;
font-weight: 500;
background: -webkit-linear-gradient(left, #D84728, #EF7C45);
transition: all 0.3s ease;
}
.chat-box form .field button:active {
transform: scale(0.97);
}
.chat-box-label .icon-badge{
width: 18px;
height: 18px;
padding: 4px;
background: #f90000;
line-height: normal;
border-radius: 9px;
position: fixed;
bottom: 64px;
right: 24px;
font-size: 18px !important;
}
/*MESSAGE BOX*/
.chat-box .center {
position: absolute;
top: 50%;
left: calc(50% + 12rem);
transform: translate(-50%, -50%);
}
.pic {
width: 4rem;
height: 4rem;
background-size: cover;
background-position: center;
border-radius: 50%;
}
.chat-box .chat {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 450px;
z-index: 2;
box-sizing: border-box;
border-radius: 1rem;
background: white;
box-shadow: 0 0 8rem 0 rgba(0, 0, 0, 0.1), 0rem 2rem 4rem -3rem rgba(0, 0, 0, 0.5);
}
.chat-box .chat.have-warning{
height: 400px;
}
.chat-box .chat .contact.bar {
flex-basis: 3.5rem;
flex-shrink: 0;
margin: 1rem;
box-sizing: border-box;
}
.chat-box .chat .messages {
padding: 1rem;
background: #F7F7F7;
flex-shrink: 2;
overflow-y: auto;
box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.05), inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.05);
height: 100%;
overflow-x: hidden;
border-radius: 0 0 15px 15px;
}
.chat-box .chat .messages .time {
font-size: 10px;
background: #EEE;
padding: 0.25rem 1rem;
border-radius: 2rem;
color: #999;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
.chat-box .chat .messages .message {
box-sizing: border-box;
padding: 0.5rem 1rem;
margin: 1rem;
background: #FFF;
border-radius: 1.125rem 1.125rem 1.125rem 0;
min-height: 2.25rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
max-width: 66%;
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.chat-box .chat .messages .message.customer {
margin: 1rem 1rem 1rem auto;
border-radius: 1.125rem 1.125rem 0 1.125rem;
background: -webkit-linear-gradient(left, #D84728, #EF7C45);
color: white;
}
.chat-box .chat .messages .message.menu {
margin: 1rem auto 1rem auto;
border-radius: 1.125rem;
background: transparent;
border: 1px solid #D84728;
color: #EC330B;
cursor: pointer;
width: 100%;
text-align: center;
}
.chat-box .chat .messages .message .typing {
display: inline-block;
width: 0.8rem;
height: 0.8rem;
margin-right: 0rem;
box-sizing: border-box;
background: #ccc;
border-radius: 50%;
}
.chat-box .chat .messages .message .typing.typing-1 {
-webkit-animation: typing 3s infinite;
animation: typing 3s infinite;
}
.chat-box .chat .messages .message .typing.typing-2 {
-webkit-animation: typing 3s 250ms infinite;
animation: typing 3s 250ms infinite;
}
.chat-box .chat .messages .message .typing.typing-3 {
-webkit-animation: typing 3s 500ms infinite;
animation: typing 3s 500ms infinite;
}
.chat-box .chat .input {
box-sizing: border-box;
flex-basis: 5rem;
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 0.5rem 0 1.5rem;
}
.chat-box .chat .input i {
font-size: 18px;
margin-right: 1rem;
color: #D84728;
cursor: pointer;
transition: color 200ms;
}
.chat-box .chat .input i:hover {
color: #333;
}
.chat-box .chat .input input {
border: none;
background-image: none;
background-color: white;
padding: 0.5rem 1rem;
margin-right: 1rem;
border-radius: 1.125rem;
flex-grow: 2;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
font-weight: 400;
letter-spacing: 0.025em;
height: 40px;
}
.chat-box .chat .input input:readonly {
background: #ecede3;
cursor: not-allowed;
}
.chat-box .chat .input > input:readonly{
display: none !important;
}
.chat-box .chat .input input:placeholder {
color: #999;
}
.chat-box .chat .messages .message br {
content: " ";
}
@-webkit-keyframes typing {
0%, 75%, 100% {
transform: translate(0, 0.25rem) scale(0.9);
opacity: 0.5;
}
25% {
transform: translate(0, -0.25rem) scale(1);
opacity: 1;
}
}
@keyframes typing {
0%, 75%, 100% {
transform: translate(0, 0.25rem) scale(0.9);
opacity: 0.5;
}
25% {
transform: translate(0, -0.25rem) scale(1);
opacity: 1;
}
}
@media all and (max-width: 768px) {
.chat-box-wrapper{
z-index: 99999;
}
#chat-box-click:checked~.chat-box-wrapper{
right: 0;
width: 98%;
max-width: 100%;
right: 1%;
left: 1%;
}
}