html, body{
font-family: "微軟正黑體", "Microsoft JhengHei", "proxima_nova_rgregular",Verdana, Arial, Helvetica, sans-serif;
-webkit-text-size-adjust: none;
}
.item {
width: 1px;
height: 70px;
margin: 20px;
border-radius: 1px;
position: fixed;
bottom:5vh;
-ms-transform: translateY(50%); -webkit-transform: translateY(50%); transform: translateY(50%);
right:17%;
z-index:999;
}
.loader09 {
width: 1px;
height: 48px;
background: #2c2d32;
position: relative;
animation: loader09 1s ease-in-out infinite;
animation-delay: 0.4s;
top: 50%;
margin: -28px auto 0 auto; }
.loader09:after, .loader09:before {
content: '';
position: absolute;
width: 1px;
height: 48px;
background: #2c2d32;
animation: loader09 1s ease-in-out infinite; }
.loader09:before {
right: 8px;
animation-delay: 0.2s; }
.loader09:after {
left: 8px;
animation-delay: 0.6s; }
@keyframes loader09 {
0%, 100% {
box-shadow: 0 0 0 #2c2d32, 0 0 0 #2c2d32; }
50% {
box-shadow: 0 -8px 0 #2c2d32, 0 8px 0 #2c2d32; }
}
/* MENU */
.hamburger{position:relative;top:50%;left:50%;-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
#menu-icon{position:absolute;width:100%;height:10vh;top:0px;display: none;}
#menu{width:0%;height:100vh;position:fixed;margin:0px;padding:0px;z-index:12;visibility:hidden;}
#contenitore-menu{width:100%;background-color:#2c2d32;position:absolute;top:0px;height:100%;}
#contenitore-menu ul{position:absolute;width:50%;top:50%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);left:11%}
#contenitore-menu ul li{margin:1vh 0;padding-left:5%;font-weight:100;font-size:4vh;color:#fff;list-style:none;letter-spacing:4px;text-indent:2px;height:5vh;line-height:5vh;overflow:hidden;position:relative;}
#contenitore-menu ul li a{color:#fff;text-decoration:none;position:absolute;top:5vh;background-color:#2c2d32;}
#contenitore-menu ul li::before {
content: '';
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
width: 0%;
height: 1px;
background: #c0b9b3;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#contenitore-menu ul li:hover::before {
width:60%;
}
/* BACKGROUND COLOR */
[class*="col-md-"]{position:relative;padding-left:0px;padding-right:0px;}
.rosa{background-color:#ddd;width:0;position:relative}
.nero{background-color:#2c2d32;width:0;}
.bianco{position:relative;}
.white{background-color:rgba(255, 255, 255, 0.8);}
.pink{background-color:rgba(221, 221, 221, 0.8);width:0;}
.black{background-color:rgba(44, 45, 50, 0.6);width:100%;}
.col-md-8{padding-left:0px;padding-right:0px;}
/* GENERAL */
.fixed{position:fixed;}
#logo{width:160px;position:absolute;top:41px;left:40px;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);z-index:99999;}
#social a{color:#fff;font-size:20px;position:absolute;line-height:22px;top:22px;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#social{text-align:center;position:fixed;}
#social div{height:20px;position:relative;overflow:hidden;}
#social hr{margin:20% 0%;width:25%;border: 0px;height: 1px;color: #fff;background-color: #fff;left:50%;position:relative;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#show_c{position:absolute;bottom:0px;left:50%;}
#show_c .rotate90{transform-origin: 0 50%;width:410px;-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);letter-spacing:6px;text-indent: 3px;}
#show_c .line{width:1px;background-color:#000;height:0px;float:left;margin-right:20px;}
#show_c .rotate90 div{height:14px;line-height:16px;overflow:hidden;position:relative;}
#show_c .rotate90 span{position:absolute;top:16px;}
#show_b{position:absolute;bottom:0px;left:50%;}
#show_b .rotate90{transform-origin: 0 50%;width:410px;-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);letter-spacing:6px;text-indent: 3px;}
#show_b .line{width:1px;background-color:#000;height:0px;float:left;margin-right:20px;}
#show_b .rotate90 div{height:14px;line-height:16px;overflow:hidden;position:relative;}
#show_b .rotate90 span{position:absolute;top:16px;}
#show_d{position:absolute;right:0%;}
#show_d .rotate0{letter-spacing:6px;text-indent: 3px;float:left;width:210px;}
#show_d .line{width:0;background-color:#000;height:1px;float:left;margin-left:20px;margin-top:9px;}
#show_d .rotate0 div{height:14px;line-height:16px;overflow:hidden;position:relative;}
#show_d .rotate0 span{position:absolute;top:16px;}
#show_ho{position:absolute;bottom:10vh;left:50%;}
#show_ho .rotate90{color:#fff;transform-origin: 0 50%;width:80vh;-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);letter-spacing:6px;text-indent: 3px;}
#show_ho .line{width:1px;background-color:#fff;height:0vh;float:left;margin-right:20px;bottom:10px;position:absolute;}
#show_ho .rotate90 div{height:10px;line-height:10px;margin-left:12vh;overflow:hidden;position:relative;font-size:10px;letter-spacing:4px;text-indent:2px;}
#show_ho .rotate90 span{position:absolute;top:10px;}
#show_br{position:absolute;bottom:0vh;left:50%;}
#show_br .rotate90{color:#fff;transform-origin: 0 50%;width:30vh;top:-70px;position:absolute;-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);letter-spacing:6px;text-indent: 3px;}
#show_br .line{width:1px;background-color:#fff;height:0vh;float:left;margin-right:20px;bottom:0px;position:absolute;}
#show_br .rotate90 div{height:10px;line-height:10px;overflow:hidden;position:relative;font-size:10px;letter-spacing:4px;text-indent:2px;}
#show_br .rotate90 span{position:absolute;top:10px;}
#show_de{position:absolute;top:146vh;right:8%;margin-right:8px;height:50%;z-index:3;}
#show_de .rotate90{color:#fff;transform-origin: 0 50%;width:100px;top:100px;position:absolute;-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);letter-spacing:6px;text-indent: 3px;}
#show_de .line{width:1px;background-color:#fff;height:0vh;float:left;margin-right:20px;top:0px;position:absolute;}
#show_de .rotate90 div{height:10px;line-height:10px;overflow:hidden;position:relative;font-size:10px;letter-spacing:4px;text-indent:2px;}
#show_de .rotate90 span{position:absolute;top:10px;}
#show_line{position:absolute;top:0vh;left:50%;height:100%;}
#show_line .line{width:1px;background-color:#fff;height:0vh;float:left;margin-right:20px;bottom:0px;position:relative;}
#svg{width:32px;position:absolute;margin-bottom:17px;bottom:5vh;left:50%;-ms-transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%);}
#freccetta{width:32px;height:34px;position:absolute;opacity:0;}
#cerchio{width:32px;height:34px;position:absolute;opacity:0;}
.left,.right{width:32px;height:34px;float:left;position:relative;margin-top:20px;cursor:pointer;}
.left{margin-right:8px;}
.right{margin-left:8px;}
.freccetta_left,.freccetta_right{width:32px;height:34px;position:absolute;opacity:0;}
.freccetta_left{right:-30px;opacity:0;}
.freccetta_right{left:-30px;opacity:0;}
.cerchio_left,.cerchio_right{width:32px;height:34px;position:absolute;opacity:0;}
.cerchio_left{right:0px;opacity:0;-ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
.cerchio_right{left:0px;opacity:0;-ms-transform: rotate(+180deg); -webkit-transform: rotate(+180deg); transform: rotate(+180deg);}
.viewmore{position:relative;width:114px;overflow:hidden;}
.gallery .info h3{margin:0px;height:12px;/*overflow:hidden;position:relative;*/font-size:1em;line-height:1em;color:#fff;font-weight:normal;letter-spacing:2px;}
.gallery .info h3 span{width:100%;/*position:absolute;top:12px;left:50%;*/-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.gallery .info a.moretext{font-size:11px;font-weight:normal;letter-spacing:2px;margin: 0 0 0 5px;}
.gallery .info a.moretext:hover{text-decoration:none;}
.discover{font-size:10px;letter-spacing:6px;text-indent:3px;height:40px;text-decoration:none;color:#fff;width:0vw;text-align:center;}
.discover:hover{text-decoration:none;color:#fff;}
.scritta-md{z-index:3;width:100%;text-transform:uppercase;font-size:1.6vw;font-weight:100;position:absolute;top:50%;padding:0% 10%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.scritta-md div{height:1.6vw;line-height:1.6vw;overflow:hidden;position:relative;}
.scritta-md span{position:absolute;top:1.6vw;}
#fasciamenu{position:fixed;height:80px;width:100%;padding:0px;z-index:12;}
#fasciamenu [class*="col-md-"]{position:relative;padding-left:0px;padding-right:0px;height:10vh;}
#fasciamenu .scritta{position:relative;top:50%;height:14px;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);text-align:center;overflow:hidden;}
#fasciamenu .scritta span{width:100%;color:#fff;font-size:14px;font-weight:normal;letter-spacing:6px;text-indent:3px;line-height:14px;top:14px;position:absolute;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#fasciamenu .pink, #fasciamenu .black, #fasciamenu .white{height:80px;}
/* HOME */
#testata{position:absolute;width:100%;height:100%;z-index:1}
#testata .rosa, #testata .nero{height:100vh !important;}
#testata .col-md-2{position:relative;overflow:hidden;}
#foto_testata{width:0%;height:80vh;position:absolute;top:10vh;opacity:0;background:#fefefe;overflow:hidden;}
#foto_testata .foto{width:0%;height:80vh;position:absolute;top:0vh;background:#fefefe;overflow:hidden;}
#foto_testata img{/*min-height:90vh;*/min-width:100%;position:absolute;bottom:0px;}
#testata .col-md-2:nth-child(3){height:100vh;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: center;justify-content: center;}
#testata .col-md-2:nth-child(1){height:100vh;}
#sottotestata .col-md-4:nth-child(2){height:100vh;}
#sottotestata .rosa, #sottotestata .nero{height:100vh !important;}
#dis_col{position:absolute;width:20vw;height:40px;z-index:2;left:12%;bottom:10vh;-ms-transform: translateY(50%); -webkit-transform: translateY(50%); transform: translateY(50%);opacity:0;background:#2c2d32;width:0;}
#dis_col:after{content: '';position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
#dis_col:hover:after{width:30vw;background:#ccc;}
#dis_col h3{position:absolute;width:100%;height:10px;left:0px;box-sizing:border-box;padding:0px;margin:15px 0px;overflow:hidden;font-weight:normal;font-size:10px;line-height:10px;}
#dis_col h3 span{position: relative;display:inline-block;opacity:0;}
#brand.row{min-height:auto;}
#brand .rosa, #brand .nero{height:75vh !important;;}
#brand [class*="col-md-"]{min-height:auto;position:inherit;height:75vh;}
#brand .col-md-4{box-sizing:border-box;position:relative;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;}
#brand .col-md-2:nth-child(1){position:absolute;z-index:2;}
#brand .col-md-6{padding-left:0px;padding-right:0px;position:relative;}
#brand #show_c .line{width:1px;background-color:#000;height:100px;float:left;margin-right:20px;}
#brand .discover{position:absolute;width:20vw;height:40px;z-index:2;left:12%;bottom:10vh;-ms-transform: translateY(50%); -webkit-transform: translateY(50%); transform: translateY(50%);opacity:0;background:#2c2d32;width:0;}
#brand .discover:after{content: '';position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
#brand .discover:hover:after{width:30vw;background:#ccc;}
#brand .discover h3{position:absolute;width:100%;height:10px;left:0px;box-sizing:border-box;padding:0px;margin:15px 0px;overflow:hidden;font-weight:normal;font-size:10px;line-height:10px;}
#brand .discover h3 span{position: relative;display:inline-block;opacity:0;top:30px;}
#brand_home{width:0%;height:75vh;position:absolute;opacity:1;overflow:hidden;background:#c0b9b3;}
/*#brand_home .foto{width:0%;height:75vh;position:absolute;top:0vh;overflow:hidden;}*/
#brand_home img{min-height:75vh;max-height:85vh;min-width:100%;position:absolute;top:0%;}
.testo.row{min-height:auto;}
.testo.row a,.testo.row a:hover{color:#333;text-decoration:none;}
.testo .rosa, .testo .nero{height:60vh !important;;}
.testo.row [class*="col-md-"]{min-height:auto;position:inherit;height:60vh;}
.testo .col-md-10{position:absolute !important;}
.testo .scritta-ld{z-index:3;font-weight:100;width:70%;text-transform:uppercase;font-size:3.5vw;position:absolute;left:50%;top:50%;-ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.testo .scritta-ld div{height:3.6vw;line-height:3.6vw;overflow:hidden;position:relative;}
.testo .scritta-ld span{position:absolute;top:3.5vw;}
#press.row{min-height:auto;}
#press .rosa, #press .nero{height:75vh !important;}
#press [class*="col-md-"]{min-height:auto;position:inherit;height:75vh;}
#press_home{width:0%;height:75vh;position:absolute;opacity:1;overflow:hidden;background-color:#fff;}
#press_home .foto{width:0%;height:75vh;position:absolute;top:0vh;overflow:hidden;}
#press_home img{min-height:75vh;max-height:100vh;min-width:100%;position:absolute;bottom:-10%;}
#press .col-md-6{padding:0px;position:relative;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;}
#press .col-md-4{padding-left:0px;padding-right:0px;}
#press .discover{position:absolute;text-align:center;bottom:30%;right:10vw;opacity:0;background:#2c2d32;width:0;}
#press .discover:after{content: '';position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
#press .discover:hover:after{width:30vw;background:#ccc;}
#press .discover h3{position:absolute;width:100%;height:10px;left:0px;box-sizing:border-box;padding:0px;margin:15px 0px;overflow:hidden;font-weight:normal;font-size:10px;line-height:10px;}
#press .discover h3 span{position: relative;display:inline-block;opacity:0;top:30px;}
/* INTERNA */
.gallery:nth-child(1) [class*="col-md-"], .spaziatura [class*="col-md-"] {height: 80px;}
.spaziatura .rosa, .spaziatura .nero, .spaziatura .bianco{height:80px;}
#interna{position:fixed;height:80px;width:100%;padding:0px;z-index:9999;}
#interna [class*="col-md-"]{height:80px;padding-left:0px;padding-right:0px;}
#interna .rosa, #interna .nero{height:80px;}
#interna .pink, #interna .black, #interna .white{height:80px;}
#interna .scritta{position:relative;top:50%;left:2%;height:70px;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);text-align:center;overflow:hidden;}
#interna .scritta h4{display:inline-block;/*float:left;width:100%;*/color:#222;font-size:14px;font-weight:normal;letter-spacing:1px;width: 220px;position: absolute;top: 50%;left: 130px;margin-top: -5px;text-align: left;}
.scritta a{color: #222}
.scritta i{font-size: 18px;position: absolute;top: 50% !important;left: 35px;margin-top: -5px;}
.gallery.row{position:relative;}
.gallery.row .rosa, .gallery.row .nero{height:auto;}
.gallery.row .principale{position:relative;width:0%;height:auto;background:#ddd;cursor: pointer;}
.gallery.row .principale .foto1{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .principale .foto2{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .principale img{width:100%;height:auto;position:absolute;top:0%;}
.gallery.row .principale1{position:relative;width:0%;height:auto;background:#c0b9b3;cursor: pointer;}
.gallery.row .principale1 .foto1{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .principale1 .foto2{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .principale1 img{width:100%;position:absolute;top:0%;}
.gallery.row .principale2{position:relative;width:0%;height:auto;background:#c0b9b3;cursor: pointer;}
.gallery.row .principale2 .foto1{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .principale2 .foto2{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .principale2 img{width:100%;height:auto;position:absolute;top:0%;}
.gallery.row .secondaria{position:absolute;top:0px;width:0%;height:auto;background:#2c2d32;cursor: pointer;}
.gallery.row .secondaria .foto1{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria .foto2{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria .foto3{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria img{width:auto;position:absolute;top:0%;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);opacity:1;}
.gallery.row .secondaria1{position:absolute;top:0px;width:0%;height:auto;background:#2c2d32;cursor: pointer;}
.gallery.row .secondaria1 .foto1{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria1 .foto2{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria1 .foto3{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria1 img{width:auto;position:absolute;top:0%;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);opacity:1;}
.gallery.row .secondaria2{position:absolute;top:0px;width:0%;height:auto;background:#2c2d32;cursor: pointer;}
.gallery.row .secondaria2 .foto1{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria2 .foto2{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria2 .foto3{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.gallery.row .secondaria2 img{width:auto;position:absolute;top:0%;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);opacity:1;}
.gallery .info{width:80%;margin:0% 10%;position:absolute;z-index:2;top:50%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.gallery .info a{color: #ce9b2c;text-decoration: none;}
.gallery .info h2{/*margin:0px;height:4vw;overflow:hidden;position:relative;*/font-size:24px;/*line-height:4vw;*/color:#fff;font-weight:100;}
.gallery .info h2 span{/*position:absolute;top:4vw;*/}
.gallery .info p{font-size:14px;font-weight:300;letter-spacing: 1px;line-height: 1.6;/*height:auto;overflow:hidden;position:relative;line-height:14px;*/}
.gallery .info p span{/*position:absolute;top:14px;*/}
.gallery .info, .pagina .blocco, .awards-logo, .award-title, .award-record{
animation: fadeInRight;
-webkit-animation: fadeInRight;
-ms-animation: fadeInRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
transition-delay: 12s;
-webkit-transition-delay: 12s;
-ms-transition-delay: 12s;
}
.award-record{transition-delay: 8s;-webkit-transition-delay: 8s;}
.pagina.row{position:relative;height:auto;background: #ddd;}
#record{background: #eee;}
.pagina.row [class*="col-md-"]{height:auto;}
.pagina.row:nth-child(1) .bianco, .pagina.row:nth-child(1) .rosa, .pagina.row:nth-child(1) .nero {padding-top:10vh;}
.pagina.row #brand1{position:relative;width:0%;height:auto;background:#c0b9b3;}
.pagina.row #brand1 .foto{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;}
.pagina.row #brand1 img{width:100%;position:absolute;top:0%;}
.pagina .info1 .blocco{position:absolute;width:40vw;right:5vw;top:50%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.pagina .info1 h2{margin:0px;text-transform:uppercase;text-align:right;color:#fff;font-weight:100;font-size:4vw;height:4vw;line-height:4vw;overflow:hidden;position:relative;clear:both;}
.pagina .info1 span{position:absolute;top:4vw;right:0px;}
.pagina .info1 .appendice{position:relative;top:5vh;opacity:0;padding-top:5vh;width:100%;padding-left:16vw;text-align:justify;font-size:14px;line-height:20px;}
.pagina .nero .info1, .pagina .nero .info{position:relative;overflow:hidden;}
.pagina.row #brand2{position:relative;width:0;height:auto;background:#2c2d32;}
.pagina.row #brand2 .foto{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;z-index:3;}
.pagina.row #brand2 img{width:100%;position:absolute;top:0%;}
.pagina .info2{margin:20% 0;}
.pagina .info2 .blocco{position:relative;width:80%;left:5vw;}
.pagina .info2 h2{text-transform:uppercase;margin:0px;text-align:left;font-weight:100;font-size:4vw;height:4vw;line-height:4vw;overflow:hidden;position:relative;}
.pagina .info2 span{position:absolute;top:4vw;left:0px;}
.pagina .info2 .appendice p{position:relative;top:5vh;opacity:0;padding-top:5vh;width:100%;text-align:justify;font-size:14px;line-height:20px;}
.pagina.row .brand{position:relative;width:0;height:auto;background:#ddd;}
.pagina.row .brand .foto{width:0%;height:auto;position:absolute;top:0vh;overflow:hidden;z-index:3;}
.pagina.row .brand img{position:absolute;top:0%;}
.des img{width:100% !important;height:auto !important;}
.pagina .info .blocco{position:relative;width:calc(100% - 8vw);margin:0 5vw;}
.pagina .info h2, .pagina .info h3{letter-spacing:０px;margin:10px 0;text-align:left;text-transform: uppercase;font-weight:100;font-size:24px;/*height:2.4vw;line-height:2.4vw;overflow:hidden;*/position:relative;}
.pagina .info h3{font-size:18px;/*height:1vw;line-height:1vw;*/}
.pagina .rosa .info .appendice{opacity:0;margin:0px;padding:0 5vw;text-align:justify;font-size:14px;line-height:20px;position:relative;top:60%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.pagina .bianco .info .appendice p{position:relative;opacity:0;top:5vh;margin:0px;width:100%;text-align:justify;font-size:1em;line-height:20px;}
.pagina .bianco .info .appendice:nth-child(2){padding-top:5vh;}
.pagina .bianco .info .appendice:nth-child(3){padding-top:0vh;}
p.grey{color:#9f9f9f;}
.sopra1 .brand{position:absolute;top:-20vh;}
.sopra2{position:relative;}
.sopra2 .info .blocco{position:relative;top:80%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);z-index:2;}
#contatti{position:absolute;line-height:0px;height:70vh;top:10vh;width:100%;z-index:4;}
.contact .row:nth-child(3) [class*="col-md-"]{height:70vh;}
.contact .row:nth-child(3) .rosa, .contact .row:nth-child(3) .nero, #contatti .nero{height:70vh;}
.contact .row:nth-child(4) [class*="col-md-"]{height:10vh;}
.contact .row:nth-child(4) .rosa, .contact .row:nth-child(4) .nero{height:10vh;}
#foto_contatti{width:0%;height:70vh;position:absolute;top:0vh;opacity:1;background:#fefefe;overflow:hidden;}
#foto_contatti .foto{width:0%;height:70vh;position:absolute;top:0vh;background:#fefefe;overflow:hidden;}
#foto_contatti img{min-height:80vh;min-width:100%;position:absolute;bottom:-10%;}
#email{position:absolute;width:0;opacity:0;height:40px;z-index:5;left:5%;top:80vh;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);background:#2c2d32;}
#email:after{content: '';position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
#email:hover:after{width:30vw;background:#ccc;}
#email h3{position:absolute;width:100%;height:10px;left:0px;box-sizing:border-box;padding:0px;margin:15px 0px;overflow:hidden;font-weight:normal;font-size:10px;line-height:10px;}
#email h3 span{position: relative;display:inline-block;opacity:0}
.contact .row:nth-child(4) .rosa .info{width:100%;position:relative;top:50%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);text-align:center}
.contact .row:nth-child(4) .rosa .info div{position:absolute;width:100%;height:18px;left:0px;box-sizing:border-box;padding:0px;overflow:hidden;font-weight:normal;font-size:18px;line-height:18px;}
.contact .row:nth-child(4) .rosa .info div span{position: relative;display:inline-block;opacity:0;top:1vw;}
.contact .row:nth-child(3) .nero{position:relative;overflow:hidden;}
#show_co{position:absolute;bottom:0px;left:50%;}
#show_co .rotate90{color:#fff;transform-origin: 0 50%;width:30vh;-ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);letter-spacing:6px;text-indent: 3px;}
#show_co .line{width:1px;background-color:#fff;height:0vh;float:left;margin-right:20px;}
#show_co .rotate90 div{height:14px;line-height:16px;overflow:hidden;position:relative;}
#show_co .rotate90 span{position:absolute;top:16px;}
#show_co .rotate90 a, #show_co .rotate90 a:hover{color:#fff;text-decoration:none;}
.press .container-fluid{padding-left:0px;padding-right:0px;}
.press .row{margin-left:0px;margin-right:0px;}
.giornale{position:relative;height:20vh;width:100%;padding:0px;z-index:11;}
.giornale [class*="col-md-"]{height:20vh;padding-left:0px;padding-right:0px;}
.giornale .rosa, .giornale .nero, .giornale .bianco{height:20vh;}
.giornale .bianco{background-color:#efefef;}
.giornale .bianco img{height:4vh;position:absolute;top:4vh;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.giornale .rosa div{position:relative;top:50%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);text-align:center;}
.giornale .rosa h2, .giornale .rosa h3{margin-top:0px;margin-bottom:0px;}
.giornale .rosa h2{font-weight:normal;font-size:12px;line-height:12px;letter-spacing:6px;text-indent:3px;text-transform:uppercase;position:relative;overflow:hidden;height:12px;}
.giornale .rosa h3{font-family:'proxima_nova_rgregular';font-weight:normal;font-size:12px;line-height:12px;margin-top:12px;letter-spacing:6px;text-indent:3px;text-transform:uppercase;position:relative;overflow:hidden;height:12px;}
.giornale .nero img{width:35px;height:39px;}
.giornale .nero a{width:35px;height:39px;position:absolute;display:block;left:50%;top:50%;-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.giornale.schermata1 .bianco{width:0%;}
.giornale.schermata1 .logo_g{height:4vh;height:4vh;position:relative;left:50%;top:50%;-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);overflow:hidden;}
.giornale.schermata1 .rosa h2 span{position:absolute;top:12px;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.giornale.schermata1 .rosa h3 span{position:absolute;top:12px;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.giornale.schermata1 .d_ce, .giornale.schermata1 .d_fr{position:absolute;left:0px;top:0px;}
.giornale.schermata1 .d_ce{opacity:0;}
.giornale.schermata1 .d_fr{top:-5vh;opacity:0;}
.insta .d_ce, .insta .d_fr{position:absolute;top:0px;}
.insta .d_ce{opacity:0;}
.insta .d_fr{right:-5vh;opacity:0;}
.insta .nero img{width:35px;height:39px;}
.insta .nero a{width:35px;height:39px;position:absolute;display:block;left:50%;top:50%;-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.social .container-fluid{padding-left:0px;padding-right:0px;}
.social .row{margin-left:0px;margin-right:0px;}
.social [class*="col-md-"]{height:auto;padding-left:0px;padding-right:0px;}
.social .insta{height:45vh;}
.social .insta [class*="col-md-"]{height:45vh;}
.social .insta .bianco, .social .insta .rosa, .social .insta .nero{height:45vh;padding:2vh 0;}
.insta .bianco img{height:100%;position:relative;left:50%;-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.social_foto{width:0%;height:41vh;position:absolute;opacity:1;overflow:hidden;background:#fff;}
.social_foto .foto{width:0%;height:41vh;position:absolute;top:0vh;overflow:hidden;}
.social_foto img{min-height:37vh;max-height:47vh;}
.social .rosa .info{position:relative;top:50%;margin:0% 10%;-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);text-align:justify;font-size:14px;line-height:20px;}
.social .rosa .info p{text-align:center;position:relative;top:5vh;opacity:0;}
.social .rosa .info p:nth-child(2){color:#fff;}
.award-logo{
width: 150px;
height: 150px;
}
.img-r{
float: right;
}
.award-logo img{
width: 100%;
height: auto;
}
/* INDEX SLIDER */
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
/*width: 40px;
height: 40px;
cursor: pointer;*/
/*background: url('../img/a17.png') no-repeat;*/
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssort01 .p {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
border-radius: 80px;
overflow: hidden;
}
.jssort01 .t {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*border: none;*/
}
.jssort01 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort01 .c {
position: absolute;
top: 0px;
left: 0px;
width: 80px;
height: 80px;
/*border: #000 2px solid;*/
box-sizing: content-box;
background: rgba(0,0,0,.5);
/*background: url('../img/t01.png') -800px -800px no-repeat;
_background: none;*/
}
.jssort01 .pav .c {
/*top: 2px;
_top: 0px;
left: 2px;
_left: 0px;*/
top: 0px;
left: 0px;
width: 80px;
height: 80px;
/*border: #000 0px solid;
_border: #fff 2px solid;*/
background-position: 50% 50%;
background: rgba(0,0,0,0);
}
.jssort01 .p:hover .c {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
/*border: #fff 1px solid;*/
background-position: 50% 50%;
cursor: pointer;
background: rgba(0,0,0,.3);
}
.jssort01 .p.pdn .c {
background-position: 50% 50%;
width: 80px;
height: 80px;
/*border: #000 2px solid;*/
}
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
/* ie quirks mode adjust */
width /**/: 80px;
height /**/: 80px;
}
/* BUTTON */
.btn-box{
margin: 10px 0;
}
/*
.btn-box a{
margin: 6px 25px 0 0;
}
*/
.dbg-btn{
height: 24px;
}
.btn-box .btn-text{
display:inline-block;
padding:0 0 0 16px;
position:relative;
background:no-repeat;
border:none;
-webkit-appearance:none;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
color:#010101;
font-size:15px;
font-weight:700;
letter-spacing:0.2em;
/*line-height:1;*/
text-transform:uppercase
}
.btn-box .btn-text:before, .btn-box .btn-text:after{
display:block;
position:absolute;
right:auto;
left:0;
width:3px;
height:50%;
background:#010101;
content:'';
-moz-transition:width 0.3s cubic-bezier(0.77, 0, 0.175, 1), -moz-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition:width 0.3s cubic-bezier(0.77, 0, 0.175, 1), -o-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition:width 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
transition:width 0.3s cubic-bezier(0.77, 0, 0.175, 1), transform 0.3s cubic-bezier(0.77,0,0.175,1);
-moz-transform:none;
-ms-transform:none;
-webkit-transform:none;
transform:none
}
.btn-box .btn-text:before{
top:0;
bottom:auto;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%
}
.btn-box .btn-text:after{
top:auto;
bottom:0;
-moz-transform-origin:100% 0;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform-origin:100% 0
}
.btn-box .btn-text:hover:before{
width:2px;
-moz-transform:scaleX(1.3) translateX(5px) rotateZ(-36deg);
-ms-transform:scaleX(1.3) translateX(5px) rotateZ(-36deg);
-webkit-transform:scaleX(1.3) translateX(5px) rotateZ(-36deg);
transform:scaleX(1.3) translateX(5px) rotateZ(-36deg)
}
.btn-box .btn-text:hover:after{
width:2px;
-moz-transform:scaleX(1.3) translateX(5px) rotateZ(36deg);
-ms-transform:scaleX(1.3) translateX(5px) rotateZ(36deg);
-webkit-transform:scaleX(1.3) translateX(5px) rotateZ(36deg);
transform:scaleX(1.3) translateX(5px) rotateZ(36deg)
}
/* INDEX DESIGNER & CASE */
section.main-content {
background: #E6E6E6;
padding: 50px 0 20px 0;
}
.designer-list{
animation: fadeInDown;
-webkit-animation: fadeInDown;
-ms-animation: fadeInDown;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
transition-delay: 4s;
-webkit-transition-delay: 4s;
-ms-transition-delay: 4s;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -60px, 0);
-ms-transform: translate3d(0, -60px, 0);
transform: translate3d(0, -60px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.dpro-box{
background-color: rgba(255,255,255,1);
text-align: center;
padding: 0 0 15px;
margin: 20px 10px 30px 10px;
min-height: 370px;
height:380px;
position: relative;
}
.dpro-box .icon-designer{
width: 110px;
height: 26px;
background-image: url(../img/icon_designer.png);
background-repeat: no-repeat;
position: absolute;
top: -25px;
left: -10px;
}
.dpro-box a{
color: #222;
text-decoration: none;
display: block;
}
.dpro-box a:hover{
color: #ce9b2c;
}
.dpro-box img{
width: 100%;
max-width: 300px;
height: auto;
}
.dpro-box h3{
font-size: 15px;
margin: 15px 0 6px;
font-weight: bold;
}
.dpro-box p{
font-size: 13px;
margin: 0;
}
/* =======================
INDEX CASE VERTICAL SLIDER
======================= */
/*Vertical Orientation CSS Starts*/
.jscarousal-vertical{
width: 315px;
height: 815px;
background-color: #fff;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward{
width: 100%;
height: 30px;
background-color: #fff;
position: relative;
cursor: pointer;
z-index: 100;
}
.jscarousal-vertical-back{
background-image: url(../img/icon_arrow.png);
background-repeat: no-repeat;
background-position: bottom;
}
.jscarousal-vertical-forward{
background-image: url(../img/icon_arrow.png);
background-repeat: no-repeat;
background-position: top;
transform: rotate(180deg);
}
.jscarousal-contents-vertical{
overflow: hidden;
width: 315px;
height: 755px;
}
.jscarousal-contents-vertical > div{
position: absolute;
top: 30px;
width: 100%;
height: 815px;
overflow: hidden;
}
.jscarousal-contents-vertical > div > div{
width: 315px;
height: 250px;
margin: 4px 0;
}
.jscarousal-contents-vertical > div > div span{
display: block;
width: 100%;
text-align: center;
}
.jscarousal-contents-vertical img{
width: 100%;
max-width: 315px;
height: auto;
max-height: 210px;
}
.jscarousal-contents-vertical a{
color: #222;
}
.jscarousal-contents-vertical a:hover{
color: #ce9b2c;
text-decoration: none;
}
.thumbnail-text{
font-size: 15px;
font-weight: bold;
text-align: center;
display: block;
padding: 8px 0;
}
/*Vertical Orientation CSS Ends*/
/* DESIGNER - FILE */
.appendice p{
font-size: 14px;
letter-spacing: 1px;
line-height: 1.6;
padding: 10px 0;
color: #666;
}
/* DESIGNER - CASE */
.icon_case{
width: 177px;
height: 41px;
background-image: url(../img/icon_case.png);
background-repeat: no-repeat;
position: absolute;
top: -100px;
left: 0;
z-index: 1000;
}
.d-photo-s{
display:inline-block;
width: 70px;
height: 70px;
border-radius: 70px;
overflow: hidden;
border: 2px solid rgba(255,255,255,0.2);
margin: 2px 10px 0 2px;
position: absolute;
left: 50px;
}
.d-photo-s img{
max-width: 70px;
}
/* AWARDS RECORD */
.award-year{
font-size: 18px;
font-weight: bold;
}
.awards-logo{
width: 90%;
margin: 0 auto;
padding: 80px 0 50px 0;
text-align: center;
}
.awards-logo img{
margin: 3px 10px;
max-height: 60px;
}
.awards-logo-s{
width: 100%;
margin: 0 auto;
padding: 15px 0 0;
}
.awards-logo-s img{
max-height: 45px;
margin: 0 10px 6px 0;
}
.award-title p{
font-size: 18px;
color: #555;
margin: 6px 0;
font-weight: bold;
}
.award-desc p{
font-size: 15px;
letter-spacing: 1px;
}
.award-record{
padding: 0 0 30px 30px;
}
/* ============
HAMBURGERS
=========== */
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, -webkit-filter;
transition-property: opacity, filter;
transition-property: opacity, filter, -webkit-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: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 40px;
height: 1px;
/*background-color: #fff;*/
background-color: #ce9b2c;
border-radius: 4px;
position: absolute;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-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; }
/*
* 3DX
*/
.hamburger--3dx .hamburger-box {
-webkit-perspective: 80px;
perspective: 80px; }
.hamburger--3dx .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg); }
.hamburger--3dx.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dx.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); }
/*
* 3DX Reverse
*/
.hamburger--3dx-r .hamburger-box {
-webkit-perspective: 80px;
perspective: 80px; }
.hamburger--3dx-r .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dx-r.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg); }
.hamburger--3dx-r.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dx-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); }
/*
* 3DY
*/
.hamburger--3dy .hamburger-box {
-webkit-perspective: 80px;
perspective: 80px; }
.hamburger--3dy .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg); }
.hamburger--3dy.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dy.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); }
/*
* 3DY Reverse
*/
.hamburger--3dy-r .hamburger-box {
-webkit-perspective: 80px;
perspective: 80px; }
.hamburger--3dy-r .hamburger-inner {
transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
.hamburger--3dy-r.is-active .hamburger-inner {
background-color: transparent;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg); }
.hamburger--3dy-r.is-active .hamburger-inner::before {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--3dy-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg); }
/*
* Arrow
*/
.hamburger--arrow.is-active .hamburger-inner::before {
-webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
.hamburger--arrow.is-active .hamburger-inner::after {
-webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
/*
* Arrow Right
*/
.hamburger--arrow-r.is-active .hamburger-inner::before {
-webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
.hamburger--arrow-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
/*
* Arrow Alt
*/
.hamburger--arrowalt .hamburger-inner::before {
transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt .hamburger-inner::after {
transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.hamburger--arrowalt.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
/*
* Arrow Alt Right
*/
.hamburger--arrowalt-r .hamburger-inner::before {
transition: top 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: top 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt-r .hamburger-inner::after {
transition: bottom 0.1s 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: bottom 0.1s 0.15s ease, transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.15s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
transition: top 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: top 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
transition: bottom 0.1s ease, -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: bottom 0.1s ease, transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.15s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
/*
* Boring
*/
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
transition-property: none; }
.hamburger--boring.is-active .hamburger-inner {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.hamburger--boring.is-active .hamburger-inner::before {
top: 0;
opacity: 0; }
.hamburger--boring.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
/*
* Collapse
*/
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.15s;
transition-delay: 0.15s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {
top: -20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.32s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Collapse Reverse
*/
.hamburger--collapse-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.15s;
transition-delay: 0.15s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r .hamburger-inner::after {
top: -20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse-r .hamburger-inner::before {
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, -10px, 0) rotate(45deg);
transform: translate3d(0, -10px, 0) rotate(45deg);
transition-delay: 0.32s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear; }
.hamburger--collapse-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Elastic
*/
.hamburger--elastic .hamburger-inner {
top: 2px;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic .hamburger-inner::before {
top: 10px;
transition: opacity 0.15s 0.4s ease; }
.hamburger--elastic .hamburger-inner::after {
top: 20px;
transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(135deg);
transform: translate3d(0, 10px, 0) rotate(135deg);
transition-delay: 0.1s; }
.hamburger--elastic.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0; }
.hamburger--elastic.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(-270deg);
transform: translate3d(0, -20px, 0) rotate(-270deg);
transition-delay: 0.1s; }
/*
* Elastic Reverse
*/
.hamburger--elastic-r .hamburger-inner {
top: 2px;
transition-duration: 0.4s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic-r .hamburger-inner::before {
top: 10px;
transition: opacity 0.15s 0.4s ease; }
.hamburger--elastic-r .hamburger-inner::after {
top: 20px;
transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.hamburger--elastic-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(-135deg);
transform: translate3d(0, 10px, 0) rotate(-135deg);
transition-delay: 0.1s; }
.hamburger--elastic-r.is-active .hamburger-inner::before {
transition-delay: 0s;
opacity: 0; }
.hamburger--elastic-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(270deg);
transform: translate3d(0, -20px, 0) rotate(270deg);
transition-delay: 0.1s; }
/*
* Emphatic
*/
.hamburger--emphatic {
overflow: hidden; }
.hamburger--emphatic .hamburger-inner {
transition: background-color 0.2s 0.25s ease-in; }
.hamburger--emphatic .hamburger-inner::before {
left: 0;
transition: top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic .hamburger-inner::after {
top: 10px;
right: 0;
transition: top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic.is-active .hamburger-inner {
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: transparent; }
.hamburger--emphatic.is-active .hamburger-inner::before {
left: -80px;
top: -80px;
-webkit-transform: translate3d(80px, 80px, 0) rotate(45deg);
transform: translate3d(80px, 80px, 0) rotate(45deg);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
.hamburger--emphatic.is-active .hamburger-inner::after {
right: -80px;
top: -80px;
-webkit-transform: translate3d(-80px, 80px, 0) rotate(-45deg);
transform: translate3d(-80px, 80px, 0) rotate(-45deg);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
/*
* Emphatic Reverse
*/
.hamburger--emphatic-r {
overflow: hidden; }
.hamburger--emphatic-r .hamburger-inner {
transition: background-color 0.2s 0.25s ease-in; }
.hamburger--emphatic-r .hamburger-inner::before {
left: 0;
transition: top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, left 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic-r .hamburger-inner::after {
top: 10px;
right: 0;
transition: top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in;
transition: transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.2s linear, right 0.2s 0.25s ease-in, -webkit-transform 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335); }
.hamburger--emphatic-r.is-active .hamburger-inner {
transition-delay: 0s;
transition-timing-function: ease-out;
background-color: transparent; }
.hamburger--emphatic-r.is-active .hamburger-inner::before {
left: -80px;
top: 80px;
-webkit-transform: translate3d(80px, -80px, 0) rotate(-45deg);
transform: translate3d(80px, -80px, 0) rotate(-45deg);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: left 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
.hamburger--emphatic-r.is-active .hamburger-inner::after {
right: -80px;
top: 80px;
-webkit-transform: translate3d(-80px, -80px, 0) rotate(45deg);
transform: translate3d(-80px, -80px, 0) rotate(45deg);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: right 0.2s ease-out, top 0.05s 0.2s linear, transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.2s 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); }
/*
* Slider
*/
.hamburger--slider .hamburger-inner {
top: 2px; }
.hamburger--slider .hamburger-inner::before {
top: 10px;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
transition-timing-function: ease;
transition-duration: 0.2s; }
.hamburger--slider .hamburger-inner::after {
top: 20px; }
.hamburger--slider.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--slider.is-active .hamburger-inner::before {
-webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
opacity: 0; }
.hamburger--slider.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
transform: translate3d(0, -20px, 0) rotate(-90deg); }
/*
* Slider Reverse
*/
.hamburger--slider-r .hamburger-inner {
top: 2px; }
.hamburger--slider-r .hamburger-inner::before {
top: 10px;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
transition-timing-function: ease;
transition-duration: 0.2s; }
.hamburger--slider-r .hamburger-inner::after {
top: 20px; }
.hamburger--slider-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
transform: translate3d(0, 10px, 0) rotate(-45deg); }
.hamburger--slider-r.is-active .hamburger-inner::before {
-webkit-transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
opacity: 0; }
.hamburger--slider-r.is-active .hamburger-inner::after {
-webkit-transform: translate3d(0, -20px, 0) rotate(90deg);
transform: translate3d(0, -20px, 0) rotate(90deg); }
/*
* Spring
*/
.hamburger--spring .hamburger-inner {
top: 2px;
transition: background-color 0s 0.15s linear; }
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring.is-active .hamburger-inner {
transition-delay: 0.32s;
background-color: transparent; }
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
transform: translate3d(0, 10px, 0) rotate(-45deg); }
/*
* Spring Reverse
*/
.hamburger--spring-r .hamburger-inner {
top: auto;
bottom: 0;
transition-duration: 0.15s;
transition-delay: 0s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r .hamburger-inner::after {
top: -20px;
transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
.hamburger--spring-r .hamburger-inner::before {
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r.is-active .hamburger-inner {
-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.32s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spring-r.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.32s linear; }
.hamburger--spring-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.32s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Stand
*/
.hamburger--stand .hamburger-inner {
transition: background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear;
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand .hamburger-inner::before {
transition: top 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand .hamburger-inner::after {
transition: bottom 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand.is-active .hamburger-inner {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background-color: transparent;
transition: background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear;
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: top 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: bottom 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Stand Reverse
*/
.hamburger--stand-r .hamburger-inner {
transition: background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear;
transition: transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.1s linear, -webkit-transform 0.1s 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r .hamburger-inner::before {
transition: top 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: top 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r .hamburger-inner::after {
transition: bottom 0.1s 0.1s ease-in, -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.1s ease-in, transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--stand-r.is-active .hamburger-inner {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background-color: transparent;
transition: background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear;
transition: transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.22s linear, -webkit-transform 0.1s 0s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand-r.is-active .hamburger-inner::before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: top 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: top 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--stand-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: bottom 0.1s 0.12s ease-out, -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s 0.12s ease-out, transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Spin
*/
.hamburger--spin .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Spin Reverse
*/
.hamburger--spin-r .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin-r .hamburger-inner::before {
transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }
.hamburger--spin-r .hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin-r.is-active .hamburger-inner {
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }
.hamburger--spin-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Squeeze
*/
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.1s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
* Vortex
*/
.hamburger--vortex .hamburger-inner {
transition-duration: 0.3s;
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, -webkit-transform;
transition-property: bottom, transform;
transition-property: bottom, transform, -webkit-transform; }
.hamburger--vortex.is-active .hamburger-inner {
-webkit-transform: rotate(765deg);
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;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
/*
* Vortex Reverse
*/
.hamburger--vortex-r .hamburger-inner {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
transition-duration: 0s;
transition-delay: 0.1s;
transition-timing-function: linear; }
.hamburger--vortex-r .hamburger-inner::before {
transition-property: top, opacity; }
.hamburger--vortex-r .hamburger-inner::after {
transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
transition-property: bottom, transform, -webkit-transform; }
.hamburger--vortex-r.is-active .hamburger-inner {
-webkit-transform: rotate(-765deg);
transform: rotate(-765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
transition-delay: 0s; }
.hamburger--vortex-r.is-active .hamburger-inner::before {
top: 0;
opacity: 0; }
.hamburger--vortex-r.is-active .hamburger-inner::after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
/* Buttons
--------------------------------------------------*/
.sp-buttons {
position: relative;
width: 100%;
text-align: center;
padding-top: 10px;
}
.sp-button {
width: 10px;
height: 10px;
border: 2px solid #000;
border-radius: 50%;
margin: 4px;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}
.sp-selected-button {
background-color: #FFFFFF;
}
/* Arrows
--------------------------------------------------*/
.sp-arrows {
position: absolute;
}
.sp-fade-arrows {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sp-slides-container:hover .sp-fade-arrows {
opacity: 1;
}
.sp-horizontal .sp-arrows {
width: 100%;
left: 0;
top: 50%;
margin-top: -15px;
}
.sp-vertical .sp-arrows {
height: 100%;
left: 50%;
top: 0;
margin-left: -10px;
}
.sp-arrow {
position: absolute;
display: block;
width: 20px;
height: 30px;
cursor: pointer;
}
.sp-vertical .sp-arrow {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sp-horizontal .sp-previous-arrow {
left: 20px;
}
.sp-horizontal .sp-next-arrow {
right: 20px;
}
.sp-vertical .sp-previous-arrow {
top: 20px;
}
.sp-vertical .sp-next-arrow {
bottom: 20px;
}
.sp-previous-arrow:before,
.sp-previous-arrow:after,
.sp-next-arrow:before,
.sp-next-arrow:after {
content: '';
position: absolute;
width: 50%;
height: 50%;
background-color: #FFF;
}
.sp-previous-arrow:before {
left: 30%;
top: 0;
-webkit-transform: skew(145deg, 0deg);
-ms-transform: skew(145deg, 0deg);
transform: skew(145deg, 0deg);
}
.sp-previous-arrow:after {
left: 30%;
top: 50%;
-webkit-transform: skew(-145deg, 0deg);
-ms-transform: skew(-145deg, 0deg);
transform: skew(-145deg, 0deg);
}
.sp-next-arrow:before {
right: 30%;
top: 0;
-webkit-transform: skew(35deg, 0deg);
-ms-transform: skew(35deg, 0deg);
transform: skew(35deg, 0deg);
}
.sp-next-arrow:after {
right: 30%;
top: 50%;
-webkit-transform: skew(-35deg, 0deg);
-ms-transform: skew(-35deg, 0deg);
transform: skew(-35deg, 0deg);
}
.ie8 .sp-arrow,
.ie7 .sp-arrow {
width: 0;
height: 0;
}
.ie8 .sp-arrow:before,
.ie8 .sp-arrow:after,
.ie7 .sp-arrow:before,
.ie7 .sp-arrow:after {
content: none;
}
.ie8.sp-horizontal .sp-previous-arrow,
.ie7.sp-horizontal .sp-previous-arrow {
border-right: 20px solid #FFF;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.ie8.sp-horizontal .sp-next-arrow,
.ie7.sp-horizontal .sp-next-arrow {
border-left: 20px solid #FFF;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.ie8.sp-vertical .sp-previous-arrow,
.ie7.sp-vertical .sp-previous-arrow {
border-bottom: 20px solid #FFF;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.ie8.sp-vertical .sp-next-arrow,
.ie7.sp-vertical .sp-next-arrow {
border-top: 20px solid #FFF;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
/* Thumbnail Arrows
--------------------------------------------------*/
.sp-thumbnail-arrows {
position: absolute;
}
.sp-fade-thumbnail-arrows {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows {
opacity: 1;
}
.sp-top-thumbnails .sp-thumbnail-arrows,
.sp-bottom-thumbnails .sp-thumbnail-arrows {
width: 100%;
top: 50%;
left: 0;
margin-top: -12px;
}
.sp-left-thumbnails .sp-thumbnail-arrows,
.sp-right-thumbnails .sp-thumbnail-arrows {
height: 100%;
top: 0;
left: 50%;
margin-left: -7px;
}
.sp-thumbnail-arrow {
position: absolute;
display: block;
width: 15px;
height: 25px;
cursor: pointer;
}
.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,
.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sp-top-thumbnails .sp-previous-thumbnail-arrow,
.sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
left: 0px;
}
.sp-top-thumbnails .sp-next-thumbnail-arrow,
.sp-bottom-thumbnails .sp-next-thumbnail-arrow {
right: 0px;
}
.sp-left-thumbnails .sp-previous-thumbnail-arrow,
.sp-right-thumbnails .sp-previous-thumbnail-arrow {
top: 0px;
}
.sp-left-thumbnails .sp-next-thumbnail-arrow,
.sp-right-thumbnails .sp-next-thumbnail-arrow {
bottom: 0px;
}
.sp-previous-thumbnail-arrow:before,
.sp-previous-thumbnail-arrow:after,
.sp-next-thumbnail-arrow:before,
.sp-next-thumbnail-arrow:after {
content: '';
position: absolute;
width: 50%;
height: 50%;
background-color: #FFF;
}
.sp-previous-thumbnail-arrow:before {
left: 30%;
top: 0;
-webkit-transform: skew(145deg, 0deg);
-ms-transform: skew(145deg, 0deg);
transform: skew(145deg, 0deg);
}
.sp-previous-thumbnail-arrow:after {
left: 30%;
top: 50%;
-webkit-transform: skew(-145deg, 0deg);
-ms-transform: skew(-145deg, 0deg);
transform: skew(-145deg, 0deg);
}
.sp-next-thumbnail-arrow:before {
right: 30%;
top: 0;
-webkit-transform: skew(35deg, 0deg);
-ms-transform: skew(35deg, 0deg);
transform: skew(35deg, 0deg);
}
.sp-next-thumbnail-arrow:after {
right: 30%;
top: 50%;
-webkit-transform: skew(-35deg, 0deg);
-ms-transform: skew(-35deg, 0deg);
transform: skew(-35deg, 0deg);
}
.ie8 .sp-thumbnail-arrow,
.ie7 .sp-thumbnail-arrow {
width: 0;
height: 0;
}
.ie8 .sp-thumbnail-arrow:before,
.ie8 .sp-thumbnail-arrow:after,
.ie7 .sp-thumbnail-arrow:before,
.ie7 .sp-thumbnail-arrow:after {
content: none;
}
.ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow {
border-right: 12px solid #FFF;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow {
border-left: 12px solid #FFF;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow {
border-bottom: 12px solid #FFF;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
.ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow,
.ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow {
border-top: 12px solid #FFF;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
/* Video
--------------------------------------------------*/
a.sp-video {
text-decoration: none;
}
a.sp-video img {
-webkit-backface-visibility: hidden;
border: none;
}
a.sp-video:after {
content: '\25B6';
position: absolute;
width: 45px;
padding-left: 5px;
height: 50px;
border: 2px solid #FFF;
text-align: center;
font-size: 30px;
border-radius: 30px;
top: 0;
color: #FFF;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.2);
margin: auto;
line-height: 52px;
}
/* SHARE BOX */
.share-box{
position: fixed;
right: 25px;
top: 10px;
z-index: 99999;
}
.share-icon{
float: left;
margin: 0 1px;
}
.share-icon a{
display:block;
width: 55px;
height: 55px;
background-repeat:no-repeat;
background-position:0 0;
opacity:.9;
-moz-opacity:.9;
filter:alpha(opacity=90);
}
/* .share-icon a:hover{
background-position:0 bottom;
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
} */
.hhh-index a{background-image:url(../img/icon_hhh.png);}
.line-friend a{background-image:url(../img/icon_line_friend.png);}
.fb-share a{background-image:url(../img/icon_fb_share.png);}
/* FOOTER */
footer{
background: #eee;
width: 100%;
height: 60px;
line-height: 60px;
}
.footer{
font-size: 13px;
letter-spacing: 1px;
position: absolute;
left: 50%;
margin-left: -330px;
}
.footer span{
margin: 0 3px;
}
.footer img{
max-height: 18px;
margin: -2px 0 0;
}
.footer a{
color: #333;
}
.footer a:hover{
color: #ce9b2c;
text-decoration: none;
}
.backhhh{}
.backhhh img{
max-width: 18px;
}
/* back to top */
#gotop{
display: none;
position: fixed;
right: 25px;
bottom: 20px;
cursor: pointer;
z-index: 99999;
}
#gotop a{
display:block;
width:60px;
height:60px;
background-image:url(../img/icon_top.png);
background-repeat:no-repeat;
background-position:0 0;
opacity:.9;
-moz-opacity:.9;
filter:alpha(opacity=90);
}
#gotop a:hover{
background-position:0 bottom;
}
/* ==========
index-slider
========== */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flexslider a img { outline: none; border: none; }
.flexslider {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* Clearfix for the .slides element */
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
/* Theme Styles */
.flexslider {
position: relative;
zoom: 1;
}
/* Edit it if you want */
.flex-container {
width: 100%;
max-height: 800px;
}
.flexslider .slides { zoom: 1; }
/* Direction Nav */
.flex-direction-nav{display: none;}
/* Control Nav */
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: 25px;
text-align: center;
z-index: 9999;
}
.flex-control-nav li {
display: inline-block;
zoom: 1;
}
.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 14px;
height: 14px;
margin: 0 5px;
background-color: #ce9b2c \9;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 0 0 0 2px #ce9b2c;
-moz-box-shadow: inset 0 0 0 2px #ce9b2c;
box-shadow: inset 0 0 0 2px #ce9b2c;
}
.flex-control-paging li a.flex-active {
background-color: #ce9b2c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbb96b), to(#ce9b2c));
background-image: -webkit-linear-gradient(top, #dbb96b, #ce9b2c);
background-image: -moz-linear-gradient(top, #dbb96b, #ce9b2c);
background-image: -o-linear-gradient(top, #dbb96b, #ce9b2c);
background-image: linear-gradient(to bottom, #dbb96b, #ce9b2c);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Captions */
.flexslider .slides h1{
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 50%;
bottom: 0px;
font-size: 32px;
color: white;
text-align: center;
height: 32px;
margin-top: -20px;
letter-spacing: 3px;
animation: fadeInRight; /*動畫名稱*/
-webkit-animation: fadeInRight;
-ms-animation: fadeInRight;
animation-duration: 1.5s; /*動畫持續時間*/
-webkit-animation-duration: 1.5s; /*針對webkit内核*/
-ms-animation-duration: 1.5s;
}
.flexslider .slides p {
display: block;
position: absolute;
left: 0px;
right: 0px;
top: 50%;
bottom: 0px;
margin-top: 36px;
font-size: 16px;
color: white;
text-align: center;
height: 16px;
letter-spacing: 1px;
animation: fadeInRight; /*動畫名稱*/
-webkit-animation: fadeInRight;
-ms-animation: fadeInRight;
animation-duration: 1.5s; /*動畫持續時間*/
-webkit-animation-duration: 1.5s; /*針對webkit内核*/
-ms-animation-duration: 1.5s;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-ms-animation-delay: 0.3s;
}
.flexslider .slides h1, .flexslider .slides p{
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}/*初始狀態 透明度為0*/
60% {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}/*過渡狀態 透明度為0*/
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}/*結束狀態 透明度為1*/
}
@-webkit-keyframes fadeInRight {/*針對webkit內核*/
0% {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
60% {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
}/*初始狀態 透明度為1*/
60% {
opacity: 1;
}/*過渡狀態 透明度為1*/
100% {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
-ms-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}/*結束狀態 透明度為0*/
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
-ms-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
}
.flexslider .slides h1, .flexslider .slides p{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
}
/* MODIFY BOOTSTRAP */
.col-mo-9{
width: 70% !important;
}
.col-mo-3{
width: 30% !important;
}
hr{border-top: 1px solid #ddd !important;}
.glogo {
background-image: url(../img/glory_logo.png);
background-repeat: no-repeat;
width: 100%;
max-width: 123px;
height: 48px;
background-position: center;
}
.gg {
width: 123px !important;
height: 48px;
}
#logo img {
width: 100%;
}