* {     z-index: 99;   padding: 0;        margin: 0;        box-sizing: border-box;      }
body,
html {  width: 100%;  height: 100%;  margin: 0;  padding: 0; letter-spacing:0px; /*font-family: "freight-big-pro", serif;*/ font-family: "freight-text-pro", serif; font-weight: 100;font-style: normal; font-size:1em; }

.clear {clear:both; } 

/*
.holder {margin:0px auto; max-width:960px; }
.holder:before, .holder:after {	content: "\0020";	display: block;	height: 0;	overflow: hidden;}
.holder:after {	clear: both;}
*/
.fixed-position { overflow: hidden }
.follower {  width: 40px;  height: 40px;    border-radius: 50%;  transition-duration: 300ms;  transition-timing-function: ease-out;  position: fixed;  transform: translate(-50%, -50%); background: white;          mix-blend-mode: difference; z-index:99; pointer-events: none}
	
.come-in {  transform: translateY(150px);  animation: come-in 0.8s ease forwards;}
.come-in:nth-child(odd) {  animation-duration: 0.6s; } /* So they look staggered */
@keyframes come-in {  to { transform: translateY(0); }}


.arrows {cursor:pointer;  width: 60px;  height: 72px;  position: absolute;  left: 50%;  margin-left: -30px;  bottom: 100px;}
.arrows path {  stroke: #CC9746;  fill: transparent;  stroke-width: 2px;    animation: arrow 2s infinite;  -webkit-animation: arrow 2s infinite; }
.np {cursor: default;}
.arrows.half { margin: 50px 0px 50px -30px;
    bottom: auto;
    float: left;
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    left: 50%;
}

h1 {margin-top:5%; text-align: left; color: #CC9746; font-size: 1.4em;}
h1.hp {margin:0%; text-align: center;}
h1 span {display:none}
h2 {margin-top:5%; text-align: left; color: #CC9746; font-size: 1.2em;}


@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {  animation-delay:-0.6s;  -webkit-animation-delay:-0.6s; }
.arrows path.a2 {  animation-delay:-0.3s;  -webkit-animation-delay:-0.3s; }
.arrows path.a3 {   animation-delay:0s;  -webkit-animation-delay:0s;}



.intro { display:flex; justify-content:center;    align-items:center;width:100%; height:100%; background:#ffffff; padding:0%; box-sizing: border-box; font-size:3em; text-align: center; }
.intro2 {width:100%; background:#ffffff; padding:7% 70px; box-sizing: border-box; font-size:3em; text-align: center; }
.intro2 p{ text-align: left; margin-top:0%}
.scroller {display:flex; width:100%; height:100%; background:#ffffff; padding:0%; box-sizing: border-box; font-size:2em; text-align: center; }
		
.imagee {width:50%; float:left; background:url(../images/image-square-jw-box.jpg); background-size: cover; 	transition: background 0.5s linear;}
.imaged {width:50%; float:right; background:url(../images/image-square-jw-box.jpg); background-size: cover; 	transition: background 0.5s linear;}
.imagef {width:50%; float:right; background:url(../images/image-squares-product7.jpg); background-size: cover; 	transition: background 0.5s linear;}

.ltb {width:50%; height:100vh; overflow-y: auto; float:left;  box-sizing: border-box; text-align: left}
.rtb {width:50%; height:100vh; overflow-y: auto; float:left;  box-sizing: border-box; text-align: left}


.logo3{  z-index: 999 !important; position: absolute;  left: 70px;  top: 57px;     background: transparent;    }

.slant7 { float:right; width:58%;  height:100%;    position:relative;    overflow:hidden;}
.slant7b { float:left; width:58%;  height:100%;    position:relative;    overflow:hidden;}
.slant7:before{    content:'';    position:absolute;    top:0; right:0;    width:100%; height:100%;  background-color: #323D44; -webkit-transform-origin:100% 100%;    -ms-transform-origin:100% 100%;    transform-origin:100% 100%;-webkit-transform:skewX(-24deg);    -ms-transform:skewX(-24deg);    transform:skewX(-24deg);}
.slant7b:before{    content:'';    position:absolute;    top:0; left:0;    width:100%; height:100%;  background-color: #CC9746; -webkit-transform-origin:100% 100%;    -ms-transform-origin:100% 100%;    transform-origin:100% 100%;-webkit-transform:skewX(24deg);    -ms-transform:skewX(24deg);    transform:skewX(24deg);}

.sholder {	padding: 15% 10% 0 ;    box-sizing: border-box;    color: #ffffff;    font-size: 1.6em;   float: right;  z-index: 9999;   position: relative;    width: 65%;    margin-right: 10%;}
.sholder2 {	padding: 15% 10% 0 10%; box-sizing: border-box;    color: #ffffff;    font-size: 1.6em;   float: left;   z-index: 9999;   position: relative;    width: 65%;    margin-right: 10%;}			

#contblock {text-align: center;  width:100%; background-color:#323D44 ;  float:left; padding:5% 5%; box-sizing: border-box; text-decoration: none; color:#ffffff;font-size: 0.8em; }
#contblock.fw { padding:2.5%; font-size: 1.6em !important; }
#contblock a.tel {background:none; border-radius: 30px; margin-top:10px; padding:7px 30px 10px; text-decoration: none; border: 0px solid rgba(255,255,255,0.5); color:#CC9746;font-size: 0.8em; }
#contblock a.email { background:none; border-radius: 30px;  margin-top:10px; padding:7px 30px 10px; text-decoration: none; border: 0px solid rgba(255,255,255,0.5); color:#CC9746;font-size: 0.8em;}
#contblock a i {margin:0 10px -3px -10px}

.image {background: url(../images/Oban-Whisky-detail.jpg); background-size:auto 110%; float:left; width:60%; margin-right:-20%;  height:100%;    position:relative;    overflow:hidden;}
.imageb {background: url(../images/New-rum-detail.jpg); background-size:auto 105%;  float:right; width:60%; margin-left:-20%;  height:100%;    position:relative;    overflow:hidden;}
.imagec {background: url(../images/El-Vajer-detail.jpg); background-size:auto 105%; float:left; width:60%; margin-right:-20%;  height:100%;    position:relative;    overflow:hidden;}

p {margin:15px 0 15px 0; position: relative; color:#323D44; }
.white {color:#ffffff; }
.sml {font-size:0.75em;line-height: 150%}


blockquote {    color: #CC9746;    font-size: 0.9em; font-style: italic;   font-weight:400; text-align: center;    margin: 0 0;    padding: 20px 60px 20px;    line-height: 1.15em;    position: relative;    z-index: 1;}
blockquote:before {display: block; padding-left: 10px;content: "\201C"; font-size: 120px; position: absolute;left: 0px;top: 25px;color: #323D44; z-index:-1; opacity:0.2; }
blockquote:after { display: block; padding-left: 10px;content: "\201D"; font-size: 120px; position: absolute;right: 0px;bottom: -20px;color: #323D44; z-index:-1; opacity:0.2;}



.left-shape {    shape-outside: polygon(0% 100%, 0% 0%, 50% 0%);    clip-path: polygon(0% 100%, 0% 0%, 50% 0%);    float: left;    width: 50%;    height: 100%;    background: yellow;}

h2 {color:#CC9746}

	/* MENU BG */
label .menu {  position: absolute; /*position: fixed;*/  right: -100px;  right: 0px;  top: -50px;  z-index: 100;  width: 150px;  height: 200px;  background: transparent;  border-radius: 50% 50% 50% 50%;  -webkit-transition: .5s ease-in-out;  transition: .5s ease-in-out;  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;  cursor: pointer;  }
label img.logo2{ display:none; z-index: 999 !important; position: absolute;  left: 70px;  top: 57px;     background: transparent;    }
label .hamburger {  position: absolute;  top: 135px;  left: 50px;  width: 30px;  height: 2px;  background: #CC9746;  display: block;  -webkit-transform-origin: center;  transform-origin: center;  -webkit-transition: .5s ease-in-out;  transition: .5s ease-in-out;}
label .hamburger:after, label .hamburger:before {  -webkit-transition: .5s ease-in-out;  transition: .5s ease-in-out;  content: "";  position: absolute;  display: block;  width: 100%;  height: 100%;  background: #CC9746;}
label .hamburger:before { top: -10px; }
label .hamburger:after { bottom: -10px; }
label input { display: none; }
label input:checked + .menu {  box-shadow: 0 0 0 100vw #323D44, 0 0 0 100vh #323D44;  border-radius: 0; background: #323D44}
label input:checked + .menu .hamburger {  -webkit-transform: rotate(45deg);  transform: rotate(45deg);  }
label input:checked + .menu .hamburger:after {  -webkit-transform: rotate(90deg);  transform: rotate(90deg);  bottom: 0;  }
label input:checked + .menu .hamburger:before {  -webkit-transform: rotate(90deg);  transform: rotate(90deg);  top: 0;  }
label input:checked + .menu + ul { opacity: 1; }
label ul {  z-index: 200;  position: absolute; font-size:3em;  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  opacity: 0;  -webkit-transition: .75s 0s ease-in-out;  transition: .75s 0s ease-in-out;}
label ul li { list-style: none;}
label a {  margin-bottom: 0.5em;  display: block;  color: #ffffff;  text-decoration: none;  }
label a{ display: inline-block;text-decoration:none; color:#ffffff !important; }
label a:after{ content: ''; width: 0px; height: 2px; display: block; background: #CC9746; transition: 0.3s;}
label a:hover:after{ width: 100%;}

#contactblock p {color: #ffffff; font-size:3em;}
#contactblock {float:left; width:100%; height:auto; background:#CC9746; color:#ffffff; padding:5%; box-sizing: border-box;  text-align: center; }

#cform fieldset {margin:3% 0% 0%; padding:0; border:0px; width:100%; text-align: center; font-family: "freight-text-pro", serif;}
#cform input {float:left; color:#333; background-color:#ffffff; width:100%; margin:0 0 8% 0%;border:0px; padding: 5% 5%; font-size:1.4em; box-sizing: border-box; border-radius:5px;font-family: "freight-text-pro", serif; }
#cform select {float:left; color:#333; background-color:#ffffff; width:100%; margin:0 0 8% 0%;border:0px; padding: 5% 5%; font-size:1.4em; box-sizing: border-box ; border-radius:5px;font-family: "freight-text-pro", serif; }
#cform textarea {float:left; color:#333; background-color:#ffffff; width:100%;height:160px; margin:0 0 10px 0;border:0px;  padding:5%;  font-size:1.4em;box-sizing: border-box; border-radius:5px;font-family: "freight-text-pro", serif; }
#cform button { display: inline-block;  text-align: center;  transition: 0.5s; font-family: "freight-text-pro", serif; background: none;    border-radius: 30px;      margin-top: 20px;    padding: 7px 30px 10px;    text-decoration: none;    border: 0.5px solid rgba(255,255,255,0.5);    color: #323D44;    font-size: 1.4em;}
#cform fieldset label {float:left;width:100%; margin:0px 0 3px;  font-size:1.4em; color:#CE2827;font-weight:700; }
#cform .box {margin-bottom:0%; 	 }
#cform fieldset input.error {    background: #ddd;    color: #ffffff;    font-style: italic;}
#formsent {    display: none;    letter-spacing: 0px;    width: 100%;    border: 0px;    color: #ffffff;    line-height: 1em;    transition: 0.5s;    font-size: 2em;    text-align: center;    margin: 20px 0;    padding-top: 10px;}

.box {float:left; width:31%; margin-right:3.5%; margin-bottom:3%; height:auto; -webkit-box-sizing: border-box; 	-moz-box-sizing: border-box; 	box-sizing: border-box; 	 }
.box:nth-of-type(3n) {margin-right:0%;}


li.flex-nav-next {display: none}
li.flex-nav-prev {display: none}

.flex-direction-nav {clear:both;}

#ourvalues {float:left; width:100%; height:auto; background:#eee; padding:5% 5% 4%;  box-sizing: border-box; font-size:2.7em; text-align: center; }
#wearenumberone {float:left; width:100%; height:auto; background:#eee; padding:5% 5% 0%;  box-sizing: border-box; font-size:2.7em; text-align: center; }

.imagesquare { width:33.3%; float:left; }

.logosholder {display:flex; background: #eeeeee; padding: 0px 70px;    box-sizing: border-box;}
.logos {flex-grow: 1;  width: 20%; text-align: center; padding:1% 4%}
.logos img {width:100%}

.rtbbuffer {padding:10% 10% 5%;}
.ltbbuffer {padding:20% 8.5% 5%;}

.mobhide {display:block;}
.hidedsktp {display:none;}




@media (max-width: 1700px){	
	.slant7:before {	-webkit-transform: skewX(-20deg);	-ms-transform: skewX(-20deg);	transform: skewX(-20deg);	}
	.slant7b:before{   	-webkit-transform: skewX(20deg);    -ms-transform: skewX(20deg);    transform: skewX(20deg); }
}
@media (max-width: 1400px){	
	.slant7:before {	-webkit-transform: skewX(-15deg);	-ms-transform: skewX(-15deg);	transform: skewX(-15deg);	}
	.slant7b:before{   	-webkit-transform: skewX(15deg);    -ms-transform: skewX(15deg);    transform: skewX(15deg); }

}
@media (min-width: 1600px){	
	/* .holder {    width: 1440px!important; }*/
	#cform textarea {height:184px;  }

}

@media only screen 
and (min-width : 0px) 
and (max-width : 690px){
	
	.follower {display: none; }
	.intro { font-size:1.8em; width:100%; padding:0 20%; box-sizing: border-box; text-align: center; }
	.intro2 { font-size:1.8em; width:100%; padding:15% 10% 5%; box-sizing: border-box; text-align: center; }
	.intro p br { display: none }
	.image { background-size: cover;background-position: center;width: 100%;margin-right: 0%;    height: 100%;    position: relative;    overflow: hidden;}
	.imageb { background-size: cover;background-position: center;width: 100%;margin-right: 0%;    height: 100%;    position: relative;    overflow: hidden;}
	.imagec { background-size: cover;background-position: center;width: 100%;margin-right: 0%;    height: 100%;    position: relative;    overflow: hidden;}
	.slant7 {    float: right;    width: 100%;    height: auto;   background: #323D44;}
	.slant7b {    float: right;    width: 100%;    height: auto;   background: #CC9746;}
	
	.slant7:before { display: none;}
	.slant7b:before { display: none;}
	.sholder, .sholder2 {text-align: center;padding: 10% 10% 15%;    box-sizing: border-box;    color: #ffffff;    font-size: 1.6em;    float: right;    z-index: 9999;    position: relative;    width: 100%;    margin-right: 0%;}
	
	.sholder p, .sholder2 p,
	.sholder h2, .sholder2 h2{ text-align: center; }
	
	.sholder a, .sholder2 a{float:none !important}
	
	
	#cform fieldset {margin:8% 0% 0%; padding:0; border:0px; width:100%; text-align: center; font-family: "freight-text-pro", serif;}
	#cform input { padding: 4%;  margin:0 0 5% !important;  }
	#cform select {padding: 4%;  }
	#cform textarea { padding:4%;  }
	#cform .box {width:100%; margin:0 !important; 	 }
	
	#contactblock { padding:5% 10% 10% ; box-sizing: border-box;  }

	#contactblock p {color: #ffffff; font-size:2em; line-height: 100%; }
	
	#wearenumberone, #ourvalues { padding:5% 5%; font-size:1.5em;  }

	label .menu {  position: absolute;   right: 0px;  top: -100px;  z-index: 100;  width: 100px;  height: 100px;  background: transparent; }
	label ul {    z-index: 200;    position: absolute;    font-size: 2em;    top: 50%;    left: 40%;}
	label img.logo2{ height:44px; left: 5%; top:15px;    }
	
	.logo3{    left: 5%;;  top: 15px;  height:44px;   background: transparent;    }
	
	.imagesquare { width:100%; float:left; margin-bottom: -1px; }
	
	.logosholder {display:inline-block;    padding: 0px 5%}
	.logos {flex-grow: 1;  width: 50%; text-align: center; padding:1% 4%; box-sizing: border-box; float:left;}
	.logos img {width:100%}
	
	.sml {font-size:0.85em;line-height: 150%}
	.scroller {display:inline-block; width:100%; height:100%; background:#ffffff; padding:0%; box-sizing: border-box; font-size:1.25em; text-align: center; }
	
	
	#contblock {text-align: center;  width:100%; background-color:#323D44 ;  float:left; padding:5% 0%; box-sizing: border-box; text-decoration: none; color:#ffffff;font-size: 0.9em; }
	#contblock a.tel {background:none; border-radius: 30px; margin-top:10px; padding:7px 10px 10px; text-decoration: none; border: 0px solid rgba(255,255,255,0.5); color:#CC9746;font-size: 0.8em; }
	#contblock a.email { background:none; border-radius: 30px;  margin-top:10px; padding:7px 10px 10px; text-decoration: none; border: 0px solid rgba(255,255,255,0.5); color:#CC9746;font-size: 0.8em;}
	#contblock a i {margin:0 10px -3px -10px}
	
	#contblock.fw { padding:5%; font-size: 1.12em !important; }
	.arrows.half {    margin: 20px 0px 20px -20px;}
	
	
	.ltb {width:100%; height:auto; overflow-y:auto; float:left;  box-sizing: border-box; text-align: left}
	.rtb {width:100%; height:auto; overflow-y:auto; float:left;  box-sizing: border-box; text-align: left}

	.imagee {width:100%; height:40%; float:left; background:url(../images/image-square-jw-box.jpg); background-size: cover; 	transition: background 0.5s linear;}
	.imaged {display: none; width:100%; height:40%; float:right; background:url(../images/image-square-jw-box.jpg); background-size: cover; 	transition: background 0.5s linear;}
	.mobhide {display:none;}
	.hidedsktp {display:block;}
	
	.rtbbuffer {padding:10% 10% 5%;}
.ltbbuffer {padding:10% 10% 5%;}
	
	blockquote {    color: #CC9746;    font-size: 0.9em; font-style: italic;   font-weight:400; text-align: center;    margin: 0 0;    padding: 20px 20px 20px;    line-height: 1.15em;    position: relative;    z-index: 1;}
blockquote:before {display: block; padding-left: 10px;content: "\201C"; font-size: 60px; position: absolute;left: -20px;top: 25px;color: #323D44; z-index:-1; opacity:0.2; }
blockquote:after { display: block; padding-left: 10px;content: "\201D"; font-size: 60px; position: absolute;right: -20px;bottom: -20px;color: #323D44; z-index:-1; opacity:0.2;}

	
	
}