html{background:#FFFFFF;}
body{color:#323027;font-size: 1.0em;font-family: 'Noto Sans TC', sans-serif;line-height: 1.2;font-weight:300;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style: -ms-autohiding-scrollbar;}
h1{font-size:1.2em;line-height:1;margin:0 0 10px 0;font-weight:400;color:#323027;}
h2{font-size:1.0em;line-height:1;margin:0 0 10px 0;font-weight:400;color:#323027;}
h3,h4{font-size:1.0em;line-height:1;margin:0 0 10px 0;font-weight:400;color:#706f6f;}
p,li{margin:0 0 10px 0;color:#323027;font-size:0.8em;line-height:1.2;}
ol.list-style,ul.list-style{margin-left: 21px;}

a{color:#E74C3C;text-decoration: none;}
a:hover{text-decoration: underline;}

.black{color:#323027;}
.gray{color:#6C7A89;}
.gray2{color:#BDC3C7;}
/*.primary{color:#913D88;}*/
.primary{color:#E74C3C;}

/*LOADING*/
#loading-box{position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:998;background: #f1f1f1;}
#loading-box .loading-box-inner{width:260px;height:180px;position:absolute;top:50%;left: 50%;margin:-90px 0 0 -130px;
  opacity: 1;
 -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
     transition: opacity 500ms;
}
#loading-box .loading-box-inner.hide{opacity: 0;}

/*SPINNER*/
.spinner{width:28px;height:28px;position:relative;margin:0 auto;}
.double-bounce1, .double-bounce2{width: 100%;height: 100%;border-radius: 50%;background-color: #E74C3C;opacity: 0.6;position: absolute;top: 0;left: 0;
 -webkit-animation: bb 2.0s infinite ease-in-out;
  -moz-animation: bb 2.0s infinite ease-in-out;
   -ms-animation: bb 2.0s infinite ease-in-out;
    -o-animation: bb 2.0s infinite ease-in-out;
       animation: bb 2.0s infinite ease-in-out;
}
.double-bounce2 {
 -webkit-animation-delay: -1.0s;
  -moz-animation-delay: -1.0s;
   -ms-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
       animation-delay: -1.0s;
}

section{padding:60px 0;margin:0 25px;position: relative;}

#container{position: relative;z-index: 1;padding-top: 60px;background: #FFF;opacity: 0;max-width: 1440px;margin: 0 auto;
-webkit-transition: -webkit-transform 0.4s ease-out,opacity 1s ease-out;
transition: transform 0.4s ease-out,opacity 1s ease-out;
}
#container.show{opacity: 1;}
#container.demo,#container.privacy{max-width: none;}
#container.overlay-open{-webkit-transform: scale(0.8);transform: scale(0.8);}

#topbar{position: absolute;top: 0;left: 0;right: 0;z-index: 10;padding:15px 10px;}

#topbar-langs-box{display: none;}

.hamburger{float:right;padding: 5px 5px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible; }
.hamburger:hover {opacity: 1; }
.hamburger-box {width: 28px;height: 20px;display: inline-block;position: relative; }
.hamburger-inner{display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 28px;height: 4px;background-color: #323027;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before{top: -10px; }
.hamburger-inner::after{bottom: -10px;}

.hamburger--vortex .hamburger-inner{transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after{transition-duration: 0s;transition-delay: 0.1s;transition-timing-function: linear;}
.hamburger--vortex .hamburger-inner::before{transition-property: top, opacity;}
.hamburger--vortex .hamburger-inner::after{transition-property: bottom, transform;}

.hamburger--vortex.is-active .hamburger-inner {transform: rotate(765deg);transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);}
.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after{transition-delay: 0s; }
.hamburger--vortex.is-active .hamburger-inner::before{top: 0;opacity: 0;}
.hamburger--vortex.is-active .hamburger-inner::after{bottom: 0;transform: rotate(90deg);}

a.button-link{padding:0 15px;height:36px;font-size:14px;line-height:36px;color:#fff;text-transform: uppercase;margin:0;text-decoration: none;font-weight: 400;display: inline-block;}
a.button-link.demo{background-color:#E74C3C;margin-right: 15px;}
a.button-link.demo:hover{background: #FF5442;}
a.button-link.buy{background-color:#216DCC;}
a.button-link.buy:hover{background: #4782CC;}

#overlay{position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(231,76,60,0.9);z-index: 5;
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s ease-out, visibility 0s 0.4s ease-out;
transition: transform 0.4s ease-out, visibility 0s 0.4s ease-out;
}
#overlay.open{
visibility: visible;
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
#overlay nav{text-align: center;position: relative;top: 50%;height: 60%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
#overlay a{color:#FFF;-webkit-transition: color 0.2s;transition: color 0.2s;}
#overlay a:hover,.overlay a:focus{color: #f0f0f0;}

#overlay ul{list-style: none;padding: 0;margin: 0 auto;display: inline-block;height: 100%;position: relative;}
#overlay ul li{display: block;height: 20%;height: calc(100%/5);min-height: 32px;}
#overlay ul li a{font-size: 32px;display: block;}

#overlay .langs-box{text-align: center;}
#overlay .langs-box a{font-size: 20px;line-height: 20px;padding:10px;}
#overlay .langs-box a{}


#header{position: relative;z-index: 10;padding:40% 0 20% 0;}
#header #logo{position: absolute;left:50%;top:10%;width: 140px;height: 140px;background-image:url('https://deb.cantonesedictionary.eu/img/logo.png');}
#header #payoff{}
#header #payoff h1 .big{font-weight: 900;font-size: 2em;}
#header #payoff h1{font-weight: 700;line-height: 1.3;font-size: 0.9em;}
#header #payoff .payoff-btn{margin-top: 20px;}

#image1{background-image:url('https://deb.cantonesedictionary.eu/img/cantonese.jpg');position: relative;z-index: 1;}
#image1:before{padding-top:62%;display: block;content: '';}

.title{position: relative;display: inline-block;}
.title .title-back{position: absolute;top:-10px;left: -10px;width: 90%;height: 90%;z-index: 1;background:#E74C3C;}
.title h2{position: relative;z-index: 10;font-size:2em;}

#section1{z-index: 10;}
#section2{z-index: 10;padding:80px 0 160px 0;}

.numbers-box{padding:60px 0 100px 0;}
.number-item{text-align: center;margin-bottom: 40px;}
.number-item .icon{font-size:40px;line-height: 1;margin:0 auto 20px auto;}
.number-item .number{font-size: 2em;}
.number-item p{font-size: 1em;}

#section3{z-index: 10;padding:40px 0 160px 0;}

#image2{background-image:url('https://deb.cantonesedictionary.eu/img/marco-bosio.jpg');position: relative;z-index: 1;background-position: bottom center;}
#image2:before{padding-top:63%;display: block;content: '';}

#section4{padding-bottom:0;}

#section5{width: 100%;padding: 0;margin: 20px 0 100px 0;}
#section5:before{padding-top:100%;display: block;content: '';}

#section5 .swiper-container{width: 100%;}
#section5 .swiper-slide{position: relative;margin:0;background-repeat: no-repeat;background-position: center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
#section5 .swiper-slide img{position: relative;z-index: 1;height: 100%;}

#section5 .gallery-top{height: 100%;position: absolute;top:0;left:0;}
#section5 .gallery-top .swiper-slide{height: 100%;width: auto;}
#section5 .gallery-thumbs{height: 20%;box-sizing: border-box;padding: 10px 0;position: absolute;bottom:0;left:0;}
#section5 .gallery-thumbs .swiper-slide{width: 20%;height: 100%;opacity: 0.4;}
#section5 .gallery-thumbs .swiper-slide-active{opacity: 1;}

.slide-overlay{background:rgba(0,0,0,0.6);position: absolute;bottom:0;right:0;left:0;width: 100%;padding:10px;z-index: 10;}
.slide-overlay h3{color: #FFF;text-align: left;font-size: 1em;}
.slide-overlay p{color: #FFF;text-align: left;font-size: 0.8em;margin-bottom: 0;}

/*
.slide-1{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/1.jpg');}
.slide-2{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/2.jpg');}
.slide-3{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/3.jpg');}
.slide-5{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/5.jpg');}
.slide-7{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/7.jpg');}
.slide-9{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/9.jpg');}
.slide-11{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/11.jpg');}
.slide-13{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/13.jpg');}
.slide-15{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/15.jpg');}
.slide-16{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/16.jpg');}
.slide-17{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/17.jpg');}
.slide-18{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/18.jpg');}
.slide-21{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/21.jpg');}
.slide-23{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/23.jpg');}
.slide-24{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/24.jpg');}
.slide-25{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/25.jpg');}
.slide-26{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/26.jpg');}
.slide-27{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/27.jpg');}
.slide-28{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/28.jpg');}
.slide-30{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/30.jpg');}
.slide-31{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/31.jpg');}
.slide-32{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/32.jpg');}
.slide-34{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/34.jpg');}
.slide-36{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/36.jpg');}
.slide-40{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/40.jpg');}
.slide-41{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/41.jpg');}
.slide-42{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/42.jpg');}
.slide-43{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/43.jpg');}
.slide-44{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/44.jpg');}
.slide-45{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/45.jpg');}
.slide-50{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/50.jpg');}
.slide-51{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/51.jpg');}
.slide-56{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/56.jpg');}
.slide-60{background-image:url('https://deb.cantonesedictionary.eu/img/gallery/60.jpg');}
*/

#section6{}
#section6 .contacts-form{max-width: 600px;margin:60px auto;}

footer{padding:60px 0;text-align: center;background: #323027;}
footer .footer-inner{}
footer .footer-social{margin-bottom: 20px;}
footer .footer-social a{font-size: 26px;margin: 0 4px;display:inline-block;line-height: 26px;}
footer .footer-social a:hover{text-decoration: none;}
footer .footer-copy{}
footer p,footer a{color:#FFF;font-size: 10px;}
footer a:hover{color:#E74C3C;}

body.demo{height:100vh;width:100vw}
body.demo #container{height: 100%;width: 100%;background:#f1f1f1;padding-top:0;}
body.demo #flip-box{height: 90%;width: 90%;position: relative;margin:auto;}
body.demo .demo-buy{position: absolute;bottom:0;left: 0;right: 0;background:#E74C3C;color:#FFF;display: block;padding:5%;text-align: center;font-size: 1em;text-decoration: none;font-weight: bold;}

#privacy-logo{width: 140px;height: 140px;background-image:url('https://deb.cantonesedictionary.eu/img/logo.png');display: block;margin:0 auto 60px auto;}
#container.privacy h2{}
#container.privacy p{text-align: justify;}
#container.privacy ol{margin:0 0 0 0;padding: 0;}
#container.privacy ol li{margin-left:16px;list-style:decimal;}
#container.privacy .cookie-table{width: 100%;border-collapse: collapse;}
#container.privacy .cookie-table td{padding: 2px 4px;border:1px solid #d4d4d4;}
#container.privacy .cookie-table .cookie-title{background: #333;color: #FFF;}
#container.privacy .table-scroll{overflow-x:auto; }

/*COOKIE*/
.cookiePolicyBanner{background:#E74C3C;color:#FFF;font-size:12px;line-height: 14px;padding:10px 20px;text-align: center;position: fixed;bottom:0;left: 0;right: 0;z-index: 10000000;opacity: 1;
-webkit-transition:opacity 1000ms ;
	-moz-transition:opacity 1000ms ;
	transition:opacity 1000ms;
}
.cookiePolicyBanner.close{opacity: 0;}
.cookiePolicyBanner p{margin-bottom: 10px;font-size:12px;line-height: 14px;text-align: center;color:#FFF;}
.cookiePolicyBanner p a{text-decoration: underline;color: #FFF;}
.cookiePolicyBanner a#cookie-policy-btn{display: inline-block;margin:0 auto;background:#FFF;padding:5px 10px;text-align: center;font-weight: 700;color:#E74C3C; text-decoration: none;}

@media screen and (max-width: 900px) and (orientation: landscape){
	#header{padding:10% 10% 10% 10%;max-width: 650px;margin-left:auto;margin-right:auto;}
	#header #logo{left:60%;top:10%;width: 160px;height: 160px;}
	
    #section2:before{padding-top:56.25%;}
    
	#section1,#section2,#section3,#section4,#section6{max-width: 500px;margin-left:auto;margin-right:auto;}
	#section5:before{padding-top:56.25%;}
}
@media screen and (min-width: 768px){
	h1{font-size:2em;}
	h2{font-size:1.8em;}
	h3,h4{font-size:1.4em;}
	p,li{font-size:1em;}
	
	section{width: 700px;margin:0 auto;padding:80px 0;}

	#topbar-langs-box{float:right;display: block;margin:0 20px 0 0;}
	#topbar-langs-box a{font-size:12px;line-height:33px;padding:0 5px;color:#6C7A89;text-decoration: none;}
	#topbar-langs-box a:hover{color: #E74C3C;text-decoration: underline;}
	body.no-scroll #topbar-langs-box{display: none;}
	
	#header{position: relative;z-index: 10;padding:25% 0 15% 0;}
	#header #logo{left:60%;top:10%;width: 300px;height: 300px;}
	#header #payoff h1{font-size: 1.6em;}
	
	#image1:before{padding-top:40%;}
	#section1{padding-bottom: 140px;}
	
    #section5:before{padding-top:56.25%;}
	.slide-overlay{bottom:0;left:0;padding:20px;}
	
	footer{padding:80px 0;}
	footer p{font-size: 11px;}
    
    #container.privacy h2{font-size: 1.2em;}
    #privacy-logo{margin:0 auto 80px auto;}
    #container.privacy ol li{margin-left:20px;}
    
    .cookiePolicyBanner{width: 200px;font-size:12px;line-height: 14px;bottom:20px;left: auto;right: 20px;}
}
@media screen and (min-width: 996px) {
	h1{font-size:2.2em;}
	h2{font-size:1.8em;}
	h3,h4{font-size:1.4em;}
	p,li{font-size:1.2em;}
	ol.list-style,ul.list-style{margin-left: 26px;}
	
	section{width: 900px;padding:100px 0;}
	#container{padding-top: 0;}
	#topbar{padding:25px 20px;}
	
	#header #logo{float: right;width: 300px;height: 300px;}
	#header #payoff h1{font-size: 2em;}
	
	footer .footer-inner{width: 900px;margin:0 auto;overflow: hidden;}
	footer .footer-social{float:right;margin:0;text-align: right;}
	footer .footer-social a{font-size: 26px;}
	footer .footer-copy{float:left;text-align: left;}
	footer p,footer a{font-size: 11px;}
	footer p{margin-bottom: 5px;}
    
    #section3{padding-top: 100px;}
    
    body.demo .demo-buy{padding:2%;font-size: 1.5em;}
    
    #privacy-logo{width: 180px;height: 180px;margin:0 auto 100px auto;}
    #container.privacy ol li{margin-left:24px;}
} 
@media screen and (min-width: 1240px) {
	h1{font-size:2.6em;}
	h2{font-size:2.2em;}
	h3,h4{font-size:1.8em;}
	p,li{font-size:1.2em;}
	
	section{width: 1100px;}
	
	#overlay ul li{min-height: 42px;}
	#overlay ul li a{font-size: 42px;}
	
	#header #logo{float: right;width: 360px;height: 360px;}
	#header #payoff h1{font-size: 2.2em;}
	
	.slide-overlay h3{font-size: 1.4em;}
	.slide-overlay p{font-size: 1.2em;}
	
	footer .footer-inner{width: 1100px;}
    
    #container.privacy h2{font-size: 1.6em;}
}
@media screen and (min-width: 1440px) {
	#topbar{padding:45px 40px;}
	
	#header #logo{float: right;width: 420px;height: 420px;}
	#header #payoff h1{font-size: 2.5em;}
    
}
@media screen and (min-width: 1600px) {
	
    
}