@font-face {
font-family: Probold;
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/barberosgerby/fonts/pro-bold.ttf') format("truetype");
}
@font-face {
font-family: Prolight;
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/barberosgerby/fonts/pro-light.ttf') format("truetype");
}

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #fff;
}

/* Best Display */

/* @media (min-height: 800px) and (min-width: 1280px) { */

button:focus {
outline: none;
}

img {
width: 100%;
height: auto;
}

.col {
width: 50%;
float: left;	
z-index: 100;
display: block;
}

.col.right {
float: right;
}

.header {
width: 100%;
height: 20%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.logo {
display: block;
width: 200px;
margin: 0 auto;

}

.logo svg {
width: 200px;
}

.container {
position:absolute;
top: 20%;
width: 100%;
height: 70%;


}
.fade {
width: 100%;
height: 100%;
margin: 0 auto;
}
.slick-list {
width: 100%;
height: 100%;
}

.slick-slide {
width: 100%;
height: 100%;
}

.slick-track {
width: 100%;
height: 100%;
}

.fade img {
height: 100%;
width: auto;
object-fit:cover;
margin: 0 auto;
}

.sidebar {
height: 70%;
position: absolute;
top: 20%;
left:25px;
z-index: 100;
/* 				background: #fff; */
}

.address {
background: #fff;
margin: 0;
padding: 0;
}

.footer {
width: 100%;
height: 10%;
position: absolute;
top: 90%;
left:0;
right:0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.navigation {
margin: 0 auto;
opacity: 0;
}

.arrows {
width: 50px;
height: 12px;
position: absolute;
left: 0;
right: 0;
margin: -1px auto 0;
}

.prev,
.next {
float: left;
width: 12px;
height: 12px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;


}

.next {
float: right;
}

.prev svg,
.next svg {
width: 12px;
height: 12px;
}

.prev:hover,
.next:hover {
cursor: pointer;
}

h1,h2,h3,h4,h5,h6,p,ul,button,.count, .text-right, address, span{
font-family: Prolight, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
line-height: 15px;
color: #000;
margin: 0;
padding: 0;
}
h6.get {
display:none;
}
p {
margin: 15px 0 0;
}
address span {
	display: block;
margin: 0 0 2px;
}
.text-right {
text-align: right;
}
.lh {
line-height: 14.5px;
}

a {
outline: 0 none;
color: inherit;
text-decoration: none;
}

a:hover, 
a:visited,
a:focus,
a:active {
outline: 0 none;	
}

::selection {
background: #eee; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #eee; /* Gecko Browsers */
}

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
}

@media (max-width: 768px) {
.sidebar {
bottom: 25px;
top: auto;
left: auto;
height: auto;
margin: 0 auto;
width: 100%;
}

.address {
margin: 0 auto;
	
}

}
/* Above Laptop */

@media (min-height: 901px) and (min-width: 1366px) {
.header {
height: 180px;
}
.container { 
height: 630px;
top: 180px;
}
.footer {
height: 90px;
top: 810px;
}
.sidebar {
top: 180px;
left: 25px;
}



} @media (min-height: 901px) and (max-width: 1365px) {
.container { 
width: 100%;
height: 50%;
top: 20%;
}
.fade {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer {
height: 80px;
top: 70%;
}

.sidebar {
bottom: 25px;
top: auto;
height: auto;
width: 100%;
}

.address {
margin: 0 auto;
}

} @media (min-height: 901px) and (max-width: 1024px) {
.container { 
width: 100%;
height: 48%;
top: 20%;
}

.footer {
top: 68%;
}

.sidebar {
bottom: 25px;
top: auto;
left: auto;
height: auto;
width: 100%;
}

/* Portrait Laptop */
	
} @media (max-height: 900px) and (max-width: 1280px) {
	
.container { 
width: 100%;
height: 50%;
top: 20%;
}
.fade {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer {
height: 80px;
top: 70%;
}

.sidebar {
bottom: 25px;
top: auto;
height: auto;
width: 100%;
left: 0;
}

.address {
margin: 0 auto;
padding: 0 25px;
}
	
} @media (max-height: 900px) and (max-width: 768px) {
	
.container { 
width: 100%;
height: 40%;
top: 20%;
}
.fade {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer {
height: 80px;
top: 60%;
}

.sidebar {
bottom: 25px;
top: auto;
left: auto;
height: auto;
margin: 0 auto;
width: 100%;
}

.address {
margin: 0 auto;
}






}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

.header{
height: 20%;
}
.container {
top: 20%;
height: 34%;
}
.footer {
top: 54%;
}

.logo,
.logo svg {
width: 175px;
}

h1,h2,h3,h4,h5,h6,p,ul,button,.count, .text-right, address, span{
font-size: 11px;	
}


}

/* Landscape */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
	
.header{
height: 30%;
}
.container {
top: 30%;
height: 70%;
}
.footer {
top: 100%;
}
.sidebar {
bottom: auto;
top: 136%;
margin-bottom: 30px;
}

.logo,
.logo svg {
width: 175px;
}

}




/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) { 

.header{
height: 30%;
}
.container {
top: 30%;
height: 34%;
}
.footer {
top: 64%;
}
.logo,
.logo svg {
width: 200px;
}

h1,h2,h3,h4,h5,h6,p,ul,button,.count, .text-right, address, span{
font-size: 11px;	
}


}

/* Landscape */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) { 
	
.header{
height: 30%;
}
.container {
top: 30%;
height: 70%;
}
.footer {
top: 100%;
}
.sidebar {
bottom: auto;
top: 136%;
margin-bottom: 30px;
}

.logo,
.logo svg {
width: 175px;
}

}






/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3) { 



}

/* Portrait */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) { 

.header{
height: 30%;
}
.container {
top: 30%;
height: 28%;
}
.footer {
top: 58%;
}
.logo,
.logo svg {
width: 200px;
}
h1,h2,h3,h4,h5,h6,p,ul,button,.count, .text-right, address, span{
font-size: 11px;	
}

}

/* Landscape */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 812px) 
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

.header{
height: 30%;
}
.container {
top: 30%;
height: 70%;
}
.footer {
top: 100%;
}
.sidebar {
bottom: auto;
top: 136%;
margin-bottom: 30px;
left: 0;
}

.logo,
.logo svg {
width: 175px;
}

}



/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) { 
.header{
height: 30%;
}
.container {
top: 30%;
height: 34%;
}
.footer {
top: 64%;
}
.logo,
.logo svg {
width: 200px;
}
h1,h2,h3,h4,h5,h6,p,ul,button,.count, .text-right, address, span{
font-size: 11px;	
}

}

/* Landscape */
@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) { 
	
.header{
height: 30%;
}
.container {
top: 30%;
height: 70%;
}
.footer {
top: 100%;
}
.sidebar {
bottom: auto;
top: 136%;
margin-bottom: 30px;
}

.logo,
.logo svg {
width: 175px;
}

}


 @media (max-width: 1280px) {

.next {
transform: rotate(90deg);
transform-origin: center center;
}	

.prev {
transform: rotate(90deg);
transform-origin: center center;
}

.col {
width: 80%;
}

.col.right {
width: 20%;
}

}