@import url('https://fonts.googleapis.com/css?family=Montserrat');

* {margin:0; padding:0; border:0; outline:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}

input[type='number'] {-moz-appearance:textfield}
input[type='submit'] {-webkit-appearance:none; -moz-appearance:none; appearance:none}

body, textarea, input, select, button {font-family:'Montserrat', sans-serif}
ul li {list-style:none}
.clear {clear:both}
a {text-decoration:none}
.main-container {width:1170px; margin:0 auto; position:relative}

h2 {color:#030303; font-size:23px; text-transform:uppercase}

header {background:#292929; position:absolute; z-index:9999; width:100%; top:calc(100vh - 100px)}
header.stick {position:fixed; top:0; z-index:9998}
header .main-container {background:url(../images/gray-logo.png) left top 18px no-repeat; height:100px}
header.stick .main-container {background:url(../images/color-logo.png) left top 18px no-repeat}
header .main-container > a {width:140px; height:75px; margin-top:18px; display:inline-block}
header ul {float:right; clear:both}
header ul li {float:left; position:relative}
header ul li a {display:block; text-transform:uppercase; font-weight:bold; font-size:14px; height:100px; color:#fff; padding:0 30px; position:relative; line-height:100px; transition:background .5s ease}
header ul li a:before {pointer-events:none; position:absolute; content:''; height:0; width:0; top:0; right:0; background:#292929; background:linear-gradient(225deg, #292929 47%, #5d5d5d 0%, #5d5d5d 101%, #5d5d5d 80%); box-shadow:-1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration:0.3s;
transition-duration:0.3s;
-webkit-transition-property:width, height;
transition-property:width, height}
header ul li a:hover {background:#494949 !important}
header ul li a:hover:before {width:20px; height:20px}
header ul li a.active {position:relative; background:#494949 !important; transition:background .5s ease}
header ul li a.active:before {width:20px; height:20px}

#showRightPush {position:absolute; background:0; border:0; z-index:999999; width:40px; height:20px; right:0; top:27px}
#mobile-menu {display:none}
.cbp-spmenu {background:#333; position:fixed; padding-top:10px; overflow-x:scroll; width:220px; height:100%; top:0; right:-220px; z-index:9999999}
.cbp-spmenu a {display:block; color:#fff; font-size:18px; font-weight:300; line-height:50px; padding-left:35px; border-bottom:1px solid rgba(255, 255, 255, 0.2); height:50px}
.cbp-spmenu.cbp-spmenu-open {right:0; box-shadow:10px 10px 50px #000}
.cbp-spmenu-push {overflow-x:hidden; position:relative; left:0}
.cbp-spmenu-push-toleft {left:-220px}
.cbp-spmenu, .cbp-spmenu-push {-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s ; transition:all 0.3s}
#close {border:none; background:url(../images/close-menu.png) no-repeat; display:block; cursor:pointer; width:30px; height:30px; position:absolute; margin-left:178px}

.about {background:#f7f7f7; margin-top:150px; padding:60px 0 80px; text-align:justify}
.about img {float:left; margin:5px 27px 0 0; max-width:100%}
.about p, .contact p {color:#000; font-size:13px; margin-top:20px}
.about a, .brand-desc .scroll-pane a {margin-right:20px}

.brands {margin-top:135px; position:relative; margin-bottom:40px}
.brands ul li {width:calc(20% - 13px); margin-top:15px; float:left; border:2px solid #f7f7f7; text-align:center; margin-right:15px; position:relative; cursor:pointer}
.brands ul li:nth-child(5n) {margin-right:0}
.brands ul li a {height:140px; width:100%; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.brands ul li > img {position:absolute; top:10px; left:0; width:50px}
.brands ul li a img {max-width:80%; max-height:80%; margin:0 auto}
.brands ul li p {position:absolute; top:0; width:100%; height:140px; background:url(../images/zoom.png) top 40px center no-repeat rgba(240,124,0,0.9); padding:100px 5px 50px; font-size:13px; color:#fff; font-weight:bold; text-transform:uppercase; opacity:0; transition:opacity 0.3s ease-in}
.brands ul li a:hover p {opacity:1; transition:opacity 0.3s ease-in}

.brand-desc {margin-top:130px}
.brand-desc .left {background:#f7f7f7; width:42%; padding:10px 25px 10px 0; height:calc(100vh - 160px); min-height:450px; float:left; position:relative}
.brand-desc .left .main-container {float:right; width:455px}
.brand-desc .actions {text-align:right; margin-right:-20px}
.brand-desc .actions a {margin:0 7px}
.brand-desc h1 {font-size:23px; color:#030303; margin:5px 0 10px}
.brand-desc .left p {font-size:13px; color:#000; line-height:20px; margin-bottom:15px; margin-right:10px}
.brand-desc ul li {font-size:13px; color:#000; line-height:20px; margin-bottom:10px; list-style:disc; margin-left:15px; padding-left:5px}
.brand-desc .scroll-pane p:nth-child(1) {margin-top:15px}
.brand-desc .scroll-pane a img {margin:10px 0 20px}
.brand-desc .scroll-pane p i {width:25px; height:25px; display:block; float:left}
.brand-desc .scroll-pane p .type {background:url(../images/type.png) no-repeat}
.brand-desc .scroll-pane p .drinks {background:url(../images/drinks.png) no-repeat}
.brand-desc .scroll-pane p .call {background:url(../images/phone.png) no-repeat}
.brand-desc .scroll-pane p .timing {background:url(../images/timing.png) no-repeat}
.brand-desc .scroll-pane p span {float:left; line-height:27px; margin-left:5px; display:block}
.brand-desc .scroll-pane p a {color:#000}

.scroll-pane {width:100%; height:calc(100vh - 260px); overflow:auto}
.jspContainer {overflow:hidden; position:relative}
.jspPane {position:absolute}
.jspVerticalBar {position:absolute; top:0; right:0; width:10px; height:100%}
.jspTrack {background:#292929; position:relative}
.jspDrag {background:#999; position:relative; top:0; left:0; cursor:pointer}
.jspVerticalBar .jspArrow:focus {outline:none}

.gallery {margin-top:130px}
.gallery ul li {width:calc(16.7% - 13px); margin-top:15px; float:left; border:2px solid #f7f7f7; margin-right:15px}
.gallery ul li:nth-child(6n) {margin-right:0}
.gallery ul li a {height:140px; display:block; width:100%; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important}
.gallery ul li:nth-child(1) a {background:url(../images/gallery/02T.jpg)}
.gallery ul li:nth-child(2) a {background:url(../images/gallery/14T.jpg)}
.gallery ul li:nth-child(3) a {background:url(../images/gallery/10T.jpg)}
.gallery ul li:nth-child(4) a {background:url(../images/gallery/15T.jpg)}
.gallery ul li:nth-child(5) a {background:url(../images/gallery/16T.jpg)}
.gallery ul li:nth-child(6) a {background:url(../images/gallery/17T.jpg)}
.gallery ul li:nth-child(7) a {background:url(../images/gallery/18T.jpg)}
.gallery ul li:nth-child(8) a {background:url(../images/gallery/20T.jpg)}
.gallery ul li:nth-child(9) a {background:url(../images/gallery/21T.jpg)}
.gallery ul li:nth-child(10) a {background:url(../images/gallery/22T.jpg)}
.gallery ul li:nth-child(11) a {background:url(../images/gallery/23T.jpg)}
.gallery ul li:nth-child(12) a {background:url(../images/gallery/24T.jpg)}
.gallery ul li:nth-child(13) a {background:url(../images/gallery/26T.jpg)}
.gallery ul li:nth-child(14) a {background:url(../images/gallery/27T.jpg)}
.gallery ul li:nth-child(15) a {background:url(../images/gallery/28T.jpg)}
.gallery ul li:nth-child(16) a {background:url(../images/gallery/29T.jpg)}
.gallery ul li:nth-child(17) a {background:url(../images/gallery/30T.jpg)}
.gallery ul li:nth-child(18) a {background:url(../images/gallery/31T.jpg)}
.gallery ul li:nth-child(19) a {background:url(../images/gallery/32T.jpg)}
.gallery ul li:nth-child(20) a {background:url(../images/gallery/33T.jpg)}
.gallery ul li:nth-child(21) a {background:url(../images/gallery/34T.jpg)}
.gallery ul li:nth-child(22) a {background:url(../images/gallery/35T.jpg)}
.gallery ul li:nth-child(23) a {background:url(../images/gallery/36T.jpg)}
.gallery ul li:nth-child(24) a {background:url(../images/gallery/37T.jpg)}
.gallery ul li:nth-child(25) a {background:url(../images/gallery/38T.jpg)}
.gallery ul li:nth-child(26) a {background:url(../images/gallery/39T.jpg)}
.gallery ul li:nth-child(27) a {background:url(../images/gallery/40T.jpg)}
.gallery ul li:nth-child(28) a {background:url(../images/gallery/41T.jpg)}

.news {margin-top:150px}
.news article {width:31%; margin-right:3.5%; float:left; margin-bottom:30px}
.news article:nth-child(3n) {margin-right:0}
.news article img {max-width:100%}
.news article h2 {font-size:17px; margin:15px 0 10px; text-transform:none}
.news article p, .news article span {color:#000; font-size:13px; margin-bottom:20px}
.news article a {background:#ef7f1a; color:#fff; font-size:14px; text-transform:uppercase; display:inline-block; border-radius:20px; padding:0 15px; line-height:30px; height:30px}
.news article span {float:right; display:block; border-bottom:1px dashed; margin-top:5px}

footer {width:100%; padding:20px 0; background:#292929; color:#fff; margin-top:30px; font-size:13px}
footer p {float:left}
footer p:nth-child(2) {float:right}
footer a {color:#5bc4bf}
footer br {display:none}

.contact {position:relative; margin:150px 0 70px; min-height:calc(100vh - 276px)}
.contact .left {width:50%; padding-right:3%; border-right:1px solid #ccc; float:left; position:relative}
.contact p {margin-top:10px; clear:both}
.contact p a {color:#000; line-height:20px}
.contact p a:hover {text-decoration:underline}
.contact p a img {float:left; margin-right:10px}
.contact #map {border:5px solid #ccc; width:100%; height:320px; margin-top:20px}
.contact .get-directions {position:absolute; z-index:99; display:block; background:#fff; color:#000; font:Arial, Helvetica, sans-serif; font-size:11px; bottom:276px; padding:7px; right:50px; box-shadow:0px 0px 2px rgba(0,0,0,0.1)}

.contact .right {width:47%; float:right}
.contact .right form {max-width:500px}
.contact input, .contact textarea {display:block; width:100%; line-height:45px; height:45px; margin-top:15px; border:2px solid #f0f0f0; border-radius:25px; padding:0 20px; font-size:14px; transition:border 0.3s ease-in}
.contact textarea {line-height:normal; height:130px; resize:none; padding:20px}
.contact input[type="submit"] {background:#ef7f1a; color:#fff; font-size:16px; text-transform:uppercase; cursor:pointer; border:0; outline:none}
.contact input:focus, .contact textarea:focus, .contact input:hover, .contact textarea:hover {border:2px solid #ef7f1a; transition:border 0.3s ease-in}
.contact input[type="submit"]:focus, .contact input[type="submit"]:hover {border:0}

.contact input[type="text"]:nth-child(1) {background:url(../images/form-name.png) right 20px center no-repeat}
.contact input[type="text"]:nth-child(4) {background:url(../images/form-city.png) right 20px center no-repeat; background-size:20px}
.contact input[type="number"] {background:url(../images/form-phone.png) right 20px center no-repeat}
.contact input[type="email"] {background:url(../images/form-mail.png) right 20px center no-repeat}
.contact textarea {background:url(../images/form-comment.png) right 20px top 15px no-repeat}
.contact input[type="text"]:nth-child(1):focus {background:url(../images/form-nameA.png) right 20px center no-repeat}
.contact input[type="text"]:nth-child(4):focus {background:url(../images/form-cityA.png) right 20px center no-repeat; background-size:20px}
.contact input[type="number"]:focus {background:url(../images/form-phoneA.png) right 20px center no-repeat}
.contact input[type="email"]:focus {background:url(../images/form-mailA.png) right 20px center no-repeat}
.contact textarea:focus {background:url(../images/form-commentA.png) right 20px top 15px no-repeat}
.contact .exp {font-size:12px; text-align:right}

.de-icon {width:100px; height:35px; background:url(../images/location-pointer.png)}

.location a {width:100%; height:calc(100vh - 160px); background:url(../images/location.jpg) center no-repeat; background-size:contain; margin-top:130px; display:block}

@media screen and (min-width:1800px) {
.brand-desc {margin-top:150px}
.brand-desc .left {width:50%; padding:40px 70px 15px 0; height:580px}
.brand-desc .left .main-container {float:right; width:518px}
.scroll-pane {height:440px}
.contact {height:calc(100vh - 237px)}
}

@media screen and (max-width:1200px) {
.main-container {width:95%}

.brand-desc .left {width:50%}
.brand-desc .left .main-container {width:95%}
}

@media screen and (max-width:1150px) {
header {height:70px; top:calc(100vh - 70px)}
header ul li a {padding:0 20px; height:70px; line-height:70px}
header .main-container {height:70px; background-size:110px !important; background-position:left top 7px !important}
header .main-container > a {height:50px; margin-top:10px}

.about {margin-top:100px; padding:30px 0 50px}
.news, .contact, .brand-desc {margin-top:100px}
.brands, .gallery {margin-top:85px}
.brand-desc .left {height:calc(100vh - 130px); min-height:inherit}
.scroll-pane {height:calc(100vh - 240px)}
.location a {width:100%; height:calc(100vh - 130px); margin-top:100px}
}

@media screen and (max-width:1000px) {
header ul {display:none}
#mobile-menu {display:block}

.brands ul li, .gallery ul li {width:calc(20% - 12px)}
.brands ul li:nth-child(6n), .gallery ul li:nth-child(6n) {margin-right:15px}
.brands ul li:nth-child(5n), .gallery ul li:nth-child(5n) {margin-right:0}

	.about img {float:none}
}

@media screen and (max-width:900px) {
.brand-desc .left {width:100%; float:none; padding-right:0; height:inherit; padding-bottom:40px}
.brand-desc .left .main-container {float:none}
.brand-desc .actions {margin-right:0}
.brand-desc {padding-bottom:0}
.scroll-pane {height:inherit}

.news article {width:47%; margin-right:6%}
.news article:nth-child(3n) {margin-right:6%}
.news article:nth-child(2n) {margin-right:0}
}

@media screen and (max-width:850px) {
.main-container, .brand-desc .left .main-container {width:92%}

.brands ul li, .gallery ul li {width:calc(25% - 12px)}
.brands ul li:nth-child(5n), .gallery ul li:nth-child(5n) {margin-right:15px}
.brands ul li:nth-child(4n), .gallery ul li:nth-child(4n) {margin-right:0}

.contact .left {width:100%; padding-right:0; border-right:0; float:none; margin-bottom:30px}
.contact .right {float:none; width:100%}
.contact .right form {margin:30px auto 0}
.contact .get-directions {right:20px}
}

@media screen and (max-width:770px) {
footer p, footer p:nth-child(2) {float:none; text-align:center; line-height:25px}

.contact .main-container > p br {display:none}
}

@media screen and (max-width:650px) {
.brands ul li, .gallery ul li {width:calc(33.3% - 10px)}
.brands ul li:nth-child(4n), .gallery ul li:nth-child(4n) {margin-right:15px}
.brands ul li:nth-child(3n), .gallery ul li:nth-child(3n) {margin-right:0}
}

@media screen and (max-width:550px) {
.main-container, .brand-desc .left .main-container {width:90%}
.about {margin-top:60px}
.brand-desc {margin-top:70px}
.brand-desc .left {padding-top:20px}

.news article {width:100%; margin-right:0}
.news article:nth-child(3n) {margin-right:0}

.location a {background-size:cover}
}

@media screen and (max-width:450px) {
.brands ul li, .gallery ul li {width:calc(50% - 7.5px)}
.brands ul li:nth-child(3n), .gallery ul li:nth-child(3n) {margin-right:15px}
.brands ul li:nth-child(2n), .gallery ul li:nth-child(2n) {margin-right:0}

footer br {display:block}
footer p:nth-child(1) {line-height:16px; margin-bottom:5px}
}

@media screen and (max-width:400px) {
.main-container, .brand-desc .left .main-container {width:88%}
.banner img {left:15%; margin-left:0; max-width:70%}

.contact iframe {height:200px}
}

@media screen and (max-width:300px) {
.brands ul li, .gallery ul li {width:100%; margin-right:0}
.brands ul li:nth-child(3n), .gallery ul li:nth-child(3n) {margin-right:0}
}