@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

html, body {font-family: "Nunito Sans", sans-serif; height: 100%; font-weight: 300; color: #222;}
body {overflow-x: hidden;}
section h1 {font-weight: 700; font-size: 32px}
section h5 {font-weight: 500;}
section p {color: #333; line-height: 1.75em;}
.table-striped tbody tr:nth-of-type(odd) {background-color: rgba(0, 0, 0, 0.025);}
.table td, .table th {border-top: none;}
.btn.btn-maroon {font-weight: 300; border: 1px solid #555; border-radius: 40px; padding: .65em 5em;}
.btn.btn-maroon:hover {border-color: #ce1b49; background: #ce1b49; color: #fff}
div.red-divider {width:30px; border-top:4px solid #ce1b49;}
a[href^=tel] {text-decoration:inherit;color: inherit;}
video {outline: 2px solid white; outline-offset: -2px;}
figcaption {color: #ccc; font-size: 10px;}
figcaption a {color: #ccc;}

.fbplugin {position: fixed; right:-340px; top:210px; z-index: 999; height: 500px; width: 30px; transition: all ease-in-out .5s; 
	width: 370px;}
.fbplugin img {float: left; cursor: pointer; opacity: .25; transition: 0.2s all ease-in-out;}
.fbplugin:hover img {opacity: 0}
#fbplugin {height: 500px; width: 340px; border-radius: 10px; transition: width .5s;}
.fbplugin:hover {right: 0;}

nav.navbar {position: relative; background-color: transparent; transition: all .5s ease-in-out; padding: 1rem; z-index: 2;}
nav.navbar:hover {opacity: 1}
.navbar-brand img {width: 150px}
.nav-item {padding: 0.25rem 0}
.nav-item:last-of-type {padding-right:0}
.nav-item .nav-link {border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-block; transition: .2s;}
.nav-item .nav-link:hover {border-bottom: 2px solid #ce1b49; transition: 0.2s all ease-in-out}
.navbar-light .navbar-nav .nav-link {color: #555;}
.navbar-light .navbar-nav .nav-link:hover {color: #ce1b49;}
.nav-item .nav-link:hover:after, .nav-item.active .nav-link:after {opacity: 1}
.nav-item .nav-link.lang {padding-right: 0}
.nav-item .nav-link.lang:hover:after {display: none}
.nav-item .nav-link.facebook {width: 40px; height: 40px; background-image: url(../img/fb0.png); 
	background-repeat: no-repeat; background-size: contain; image-rendering: smooth;}
.nav-item .nav-link.facebook:hover {background-image: url(../img/fb1.png); border-bottom-color: transparent;}
.nav-item .nav-link.facebook:hover:after {display: none}

.carousel-item {height: 100vh; max-height: 800px;}
.carousel-item.narrow {height: 400px;}
.carousel-item > img {position: absolute; top:50%; transform: translateY(-50%); filter: brightness(0.9);}
.carousel-item.narrow > img {position: absolute;}
.carousel-caption {width: 500px; height: 280px; position: absolute; padding-top: 
	45px; top:30%; right: calc((100vw - 1120px) / 2); left: unset; border-radius: 10px; 
	transition: .5s;}

@media only screen and (max-width: 1200px) {
	.carousel-caption {right: calc((100vw - 940px) / 2);}
}

.carousel-caption h1 {font-size: 60px; font-weight: 700; text-align: left; text-shadow: 0 0 20px rgba(0,0,0,.4); margin-bottom: 25px}
.carousel-caption img {width: 25px; margin-bottom: 10px}
.carousel-caption p {color: #333;}
.carousel-caption .btn.btn-maroon {border-color: #ce1b49; background: #ce1b49; color: #fff;}
.carousel-caption .btn.btn-maroon:hover {background: #db1d4e;}

.carousel-indicators {margin-bottom: 2rem;}
.carousel-indicators li {opacity: 0.2;}

section.display {padding: 6rem 0;}
section.display .card {border: none; box-shadow: 0 0 10px rgba(0,0,0,.1); transition: .5s; border-radius: 10px;}
section.display .card:hover {box-shadow: 0 0 10px rgba(0,0,0,.2);}
section.display .card.product-page {cursor: unset;}
section.display .card-body {padding: 1.5rem 1.5rem;}
section.display .card-body img {width: 70%; margin-bottom: 1rem;}
section.display .card-body h3 {font-weight: 700; margin: .4rem 0 .25rem;}
section.display .card-body p {font-weight: 300; padding: 0 3rem; text-align: justify;}
section.display img.int {width: 70%;}
section.display table.features td {padding: .5rem 1rem; font-size: 14px; font-weight: 400; text-align: left}
section.display table.features td:last-of-type {color: #555;}
section.display .vid01 {width: 100%; min-height: 300px; border-radius: 10px;}

section.display .benefit {background: #E2D3D7; border-top-right-radius: 5px; border-top-left-radius: 5px;}
section.display .benefit img {width: 35%}
section.display .benefit h5 {font-size: 18px; font-weight: 400; line-height: 1.5; margin: .5em 0 0;}
section.display .benefit-btm {background-image: url(../img/benefit-bg.png); background-size: cover; 
	background-repeat: no-repeat;  background-position: 0 100%; padding: .4em 0 .6em; 
	border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
section.display .benefit-btm h3 {color: #fff; margin: 0; text-align: center; font-size: 20px}
section.display .benefit-btm p {color: #fff; text-align: center; line-height: 1; margin: 0; font-size: 14px}

section.elements .icons {padding: 0 1rem;}
section.elements .icons img {display:block; width: 40%; margin: 0 auto}
section.elements .icons p {display:inline; background-color: #ce1b49; color: #fff; padding: .2em .7em .3em; 
	line-height: 4em; border-radius: 10px; font-weight: 100; letter-spacing: .1em; font-size: 14px}
section.elements .icons h6 {font-weight: 300; line-height: 1.5; color: #333; margin: 0.5rem 0 1rem; 
	font-size: 14px;}

section div.aboutus img {width: 35%}
section div.aboutus h1 {color: #ce1b49; font-size: 60px}
section div.aboutus h1 span.unit {font-size: 20px}
section div.aboutus h1 span.square {display: inline-block; position: absolute; margin-top: 7px; font-size: 20px}
section div.aboutus h2 {color: #ce1b49; font-size: 20px}

section.contact .contactform .form-control {margin-bottom: .5em}
section.contact div#map {width: 100%; height: 100%; border-radius: 10px}

footer {background-color: #ce1b49; flex-shrink: 0;}
footer img {width: 240px}
footer p {color: #fff; font-weight: 100; font-size: 14px; margin: 0; line-height: 1.75;}

div#totop {position: fixed; bottom:30px; right: 40px; background: #1b1464; width: 50px; height: 50px;
border-radius: 25px; cursor: pointer; text-align: center; line-height: 1em; font-size:12px; padding-top: 11px; 
display: none; color: #fff;}