/*! * animate.css -http://daneden.me/animate * Version - 3.6.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2018 Daniel Eden */.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } @-webkit-keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } @keyframes bounce { 0%,20%,53%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1); -webkit-transform: translateZ(0); transform: translateZ(0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06); animation-timing-function: cubic-bezier(.755,.05,.855,.06); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 0%,50%,to { opacity: 1 } 25%,75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } @keyframes shake { 0%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg) } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg) } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg) } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg) } 50% { -webkit-transform: translateX(0); transform: translateX(0) } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } to { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg); transform: scale3d(.9,.9,.9) rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg); transform: scale3d(1.1,1.1,1.1) rotate(3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg); transform: scale3d(1.1,1.1,1.1) rotate(-3deg) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%,0,0) rotate(-5deg); transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate(3deg); transform: translate3d(20%,0,0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate(-3deg); transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate(2deg); transform: translate3d(10%,0,0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate(-1deg); transform: translate3d(-5%,0,0) rotate(-1deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } 15% { -webkit-transform: translate3d(-25%,0,0) rotate(-5deg); transform: translate3d(-25%,0,0) rotate(-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate(3deg); transform: translate3d(20%,0,0) rotate(3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate(-3deg); transform: translate3d(-15%,0,0) rotate(-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate(2deg); transform: translate3d(10%,0,0) rotate(2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate(-1deg); transform: translate3d(-5%,0,0) rotate(-1deg) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes jello { 0%,11.1%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes jello { 0%,11.1%,to { -webkit-transform: translateZ(0); transform: translateZ(0) } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(.390625deg) skewY(.390625deg); transform: skewX(.390625deg) skewY(.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes bounceIn { 0%,20%,40%,60%,80%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } .bounceIn { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInDown { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInLeft { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInRight { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes bounceInUp { 0%,60%,75%,90%,to { -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1); animation-timing-function: cubic-bezier(.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } to { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } .bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } to { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes fadeOutDown { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes fadeOutRight { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes fadeOutUp { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg) } to { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0 } } .flipOutX { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1 } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } to { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%,60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } to { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } .hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(.1) rotate(30deg); transform: scale(.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate(-120deg); transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate(-120deg); transform: translate3d(-100%,0,0) rotate(-120deg) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate(120deg); transform: translate3d(100%,0,0) rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1 } to { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate(120deg); transform: translate3d(100%,0,0) rotate(120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } to { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19); animation-timing-function: cubic-bezier(.55,.055,.675,.19) } to { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1); animation-timing-function: cubic-bezier(.175,.885,.32,1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } to { -webkit-transform: translateZ(0); transform: translateZ(0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0) } to { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } .l-grid-flex { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: flex } .slick-slider { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list,.slick-slider { position: relative; display: block } .slick-list { overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-list,.slick-slider .slick-track { -webkit-transform: translateZ(0); transform: translateZ(0) } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto } .slick-track:after,.slick-track:before { content: ""; display: table } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { float: left; height: 100%; min-height: 1px; display: none }[dir=rtl] .slick-slide { float: right } /*.slick-slide img { display: block }*/ .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .lightbox-lite,.lightbox-lite-open { overflow: hidden } .lightbox-lite { position: fixed; top: -500%; width: 0; height: 0; background: rgba(0,0,0,.7); opacity: 0; z-index: -10; -webkit-transition: width 0s .5s,height 0s .5s,z-index 0s .5s,top 0s .5s,opacity .5s; transition: width 0s .5s,height 0s .5s,z-index 0s .5s,top 0s .5s,opacity .5s } .lightbox-lite.lightbox-lite-box-open { width: 100%; height: 100%; z-index: 100; opacity: 1; top: 0!important; -webkit-transition: width 0s,height 0s,z-index 0s,top 0s,opacity .5s; transition: width 0s,height 0s,z-index 0s,top 0s,opacity .5s } .lightbox-lite.lightbox-lite-box-open>.lightbox-lite__box { top: 50%; left: 50%; -webkit-transition: left 0s,top .5s; transition: left 0s,top .5s } .lightbox-lite.has-feedback .lightbox-lite-content-placeholder:after,.lightbox-lite.is-loading .lightbox-lite-content-placeholder:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: hsla(0,0%,100%,.8) no-repeat 50% } .lightbox-lite.has-feedback .lightbox-lite__box,.lightbox-lite.is-loading .lightbox-lite__box { overflow: hidden } .lightbox-lite.is-loading>.lightbox-lite__box:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background: url("/images/loading-pretty.gif") no-repeat 50%; background-size: 100px 100px } .lightbox-lite__box { max-height: 90%; min-height: 40%; margin: auto; position: fixed; background: #fff; top: 100%; left: -200%; height: auto; width: 90%; padding: 55px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; z-index: 4; -webkit-font-smoothing: antialiased; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: left 0s .5s,top .5s; transition: left 0s .5s,top .5s; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); color: #000; font-size: 15px; font-size: .9375rem; line-height: 1.3 } @media (max-width:768px) { .lightbox-lite__box { padding: 40px 20px; width: 95% } } .lightbox-lite__box--m { width: 70%; padding: 40px 90px } @media (max-width:1240px) { .lightbox-lite__box--m { padding: 30px 50px; width: 75% } } @media (max-width:768px) { .lightbox-lite__box--m { padding: 30px 20px; width: 95% } } .lightbox-lite__box--s { width: 45%; padding: 55px 110px; max-width: 700px } @media (max-width:1040px) { .lightbox-lite__box--s { width: 50%; padding: 40px 50px; max-width: none } } @media (max-width:650px) { .lightbox-lite__box--s { padding: 45px 20px; width: 95% } } .lightbox-lite__box__loading { padding-bottom: 35%; background: url("/images/loading-pretty.gif") no-repeat 50% #fff; background-size: 90px 90px } .lightbox-lite__box-inner { height: 100%; position: relative } .lightbox-lite-content-placeholder { height: 100% } .lightbox-lite__feedback { position: absolute; top: 25%; opacity: 0; width: 0; height: 0; overflow: hidden; text-align: center; z-index: -1; font-size: 24px; font-size: 1.5rem; line-height: 1.2; display: none } .has-feedback .lightbox-lite__feedback { z-index: 2; width: 100%; height: auto; opacity: 1; display: block } .lightbox-lite-close { position: absolute; top: 5px; right: 5px; z-index: 3; font-size: 16px; line-height: 16px; color: #d30013; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: .6; -khtml-opacity: .6; opacity: .6; padding: 15px; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } .no-touchevents .lightbox-lite-close:active,.no-touchevents .lightbox-lite-close:hover { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) } .animated { -vendor-animation-duration: .5s; -webkit-animation-duration: .5s; animation-duration: .5s } .group:after { content: ""; display: table; clear: both } .l-align-center { text-align: center!important } .l-align-right { text-align: right!important } .l-align-left { text-align: left!important } .l-margin-left-auto { margin-left: auto!important } .l-margin-right-auto { margin-right: auto!important } .l-rel { position: relative } .l-left { float: left!important } .l-right { float: right!important } .l-center { -webkit-transform: translateX(-50%); transform: translateX(-50%) } .l-center,.l-middle { position: absolute; left: 50% } .l-middle { top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } .l-v-center { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .l-center-block { margin-left: auto; margin-right: auto; display: block } .is-hidden { display: none } .is-visually-hidden { top: -5000px; left: -5000px } .l-v-center-table { display: table; height: 100%; width: 100% } .l-v-center-cell { display: table-cell; vertical-align: middle } .l-bottom { position: absolute; bottom: 0; left: 0; right: 0 } .l-full-height { height: 100% } .l-fixed-height--l { overflow: auto; max-height: 500px } @media screen and (max-width:1100px) { .l-fixed-height--l { max-height: none } } .l-v-align-middle { vertical-align: middle } .l-center-block-m { width: 90% } .l-center-block-m,.l-center-block-s { margin-left: auto; margin-right: auto; display: block } .l-center-block-s { width: 60% } @media screen and (max-width:500px) { .l-center-block-s { width: 100% } } @media screen and (max-width:550px) { .l-static--phablet { position: static } } .l-overflow-hidden { overflow: hidden } .l-grid-0 { margin-left: 0!important; padding: 0; list-style: none } .l-grid-0:after { content: ""; display: table; clear: both } .l-grid-0>[class*=" l-grid__item-"],.l-grid-0>[class^=l-grid__item-] { padding-left: 0!important; padding-bottom: 0 } .l-grid-5 { margin-left: -5px!important; padding: 0; list-style: none } .l-grid-5:after { content: ""; display: table; clear: both } .l-grid-5>[class*=" l-grid__item-"],.l-grid-5>[class^=l-grid__item-] { padding-left: 5px!important; padding-bottom: 5px } .l-grid-10 { margin-left: -10px!important; padding: 0; list-style: none } .l-grid-10:after { content: ""; display: table; clear: both } .l-grid-10>[class*=" l-grid__item-"],.l-grid-10>[class^=l-grid__item-] { padding-left: 10px!important; padding-bottom: 10px } .l-grid-15 { margin-left: -15px!important; padding: 0; list-style: none } .l-grid-15:after { content: ""; display: table; clear: both } .l-grid-15>[class*=" l-grid__item-"],.l-grid-15>[class^=l-grid__item-] { padding-left: 15px!important; padding-bottom: 15px } .l-grid-20 { margin-left: -20px!important; padding: 0; list-style: none } .l-grid-20:after { content: ""; display: table; clear: both } .l-grid-20>[class*=" l-grid__item-"],.l-grid-20>[class^=l-grid__item-] { padding-left: 20px!important; padding-bottom: 20px } .l-grid-30 { margin-left: -30px!important; padding: 0; list-style: none } .l-grid-30:after { content: ""; display: table; clear: both } .l-grid-30>[class*=" l-grid__item-"],.l-grid-30>[class^=l-grid__item-] { padding-left: 30px!important; padding-bottom: 30px } .l-grid-50 { margin-left: -50px!important; padding: 0; list-style: none } .l-grid-50:after { content: ""; display: table; clear: both } .l-grid-50>[class*=" l-grid__item-"],.l-grid-50>[class^=l-grid__item-] { padding-left: 50px!important; padding-bottom: 50px } .l-grid__item-10 { width: 10% } .l-grid__item-10,.l-grid__item-15 { display: inline-block; vertical-align: top; float: left } .l-grid__item-15 { width: 15% } .l-grid__item-20 { width: 20% } .l-grid__item-20,.l-grid__item-25 { display: inline-block; vertical-align: top; float: left } .l-grid__item-25 { width: 25% } .l-grid__item-30 { width: 30% } .l-grid__item-30,.l-grid__item-33 { display: inline-block; vertical-align: top; float: left } .l-grid__item-33 { width: 33.3333% } .l-grid__item-35 { width: 35% } .l-grid__item-35,.l-grid__item-40 { display: inline-block; vertical-align: top; float: left } .l-grid__item-40 { width: 40% } .l-grid__item-45 { width: 45% } .l-grid__item-45,.l-grid__item-50 { display: inline-block; vertical-align: top; float: left } .l-grid__item-50 { width: 50% } .l-grid__item-55 { width: 55% } .l-grid__item-55,.l-grid__item-60 { display: inline-block; vertical-align: top; float: left } .l-grid__item-60 { width: 60% } .l-grid__item-65 { width: 65% } .l-grid__item-65,.l-grid__item-70 { display: inline-block; vertical-align: top; float: left } .l-grid__item-70 { width: 70% } .l-grid__item-75 { width: 75% } .l-grid__item-75,.l-grid__item-85 { display: inline-block; vertical-align: top; float: left } .l-grid__item-85 { width: 85% } .l-grid__item-90 { width: 90% } .l-grid__item-90,.l-grid__item-100 { display: inline-block; vertical-align: top; float: left } .l-grid__item-100 { width: 100% } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-10 { display: inline-block; vertical-align: top; float: left; width: 10% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-15 { display: inline-block; vertical-align: top; float: left; width: 15% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-20 { display: inline-block; vertical-align: top; float: left; width: 20% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-25 { display: inline-block; vertical-align: top; float: left; width: 25% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-30 { display: inline-block; vertical-align: top; float: left; width: 30% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-33 { display: inline-block; vertical-align: top; float: left; width: 33.3333% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-35 { display: inline-block; vertical-align: top; float: left; width: 35% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-40 { display: inline-block; vertical-align: top; float: left; width: 40% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-45 { display: inline-block; vertical-align: top; float: left; width: 45% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-50 { display: inline-block; vertical-align: top; float: left; width: 50% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-55 { display: inline-block; vertical-align: top; float: left; width: 55% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-60 { display: inline-block; vertical-align: top; float: left; width: 60% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-65 { display: inline-block; vertical-align: top; float: left; width: 65% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-70 { display: inline-block; vertical-align: top; float: left; width: 70% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-75 { display: inline-block; vertical-align: top; float: left; width: 75% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-85 { display: inline-block; vertical-align: top; float: left; width: 85% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-90 { display: inline-block; vertical-align: top; float: left; width: 90% } } @media screen and (max-width:1100px) { .l-grid__item-tablet-landscape-100 { display: inline-block; vertical-align: top; float: left; width: 100% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-10 { display: inline-block; vertical-align: top; float: left; width: 10% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-15 { display: inline-block; vertical-align: top; float: left; width: 15% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-20 { display: inline-block; vertical-align: top; float: left; width: 20% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-25 { display: inline-block; vertical-align: top; float: left; width: 25% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-30 { display: inline-block; vertical-align: top; float: left; width: 30% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-33 { display: inline-block; vertical-align: top; float: left; width: 33.3333% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-35 { display: inline-block; vertical-align: top; float: left; width: 35% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-40 { display: inline-block; vertical-align: top; float: left; width: 40% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-45 { display: inline-block; vertical-align: top; float: left; width: 45% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-50 { display: inline-block; vertical-align: top; float: left; width: 50% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-55 { display: inline-block; vertical-align: top; float: left; width: 55% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-60 { display: inline-block; vertical-align: top; float: left; width: 60% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-65 { display: inline-block; vertical-align: top; float: left; width: 65% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-70 { display: inline-block; vertical-align: top; float: left; width: 70% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-75 { display: inline-block; vertical-align: top; float: left; width: 75% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-85 { display: inline-block; vertical-align: top; float: left; width: 85% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-90 { display: inline-block; vertical-align: top; float: left; width: 90% } } @media screen and (max-width:900px) { .l-grid__item-tablet-large-100 { display: inline-block; vertical-align: top; float: left; width: 100% } } @media screen and (max-width:800px) { .l-grid__item-tablet-10 { width: 10% } } @media screen and (max-width:800px) { .l-grid__item-tablet-10,.l-grid__item-tablet-15 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-15 { width: 15% } } @media screen and (max-width:800px) { .l-grid__item-tablet-20 { width: 20% } } @media screen and (max-width:800px) { .l-grid__item-tablet-20,.l-grid__item-tablet-25 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-25 { width: 25% } } @media screen and (max-width:800px) { .l-grid__item-tablet-30 { width: 30% } } @media screen and (max-width:800px) { .l-grid__item-tablet-30,.l-grid__item-tablet-33 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-33 { width: 33.3333% } } @media screen and (max-width:800px) { .l-grid__item-tablet-35 { width: 35% } } @media screen and (max-width:800px) { .l-grid__item-tablet-35,.l-grid__item-tablet-40 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-40 { width: 40% } } @media screen and (max-width:800px) { .l-grid__item-tablet-45 { width: 45% } } @media screen and (max-width:800px) { .l-grid__item-tablet-45,.l-grid__item-tablet-50 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-50 { width: 50% } } @media screen and (max-width:800px) { .l-grid__item-tablet-55 { width: 55% } } @media screen and (max-width:800px) { .l-grid__item-tablet-55,.l-grid__item-tablet-60 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-60 { width: 60% } } @media screen and (max-width:800px) { .l-grid__item-tablet-65 { width: 65% } } @media screen and (max-width:800px) { .l-grid__item-tablet-65,.l-grid__item-tablet-70 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-70 { width: 70% } } @media screen and (max-width:800px) { .l-grid__item-tablet-75 { width: 75% } } @media screen and (max-width:800px) { .l-grid__item-tablet-75,.l-grid__item-tablet-85 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-85 { width: 85% } } @media screen and (max-width:800px) { .l-grid__item-tablet-90 { width: 90% } } @media screen and (max-width:800px) { .l-grid__item-tablet-90,.l-grid__item-tablet-100 { display: inline-block; vertical-align: top; float: left } .l-grid__item-tablet-100 { width: 100% } } @media screen and (max-width:550px) { .l-grid__item-phablet-10 { width: 10% } } @media screen and (max-width:550px) { .l-grid__item-phablet-10,.l-grid__item-phablet-15 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-15 { width: 15% } } @media screen and (max-width:550px) { .l-grid__item-phablet-20 { width: 20% } } @media screen and (max-width:550px) { .l-grid__item-phablet-20,.l-grid__item-phablet-25 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-25 { width: 25% } } @media screen and (max-width:550px) { .l-grid__item-phablet-30 { width: 30% } } @media screen and (max-width:550px) { .l-grid__item-phablet-30,.l-grid__item-phablet-33 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-33 { width: 33.3333% } } @media screen and (max-width:550px) { .l-grid__item-phablet-35 { width: 35% } } @media screen and (max-width:550px) { .l-grid__item-phablet-35,.l-grid__item-phablet-40 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-40 { width: 40% } } @media screen and (max-width:550px) { .l-grid__item-phablet-45 { width: 45% } } @media screen and (max-width:550px) { .l-grid__item-phablet-45,.l-grid__item-phablet-50 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-50 { width: 50% } } @media screen and (max-width:550px) { .l-grid__item-phablet-55 { width: 55% } } @media screen and (max-width:550px) { .l-grid__item-phablet-55,.l-grid__item-phablet-60 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-60 { width: 60% } } @media screen and (max-width:550px) { .l-grid__item-phablet-65 { width: 65% } } @media screen and (max-width:550px) { .l-grid__item-phablet-65,.l-grid__item-phablet-70 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-70 { width: 70% } } @media screen and (max-width:550px) { .l-grid__item-phablet-75 { width: 75% } } @media screen and (max-width:550px) { .l-grid__item-phablet-75,.l-grid__item-phablet-85 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phablet-85 { width: 85% } } @media screen and (max-width:550px) { .l-grid__item-phablet-90 { display: inline-block; vertical-align: top; float: left; width: 90% } } @media screen and (max-width:550px) { .l-grid__item-phablet-100 { display: inline-block; vertical-align: top; float: left; width: 100% } } @media screen and (max-width:400px) { .l-grid__item-phone-10 { width: 10% } } @media screen and (max-width:400px) { .l-grid__item-phone-10,.l-grid__item-phone-15 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-15 { width: 15% } } @media screen and (max-width:400px) { .l-grid__item-phone-20 { width: 20% } } @media screen and (max-width:400px) { .l-grid__item-phone-20,.l-grid__item-phone-25 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-25 { width: 25% } } @media screen and (max-width:400px) { .l-grid__item-phone-30 { width: 30% } } @media screen and (max-width:400px) { .l-grid__item-phone-30,.l-grid__item-phone-33 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-33 { width: 33.3333% } } @media screen and (max-width:400px) { .l-grid__item-phone-35 { width: 35% } } @media screen and (max-width:400px) { .l-grid__item-phone-35,.l-grid__item-phone-40 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-40 { width: 40% } } @media screen and (max-width:400px) { .l-grid__item-phone-45 { width: 45% } } @media screen and (max-width:400px) { .l-grid__item-phone-45,.l-grid__item-phone-50 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-50 { width: 50% } } @media screen and (max-width:400px) { .l-grid__item-phone-55 { width: 55% } } @media screen and (max-width:400px) { .l-grid__item-phone-55,.l-grid__item-phone-60 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-60 { width: 60% } } @media screen and (max-width:400px) { .l-grid__item-phone-65 { width: 65% } } @media screen and (max-width:400px) { .l-grid__item-phone-65,.l-grid__item-phone-70 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-70 { width: 70% } } @media screen and (max-width:400px) { .l-grid__item-phone-75 { width: 75% } } @media screen and (max-width:400px) { .l-grid__item-phone-75,.l-grid__item-phone-85 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-85 { width: 85% } } @media screen and (max-width:400px) { .l-grid__item-phone-90 { width: 90% } } @media screen and (max-width:400px) { .l-grid__item-phone-90,.l-grid__item-phone-100 { display: inline-block; vertical-align: top; float: left } .l-grid__item-phone-100 { width: 100% } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-0 { margin-left: 0!important; padding: 0; list-style: none } .l-grid-tablet-landscape-0:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-0>[class*=" l-grid__item-"],.l-grid-tablet-landscape-0>[class^=l-grid__item-] { padding-left: 0!important; padding-bottom: 0 } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-5 { margin-left: -5px!important; padding: 0; list-style: none } .l-grid-tablet-landscape-5:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-5>[class*=" l-grid__item-"],.l-grid-tablet-landscape-5>[class^=l-grid__item-] { padding-left: 5px!important; padding-bottom: 5px } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-10 { margin-left: -10px!important; padding: 0; list-style: none } .l-grid-tablet-landscape-10:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-10>[class*=" l-grid__item-"],.l-grid-tablet-landscape-10>[class^=l-grid__item-] { padding-left: 10px!important; padding-bottom: 10px } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-15 { margin-left: -15px!important; padding: 0; list-style: none } .l-grid-tablet-landscape-15:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-15>[class*=" l-grid__item-"],.l-grid-tablet-landscape-15>[class^=l-grid__item-] { padding-left: 15px!important; padding-bottom: 15px } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-20 { margin-left: -20px!important; padding: 0; list-style: none } .l-grid-tablet-landscape-20:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-20>[class*=" l-grid__item-"],.l-grid-tablet-landscape-20>[class^=l-grid__item-] { padding-left: 20px!important; padding-bottom: 20px } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-30 { margin-left: -30px!important; padding: 0; list-style: none } .l-grid-tablet-landscape-30:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-30>[class*=" l-grid__item-"],.l-grid-tablet-landscape-30>[class^=l-grid__item-] { padding-left: 30px!important; padding-bottom: 30px } } @media screen and (max-width:1100px) { .l-grid-tablet-landscape-50 { margin-left: -50px!important; padding: 0; list-style: none } .l-grid-tablet-landscape-50:after { content: ""; display: table; clear: both } .l-grid-tablet-landscape-50>[class*=" l-grid__item-"],.l-grid-tablet-landscape-50>[class^=l-grid__item-] { padding-left: 50px!important; padding-bottom: 50px } } @media screen and (max-width:900px) { .l-grid-tablet-large-0 { margin-left: 0!important; padding: 0; list-style: none } .l-grid-tablet-large-0:after { content: ""; display: table; clear: both } .l-grid-tablet-large-0>[class*=" l-grid__item-"],.l-grid-tablet-large-0>[class^=l-grid__item-] { padding-left: 0!important; padding-bottom: 0 } } @media screen and (max-width:900px) { .l-grid-tablet-large-5 { margin-left: -5px!important; padding: 0; list-style: none } .l-grid-tablet-large-5:after { content: ""; display: table; clear: both } .l-grid-tablet-large-5>[class*=" l-grid__item-"],.l-grid-tablet-large-5>[class^=l-grid__item-] { padding-left: 5px!important; padding-bottom: 5px } } @media screen and (max-width:900px) { .l-grid-tablet-large-10 { margin-left: -10px!important; padding: 0; list-style: none } .l-grid-tablet-large-10:after { content: ""; display: table; clear: both } .l-grid-tablet-large-10>[class*=" l-grid__item-"],.l-grid-tablet-large-10>[class^=l-grid__item-] { padding-left: 10px!important; padding-bottom: 10px } } @media screen and (max-width:900px) { .l-grid-tablet-large-15 { margin-left: -15px!important; padding: 0; list-style: none } .l-grid-tablet-large-15:after { content: ""; display: table; clear: both } .l-grid-tablet-large-15>[class*=" l-grid__item-"],.l-grid-tablet-large-15>[class^=l-grid__item-] { padding-left: 15px!important; padding-bottom: 15px } } @media screen and (max-width:900px) { .l-grid-tablet-large-20 { margin-left: -20px!important; padding: 0; list-style: none } .l-grid-tablet-large-20:after { content: ""; display: table; clear: both } .l-grid-tablet-large-20>[class*=" l-grid__item-"],.l-grid-tablet-large-20>[class^=l-grid__item-] { padding-left: 20px!important; padding-bottom: 20px } } @media screen and (max-width:900px) { .l-grid-tablet-large-30 { margin-left: -30px!important; padding: 0; list-style: none } .l-grid-tablet-large-30:after { content: ""; display: table; clear: both } .l-grid-tablet-large-30>[class*=" l-grid__item-"],.l-grid-tablet-large-30>[class^=l-grid__item-] { padding-left: 30px!important; padding-bottom: 30px } } @media screen and (max-width:900px) { .l-grid-tablet-large-50 { margin-left: -50px!important; padding: 0; list-style: none } .l-grid-tablet-large-50:after { content: ""; display: table; clear: both } .l-grid-tablet-large-50>[class*=" l-grid__item-"],.l-grid-tablet-large-50>[class^=l-grid__item-] { padding-left: 50px!important; padding-bottom: 50px } } .l-grid-tablet-0 { margin-left: 0!important; padding: 0; list-style: none } .l-grid-tablet-0:after { content: ""; display: table; clear: both } .l-grid-tablet-0>[class*=" l-grid__item-"],.l-grid-tablet-0>[class^=l-grid__item-] { padding-left: 0!important; padding-bottom: 0 } .l-grid-tablet-5 { margin-left: -5px!important; padding: 0; list-style: none } .l-grid-tablet-5:after { content: ""; display: table; clear: both } .l-grid-tablet-5>[class*=" l-grid__item-"],.l-grid-tablet-5>[class^=l-grid__item-] { padding-left: 5px!important; padding-bottom: 5px } .l-grid-tablet-10 { margin-left: -10px!important; padding: 0; list-style: none } .l-grid-tablet-10:after { content: ""; display: table; clear: both } .l-grid-tablet-10>[class*=" l-grid__item-"],.l-grid-tablet-10>[class^=l-grid__item-] { padding-left: 10px!important; padding-bottom: 10px } .l-grid-tablet-15 { margin-left: -15px!important; padding: 0; list-style: none } .l-grid-tablet-15:after { content: ""; display: table; clear: both } .l-grid-tablet-15>[class*=" l-grid__item-"],.l-grid-tablet-15>[class^=l-grid__item-] { padding-left: 15px!important; padding-bottom: 15px } .l-grid-tablet-20 { margin-left: -20px!important; padding: 0; list-style: none } .l-grid-tablet-20:after { content: ""; display: table; clear: both } .l-grid-tablet-20>[class*=" l-grid__item-"],.l-grid-tablet-20>[class^=l-grid__item-] { padding-left: 20px!important; padding-bottom: 20px } .l-grid-tablet-30 { margin-left: -30px!important; padding: 0; list-style: none } .l-grid-tablet-30:after { content: ""; display: table; clear: both } .l-grid-tablet-30>[class*=" l-grid__item-"],.l-grid-tablet-30>[class^=l-grid__item-] { padding-left: 30px!important; padding-bottom: 30px } .l-grid-tablet-50 { margin-left: -50px!important; padding: 0; list-style: none } .l-grid-tablet-50:after { content: ""; display: table; clear: both } .l-grid-tablet-50>[class*=" l-grid__item-"],.l-grid-tablet-50>[class^=l-grid__item-] { padding-left: 50px!important; padding-bottom: 50px } .l-grid-flex { -ms-flex-wrap: wrap; flex-wrap: wrap } .l-grid-flex--centered { -webkit-box-pack: center; -ms-flex-pack: center; -moz-justify-content: center; justify-content: center } .l-inset { padding: 30px 15px } .l-inset-xms { padding: 15px } .l-inset-l-h { padding-left: 50px; padding-right: 50px } .l-inset-xl-top { padding-top: 60px } .l-inset-xl-left { padding-left: 60px } .l-inset-xl-right { padding-right: 60px } .l-inset-l-top { padding-top: 50px } .l-inset-m-top { padding-top: 40px } .l-inset-xs-top { padding-top: 20px } .l-inset-xxs-top { padding-top: 10px } .l-inset-none-btm { padding-bottom: 0!important } .l-inset-xxl-btm { padding-bottom: 70px!important } .l-inset-m-btm { padding-bottom: 40px } .l-inset-xs-btm { padding-bottom: 20px } .l-inset-l-left { padding-left: 50px } .l-inset-l-right { padding-right: 50px } .l-inset-xxs-left { padding-left: 10px } .l-no-inset { padding: 0!important } .l-no-inset-left { padding-left: 0!important } .l-no-inset-right { padding-right: 0!important } .l-no-inset-bottom { padding-bottom: 0!important } .l-inset-top--header { padding-top: 90px } @media screen and (max-width:800px) { .l-inset-top--header { padding-top: 30px } } @media screen and (max-width:800px) { .l-no-inset__tablet { padding: 0!important } } .l-no-margin { margin: 0!important } .l-offset-xxxl-top { margin-top: 90px!important } @media screen and (max-width:550px) { .l-offset-xxxl-top { margin-top: 30px!important } } .l-offset-l-top { margin-top: 50px!important } @media screen and (max-width:550px) { .l-offset-l-top { margin-top: 30px!important } } .l-offset-m-top { margin-top: 40px!important } .l-offset-s-top { margin-top: 30px } .l-offset-xs-top { margin-top: 20px!important } .l-offset-xms-top { margin-top: 15px } .l-offset-xxs-top { margin-top: 10px } .l-offset-xxxs-top { margin-top: 5px } .l-offset-xxl-btm { margin-bottom: 70px!important } @media screen and (max-width:550px) { .l-offset-xxl-btm { margin-bottom: 40px!important } } .l-offset-xl-btm { margin-bottom: 60px!important } @media screen and (max-width:550px) { .l-offset-xl-btm { margin-bottom: 40px!important } } .l-offset-l-btm { margin-bottom: 50px!important } @media screen and (max-width:550px) { .l-offset-l-btm { margin-bottom: 30px!important } } .l-offset-m-btm { margin-bottom: 40px } @media screen and (max-width:550px) { .l-offset-m-btm { margin-bottom: 20px!important } } .l-offset-s-btm { margin-bottom: 30px!important } .l-offset-xs-btm { margin-bottom: 20px!important } .l-offset-xms-btm { margin-bottom: 15px } .l-offset-xxs-btm { margin-bottom: 10px } .l-offset-xxxs-btm { margin-bottom: 5px } .l-offset-l-left { margin-left: 50px } .l-offset-m-left { margin-left: 40px } .l-offset-xs-left { margin-left: 20px } .l-offset-xms-left { margin-left: 15px } .l-offset-xxs-left { margin-left: 10px } .l-offset-xxxs-left { margin-left: 5px!important } .l-offset-xl-right { margin-right: 60px } .l-offset-xs-right { margin-right: 20px!important } .l-offset-xms-right { margin-right: 15px } .l-offset-xxs-right { margin-right: 10px!important } .l-offset-xxxs-right { margin-right: 5px!important } @media screen and (max-width:800px) { .l-no-offset-left__tablet { margin-left: 0!important } } @media screen and (max-width:800px) { .l-no-offset-btm__tablet { margin-bottom: 0!important } } @media screen and (max-width:1600px) { .l-offset-xxs-top--desktop { margin-top: 10px } } @media screen and (max-width:1600px) { .l-offset-l-top--desktop { margin-top: 50px!important } } @media screen and (max-width:1600px) { .l-offset-l-btm--desktop { margin-bottom: 50px!important } } @media screen and (max-width:1600px) { .l-offset-s-btm--desktop { margin-bottom: 30px!important } } @media screen and (max-width:1600px) { .l-offset-xxs-btm--desktop { margin-bottom: 10px!important } } @media screen and (max-width:1280px) { .l-offset-xxs-top--desktop-small { margin-top: 10px } } @media screen and (max-width:1280px) { .l-offset-l-top--desktop-small { margin-top: 50px!important } } @media screen and (max-width:1280px) { .l-offset-l-btm--desktop-small { margin-bottom: 50px!important } } @media screen and (max-width:1280px) { .l-offset-s-btm--desktop-small { margin-bottom: 30px!important } } @media screen and (max-width:1280px) { .l-offset-xxs-btm--desktop-small { margin-bottom: 10px!important } } @media screen and (max-width:1100px) { .l-offset-xxs-top--tablet-landscape { margin-top: 10px } } @media screen and (max-width:1100px) { .l-offset-l-top--tablet-landscape { margin-top: 50px!important } } @media screen and (max-width:1100px) { .l-offset-l-btm--tablet-landscape { margin-bottom: 50px!important } } @media screen and (max-width:1100px) { .l-offset-s-btm--tablet-landscape { margin-bottom: 30px!important } } @media screen and (max-width:1100px) { .l-offset-xxs-btm--tablet-landscape { margin-bottom: 10px!important } } @media screen and (max-width:900px) { .l-offset-xxs-top--tablet-large { margin-top: 10px } } @media screen and (max-width:900px) { .l-offset-l-top--tablet-large { margin-top: 50px!important } } @media screen and (max-width:900px) { .l-offset-l-btm--tablet-large { margin-bottom: 50px!important } } @media screen and (max-width:900px) { .l-offset-s-btm--tablet-large { margin-bottom: 30px!important } } @media screen and (max-width:900px) { .l-offset-xxs-btm--tablet-large { margin-bottom: 10px!important } } @media screen and (max-width:800px) { .l-offset-xxs-top--tablet { margin-top: 10px } } @media screen and (max-width:800px) { .l-offset-l-top--tablet { margin-top: 50px!important } } @media screen and (max-width:800px) { .l-offset-l-btm--tablet { margin-bottom: 50px!important } } @media screen and (max-width:800px) { .l-offset-s-btm--tablet { margin-bottom: 30px!important } } @media screen and (max-width:800px) { .l-offset-xxs-btm--tablet { margin-bottom: 10px!important } } @media screen and (max-width:550px) { .l-offset-xxs-top--phablet { margin-top: 10px } } @media screen and (max-width:550px) { .l-offset-l-top--phablet { margin-top: 50px!important } } @media screen and (max-width:550px) { .l-offset-l-btm--phablet { margin-bottom: 50px!important } } @media screen and (max-width:550px) { .l-offset-s-btm--phablet { margin-bottom: 30px!important } } @media screen and (max-width:550px) { .l-offset-xxs-btm--phablet { margin-bottom: 10px!important } } @media screen and (max-width:500px) { .l-offset-xxs-top--phone-large { margin-top: 10px } } @media screen and (max-width:500px) { .l-offset-l-top--phone-large { margin-top: 50px!important } } @media screen and (max-width:500px) { .l-offset-l-btm--phone-large { margin-bottom: 50px!important } } @media screen and (max-width:500px) { .l-offset-s-btm--phone-large { margin-bottom: 30px!important } } @media screen and (max-width:500px) { .l-offset-xxs-btm--phone-large { margin-bottom: 10px!important } } @media screen and (max-width:400px) { .l-offset-xxs-top--phone { margin-top: 10px } } @media screen and (max-width:400px) { .l-offset-l-top--phone { margin-top: 50px!important } } @media screen and (max-width:400px) { .l-offset-l-btm--phone { margin-bottom: 50px!important } } @media screen and (max-width:400px) { .l-offset-s-btm--phone { margin-bottom: 30px!important } } @media screen and (max-width:400px) { .l-offset-xxs-btm--phone { margin-bottom: 10px!important } } @media screen and (max-width:340px) { .l-offset-xxs-top--phone-small { margin-top: 10px } } @media screen and (max-width:340px) { .l-offset-l-top--phone-small { margin-top: 50px!important } } @media screen and (max-width:340px) { .l-offset-l-btm--phone-small { margin-bottom: 50px!important } } @media screen and (max-width:340px) { .l-offset-s-btm--phone-small { margin-bottom: 30px!important } } @media screen and (max-width:340px) { .l-offset-xxs-btm--phone-small { margin-bottom: 10px!important } } .container { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 120px!important; padding-right: 120px!important } @media screen and (max-width:1600px) { .container { padding-left: 60px!important; padding-right: 60px!important } } @media screen and (max-width:1100px) { .container { padding-left: 30px!important; padding-right: 30px!important } } @media screen and (max-width:400px) { .container { padding-left: 15px!important; padding-right: 15px!important } } .container--l { width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; padding-left: 120px!important; padding-right: 120px!important } @media screen and (max-width:1600px) { .container--l { padding-left: 60px!important; padding-right: 60px!important } } @media screen and (max-width:1100px) { .container--l { padding-left: 30px!important; padding-right: 30px!important } } @media screen and (max-width:400px) { .container--l { padding-left: 15px!important; padding-right: 15px!important } } .container--l--loose { max-width: 1360px } .container--l--loose,.container--m { width: 100%; margin-left: auto; margin-right: auto } .container--m { max-width: 1140px; padding-left: 120px!important; padding-right: 120px!important } @media screen and (max-width:1600px) { .container--m { padding-left: 60px!important; padding-right: 60px!important } } @media screen and (max-width:1100px) { .container--m { padding-left: 30px!important; padding-right: 30px!important } } @media screen and (max-width:400px) { .container--m { padding-left: 15px!important; padding-right: 15px!important } } @media screen and (max-width:1100px) { .l-desktop { display: none } } @media screen and (min-width:1024px) { .l-tablet-landscape { display: none } } @media screen and (max-width:1100px) { .l-tablet-landscape-none { display: none!important } } @media screen and (min-width:771px) { .l-tablet { display: none } } @media screen and (max-width:800px) { .l-tablet-none { display: none!important } } @media screen and (min-width:551px) { .l-phablet { display: none } } @media screen and (max-width:550px) { .l-phablet-none { display: none } } @media screen and (min-width:401px) { .l-phone { display: none } } @media screen and (max-width:400px) { .l-phone-none { display: none } } .media-size-tracker { display: none!important; max-width: 1600px } @media screen and (max-width:1280px) { .media-size-tracker { max-width: 1220px } } @media screen and (max-width:1100px) { .media-size-tracker { max-width: 1003px } } @media screen and (max-width:800px) { .media-size-tracker { max-width: 780px } } @media screen and (max-width:550px) { .media-size-tracker { max-width: 530px } } @media screen and (max-width:500px) { .media-size-tracker { max-width: 480px } } @media screen and (max-width:400px) { .media-size-tracker { max-width: 380px } } .is-hidden { display: none!important } @media (min-width:800px) { .is-hidden-desktop { display: none!important } } @media screen and (max-width:800px) { .is-hidden-tablet { display: none!important } } .is-hidden-desktop__menu { display: none!important } @media screen and (max-width:1100px) { .is-hidden-desktop__menu { display: block!important } } .is-visible-hidden { visibility: hidden!important; opacity: 0 } .is-visually-hidden { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; z-index: -1; position: absolute; left: -9999px } .l-border-right { border-right: 1px solid #3c3737 } .l-body-content-forced,.l-body-content-forced p,.l-body-content-forced span { color: #3c3737!important; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif!important; font-size: 1em!important; line-height: 1.5!important } @font-face { font-family:libreBaskerville;src:url("/fonts/librebaskerville/librebaskerville-regular-webfont.eot");src:url("/fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix") format("embedded-opentype"),url("/fonts/librebaskerville/librebaskerville-regular-webfont.woff2") format("woff2"),url("/fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff"),url("/fonts/librebaskerville/librebaskerville-regular-webfont.ttf") format("truetype"),url("/fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular") format("svg");font-weight:400;font-style:normal } @font-face { font-family:libreBaskerville;src:url("/fonts/librebaskerville/librebaskerville-bold-webfont.eot");src:url("/fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix") format("embedded-opentype"),url("/fonts/librebaskerville/librebaskerville-bold-webfont.woff2") format("woff2"),url("/fonts/librebaskerville/librebaskerville-bold-webfont.woff") format("woff"),url("/fonts/librebaskerville/librebaskerville-bold-webfont.ttf") format("truetype"),url("/fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold") format("svg");font-weight:700;font-style:normal } @font-face { font-family:libreBaskerville;src:url("/fonts/librebaskerville/librebaskerville-italic-webfont.eot");src:url("/fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix") format("embedded-opentype"),url("/fonts/librebaskerville/librebaskerville-italic-webfont.woff2") format("woff2"),url("/fonts/librebaskerville/librebaskerville-italic-webfont.woff") format("woff"),url("/fonts/librebaskerville/librebaskerville-italic-webfont.ttf") format("truetype"),url("/fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic") format("svg");font-weight:400;font-style:italic } @font-face { font-family:Avenir W01_n4;src:url("/fonts/avenir/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix") format("eot") } @font-face { font-family:Avenir W01;src:url("/fonts/avenir/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix");src:url("/fonts/avenir/57bf7902-79ee-4b31-a327-1bbf59a3d155.eot?#iefix") format("eot"),url("/fonts/avenir/b290e775-e0f9-4980-914b-a4c32a5e3e36.woff2") format("woff2"),url("/fonts/avenir/4b978f72-bb48-46c3-909a-2a8cd2f8819c.woff") format("woff"),url("/fonts/avenir/9bdf0737-f98c-477a-9365-ffc41b9d1285.ttf") format("truetype"),url("/fonts/avenir/15281d0d-e3c2-46e1-94db-cb681e00bfaa.svg#15281d0d-e3c2-46e1-94db-cb681e00bfaa") format("svg");font-weight:400;font-style:normal } @font-face { font-family:Avenir W01_n5;src:url("/fonts/avenir/e0542193-b2e6-4273-bc45-39d4dfd3c15b.eot?#iefix") format("eot") } @font-face { font-family:Avenir W01;src:url("/fonts/avenir/e0542193-b2e6-4273-bc45-39d4dfd3c15b.eot?#iefix");src:url("/fonts/avenir/e0542193-b2e6-4273-bc45-39d4dfd3c15b.eot?#iefix") format("eot"),url("/fonts/avenir/17b90ef5-b63f-457b-a981-503bb7afe3c0.woff2") format("woff2"),url("/fonts/avenir/c9aeeabd-dd65-491d-b4be-3e0db9ae47a0.woff") format("woff"),url("/fonts/avenir/25f994de-d13f-4a5d-a82b-bf925a1e054d.ttf") format("truetype"),url("/fonts/avenir/3604edbd-784e-4ca7-b978-18836469c62d.svg#3604edbd-784e-4ca7-b978-18836469c62d") format("svg");font-weight:500;font-style:normal } @font-face { font-family:Avenir W01_o5;src:url("/fonts/avenir/cebcf56a-ea7e-4f5c-8110-a7ee367c1f91.eot?#iefix") format("eot") } @font-face { font-family:Avenir W01;src:url("/fonts/avenir/cebcf56a-ea7e-4f5c-8110-a7ee367c1f91.eot?#iefix");src:url("/fonts/avenir/cebcf56a-ea7e-4f5c-8110-a7ee367c1f91.eot?#iefix") format("eot"),url("/fonts/avenir/deb5e718-7abb-4df3-9365-edfa95317090.woff2") format("woff2"),url("/fonts/avenir/04801919-17ee-4c6b-8b17-eb1965cb3ed6.woff") format("woff"),url("/fonts/avenir/cee053ec-4b41-4506-a1fe-796261690610.ttf") format("truetype"),url("/fonts/avenir/38a556e4-b6e5-48c6-aece-b1d470af124e.svg#38a556e4-b6e5-48c6-aece-b1d470af124e") format("svg");font-weight:500;font-style:italic } @font-face { font-family:Avenir W01_n8;src:url("/fonts/avenir/f55e4498-ad48-4577-93a0-c614de5cbbb8.eot?#iefix") format("eot") } @font-face { font-family:Avenir W01;src:url("/fonts/avenir/f55e4498-ad48-4577-93a0-c614de5cbbb8.eot?#iefix");src:url("/fonts/avenir/f55e4498-ad48-4577-93a0-c614de5cbbb8.eot?#iefix") format("eot"),url("/fonts/avenir/c78eb7af-a1c8-4892-974b-52379646fef4.woff2") format("woff2"),url("/fonts/avenir/75b36c58-2a02-4057-a537-09af0832ae46.woff") format("woff"),url("/fonts/avenir/b5c44a82-eeb8-41de-9c3f-a8db50b24b8a.ttf") format("truetype"),url("/fonts/avenir/93603a74-2be0-436c-83e1-68f9ef616eaf.svg#93603a74-2be0-436c-83e1-68f9ef616eaf") format("svg");font-weight:800;font-style:normal } @font-face { font-family:Avenir W01_o8;src:url("/fonts/avenir/4030caeb-d266-4d36-ac58-a3bb7a5b1bfa.eot?#iefix") format("eot") } @font-face { font-family:Avenir W01;src:url("/fonts/avenir/4030caeb-d266-4d36-ac58-a3bb7a5b1bfa.eot?#iefix");src:url("/fonts/avenir/4030caeb-d266-4d36-ac58-a3bb7a5b1bfa.eot?#iefix") format("eot"),url("/fonts/avenir/a2477e08-09d9-4d4b-97a9-23a1e22cb44c.woff2") format("woff2"),url("/fonts/avenir/19d12bba-92b1-43ad-9bab-cd36a4195c2a.woff") format("woff"),url("/fonts/avenir/5ba5a010-7470-4d9d-8a49-2920dc1be1f8.ttf") format("truetype"),url("/fonts/avenir/6d4a6a8c-ef50-422f-8456-88d479e0b23d.svg#6d4a6a8c-ef50-422f-8456-88d479e0b23d") format("svg");font-weight:800;font-style:italic } @font-face { font-family:Zawgyi-One;src:local("Zawgyi-One"),url("/fonts/zawgyi/zawgyi.woff") format("woff"),url("/fonts/zawgyi/zawgyi.ttf") format("truetype") } @font-face { font-family:icomoon;src:url("/fonts/icomoon/icomoon.eot?y2fwpf");src:url("/fonts/icomoon/icomoon.eot?y2fwpf#iefix") format("embedded-opentype"),url("/fonts/icomoon/icomoon.ttf?y2fwpf") format("truetype"),url("/fonts/icomoon/icomoon.woff?y2fwpf") format("woff"),url("/fonts/icomoon/icomoon.svg?y2fwpf#icomoon") format("svg");font-weight:400;font-style:normal } .btn--download:before,.btn--icon:after,[class*=" icon-"],[class^=icon-] { font-family: icomoon!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .icon-download-2:before { content: "\E910" } .icon-download:before { content: "\E90D" } .icon-check:before { content: "\F00C" } .icon-plus:before { content: "\F067" } .icon-minus:before { content: "\F068" } .icon-chevron-up:before { content: "\F106" } .icon-chevron-down:before { content: "\F107" } .icon-cross:before { content: "\E90B" } .icon-hamburger:before { content: "\E90C" } .icon-facebook:before { content: "\E901" } .icon-linkedin:before { content: "\E902" } .icon-twitter:before { content: "\E903" } .icon-wechat:before { content: "\E904" } .icon-youku:before { content: "\E905" } .icon-youtube:before { content: "\E906" } /*.icon-arrow-circled-left:before,.page-bottom-nav__prev:before,.slick-prev:before { content: "\E908" }*/ .icon-arrow-circled-up:before { content: "\E90E" } .icon-arrow-circled-down:before { content: "\E90F" } /*.icon-arrow-circled-right:before,.page-bottom-nav__next:before,.slick-next:before { content: "\E909" }*/ .icon-chevron-left:before,.icon-chevron-right:before,.js-news-events-slick .slick-arrow.slick-next:before,.js-news-events-slick .slick-arrow.slick-prev:before,.link--emph:before,.uc-stories-details-view .uc-detail-footer .icon-chevron-left:before,.uc-stories-details-view .uc-detail-footer .link--emph:before { content: "\E90A" } .icon-chevron-left,.link--emph:before { display: inline-block; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .icon-search:before { content: "\E907" } .icon-instagram:before { content: "\E900" } .icon-play-circled:before,.icon-play-circled__trans-bg:before,.icon-play:before { content: "\F04B" } .icon-map-marker:before { content: "\F041" } .icon-envelope:before { content: "\F0E0" } .icon-top-pointer:before { content: "\E911" } .icon-clock:before { content: "\E912" } .icon-play-circled { background: rgba(211,0,19,.7); border-radius: 50%; color: #fff; font-size: 42px; font-size: 2.625rem; line-height: 1; padding: 25.5px 27px 25.5px 33px } .icon-play-circled__trans-bg { border-radius: 50%; border: 1px solid #fff; color: #fff; font-size: 14px; font-size: .875rem; line-height: 1; padding: 7px 7px 7px 10px } .i-loading { display: block; background: url("/images/loading-pretty.gif") 50% no-repeat; background-size: contain; width: 100px; height: 100px; margin: auto } pre { display: block; padding: 15px; font-size: .9em; white-space: pre-line; line-height: 1.6; font-family: arial,sans-serif; color: #fff; background: #3c3737 } .accordion__tab__copy__link,.article-header__date,.box__copy,.btn--base,.btn--blue,.btn--cta,.btn--cta--blue,.btn--link--base,.btn--link--base--white,.btn--pill,.btn--rainbow,.card__info,.card__subtitle,.card__title,.filtered-list__row,.form__input,.form__textarea,.h-card__copy__subtitle,.h-card__copy__title,.link--emph,.text--sans-serif,.text--sans-serif--black,.text--sans-serif--black--l,.text--sans-serif--black--m--muted,.text--sans-serif--black--xxxl,.text--sans-serif--black--xxxs,.text--sans-serif--medium,.text--sans-serif--medium--emph,.text--sans-serif--medium--l,.text--sans-serif--medium--m,.text--sans-serif--medium--m--caps,.text--sans-serif--medium--m--caps--muted,.text--sans-serif--medium--s,.text--sans-serif--medium--xs,.text--sans-serif--medium--xs--caps,.text--sans-serif--medium--xs--caps--muted,.text--sans-serif--medium--xxxs,.text--sans-serif--strong--l,.text--sans-serif--white--xxxl,.text--serif,.text--serif--l,.text--serif--l--emph,.text--serif--m,.text--serif--m--caps,.text--serif--xl,.text--serif--xm--strong,.text--serif--xxl,.text--serif--xxl--emph,.text--serif--xxxl,.text--serif--xxxl--red,.text--serif--xxxxl,.text-serif--white--xxl,body.my .accordion__tab__copy__link,body.my .article-header__date,body.my .box__copy,body.my .btn--base,body.my .btn--blue,body.my .btn--cta,body.my .btn--cta--blue,body.my .btn--link--base,body.my .btn--link--base--white,body.my .btn--pill,body.my .btn--rainbow,body.my .card__info,body.my .card__subtitle,body.my .card__title,body.my .filtered-list__row,body.my .form__input,body.my .form__textarea,body.my .h-card__copy__subtitle,body.my .h-card__copy__title,body.my .link--emph,body.my .text--sans-serif,body.my .text--sans-serif--black,body.my .text--sans-serif--black--l,body.my .text--sans-serif--black--m--muted,body.my .text--sans-serif--black--xxxl,body.my .text--sans-serif--black--xxxs,body.my .text--sans-serif--medium,body.my .text--sans-serif--medium--emph,body.my .text--sans-serif--medium--l,body.my .text--sans-serif--medium--m,body.my .text--sans-serif--medium--m--caps,body.my .text--sans-serif--medium--m--caps--muted,body.my .text--sans-serif--medium--s,body.my .text--sans-serif--medium--xs,body.my .text--sans-serif--medium--xs--caps,body.my .text--sans-serif--medium--xs--caps--muted,body.my .text--sans-serif--medium--xxxs,body.my .text--sans-serif--strong--l,body.my .text--sans-serif--white--xxxl,body.my .text--serif,body.my .text--serif--l,body.my .text--serif--l--emph,body.my .text--serif--m,body.my .text--serif--m--caps,body.my .text--serif--xl,body.my .text--serif--xm--strong,body.my .text--serif--xxl,body.my .text--serif--xxl--emph,body.my .text--serif--xxxl,body.my .text--serif--xxxl--red,body.my .text--serif--xxxxl,body.my .text-serif--white--xxl,body.zh .h-card__copy__title,body.zh .link--emph,body.zh .text--serif,body.zh .text--serif--l,body.zh .text--serif--l--emph,body.zh .text--serif--m,body.zh .text--serif--m--caps,body.zh .text--serif--xl,body.zh .text--serif--xm--strong,body.zh .text--serif--xxl,body.zh .text--serif--xxl--emph,body.zh .text--serif--xxxl,body.zh .text--serif--xxxl--red,body.zh .text--serif--xxxxl,body.zh .text-serif--white--xxl { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .article-header__date,.box__copy,.card__info,.card__subtitle,.filtered-list__row,.form__input,.form__textarea,.text--medium,.text--sans-serif--medium,.text--sans-serif--medium--emph,.text--sans-serif--medium--l,.text--sans-serif--medium--m,.text--sans-serif--medium--m--caps,.text--sans-serif--medium--m--caps--muted,.text--sans-serif--medium--s,.text--sans-serif--medium--xs,.text--sans-serif--medium--xs--caps,.text--sans-serif--medium--xs--caps--muted,.text--sans-serif--medium--xxxs { font-weight: 500 } .accordion__tab__copy__link,.btn--base,.btn--blue,.btn--cta,.btn--cta--blue,.btn--link--base,.btn--link--base--white,.btn--pill,.btn--rainbow,.card__title,.h-card__copy__subtitle,.subtitle,.text--black,.text--sans-serif--black,.text--sans-serif--black--l,.text--sans-serif--black--m--muted,.text--sans-serif--black--xxxl,.text--sans-serif--black--xxxs { font-weight: 800 } .text--uppercase { text-transform: uppercase } .text--nowrap { white-space: nowrap } .text--serif--xxxxl,.text--xxxxl { font-size: 54px; font-size: 3.375rem; line-height: 1 } .text--sans-serif--black--xxxl,.text--sans-serif--white--xxxl,.text--serif--xxxl,.text--serif--xxxl--red,.text--xxxl { font-size: 40px; font-size: 2.5rem; line-height: 1.2 } @media screen and (max-width:800px) { .text--sans-serif--black--xxxl,.text--sans-serif--white--xxxl,.text--serif--xxxl,.text--serif--xxxl--red,.text--xxxl { font-size: 34px; font-size: 2.125rem; line-height: 1.2 } } @media screen and (max-width:500px) { .text--sans-serif--black--xxxl,.text--sans-serif--white--xxxl,.text--serif--xxxl,.text--serif--xxxl--red,.text--xxxl { font-size: 28px; font-size: 1.75rem; line-height: 1.2 } } .text--serif--xxl,.text--serif--xxl--emph,.text--xxl,.text-serif--white--xxl { font-size: 90px; font-size: 5.625rem; line-height: .9; letter-spacing: -1px } body.zh .text--serif--xxl,body.zh .text--serif--xxl--emph,body.zh .text--xxl,body.zh .text-serif--white--xxl { font-size: 88px; font-size: 5.5rem; line-height: .9; letter-spacing: -1px } @media screen and (max-width:1100px) { body.zh .text--serif--xxl,body.zh .text--serif--xxl--emph,body.zh .text--xxl,body.zh .text-serif--white--xxl { font-size: 72px; font-size: 4.5rem; line-height: .9 } } @media screen and (max-width:800px) { body.zh .text--serif--xxl,body.zh .text--serif--xxl--emph,body.zh .text--xxl,body.zh .text-serif--white--xxl { font-size: 64px; font-size: 4rem; line-height: .9 } } @media screen and (max-width:500px) { body.zh .text--serif--xxl,body.zh .text--serif--xxl--emph,body.zh .text--xxl,body.zh .text-serif--white--xxl { font-size: 48px; font-size: 3rem; line-height: .9 } } @media screen and (max-width:400px) { body.zh .text--serif--xxl,body.zh .text--serif--xxl--emph,body.zh .text--xxl,body.zh .text-serif--white--xxl { font-size: 40px; font-size: 2.5rem; line-height: .9 } } @media screen and (max-width:1100px) { .text--serif--xxl,.text--serif--xxl--emph,.text--xxl,.text-serif--white--xxl { font-size: 72px; font-size: 4.5rem; line-height: .9 } } @media screen and (max-width:800px) { .text--serif--xxl,.text--serif--xxl--emph,.text--xxl,.text-serif--white--xxl { font-size: 64px; font-size: 4rem; line-height: .9 } } @media screen and (max-width:500px) { .text--serif--xxl,.text--serif--xxl--emph,.text--xxl,.text-serif--white--xxl { font-size: 48px; font-size: 3rem; line-height: .9 } } @media screen and (max-width:400px) { .text--serif--xxl,.text--serif--xxl--emph,.text--xxl,.text-serif--white--xxl { font-size: 40px; font-size: 2.5rem; line-height: .9 } } .numbers-container .title-text,.text--serif--xl,.text--xl { font-size: 60px; font-size: 3.75rem; line-height: 1 } @media screen and (max-width:800px) { .numbers-container .title-text,.text--serif--xl,.text--xl { font-size: 32px; font-size: 2rem; line-height: 1 } } @media screen and (max-width:400px) { .numbers-container .title-text,.text--serif--xl,.text--xl { font-size: 24px; font-size: 1.5rem; line-height: 1 } } .graduate-worldwise .title-text,.text--l,.text--sans-serif--black--l,.text--sans-serif--medium--l,.text--sans-serif--strong--l,.text--serif--l,.text--serif--l--emph { font-size: 36px; font-size: 2.25rem; line-height: 1 } @media screen and (max-width:800px) { .graduate-worldwise .title-text,.text--l,.text--sans-serif--black--l,.text--sans-serif--medium--l,.text--sans-serif--strong--l,.text--serif--l,.text--serif--l--emph { font-size: 24px; font-size: 1.5rem; line-height: 1 } } @media screen and (max-width:400px) { .graduate-worldwise .title-text,.text--l,.text--sans-serif--black--l,.text--sans-serif--medium--l,.text--sans-serif--strong--l,.text--serif--l,.text--serif--l--emph { font-size: 20px; font-size: 1.25rem; line-height: 1 } } .text--serif--xm--strong,.text--xm { font-size: 32px; font-size: 2rem; line-height: 1.2 } .news-events-container .title-text,.text--m,.text--sans-serif--black--m--muted,.text--sans-serif--medium--m,.text--sans-serif--medium--m--caps,.text--sans-serif--medium--m--caps--muted,.text--serif--m,.text--serif--m--caps { font-size: 24px; font-size: 1.5rem; line-height: 1.2 } .text--ms { font-size: 20px; font-size: 1.25rem; line-height: 1.2 } .text--s,.text--sans-serif--medium--s { font-size: 18px; font-size: 1.125rem; line-height: 1.2 } .text--sans-serif--medium--xs,.text--sans-serif--medium--xs--caps,.text--sans-serif--medium--xs--caps--muted,.text--xs { font-size: 16px; font-size: 1rem; line-height: 1.2 } .text--xxs { font-size: 15px; font-size: .9375rem; line-height: 1.5 } .text--sans-serif--black--xxxs,.text--sans-serif--medium--xxxs,.text--xxxs { font-size: 14px; font-size: .875rem; line-height: 1.6 } .text--xxxxs { font-size: 13px; font-size: .8125rem; line-height: 1.6 } .text--sans-serif--strong--l,.text--serif--xm--strong,.text--strong { font-weight: 700 } .text--emph,.text--sans-serif--medium--emph,.text--serif--l--emph,.text--serif--xxl--emph { font-style: italic } .text--caps,.text--sans-serif--medium--m--caps,.text--sans-serif--medium--m--caps--muted,.text--sans-serif--medium--xs--caps,.text--sans-serif--medium--xs--caps--muted,.text--serif--m--caps { text-transform: uppercase } .text--dark { color: #3c3737 } .text--sans-serif--white--xxxl,.text--white,.text-serif--white--xxl { color: #fff } .text--blue { color: #009dd5!important } .text--green { color: #97da00!important } .text--red,.text--serif--xxxl--red { color: #d30013!important } .text--muted,.text--sans-serif--black--m--muted,.text--sans-serif--medium--m--caps--muted,.text--sans-serif--medium--xs--caps--muted { color: #777!important } .text--center { text-align: center } .text--left { text-align: left } .text--right { text-align: right } .text--shadow-m { text-shadow: 0 2px 4px rgba(0,0,0,.5) } .text--shadow-s { text-shadow: 0 1px 1px rgba(0,0,0,.5) } .graduate-worldwise .tag-text,.text--tag { font-size: 20px; font-size: 1.25rem; line-height: 1.2 } @media screen and (max-width:1100px) { .graduate-worldwise .tag-text,.text--tag { font-size: 16px; font-size: 1rem; line-height: 1.2 } } .subtitle { margin-bottom: 30px!important; font-size: 48px; font-size: 3rem; line-height: 1 } @media screen and (max-width:800px) { .subtitle { font-size: 32px; font-size: 2rem; line-height: 1 } } @media screen and (max-width:400px) { .subtitle { font-size: 20px; font-size: 1.25rem; line-height: 1 } } .dot--red { position: relative } .dot--red:after { content: "."; position: absolute; -webkit-transform: translate(0); transform: translate(0); bottom: 0; color: #d30013 } body.zh .dot--red:after { bottom: -10px } .dot--blue { position: relative } .dot--blue:after { content: "."; position: absolute; -webkit-transform: translate(0); transform: translate(0); bottom: 0; color: #009dd5 } body.zh .dot--blue:after { bottom: -10px } .dot--yellow { position: relative } .dot--yellow:after { content: "."; position: absolute; -webkit-transform: translate(0); transform: translate(0); bottom: 0; color: #ffb909 } body.zh .dot--yellow:after { bottom: -10px } .dot--dark { position: relative } .dot--dark:after { content: "."; position: absolute; -webkit-transform: translate(0); transform: translate(0); bottom: 0; color: #3c3737 } body.zh .dot--dark:after { bottom: -10px } .inspiring-people .dot--dark:after { right: 0 } .dot--white { position: relative } .dot--white:after { content: "."; color: #fff } .admission-slider .dot--white:after { bottom: 10px } img { max-width: 100%; font-style: italic; vertical-align: middle } .img-rounded,.img-rounded--s,.img-rounded--xs { border-radius: 100% } .gm-style img,img[height],img[width] { max-width: none } .img-shadow { -webkit-box-shadow: 3px 3px 6px -3px #aaa,-3px 3px 6px -3px #aaa; box-shadow: 3px 3px 6px -3px #aaa,-3px 3px 6px -3px #aaa } .img-full-width { width: 100% } .img-max-width { display: block; max-width: 100%; height: auto; margin: 0 auto } .img-rounded--s { width: 40px; height: 40px } .img-rounded--xs { width: 30px; height: 30px } .img-rounded--xxs { border-radius: 5px } li>ol,li>ul { margin-bottom: 0 } .list-bare { margin: 0; padding: 0; list-style: none } .list-header--red { color: #d30013; font-weight: 800 } .pages-list { padding: 0; margin: 0 } .pages-list__item-wrap { list-style: none; margin: 0 auto; max-width: 1600px; padding: 0 120px } .pages-list__item-wrap:not(:last-child) { margin-bottom: 30px } @media screen and (max-width:1600px) { .pages-list__item-wrap { padding-left: 60px; padding-right: 60px } } @media screen and (max-width:1100px) { .pages-list__item-wrap { padding-left: 30px; padding-right: 30px } } @media screen and (max-width:800px) { .pages-list__item-wrap { padding: 0 } } .pages-list__item { position: relative; background-size: cover; background: #000 no-repeat 50% } .pages-list__item:before { content: ""; display: block; padding-bottom: 35% } @media screen and (max-width:1280px) { .pages-list__item:before { padding-bottom: 42% } } @media screen and (max-width:800px) { .pages-list__item:before { padding-bottom: 55% } } @media screen and (max-width:550px) { .pages-list__item:before { padding-bottom: 70% } } @media screen and (max-width:500px) { .pages-list__item:before { padding-bottom: 40% } } @media screen and (max-width:400px) { .pages-list__item:before { padding-bottom: 40% } } .pages-list__item--right .pages-list__overlay { right: 0 } .pages-list__item--right .page-list__title { text-align: right } .pages-list__item--right .page-list__info-text { width: 49% } .pages-list__item--right .page-list__title span { box-decoration-break: clone; -webkit-box-decoration-break: clone; background-color: #fff; padding: 0 0 0 1rem } @media screen and (max-width:800px) { .pages-list__item--right .page-list__title span { background-color: transparent } } .pages-list__item--right .page-list__content { left: -90%; right: 0 } @media screen and (max-width:800px) { .pages-list__item--right .page-list__content { right: 0; left: -8% } } @media screen and (max-width:550px) { .pages-list__item--right .page-list__content { padding: 8%; left: 0; right: 0 } } @media screen and (max-width:400px) { .pages-list__item--right .page-list__content { padding: 15px } } @media screen and (max-width:1100px) { .pages-list__item--right { padding-right: 0 } } .pages-list__item--left .pages-list__overlay { left: 0 } .pages-list__item--left .page-list__info-text { width: 49% } .pages-list__item--left .page-list__title span { box-decoration-break: clone; -webkit-box-decoration-break: clone; background-color: #fff; padding: 0 2rem 5px 0 } @media screen and (max-width:500px) { .pages-list__item--left .page-list__title span { padding: 0; background-color: transparent } } .pages-list__item--left .page-list__content { right: -100%; left: 0 } @media screen and (max-width:1280px) { .pages-list__item--left .page-list__content { top: 0; bottom: 10%; padding: 10% 30px } } @media screen and (max-width:800px) { .pages-list__item--left .page-list__content { left: 0; right: -50%; padding: 0 30px } } @media screen and (max-width:550px) { .pages-list__item--left .page-list__content { padding: 0 30px; left: 0; right: 0 } } @media screen and (max-width:500px) { .pages-list__item--left .page-list__content { padding: 0 30px } } @media screen and (max-width:400px) { .pages-list__item--left .page-list__content { padding: 0 15px } } @media screen and (max-width:1100px) { .pages-list__item--left { padding-left: 0 } } @media screen and (max-width:800px) { .our-vision-container .pages-list__overlay { width: 100% } .our-vision-container .page-list__content__centered { top: 0; -webkit-transform: translateY(-50%); transform: translateY(0) } } .pages-list__overlay { position: absolute; background-color: #fff; width: 20%; top: 0; bottom: 0 } @media screen and (max-width:1280px) { .pages-list__overlay { width: 30% } } @media screen and (max-width:1100px) { .pages-list__overlay { width: 55% } } @media screen and (max-width:800px) { .pages-list__overlay { width: 75% } } @media screen and (max-width:550px) { .pages-list__overlay { width: 100% } } .page-list__content { background: transparent; position: relative; height: 100% } @media screen and (max-width:1280px) { .page-list__content { top: 0; bottom: 10%; padding: 10% 12% } } @media screen and (max-width:1100px) { .page-list__content { padding: 8% 12% } } @media screen and (max-width:800px) { .page-list__content { padding: 8% } } @media screen and (max-width:550px) { .page-list__content { padding: 8%; left: 0; right: 0 } } .page-list__content__inner { position: relative; height: 100%; width: 100% } .page-list__content__centered { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .page-list__title { line-height: 1.2; padding: 0 30px 5px 0; display: inline } .page-list__title,body.my .page-list__title,body.zh .page-list__title { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } @media screen and (max-width:800px) { .page-list__title { text-align: center; margin-bottom: 20px } } .page-list__description { padding-right: 15px; padding-top: 15px; text-align: justify; padding-left: 0 } @media screen and (max-width:800px) { .page-list__description { padding-left: 0 } } .pages-list__item--tall .pages-list__item:before { padding-bottom: 40% } @media screen and (max-width:1280px) { .pages-list__item--tall .pages-list__item:before { padding-bottom: 46% } } @media screen and (max-width:800px) { .pages-list__item--tall .pages-list__item:before { padding-bottom: 64% } } @media screen and (max-width:550px) { .pages-list__item--tall .pages-list__item:before { padding-bottom: 73% } } @media screen and (max-width:500px) { .pages-list__item--tall .pages-list__item:before { padding-bottom: 82% } } @media screen and (max-width:400px) { .pages-list__item--tall .pages-list__item:before { padding-bottom: 95% } } .pages-list__item--tall .page-list__content { top: 10%; bottom: 10% } @media screen and (max-width:1280px) { .pages-list__item--tall .page-list__content { top: 8%; bottom: 8% } } .filtered-list-wrap { position: relative } .filtered-list-wrap:before { content: ""; position: absolute; top: 0; z-index: -1; width: 0; height: 0; overflow: hidden; background-color: transparent; background: url("/images/loading-pretty.gif") no-repeat 50%; background-size: 100px 100px } .filtered-list-wrap.is-loading:before { width: 100%; height: 100%; z-index: 100; background-color: hsla(0,0%,94%,.7) } .filtered-list-wrap:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),color-stop(50%,hsla(0,0%,94%,.65))); background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,94%,.65) 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff",endColorstr="#a6f0f0f0",GradientType=0) } .filtered-list-wrap.gradient-none:after { background: transparent } .filtered-list { margin: 0; padding: 0; list-style: none; min-height: 85px; max-height: 600px; overflow-y: auto } @media screen and (max-width:800px) { .filtered-list { max-height: 500px } } .filtered-list__row { display: block; padding: 0 30px; color: #000; font-size: 18px; font-size: 1.125rem; line-height: 1.2 } @media screen and (max-width:800px) { .filtered-list__row { height: 120px; border-bottom: 1px solid #f9d3d1; position: relative } } @media screen and (max-width:550px) { .filtered-list__row { height: 140px } } .filtered-list__row.even { background: #fdefef } .filtered-list__row.odd { background: #fff } .filtered-list__row-inner { border-bottom: 1px solid #f9d3d1; height: 80px } @media screen and (max-width:800px) { .filtered-list__row-inner { height: auto; border: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 30px; right: 30px } } @media screen and (max-width:550px) { .filtered-list__row-inner { left: 15px; right: 15px } } .filtered-list__row__item { float: left; display: inline-block; height: 100%; position: relative } @media screen and (max-width:1100px) { .filtered-list__row__item { font-size: 16px; font-size: 1rem; line-height: 1.2 } } @media screen and (max-width:800px) { .filtered-list__row__item { float: none; display: block; width: 100%!important; height: auto } } .filtered-list__row__item:not(:last-child) .filtered-list__row__item-content { padding-right: 30px } @media screen and (max-width:1100px) { .filtered-list__row__item:not(:last-child) .filtered-list__row__item-content { padding-right: 15px } } @media screen and (max-width:800px) { .filtered-list__row__item:not(:last-child) .filtered-list__row__item-content { padding-right: 0 } } .filtered-list__row__item--large { width: 40% } @media screen and (max-width:800px) { .filtered-list__row__item--large { font-size: 18px; font-size: 1.125rem; line-height: 1.2; margin-bottom: 5px } } @media screen and (max-width:400px) { .filtered-list__row__item--large { font-size: 17px; font-size: 1.0625rem; line-height: 1.2 } } .filtered-list__row__item--medium { width: 33.33% } @media screen and (max-width:800px) { .filtered-list__row__item--medium { font-size: 16px; font-size: 1rem; line-height: 1.2; margin-bottom: 5px } } @media screen and (max-width:400px) { .filtered-list__row__item--medium { font-size: 14px; font-size: .875rem; line-height: 1.2 } } .filtered-list__row__item--small { width: 20% } @media screen and (max-width:800px) { .filtered-list__row__item--small { font-size: 14px; font-size: .875rem; line-height: 1.2 } } .filtered-list__row__item-content { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } @media screen and (max-width:800px) { .filtered-list__row__item-content { position: static; top: inherit; -webkit-transform: none; transform: none } } .date-list__item { -webkit-box-align: center; -ms-flex-align: center; -moz-align-items: center; align-items: center; margin-bottom: 70px } @media screen and (max-width:800px) { .date-list__item { margin-bottom: 60px } } @media screen and (max-width:550px) { .date-list__item { margin-bottom: 40px } } .date-list__item__date { padding-right: 20px; border-right: 1px solid #000; text-align: center } .date-list__item__description { padding-left: 40px } @media screen and (max-width:550px) { .date-list__item__description { padding-left: 30px } } .list-container { width: 100%; clear: both } .list-container .list__content { width: 20%; float: left; padding-top: 8% } @media screen and (max-width:800px) { .list-container .list__content { padding-top: 0 } } .list-container .list__content .list__image { display: none } @media screen and (max-width:800px) { .list-container .list__content .list__image { display: block; margin-bottom: 15px } } .list-container .list__content .list__title span { position: relative; z-index: 1; background: #fff; display: inline-block; line-height: 1.2; padding-right: 30px } body.my .list-container .list__content .list__title span { line-height: 1.9 } @media screen and (max-width:800px) { .list-container .list__content .list__title span { line-height: .9; background: transparent } } .list-container .list__content .list__description { display: block; width: 100%; padding-right: 5px } @media screen and (max-width:800px) { .list-container .list__content .list__description { margin-top: 10px } } @media screen and (max-width:1280px) { .list-container .list__content { width: 25% } } @media screen and (max-width:1100px) { .list-container .list__content { width: 30% } } @media screen and (max-width:800px) { .list-container .list__content { width: 100% } } .list-container .list__image { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; background: #000 no-repeat 50%; background-size: cover; border-radius: 5px; overflow: hidden } @media screen and (max-width:800px) { .list-container .list__image { display: none } } .list-container .list__image:before { content: ""; display: block; padding-bottom: 45% } @media screen and (max-width:1280px) { .list-container .list__image:before { padding-bottom: 50% } } @media screen and (max-width:1100px) { .list-container .list__image:before { padding-bottom: 60% } } @media screen and (max-width:800px) { .list-container .list__image:before { padding-bottom: 45% } } @media screen and (max-width:550px) { .list-container .list__image:before { padding-bottom: 60% } } a { text-decoration: none; -webkit-transition: color .3s,border-color .3s,opacity .3s,background-color .3s,border-radius .3s; transition: color .3s,border-color .3s,opacity .3s,background-color .3s,border-radius .3s } .l-body-copy a { color: #d30013; border-bottom: 1px solid transparent } .no-touchevents .l-body-copy a:hover { border-bottom-color: #d30013 } .link--base { color: #d30013; border-bottom: 1px solid transparent } .no-touchevents .link--base:hover { border-bottom-color: #d30013 } .link--no-color { color: inherit; border-bottom: 1px solid transparent } .link--no-color:hover { border-bottom-color: inherit } .link--emph { color: #777; font-style: italic; font-size: 20px; font-size: 1.25rem; line-height: 1; padding-left: 15px } @media screen and (max-width:500px) { .link--emph { font-size: 18px; font-size: 1.125rem; line-height: 1 } } .link--emph:before { font-family: icomoon; content: "\E90A"; display: inline-block; font-size: 14px; font-size: .875rem; line-height: 1; font-style: normal; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: left .3s; transition: left .3s; position: absolute; left: 0; top: 2px } .link--emph:hover:before { left: -5px } .link--blue { color: #009dd5 } .btn { display: inline-block; vertical-align: middle; text-align: center; margin: 0; cursor: pointer; overflow: visible; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: all .3s; transition: all .3s } .btn,.btn:active,.btn:focus,.btn:hover { text-decoration: none } .btn::-moz-focus-inner { border: 0; padding: 0 } .btn--base { font-size: 12px; font-size: .75rem; line-height: 1.2; text-transform: uppercase; color: #fff; background: #009dd5; padding: 12px 34px; border: 1px solid #009dd5; border-radius: 5px } body.zh .btn--base { font-size: 16px; font-size: 1rem; line-height: 1.2 } .no-touchevents .btn--base:active,.no-touchevents .btn--base:hover { background: #fff; border-color: #009dd5; color: #009dd5 } .btn--blue { font-size: 12px; font-size: .75rem; line-height: 1.2; text-transform: uppercase; color: #fff; background: #009dd5; padding: 12px 20px; border: 1px solid #009dd5; border-radius: 5px; min-width: 200px } body.zh .btn--blue { font-size: 16px; font-size: 1rem; line-height: 1.2 } .no-touchevents .btn--blue:active,.no-touchevents .btn--blue:hover { background: #fff; border-color: #009dd5; color: #009dd5 } .btn--cta { font-size: 12px; font-size: .75rem; line-height: 1.2; text-transform: uppercase; color: #fff; background: #d30013; padding: 12px 20px; border: 1px solid #d30013; border-radius: 5px; min-width: 200px } body.zh .btn--cta { font-size: 16px; font-size: 1rem; line-height: 1.2 } .no-touchevents .btn--cta:active,.no-touchevents .btn--cta:hover { background: #fff; color: #d30013; border-color: #d30013 } .btn--cta--white { background: #fff } .btn--cta--blue { font-size: 12px; font-size: .75rem; line-height: 1.2; text-transform: uppercase; color: #fff; background: #09a8df; padding: 12px 20px; border: 1px solid #09a8df; border-radius: 5px; min-width: 200px } body.zh .btn--cta--blue { font-size: 16px; font-size: 1rem; line-height: 1.2 } .no-touchevents .btn--cta--blue:active,.no-touchevents .btn--cta--blue:hover { background: #fff; color: #09a8df; border-color: #09a8df } .accordion-group__tab__link:after,.accordion__tab__copy__link:after,.btn--link--base--white:after,.btn--link--base:after { display: inline-block; -webkit-transition: padding-left .3s; transition: padding-left .3s; font-family: icomoon!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\E90A"; padding-left: 5px; font-size: 10px; font-size: .625rem; line-height: 1.2 } .no-touchevents .accordion-group__tab__link:active:after,.no-touchevents .accordion-group__tab__link:hover:after,.no-touchevents .accordion__tab__copy__link:active:after,.no-touchevents .accordion__tab__copy__link:hover:after,.no-touchevents .btn--link--base--white:active:after,.no-touchevents .btn--link--base--white:hover:after,.no-touchevents .btn--link--base:active:after,.no-touchevents .btn--link--base:hover:after { padding-left: 10px } .accordion__tab__copy__link,.btn--link--base { font-size: 13px; font-size: .8125rem; line-height: 1.2; text-transform: uppercase; color: #009dd5 } body.zh .accordion__tab__copy__link,body.zh .btn--link--base { font-size: 16px; font-size: 1rem; line-height: 1.2 } .btn--link--base--white { font-size: 13px; font-size: .8125rem; line-height: 1.2; text-transform: uppercase; color: #fff } body.zh .btn--link--base--white { font-size: 16px; font-size: 1rem; line-height: 1.2 } .btn--rainbow { font-size: 14px; font-size: .875rem; line-height: 1.2; text-transform: uppercase; color: #fff; background: transparent; padding: 16px 20px; border: 1px solid #fff; border-radius: 5px; min-width: 200px } body.zh .btn--rainbow { font-size: 16px; font-size: 1rem; line-height: 1.2 } .btn--rainbow--purple { background: #772757 } .no-touchevents .btn--rainbow--purple:active,.no-touchevents .btn--rainbow--purple:hover { background: #fff; color: #772757; border-color: #772757 } .btn--rainbow--orange { background: #ff5200 } .no-touchevents .btn--rainbow--orange:active,.no-touchevents .btn--rainbow--orange:hover { background: #fff; color: #ff5200; border-color: #ff5200 } .btn--rainbow--green { background: #97da00 } .no-touchevents .btn--rainbow--green:active,.no-touchevents .btn--rainbow--green:hover { background: #fff; color: #97da00; border-color: #97da00 } .btn--filter { border: 1px solid #3c3737; color: #3c3737; height: 42px; line-height: 42px; font-size: 14px; padding: 0 10px; border-radius: 5px; opacity: 1; text-transform: uppercase } body.my .btn--filter { font-size: 9px } .no-touchevents .btn--filter:active,.no-touchevents .btn--filter:hover { background-color: #3c3737; color: #fff } .btn--full { width: 100% } @media screen and (max-width:1600px) { .btn--full--desktop { width: 100% } } @media screen and (max-width:1280px) { .btn--full--desktop-small { width: 100% } } @media screen and (max-width:1100px) { .btn--full--tablet-landscape { width: 100% } } @media screen and (max-width:900px) { .btn--full--tablet-large { width: 100% } } @media screen and (max-width:800px) { .btn--full--tablet { width: 100% } } @media screen and (max-width:550px) { .btn--full--phablet { width: 100% } } @media screen and (max-width:500px) { .btn--full--phone-large { width: 100% } } @media screen and (max-width:400px) { .btn--full--phone { width: 100% } } @media screen and (max-width:340px) { .btn--full--phone-small { width: 100% } } .btn--pill { font-size: 12px; font-size: .75rem; line-height: 1.2; text-transform: uppercase; color: #fff; border: 1px solid transparent; padding: 10px 20px; border-radius: 5px; min-width: 130px } body.zh .btn--pill { font-size: 16px; font-size: 1rem; line-height: 1.2 } .btn--icon { position: relative } .btn--icon:after { content: ""; font-size: 24px; font-size: 1.5rem; line-height: 1; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } body.zh .btn--icon:after { font-size: 28px; font-size: 1.75rem; line-height: 1 } .btn--linkedin { padding-right: 30px; background: #0077b5 } .btn--linkedin:after { content: "\E902"; top: 46% } .no-touchevents .btn--linkedin:active,.no-touchevents .btn--linkedin:hover { background: #fff; border-color: #0077b5; color: #0077b5 } .btn--wechat { padding-right: 30px; background: #76b23d } .btn--wechat:after { content: "\E904" } .no-touchevents .btn--wechat:active,.no-touchevents .btn--wechat:hover { background: #fff; border-color: #76b23d; color: #76b23d } .btn--facebook { padding-right: 30px; background: #4267b2 } .btn--facebook:after { content: "\E901" } .no-touchevents .btn--facebook:active,.no-touchevents .btn--facebook:hover { background: #fff; border-color: #4267b2; color: #4267b2 } .btn--search { background: #d30013; border: 1px solid #fff; color: #fff; width: 100%; margin-left: 10px; height: 50px; line-height: 50px; border-radius: 5px; padding: 0; font-size: 14px; font-weight: 700; max-width: 150px; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,sans-serif } @media screen and (max-width:500px) { .btn--search { margin-left: 0; max-width: 100% } } .no-touchevents .btn--search:active,.no-touchevents .btn--search:hover { background: #fff; border-color: #d30013; color: #d30013 } .btn--download { position: relative } .btn--download:before { content: "\E910"; font-size: 20px; font-size: 1.25rem; line-height: 1; vertical-align: middle; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .no-touchevents .btn--download:active:before,.no-touchevents .btn--download:hover:before { left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } .no-touchevents .btn--download:active .btn--download__copy,.no-touchevents .btn--download:hover .btn--download__copy { opacity: 0 } .btn--download__copy { display: inline-block; opacity: 1; padding-left: 30px; -webkit-transition: opacity .3s; transition: opacity .3s } .btn-group { text-align: center } .btn-group__item { margin: 10px 40px 0 0 } @media screen and (max-width:1600px) { .btn-group__item { width: auto } } @media screen and (max-width:1100px) { .btn-group__item { margin: 10px 20px 0 0 } } @media screen and (max-width:800px) { .btn-group__item { margin: 0 0 20px; max-width: none; width: 100% } } .btn-group__item:first-child { margin-left: 0 } .btn-group__item:last-child { margin-right: 0 } @media screen and (max-width:800px) { .btn-group__item:last-child { margin-bottom: 0 } } .btn-group__item--small { margin: 0 10px } @media screen and (max-width:1100px) { .btn-group__item--small { margin: 0 5px; max-width: 200px } } @media screen and (max-width:800px) { .btn-group__item--small { margin: 0 0 10px; max-width: none } } .btn-group__item--small:first-child { margin-left: 0 } .btn-group__item--small:last-child { margin-right: 0 } @media screen and (max-width:800px) { .btn-group__item--small:last-child { margin-bottom: 0 } } .button-mobile-back { display: none; position: absolute; top: 6px; left: 6px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; line-height: 40px } .button-mobile-back .icon-chevron-left,.button-mobile-back .link--emph:before { margin-left: 12px; font-weight: 800; text-shadow: 0 0 8px rgba(0,0,0,.5) } @media screen and (max-width:800px) { .button-mobile-back { display: block } } ::-webkit-input-placeholder { color: #777 } :-moz-placeholder,::-moz-placeholder { color: #777 } :-ms-input-placeholder { color: #777 } fieldset { border: none; margin: 0; padding: 0 } select::-ms-expand { display: none } select:active,select:focus,select:hover { outline: none } input:focus,textarea:focus { outline: 2px auto rgba(211,0,19,.5); -webkit-box-shadow: inset -1px 1px 3px 0 rgba(236,35,39,.5),inset 1px -1px 3px 0 rgba(236,35,39,.5); box-shadow: inset -1px 1px 3px 0 rgba(236,35,39,.5),inset 1px -1px 3px 0 rgba(236,35,39,.5); outline-offset: -2px } .form__field { margin-bottom: 5px } .form__label { font-size: 13px; font-size: .8125rem; line-height: 1.6; display: block; font-weight: 700 } .form__input { background: transparent; color: #777; border-radius: 0; border: 1px solid #777; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; vertical-align: middle; height: 40px; line-height: 40px; font-size: 16px; -webkit-transition: border-color .3s; transition: border-color .3s; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .form__input--base { padding: 0 10px; width: 100% } .form__input--l { width: 100%; height: 60px; line-height: 60px; font-size: 20px; padding: 0 20px } .form__input--white { background: #fff; width: 100%; height: 50px; line-height: 50px; font-size: 18px; padding: 0 15px; border: none; border-radius: 5px } .form__textarea { width: 100%; padding: 10px; line-height: 1.6; resize: none; height: 150px } .form__icon-right { display: inline-block; position: relative; background: transparent; z-index: 1; width: 100% } .form__icon-right:before { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #000; font-size: 18px; font-size: 1.125rem; line-height: 1; z-index: -1; text-align: center; padding-right: 20px } .form__icon-right>input,.form__icon-right>select { padding-right: 50px } .form__arrow-down { display: inline-block; position: relative; background: transparent; z-index: 1; width: 100% } .form__arrow-down:before { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #777; font-size: 15px; font-size: .9375rem; line-height: 40px; z-index: -1; height: 40px; width: 30px; border-left: 1px solid #777; text-align: center } .form__arrow-down select { padding-right: 40px } .form__arrow-down--minimal:before { border: none; font-size: 18px; font-size: 1.125rem; line-height: 40px; width: 40px } .form__arrow-right { display: inline-block; position: relative; background: transparent; z-index: 1; width: 100% } .form__arrow-right:before { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #777; font-size: 13px; font-size: .8125rem; line-height: 60px; z-index: -1; height: 60px; text-align: center; padding-right: 30px } .form__arrow-right select { padding-right: 50px } .form__arrow-right--left { display: inline-block; position: relative; background: transparent; z-index: 1; width: 100% } .form__arrow-right--left:before { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #000; font-size: 12px; font-size: .75rem; line-height: 1; z-index: -1; text-align: center } .form__arrow-right--left select { padding-left: 20px } .form__select { display: block; background: transparent; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-align: left; border-radius: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; width: 100%; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .form__select--base { border: 1px solid #777; color: #777; height: 40px; line-height: 40px; font-size: 16px; padding: 0 10px } .form__select--filter { border: 1px solid #777; color: #777; height: 60px; line-height: 60px; font-size: 20px; padding: 0 20px } .form__select--minimal { color: #777; font-size: 18px } .form__select--minimal,.form__select--nav { border: none; height: 40px; line-height: 40px; padding: 0 10px } .form__select--nav { color: #000; font-size: 14px; text-transform: uppercase } .form__select--nav optgroup { text-transform: none } .form__feedback { text-align: center; color: #d30013; margin-bottom: 30px; font-size: 18px; font-size: 1.125rem; line-height: 1.2 } .parsley-errors-list { margin: 0; padding: 0 10px; list-style: none; color: #d30013; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .parsley-errors-list>li { margin: 5px 0 0; padding: 0 } .parsley-error { border-color: #d30013 } .ruler--red { margin: 40px auto; border-top: 2px solid #d30013; width: 70% } @media screen and (max-width:550px) { .ruler--red { width: 100% } } .ruler--black { margin: 30px auto; border-top: 3px solid #000; width: 100% } .ruler--loose--grey { margin: 0; border-top: 2px solid #b5b5b5; width: 100% } .ruler--grey { margin: 0 auto; border-top: 2px solid #b5b5b5; width: 70% } .ruler--grey-dark { margin: 0 auto; border-top: 2px solid #3c3737; width: 70% } .flex-content-box { height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .flex-container,.flex-content-box { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100% } @media screen and (max-width:800px) { .flex-container { display: inline-block } } .flex { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative } @media screen and (max-width:800px) { .flex { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-top: 15px } } .flex__3-items { margin-left: -15px } .flex__3-items .flex-bg { height: calc(50% - 7.5px) } @media screen and (max-width:800px) { .flex__3-items { margin-left: 0 } } .flex__4-items { margin-left: -15px } .flex__4-items .flex-bg { height: calc(50% - 7.5px) } @media screen and (max-width:800px) { .flex__4-items { margin-left: 0 } } .flex__5-items { margin-left: -15px } .flex__5-items .flex-bg { height: calc(50% - 7.5px) } @media screen and (max-width:800px) { .flex__5-items { margin-left: 0 } } .flex__6-items { margin-left: -15px } .flex__6-items .flex-bg { height: calc(50% - 7.5px) } @media screen and (max-width:800px) { .flex__6-items { margin-left: 0 } } .flex-news-events { margin-left: -15px } .flex-news-events .flex-bg { height: calc(50% - 7.5px) } @media screen and (max-width:800px) { .flex-news-events { margin-left: 0 } } .no-flex { -webkit-box-flex: 0; -ms-flex: none; flex: none } .flex-inner-w-full { width: 100% } .flex-inner-1of2,.flex-news-events .flex-bg:first-child { width: calc(50% - 15px); float: left; margin-left: 15px; margin-bottom: 15px } @media screen and (max-width:800px) { .flex-inner-1of2,.flex-news-events .flex-bg:first-child { width: 100%; margin-left: 0 } } .flex-container-last .flex-inner-1of2,.flex-container-last .flex-news-events .flex-bg:first-child,.flex-news-events .flex-container-last .flex-bg:first-child { float: right } .flex__3-items .flex-bg,.flex__4-items .flex-bg,.flex__4-items .flex-bg:first-child,.flex__4-items .flex-bg:nth-child(2),.flex__5-items .flex-bg,.flex__5-items .flex-bg:first-child,.flex__6-items .flex-bg,.l-flex-inner-1of3 { width: calc(33.33% - 15px); float: left; margin-left: 15px; margin-bottom: 15px } @media screen and (max-width:800px) { .flex__3-items .flex-bg,.flex__4-items .flex-bg,.flex__4-items .flex-bg:first-child,.flex__4-items .flex-bg:nth-child(2),.flex__5-items .flex-bg,.flex__5-items .flex-bg:first-child,.flex__6-items .flex-bg,.l-flex-inner-1of3 { width: 100%; margin-left: 0 } } .flex-container-last .flex__3-items .flex-bg,.flex-container-last .flex__4-items .flex-bg,.flex-container-last .flex__5-items .flex-bg,.flex-container-last .flex__6-items .flex-bg,.flex-container-last .l-flex-inner-1of3,.flex__3-items .flex-container-last .flex-bg,.flex__4-items .flex-container-last .flex-bg,.flex__5-items .flex-container-last .flex-bg,.flex__6-items .flex-container-last .flex-bg { float: right } .flex__3-items .flex-bg:first-child,.l-flex-inner-2of3 { width: calc(66.66% - 15px); float: left; margin-left: 15px; margin-bottom: 15px } @media screen and (max-width:800px) { .flex__3-items .flex-bg:first-child,.l-flex-inner-2of3 { width: 100%; margin-left: 0 } } .flex-container-last .flex__3-items .flex-bg:first-child,.flex-container-last .l-flex-inner-2of3,.flex__3-items .flex-container-last .flex-bg:first-child { float: right } .flex-news-events .flex-bg,.l-flex-inner-1of4 { width: calc(25% - 15px); float: left; margin-left: 15px; margin-bottom: 15px } @media screen and (max-width:800px) { .flex-news-events .flex-bg,.l-flex-inner-1of4 { width: 100%; margin-left: 0 } } .flex-container-last .flex-news-events .flex-bg,.flex-container-last .l-flex-inner-1of4,.flex-news-events .flex-container-last .flex-bg { float: right } .flex-inner-h-full,.flex-news-events .flex-bg:first-child,.flex__3-items .flex-bg:first-child,.flex__4-items .flex-bg:first-child,.flex__4-items .flex-bg:nth-child(2),.flex__5-items .flex-bg:first-child { height: 100% } .flex-inner-h-50 { height: 50% } @media screen and (max-width:800px) { .flex-inner-h-50 { height: auto } } .flex-inner-h-25 { height: 25% } @media screen and (max-width:800px) { .flex-inner-h-25 { height: auto } } .flex-middle-h-50 { height: calc(50% - 30px) } .flex-bg { position: relative; background: #000 no-repeat 50%; background-size: cover; border-radius: 5px; overflow: hidden } .flex-bg:after { content: ""; display: table; clear: both } .flex-bg:before { content: ""; display: block } .flex-bg .overlay { border-radius: 5px } .flex-bg-l:before { padding-bottom: 60% } @media screen and (max-width:800px) { .flex-bg-l__tablet:before { padding-bottom: 60% } } .flex-numbers-left-bg { margin-bottom: -15px } .flex-numbers-left-bg:before { padding-bottom: 120% } @media screen and (max-width:800px) { .flex-numbers-left-bg:before { padding-bottom: 60% } } .flex-newsevents-left-bg { margin-bottom: -15px } .flex-newsevents-left-bg:before { padding-bottom: 65% } @media screen and (max-width:800px) { .flex-newsevents-left-bg:before { padding-bottom: 60% } } .flex-ucstories-bg:before { padding-bottom: 75% } @media screen and (max-width:800px) { .flex-ucstories-bg:before { padding-bottom: 60% } } .flex-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; clear: both; max-width: 100% } .flex-content.align-left { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left } .flex-content.align-right { -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right } .flex-content .flex-content__center-v { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center } .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; -webkit-transition: .3s; transition: .3s } .overlay.overlay-red { background: rgba(211,0,19,.85) } .overlay.overlay-green { background: rgba(15,218,0,.85) } .overlay.overlay-blue { background: rgba(0,157,213,.85) } .overlay.overlay-dark-light { background: rgba(0,0,0,.2) } .overlay.overlay-dark { background: rgba(0,0,0,.5) } .overlay.overlay-darker { background: rgba(0,0,0,.85) } .overlay.overlay-yellow { background: rgba(255,185,9,.85) } .overlay.overlay-purple { background: rgba(119,39,87,.85) } .overlay.overlay-dark-gradient { background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.5))); background: linear-gradient(180deg,transparent,rgba(0,0,0,.5)) } .overlay.overlay-grey-gradient { background: -webkit-gradient(linear,left top,left bottom,from(transparent),to(#777)); background: linear-gradient(180deg,transparent,#777) } .overlay.overlay-blue-gradient { background: -webkit-gradient(linear,left top,left bottom,from(#009dd5),to(#000)); background: linear-gradient(180deg,#009dd5,#000) } .overlay.overlay-yellow-gradient { background: -webkit-gradient(linear,left top,left bottom,from(#ffb909),to(#000)); background: linear-gradient(180deg,#ffb909,#000) } .overlay.overlay-red-gradient { background: -webkit-gradient(linear,left bottom,left top,from(rgba(211,0,19,.85)),to(rgba(170,0,0,.85))); background: linear-gradient(0deg,rgba(211,0,19,.85),rgba(170,0,0,.85)) } .overlay.overlay-red__hover:hover { background: rgba(211,0,19,.85) } .overlay.overlay-blue__hover:hover { background: rgba(0,157,213,.85) } .overlay.overlay-dark__hover:hover { background: rgba(0,0,0,.5) } .overlay.overlay-darker__hover:hover { background: rgba(0,0,0,.85) } .overlay.overlay-purple__hover:hover { background: rgba(119,39,87,.85) } .overlay.overlay-yellow__hover:hover { background: rgba(255,185,9,.85) } .overlay.overlay-green__hover:hover { background: rgba(15,218,0,.85) } .gmd-group { position: relative; padding-top: 7px } .gmd-group .select2-results__option[aria-selected]:hover { background: #009dd5; color: #fff } .gmd-group .select2-results__option[aria-selected=true] { background: #ebebeb } .gmd-group .selection .select2-selection.select2-selection--multiple { z-index: 2 } .gmd-group input.select2-search__field { background: transparent } .gmd-label { color: #3c3737; font-size: 18px; position: absolute; left: 0; bottom: 18px; cursor: text; text-align: initial; z-index: 1; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: translateY(12px); transform: translateY(12px); -webkit-transition: all .2s ease-out; transition: all .2s ease-out } .select2-container--focus~.gmd-label { color: #009688; font-size: 12px; transform: translateY(-15px); -webkit-transform: translateY(-15px) } .gmd-padding-r-ext,.select2-selection { padding-right: 15%!important; z-index: 1; position: relative; background-color: transparent!important } .search-container .gmd-padding-r-ext,.search-container .select2-selection { padding-right: 0!important } .intl-tel-input { width: 100% } .gmd-phone-label { color: #3c3737; font-size: 12px; transform: translateY(-15px); -webkit-transform: translateY(-15px) } .js-phone-error-msg { color: #d30013 } input.gmd-phone { width: 100%; border-top: 0; border-left: 0; border-right: 0; border-bottom-width: 2px; border-bottom-style: solid; border-radius: 0; padding: 0 0 10px; font-size: 16px; display: block } input.gmd-phone:not(.parsley-error) { border-bottom-color: teal } input.gmd-phone:focus { -webkit-box-shadow: none; box-shadow: none; outline: none } input.gmd-input,select.gmd-input,textarea.gmd-input { width: 100%; border-top: 0; border-left: 0; border-right: 0; border-bottom-width: 2px; border-bottom-style: solid; border-radius: 0; padding: 0 0 10px; font-size: 16px; display: block; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,sans-serif!important; -webkit-appearance: none } input.gmd-input:not(.parsley-error),select.gmd-input:not(.parsley-error),textarea.gmd-input:not(.parsley-error) { border-bottom-color: teal } input.gmd-input.active~.gmd-label,select.gmd-input.active~.gmd-label,textarea.gmd-input.active~.gmd-label { color: #3c3737; font-size: 12px; transform: translateY(-15px); -webkit-transform: translateY(-15px) } input.gmd-input.active.gmd-select2~.gmd-label,select.gmd-input.active.gmd-select2~.gmd-label,textarea.gmd-input.active.gmd-select2~.gmd-label { height: 20px; top: 12px; color: #3c3737; font-size: 12px; transform: translateY(-15px); -webkit-transform: translateY(-15px) } input.gmd-input:focus,select.gmd-input:focus,textarea.gmd-input:focus { -webkit-box-shadow: none; box-shadow: none; outline: none } input.gmd-input:focus~.gmd-bar:after,input.gmd-input:focus~.gmd-bar:before,select.gmd-input:focus~.gmd-bar:after,select.gmd-input:focus~.gmd-bar:before,textarea.gmd-input:focus~.gmd-bar:after,textarea.gmd-input:focus~.gmd-bar:before { width: 50% } input.gmd-input:focus~.gmd-label,select.gmd-input:focus~.gmd-label,textarea.gmd-input:focus~.gmd-label { color: #009688; font-size: 12px; transform: translateY(-15px); -webkit-transform: translateY(-15px) } input.gmd-input:disabled,select.gmd-input:disabled,textarea.gmd-input:disabled { background: #fff } .gmd-input { z-index: 2 } select.gmd-input { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: #fff; z-index: 2 } .gmd-bar { position: relative; display: block; width: 100% } .gmd-bar:after,.gmd-bar:before { content: ""; height: 2px; width: 0; bottom: 0; position: absolute; background: #009688; transition: all .5s ease; -moz-transition: .5s ease all; -webkit-transition: all .5s ease } .gmd-bar:before { left: 50% } .gmd-bar:after { right: 50% } .gmd-input:focus~.gmd-bar:before,input:focus~.gmd-bar:after { width: 50% } .gmd-icon-right { position: absolute; right: 10px; bottom: 10px; font-size: 22px; font-weight: 700; transition: all .5s ease; -moz-transition: .5s ease all; -webkit-transition: all .5s ease } .download-dropdown { display: block; max-width: 250px; position: relative; margin: 0 auto } .download-dropdown .dropdown-button { display: block; padding: 12px 30px; background-color: #009dd5; color: #fff; border-radius: 5px; width: 250px; position: relative; margin: 0 auto; cursor: pointer; font-weight: 800; font-size: 12px; font-size: .75rem; line-height: 1.2 } body.zh .download-dropdown .dropdown-button { font-size: 16px; font-size: 1rem; line-height: 1.2 } .download-dropdown .dropdown-button:after { content: ""; position: absolute; width: 30px; padding: 0 5px; height: 100%; top: 0; right: -30px; background-color: #009dd5; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 1px solid } .download-dropdown .dropdown-button:before { content: "\F107"; font-family: icomoon; font-size: 20px; font-weight: 700; position: absolute; right: -16px; top: 7px; z-index: 1; color: #fff; transition: all .3s; -webkit-transition: all .3s } .bg-yellow .download-dropdown .dropdown-button,.bg-yellow .download-dropdown .dropdown-button:after { background-color: #3c3737 } .download-dropdown ul.dropdown-list { display: none; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5); box-shadow: 0 0 4px rgba(0,0,0,.5); position: absolute; left: 0; list-style: none; z-index: 1; margin-top: 2px; padding: 0; max-height: 140px; overflow-y: auto; text-align: left; min-width: 280px; max-width: 500px; border-radius: 5px } .download-dropdown ul.dropdown-list li { padding: 5px 0; transition: all .3s; -webkit-transition: all .3s } .download-dropdown ul.dropdown-list li:not(:first-child) { border-top: 1px solid #f0f0f0 } .download-dropdown ul.dropdown-list li a { display: block; padding: 5px 0; width: 100%; font-size: .875rem; color: #3c3737 } .download-dropdown ul.dropdown-list li:hover { background-color: #b5b5b5 } .download-dropdown.open .dropdown-button:before { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .download-dropdown.open ul.dropdown-list { display: block } .checkboxContainer { display: inline; position: relative; cursor: pointer; font-size: 15px; font-size: .9375rem; line-height: 1.3; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .checkboxContainer input { position: absolute; opacity: 0; cursor: pointer } .checkboxContainer .checkmark { position: absolute; top: -2px; left: 0; height: 21px; width: 21px; background-color: #fff; border: 1px solid #000 } .checkboxContainer .checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 5px; height: 10px; color: #d30013; border: solid #d30013; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .checkboxContainer:hover input~.checkmark { background-color: #fdefef; border: 1px solid #cd201f; -webkit-transition: background-color .5s; transition: background-color .5s; -webkit-transition: border .6s; transition: border .6s } .checkboxContainer input:checked~.checkmark { background-color: #fff; border: 1px solid #d30013; animation-name: hulk; animation-duration: .3s; animation-timing-function: ease-out; -webkit-animation-name: hulk; -webkit-animation-duration: .3s; -webkit-animation-timing-function: ease-out } .checkboxContainer input:checked~.checkmark:after { display: block } @keyframes hulk { 0% { -webkit-transform: scale(1); transform: scale(1); background-color: #cd201f } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); background-color: #fdefef } to { -webkit-transform: scale(1); transform: scale(1); background-color: #fff } } @-webkit-keyframes hulk { 0% { -webkit-transform: scale(1); transform: scale(1); background-color: #cd201f } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); background-color: #fdefef } to { -webkit-transform: scale(1); transform: scale(1); background-color: #fff } } .checkboxContainer span.text-muted { margin-left: 32px } .mobile-search { position: fixed; top: 0; bottom: 0; right: -500px; width: 100%; max-width: 500px; height: 100vh; overflow: auto; z-index: 11; background: #fff; -webkit-transition: right .3s cubic-bezier(.645,.045,.095,1); transition: right .3s cubic-bezier(.645,.045,.095,1); padding: 0 15px 15px; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.5); box-shadow: 0 2px 4px 0 rgba(0,0,0,.5) } .has-visible-search .mobile-search { right: 0 } .mobile-search-container { position: relative; height: 100%; width: 100% } .mobile-search__box { padding: 0 20px; position: relative; border-bottom: 1px solid #c6c6c6 } .mobile-search__box .icon-chevron-left,.mobile-search__box .link--emph:before { position: absolute; left: 0; padding: 21px 15px; font-weight: 700 } .mobile-search__box .icon-chevron-left:before,.mobile-search__box .link--emph:before { color: #c6c6c6 } .mobile-search__input { width: 100%; padding: 20px; border: 0; font-size: 1rem; font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .mobile-search__input,.mobile-search__input:focus { box-shadow: none; -webkit-box-shadow: none; outline: none } .mobile-search__input:focus { outline-offset: 0 } .mobile-search__input::-webkit-input-placeholder { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .mobile-search__input:-ms-input-placeholder { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .mobile-search__input:-moz-placeholder,.mobile-search__input::-moz-placeholder { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .mobile-search__history { height: 0; overflow: hidden; -webkit-transition: height .3s; transition: height .3s } .mobile-search__history.open { height: auto; overflow-y: auto } .mobile-search__history .title-text { color: #c6c6c6; padding: 10px 15px } .history { width: 100% } .history .history__list { list-style: none; padding: 0 15px; max-height: 300px; overflow: auto } .history a { text-decoration: none; } .history a .history__list-item { padding: 15px 0 15px 40px; position: relative; color: #262626 } .history a .history__list-item:last-child { border: 0 } .history a .history__list-item .icon-clock { position: absolute; left: 10px; top: 15px; font-size: 1.25rem } .mobile-search__result { width: 100%; max-height: 100%; overflow: auto } .heriatage-sticky-container { position: relative; width: 100vw; max-width: 1600px; margin-left: auto; margin-right: auto } .heriatage-sticky-logo-container { width: 100px; float: right; -webkit-transition: width .3s; transition: width .3s } .has-visible-nav .heriatage-sticky-logo-container { display: none } .heriatage-sticky-logo-container.open { width: 200px } .heriatage-sticky-logo-container.close { width: 36.2px } @media screen and (max-width:1100px) { .heriatage-sticky-logo-container { width: 78.5px } .heriatage-sticky-logo-container.open { width: 165px } .heriatage-sticky-logo-container.close { width: 30.2px } } @media screen and (max-width:800px) { .heriatage-sticky-logo-container { width: 60px } } .heriatage-sticky-logo { width: 100px; position: fixed; top: 220px; z-index: 2; overflow: hidden; -webkit-transition: width .3s; transition: width .3s; right: 0 } .heriatage-sticky-logo.open { width: 200px } .heriatage-sticky-logo .heritage-logo__small { display: none } .heriatage-sticky-logo.close { width: 36.2px } .heriatage-sticky-logo.close .heritage-logo__img { display: none } .heriatage-sticky-logo.close .heritage-logo__small { display: block; max-width: 36.2px } .heriatage-sticky-logo.close .heriatage-sticky-logo__arrow { display: none } .heriatage-sticky-logo .heritage-logo__img { width: 200px; max-width: 200px } @media screen and (max-width:1100px) { .heriatage-sticky-logo { width: 78.5px } .heriatage-sticky-logo.open { width: 165px } .heriatage-sticky-logo.close { width: 30.2px } .heriatage-sticky-logo.close .heritage-logo__small { max-width: 30.2px } .heriatage-sticky-logo .heritage-logo__img { width: 165px; max-width: 165px } } @media screen and (max-width:1600px) { .heriatage-sticky-logo { right: 0 } } @media screen and (max-width:1100px) { .heriatage-sticky-logo { right: 0; top: 130px } } @media screen and (max-width:800px) { .heriatage-sticky-logo { right: 0; width: 60px; top: 100px } } .heriatage-sticky-logo__arrow { position: absolute; left: 0; top: -50px; width: 25px; height: 25px; float: left; display: inline-block; cursor: pointer } .page-wrapper { position: relative; width: 100%; min-height: 100%; -webkit-overflow-scrolling: touch } @media screen and (max-width:1100px) { .has-visible-nav .page-wrapper,.has-visible-search .page-wrapper { overflow: hidden } } .no-scroll .page-wrapper { overflow: hidden } .page { margin: 0 auto; width: 100%; height: 100%; min-height: 100vh; position: absolute } @media screen and (max-width:1100px) { .page { left: 0; -webkit-transition: left .3s cubic-bezier(.645,.045,.095,1); transition: left .3s cubic-bezier(.645,.045,.095,1) } .has-visible-nav .page { -webkit-backface-visibility: hidden; backface-visibility: hidden; left: 300px } } @media screen and (max-width:400px) { .has-visible-nav .page { left: 100% } } .page__overlay { top: 0; background-color: transparent; position: fixed; width: 0; height: 0; z-index: 100; -webkit-transition: width 0s .3s,height 0s .3s,background-color .3s; transition: width 0s .3s,height 0s .3s,background-color .3s } @media screen and (max-width:1100px) { .has-visible-nav .page__overlay { background-color: rgba(0,0,0,.6); width: 100%; height: 100%; -webkit-transition: width 0s,height 0s,background-color .3s; transition: width 0s,height 0s,background-color .3s } } .has-visible-search .page__overlay { z-index: 10 } @media screen and (max-width:1100px) { .has-visible-search .page__overlay { background-color: rgba(0,0,0,.6); width: 100%; height: 100%; -webkit-transition: width 0s,height 0s,background-color .3s; transition: width 0s,height 0s,background-color .3s } } .page-header { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif; font-weight: 500; background-color: #fff; width: 100%; position: relative; z-index: 10 } .page-header:after { content: ""; display: table; clear: both } body.my .page-header { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } @media screen and (max-width:1100px) { .page-header { position: fixed; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); box-shadow: 0 2px 4px 0 rgba(0,0,0,.2) } } @media screen and (max-width:800px) { .has-active-search .page-header { padding-bottom: 70px } } .page-header__no-nav { padding: 10px 0 } @media screen and (max-width:1100px) { .page-header__no-nav { padding: 0 } } .page-header-hidden { visibility: hidden; opacity: 0; padding-top: 54px } @media screen and (max-width:1100px) { .page-header-hidden { padding-top: 0 } } @media screen and (max-width:800px) { .has-active-search .page-header-hidden { padding-bottom: 70px } } @media screen and (max-width:1100px) { .page-brand { display: inline-block } } .page-brand__copy { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } @media screen and (max-width:1100px) { .page-brand__copy { display: inline-block; vertical-align: middle; position: static; -webkit-transform: none; transform: none } } .page-brand__copy__img { width: 400px } @media screen and (max-width:1600px) { .page-brand__copy__img { width: 370px } } @media screen and (max-width:1100px) { .page-brand__copy__img { width: 300px } } @media screen and (max-width:550px) { .page-brand__copy__img { width: 215px } } @media screen and (max-width:500px) { .page-brand__copy__img { width: 185px } } @media screen and (max-width:400px) { .page-brand__copy__img { width: 200px } .has-second-crest .page-brand__copy__img { width: 170px } } .page-brand__nav { position: absolute; right: 0; top: 20%; margin: 0 } .page-brand__nav.mobile-locale__nav { display: none } @media screen and (max-width:1100px) { .page-brand__nav { padding: 0 30px 60px; bottom: 0; position: fixed; left: -300px; top: inherit; width: 300px; -webkit-transform: none; transform: none; right: inherit; -webkit-transition: left .3s cubic-bezier(.645,.045,.095,1); transition: left .3s cubic-bezier(.645,.045,.095,1); text-align: center } .page-brand__nav.mobile-locale__nav { display: block; height: 20px } .page-brand__nav .menu-item__hidden { display: none } .has-visible-nav .page-brand__nav { -webkit-overflow-scrolling: touch; left: 0 } .page-brand__nav .page-nav__item { padding-top: 5px; padding-bottom: 5px } } @media screen and (max-width:1100px) and (max-width:400px) { .page-brand__nav { left: -100%; width: 100% } } .page-brand__logo { display: inline-block; text-align: center; width: 50px; margin: 15px auto; background-size: contain; vertical-align: middle } @media screen and (max-width:1100px) { .page-brand__logo { display: inline-block; vertical-align: middle; margin: 10px 0 10px 10px; width: 35px } } @media screen and (max-width:550px) { .page-brand__logo { width: 30px } } @media screen and (max-width:400px) { .page-brand__logo { width: 28px } } @media screen and (max-width:340px) { .page-brand__logo { width: 22px } } .page-brand__logo:before { content: ""; display: block; padding-top: 130% } .page-brand__logo--high-school { background: url("/images/logos/logo-high-school-crest.svg") no-repeat 50%; width: 70px } @media screen and (max-width:1100px) { .page-brand__logo--high-school { width: 49px } } @media screen and (max-width:550px) { .page-brand__logo--high-school { width: 43px } } @media screen and (max-width:400px) { .page-brand__logo--high-school { width: 40px } } .page-brand__logo--high-school:before { content: ""; display: block; padding-top: 92% } .page-brand-container { position: relative; z-index: 2; text-align: center; -webkit-transition: opacity .3s; transition: opacity .3s } .page-header__mobile-search { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; color: #3c3737; display: none; font-size: 20px; font-size: 1.25rem; line-height: 1 } @media screen and (max-width:1100px) { .page-header__mobile-search { display: block } } @media screen and (max-width:340px) { .page-header__mobile-search { font-size: 16px; font-size: 1rem; line-height: 1 } } .page-header__open-mobile-nav { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; color: #3c3737; display: none; font-size: 20px; font-size: 1.25rem; line-height: 1 } @media screen and (max-width:1100px) { .page-header__open-mobile-nav { display: block } } @media screen and (max-width:340px) { .page-header__open-mobile-nav { font-size: 16px; font-size: 1rem; line-height: 1 } } .page-header__close-mobile-nav { position: absolute; top: 10px; right: 0; padding: 15px; color: #3c3737; display: none; font-size: 20px; font-size: 1.25rem; line-height: 1; z-index: 1 } @media screen and (max-width:1100px) { .page-header__close-mobile-nav { display: block } } .page-nav-wrap { width: 100%; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); z-index: 2 } .page-nav-wrap.is-sticky { position: fixed; top: 0 } @media screen and (max-width:1100px) { .page-nav-wrap.is-sticky { position: relative; top: inherit } } @media screen and (max-width:1100px) { .page-nav-wrap { position: relative; border: none } } .page-nav:after { content: ""; display: table; clear: both } @media screen and (max-width:1100px) { .page-nav { position: fixed; top: 0; bottom: 100px; left: -300px; width: 300px; overflow: auto; z-index: 1; -webkit-transition: left .3s cubic-bezier(.645,.045,.095,1); transition: left .3s cubic-bezier(.645,.045,.095,1); padding-left: 30px } .has-visible-nav .page-nav { -webkit-overflow-scrolling: touch; left: 0 } } @media screen and (max-width:400px) { .page-nav { left: -100%; width: 100% } } .page-nav__left { margin: 0; padding: 0; list-style: none; float: left; width: 100%; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .is-sticky .page-nav__left { width: 85% } @media screen and (max-width:1100px) { .page-nav__left { float: none; display: block; width: 100%!important } } .page-nav__right-container { overflow: hidden; display: none; width: 0 } .is-sticky .page-nav__right-container { width: 15%; display: block } @media screen and (max-width:1100px) { .page-nav__right-container { width: 100%!important } } .page-nav__right { margin: 0; padding: 0; list-style: none; float: right; text-align: right } @media screen and (max-width:1100px) { .page-nav__right { float: none; width: 100%!important; text-align: left } } .page-nav__ctas { margin: 0; padding: 0; list-style: none; float: right; text-align: right; margin-right: -100%; opacity: 0; -webkit-transition: all .3s; transition: all .3s; padding-left: 40px } @media screen and (max-width:1600px) { .page-nav__ctas { padding-left: 35px } } @media screen and (max-width:1280px) { .page-nav__ctas { padding-left: 30px } } @media screen and (max-width:1100px) { .page-nav__ctas { display: none } } .page-nav-wrap.is-sticky .page-nav__ctas { margin-right: 0; opacity: 1 } .page-nav__ctas .page-nav__item a { vertical-align: baseline } .page-nav__item { display: inline-block; padding-top: 15px; padding-bottom: 15px } @media screen and (max-width:1100px) { .page-nav__left .page-nav__item,.page-nav__right .page-nav__item { display: block; padding: 15px 30px 0 0 } } .page-nav__item.page-brand__nav-item { font-weight: 700; text-transform: uppercase } @media screen and (max-width:1100px) { .page-nav__item.page-brand__nav-item { font-weight: 500 } } .page-nav__item.is-active>a,.page-nav__item:hover>a { color: #d30013 } .page-nav__item:not(.last-child) { padding-right: 15px } @media screen and (max-width:1600px) { .page-nav__item:not(.last-child) { padding-right: 10px } } @media screen and (max-width:1280px) { .page-nav__item:not(.last-child) { padding-right: 4px } } @media screen and (max-width:1600px) { body.zh .page-nav__item:not(.last-child) { padding-right: 15px } } @media screen and (max-width:1280px) { body.zh .page-nav__item:not(.last-child) { padding-right: 5px } } .page-nav__item a { font-size: 15.5px; font-size: .96875rem; line-height: 1.2; color: #3c3737; vertical-align: middle } @media screen and (max-width:1280px) { .page-nav__item a { font-size: 13px; font-size: .8125rem; line-height: 1.2 } } @media screen and (max-width:1100px) { .page-nav__item a { font-size: 14px; font-size: .875rem; line-height: 1.2 } } @media screen and (max-width:1600px) { body.my .page-nav__item a,body.zh .page-nav__item a { font-size: 15px; font-size: .9375rem; line-height: 1.2 } } @media screen and (max-width:1280px) { body.my .page-nav__item a { font-size: 12px; font-size: .75rem; line-height: 1.2 } } .page-nav__item--l>a { font-size: 18px; font-size: 1.125rem; line-height: 1.2 } @media screen and (max-width:1600px) { .page-nav__item--l>a { font-size: 16px; font-size: 1rem; line-height: 1.2 } } @media screen and (max-width:1100px) { .page-nav__item--l>a { font-size: 14px; font-size: .875rem; line-height: 1.2 } } @media screen and (max-width:1600px) { body.zh .page-nav__item--l>a { font-size: 15px; font-size: .9375rem; line-height: 1.2 } } .page-nav__item--l>a.locale-link { font-size: 14px; font-size: .875rem; line-height: 1.2 } @media screen and (max-width:1100px) { .mobile-locale__nav .page-nav__item--l>a { font-size: 14px; font-size: .875rem; line-height: 1.8 } } @media screen and (max-width:1100px) { .page-nav__item--l.dropdown { width: 100%; border: none; padding: 0 0 15px!important; text-align: center } .page-nav__item--l.dropdown .dropdown-title { display: inline-block; width: auto; color: #d30013; padding: 0 10px; border-right: 1px solid #000 } .page-nav__item--l.dropdown .dropdown-arrow { display: none } .page-nav__item--l.dropdown .dropdown-list { position: static; display: inline-block; border: none; padding: 0; margin: 0; font-size: 0; vertical-align: middle } .page-nav__item--l.dropdown .dropdown-list__item { display: inline-block; padding: 0 10px; line-height: 1 } .page-nav__item--l.dropdown .dropdown-list__item:not(:last-child) { border-right: 1px solid #3c3737 } } .page-nav__mobile-school-switch { display: none } @media screen and (max-width:1100px) { .page-nav__mobile-school-switch { display: block; padding-bottom: 20px!important } } .page-nav__item-splitter { display: inline-block; list-style: none; padding: 15px 10px; font-size: 16px; font-size: 1rem; line-height: 1.2 } @media screen and (max-width:1600px) { .page-nav__item-splitter { font-size: 16px; font-size: 1rem; line-height: 1.2 } } @media screen and (max-width:1100px) { .page-nav__item-splitter { font-size: 14px; font-size: .875rem; line-height: 1.2 } } @media screen and (max-width:1600px) { body.zh .page-nav__item-splitter { font-size: 15px; font-size: .9375rem; line-height: 1.2 } } .page-nav__sub-wrapper { width: 100%; -webkit-transform: translateY(16px); transform: translateY(16px); visibility: hidden; z-index: -9999; left: -9999; top: 200%; opacity: 0; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); -webkit-transition: left 0s .3s,opacity .3s,top .3s; transition: left 0s .3s,opacity .3s,top .3s } .page-nav__item:hover .page-nav__sub-wrapper { display: block; visibility: visible; z-index: 1; top: 100%; opacity: 1; left: 0 } @media screen and (max-width:1100px) { .page-nav__sub-wrapper { position: static; left: inherit; -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; height: auto; overflow: hidden; visibility: visible; z-index: auto; top: 100%; opacity: 1 } } .page-nav__sub { margin: 0; list-style: none; text-align: left; position: absolute; min-width: 200px; max-width: 300px; padding: 0; margin: -1px 0 0; background: #fff; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5); box-shadow: 0 0 4px rgba(0,0,0,.5); border-radius: 5px; height: 0; opacity: 0 } @media (min-width:1100px) { .page-nav__item:hover .page-nav__sub { height: auto; opacity: 1 } } @media screen and (max-width:1100px) { .page-nav__sub { max-width: 100%; width: 100%; -webkit-box-shadow: none; box-shadow: none; position: relative; -webkit-transition: all .5s; transition: all .5s } .page-nav__item.is-active .page-nav__sub { opacity: 1; height: auto } } .page-nav__sub a:first-child:before { content: ""; bottom: 100%; left: 35%; position: absolute; border: solid transparent; border-bottom-color: #fff; border-width: 10px; margin-left: -36px; z-index: 2 } .page-nav__sub a:first-child:after { content: ""; bottom: 100%; left: calc(35% - 2px); position: absolute; border: solid transparent; border-bottom-color: #ddd; border-width: 12px; margin-left: -36px; z-index: 1 } .page-nav__sub .page-nav__item--sub { display: block; cursor: pointer; padding: 10px 20px; width: 100%; transition: all .3s; -webkit-transition: all .3s } .page-nav__sub .page-nav__item--sub.is-active,.page-nav__sub .page-nav__item--sub:hover { background: #f0f0f0 } .page-nav__sub .page-nav__item--sub:last-child { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px } .page-nav__sub .page-nav__item--sub:first-child { border-top-right-radius: 5px; border-top-left-radius: 5px } @media screen and (max-width:1100px) { .page-nav__sub .page-nav__item--sub { padding-top: 12px } .page-nav__sub .page-nav__item--sub:after,.page-nav__sub .page-nav__item--sub:before { display: none } } .page-nav__sub>a { font-size: 16px; font-size: 1rem; line-height: 1.2; color: #3c3737; vertical-align: middle } @media screen and (max-width:1600px) { .page-nav__sub>a { font-size: 14px; font-size: .875rem; line-height: 1.2 } } @media screen and (max-width:1100px) { .page-nav__sub>a { display: block; width: 100%; height: 100% } } .page-content { display: block; min-height: 70vh; background-color: #fff; overflow: hidden; position: relative; padding-bottom: 50px } .page-content__nav-super { position: relative; padding-bottom: 30px } .page-content__nav-super>a { position: absolute; top: 30px } .page-footer { width: 100%; padding: 20px 0; color: #fff; background: #000; border-top: 10px solid #d30013; font-size: 14px; font-size: .875rem; line-height: 1.3; font-weight: 500; text-align: center; position: relative } .page-footer.page-footer_school { padding-top: 0 } .page-footer__social { list-style: none; margin: 0 0 20px; padding: 10px 0 0 } .page-footer__social>li { display: inline-block; padding-bottom: 5px } .page-footer__social>li:not(:last-child) { padding-right: 5px } .footer-left-content { display: inline-block; float: left } @media screen and (max-width:800px) { .footer-left-content { display: block; text-align: center; width: 100%; margin-bottom: 10px } } .footer-bottom-border { border-bottom: 1px solid #919191 } .footer-right-content { display: inline-block; float: right } @media screen and (max-width:800px) { .footer-right-content { display: block; text-align: center; width: 100%; margin-bottom: 10px } } .footer-right-content a { color: #009dd5 } .page-footer__social__icon { display: inline-block; background: #262626; font-size: 32px; font-size: 2rem; line-height: 1; padding: 2px; color: #fff; border-radius: 0 } @media screen and (max-width:400px) { .page-footer__social__icon { font-size: 28px; font-size: 1.75rem; line-height: 1 } } .page-footer__social__icon:hover { border-radius: 5px } .no-touchevents .page-footer__social__icon.icon-facebook:hover { background-color: #4267b2 } .no-touchevents .page-footer__social__icon.icon-linkedin:hover { background-color: #0077b5 } .no-touchevents .page-footer__social__icon.icon-wechat:hover { background-color: #76b23d } .no-touchevents .page-footer__social__icon.icon-instagram:hover { background-color: #bc2a8d } .no-touchevents .page-footer__social__icon.icon-youtube:hover { background-color: #cd201f } .no-touchevents .page-footer__social__icon.icon-youku:hover { background-color: #09a8df } .no-touchevents .page-footer__social__icon.icon-twitter:hover { background-color: #1da1f2 } .page-footer__copyright>a,.page-footer__links>li>a { color: #fff; border-bottom: 1px solid transparent } .page-footer__copyright>a:hover,.page-footer__links>li>a:hover { border-bottom-color: #fff } .page-footer__links { list-style: none; margin: 0; padding: 0 0 5px } .page-footer__links>li { display: inline-block } .page-footer__links>li:not(:last-child) { padding-right: 15px } .page-footer__copy { padding: 0 0 5px; font-weight: 400; line-height: 1.5 } .page-bottom-nav { padding-top: 10px; padding-bottom: 10px; text-align: center } .page-bottom-nav__count { display: inline-block; font-size: 20px; font-size: 1.25rem; line-height: 1; vertical-align: middle; text-align: center; min-width: 70px } .page-bottom-nav__count,body.my .page-bottom-nav__count,body.zh .page-bottom-nav__count { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .page-bottom-nav__next,.page-bottom-nav__prev { font-family: icomoon!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle; height: 30px; width: 30px; line-height: 30px; font-size: 0; text-align: center; cursor: pointer; padding: 0; border: none } .page-bottom-nav__next,.page-bottom-nav__next:focus,.page-bottom-nav__next:hover,.page-bottom-nav__prev,.page-bottom-nav__prev:focus,.page-bottom-nav__prev:hover { background: transparent; color: transparent; outline: none } .page-bottom-nav__next:hover:before,.page-bottom-nav__prev:hover:before { -webkit-transition: opacity .3s; transition: opacity .3s; opacity: .6 } .page-bottom-nav__next.slick-disabled:before,.page-bottom-nav__prev.slick-disabled:before { opacity: .4 } .page-bottom-nav__next:before,.page-bottom-nav__prev:before { font-size: 28px; font-size: 1.75rem; line-height: 30px; color: #3c3737 } .intrinsic-container { position: relative; height: 0; overflow: hidden; padding-bottom: 100% } .intrinsic-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .article { margin-bottom: 50px } .article-header { margin-top: 50px; margin-bottom: 40px } @media screen and (max-width:550px) { .article-header { margin-bottom: 30px } } .article-header__date { display: block; font-size: 12px; font-size: .75rem; line-height: 1; text-transform: uppercase; color: #d30013; margin-bottom: 10px } .article-header__nav { position: relative } .article-header__nav>a { position: absolute; top: -20px } @media screen and (max-width:550px) { .article-header__nav>a { top: -25px } } .hero { position: relative; /*background: #000 no-repeat 50%; background-size: cover;*/ width: 100%; /*max-width: 1600px;*/ /*margin-left: auto; margin-right: auto*/ } .hero:after { content: ""; display: table; clear: both } .hero:before { content: ""; display: block } .hero--l:before { padding-bottom: 45% } @media screen and (max-width:550px) { .hero--l:before { padding-bottom: 55% } } @media screen and (max-width:400px) { .hero--l:before { padding-bottom: 75% } } .hero--video { cursor: pointer } .no-touchevents .hero--video:not(.playing):hover { opacity: .9 } .hero--video:before { background: rgba(0,0,0,.4); padding-bottom: 50% } .hero__bg-video-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; width: 100% !important; } .hero-video-disabled .hero__bg-video-container { display: none } .hero--video__play-btn { position: absolute; right: 120px; bottom: 40px; font-size: 16px; font-size: 1rem; line-height: 1.2 } @media screen and (max-width:1600px) { .hero--video__play-btn { right: 60px } } @media screen and (max-width:1100px) { .hero--video__play-btn { right: 30px } } @media screen and (max-width:800px) { .hero--video__play-btn { right: 20px; bottom: 20px; font-size: 14px; font-size: .875rem; line-height: 1.2 } } @media screen and (max-width:500px) { .hero--video__play-btn { right: 10px; bottom: 10px; font-size: 12px; font-size: .75rem; line-height: 1.2 } } .hero--video__play-btn i { position: relative; transition: right .3s; right: 0; -webkit-transition: right .3s; -moz-transition: right .3s } .hero--video__play-btn .js-news-events-slick i.slick-arrow.slick-next,.hero--video__play-btn .js-news-events-slick i.slick-arrow.slick-prev,.hero--video__play-btn .uc-stories-details-view .uc-detail-footer i.icon-chevron-left,.hero--video__play-btn .uc-stories-details-view .uc-detail-footer i.link--emph:before,.hero--video__play-btn i.icon-chevron-left,.hero--video__play-btn i.icon-chevron-right,.hero--video__play-btn i.link--emph:before,.js-news-events-slick .hero--video__play-btn i.slick-arrow.slick-next,.js-news-events-slick .hero--video__play-btn i.slick-arrow.slick-prev,.uc-stories-details-view .uc-detail-footer .hero--video__play-btn i.icon-chevron-left,.uc-stories-details-view .uc-detail-footer .hero--video__play-btn i.link--emph:before { bottom: -1px } @media screen and (max-width:800px) { .hero--video__play-btn i { font-size: 12px; font-size: .75rem; line-height: 1.2 } } @media screen and (max-width:500px) { .hero--video__play-btn i { font-size: 10px; font-size: .625rem; line-height: 1 } } .hero--video__play-btn:hover i { right: -5px } .hero__bg-video { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden } .hero--video__content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; z-index: -1; -webkit-transition: z-index 0s .6s,opacity .6s; transition: z-index 0s .6s,opacity .6s } .hero--video.playing .hero--video__content { opacity: 1; z-index: 1; -webkit-transition: z-index 0s,opacity .6s; transition: z-index 0s,opacity .6s } .hero--video__icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 1; z-index: 1; -webkit-transition: z-index 0s .3s,opacity .3s; transition: z-index 0s .3s,opacity .3s } .playing .hero--video__icon { opacity: 0; z-index: -1; -webkit-transition: z-index 0s,opacity .3s; transition: z-index 0s,opacity .3s } .youku-player,.youtube-player { height: 100%; width: 100% } .hero__content { position: absolute; left: 0; color: #fff; font-weight: 800; letter-spacing: -4px; text-shadow: 0 2px 4px rgba(0,0,0,.5); font-size: 128px; font-size: 8rem; line-height: 1 } .hero__content,body.my .hero__content,body.zh .hero__content { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } @media screen and (max-width:1100px) { .hero__content { font-size: 80px; font-size: 5rem; line-height: 1 } } @media screen and (max-width:800px) { .hero__content { letter-spacing: -2px; font-size: 60px; font-size: 3.75rem; line-height: 1 } } @media screen and (max-width:500px) { .hero__content { font-size: 48px; font-size: 3rem; line-height: 1 } } .block-container .hero__content { font-size: 64px; font-size: 4rem; line-height: 1 } @media screen and (max-width:800px) { .block-container .hero__content { font-size: 32px; font-size: 2rem; line-height: 1.2 } } .hero__content--blue { background-color: rgba(0,110,195,.6) } .hero__content--blue:after { right: -15px; bottom: -15px; border-bottom: 15.5px solid transparent; border-right: 15.5px solid transparent; -o-border-image: linear-gradient(165deg,rgba(0,110,195,0) 57%,rgba(0,110,195,.5)); border-image: linear-gradient(165deg,rgba(0,110,195,0) 57%,rgba(0,110,195,.5)); border-image-slice: 1 } .hero__content--blue:after,.hero__content--blue:before { content: ""; position: absolute; width: 60%; height: 80%; z-index: -1; display: block } .hero__content--blue:before { left: 0; top: -15px; border-top: 15.5px solid transparent; border-left: 15.5px solid transparent; -o-border-image: linear-gradient(340deg,rgba(0,110,195,0) 57%,rgba(0,110,195,.5)); border-image: linear-gradient(340deg,rgba(0,110,195,0) 57%,rgba(0,110,195,.5)); border-image-slice: 1 } .hero__content--inner { bottom: 25px; padding: 0 60px 0 120px; max-width: 75% } .hero__content--inner:before { border-left: none } @media screen and (max-width:1600px) { .hero__content--inner { padding-left: 60px } } @media screen and (max-width:1100px) { .hero__content--inner { padding-left: 30px } } @media screen and (max-width:550px) { .hero__content--inner { max-width: 85% } } @media screen and (max-width:400px) { .hero__content--inner { padding-left: 15px; padding-right: 30px } } .hero__content--outer { bottom: 25px; padding: 0 30px; margin-left: 30px; z-index: 1; max-width: 70%; min-width: 35% } .hero__content--outer:before { left: -15px } @media (min-width:1600px) { .hero__content--outer { padding: 0 80px } } @media screen and (max-width:1100px) { .hero__content--outer { margin-left: 0; max-width: 80% } } @media screen and (max-width:800px) { .hero__content--outer { font-size: 26px; font-size: 1.625rem; line-height: 1.2; bottom: 0 } } @media screen and (max-width:550px) { .hero__content--outer { font-size: 22px; font-size: 1.375rem; line-height: 1.2 } } @media screen and (max-width:500px) { .hero__content--outer { font-size: 22px; font-size: 1.375rem; line-height: 1.2 } } @media screen and (max-width:400px) { .hero__content--outer { margin-left: 15px; max-width: 100%; margin-right: 15px; padding: 0 } } .hero__content--outer-limited { max-width: 75% } @media screen and (max-width:800px) { .hero__content--outer-limited { font-size: 48px; font-size: 3rem; line-height: .9; padding-bottom: 10px } } @media screen and (max-width:500px) { .hero__content--outer-limited { max-width: 60%; padding-bottom: 0; margin-bottom: 30px } } .hero__content__title--small { font-size: 32px; font-size: 2rem; line-height: 1.2 } @media screen and (max-width:800px) { .hero__content__title--small { font-size: 30px; font-size: 1.875rem; line-height: 1.2 } } @media screen and (max-width:400px) { .hero__content__title--small { font-size: 22px; font-size: 1.375rem; line-height: 1.2 } } .hero__logo-cta { background: url("/images/dulwich-college-logo.png") no-repeat 50%; background-size: contain; display: block; width: 100%; max-width: 270px; outline: none; margin: 0; border: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none } .hero__logo-cta:before { content: ""; display: block; padding-bottom: 15.56% } .block-container { margin-top: 50px; margin-bottom: 50px } @media screen and (max-width:550px) { .block-container { margin-top: 30px; margin-bottom: 30px } } .block-container:last-child { margin-bottom: 50px } @media screen and (max-width:550px) { .block-container:last-child { margin-bottom: 30px } } .block-container table { width: 100%; border: 0 } .block-container table tr { display: block; margin-top: 15px } .block-container table td { width: 50%; border: 0 } .block-container table td:first-child { padding-right: 30px } .block-container table td:last-child { padding-left: 30px } @media screen and (max-width:800px) { .block-container table tr { padding: 0 } .block-container table td { width: 100%; display: block; margin-top: 15px; padding: 0 } .block-container table td:first-child,.block-container table td:last-child { padding: 0 } } .custom-bg-block { padding: 50px; position: relative } @media screen and (max-width:800px) { .custom-bg-block { padding: 50px 0 } } .custom-bg-block .triangle-label { position: absolute; -webkit-transition: .3s; transition: .3s } .custom-bg-block .triangle-label.right-top-label { top: 0; right: 0; border-right: 70px solid #fff; border-bottom: 70px solid transparent } .custom-bg-block .triangle-label.left-bottom-label { bottom: 0; left: 0; border-left: 70px solid #fff; border-top: 70px solid transparent } .slick-list { overflow: inherit } .slider-wrap-fixed { overflow-y: auto; overflow-x: hidden; height: 100% } /*.slider,.slider-wrap { position: relative; width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto }*/ .slider-wrap { margin-bottom: 50px } @media screen and (max-width:550px) { .slider-wrap { padding-bottom: 0; margin-bottom: 0 } } .slide { outline: none } .slider { padding: 0; margin-top: 0; margin-bottom: 0 } .slider .slide { display: none } .slider.slick-initialized .slide,.slider .slide:first-child { display: block } .slider__nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; /*height: 100%;*/ } .slider__count { display: inline-block; font-size: 20px; font-size: 1.25rem; line-height: 1; vertical-align: middle; text-align: center; min-width: 50px } .slider__count span{display: none} .slider__count,body.my .slider__count,body.zh .slider__count { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } .slick-next,.slick-prev { font-family: icomoon!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle; height: 30px; width: 30px; line-height: 30px; font-size: 0; text-align: center; cursor: pointer; padding: 0; border: none } .slick-next,.slick-next:focus,.slick-next:hover,.slick-prev,.slick-prev:focus,.slick-prev:hover { background: transparent; color: transparent; outline: none } /*.slick-next:hover:before,.slick-prev:hover:before { -webkit-transition: opacity .3s; transition: opacity .3s; opacity: .6 }*/ .slick-next.slick-disabled:before,.slick-prev.slick-disabled:before { cursor: not-allowed; opacity: .3 } /*.slick-next:before,.slick-prev:before { font-size: 28px; font-size: 1.75rem; line-height: 30px; color: #000 }*/ .slide__body { margin-top: 20px } .slide__img>img { margin-left: auto; margin-right: auto } .lightbox-lite--slider .lightbox-lite__box { height: 90%; width: 75%; padding: 40px 100px } @media screen and (max-width:1280px) { .lightbox-lite--slider .lightbox-lite__box { padding: 30px 85px; width: 80% } } @media screen and (max-width:800px) { .lightbox-lite--slider .lightbox-lite__box { padding: 30px 65px; width: 90% } } @media screen and (max-width:500px) { .lightbox-lite--slider .lightbox-lite__box { height: 80%; padding: 30px 40px; width: 95% } } .lightbox-lite--slider .slick-list { overflow: hidden } .lightbox-lite--slider .slider__next,.lightbox-lite--slider .slider__previous { height: 50px; width: 50px; line-height: 50px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .lightbox-lite--slider .slider__next:before,.lightbox-lite--slider .slider__previous:before { font-size: 48px; font-size: 3rem; line-height: 50px } @media screen and (max-width:800px) { .lightbox-lite--slider .slider__next,.lightbox-lite--slider .slider__previous { height: 40px; width: 40px; line-height: 40px } .lightbox-lite--slider .slider__next:before,.lightbox-lite--slider .slider__previous:before { font-size: 38px; font-size: 2.375rem; line-height: 40px } } @media screen and (max-width:500px) { .lightbox-lite--slider .slider__next,.lightbox-lite--slider .slider__previous { height: 30px; width: 30px; line-height: 30px } .lightbox-lite--slider .slider__next:before,.lightbox-lite--slider .slider__previous:before { font-size: 28px; font-size: 1.75rem; line-height: 30px } } .lightbox-lite--slider .slider__next { right: 15px } @media screen and (max-width:500px) { .lightbox-lite--slider .slider__next { right: 5px } } .lightbox-lite--slider .slider__previous { left: 15px } @media screen and (max-width:500px) { .lightbox-lite--slider .slider__previous { left: 5px } } .box { display: block; position: relative } .box--padded { padding: 60px 40px } @media screen and (max-width:550px) { .box--padded { padding: 40px 30px } } @media screen and (max-width:400px) { .box--padded { padding: 30px 15px } } .box--clickable { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: opacity .3s; transition: opacity .3s } .box--clickable>img { border: none; outline: none } .no-touchevents .box--clickable:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; -moz-opacity: .9; -khtml-opacity: .9; opacity: .9 }[class*=" box--aspect-"]:before,[class^=box--aspect-]:before { content: ""; display: block } .box--aspect-ratio-75:before { padding-bottom: 75% } @media screen and (max-width:550px) { .box--aspect-ratio-60--phablet:before { padding-bottom: 60% } } .box--image { background: #000 no-repeat 50%; background-size: cover } .box__content { position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; background: rgba(211,0,19,.7) } .box__copy { position: absolute; top: 50%; width: 100%; padding: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff } .box__title { text-transform: uppercase; letter-spacing: 1px } .box--red { color: #fff; background-color: rgba(217,39,31,.6); font-size: 40px; font-size: 2.5rem; line-height: 1.2; padding: 30px 80px; z-index: 1 } .box--red,body.my .box--red,body.zh .box--red { font-family: Avenir W01,Helvetica Neue,Helvetica,Arial,Zawgyi-One,sans-serif } @media screen and (max-width:800px) { .box--red { font-size: 34px; font-size: 2.125rem; line-height: 1.2 } } .box--red:after { right: -15px; bottom: -15px; border-bottom: 15.5px solid transparent; border-right: 15.5px solid transparent; -o-border-image: linear-gradient(165deg,hsla(2,53%,67%,0) 57%,rgba(217,39,31,.5)); border-image: linear-gradient(165deg,hsla(2,53%,67%,0) 57%,rgba(217,39,31,.5)); border-image-slice: 1 } .box--red:after,.box--red:before { content: ""; position: absolute; width: 60%; height: 80%; z-index: -1; display: block } .box--red:before { left: 0; top: -15px; border-top: 15.5px solid transparent; border-left: 15.5px solid transparent; -o-border-image: linear-gradient(340deg,hsla(2,53%,67%,0) 57%,rgba(217,39,31,.5)); border-image: linear-gradient(340deg,hsla(2,53%,67%,0) 57%,rgba(217,39,31,.5)); border-image-slice: 1; left: -15px } .box--centered { display: inline-block; margin: 0 auto } .flex-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; height: 100% } .flex-box__header { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto } .flex-box__content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto } .card-block { background: #fff; padding: 50px 50px 0 } @media screen and (max-width:1100px) { .card-block { padding: 30px 30px 0 } } @media screen and (max-width:400px) { .card-block { padding: 25px 25px 0 } } .card { display: block; position: relative; overflow: hidden; height: 100%; background: #fff; color: #3c3737 } .card--cta { padding-bottom: 40px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5); box-shadow: 0 0 4px rgba(0,0,0,.5) } @media screen and (max-width:1100px) { .card--cta { padding-bottom: 30px } } .card__header { display: block; overflow: hidden; min-height: 100px; text-align: center } .card__header--fixed { position: relative; background: #3c3737 } .card__header--fixed:before { content: ""; display: block; padding-bottom: 66% } .card__header__box { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .card__header__box__image { background: no-repeat 50%; background-size: cover; width: 100%; height: 100%; border: none; outline: none; -webkit-transition: all .3s; transition: all .3s; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transform: scale(1); transform: scale(1) } .no-touchevents a.card:hover .card__header__box__image,.no-touchevents a.card__header:hover .card__header__box__image { -webkit-transform: scale(1.1); transform: scale(1.1) } .card__image { border: none; outline: none; width: 100%; -webkit-transition: all .3s; transition: all .3s; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none } .no-touchevents a.card:hover .card__image,.no-touchevents a.card__header:hover .card__image { -webkit-transform: scale(1.1); transform: scale(1.1) } .card__body { border-top: 1px solid #ebebeb; padding: 20px; overflow: hidden } .card__body--compressed { padding: 10px 20px } .card__title { color: #3c3737; padding-bottom: 5px; font-size: 24px; font-size: 1.5rem; line-height: 1.1 } @media screen and (max-width:1600px) { .card__title { font-size: 22px; font-size: 1.375rem; line-height: 1.1 } } @media screen and (max-width:1100px) { .card__title { font-size: 20px; font-size: 1.25rem; line-height: 1.1 } } .card__subtitle { color: #3c3737; font-size: 16px; font-size: 1rem; line-height: 1.1 } .card__info { font-size: 12px; font-size: .75rem; line-height: 1; text-transform: uppercase; color: #d30013; padding-bottom: 3px } .card__cta { position: absolute; bottom: 20px; left: 20px; right: 20px } .card--big.card--cta { padding-bottom: 60px } @media screen and (max-width:1100px) { .card--big.card--cta { padding-bottom: 60px } } .visual-card { height: 450px; position: relative } .visual-card__box { height: 100%; padding: 30px } @media screen and (max-width:550px) { .visual-card__box { padding: 15px } } .visual-card__box-left { width: 45%; float: left; display: inline-block; position: relative; height: 100% } @media screen and (max-width:1100px) { .visual-card__box-left { width: 50% } } @media screen and (max-width:550px) { .visual-card__box-left { float: none; width: 100%; height: 80% } } .visual-card__box-right { width: 60%; float: left; display: inline-block; position: relative; height: 100% } @media screen and (max-width:1100px) { .visual-card__box-right { width: 50% } } @media screen and (max-width:550px) { .visual-card__box-right { float: none; width: 100%; height: 20% } } .visual-card__box-top { position: relative; height: 60%; padding: 30px 30px 0 } @media screen and (max-width:800px) { .visual-card__box-top { height: 65% } } @media screen and (max-width:550px) { .visual-card__box-top { padding: 15px 15px 0 } } .visual-card__box-bottom { position: relative; height: 40%; padding: 0 30px 30px } @media screen and (max-width:800px) { .visual-card__box-bottom { height: 35% } } @media screen and (max-width:550px) { .visual-card__box-bottom { padding: 0 15px 15px } } .visual-card__box-inner { position: relative; height: 100% } .visual-card__content--bottom { position: absolute; bottom: 0 } .visual-card__content--top { position: absolute; top: 0 } .visual-card__content--bottom-right { position: absolute; bottom: 0; right: 0 } @media screen and (max-width:550px) { .visual-card__content--bottom-right { right: inherit } } .visual-card--large { height: 550px; background-color: #fff } @media screen and (max-width:1100px) { .visual-card--large { height: 480px } } @media screen and (max-width:800px) { .visual-card--large { height: 700px } } @media screen and (max-width:550px) { .visual-card--large { height: 600px } } .visual-card--large__box-left { width: 60%; float: left; display: inline-block; position: relative; height: 100% } @media screen and (max-width:800px) { .visual-card--large__box-left { float: none; width: 100%; height: 65% } } @media screen and (max-width:500px) { .visual-card--large__box-left { height: 60% } } @media screen and (max-width:550px) { .visual-card--large__box-left { height: 55% } } .visual-card--large__box-right { width: 40%; float: left; display: inline-block; position: relative; height: 100%; padding: 30px 40px } @media screen and (max-width:800px) { .visual-card--large__box-right { float: none; width: 100%; height: 35% } } @media screen and (max-width:500px) { .visual-card--large__box-right { height: 40%; padding: 30px } } @media screen and (max-width:550px) { .visual-card--large__box-right { height: 45% } } .visual-card--large__content { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } @media screen and (max-width:800px) { .visual-card--large__content { top: inherit; bottom: 0; -webkit-transform: none; transform: none } } .h-card,.visual-card--large__box-inner { position: relative; height: 100% } .h-card { background: #fff; padding: 30px; min-height: 220px } .h-card--clickable { -webkit-transition: all .5s ease; transition: all .5s ease; border: 1px solid transparent } .no-touchevents .h-card--clickable:hover { border-color: #d30013 } .h-card__img { position: absolute; width: 140px; height: 160px } .h-card__copy { margin-left: 170px; padding-bottom: 30px } .h-card__copy__cta { position: absolute; bottom: 30px } .h-card__copy__title { color: #d30013; font-size: 24px; font-size: 1.5rem; line-height: 1.2; margin-bottom: 5px } @media screen and (max-width:800px) { .h-card__copy__title { font-size: 20px; font-size: 1.25rem; line-height: 1.2 } } @media screen and (max-width:400px) { .h-card__copy__title { font-size: 18px; font-size: 1.125rem; line-height: 1.2 } } .h-card__copy__subtitle { color: #3c3737; font-size: 16px; font-size: 1rem; line-height: 1.2; margin-bottom: 5px } @media screen and (max-width:400px) { .h-card__copy__subtitle { font-size: 14px; font-size: .875rem; line-height: 1.2 } } .visual-card__content { position: absolute; width: 100%; bottom: 30px; left: 30px } @media screen and (max-width:1280px) { .visual-card__content { font-size: 50px } } @media screen and (max-width:1100px) { .visual-card__content { font-size: 40px } } .visual-card__left { width: 45% } @media screen and (max-width:800px) { .visual-card__left { width: 100% } } .corner-radius { border-radius: 5px } .accordion-container:not(.accordion-first-child) { margin-top: 0 } .accordion { background: #fff; -webkit-box-shadow: 0 0 8px rgba(0,0,0,.5); box-shadow: 0 0 8px rgba(0,0,0,.5) } .accordion__tab { position: relative; padding: 30px 50px } @media screen and (max-width:1100px) { .accordion__tab { padding: 30px } } @media screen and (max-width:800px) { .accordion__tab { padding: 15px 30px } } @media screen and (max-width:550px) { .accordion__tab { padding: 15px } } .accordion__tab__content { position: relative; width: 100% } .accordion__tab__img { position: relative; width: 135px; height: 160px } .accordion__tab__img>img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); max-width: 135px; max-height: 160px } .accordion__tab__copy { padding-left: 30px; position: absolute; left: 135px; top: 15px; bottom: 15px; right: 0 } .accordion__tab__copy__title { font-size: 18px; font-size: 1.125rem; line-height: 1.2 } body.zh .accordion__tab__copy__title { font-size: 16px; font-size: 1rem; line-height: 1.2 } @media screen and (max-width:800px) { .accordion__tab__copy__title { font-size: 18px; font-size: 1.125rem; line-height: 1.2 } } .accordion__tab__copy__link { position: absolute; bottom: 0 } .accordion__tab__copy__link:after { content: "\F107" } .accordion.open .accordion__tab__copy__link:after { content: "\F106" } .accordion__tab__right { overflow: hidden; position: absolute; top: 0; bottom: 0; right: 0 } .accordion__content { overflow: hidden; max-height: 0; -webkit-transition: all .1s; transition: all .1s } .accordion.open .accordion__content { max-height: 2500px } @media screen and (max-width:550px) { .accordion.open .accordion__content { max-height: 3500px } } .accordion__content__inner { margin: 0 50px; padding: 50px 0 } @media screen and (max-width:1100px) { .accordion__content__inner { margin: 0 30px } } @media screen and (max-width:800px) { .accordion__content__inner { margin: 0 30px; padding: 30px 0 } } @media screen and (max-width:550px) { .accordion__content__inner { margin: 0 15px; padding: 15px 0 } } .accordion__content__inner__cta { display: block; float: right } @media screen and (max-width:550px) { .accordion__content__inner__cta { padding-bottom: 15px } } .accordion-container--basic { margin-bottom: 30px } .accordion-container--basic .accordion { border-bottom: 6px solid #d30013 } @media screen and (max-width:550px) { .accordion-container--basic .accordion__tab__img { display: none } } @media screen and (max-width:550px) { .accordion-container--basic .accordion__tab__copy { position: static; padding-left: 0 } } .accordion-container--basic .accordion__tab__copy__title { font-weight: 700 } @media screen and (max-width:550px) { .accordion-container--basic .accordion__tab__copy__title { padding-bottom: 30px } } @media screen and (max-width:550px) { .accordion-container--basic .accordion__tab__copy__link { position: static } } .accordion-container--basic .accordion__content__inner { border-top: 1px solid #ebebeb } .accordion-container--artistic { margin: 0 auto 30px } .accordion-container--artistic:first-child { margin-top: 5px } .accordion-container--artistic .accordion__tab__content { height: 155px; width: 67% } @media screen and (max-width:550px) { .accordion-container--artistic .accordion__tab__content { width: 100%; height: auto } } @media screen and (max-width:550px) { .accordion-container--artistic .accordion__tab__copy { position: static; padding-left: 0 } } .accordion-container--artistic .accordion__tab__copy { left: 0; top: 10px; bottom: 10px; padding-left: 0 } .accordion-container--artistic .accordion__tab__right { left: 65%; background: transparent 50%; background-size: cover } @media screen and (max-width:550px) { .accordion-container--artistic .accordion__tab__right { display: none } } .accordion-container--artistic .accordion__tab__right:before { content: ""; bottom: 3px; position: absolute; width: 60px; background: #fff; -webkit-transform: rotate(13deg); transform: rotate(13deg); top: -20px; left: -30px } .accordion-container--artistic .accordion__content__inner { border-top: 1px solid #ebebeb } .accordion-container--artistic .accordion__content { border-bottom: 0 solid transparent } .accordion-container--artistic .accordion__tab__copy__title { font-size: 1.8rem; font-weight: 700 } @media screen and (max-width:550px) { .accordion-container--artistic .accordion__tab__copy__title { font-size: 1.2rem; padding-bottom: 30px } } @media screen and (max-width:550px) { .accordion-container--artistic .accordion__tab__copy__link { position: static } } .accordion-container--artistic .accordion.open .accordion__content { border-bottom: 6px solid #d30013 } .accordion-group__tab { background: #fff; padding: 25px 110px } @media screen and (max-width:1100px) { .accordion-group__tab { padding: 25px 50px } } @media screen and (max-width:800px) { .accordion-group__tab { padding: 15px 30px } } @media screen and (max-width:550px) { .accordion-group__tab { padding: 15px } } .accordion-group__tab__link:after { font-size: 14px; font-size: .875rem; line-height: 1.2; content: "\F107" } .accordion-group.open .accordion-group__tab__link:after { content: "\F106" } .accordion-group__content { overflow: hidden; max-height: 0; -webkit-transition: all .3s; transition: all .3s } .accordion-group.open .accordion-group__content { max-height: 10000px } .accordion-container--minimal { margin-bottom: 2px } .accordion-container--minimal .accordion__tab__copy { position: static; padding-left: 0 } .accordion-container--minimal .accordion { -webkit-box-shadow: none; box-shadow: none; border: 0 } .accordion-container--minimal .accordion.open .accordion__toggle-icon:before { content: "\F068" } .accordion-container--minimal .accordion__tab { position: relative; background: #fff; padding: 2px 0; width: auto } .accordion-container--minimal .accordion__tab__content { width: 100%!important } .accordion-container--minimal .accordion__tab__right { background: #fff; left: 0; position: relative } .accordion-container--minimal .accordion__tab__right:after { color: #009dd5 } .accordion-container--minimal .accordion__tab__right:before { background: transparent; -webkit-transform: unset; transform: unset; position: relative } .accordion-container--minimal .accordion__content__inner { padding: 10px 0 } .accordion-container--minimal .accordion__toggle-icon:before { font-family: icomoon; font-style: normal; content: "\F067"; font-size: 18px; font-size: 1.125rem; line-height: 1.2; margin-right: 15px } @media screen and (max-width:800px) { .accordion-container--minimal .accordion__toggle-icon:before { font-size: 14px; font-size: .875rem; line-height: 1.2; margin-right: 10px } }[class*=" bg--cover"],[class^=bg--cover] { background: no-repeat 50%; background-size: cover } .bg--right { background-position: 100% } .bg--cover--job-openings { background-image: url("/images/backgrounds/homepage-block-job-openings.jpg") } .bg--cover--alumni { background-image: url("/images/backgrounds/homepage-block-alumni.jpg") } @media screen and (max-width:800px) { .bg--cover--alumni { margin-top: 15px } } .bg--cover--schools-map { background-image: url("/images/backgrounds/schools-map.jpg") } .bg--homepage-slide-1 { background-image: url("/images/backgrounds/homepage-slider-1.jpg") } .bg--careers-overview-slide-1 { background-image: url("/images/backgrounds/careers-overview-slide-1.jpg") } .bg--about-overview { background-image: url("/images/backgrounds/about-us-overview.jpg") } .bg--white { background: #fff } .bg-grey { background: #f0f0f0 } .bg-yellow { background: #ffb909 } .dropdown { position: relative; width: 95px; border: 1px solid transparent; padding: 15px!important; text-align: left; -webkit-transition: border-color .3s; transition: border-color .3s } .dropdown.open { border-color: #ebebeb } .dropdown-title { position: relative; width: 100%; display: inline-block } .dropdown-arrow { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); vertical-align: middle; opacity: 1; -webkit-transition: opacity .3s; transition: opacity .3s } .open .dropdown-arrow { opacity: 0 } .dropdown-list { position: absolute; left: -1px; right: -1px; z-index: 1000; display: none; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #fff; border: 1px solid transparent; border-top: none; -webkit-transition: border-color .3s; transition: border-color .3s } .open>.dropdown-list { display: block; border-color: #ebebeb } .dropdown-list a { font-size: 18px; font-size: 1.125rem; line-height: 1.2; text-transform: uppercase; color: #000; vertical-align: middle } @media screen and (max-width:1600px) { .dropdown-list a { font-size: 16px; font-size: 1rem; line-height: 1.2 } } @media screen and (max-width:1100px) { .dropdown-list a { font-size: 14px; font-size: .875rem; line-height: 1.2 } } .dropdown-list__item { padding: 10px 15px } .dropdown-list__item:hover a { color: #d30013 } .mega-menu { position: relative } @media screen and (max-width:1100px) { .mega-menu { display: none!important } } .mega-menu-arrow { vertical-align: middle; padding: 10px 5px; font-size: 18px; font-size: 1.125rem; line-height: 1 } @media screen and (max-width:1600px) { .mega-menu-arrow { font-size: 16px; font-size: 1rem; line-height: 1 } } .mega-menu-toggle { position: relative; font-size: 16px } .open>.mega-menu-toggle { color: #d30013 } .open>.mega-menu-toggle:before { opacity: 1 } .mega-menu-content { display: block; position: absolute; width: 650px; background: #fff; padding: 20px 0 10px; border-radius: 5px; -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.3); box-shadow: 0 2px 12px rgba(0,0,0,.3); left: -9999px; opacity: 0; z-index: -1; top: 200%; -webkit-transition: z-index 0s .3s,left 0s .3s,opacity .3s,top .3s; transition: z-index 0s .3s,left 0s .3s,opacity .3s,top .3s } body.school .mega-menu-content { padding: 20px 0 0 } @media screen and (max-width:1100px) { .mega-menu-content { display: none!important } } .mega-menu:hover>.mega-menu-content { opacity: 1; z-index: 1; top: 100%; left: auto; right: -10px; -webkit-transition: z-index 0s,left 0s,opacity .3s,top .3s; transition: z-index 0s,left 0s,opacity .3s,top .3s } .mega-menu-content:before { right: 40px; border: solid transparent; border-bottom-color: #fff; border-width: 10px; z-index: 2 } .mega-menu-content:after,.mega-menu-content:before { content: ""; bottom: 100%; position: absolute; margin-left: -36px } .mega-menu-content:after { right: 38px; border: solid transparent; border-bottom-color: #ddd; border-width: 12px; z-index: 1 } .mega-menu-list-title { text-transform: uppercase; border-bottom: 3px solid #d30013; margin-bottom: 10px; padding: 0 0 5px 20px } .mega-menu-list { margin: 0; padding: 0; list-style: none } .mega-menu-list__bottom { position: relative; width: 100%; margin-top: 10px; text-align: center; background-color: #f0f0f0; border-radius: 5px; padding: 5px } .mega-menu-list__bottom .mega-menu-list__item>a { position: relative; width: auto } .mega-menu-list__bottom .mega-menu-list__item i { font-size: 10px; position: absolute; top: 14px; right: -12px; -webkit-transition: right .3s; transition: right .3s } @media screen and (max-width:1280px) { .mega-menu-list__bottom .mega-menu-list__item i { top: 12px } } .mega-menu-list__bottom .mega-menu-list__item:hover i { right: -15px } .mega-menu-list__item { margin-right: 30px } .mega-menu-list__item>a { display: inline-block; width: 100%; padding: 10px 0 10px 20px; color: #3c3737; border-radius: 5px } .mega-menu-list__item>a:hover { background: #f0f0f0 } .mega-menu-list__item.menu-list-right { margin-left: -20px; margin-right: auto } .mega-menu-list__item.menu-list-right>a { padding: 10px 0 10px 20px } .quote { position: relative; width: 100%; overflow: auto } .quote__img { width: 25%; margin-right: 50px } @media screen and (max-width:800px) { .quote__img { width: 100%; text-align: center; margin-right: 0 } } .quote__img img { border-radius: 5px; -webkit-box-shadow: 0 0 8px rgba(0,0,0,.5); box-shadow: 0 0 8px rgba(0,0,0,.5) } .quote__copy { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 25%; padding: 0 20px; width: 75% } @media screen and (max-width:800px) { .quote__copy { position: static; top: 0; -webkit-transform: none; transform: none; left: 0; width: 100%; padding: 20px } } .quote__copy__source { margin-top: 20px; text-align: right } .panel { position: relative; overflow: hidden; background: #000 no-repeat 50%; background-size: cover } .panel:before { content: ""; display: block; padding-bottom: 80%; background: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.65)),color-stop(58%,transparent),to(transparent)); background: linear-gradient(0deg,rgba(0,0,0,.65) 0,transparent 58%,transparent) } @media screen and (max-width:1100px) { .panel:before { padding-bottom: 50% } } @media screen and (max-width:800px) { .panel:before { padding-bottom: 80% } } @media screen and (max-width:500px) { .panel:before { padding-bottom: 90% } } .panel__inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0 } .panel__content { max-height: 0; -webkit-transition: all .3s; transition: all .3s } .panel.open .panel__content { max-height: 220px } @media screen and (max-width:1280px) { .panel.open .panel__content { max-height: 180px } } @media screen and (max-width:800px) { .panel.open .panel__content { max-height: 200px } } @media screen and (max-width:500px) { .panel.open .panel__content { max-height: 140px } } .panel.open.opened .panel__content { overflow: auto } .panel__tab { position: absolute; bottom: 0; left: 0; right: 0; -webkit-transition: all .3s; transition: all .3s } .panel__tab__top { padding: 10px 40px } @media screen and (max-width:550px) { .panel__tab__top { padding: 10px 20px } } .panel__tab__bottom { padding: 10px 40px; border-top: 2px solid #fff; background-color: rgba(211,0,19,.6) } @media screen and (max-width:550px) { .panel__tab__bottom { padding: 10px 20px } } .panel.open .panel__tab__bottom { padding-bottom: 20px } .panel__toggle { color: #fff; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-transform: uppercase } .panel__toggle:after { font-family: icomoon!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: middle; padding-left: 10px; font-size: 20px; font-size: 1.25rem; line-height: 1; content: "\E90E"; font-weight: 700 } .panel.open .panel__toggle:after { content: "\E90F" } .panel__content__subtitle { padding-right: 35px } .map { background: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .map,.map__container { position: relative } .map__img { width: 100% } .map__content { padding: 50px; height: 100% } @media screen and (max-width:1100px) { .map__content { padding: 30px 25px } } @media screen and (max-width:800px) { .map__content { position: relative; padding: 30px 0 } } @media screen and (max-width:550px) { .map__content { padding: 25px 0 } } .map__content__row { border-left: 5px solid #d30013; padding-left: 25px } .map__content__row:not(:last-child) { margin-bottom: 30px } @media screen and (max-width:550px) { .map__content__row:first-child { margin-top: 30px } } @media screen and (max-width:550px) { .map__content__row { border-top: 5px solid #d30013; border-left: none; padding: 20px 0 0 } } .map__content__img { display: block } .map__reset { position: absolute; top: 5px; right: 5px; z-index: 1; font-size: 16px; line-height: 16px; color: #d30013; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -moz-opacity: .6; -khtml-opacity: .6; opacity: .6; padding: 15px; -webkit-transition: all .3s; transition: all .3s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } .no-touchevents .map__reset:active,.no-touchevents .map__reset:hover { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) } .map__marker { display: block; position: absolute; background: #fff; border-radius: 100%; width: 10px; height: 10px } .map__marker__copy { background: #009dd5; color: #fff; padding: 2px 10px; position: absolute; bottom: 15px; border: 2px solid #009dd5; -webkit-transition: all .3s; transition: all .3s; white-space: nowrap } @media screen and (max-width:1280px) { .map__marker__copy { font-size: 14px; font-size: .875rem; line-height: 1.4; padding: 1px 10px } } @media screen and (max-width:550px) { .map__marker__copy { font-size: 12px; font-size: .75rem; line-height: 1.3; padding: 0 5px } } .map__marker.is-active>.map__marker__copy { background: #fff; color: #009dd5 } .map__marker.is-active>.map__marker__copy:after { border-top-color: #fff; border-bottom-color: #fff } .map__marker--left .map__marker__copy { left: 5px } .map__marker--right .map__marker__copy { right: 5px } .map__marker__copy:after,.map__marker__copy:before { content: ""; display: block; top: 100%; position: absolute } .map__marker__copy:before { border-top: 13px solid #009dd5 } .map__marker__copy:after { border-top: 9px solid #009dd5; -webkit-transition: all .3s; transition: all .3s } .map__marker--bottom .map__marker__copy { top: 15px; bottom: inherit } .map__marker--bottom .map__marker__copy:before { bottom: 100%; top: auto; border-bottom: 13px solid #009dd5; border-top: none } .map__marker--bottom .map__marker__copy:after { bottom: 100%; top: auto; border-bottom: 9px solid #009dd5; border-top: none } .map__marker--left .map__marker__copy:before { border-right: 14px solid transparent; left: -2px } .map__marker--left .map__marker__copy:after { border-right: 10px solid transparent; left: 0 } .map__marker--right .map__marker__copy:before { border-left: 14px solid transparent; right: -2px } .map__marker--right .map__marker__copy:after { border-left: 10px solid transparent; right: 0 } .no-touchevents .map__marker:active .map__marker__copy,.no-touchevents .map__marker:hover .map__marker__copy { background: #fff; color: #009dd5 } .no-touchevents .map__marker:active .map__marker__copy:after,.no-touchevents .map__marker:hover .map__marker__copy:after { border-top-color: #fff; border-bottom-color: #fff } .map__marker--shanghai { top: 24%; right: 26.5% } .map__marker--beijing { top: 6.5%; right: 31.5% } .map__marker--seoul { top: 12%; right: 18% } .map__marker--suzhou { top: 22%; right: 28% } .map__marker--zhuhai { top: 40%; right: 35% } .map__marker--yangon { top: 50.9%; right: 57.5% } .map__marker--singapore { top: 80%; right: 48.7% } body.zh .school-map-title.text--serif--xxl,body.zh .school-map-title.text--serif--xxl--emph,body.zh .school-map-title.text--xxl,body.zh .school-map-title.text-serif--white--xxl { font-size: 88px; font-size: 5.5rem; line-height: .9 } @media screen and (max-width:1100px) { body.zh .school-map-title.text--serif--xxl,body.zh .school-map-title.text--serif--xxl--emph,body.zh .school-map-title.text--xxl,body.zh .school-map-title.text-serif--white--xxl { font-size: 72px; font-size: 4.5rem; line-height: .9 } } @media screen and (max-width:800px) { body.zh .school-map-title.text--serif--xxl,body.zh .school-map-title.text--serif--xxl--emph,body.zh .school-map-title.text--xxl,body.zh .school-map-title.text-serif--white--xxl { font-size: 64px; font-size: 4rem; line-height: .9 } } @media screen and (max-width:500px) { body.zh .school-map-title.text--serif--xxl,body.zh .school-map-title.text--serif--xxl--emph,body.zh .school-map-title.text--xxl,body.zh .school-map-title.text-serif--white--xxl { font-size: 48px; font-size: 3rem; line-height: .9 } } @media screen and (max-width:400px) { body.zh .school-map-title.text--serif--xxl,body.zh .school-map-title.text--serif--xxl--emph,body.zh .school-map-title.text--xxl,body.zh .school-map-title.text-serif--white--xxl { font-size: 40px; font-size: 2.5rem; line-height: .9 } } .content-container-bottom { padding: 20px; position: absolute; bottom: 0; width: 100% } .graduate-worldwise-container .hero--video:before { padding-bottom: 60% } .graduate-worldwise .title-text { margin-bottom: 10px } @media (max-width:1280px) { .graduate-worldwise .title-text { font-size: 28px; font-size: 1.75rem; line-height: 1 } } @media (max-width:991px) { .graduate-worldwise .title-text { font-size: 20px; font-size: 1.25rem; line-height: 1 } } @media screen and (max-width:800px) { .graduate-worldwise .title-text { font-size: 24px; font-size: 1.5rem; line-height: 1 } } @media screen and (max-width:400px) { .graduate-worldwise .title-text { font-size: 24px; font-size: 1.5rem; line-height: 1 } } .graduate-worldwise .tag-text { margin-bottom: 10px } .graduate-worldwise .read-more-text { font-size: 14px; font-size: .875rem; line-height: 1.2 } .title-big-container .title-description-right { position: absolute; bottom: 0; width: 100%; left: 20px } @media screen and (max-width:800px) { .title-big-container .title-description-right { position: relative; top: 15px; left: 0 } } .numbers-container .content-center { padding: 0 20px; position: relative; text-align: center; margin: auto } @media screen and (max-width:800px) { .numbers-container { margin-bottom: 15px } } .numbers-container .title-text { margin-bottom: 10px } @media screen and (max-width:1100px) { .numbers-container .title-text { font-size: 40px; font-size: 2.5rem; line-height: 1 } } @media screen and (max-width:800px) { .numbers-container .title-text { font-size: 40px; font-size: 2.5rem; line-height: 1 } } @media screen and (max-width:400px) { .numbers-container .title-text { font-size: 40px; font-size: 2.5rem; line-height: 1 } } .numbers-container .sub-title { font-size: 24px; font-size: 1.5rem; line-height: 1.2 } @media screen and (max-width:1280px) { .numbers-container .sub-title { font-size: 18px; font-size: 1.125rem; line-height: 1.2 } } body.zh .numbers-container .sub-title { font-size: 20.8px; font-size: 1.3rem; line-height: 1.2 } @media screen and (max-width:1100px) { .news-events-container .title-text { font-size: 20px; font-size: 1.25rem; line-height: 1 } } @media screen and (max-width:800px) { .news-events-container .title-text { font-size: 24px; font-size: 1.5rem; line-height: 1.2 } } .news-events-container .title-text-small { font-size: 24px; font-size: 1.5rem; line-height: 1 } @media screen and (max-width:1100px) { .news-events-container .title-text-small { font-size: 20px; font-size: 1.25rem; line-height: 1 } } @media screen and (max-width:800px) { .news-events-container .title-text-small { font-size: 24px; font-size: 1.5rem; line-height: 1.2 } } .news-events-container .events-container { width: 100% } .news-events-container .events-container .date-container { width: 140px; float: left; position: relative } @media screen and (max-width:500px) { .news-events-container .events-container .date-container { width: 120px } } .news-events-container .events-container .date-container:after { content: ""; position: absolute; right: 0; top: 2px; height: 50px; border-right: 1px solid #3c3737 } @media screen and (max-width:800px) { .news-events-container .events-container .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex } } .news-events-container .events-container .flex-container .flex { margin-left: 40px } @media screen and (max-width:800px) { .news-events-container .events-container .flex-container .flex { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: 0; margin-left: 30px } } @media screen and (max-width:500px) { .news-events-container .events-container .flex-container .flex { margin-left: 20px } } .news-events-container .events-container a.link--blue { position: relative; display: inline-block; margin-top: 5px } .js-news-events-slick .news-events-container .events-container a.link--blue .slick-arrow.slick-next,.js-news-events-slick .news-events-container .events-container a.link--blue .slick-arrow.slick-prev,.news-events-container .events-container a.link--blue .icon-chevron-left,.news-events-container .events-container a.link--blue .icon-chevron-right,.news-events-container .events-container a.link--blue .js-news-events-slick .slick-arrow.slick-next,.news-events-container .events-container a.link--blue .js-news-events-slick .slick-arrow.slick-prev,.news-events-container .events-container a.link--blue .link--emph:before { position: absolute; right: -15px; top: 4.5px; font-size: 12px; font-weight: 800; -webkit-transition: right .3s; transition: right .3s } .js-news-events-slick .news-events-container .events-container a.link--blue:hover .slick-arrow.slick-next,.js-news-events-slick .news-events-container .events-container a.link--blue:hover .slick-arrow.slick-prev,.news-events-container .events-container a.link--blue:hover .icon-chevron-left,.news-events-container .events-container a.link--blue:hover .icon-chevron-right,.news-events-container .events-container a.link--blue:hover .js-news-events-slick .slick-arrow.slick-next,.news-events-container .events-container a.link--blue:hover .js-news-events-slick .slick-arrow.slick-prev,.news-events-container .events-container a.link--blue:hover .link--emph:before { right: -25px } @media screen and (max-width:800px) { .news-events-container .events-container { width: 100% } } .js-news-events-slick .slick-arrow { position: absolute; top: 48%; z-index: 1; background: hsla(0,0%,100%,.8); border-radius: 50%; border: 1px solid #3c3737 } .js-news-events-slick .slick-arrow:before { font-size: 12px; font-weight: 800; position: absolute; left: 10px; top: -1px } .js-news-events-slick .slick-arrow.slick-next { right: -15px } .js-news-events-slick .slick-arrow.slick-next:before { left: 12px } .js-news-events-slick .slick-arrow.slick-prev { left: -15px } .js-news-events-slick .slick-arrow.slick-prev:before { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .school-cta-container { width: 80% } .school-cta-container .cta-icon { min-width: 100px } .school-cta-container .cta-icon img { height: 150px } @media screen and (max-width:800px) { .school-cta-container .cta-icon img { height: 120px } } @media screen and (max-width:500px) { .school-cta-container .cta-icon img { height: 70px } } @media screen and (max-width:500px) { .school-cta-container .cta-icon { min-width: 60px } } .school-cta-container .flex { padding: 15px } @media screen and (max-width:1100px) { .school-cta-container { width: 100% } } @media screen and (max-width:800px) { .school-cta-container .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100% } .school-cta-container .flex-container .flex { width: 20%; float: left; min-width: 90px; padding: 15px 0; margin: 0 auto } } @media screen and (max-width:500px) { .school-cta-container .flex-container .flex { min-width: 70px } } .footer-cta-icons .school-cta-container .cta-icon { min-width: 100px } .footer-cta-icons .school-cta-container .cta-icon img { height: 120px } @media screen and (max-width:800px) { .footer-cta-icons .school-cta-container .cta-icon img { height: 120px } } @media screen and (max-width:500px) { .footer-cta-icons .school-cta-container .cta-icon img { height: 70px } } @media screen and (max-width:500px) { .footer-cta-icons .school-cta-container .cta-icon { min-width: 60px } } @media screen and (max-width:500px) { .footer-cta-icons .school-cta-container { padding: 0!important } } .school-cta-container .footer-cta-icons { max-width: 600px; margin: 0 auto } @media screen and (max-width:800px) { .school-cta-container { width: 100% } } .scroll-spy-container { position: absolute; float: left; top: 130px; width: 300px; -webkit-transition: all .3s; transition: all .3s } @media screen and (max-width:1280px) { .scroll-spy-container { width: 200px } } .hero { position: relative; background: #000 no-repeat 50%; background-size: cover; width: 100%; }