img{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

#section0{
    /*background: url("/images/HOME.jpg") no-repeat center 0 scroll;*/
    background-size: cover;
    position: relative;
}

#section3{
    background: url("/images/wilkinson_history.jpg") no-repeat 0 0 scroll;
    background-size: cover;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
/*font-family: 'Roboto', sans-serif;*/
font-family: 'Roboto Slab', serif;    
}

html,body{
    padding: 0;
    margin: 0;   
    background: #000;
    font-size: 16px;
    overflow-y: hidden;
}

a, img {
    border:none;
    outline:none;
    color: #fff;
    text-decoration: none;
}

a, a:hover{
    transition: all 0.28s ease-in-out  0s;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
}
*, *:after, *:before {
    -moz-box-sizing: border-box;
    -moz-text-size-adjust: none;
    -webkit-box-sizing: border-box;
    -webkit-text-size-adjust: none;
    box-sizing: border-box;
    text-size-adjust: none;
    backface-visibility: hidden;
}

body.fastmove *{
    -moz-transition: all 0s ease 0s!important;
    -webkit-transition: all 0s ease 0s!important;
    -o-transition: all 0s ease 0s!important;
    -ms-transition: all 0s ease 0s!important;
    transition: all 0s ease 0s!important;
}

.intro p{
	width: 90%;
	margin: 0 auto;
	font-size: 1.5em;
}
.intro p > img{
    max-width: 100%;
}

.gload{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #000;
    z-index: 10000;
    top: 0;
    left: 0;
}

.gload{
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.gload > * {
    transform: scale(0.25);
    backface-visibility: hidden;
}

.section{
	text-align:center;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    transform: translate3d(0px,0px,0px);
    background-position: center top;
    background-size: cover;
    position: relative;
}

#section1 .intro{
    width: 70%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#section1 .intro h1{
    padding-left: 0;
    padding-right: 0;
}

#section1 > .fp-tableCell{
    background-image: url("../images/dotpattern.png");
    background-repeat: repeat;
    background-position: top left;
}

#section0 .intro{
    position: relative;
}


#backVid{
    position: absolute;
    top: 0;
    left: 0;
    width: 86.5%;
    height: 100%;
}

#backVid .vids{
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: transparent;
    z-index: 5;
    display: inline;
    opacity: 0;
}

#backVid #vv1{
    opacity: 1;
}

#slide{
    display: block;
    position: absolute;
    height: 100%;
    width: 75%;
    top: 0;
    left: 100%;
    background: #000;
    cursor: pointer;
    z-index: 12;
    overflow: hidden;
    color: #fff;
    background-image: url(/images/bg2.jpg);
    background-size: cover;
    
    -webkit-transform: translate3d(-18%,0,0);
    -moz-transform: translate3d(-18%,0,0);
    -ms-transform: translate3d(-18%,0,0);
    -o-transform: translate3d(-18%,0,0);
    transform: translate3d(-18%,0,0);
    
    -webkit-transition: transform 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz-transition: transform 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms-transition: transform 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -o-transition: transform 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: transform 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

#slide.open{
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    -o-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

#slideBar{
    display: block;
    position: absolute;
    width: 18%;
    height: 100%;
    z-index: 1;
}

#slideBar .slideLogo{
    height: 25%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-justify-content: flex-end;
    -o-justify-content: flex-end;
    justify-content: flex-end;
    
    
    opacity: 1;
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    -ms-transform: translate3d(0%,0,0);
    -o-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
    -webkit- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -o- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

.open #slideBar .slideLogo{
    opacity: 0.1;
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    -o-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

#slideBar .slideLogo img{
    max-width: 95%;
    max-height: 95%;
}

#slideBar .slideShave{
    height: 50%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    
    opacity: 1;
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    -ms-transform: translate3d(0%,0,0);
    -o-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
    -webkit- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s;
    -moz- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s;
    -ms- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s;
    -o- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s;
    transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.12s;
}

.open #slideBar .slideShave{
    opacity: 0.1;
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    -o-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

#slideBar .slideShave img{
    max-width: 95%;
    max-height: 95%;
}

#slideBar .slideText{
    height: 25%;
    opacity: 1;
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    -ms-transform: translate3d(0%,0,0);
    -o-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
    -webkit- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s;
    -moz- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s;
    -ms- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s;
    -o- transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s;
    transition: transform 0.42s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s,
        opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.24s;
}

.open #slideBar .slideText{
    opacity: 0.1;
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    -o-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

#slideBar .slideText p{
    padding: 0 10%;
}

#slideContent{
    padding: 8%;
    height: 100%;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}

#slideContent .slideLogo{
    flex: 1 26%;
}

#slideContent .slideShave{
    flex: 1 37%;
}

#slideContent .slideText{
    flex: 1 37%;
    padding-left: 4%;
    padding-bottom: 8%;
}

#slideContent .slideLogo{
    padding-bottom: 8%;
}

#slideContent .slideLogo, #slideContent .slideShave, #slideContent .slideText{
    opacity: 0;
    -webkit- transition: opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz- transition: opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms- transition: opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -o- transition: opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: opacity 0.2s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

#slideContent .slideLogo img, #slideContent .slideShave img{
    max-width: 100%;
    max-height: 100%;
}

.open #slideContent .slideLogo, .open  #slideContent .slideShave, .open #slideContent .slideText{
    opacity: 1;
    -webkit-transform: translate3d(0,0%,0);
    -moz-transform: translate3d(0,0%,0);
    -ms-transform: translate3d(0,0%,0);
    -o-transform: translate3d(0,0%,0);
    transform: translate3d(0,0%,0);
}

.open #slideContent .slideLogo{
    -webkit- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.45s;
    -moz- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.45s;
    -ms- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.45s;
    -o- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.45s;
    transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.45s;
}

.open #slideContent .slideShave{
    -webkit- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.52s;
    -moz- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.52s;
    -ms- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.52s;
    -o- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.52s;
    transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.52s;
}

.open #slideContent .slideText{
    -webkit- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.6s;
    -moz- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.6s;
    -ms- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.6s;
    -o- transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.6s;
    transition: opacity 0.35s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0.6s;
}

#slideContent .slideText{
    text-align: left;
}

#slideContent .slideText h1{
    margin-top: 0;
}


#canvas-logo{
    width: 24vw;
    height: 24vw;
    margin: 0 auto;
    position: relative;
    -webkit-transition: transform 0.82s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz-transition: transform 0.82s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms-transition: transform 0.82s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -o- transition: transform 0.82s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: transform 0.82s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

#canvas-logo.open{
    -webkit-transform: translate3d(-129.5%,0,0);
    -moz-transform: translate3d(-129.5%,0,0);
    -ms-transform: translate3d(-129.5%,0,0);
    -o-transform: translate3d(-129.5%,0,0);
    transform: translate3d(-129.5%,0,0);
}

.intro h1{
    color: #fff;
    font-size: 2.2em;
    margin: 0.2em auto;
    max-width: 1200px;
    padding-left: 2em;
    padding-right: 2em;
    width: 100%;
}

.intro h2{
    color: #fff;
    font-size: 1.4em;
    margin: 0.5em auto;
    max-width: 1200px;
    padding-left: 2em;
    padding-right: 2em;
    width: 100%;
    padding-bottom: 3em;
}

.intro h1, .intro h2{
    -moz-transition: all 2s ease 0s;
    -webkit-transition: all 2s ease 0s;
    -o-transition: all 2s ease 0s;
    -ms-transition: all 2s ease 0s;  
    transition: all 2s ease 0s;
    opacity: 0;
}

.ready .intro h1, .ready .intro h2{
    opacity: 1;
}

.goTop, .tipsBack, .goBack {
    position: fixed;
    bottom: 1em;
    right: 52px;
    z-index: 19;
    width: 76px;
    height: 76px;
    cursor: pointer;
    display: none;
}

.goTop img, .tipsBack img, .goBack{
    user-drag: none; 
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.isOn.goTop{
    display: block;
}

.vid.goTop{
    bottom: -100%;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;  
    transition: all 1s ease 0s;
}

/**/
@-webkit-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	20%,75%,100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		-webkit-transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes fadeInBack{
	0%{
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
/**/
@-moz-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	20%,75%,100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
}
@-moz-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
}
@-moz-keyframes fadeInBack{
	0%{
		opacity: 0;
		-moz-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-moz-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-moz-transform: scale(5);
	}
}
@-moz-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-moz-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-moz-transform: scale(1) rotate(0deg);
	}
}
/**/
@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.2);
	}
	20%,75%,100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
@keyframes fadeInBack{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 0.4;
		transform: scale(2);
	}
	100%{
		opacity: 0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.fp-tableCell {
    position: relative;
}

#section0 .fp-tableCell {
    background: rgba(0,0,0,0.05);
    padding-right: 13.5%;
    -webkit-transition: all 0.65s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz-transition: all 0.65s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms-transition: all 0.65s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -o-transition: all 0.65s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: all 0.65s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

#section0 .fp-tableCell.open{
    background: rgba(0,0,0,0.5);
}


.sdown-outter{
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 12;
    color: #fff;
    font-weight: 700;
    font-size: 1.2em;
    position: absolute;
    bottom: 20px;
    padding-right: 13.5%;
    opacity: 1;
    
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    -ms-transform: translate3d(0%,0,0);
    -o-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
    
    -webkit-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s; 
    -o-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

.ready .intro h1, .ready .intro h2{
    opacity: 1;
    -webkit-transform: translate3d(0%,0,0);
    -moz-transform: translate3d(0%,0,0);
    -ms-transform: translate3d(0%,0,0);
    -o-transform: translate3d(0%,0,0);
    transform: translate3d(0%,0,0);
    -webkit-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -moz-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    -ms-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s; 
    -o-transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
    transition: all 0.9s cubic-bezier(0.4, 0.8, 0.64, 0.99) 0s;
}

.sdown-outter.open, .ready .intro h1.open, .ready .intro h2.open{
    -webkit-transform: translate3d(-150px,0,0);
    -moz-transform: translate3d(-150px,0,0);
    -ms-transform: translate3d(-150px,0,0);
    -o-transform: translate3d(-150px,0,0);
    transform: translate3d(-150px,0,0);
    opacity: 0;
}

.sdown{
    cursor:pointer;
    display: block;
    width: 150px;
    margin: 0 auto;
    position: relative;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.downtext {
    margin-top: 20px;
    cursor: pointer;
}
.downtext p{
    font-size: 1em;
    line-height: 1em;
    color: #fff;
    width: 90%;
    margin: 0 auto;
}

.footer-social{
    position: fixed;
    bottom: 2em;
    left: 3.5em;
    z-index: 200;
    transform: scale(1.7);
}

.footer-social a{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    margin-right: 5px; 
    padding-right: 0.2em;
}

.footer-social a .fbi, .footer-social a .fbi2{
    width: 20px;
    height: 20px;
}

.footer-social a > i {
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s; 
    transition: all 0.28s ease-in-out  0s;
}
svg.animCirc1 {
    z-index: 9998;
    position: absolute;
    top: -6px;
    left: -5px;
    width: 35px;
    height: 35px;
}
svg.animCirc2 {
    z-index: 9998;
    position: absolute;
    top: -6px;
    left: -4px;
    width: 35px;
    height: 35px;
}

.top-menu{
    position: fixed;
    top: 2.75em;
    left: 2.5em;
    z-index: 20;
    background:#fff;
    padding: 0.6em 0.55em;
    width: 2.5em;
    height: 2.5em;
    cursor: pointer;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}
.top-menu span{
    display: inline-block;
    width:100%;
    border-top: 2px solid #000;
    margin: 0.15em 0;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}
.top-menu:hover{
    background: #000;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}
.top-menu:hover span{
    border-color: #fff;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}

.main-menu{
    position: fixed;
    top: -200%;
    overflow: hidden;
    left: 0;
    z-index: 100;
    background: rgba(0,0,0,0.95);
    width: 100%;
    height: 100%;
    display: table;
    padding: 2em;
    overflow: auto;

    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    
}
.main-menu.opened{
       top:0;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.msain-menu.opened.closed{
        -webkit-transform: rotate(180deg)  translateX(0%);
        -moz-transform: rotate(180deg)  translateX(0%);
        -ms-transform: rotate(180deg) translateX(0%);
        -o-transform: rotate(180deg)  translateX(0%);
        transform: rotate(180deg)  translateX(0%); 
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.msm-restore{
    top: -9999em !important;
}

.video-wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    top: 0;
    left: 0;
    display: none;
    z-index: 20000;
}

.video-wrap.open{
    display: block;
}

#video{
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #000;
    background-position: center top;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
    height: 100%;
    -moz-object-fit: cover;
    -webkit-object-fit: cover;
    object-fit: cover;
    position: absolute;
    width: 100%!important;
}
#ytplayer-wrap{
    width: 100%!important;
    height: 100%!important;
}
#ytplayer{
    width: 100%!important;
    height: 99%!important;
}



.main-menu > div{
    position: relative;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    display: table-cell;  
}
.main-menu > div > ul{
    list-style: none;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}
.main-menu > div > ul > li{
    list-style: none;
    position: relative;
    width: 100%;
    padding: 0;
    width: 100%;
    margin: 1.5em 0;
}

.main-menu > div a{
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: 800;
    font-size: 2.3em;
    text-decoration: none;
}
.main-menu > div a:hover{
    text-decoration: underline;
}
.close-menu:hover, .exit_video:hover, .exit_car_item:hover{
    /*text-decoration: underline;*/
}
.exit_video, .exit_car_item, .exit_tip, .share_video{
    position: absolute;
    top: 1.5em;
    color: #fff;
    font-weight: 800;
    font-size: 1.2em;
    text-decoration: none;
    z-index: 10;
    transform: rotateX(-90deg);
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}

a.exit_video {
    top: 49%;
    background: rgba(0,0,0,0.6);
    padding: 30px!important;
    right: 0;
}

a.share_video {
    top: 49%;
    background: rgba(0,0,0,0.6);
    padding: 30px!important;
    left: 0;
    overflow: hidden;
}

a.cl-effect-18.exit_video::before, a.cl-effect-18.exit_video::after, a.cl-effect-18.share_video::before, a.cl-effect-18.share_video::after{
    position: absolute;
    width: 80%;
    left: 10.5%;
    top: 50%;
    height: 1px;
    margin-top: -1px;
    background: #fff;
    content: '';
    z-index: -1;
    -ms-transition: -webkit-transform 0.3s, opacity 0.3s;
    -o-transition: -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
}


a.cl-effect-18.share_video:hover::before, a.cl-effect-18.share_video:focus::before {
    -o-transform: translate3d(17px,15px,0);
    -ms-transform: translate3d(17px,15px,0);
    -webkit-transform: translate3d(17px,15px,0);
    -moz-transform: translate3d(17px,15px,0);
    transform: translate3d(17px,15px,0);
}

a.cl-effect-18.share_video:hover::after, a.cl-effect-18.share_video:focus::after {
    -ms-transform: translate3d(-17px,-15px,0);
    -o-transform: translate3d(-17px,-15px,0);
    -webkit-transform: translate3d(-17px,-15px,0);
    -moz-transform: translate3d(-17px,-15px,0);
    transform: translate3d(-17px,-15px,0);
}

.close-menu {
    position: absolute;
    top: 1.5em;
    left: 1.5em;
    color: #fff;
    font-weight: 800;
    font-size: 1.2em;
    text-decoration: none;
    z-index: 10;
    transform: rotateX(-90deg);
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}


.close-menu.opened, .exit_video.opened, .exit_car_item.opened, .exit_tip.opened, .share_video.opened{
    z-index: 50;
    transform: rotateX(0deg);
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}


.burger-menu {
    -moz-appearance: none;
    background: #fff none repeat scroll 0 0;
    border: medium none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 40px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: -9999px;
    transition: background 0.3s ease 0s;
    width: 60px;
    z-index: 999;
}
.burger-menu:focus {
    outline: medium none;
}
.burger-menu span {
    background: #d91864 none repeat scroll 0 0;
    display: block;
    height: 2px;
    left: 14px;
    position: absolute;
    right: 0;
    top: 20px;
    transition: background 0.3s ease 0s;
    width: 26px;
}
.burger-menu span::before, .burger-menu span::after {
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    transition-delay: 0.3s, 0s;
    transition-duration: 0.3s, 0.3s;
    width: 26px;
}
.burger-menu span::before {
    background: #d91864 none repeat scroll 0 0;
    top: -7px;
    transition-property: top, transform;
}
.burger-menu span::after {
    background: #d91864 none repeat scroll 0 0;
    bottom: -7px;
    transition-property: bottom, transform;
}
.burger-menu.is-active span {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    top: auto;
}
.burger-menu.is-active span::before {
    top: 0;
    transform: rotate(45deg);
}
.burger-menu.is-active span::after {
    bottom: 0;
    transform: rotate(-45deg);
}
.burger-menu.is-active span::before, .burger-menu.is-active span::after {
    transition-delay: 0s, 0.3s;
}
.right-sidebar{
    position: absolute;
    top: 0;
    right: -100%;
    width: 30%;
    background: rgba(0,0,0,0.8);
    height: 100%;
    z-index: 10;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.section.goAnim.active .right-sidebar{
    right: 0;
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.section.active .history-sidebar{
    bottom: 0;
}

.history-sidebar{
    width: 100%!important;
    height: 100%;
    z-index: 1;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    overflow: hidden;
}

.section.active .history-sidebar{
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.history-sidebar-inner{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: rgba(0,0,0,0.6);
    padding: 0px;
    position: relative;
    opacity: 0;
    -ms-transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1);
    transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.section.active .history-sidebar-inner{
    opacity: 1;
    -o-transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
    transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}


.history-sidebar-inner > * {
    /*height: auto!important;*/
}

.history-sidebar h2 {
    color: #fff;
    font-size: 2em;
    font-weight: 800;
    line-height: 1.4em;
    margin: 0;
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0;
}

.history-sidebar p{
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    color: #fff;
    font-family: 'Roboto';
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: justify;
    height: auto!important;
}
.history-sidebar p.center{
    text-align: center;
}

.history-sidebar .mytext2 {
    /* margin-top: 60px; */
    margin-bottom: 15px;
    -ms-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    transition: all 1s ease-in-out 0s;
    opacity: 0;
    transform: translate(0,100px);
}
.mytext2 a{
    color: #fff;
    font-weight: 800;
    
}
.history-sidebar p img{
    max-width: 100%;
    
}

.active .history-sidebar .mytext2 {
    /* margin-top: 0px; */
    opacity: 1;
    transform: translate(0,0);
}

.active .history-sidebar .mytext2:nth-child(1){
     -ms-transition: all 2s ease-out 1.5s;
    -o-transition: all 2s ease-out 1.5s;
    -moz-transition: all 2s ease-out 1.5s;
    -webkit-transition: all 2s ease-out 1.5s;
    transition: all 2s ease-out 1.5s;
}
.active .history-sidebar .mytext2:nth-child(2){
    -ms-transition: all 2s ease-out 1.8s;
    -o-transition: all 2s ease-out 1.8s;
    -moz-transition: all 2s ease-out 1.8s;
    -webkit-transition: all 2s ease-out 1.8s;
    transition: all 2s ease-out 1.8s;
}
.active .history-sidebar .mytext2:nth-child(3){
    -ms-transition: all 2s ease-out 2.1s;
    -o-transition: all 2s ease-out 2.1s;
    -moz-transition: all 2s ease-out 2.1s;
    -webkit-transition: all 2s ease-out 2.1s;
    transition: all 2s ease-out 2.1s;
}
.active .history-sidebar .mytext2:nth-child(4){
    -ms-transition: all 2s ease-out 2.4s;
    -o-transition: all 2s ease-out 2.4s;
    -moz-transition: all 2s ease-out 2.4s;
    -webkit-transition: all 2s ease-out 2.4s;
    transition: all 2s ease-out 2.4s;
}


.history-sidebar-inner .parImg {
    position: absolute;
    right: 20%;
    bottom: 5%;
    margin: 0;
    opacity: 0;
    display: block;
    width: 120px;
}

.section.active .history-sidebar-inner .parImg{
    opacity: 1;
    -ms-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -o-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -moz-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 2s;
}

.moveable{
    position: absolute;
    top: 150px;
    width: 100%;
    left: 0;
}

.logo-container{
    opacity: 1;
    width: 100%;
    /*background: rgba(0,0,0,0);*/
    padding: 10px;
    font-size: 1.6vh;
    -moz-transition: opacity 0.2s ease 0s, 
        top 0s ease 1s,
        font-size 0s ease 1s,
        background 0s ease 1s;
    -webkit-transition: opacity 0.2s ease 0s, 
        top 0s ease 1s,
        font-size 0s ease 1s,
        background 0s ease 1s;
    transition: opacity 0.2s ease 0s, 
        top 0s ease 1s,
        font-size 0s ease 1s,
        background 0s ease 1s;
}

.logo-container img {
    height: 12vh;
    /*margin-top: 40px;*/
    -webkit-transform: translate(0,100px);
    -ms-transform: translate(0,100px);
    -o-transform: translate(0,100px);
    -moz-transform: translate(0,100px);
    transform: translate(0,100px);
    opacity: 0;
    -ms-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -webkit-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}

.section.active .logo-container img {
    /* margin-top: 0px; */
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    -o-transition: all 2s cubic-bezier(0.34, 0.99, 0.64, 0.99) 1.2s;
    -ms-transition: all 2s cubic-bezier(0.34, 0.99, 0.64, 0.99) 1.2s;
    -moz-transition: all 2s cubic-bezier(0.34, 0.99, 0.64, 0.99) 1.2s;
    -webkit-transition: all 2s cubic-bezier(0.34, 0.99, 0.64, 0.99) 1.2s;
    transition: all 2s cubic-bezier(0.34, 0.99, 0.64, 0.99) 1.2s;
}

.history-sidebar .main-containt{
    padding: 2% 10px;
    opacity: 1;
}


.section{
    min-height: 600px!important;
    min-width: 850px!important;
}


/* SECTION CONTEST */




/* SIDEBAR */
.contest-sidebar{
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: #fff;
    padding: 40px;
    box-sizing: border-box;
    font-size: 1em;
}


.header-sidebar{
    font-size: 1.5em;
    height: 25%;
}

.sub1-contest{
    margin: 0;
    font-size: 0.8em;
    font-weight: 700;
}

.sub2-contest{
    margin: 0 auto;
    font-size: 0.5em;
    margin-top: 5px;
    line-height: 1em;
    width: 280px;
    max-width: 100%;
}

.contest-title{
    display: block;
    margin: 10px auto;
    line-height: 1em;
    width: 239px;
    max-width: 100%;
    font-weight: 700;
}

.contest-title .headtop1{
    text-align: left;
    width: 100%;
    display: inline-block;
}

.contest-title .headtop2{
    text-align: right;
    width: 100%;
    display: inline-block;
}

.form-sidebar {
    margin-top: 20px;
    font-size: 0.8em;
    height: 75%;
}

.inputline{
    margin-bottom: 5px;
    height: 10%;
    box-sizing: border-box;
}

.inputline.textarea{
    height: 25%;
}

.form-sidebar span{
    width: 100%;
    display: inline-block;
}

.form-sidebar label{
    text-align: left;
    height: 100%;
}

.form-sidebar input{
    display: block;
    width: 100%;
    background-color: #fff;
    border: 1px solid #252525;
    padding: 5px;
    outline: none;
}

.form-sidebar textarea{
    display: block;
    width: 100%;
    background-color: #fff;
    border: 1px solid #252525;
    padding: 5px;
    outline: none;
    resize: none;
    height: 100px;
}

/* MAIN CONTEST */
.contest-main{
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    box-sizing: border-box;
    background-color: #252525;
    background-image: url("../images/contest/contest_background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.contest-panel{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 65%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.panel-title1{
    font-weight: 700;
    font-size: 1.8em;
    color: #fff;
    height: 20%;
    width: 100%;
    margin: 0 auto;
}

.shops-panel-out{
    width: 95%;
    height: 12vw;
    position: relative;
    margin: 0 auto;
}

.shops-panel{
    width: 95%;
    height: 12vw;
    position: relative;
    margin: 0 auto;
}

.shops-panel-inner{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 100%;
    box-sizing: border-box;
    border: 5px solid #fff;
}

.arrows-panel{
    position: absolute;
    top: 0;
    left: -0.5%;
    z-index: 0;
    width: 101%;
    height: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.panelarrow{
    background-color: rgba(0,0,0,0.2);
    color: #000;
    box-sizing: border-box;
    width: 20px;
    height: 100%;
    cursor: pointer;
    position: absolute;
    /*border: 5px solid #fff;*/
    line-height: 11.5vw;
    -webkit-filter: invert(100%);
    filter: invert(100%);
    -webkit-pointer-events: all;
    -moz-pointer-events: all;
    -ms-pointer-events: all;
    -o-pointer-events: all;
    pointer-events: all;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.panelarrow:hover{
    background-color: rgba(0,0,0,0.4);
}

.leftar{
    right: 50%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.rightar{
    left: 50%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.shops-panel:hover .leftar{
    right: 100%;
}

.shops-panel:hover .rightar{
    left: 100%;
}

.shop{
    box-sizing: border-box;
    float: left;
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
}

.shop-overlay{
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.shop-bk{
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.checkit{
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid #000;
    cursor: pointer;
}

.checkit.checked{
    background-image: url(../images/check2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 84%;
}

.invertColor{
    -webkit-filter: invert(100%);
    filter: invert(100%);
}


.watchit{
    position: absolute;
    top: 13vw;
    left: 0;
    width: 100%;
}

.watchit-bt{
    background-color: #fff;
    width: 45px;
    height: 45px;
    margin: 0 auto;
    transform: rotate(45deg);
    border: 1px solid #000;
    cursor: pointer;
}

.bxshad{
    transition: all 0.3s ease-in-out;
}

.bxshad:hover{
    -webkit-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.75);
}

.watchit-bt-txt{
    font-size: 0.3em;
    padding: 12px;
    text-align: center;
    transform: rotate(-45deg);
    font-weight: 700;
}

#shop1 .shop-bk{
    background-image: url(../images/contest/general/barber_tip1.jpg);
}

#shop2 .shop-bk{
    background-image: url(../images/contest/general/barber_tip2.jpg);
}

#shop3 .shop-bk{
    background-image: url(../images/contest/general/barber_tip3.jpg);
}

#shop4 .shop-bk{
    background-image: url(../images/contest/general/barber_tip4.jpg);
}

#shop5 .shop-bk{
    background-image: url(../images/contest/general/barber_tip5.jpg);
}


.submitwrap{
    width: 100%;
    margin-top: 85px;
}

.submit{
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 1px solid #000;
    transform: rotate(45deg);
    margin: 0 auto;
    cursor: pointer;
}

.submit-bt-txt{
    transform: rotate(-45deg);
    padding: 26px 15px 20px 0px;
    font-weight: 700;
    font-size: 1em;
}



/* CONTEST END*/


.map-sidebar{
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    background: transparent;
    height: 100%;
    z-index: 10;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    padding: 0;
    overflow: hidden;
    z-index: 5;
        max-width: 550px;
}
.map-sidebar2{
    position: absolute;
    top: 0;
    left: -100%;
    width: 25%;
    background: transparent;
    height: 100%;
    z-index: 10;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    padding: 0;
    overflow: hidden;
    z-index: 5;
    background-color: #000;
}
.map-sidebar > img{
    width: 100%;
    height: 100%;
}
.section.active .map-sidebar{
    left: 0;
    
}

.section.active .map-sidebar, .section.active .map-sidebar2{
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.map-sidebar .bs-header{
    /*background: rgba(255,255,255,1);*/
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding-top: 4em;
    position: absolute;
    text-align: right;
    z-index: 100;
}
.map-sidebar .bs-header h2{
    color: #000;
}
.map-sidebar .bs-header img{
    max-width: 150px;
}

.map-sidebar-inner{
    transform: rotate(-90deg);
    width: 100%;
    /* height: 100%; */
    white-space: nowrap;
    color: #fff;
    text-align: center;
    /* background-color: #000; */
    position: absolute;
    top: 55%;
    left: 0;
    font-size: 2em;
    text-align: center;
}

.map-stores-outter{
    position: absolute;
    top: 0;
    right: -100%;
    width: 60%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 2;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.active .map-stores-outter{
    right: 0;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.map-stores-inner{
    padding: 50px 0px 50px 50px;
    height: 100%;
    width: 100%;
}

.map-stores-inner-fix{
    padding-right: 50px;
}

.map-stores-city{
    display: block;
    margin-bottom: 25px;
    position: relative;
}

.map-stores-header{
    color: #000;
    text-align: left;
    font-weight: 700;
    border-bottom: 5px solid #ed3b00;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
}

.map-stores-container{
    width: 100%;
    padding-top: 25px;
    text-align: left;
}

.map-store{
    vertical-align: top;
    width: 25%;
    padding: 20px 10px 0px 0px;
    display: inline-block;
}

.map-store-inner{
    background-color: #fff;
    border: 2px solid #252525;
    -o-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.map-store-inner h3{
    font-size: 0.8em;
    border-bottom: 2px solid #252525;
    padding: 10px;
    margin: 0;
}
.map-store-inner h4{
    margin: 0 0 2px 0;
}
.map-store-inner .store-info{
    font-size: 0.6em;
    text-align: left;
    padding: 10px;
    color: #ed3b00;
}

.map-store-inner .store-info > *{
    width: 100%;
    display: block;
}


.fb-form{
    position: relative;
    display: block;
    width: 100%;
    padding: 0 30px 25px;
}
.fb-form h2{
    color: #000;
    font-size: 1.2em;
    text-align: center;
    width:100%;
    padding-bottom: 1.5em;
}
.fb-form label{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 1em;
    font-weight: 300;
    color: #000;
    text-align: left;
}
.fb-form input{
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 1em;
    font-weight: 300;
    color: #000;
    text-align: left;
    margin-bottom: 15px;
    font-family: 'Roboto Slab';
}
.fbsubmit{
    border: 1px solid #000;
    color: #000;
    display: block;
    height: 80px;
    margin: 2em auto;
    padding-top: 30px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transform: rotate(45deg);
    width: 80px;
}
.fbsubmit span{
    display: block;
    font-size: 0.9em;
    transform: rotate(-45deg);
}
.fbsubmit:hover{
    background:#000;
    color: #fff;
}

.map-container2{
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1;
    opacity: 1;
    background-image: url(../images/mapath.jpg);
    background-size: cover;
    background-position: 0 0;
}

.section.goAnim.active .right-sidebar.hidden{
    right: -100%;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.bs-header{
    position: relative;
    width: 100%;
    display: block;
    padding: 25px 40px;
    text-align: left;
}

.bs-header2{
    width: 100%;
    padding: 10px 40px;
}

.playbt{
    height: 100%;
    width: 100%;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.section.goAnim.active .playbt{
    opacity: 1;
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 1s;
}

.section.goAnim.active .playbt.hidden{
    opacity: 0;
}

.pvid {
    display: inline-block;
    width: 125px;
    height: 125px;
    position: relative;
    z-index: 100;
}

.pvid img{
    margin-top: -40px;
    width: 125px;
    height: 125px;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
}

.section .pvid .img-front{
    opacity: 1;
    z-index: 10;
}

.logo-wrap{
    position: relative;
    display: block;
    width: 35%;
    max-width: 140px;
    float: right;
    cursor: pointer;
}

.logo-wrap .small-logo{
    width: 90%;
    float: none;
}

.small-logo{
    position: relative;
    display: block;
    width: 35%;
    max-width: 140px;
    float: right;
}

.clear{
    clear: both;
}

.bs-header h2,.bs-header2 h2 {
    bottom: 25px;
    color: #fff;
    font-size: 1.8em;
    line-height: 1.1em;
    text-align: center;
    width: 100%;
    display: block;
    margin: 80px 0 0 0;
}
.bshop-text{
    color: #fff;
    display: block;
    font-size: 1.1em;
    font-weight: 400;
    height: 40%;
    line-height: 1.4em;
    /*overflow: auto;*/
    padding: 0px 40px;
    position: relative;
    text-align: justify;
    max-height: 310px;
    font-family: 'Roboto';
}
.bshop-text > div{
    padding: 0 ;
    font-family: 'Roboto';
}
.bshop-text *{
    font-family: 'Roboto';
    line-height: 1.35em;
}
.slimScrollBar{
    cursor: pointer;
}
.other-bshops{
    position: absolute;
    bottom: 6.2em;
    right: 0;
    display: block;
    width: 100%;
    padding: 1em 2em;
    -webkit-pointer-events: all;
    -moz-pointer-events: all;
    -ms-pointer-events: all;
    -o-pointer-events: all;
    pointer-events: all;
}
.other-bshops h2{
    color: #fff;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 1em;
}
.bshops-carousel{
    position: relative;
    display: block;
    width:100%;
    max-width: 90%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    /*min-height: 60px;*/
}

    .bshops {
        margin:0;
        padding:0;
        list-style:none;
        width: 100%;
        position: relative;
    }
        
    .bshops li {
        text-align:center;
    }
        
    .bshops li span {
        display:block;
        margin:0px;
        background:#325590;
        cursor:pointer;
        opacity:0.7;
        -moz-transition: all 0.28s ease-in-out  0s;
        -webkit-transition: all 0.28s ease-in-out  0s;
        -o-transition: all 0.28s ease-in-out  0s;
        -ms-transition: all 0.28s ease-in-out  0s;  
        transition: all 0.28s ease-in-out  0s;
        position: relative;
    }
        
    .bshops li span > img.pb{
        position: absolute;
        bottom: 25%;
        left: 37%;
        width: 30%;
        z-index: 5;
        opacity: 0;
        -moz-transition: all 0.28s ease-in-out  0s;
        -webkit-transition: all 0.28s ease-in-out  0s;
        -o-transition: all 0.28s ease-in-out  0s;
        -ms-transition: all 0.28s ease-in-out  0s;  
        transition: all 0.28s ease-in-out  0s;
    }

   .bshops li span:hover img.pb{
        -moz-transition: all 0.28s ease-in-out  0s;
        -webkit-transition: all 0.28s ease-in-out  0s;
        -o-transition: all 0.28s ease-in-out  0s;
        -ms-transition: all 0.28s ease-in-out  0s;  
        transition: all 0.28s ease-in-out  0s;
        opacity: 0.9;
     }
        
    .bshops li span > img.simage{
         width: 100%;
    }

    .bshops li span:hover{
        opacity:1;
        -moz-transition: all 0.28s ease-in-out  0s;
        -webkit-transition: all 0.28s ease-in-out  0s;
        -o-transition: all 0.28s ease-in-out  0s;
        -ms-transition: all 0.28s ease-in-out  0s;  
        transition: all 0.28s ease-in-out  0s;
    }
        
    .bshops li span.active{
        opacity: 1;
    }

    .bshops li span.active img.pb{
        transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        -moz-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        -webkit-transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0s;
        opacity: 0.9;
     }

.bshops.slick-initialized .slick-slide.close{
    display: none;
}
        
        /* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-loading .slick-list {
    background: #fff url("./ajax-loader.gif") no-repeat scroll center center;
}
@font-face {
    font-family: "slick";
    font-style: normal;
    font-weight: normal;
    src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
}
/*.slick-prev, .slick-next {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 100%;
    line-height: 0;
    margin-top: -10px;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 10px;
    width: 20px;
    background-color: rgba(255,255,255,1);
    transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
    -moz-transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
    -webkit-transition: all 0.1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
}*/

.slick-slider {
    margin-bottom: 30px;
}

.slick-next, .slick-prev{
    background-color: transparent;
    cursor: pointer;
    outline: none;
}

.slick-prev{
    width: 0px;
    height: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid #fff;
    border-left: 0;
    font-size: 0;
    padding: 0;
    margin: 0;
    left: -25px;
    position: absolute;
    top: -ms-calc(60% - 30px);
    top: -o-calc(60% - 30px);
    top: -moz-calc(60% - 30px);
    top: -webkit-calc(60% - 30px);
    top: calc(60% - 30px);
}

.slick-next {
    width: 0px;
    height: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #fff;
    border-right: 0;
    font-size: 0;
    padding: 0;
    margin: 0;
    right: -25px;
    position: absolute;
    top: -ms-calc(60% - 30px);
    top: -o-calc(60% - 30px);
    top: -moz-calc(60% - 30px);
    top: -webkit-calc(60% - 30px);
    top: calc(60% - 30px);
}



.slick-dots {
    bottom: -45px;
    display: block;
    list-style: outside none none;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
.slick-dots li {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    position: relative;
    width: 20px;
}
.slick-dots li button {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    outline: none;
    padding: 5px;
    width: 20px;
}
.slick-dots li button:hover, .slick-dots li button:focus {
    outline: none;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
    opacity: 1;
    outline: none;
}
.slick-dots li button::before {
    color: white;
    content: "•";
    font-family: "slick";
    font-size: 6px;
    height: 20px;
    left: 0;
    line-height: 20px;
    opacity: 0.25;
    position: absolute;
    text-align: center;
    top: 0;
    width: 20px;
}
.slick-dots li.slick-active button::before {
    color: white;
    opacity: 0.75;
}

.loaderDiv{
    position: fixed;
    z-index: 999999;
    background: #000;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    display: none;
    transition: none;
}
.loaderTable{
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
}
.loaderCell{
    display: table-cell;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    color:#fff;
}

body.noOverflow{
    overflow: hidden;
}

@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-moz-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-ms-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-moz-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@-o-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
@keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0 0 0 0;
  }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1;
  }
  100% {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0;
  }
}
.uil-ripple-css {
  background: none;
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
}
.uil-ripple-css div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: 50%;
  border-width: 12px;
  border-style: solid;
  -ms-animation: uil-ripple 2s ease-out infinite;
  -moz-animation: uil-ripple 2s ease-out infinite;
  -webkit-animation: uil-ripple 2s ease-out infinite;
  -o-animation: uil-ripple 2s ease-out infinite;
  animation: uil-ripple 2s ease-out infinite;
}
.uil-ripple-css div:nth-of-type(1) {
  border-color: #02528F;
}
.uil-ripple-css div:nth-of-type(2) {
  border-color: #fff;
  -ms-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}  

.other-bshops.altern {
    bottom: -99999em;
    display: block;
    padding: 1em 2em;
    position: absolute;
    right: 0;
    width: 90%;
    z-index: 999;
}

.other-bshops.altern.opened{
    bottom: 5%;
}

.barberTipsIntro{
    position: relative;
    display: table;
    width: 65%;
    height: 100%;
    background: rgba(0,0,0,0.35);
}
.barberTipsIntro > div{
    display: table-cell;
    color: #fff;
    font-weight: 800;
    font-size: 13vh;
    text-align: right;
    padding-right: 15px;
    vertical-align: middle;
    line-height: 1em;
    height: 100%;
    width: 100%;
}
.barberTipsIntro > div > span{
    display: block;
    position: absolute;
    -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.barberTipsIntro > div > .intro1{
    right: 115%;
    top: 31%;
}
.barberTipsIntro > div > .intro2{
    top: 42%;
    right: 115%;
}
.barberTipsIntro > div > .intro3{
    top: 53%;
    right: 115%;
}

.section.active .barberTipsIntro > div > .intro1{
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.section.active .barberTipsIntro > div > .intro2{
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.section.active .barberTipsIntro > div > .intro3{
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
}

.section.active .barberTipsIntro > div > span{
    right: 1%;
}

.barberTipsRight{
    position: absolute;
    right: -100%;
    top: 0;
    width: 35%;
    background: rgba(0,0,0,1);
    padding: 25px;
    height: 100%;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.section.active .barberTipsRight{
    right: 0;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.barberTipsRight > div{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

.barberTipsRight > div > .bs-header{
    position: absolute;
    top: 0;
    left:0;
    height: 25%;
}

/* BARBER TIPS 2 */

.section.active .bs-header2{
    opacity: 1;
}

.section.active .carousel{
    left: 0;
    width: 100%;
}

.theBarberTips{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
}

.theBarberShops{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1000;
    top: 0;
    left: 0;
    opacity: 1;
}

.theBarberShops.close{
    opacity: 0;
    top: -100;
    -ms-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 0s, top 0s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -o-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 0s, top 0s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -moz-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 0s, top 0s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 0s, top 0s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1) 0s, top 0s cubic-bezier(0.77, 0, 0.175, 1) 2s;
}

.theBarberTips-inner, .theBarberShops-inner{
    width: 100%;
    height: 100%;
    position: relative;
}

.barberTips-header, .theBarberShops-header{
    /*width: 100%;
    height: 12%;
    position: relative;*/
    width: 100%;
    height: 125px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    background-color: #000;
}
.barberTips-header.history{
    background:#000;
}

.barberTips-header .small-logo, .theBarberShops-header .small-logo{
    max-height: 100%;
    display: inline-block;
}

.barberTips-header .bs-header2, .theBarberShops-header .bs-header2{
    position: absolute;
    opacity: 0;
    top: 0;
    height: 100%;
    -ms-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    text-align: right;
    vertical-align: middle;
}

.active .barberTips-header .bs-header2, .active .theBarberShops-header .bs-header2{
    -ms-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.barberTips-header .bs-header2 h2, .theBarberShops-header .bs-header2 h2{
    display: inline-block;
    position: absolute;
    right: 0;
    vertical-align: middle;
    margin: 0;
    bottom: auto;
    margin-left: 25px;
    text-align: center;
    top: 38%;
    line-height: 100%;
    margin: 0;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
}

.barberTips-container{
    height: 100%;
    height: -ms-calc(100% - 125px);
    height: -o-calc(100% - 125px);
    height: -moz-calc(100% - 125px);
    height: -webkit-calc(100% - 125px);
    height: calc(100% - 125px);
    width: 100%;
    background-color: #252525;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 125px;
    left: 0;
}

#form{
    position: absolute;
    width: 450px;
    height: 100%;
    top: 0;
    left: 100%;
    z-index: 10;
    background: #fff;
    -webkit-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transform: translate3d(-90px,0,0);
    -moz-transform: translate3d(-90px,0,0);
    -ms-transform: translate3d(-90px,0,0);
    -o-transform: translate3d(-90px,0,0);
    transform: translate3d(-90px,0,0);
}

#form.open{
    -webkit-transform: translate3d(-100%,0,0);
    -moz-transform: translate3d(-100%,0,0);
    -ms-transform: translate3d(-100%,0,0);
    -o-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

#formButtons{
    position: absolute;
    width: 90px;
    height: 90px;
    top: 40%;
    left: -45px;
}

#formButtons img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    -webkit-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

#formButtons .open{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

#form.open #formButtons .open{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

#formButtons .close{
    opacity: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#form.open #formButtons .close{
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

#formInner {
    padding: 6% 12%;
    height: 100%;
    opacity: 0;
    -webkit-transform: translate3d(50px,0,0);
    -moz-transform: translate3d(50px,0,0);
    -ms-transform: translate3d(50px,0,0);
    -o-transform: translate3d(50px,0,0);
    transform: translate3d(50px,0,0);
    -webkit-transition: all 0.74s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.74s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.74s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.74s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.74s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

#form.open #formInner{
    opacity: 1;
    -webkit-transform: translate3d(0px,0,0);
    -moz-transform: translate3d(0px,0,0);
    -ms-transform: translate3d(0px,0,0);
    -o-transform: translate3d(0px,0,0);
    transform: translate3d(0px,0,0);
    -webkit-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -ms-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

#formInner h2 {
    font-size: 3em;
    line-height: 1em;
    margin: 0;
    padding-bottom: 3%;
}

#formInner .p1{
    margin: 0;
    padding-top: 2%;
    padding-bottom: 8%;
}

#formInner .p2{
    margin: 0;
    padding-top: 3%;
    padding-bottom: 6%;
    font-size: 0.9em;
}

#formInner input{
    display: block;
    width: 100%;
    height: 5%;
    max-height: 40px;
    min-height: 30px;
    border: 1px solid #6e6e70;
    outline: none;
    margin-bottom: 3%;
    padding: 2% 4%;
}

#formInner textarea{
    display: block;
    border: 1px solid #6e6e70;
    outline: none;
    width: 100%;
    height: 22%;
    resize: none;
    padding: 4% 4%;
}

#formInner #formSubmit{
    background: #6e6e70;
    cursor: pointer;
    width: 100%;
    height: 5%;
    max-height: 40px;
    min-height: 30px;
    margin-top: 3%;
    margin-bottom: 3%;
    color: #fff;
    vertical-align: middle;
    font-size: 0.9em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#formInner #formSubmit:hover{
    background: #5f5f5f;
}

#formInner #formSubmit:active{
    background: #424242;
}

#formInner #formSubmit::before{
    display: inline-block;
    content: "";
    vertical-align: middle;
    height: 100%;
}

#formInner #return .rgReturn{
    color: #288e14;
}

#formInner #return .erReturn{
    color: #c14545;
}


.newCarousel{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 5;
    padding-left: 20px;
    padding-right: 130px;
    
    opacity: 1;
    -webkit-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: transform 1.28s cubic-bezier(0.77, 0, 0.175, 1) 0s,
        opacity 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transform: translate3d(0px,0,0);
    -moz-transform: translate3d(0px,0,0);
    -ms-transform: translate3d(0px,0,0);
    -o-transform: translate3d(0px,0,0);
    transform: translate3d(0px,0,0);
}

.newCarousel.open{
    opacity: 0.5;
    transition: transform 1.28s cubic-bezier(0.77, 0, 0.175, 1) 0.3s,
        opacity 0.84s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transform: translate3d(-360px,0,0);
    -moz-transform: translate3d(-360px,0,0);
    -ms-transform: translate3d(-360px,0,0);
    -o-transform: translate3d(-360px,0,0);
    transform: translate3d(-360px,0,0);
}

.newCarouselInner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}

.tipsCarouselHeader{
    color: #fff;
    flex: 1 1 120px;
    padding-left: 110px;
}

.tipsCarouselHeader p{
    max-width: 600px;
    width: 100%;
    padding: 25px;
    margin: 0 auto;
    font-size: 0.9em;
}

.tipsCarouselPanel{
    padding-top: 25px;
    flex: 1 1 120px;
    text-align: center;
}

.tipsCarouselPanel .bulletContainer{
    display: inline-block;
    margin: 0 auto;
}

.tipsCarouselPanel .bulletContainer .bullet{
    display: inline-block;
    margin-right: 5px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    cursor: pointer;
    background: #f8ffff;
}

.tipsCarouselPanel .bulletContainer .bullet.selected{
    background: #202126;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.tipsCarouselMain{
    flex: 1 1 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.itemsBox{
    flex: 1 1 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    overflow: hidden;
    position: relative;
}

.tipsCarouselMain .item{
    flex: 1 1 100%;
    padding: 1vw;
    color: #fff;
    height: 90%;
}

.tipsCarouselMain .item .itemInner{
    width: 100%;
    height: 90%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}

.tipsCarouselMain .item .itemInner .itemHeader{
    background: #908377;
    height: 33%;
    width: 100%;
    position: relative;
    padding: 1.5vw;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}

.tipsCarouselMain .item .itemInner .itemHeader h2{
    margin: 0;
    font-weight: 400;
    font-size: 1em;
}

.tipsCarouselMain .item .itemInner .itemHeader .line{
    position: absolute;
    top: -10px;
    background: #fffffd;
    width: 24%;
    left: 38%;
    height: 20px;
}

.tipsCarouselMain .item .itemInner .itemBody{
    background: #000;
    height: 77%;
    width: 100%;
    position: relative;
    padding: 1.5vw;
}

.tipsCarouselMain .item .itemInner .itemBody p{
    margin: 0;
    font-weight: 400;
    font-size: 1em;
}

.loadImg .barberTips-container{
    background-image: url(../images/bg2.jpg);   
}

.arrowPanel{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -ms-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.active .arrowPanel{
    opacity: 1;
    -webkit-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -ms-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 0.54s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.arrowPanel .arl{
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    -moz-transform: translate3d(0,-50%,0);
    -ms-transform: translate3d(0,-50%,0);
    -o-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    -webkit-pointer-events: all;
    -moz-pointer-events: all;
    -ms-pointer-events: all;
    -o-pointer-events: all;
    pointer-events: all;
    cursor: pointer;
    width: 50px;
}

.arrowPanel .arr{
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate3d(0,-50%,0);
    -moz-transform: translate3d(0,-50%,0);
    -ms-transform: translate3d(0,-50%,0);
    -o-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    -webkit-pointer-events: all;
    -moz-pointer-events: all;
    -ms-pointer-events: all;
    -o-pointer-events: all;
    pointer-events: all;
    cursor: pointer;
    width: 50px;
}
    

.theBarberShops-container{
    
    height: 100%;
    height: -ms-calc(100% - 125px);
    height: -o-calc(100% - 125px);
    height: -moz-calc(100% - 125px);
    height: -webkit-calc(100% - 125px);
    height: calc(100% - 125px);
    width: 100%;
    background-color: #252525;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 125px;
    left: 0;
    z-index: 100;
}

.loadImg .theBarberShops-container{
    background-image: url(../images/extras/shops_bg.jpg);
}

.carousel{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0%;
    top: 0;
    opacity: 1;
    -ms-transition: all 0s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -o-transition: all 0s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -moz-transition: all 0s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -webkit-transition: all 0s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    transition: all 0s cubic-bezier(0.77, 0, 0.175, 1) 1s;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.active .carousel{
    -ms-transition: all 1.5s cubic-bezier(0.34, 0.99, 0.64, 0.99) 0.6s;
    -o-transition: all 1.5s cubic-bezier(0.34, 0.99, 0.64, 0.99) 0.6s;
    -moz-transition: all 1.5s cubic-bezier(0.34, 0.99, 0.64, 0.99) 0.6s;
    -webkit-transition: all 1.5s cubic-bezier(0.34, 0.99, 0.64, 0.99) 0.6s;
    transition: all 1.5s cubic-bezier(0.34, 0.99, 0.64, 0.99) 0.6s;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.carousel-inner{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
    opacity: 1;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.carousel-item{
    display: block;
    height: 100%;
    background-position: center center;
    background-size: cover;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 0s cubic-bezier(.62,.05,.51,.73) 0.9s;
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 0s cubic-bezier(.62,.05,.51,.73) 0.9s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 0s cubic-bezier(.62,.05,.51,.73) 0.9s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 0s cubic-bezier(.62,.05,.51,.73) 0.9s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 0s cubic-bezier(.62,.05,.51,.73) 0.9s;
    position: relative;
    width: 20%;
    cursor: pointer;
    vertical-align: top;
    opacity: 1;
    
    -moz-flex: 1 1 10%;
    -ms-flex: 1 1 10%;
    -webkit-flex: 1 1 10%;
    flex: 1 1 10%;
}

.carousel-item.item0{
    -o-transform: translate3d(-50vw,0,9px);
    -ms-transform: translate3d(-50vw,0,9px);
    -moz-transform: translate3d(-50vw,0,9px);
    -webkit-transform: translate3d(-50vw,0,9px);
    transform: translate3d(-50vw,0,9px);
    z-index: 10;
}
.carousel-item.item1{
    -ms-transform: translate3d(-70vw,0,8px);
    -o-transform: translate3d(-70vw,0,8px);
    -moz-transform: translate3d(-70vw,0,8px);
    -webkit-transform: translate3d(-70vw,0,8px);
    transform: translate3d(-70vw,0,8px);
    z-index: 9;
}
.carousel-item.item2{
    -ms-transform: translate3d(-90vw,0,7px);
    -o-transform: translate3d(-90vw,0,7px);
    -moz-transform: translate3d(-90vw,0,7px);
    -webkit-transform: translate3d(-90vw,0,7px);
    transform: translate3d(-90vw,0,7px);
    z-index: 8;
}
.carousel-item.item3{
    -ms-transform: translate3d(-110vw,0,6px);
    -o-transform: translate3d(-110vw,0,6px);
    -moz-transform: translate3d(-110vw,0,6px);
    -webkit-transform: translate3d(-110vw,0,6px);
    transform: translate3d(-110vw,0,6px);
    z-index: 7;
}
.carousel-item.item4{
    -ms-transform: translate3d(-130vw,0,5px);
    -o-transform: translate3d(-130vw,0,5px);
    -moz-transform: translate3d(-130vw,0,5px);
    -webkit-transform: translate3d(-130vw,0,5px);
    transform: translate3d(-130vw,0,5px);
    z-index: 6;
}
.carousel-item.item5{
    -ms-transform: translate3d(-150vw,0,4px);
    -o-transform: translate3d(-150vw,0,4px);
    -moz-transform: translate3d(-150vw,0,4px);
    -webkit-transform: translate3d(-150vw,0,4px);
    transform: translate3d(-150vw,0,4px);
    z-index: 6;
}
.carousel-item.item6{
    -ms-transform: translate3d(-170vw,0,3px);
    -o-transform: translate3d(-170vw,0,3px);
    -moz-transform: translate3d(-170vw,0,3px);
    -webkit-transform: translate3d(-170vw,0,3px);
    transform: translate3d(-170vw,0,3px);
    z-index: 6;
}
.carousel-item.item7{
    -ms-transform: translate3d(-190vw,0,2px);
    -o-transform: translate3d(-190vw,0,2px);
    -moz-transform: translate3d(-190vw,0,2px);
    -webkit-transform: translate3d(-190vw,0,2px);
    transform: translate3d(-190vw,0,2px);
    z-index: 6;
}

.active .carousel-item.item0{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.2s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.2s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.2s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.2s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.4s;
    z-index: 10;
    -ms-transform: translate3d(0,0,9px);
    -o-transform: translate3d(0,0,9px);
    -moz-transform: translate3d(0,0,9px);
    -webkit-transform: translate3d(0,0,9px);
    transform: translate3d(0,0,9px);
}

.active .carousel-item.item1{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.3s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.3s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.3s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.3s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.5s;
    z-index: 9;
    -ms-transform: translate3d(0,0,8px);
    -o-transform: translate3d(0,0,8px);
    -moz-transform: translate3d(0,0,8px);
    -webkit-transform: translate3d(0,0,8px);
    transform: translate3d(0,0,8px);
}

.active .carousel-item.item2{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.4s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.4s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.4s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.4s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.6s;
    z-index: 8;
    -ms-transform: translate3d(0,0,7px);
    -o-transform: translate3d(0,0,7px);
    -moz-transform: translate3d(0,0,7px);
    -webkit-transform: translate3d(0,0,7px);
    transform: translate3d(0,0,7px);
}

.active .carousel-item.item3{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.5s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.5s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.5s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.5s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.7s;
    z-index: 7;
    -ms-transform: translate3d(0,0,6px);
    -o-transform: translate3d(0,0,6px);
    -moz-transform: translate3d(0,0,6px);
    -webkit-transform: translate3d(0,0,6px);
    transform: translate3d(0,0,6px);
}

.active .carousel-item.item4{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.6s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.6s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.6s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.6s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.8s;
    z-index: 6;
    -ms-transform: translate3d(0,0,5px);
    -o-transform: translate3d(0,0,5px);
    -moz-transform: translate3d(0,0,5px);
    -webkit-transform: translate3d(0,0,5px);
    transform: translate3d(0,0,5px);
}

.active .carousel-item.item5{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.7s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.7s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.7s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.7s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.9s;
    z-index: 5;
    -ms-transform: translate3d(0,0,4px);
    -o-transform: translate3d(0,0,4px);
    -moz-transform: translate3d(0,0,4px);
    -webkit-transform: translate3d(0,0,4px);
    transform: translate3d(0,0,4px);
}

.active .carousel-item.item6{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.8s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.8s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.8s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.8s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 1.0s;
    z-index: 4;
    -ms-transform: translate3d(0,0,3px);
    -o-transform: translate3d(0,0,3px);
    -moz-transform: translate3d(0,0,3px);
    -webkit-transform: translate3d(0,0,3px);
    transform: translate3d(0,0,3px);
}

.active .carousel-item.item7{
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.9s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.9s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.9s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.5s cubic-bezier(0.49, 0.54, 0.1, 1.01) 0.9s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s, transform 1.8s cubic-bezier(0.49, 0.54, 0.1, 1.01) 1.1s;
    z-index: 3;
    -ms-transform: translate3d(0,0,2px);
    -o-transform: translate3d(0,0,2px);
    -moz-transform: translate3d(0,0,2px);
    -webkit-transform: translate3d(0,0,2px);
    transform: translate3d(0,0,2px);
}

.carousel-train{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.carousel-item-show{
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 100%;
    left: 0;
    background-color: #000;
    z-index: 101;
    opacity: 1;
    -ms-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -ms-transform: translate3d(0,0,100px);
    -o-transform: translate3d(0,0,100px);
    -moz-transform: translate3d(0,0,100px);
    -webkit-transform: translate3d(0,0,100px);
    transform: translate3d(0,0,100px);
}

.carousel-item-show.realopen{
    -ms-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    top: 0;
}

.carousel-item-show.realopen .car-description2{
     right: 0;
}

.carousel-item.opened{
    cursor: auto;
}

.carousel-item-show-img-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    left: 0;
    background-color: #fff;
    -ms-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
    -o-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
    -moz-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
    -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
    transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
}

.carousel-item-show.realopen .carousel-item-show-img-bg{
    bottom: 0;
    -ms-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.carousel-item-show-img{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    left: 0;   
    -ms-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    background-size: cover;
}

.loadImg .cisi1{
    background: url('../images/extras/TIPS/background/ORIGINAL.jpg') no-repeat center center;
}

.loadImg .cisi2{
    background: url('../images/extras/TIPS/background/BAR.jpg') no-repeat center center;
}

.loadImg .cisi3{
    background: url('../images/extras/TIPS/background/DON.jpg') no-repeat center center;
}

.loadImg .cisi4{
    background: url('../images/extras/TIPS/background/PAUL.jpg') no-repeat center center;
}

.loadImg .cisi5{
    background: url('../images/extras/TIPS/background/BARBER.jpg') no-repeat center center;
}

.carousel-item-show.realopen .carousel-item-show-img{
    bottom: 0;
    -ms-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 1.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.carousel-item-show-img-cl{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
}

.tiploader-inner{
    position: relative;
    height: 220px;
    margin-top: 15%;
    opacity: 0;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.realopen .tiploader-inner{
    opacity: 1;
    margin-top: 2%;
    -ms-transition: opacity 2s ease 1s, margin-top 1s cubic-bezier(0.29, 0.78, 0.67, 0.99) 2.65s;
    -o-transition: opacity 2s ease 1s, margin-top 1s cubic-bezier(0.29, 0.78, 0.67, 0.99) 2.65s;
    -moz-transition: opacity 2s ease 1s, margin-top 1s cubic-bezier(0.29, 0.78, 0.67, 0.99) 2.65s;
    -webkit-transition: opacity 2s ease 1s, margin-top 1s cubic-bezier(0.29, 0.78, 0.67, 0.99) 2.65s;
    transition: opacity 2s ease 1s, margin-top 1s cubic-bezier(0.29, 0.78, 0.67, 0.99) 2.65s;
}

.tiploader .tiploader-inner .tip{
    width: 70px;
    display: block;
    margin: 0 auto;
}

.stripes-outter{
    position: relative;
    margin: 0 auto;
    width: 480px;
    opacity: 1;
    -ms-transition: all 0s ease-in-out 2s;
    -o-transition: all 0s ease-in-out 2s;
    -moz-transition: all 0s ease-in-out 2s;
    -webkit-transition: all 0s ease-in-out 2s;
    transition: all 0s ease-in-out 2s;
}

.realopen .stripes-outter{
    opacity: 0;
    -ms-transition: all 0.4s ease-in-out 2.6s;
    -o-transition: all 0.4s ease-in-out 2.6s;
    -moz-transition: all 0.4s ease-in-out 2.6s;
    -webkit-transition: all 0.4s ease-in-out 2.6s;
    transition: all 0.4s ease-in-out 2.6s;
}

.tiploader-inner .tiploadname{
    width: 500px;
    margin: 0 auto;
}

.stripes{
    position: absolute;
    opacity: 0.3;
}

.realopen .stripes-in {
    opacity: 1;
}
.stripes-in {
    position: relative;
    opacity: 0;
    -ms-transition: all 0.4s ease-in-out 1.5s;
    -o-transition: all 0.4s ease-in-out 1.5s;
    -moz-transition: all 0.4s ease-in-out 1.5s;
    -webkit-transition: all 0.4s ease-in-out 1.5s;
    transition: all 0.4s ease-in-out 1.5s;
}


@keyframes rotates1{
	0%{
        transform: rotate(10deg);
		opacity: 0.3;
	}
	50%{
		opacity: 0.7;
	}
	100%{
        transform: rotate(370deg);
		opacity: 0.3;
	}
}

@keyframes rotates2{
	0%{
        transform: rotate(-10deg);
		opacity: 0.3;
	}
	50%{
		opacity: 0.7;
	}
	100%{
        transform: rotate(-370deg);
		opacity: 0.3;
	}
}

@keyframes rotates3{
	0%{
        transform: rotate(20deg);
		opacity: 0.3;
	}
	50%{
		opacity: 0.7;
	}
	100%{
        transform: rotate(380deg);
		opacity: 0.3;
	}
}

.stripe1{
    top: -200px;
    left: 27.5%;
    width: 45%;
    transform: rotate(10deg);
}

.stripe2{
    top: -250px;
    left: 20%;
    width: 60%;
    transform: rotate(-10deg);
}

.stripe3{
    top: -280px;
    left: 12.5%;
    width: 74%;
    transform: rotate(20deg);
}

.realopen .stripe1{
    animation-name: rotates1;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-delay: 1.8s;
}

.realopen .stripe2{
    animation-name: rotates2;
    animation-duration: 0.9s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-delay: 1.9s;
}

.realopen .stripe3{
    animation-name: rotates3;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-delay: 1.7s;
}

.realopen .all-tips{
    opacity: 1;
}

.all-tips{
    width: 100%;
    opacity: 0;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}


.tiper{
    text-align: center;
    padding: 20px;
    width: 300px;
    height: 500px;
    display: inline-block;
    border: 2px solid #fff;
    margin: 5px;
    opacity: 0;
    margin-top: 5%;
    vertical-align: top;
    -ms-transition: all 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    -o-transition: all 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    transition: all 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
}

.realopen .tiper1{
    opacity: 1;
    margin-top: 1%;
    -ms-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s;
    -o-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s;
    -moz-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s;
    -webkit-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s;
    transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.5s;
}

.realopen .tiper2{
    opacity: 1;
    margin-top: 1%;
    -ms-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s;
    -o-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s;
    -moz-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s;
    -webkit-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s;
    transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.6s;
}

.realopen .tiper3{
    opacity: 1;
    margin-top: 1%;
    -ms-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s;
    -o-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s;
    -moz-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s;
    -webkit-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s;
    transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.7s;
}

.realopen .tiper4{
    opacity: 1;
    margin-top: 1%;
    -ms-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s;
    -o-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
    -moz-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s;
    -webkit-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
    transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.8s;
}

.realopen .tiper5{
    opacity: 1;
    margin-top: 1%;
    -ms-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
    -o-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
    -moz-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
    -webkit-transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
    transition: opacity 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s,
        margin-top 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 3.9s;
}

.read .all-tips{
    opacity: 0;
}

.tipimg{
    display: block;
    margin: 0 auto 20px;
    width: 90px;
}

.tiper p{
    margin: 0 0 20px 0;
    min-height: 100px;
    text-align: left; 
    font-size: 1em;
}

.read_more{
    position: relative;
}

.car-description2{
    width: 40%;
    padding: 0 25px 0 25px;
    height: 100%;
    text-align: left;
    position: absolute;
    right: -100%;
    top: 0;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

.carousel-item h3{
    font-size: 1.2em;
}

.more, .more2{
    cursor: pointer;
}

.car-description{
    color: #fff;
    background-color: rgba(0,0,0,0.4);
    padding: 5% 5% 5%;
    height: 100%;
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0.1s, background-color 0.2s cubic-bezier(.62,.05,.51,.73) 0.1s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0.1s, background-color 0.2s cubic-bezier(.62,.05,.51,.73) 0.1s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0.1s, background-color 0.2s cubic-bezier(.62,.05,.51,.73) 0.1s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0.1s, background-color 0.2s cubic-bezier(.62,.05,.51,.73) 0.1s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0.1s, background-color 0.2s cubic-bezier(.62,.05,.51,.73) 0.1s;
    font-size: 0.9em;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
}

.opened .car-description{
    background-color: rgba(0,0,0,0.2);
}

.car-description > h3{
    margin: 0;
    -ms-flex: 1 100%;
    -o-flex: 1 100%;
    -moz-flex: 1 100%;
    -webkit-flex: 1 100%;
    flex: 1 100%;
    max-width: 400px;
    height: 150px;
    position: relative;
}

.car-description > h3 > img{
    margin: 0;
    display: block;
    position: relative;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.item4 .car-description > h3 > .descimg{
    margin-top: 0px;
}

.car-description > h3 > .descimg{
    width: 95px;
    display: block;
    margin: 0 auto;
    opacity: 0;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-transition: all 0.2s cubic-bezier(.62,.05,.51,.73) 0.3s;
    -o-transition: all 0.2s cubic-bezier(.62,.05,.51,.73) 0.3s;
    -moz-transition: all 0.2s cubic-bezier(.62,.05,.51,.73) 0.3s;
    -webkit-transition: all 0.2s cubic-bezier(.62,.05,.51,.73) 0.3s;
    transition: all 0.2s cubic-bezier(.62,.05,.51,.73) 0.3s;
}

#section2 .car-description > h3 > .descimg{
    width: 75px;
}

.opened .car-description > h3 > .descimg{
    opacity: 1;
}

.loadImg .theBarberShops .item0{
    background-image: url(../images/barber-shops/barber_tip6_2.jpg);
}

.loadImg .theBarberShops .item1{
    background-image: url(../images/barber-shops/barber_tip7_2.jpg);
}

.loadImg .theBarberShops .item2{
    background-image: url(../images/barber-shops/barber_tip8_2.jpg);
}

.loadImg .theBarberShops .item3{
    background-image: url(../images/barber-shops/barber_tip3_2.jpg);
}

.loadImg .theBarberShops .item4{
    
    background-image: url(../images/barber-shops/barber_tip2_2.jpg);
}

.loadImg .theBarberShops .item5{
    background-image: url(../images/barber-shops/barber_tip1_2.jpg);
}

.loadImg .theBarberShops .item6{
    background-image: url(../images/barber-shops/barber_tip4_2.jpg);
}

.loadImg .theBarberShops .item7{
    background-image: url(../images/barber-shops/barber_tip5_2.jpg);
}



.loadImg .theBarberTips .item0{
    background-image: url(../images/barber-tips/barber_tip3.jpg);
}

.loadImg .theBarberTips .item1{
    background-image: url(../images/barber-tips/barber_tip2.jpg);
}

.loadImg .theBarberTips .item2{
    background-image: url(../images/barber-tips/barber_tip1.jpg);
}

.loadImg .theBarberTips .item3{
    background-image: url(../images/barber-tips/barber_tip4.jpg);
}

.loadImg .theBarberTips .item4{
    background-image: url(../images/barber-tips/barber_tip5.jpg);
}

.text-high{
    opacity: 0;
    color: #fff;
    font-weight: 700;
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    
}

.text-high.opazero{
    opacity: 0!important;
    display: none;
    -ms-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s;
    -o-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s;
    -moz-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s;
    -webkit-transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s;
    transition: all 0.5s cubic-bezier(.62,.05,.51,.73) 0s;
}

/* BARBER TIPS END */

.btScroller{
    position: absolute;
    width: 100%;
    display: block;
    height: 75%;
    top: 25%;
    padding: 20px 0;
}

.btScroller ul{
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-right: 25px;
}

.btScroller ul li{
    display: table;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
    cursor:pointer;
    
}

.btScroller ul li.active h3{
    text-decoration: underline;
}

.btScroller ul li.active img{
    opacity:1;
}

.btScroller ul li:hover h3{
    text-decoration: underline;
    -moz-transition: all 0.28s ease-in-out 0s;
    -webkit-transition: all 0.28s ease-in-out 0s;
    -o-transition: all 0.28s ease-in-out 0s;
    -ms-transition: all 0.28s ease-in-out 0s; 
    transition: all 0.28s ease-in-out 0s;
}
.btScroller ul li:hover img{
    opacity:1;
    -moz-transition: all 0.28s ease-in-out 0s;
    -webkit-transition: all 0.28s ease-in-out 0s;
    -o-transition: all 0.28s ease-in-out 0s;
    -ms-transition: all 0.28s ease-in-out 0s;  
    transition: all 0.28s ease-in-out 0s;
}

.bt-thumb{
    display: table-cell;
    min-width: 100px;
    position: relative;
    vertical-align: middle;
    width: 30%;
}

.bt-thumb img{
    width: 100%;
    opacity: 0.75;
    -moz-transition: all 0.28s ease-in-out 0s;
    -webkit-transition: all 0.28s ease-in-out 0s;
    -o-transition: all 0.28s ease-in-out 0s;
    -ms-transition: all 0.28s ease-in-out 0s;  
    transition: all 0.28s ease-in-out 0s;
}

.bt-text{
    display: table-cell;
    position: relative;
    vertical-align: middle;
    padding-left: 15px;
    padding-bottom: 15px;
}


.bt-text h3{
    padding: 0;
    margin: 0;
    color: #fff;
    font-size: 1.2em;
    text-align: left;
    -moz-transition: all 0.28s ease-in-out 0s;
    -webkit-transition: all 0.28s ease-in-out 0s;
    -o-transition: all 0.28s ease-in-out 0s;
    -ms-transition: all 0.28s ease-in-out 0s;  
    transition: all 0.28s ease-in-out 0s;
}
.bt-text p{
    color: #fff;
    font-family: 'Roboto';
    font-size: 0.9em;
    font-weight: 300;
    line-height: 1.15em;
    margin: 0;
    padding: 0;
    text-align: left;
}
.tips-slider{
    position: absolute;
    top: 0;
    left: -100%;
    width: 65%;
    height: 100%;
    z-index: 10;
    background: #000;
    overflow: hidden;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.tips-slider.active{
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    left: 0;
}

.preloader{
    background: #000 none repeat scroll 0 0;
    display: table;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}
.preloader > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0 35%;
}
.clear{
    position: relative;
    width:100%;
    height: 1px;
}

@keyframes mesaexw {  
    0% { width: 0%; }
    25% {  width: 40%; }
    50% { width: 100%; }
    75% { width: 0%; }
    100% {  width: 0%; }
    
/*     0% {  opacity: 0.7; }
    50% {  opacity: 0.9; }
    100% { opacity: 1; }*/
}
@-webkit-keyframes mesaexw {
   0% { width: 0%; }
    25% {  width: 40%; }
    50% { width: 100%; }
    75% { width: 0%; }
    100% {  width: 0%; }
}


.preloader span{
    background: transparent;
    border-bottom: 1px solid #fff;
    display: block;
    height: 1px;
    margin: 0 auto;
    position: relative;
    width: 0;
    -ms-animation: mesaexw 1.3s linear infinite;
    -o-animation: mesaexw 1.3s linear infinite;
    -webkit-animation: mesaexw 1.3s linear infinite;
    -moz-animation: mesaexw 1.3s linear infinite;
    animation: mesaexw 1.3s linear infinite;
}

.slide-description{
    position: absolute;
    right: 0;
    bottom: -100%;
    width: 100%;
    background: rgba(0,0,0,0.55);
    padding:15px;
    padding-left: 200px;
    text-align: left;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.slide.active .slide-description{
    bottom: 0;
    -ms-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.slide-description h2{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 1.4em;
    margin: -8px 0 0;
}
.slide-description h3{
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 2em;
}
.slide-description p{
    color: #fff;
    font-family: 'Roboto';
    font-size: 0.85em;
    letter-spacing: 0.02em;
    line-height: 1.15em;
    margin: 0;
    padding: 0;
}

.barberFind-container{
    height: 100%;
    height: -o-calc(100% - 125px);
    height: -ms-calc(100% - 125px);
    height: -moz-calc(100% - 125px);
    height: -webkit-calc(100% - 125px);
    height: calc(100% - 125px);
    width: 100%;
    background-color: #252525;
    background-image: url(../images/bg3.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 125px;
    left: 0;
}

.barberFind-city{
    height: 100%;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.barberFind-cityName{
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    color: #fff;
}

.barberFind-cityName h3{
    font-size: 30px;
    line-height: 30px;
    margin: 0;
    padding-right: 20px;
    display: inline-block;
    opacity: 0;
    -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.section.active .barberFind-cityName h3{
    -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1) 2s;
    opacity: 1;
}

.barberFind-cityName .fxline{
    position: relative;  
}

.section.active .barberFind-cityName .fxline{
    width: 100%;
    -ms-transition: all 3s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: all 3s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -moz-transition: all 3s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: all 3s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: all 3s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.barberFind-cityName .fxline-inner{
    margin-top: 14px;
    margin-bottom: 14px;
    height: 2px;
    background-color: #fff;
    width: 0%;
    -ms-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    top: 0;
    right: 0;
    position: absolute;
}

.section.active .barberFind-cityName .fxline-inner{
    width: 100%;
    -ms-transition: all 2s ease 0.2s;
    -o-transition: all 2s ease 0.2s;
    -moz-transition: all 2s ease 0.2s;
    -webkit-transition: all 2s ease 0.2s;
    transition: all 2s ease 0.2s;
}

.barberFind-carousel{
    padding: 20px 40px;
    height: 100%;
    box-sizing: border-box;
}

.barberFind-barbers{
    padding-top: 25px;
    -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.barber{
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    height: 100%;
    margin-right: 1.25%;
    
    overflow: hidden;
    position: relative;
    vertical-align: top;
    width: 19%;
    -moz-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.barber:last-child{
    margin-right: 0;
}

.barberface-inner{
    background-color: #908377;
    overflow: hidden;
    max-height: 40vh;
    border-bottom: 5px solid #908377;
}

.barber-info-line{
    display: block;
}

.barberface-img{
    width: 100%;
}

.barber-name{
    font-size: 2em;
    line-height: 1em;
    padding-top: 5vh;
    margin: 0 0 2vh 0;
}

.barber-icon{
    width: 100%;
    height: 2vh;
    margin-top: 2vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.loadImg .bicon1{
    background-image: url("../images/shapes/romvos.png");
}
.loadImg .bicon2{
    background-image: url("../images/shapes/tetragono.png");
}
.loadImg .bicon3{
    background-image: url("../images/shapes/trigwno.png");
}
.loadImg .bicon4{
    background-image: url("../images/shapes/kiklos.png");
}
.loadImg .bicon5{
    background-image: url("../images/shapes/pavla.png");
    background-size: auto 60%;
}

.barber-info{
    margin-top: 2vh;
    padding-bottom: 5vh;
    font-size: 14px;
    padding: 10px 10px 5vh 10px;
    box-sizing: border-box;
    min-height: 150px;
}

.barberFind-city .barber-body{
    position: relative;
    width: 100%;
    -ms-transform: translate(0,300px);
    -o-transform: translate(0,300px);
    -moz-transform: translate(0,300px);
    -webkit-transform: translate(0,300px);
    transform: translate(0,300px);
    left: 0;
    background-color: #000;
    opacity: 0;
    min-height: 37em;
}

.section.active .barberFind-city .barber-body{
    opacity: 1;
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

.barber-body.tr5{
    -ms-transition: opacity 0.4s ease 0.1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    -o-transition: opacity 0.4s ease 0.1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    -moz-transition: opacity 0.4s ease 0.1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    -webkit-transition: opacity 0.4s ease 0.1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
    transition: opacity 0.4s ease 0.1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0s;
}
.barber-body.tr4{
    -ms-transition: opacity 0.4s ease 0.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.1s;
    -o-transition: opacity 0.4s ease 0.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.1s;
    -moz-transition: opacity 0.4s ease 0.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.1s;
    -webkit-transition: opacity 0.4s ease 0.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.1s;
    transition: opacity 0.4s ease 0.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.1s;
}
.barber-body.tr3{
    -ms-transition: opacity 0.4s ease 0.3s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    -o-transition: opacity 0.4s ease 0.3s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    -moz-transition: opacity 0.4s ease 0.3s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    -webkit-transition: opacity 0.4s ease 0.3s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    transition: opacity 0.4s ease 0.3s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
}
.barber-body.tr2{
    -ms-transition: opacity 0.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.3s;
    -o-transition: opacity 0.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.3s;
    -moz-transition: opacity 0.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.3s;
    -webkit-transition: opacity 0.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.3s;
    transition: opacity 0.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.3s;
}
.barber-body.tr1{
    -ms-transition: opacity 0.4s ease 0.5s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    -o-transition: opacity 0.4s ease 0.5s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    -moz-transition: opacity 0.4s ease 0.5s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    -webkit-transition: opacity 0.4s ease 0.5s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    transition: opacity 0.4s ease 0.5s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
}


.section.active .barber-body.tr1{
    -ms-transition: opacity 1.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    -o-transition: opacity 1.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    -moz-transition: opacity 1.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    -webkit-transition: opacity 1.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
    transition: opacity 1.4s ease 0.4s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.2s;
}
.section.active .barber-body.tr2{
    -ms-transition: opacity 1.4s ease 0.6s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    -o-transition: opacity 1.4s ease 0.6s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    -moz-transition: opacity 1.4s ease 0.6s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    -webkit-transition: opacity 1.4s ease 0.6s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
    transition: opacity 1.4s ease 0.6s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.4s;
}
.section.active .barber-body.tr3{
    -ms-transition: opacity 1.4s ease 0.8s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.6s;
    -o-transition: opacity 1.4s ease 0.8s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.6s;
    -moz-transition: opacity 1.4s ease 0.8s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.6s;
    -webkit-transition: opacity 1.4s ease 0.8s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.6s;
    transition: opacity 1.4s ease 0.8s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.6s;
}
.section.active .barber-body.tr4{
    -ms-transition: opacity 1.4s ease 1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.8s;
    -o-transition: opacity 1.4s ease 1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.8s;
    -moz-transition: opacity 1.4s ease 1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.8s;
    -webkit-transition: opacity 1.4s ease 1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.8s;
    transition: opacity 1.4s ease 1s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 0.8s;
}
.section.active .barber-body.tr5{
    -ms-transition: opacity 1.4s ease 1.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 1s;
    -o-transition: opacity 1.4s ease 1.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 1s;
    -moz-transition: opacity 1.4s ease 1.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 1s;
    -webkit-transition: opacity 1.4s ease 1.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 1s;
    transition: opacity 1.4s ease 1.2s, 
        transform 1.5s cubic-bezier(0.29, 0.78, 0.67, 0.99) 1s;
}

.other-bshops-outter .bshops li span{
    opacity: 1;
}

.top-bar{
    background:#13213B;
    padding: 1.3em 1em;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.top-register{
    position: relative;
    float: right;
    padding: 0.5em 1.5em;
    color: #fff;
    font-weight: 300;
    text-decoration: none;
    background: #e91e63;
    z-index: 100;
}

.top-register:hover{
    background: #c11852;
}

.top-bar ul{
    list-style: none;
    position: relative;
    float: left;
    margin: 0.4em 2em;
    padding: 0;
}

.top-bar ul li{
    position:relative;
    display: inline-block;
    margin: 0 0.5em;
}

.top-bar ul li a{
    text-decoration: none;
    font-size: 1em;
    font-weight: 300;
    color: #fff;
    text-decoration: none;
}

.top-bar ul li a:hover{
    text-decoration: underline;
}

.wrapper, .container{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.row{
    position: relative;
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.row.intro{
    background: url("../images/bg/techsaloniki-background-01.jpg") no-repeat center top fixed;
    background-size: cover;
    padding: 10em 1em;
    
}
.row.seq2{
    background: url("../images/bg/techsaloniki-background-02a.jpg") no-repeat center top scroll;
    background-size: cover;
    padding: 2.4em 1em;
    
}
.row.seq2b{
    background: url("../images/bg/techsaloniki-background-02b.jpg") no-repeat center top scroll;
    background-size: cover;
    padding: 2.4em 1em;
    padding-top: 5em;
}
.row.seq3{
    background: url("../images/bg/techsaloniki-background-03.jpg") no-repeat center top scroll;
    background-size: cover;
    padding: 2em 1em;
    
}
.row.seq4{
    background: url("../images/bg/techsaloniki-background-04.jpg") no-repeat center top scroll;
    background-size: cover;
    padding: 2em 1em;
    
}
.row.seq5{
    background: url("../images/bg/techsaloniki-background-05.jpg") no-repeat center top scroll;
    background-size: cover;
    padding: 2em 1em;
    
}

.content{
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

.general-button:hover{
    color: #fff !important;
    border-color:#fff !important;
}

.content.triple{
    font-family: 'Alt_GothamGRLight';
    color: #fff;
    font-size: 1.65em;
    padding: 0 0 0.8em;
}
.slash{
    border-top: 1px solid #386d5d;
    height: 0.3em;
    transform: rotate(-50deg);
    width: 1.34em;
    
}
.slash.green{
    display: inline-block;
    margin: 0 0.5em;
    position: relative;
}
.content.dates{
    
    color: #fff;
    font-size: 2.2em;
    padding: 0.4em 0;
    font-family: 'Alt_GothamGRBold';
}
.content.place{
    
    color: #fff;
    font-size: 1.25em;
    padding: 0.4em 0;
    font-weight: 300;
}

.content.reg{
    color: #EDF0F7;
    font-weight: 400;
    line-height: 1.35em;
    font-size: 1.15em;
}
.content.reg p{
    position: relative;
    margin: 1em auto;
    width: 100%;
    max-width: 500px;
}
.content.reg p a{
    text-decoration: underline;
    color: #00F804;
    
}
.content img{
    max-width: 95%;
}
.lbox{
    position: relative;
    vertical-align: top;
    display: inline-block;
    font-size: 5em;
    color: #01FFFF;
    font-weight: 900;
    text-align: center;
    
}
.lbox span{
    position: relative;
    display: inline-block;
    font-size: 0.2em;
    color: #EDF0F7;
    font-weight: 500;
    width: 100%;
    padding: 1.7em 0 0 0;
}

.slashb.green {
    display: inline-block;
    margin: 0;
    position: relative;
}
.slashb {
    border-top: 1px solid #0CC649;
    height: 0em;
    transform: rotate(-60deg);
    width: 5em;
}

.row h2{
    position: relative;
    width: 100%;
    text-align: center;
    padding: 0;    
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
}
.title-liner{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background:#4F71A1;
    z-index: 1;
}
.row h2 span{
    position: relative;
    z-index: 5;
    font-family: 'Alt_GothamGRBlack';
    font-size: 1.4em;
    color: #fff;    
    padding: 0 1.3em;
    background: url("../images/bg/techsaloniki-background-03.jpg") no-repeat center top scroll;
}

.content.reg p a.general-button, .general-button{
    border: 1px solid #54719d;
    color: #aaa;
    display: inline-block;
    font-size: 0.9em;
    font-weight: 300;
    margin-top: 1em;
    padding: 0.6em 1em;
    text-decoration: none;
}
.home-boxes{
    position: relative;
    margin: 2em auto;
    width: 90%;
    max-width: 1200px;
        
}
.box{
    position: relative;
    display: inline-block;
    width: 31.33%;
    margin: 1%;
    text-align: center;
    margin-left: -10px;
    min-width: 230px;
    margin-bottom: 2em;
}
.box img{
    max-width: 250px;
    position: relative;
    width: 90%;
}
.box span{
    color: #08C141;
    display: inline-block;
    font-size: 1.3em;
    font-weight: 600;
    padding: 1em 0 0;
    position: relative;
    width: 100%;
}

.hidden-cont{
    position: fixed;
    top: 0;
    left: -100%;
    overflow: auto;
    overflow-x: hidden;
    z-index: 200;
    background: rgba(0, 0, 0, 0) url("../images/bg/techsaloniki-background-03.jpg") no-repeat scroll center top / cover ;
    padding: 1.5em;
    width: 100%;
    height: 100%;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.hidden-cont.opened{
    left: 0;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}

body.noOverflow{
    overflow: hidden;
}

.hsection{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    padding: 2em;
    opacity:0;
    padding-top: 4em;
}

.hsection.opened{
    display: table;
    opacity:1;
    -moz-transition: all 0.28s ease-in-out  0s;
    -webkit-transition: all 0.28s ease-in-out  0s;
    -o-transition: all 0.28s ease-in-out  0s;
    -ms-transition: all 0.28s ease-in-out  0s;  
    transition: all 0.28s ease-in-out  0s;
}

.hsection > div{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position: relative;
}

.close-hcont{
    position: relative;
    z-index: 100;
}
.hsection h2{     
    color: #fff;
    font-family: "Alt_GothamGRBlack";
    font-size: 1.8em;
    padding: 0 1.3em;
    position: relative;
    z-index: 5;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #325590;
    width: 100%;
    max-width: 1000px;
    padding-bottom: 15px;
    margin: 0 auto;
}
.hsection h3{     
    color: #08C141;    
    font-size: 1.6em;
    padding: 0 1.3em;
    position: relative;
    z-index: 5;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #325590;
    width: 100%;
    max-width: 1000px;
    padding-bottom: 15px;
    margin: 0 auto;
}
.stiles{
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 2em auto;
}
.stili{
    position: relative;
    width: 50%;
    display: block;
    float: left;
    /*height: 15em;*/
    padding: 0 2em;
    vertical-align: top;
}
.stili.border{
    border-right: 1px solid #325590;
    padding-right: 2em;
    padding-left: 0;
   }
   .stili label{
       width: 100%;
       color:#08C141;
       font-weight: 600;
       font-size: 1em;
   }
   .stili p{
    color: #fff;
    font-size: 0.98em;
    font-weight: 400;
    line-height: 1.35em;
    margin-top: 0.4em;
   }

   .section-img{
       max-width: 90%;margin: 1em auto;position:relative; display: block;
       
   }
   .stili p a{
       color: #fff;
   }
   
   .top-logo i{
       display: none;
   }
   
   .top-bar ul li a.selected{
       text-decoration: underline;
   }
   
   .companies-logos{
    position: relative;
    display: inline-block;
    width: 100%;
    /*max-width: 1200px;*/
}

.companies-logos ul{
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}
.companies-logos ul li{
    text-align: center;
    padding: 5em 3em;
    background: url("../images/slide1.png") no-repeat 0 0 scroll transparent;
    background-size: cover;
    max-width: 300px;
}
.companies-logos ul li img{
    max-width: 100%;
}
.companies-logos ul li:nth-child(odd){
    background-image: url("../images/slide2.png");
}
.close-hcont img{
    opacity:0.55;
}

.close-hcont:hover img{
    opacity:1;
}

.intop{
    position: fixed;
    top: 0;
    left: 0;
    padding: 0.5em 1em;
    background: #13213B;
    width: 100%;
    z-index: 100;
    top: -100%;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}
.hidden-cont.opened > .intop{
    top: 0;
    -ms-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -o-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -moz-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    -webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0s;
}


/* Effect 18: cross */


a.cl-effect-18 {
	padding: 0 5px;
	color: #fff;
	font-weight: 700;
    -ms-transition: color 0.3s;
	-o-transition: color 0.3s;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

a.cl-effect-18::before,
a.cl-effect-18::after {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	height: 1px;
	margin-top: -1px;
	background: #fff;
	content: '';
	z-index: -1;
    -ms-transition: -webkit-transform 0.3s, opacity 0.3s;
	-o-transition: -moz-transform 0.3s, opacity 0.3s;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
}

a.cl-effect-18::before {
    -ms-transform: translateY(-20px);
	-o-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	transform: translateY(-20px);
}

a.cl-effect-18::after {
    -ms-transform: translateY(20px);
	-o-transform: translateY(20px);
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	transform: translateY(20px);
}

a.cl-effect-18 a:hover,
a.cl-effect-18 a:focus {
	color: #fff;
}

a.cl-effect-18:hover::before,
a.cl-effect-18:hover::after,
a.cl-effect-18:focus::before,
a.cl-effect-18:focus::after {
	opacity: 0.7;
}

a.cl-effect-18:hover::before,
a.cl-effect-18:focus::before {
    -ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

a.cl-effect-18:hover::after,
a.cl-effect-18:focus::after {
    -ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



/* MEDIA QUERIES */
/*  W I D T H S  */

@media all and (max-width:1600px){
    .tiper {
        text-align: center;
        padding: 15px;
        width: 250px;
    }
    .tip-unders-inner {
        width: 1100px;
    }
    .tiploader-inner .tiploadname{
        width: 450px;
    }
}

@media all and (max-width:1440px){
    .tipsCarouselMain .item{
        padding: 0.5vw 0.5vw 0 0.5vw;
    }
    .tipsCarouselMain .item .itemInner .itemBody, .tipsCarouselMain .item .itemInner .itemHeader{
        padding: 1vw;
    }
    
    .tipsCarouselPanel{
            flex: 1 1 80px;
    }
}

@media all and (max-width:1400px){
    #slideContent {
        padding: 4%;
    }
    #section1 .intro{
        width: 60%;
    }
    .right-sidebar{
        width: 40%;
    }
    .tiper {
        text-align: center;
        padding: 12px;
        width: 200px;
    }
    .tip-unders-inner {
        width: 900px;
    }
    .barber-name {
        font-size: 1.6em;
        line-height: 1em;
    }
    
    #slide{
        -webkit-transform: translate3d(-23%,0,0);
        -moz-transform: translate3d(-23%,0,0);
        -ms-transform: translate3d(-23%,0,0);
        -o-transform: translate3d(-23%,0,0);
        transform: translate3d(-23%,0,0);
    }
    
    #slideBar{
        width: 23%;
    }
}

@media all and (max-width:1200px){
    .tip-unders-inner {
        width: 700px;
    }
    .barberFind-city .barber-body {
        min-height: 34em;
    }
    .car-description {
        padding: 0%;
    }
}

@media all and (max-width:1100px){
    .tiper {
        text-align: center;
        padding: 10px;
        width: 190px;
        margin-left: 1px;
        margin-right: 1px;
    }
    .barber-name {
        font-size: 1.2em;
        line-height: 1em;
    }
}

@media all and (max-width:1050px){
    .right-sidebar, #section1 .intro{
        width: 50%;
    }
    .section{
        font-size: 14px;
    }
}


/* MEDIA QUERIES */
/* H E I G H T S */

@media all and (max-height:1100px){
     .tiploader-inner{
        margin-top: 13%;
    }
}

@media all and (max-height:1000px){
    .tip-unders-inner {
        min-height: 500px;
    }
     .tiploader-inner{
        margin-top: 12%;
    }
}

@media all and (max-height:950px){
    .tiploader-inner{
        margin-top: 10%;
    }
    .tiper {
        height: 420px;
    }
    .section{
        font-size: 14px;
    }
}

@media all and (max-height:900px){
    .bs-header h2, .bs-header2 h2 {
        margin: 20px 0 0 0;
    }
    .realopen .tiploader-inner{
        margin-top: 1%;
    }
    .tiploader-inner .tiploadname {
        width: 420px;
        margin: 0 auto;
        margin-top: -20px;
    }
    .tiploader .tiploader-inner .tip {
        width: 55px;
    }
    .tiploader-inner {
        height: 160px;
    }
    .tip-unders-inner {
        min-height: 380px;
        padding-top: 50px;
    }
    .stripes-outter{
        width: 440px;
    }
    .section{
        font-size: 13px;
    }
}

@media all and (max-height:850px){
    .tiper {
        height: 400px;
    }
}

@media all and (max-height:750px){
    .tipimg {
        margin: 0 auto 15px;
        width: 80px;
    }
    .tiper {
        height: 370px;
    }
    .tip-unders-inner {
        min-height: 320px;
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .barberFind-carousel {
        padding-top: 10px;
        height: 100%;
    }
    .barberFind-barbers {
        padding-top: 10px;
    }
    .barberface-inner{
        max-height: 30vh;
    }
    .downtext {
        display: none;
    }
    #formInner textarea{
        height: 16%;
    }
}


@media all and (max-height:700px){
    #canvas-logo {
        max-width: 350px!important;
        max-height: 350px!important;
        margin: 0 auto;
    }
    .barberFind-city .barber-body {
        min-height: 32em;
    }
    .tiploader-inner .tiploadname {
        width: 360px;
        margin: 0 auto;
        margin-top: -20px;
    }
    .stripes-outter {
        width: 350px;
        margin-top: 60px;
    }
    .all-tips{
        margin-top: -20px;
    }
    .tipimg{
        margin-bottom: 8px;
        width: 70px;
    }
    .tiper {
        height: 345px;
    }
    .stripe2 {
        top: -235px;
    }
    .stripe3 {
        top: -270px;
    }
    .goTop, .tipsBack, .goBack {
        bottom: 0.5em;
    }
    .footer-social {
        bottom: 1.5em;
    }
    .other-bshops {
        bottom: 4.2em;
    }
    .bs-header {
        position: relative;
        width: 100%;
        display: block;
        padding-bottom: 15px;
        text-align: left;
    }
}