﻿:root {
    --color1: #d36600;
    --color2: #037b45;
    --color3: #3d3023;
    --border-color: #ececec;
    --btnColor1: #0064d6;
    --btnColor2: #ffc107;
}
html{width:100%; overflow-x:hidden; }
body { font-size: 20px; color:var(--color3); font-family: "Momo Trust Sans", sans-serif;  font-weight: 400; font-size: 16px;width:100%; float:left; overflow-x:hidden;position:relative;  }
.bg{height:100%; position:fixed; z-index:1; background:url(../images/bg-section.jpg) no-repeat center bottom; background-size: 100% auto; right:0; bottom:0; opacity:1 }
header{position:fixed; z-index:10; top:0; left:0; width:100%; text-align:left; transition:.3s;}
header .inner{width:100%; float:left; position:relative; padding: 15px 0; border-bottom:1px solid rgba(0,0,0,.07); }
header .col-12{padding-left:350px}
header .logo{position:absolute; top:20px; left:65px;}
header .logo img{width:100px;}
header .contact{display:inline-block; }
header .contact a{color:#000; text-decoration:none; margin-right:20px; transition:.3s; line-height:38px; font-size:15px;}
header .contact a i{font-size:16px; margin-right:10px; color:var(--color1)}
header .contact a:hover{color:var(--color1); font-weight:500}
header .wrap-buy{display:block; float:right; position:relative; transition:.3s;}
header .wrap-buy a{color:var(--color1); text-decoration:none; line-height:36px; border-radius:18px; border:1px solid var(--color1); text-align:center; display:inline-block; width:150px; margin: 0px 0 0 20px; font-size:15px; font-weight:500; float:left;}
header .wrap-buy a:last-child{background:var(--color1); color:#fff; margin-right:0;}
header ul.social{margin:0; padding:0; list-style:none; float:right; display:flex; position:absolute; top:17px; right:0; transition:.3s; opacity:0; visibility:hidden}
header ul.social:before{content:'Kết nối qua'; line-height:34px; padding-right:5px; opacity:.9; font-size:14px; color:#fff;}
header ul.social li{margin-left:10px;}
header ul.social li a{text-decoration:none; width:34px; height:34px; text-align:center; color:#fff; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:.3s; border-radius:5px;}
header ul.social li a:hover{color:#fff; background:var(--color1)}
header.is-hide{opacity:0; visibility:hidden}

.fp-viewing-home header .inner{background:none; border:none;}
.fp-viewing-home header .contact a{color:#fff;}
.fp-viewing-home header .contact a i{color:#fff; opacity:.75}
.fp-viewing-home header .wrap-buy{opacity:0; visibility:hidden}
.fp-viewing-home header ul.social{opacity:1; visibility:initial;}

footer{position:fixed; bottom:0px; left:0;  z-index:10; width:100%; float:left; height:0; }
footer .copy{font-size:13px; position:relative; bottom:100%; margin-bottom:10px; float:right; color:#fff; }


.paneLeft{width:100%; height:0; position:fixed; top:0; left:0; z-index:8; padding: 0 30px 0 0px; background:#fff; }
.paneLeft>.container>.row>.col-12{position:relative; height:0;}
.paneLeft .inner{width:200px; position:relative; background:#fff; margin-left:-5px; display:flex; align-items:center; padding-bottom:40px;}
.paneLeft .inner .box-bottom{position:absolute; bottom:20px; left:0; left:0; }
.paneLeft .inner .box-bottom img{ width:170px;}
.paneLeft .inner .box-bottom span{color:#000; font-size:13px; font-style:italic; position:absolute; bottom:30px; left:100%; width:123px; background:#fff; border:1px solid rgba(0,0,0,.1); padding: 10px; border-radius:10px; color:#000; font-weight:500; }
.paneLeft .inner .box-bottom span:before{content:''; width:14px; height:14px; background:#fff; border:1px solid rgba(0,0,0,.1); display:block; transform:rotate(-45deg); position:absolute; left:-7px; top:10px; border-right:none; border-bottom:none; }
.paneLeft .lineRight{position:absolute; top:0; left:100%; height:100%; margin-left:-10px;}
@media (min-width:992px) and (max-width:1439px){
    .paneLeft{padding-left:15px;}
}


#fullpage{z-index:3;}

#menu {position: relative;width: 100%;padding: 0; margin: 0; list-style:none; z-index:3;}
#menu li.logo{margin-bottom:20px;}
#menu li.logo img{width:calc(100% + 0px);}
#menu li.logo:before{display:none;}
#menu li { width:100%; float:left; position:relative; padding-bottom:1px;}
#menu li:before{content:''; width:100%; height:1px; background-image: linear-gradient(to right, #000000 , #ffffff); opacity:.2; display:block; position:absolute; left:0; bottom:0;}
#menu li:last-child:before{display:none;}
#menu li a {text-decoration: none;color: #000; display:block; line-height:42px; font-size:16px; white-space:nowrap; transition:.3s;}
#menu li a:before{content:''; width:10px; height:8px; background:var(--color1); position:absolute; top:50%; left:-10px; margin-top:-4px; border-radius:2px 4px 4px 2px; opacity:0; transition:.3s;}
#menu li.active a{color:var(--color1); font-weight:700; padding-left:20px; letter-spacing:1px; }
#menu li.active a:before{left:0; opacity:1;}

@media (min-width: 1440px) {
    .container{max-width:1400px}
    .fp-overflow{overflow-x:hidden}
    .fp-overflow .container{padding-left:350px;}
}
@media (min-width:1200px) and (max-width:1439px){
    .container{max-width:100%}
    .fp-overflow .container{padding-left:350px; padding-right:60px; }
}

@media (min-width:991px) and (max-width:1199px){
    .container{max-width:100%}
    .fp-overflow .container{padding-left:350px; padding-right:60px; }
}



/* Home */

.bgVideo{position:absolute; height:100%; width:100%; top:0; right:0; }
.bgVideo:before{content:''; width:100%; height:100%; background: rgba(0,0,0,.5) url(bg-over-07.png) repeat center; position:absolute; top:0; left:0; z-index:2; opacity:.7}
.bgVideo video{position:relative; height:100%; width:100%; top:0; left:0; object-fit: cover; -o-object-fit: cover; z-index:1;}
.bgVideo .control{position:absolute; bottom:20px; right:0px; z-index:3; padding:7px 10px 7px 7px; background:#fff; border-radius:10px 0 0 10px}
.bgVideo .control a{font-size:20px; text-decoration:none; color:#000; opacity:.7; width:24px; height:24px; display:flex; align-items:center; justify-content:center; float:left; margin: 0 5px; transition:.3s;}
.bgVideo .control a:hover{opacity:1; color:var(--color1)}
.bgVideo .control a.isPause:before{content: "\f28b";}
.bgVideo .control a.isUnMute:before{content: "\f028";}

.s-home{}
.s-home .container{z-index:2; position:relative;}
.s-home .fp-overflow{text-align:left; color:#fff;}
.s-home .caption{display:inline-block; position:relative; overflow:hidden; margin-left:60px;}
.s-home h4{font-size:20px; padding-bottom:15px; opacity:.95; font-weight:400;}
.s-home .name{position:relative;}
.s-home h2{color:#fff; text-transform:uppercase; font-weight:700; font-size:75px; letter-spacing:2px;}
.s-home label{ margin:-10px 0 0 0; position:absolute; line-height:37px; height:36px; padding: 0 0; border:0px solid rgba(255,255,255,0); border-radius:0 18px 18px 18px; font-weight:600; font-size:15px; background:var(--color2); color:#fff; width:110px; text-align:center; float:left; text-transform:uppercase; right:5px; top:100%; letter-spacing:1px; }
.s-home label:before{width:800px; height:2px; background:#fff; content:''; position:absolute; top:0; right:100%; margin-right:2px; opacity:.5}
.s-home h3{text-align:left; width:100%; float:left; font-size:28px; margin-top:10px;}
.s-home .wrap-btn{}
.s-home .wrap-btn a{color:#fff; text-decoration:none; line-height:50px; border-radius:28px; border:1px solid var(--color1); text-align:center; display:inline-block; width:200px; margin: 30px 30px 0 0; font-size:17px; font-weight:500; background:rgba(0,0,0,.3); float:left;}
.s-home .wrap-btn a:last-child{background:var(--color1); color:#fff; margin-right:0;}
.s-home .mouse-wheel{border:1px solid rgba(255,255,255,.5); border-radius: 32px; height: 43px; width: 25px; margin-left:-12px; position:absolute; left:50%; bottom:25px; z-index:5; background:rgba(0,0,0,.2)}
.s-home .mouse-wheel:before{content:'';background-color: #fff; position: relative; height: 5px; width: 5px; margin: 0 auto;  animation: wheel_animation 1.5s linear infinite;  display:block; border-radius:50%;}
@keyframes wheel_animation {0%{opacity: 0;top: 2px;}50% {opacity: 1;top: 50%;}100% {opacity: 0;top: 33px;}}

/* about */
.s-about{}
.s-about .caption{width:100%; position:relative; display:table;height:500px; padding: 15px 0; }
.s-about .caption .col-left{position:relative; display:table-cell; width:360px; vertical-align:top; padding-right:50px;}
.s-about .caption .col-center{position:relative; display:table-cell; vertical-align:text-top; padding-right:50px;}
.s-about .caption .col-center h4{color:var(--color1); font-weight:700; width:100%; float:left; position:relative; margin: 0 0 15px 0; padding:0; font-size:25px;}
.s-about .caption .col-center .detail{margin:0; padding:0; text-align:justify; font-size:16px; width:100%; float:left;}
.s-about .caption .col-center .detail b{width:100%; float:left; margin-top:20px; display:block; font-weight:700}
.s-about .caption .col-center .detail ul{margin:0; padding:5px 0 0 0; list-style:none; width:100%; float:left;}
.s-about .caption .col-center .detail ul li{width:100%; float:left; position:relative; margin-top:5px; padding-left:25px;}
.s-about .caption .col-center .detail ul li:before{font-family: "Font Awesome 5";  font-weight: 400; content: "\f00c"; position:absolute; left:0; top:0; color:var(--color2); font-size:16px;}
.s-about .caption .col-right{position:relative; display:table-cell; vertical-align:top; width:120px; overflow:hidden}
.s-about .caption .col-right ul{margin:0; padding:0; list-style:none; width:100%; height:calc(100% + 20px); margin-top:-20px}
.s-about .caption .col-right ul li{width:100%; height:calc(33.3333333% - 20px); margin-top:20px;border-radius:15px; text-align:center; padding-top:20px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)}
.s-about .caption .col-right ul li img{width:60px; display:block; margin: 0 auto}
.s-about .caption .col-right ul li span{display:block; width:100%; float:left; padding: 10px 13px 0 13px; text-align:center; font-size:15px; font-weight:500}
.s-about .banner{width:calc(100% + 190px); float:left; margin-left:-190px; height:100%; border-radius:0 20px 20px 0; position:relative; background:url(../images/gioi-thieu-tra-binh-minh-h.jpg) no-repeat center bottom ; background-size:cover}

@media (min-width:768px) and (max-width:1199px){
    
}


/* Thành phần */
.s-ingredient{}
.s-ingredient .caption{width:100%; position:relative; padding: 15px 0; }
.s-ingredient .caption h3{font-size:25px; font-weight:700; color:var(--color1); margin: 0 0 15px 0}
.s-ingredient .caption p{width:100%; margin:0; padding:0; font-size:16px; font-weight:600}
.s-ingredient .caption ul{margin:30px 0 0 -10px; padding:0; list-style:none; width:calc(100% + 20px); float:left; overflow:hidden}
.s-ingredient .caption ul li{width:calc(20% - 20px); margin: 0 10px; float:left; position:relative;}
.s-ingredient .caption ul li .wrap-img{width:100%; height:160px; display:block; overflow:hidden; border-radius:12px; }
.s-ingredient .caption ul li .wrap-img img{object-fit:cover; width:inherit; height:inherit}
.s-ingredient .caption ul li .info{width:100%; float:left; position:relative; margin-top:15px;}
.s-ingredient .caption ul li .info h4{color:var(--color2); font-size:17px; font-weight:600; line-height:24px;}
.s-ingredient .caption ul li .info span{width:100%; float:left;}
.s-ingredient .caption ul li a{position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; display:block;}

/* Hương vị */
.s-flavor{}
.s-flavor .caption{width:100%; position:relative; display:table;padding: 15px 0; }
.s-flavor .caption .col-left{position:relative; display:table-cell; width:550px; vertical-align:top; height:500px; padding-right:50px;}
.s-flavor .caption .col-left .wrap-img{width:calc(100% + 190px); float:right; height:100%; position:absolute;overflow:hidden; left:-190px; border-radius:0 20px 20px 0}
.s-flavor .caption .col-left .wrap-img img{object-fit:cover; width:100%; height:100%; object-position: 100% 100%;}
.s-flavor .caption .col-right{position:relative; display:table-cell; vertical-align:text-top; vertical-align:middle; }
.s-flavor .caption .col-right .inner{background:#fff; width:calc(100% + 50px); float:left; padding:50px; border:2px solid #fff; border-radius:30px; margin-left:-50px; box-shadow: 0 5px 20px rgba(0,0,0,0)}
.s-flavor .caption .col-right h4{color:var(--color1); font-weight:700; width:100%; float:left; position:relative; margin: 0 0 15px 0; padding:0; font-size:25px;}
.s-flavor .caption .col-right .detail{margin:0; padding:0; text-align:justify; font-size:16px; width:100%; float:left;}
.s-flavor .caption .col-right .detail b{width:100%; float:left; display:block; font-weight:700}
.s-flavor .caption .col-right .detail ul{margin:0; padding:5px 0 0 0; list-style:none; width:100%; float:left;}
.s-flavor .caption .col-right .detail ul li{width:100%; float:left; position:relative; margin-top:5px; padding-left:25px;}
.s-flavor .caption .col-right .detail ul li:before{font-family: "Font Awesome 5";  font-weight: 400; content: "\f00c"; position:absolute; left:0; top:0; color:var(--color2); font-size:16px;}

@media (min-width:1200px) and (max-width:1439px) {
    .s-flavor .caption .col-left{width:450px;}
}

/* Công dụng */
.s-uses{}
.s-uses .caption{width:100%; position:relative; padding: 15px 0; }
.s-uses .caption h3{font-size:25px; font-weight:700; color:var(--color1); margin: 0 0 15px 0}
.s-uses .caption p{width:100%; margin:0; padding:0; font-size:16px; font-weight:600}
.s-uses .caption ul{margin:10px 0 0 0px; padding:0; list-style:none; width:100%; float:left;position:relative;}
.s-uses .caption ul li{width:260px; margin: 0 0px; display:block; padding: 8px 10px; clear:both; border-top:1px dashed rgba(0,0,0,.1); float:left; }
.s-uses .caption ul li:first-child{border:none;}
.s-uses .caption ul li .wrap-img{width:calc(100% - 540px); height:calc(100% - 10px); display:block;border-radius:15px; position:absolute; top:5px; right:0; opacity:0; visibility:hidden; transition:.3s; }
.s-uses .caption ul li .wrap-img img{object-fit:cover; width:100%; height:100%; border-radius:15px;}
.s-uses .caption ul li .wrap-img span{position:absolute; top:0; right:100%; margin-right:20px; z-index:2; width:230px; height:100%; top:0; display:flex; align-items:start; padding:25px 30px; font-weight:400; border-radius: 0 15px 15px 0; border:2px solid rgba(0,0,0,.1); border-radius:15px; background:#fff;}
.s-uses .caption ul li .info{padding-top:0px; text-align:left; height:70px; width:100%; float:left; display:table; align-items:center; position:relative; z-index:2;  cursor:pointer }
.s-uses .caption ul li .info .number {width:80px; text-shadow: 1px 1px 0 var(--color2), -1px -1px 0 var(--color2), 1px -1px 0 var(--color2), -1px 1px 0 var(--color2), 1px 1px 0 var(--color2); color:#fff; font-size:40px; font-weight:900; letter-spacing:2px; position:relative; z-index:2; display:table-cell; vertical-align:middle; text-align:left;}
.s-uses .caption ul li .info h4{ font-size:16px; font-weight:600; margin:0; display:table-cell; vertical-align:middle; text-align:left; line-height:22px; position:relative; z-index:2; transition:.3s;}
.s-uses .caption ul li .info span{width:100%; float:left; display:none;}
.s-uses .caption ul li .info:before{content:''; width:calc(100% + 30px); left:-15px; height:calc(100% + 0px); top:0px; background:var(--color2); position:absolute; border-radius:10px; opacity:0; visibility:hidden; transition:.3s;}
.s-uses .caption ul li.active .info h4{color:#fff;}
.s-uses .caption ul li.active .info:before{opacity:1; visibility:initial}
.s-uses .caption ul li.active .wrap-img{opacity:1; visibility:initial;}
.s-uses .caption ul li:nth-child(1) .wrap-img span { background:url('../images/cong-dung-san-day.jpg') no-repeat center bottom; background-size: 100% auto  }
.s-uses .caption ul li:nth-child(2) .wrap-img span { background:url('../images/cong-dung-mo-muoi-lau-nam.jpg') no-repeat center bottom; background-size: 100% auto  }
.s-uses .caption ul li:nth-child(3) .wrap-img span { background:url('../images/cong-dung-tuong-tamari.jpg') no-repeat center bottom; background-size: 100% auto  }
.s-uses .caption ul li:nth-child(4) .wrap-img span { background:url('../images/cong-dung-tra-bancha.jpg') no-repeat center bottom; background-size: 100% auto  }
.s-uses .caption ul li:nth-child(5) .wrap-img span { background:url('../images/cong-dung-gung-se.jpg') no-repeat center bottom; background-size: 100% auto  }

/* Đối tượng sử dụng */
.s-subjects{}
.s-subjects .caption{width:100%; position:relative; padding: 15px 0; }
.s-subjects .caption h3{font-size:25px; font-weight:700; color:var(--color1); margin: 0 0 5px 0}
.s-subjects .caption p{width:100%; float:left; position:relative; font-size:17px; font-weight:500;}
.s-subjects .caption ul{margin:10px 0 0  -15px; padding:0; list-style:none; list-style:none; width:calc(100% + 30px); float:left;}
.s-subjects .caption ul li{width:calc(33.33333333% - 30px); float:left; position:relative; margin: 0 15px;}
.s-subjects .caption ul li h4{width:100%; float:left; font-size:18px; font-weight:600; color:var(--color2); margin-top:20px;}
.s-subjects .caption ul li span{width:100%; float:left; position:relative;}
/*.s-subjects .caption ul li:first-child{width:calc(44% - 30px); padding-left:180px; }
.s-subjects .caption ul li:first-child h4:last-of-type{margin-top:25px;}
.s-subjects .caption ul li:first-child .wrap-img{width:350px; height:350px; position:relative; overflow:hidden; margin-bottom:20px; position:absolute; left:-190px;}
.s-subjects .caption ul li:first-child .wrap-img img{width:100%; height:100%; object-fit:cover; object-position:right bottom; border-radius:12px;}*/
.s-subjects .caption ul li .wrap-img{width:100%; height:250px; position:relative; overflow:hidden; border-radius:12px; }
.s-subjects .caption ul li .wrap-img img{width:fit-content; height:fit-content; object-fit:cover; object-position:center bottom; border-radius:12px; opacity:0;}
.s-subjects .caption ul li:nth-child(1) .wrap-img{background:url(../images/nguoi-mat-quan-binh-nguoi-quan-binh.jpg) no-repeat center; background-size:cover}
.s-subjects .caption ul li:nth-child(2) .wrap-img{background:url(../images/nguoi-hay-bi-benh-vat.jpg) no-repeat center; background-size:cover}
.s-subjects .caption ul li:nth-child(3) .wrap-img{background:url(../images/nguoi-ban-ron.jpg) no-repeat center; background-size:cover}

/* Cách pha trà */
.s-mix{}
.s-mix .caption{width:100%; position:relative; padding: 15px 0; }
.s-mix .caption h3{font-size:25px; font-weight:700; color:var(--color1); margin: 0 0 5px 0}
.s-mix .caption p{width:100%; float:left; position:relative; font-size:17px; font-weight:500;}
.s-mix .caption ul{width:calc(100% + 30px); margin:15px 0 0 -15px; padding:0 0 20px 0; list-style:none; float:left; }
.s-mix .caption ul li{width:calc(33.3333333333% - 30px); margin: 0 15px; float:left; position:relative; text-align:center; padding:25px; border:2px solid rgba(0,0,0,.07); border-radius:16px; transition:.3s;}
.s-mix .caption ul li:hover{border-color:var(--color1); box-shadow: 0 5px 20px rgba(0,0,0,.15)}
.s-mix .caption ul li:before{content:''; width:100%; height:150px; position:relative; display:block; margin-bottom:20px; opacity:1}
.s-mix .caption ul li label{display:inline-block; text-align:center;font-weight:600; font-size:17px; background:var(--color2); color:#fff; padding: 0 20px; line-height:32px; border-radius:16px; height:32px;}
.s-mix .caption ul li span{width:100%; float:left; position:relative; margin-top:10px;}
.s-mix .caption ul li:nth-child(1):before{background:url(../images/cach-pha-buoc-1.svg) no-repeat center; background-size: auto 100%; }
.s-mix .caption ul li:nth-child(2):before{background:url(../images/cach-pha-buoc-2.svg) no-repeat center; background-size: auto 100%; }
.s-mix .caption ul li:nth-child(3):before{background:url(../images/cach-pha-buoc-3.svg) no-repeat center; background-size: auto 100%; }

/* Đóng gói */
.s-feel{}
.s-feel .caption{width:100%; position:relative; padding: 15px 0; }
.s-feel .caption h3{font-size:25px; font-weight:700; color:var(--color1); margin: 0 0 5px 0}
.s-feel .caption ul{width:calc(100% + 30px); margin:15px 0 0 -15px; padding:0 0 20px 0; list-style:none; float:left; }
.s-feel .caption ul li{width:calc(33.3333333333% - 30px); margin: 15px 15px 0 15px; float:left; position:relative; padding:30px 25px 100px 25px; border:2px solid rgba(0,0,0,.07); border-radius:16px; transition:.3s;}
.s-feel .caption ul li .wrap-star{float:left; position:relative; display:flex;}
.s-feel .caption ul li .wrap-star i{font-size:12px; padding: 0 2px 0 0; color:#eecd15} 
.s-feel .caption ul li svg{position:absolute; top:15px; right:18px; height:44px; fill:var(--color2)}
.s-feel .caption ul li p{width:100%; float:left; position:relative; margin:20px 0 0 0;}
.s-feel .caption ul li .foot{width:calc(100% - 50px); float:left; position:absolute; height:50px; padding-left:65px; margin-top:25px; left:25px; bottom:30px;}
.s-feel .caption ul li .foot .avatar{width:50px; height:50px; float:left; position:absolute; top:0; left:0;}
.s-feel .caption ul li .foot .avatar img{height:100%}
.s-feel .caption ul li .foot label{font-size:15px; margin:0; font-weight:600 ; padding-bottom:3px;}
.s-feel .caption ul li .foot span{display:block; color:var(--color2); font-size:15px;}

/* Thông tin sản phẩm */
.s-info{}
.s-info .caption{width:100%; position:relative; padding: 15px 0; }
.s-info .caption h3{font-size:25px; font-weight:700; color:var(--color1); margin: 0 0 5px 0}
.s-info .caption .row-top{width:100%; float:left; position:relative; padding-left:430px; margin-top:10px;}
.s-info .caption .row-top img{position:relative; float:left; width:500px;height:auto; position:absolute; top:0; left:-100px; }
.s-info .caption .row-top ul{margin:-10px 0 0 0; padding:0; list-style:none; width:100%; float:left;}
.s-info .caption .row-top ul li{width:100%; float:left; display:table; padding:8px 0px; border-bottom:1px dashed rgba(0,0,0,.15)}
.s-info .caption .row-top ul li:last-child{border:none;}
.s-info .caption .row-top ul li label{margin:0; display:table-cell; text-align:left; width:170px; font-weight:500; opacity:.8}
.s-info .caption .row-top ul li label:after{content:':'; float:right; font-weight:500; padding-right:15px;}
.s-info .caption .row-top ul li span{margin:0; display:table-cell; text-align:left;}
.s-info .caption .row-bottom{width:100%; float:left; position:relative; border-top:1px solid rgba(0,0,0,.0); margin-top:50px; padding-top:0px; border:2px solid rgba(0,0,0,.07); padding:30px 0; border-radius:16px; display:table}
.s-info .caption .row-bottom a.nav-link{width:200px; display:block; margin: 0 auto; height:42px; line-height:40px; font-weight:600; border-radius:20px; border:1px solid var(--color1); text-align:center; color:var(--color1); padding:0; clear:both; font-size:17px;}
.s-info .caption .row-bottom .col-left{width:60%; position:relative; text-align:center; padding: 0 30px; display:table-cell;}
.s-info .caption .row-bottom .col-left label{margin:0; font-size:17px; color:var(--color2)}
.s-info .caption .row-bottom .col-left label b{text-transform:uppercase; display:block;}
.s-info .caption .row-bottom .col-left ul{width:calc(100% + 60px); margin:0; padding:0; list-style:none; float:left; margin-left:-30px; margin-bottom:20px;}
.s-info .caption .row-bottom .col-left ul li{width:33.333333333%; float:left; position:relative; margin-top:15px; text-align:center; padding-top:0px; border-left:1px solid rgba(0,0,0,.1) }
.s-info .caption .row-bottom .col-left ul li:first-child{border:none;}
.s-info .caption .row-bottom .col-left ul li i{font-size:16px; width:40px; height:40px; line-height:40px; margin-left:-20px; border-radius:50%; background:#fff; text-align:center; position:absolute; top:0px; left:50%; display:none; }
.s-info .caption .row-bottom .col-left ul li i:before{}
.s-info .caption .row-bottom .col-left ul li span{ display:block; width:100%; position:relative;}
.s-info .caption .row-bottom .col-left ul li a{ display:block; color:var(--color3); font-weight:600;}

.s-info .caption .row-bottom .col-right{width:40%; position:relative; text-align:center; padding: 0 30px; display:table-cell; vertical-align:top; border-left:1px solid rgba(0,0,0,.1)}
.s-info .caption .row-bottom .col-right label{text-transform:uppercase; display:block; font-size:17px; font-weight:bold; color:var(--color2)}
.s-info .caption .row-bottom .col-right p{width:100%; margin:0 0 20px 0; float:left;}
.s-info .caption .row-bottom .col-right a.nav-link{color:#fff; background:var(--color1)}

/* Panel right */
.pane{position:fixed; z-index:200; width:100%; height:100%; top:0; right:0; background:rgba(0,0,0,.5); transition:.3s; opacity:0; visibility:hidden;}
.pane .inner{width:450px; height:100%; background:#fff;  position:absolute; top:0px; right:-100px; border-radius:0; transition:.5s; opacity:0; }
.pane .inner .nav-close{ position:absolute; top:10px; right:100%; background:var(--color1); color:#fff; line-height:32px; padding: 0 10px 0 20px; font-size:14px; font-weight:600; height:32px; border-radius: 16px 0 0 16px; text-decoration:none;}
.pane .inner iframe{width:100%; height:100%;}
.pane.is-open{opacity:1; visibility:initial;}
.pane.is-open .inner{right:0; opacity:1;}