@charset "UTF-8"; @font-face { font-family: 'DIN'; src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{font-size:62.5%;box-sizing:border-box}*,::before,::after{box-sizing:inherit} body{font-weight:400;line-height:1;text-rendering:optimizeLegibility;word-wrap:break-word;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:none} body,input,button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}img,video{max-width:100%;height:auto}div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0}h1,h2,h3,h4,h5,h6{-webkit-font-variant-ligatures:common-ligatures;-moz-font-variant-ligatures:common-ligatures;font-variant-ligatures:common-ligatures;text-rendering:optimizeLegibility}em,i{font-style:italic;line-height:inherit}strong,b{font-weight:700;line-height:inherit}small{font-size:60%;line-height:inherit}ol,ul{list-style:none}li{display:block}a{text-decoration:none;line-height:inherit}a img{border:none}fieldset{margin:0;padding:0}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none}.row{width:94%;max-width:1170px;margin:0 auto}.row:before,.row:after{content:"";display:table}.row:after{clear:both}.row .row{width:auto;max-width:none;margin-left:-20px;margin-right:-20px}[class*="col-"],.bgrid{float:left}[class*="col-"] + [class*="col-"].end{float:right}[class*="col-"]{padding:0 20px}.col-one{width:8.33333%}.col-two,.col-1-6{width:16.66667%}.col-three,.col-1-4{width:25%}.col-four,.col-1-3{width:33.33333%}.col-five{width:41.66667%}.col-six,.col-1-2{width:50%}.col-seven{width:58.33333%}.col-eight,.col-2-3{width:66.66667%}.col-nine,.col-3-4{width:75%}.col-ten,.col-5-6{width:83.33333%}.col-eleven{width:91.66667%}.col-twelve,.col-full{width:100%}@media screen and (max-width:1024px){.row .row{margin-left:-18px;margin-right:-18px}[class*="col-"]{padding:0 18px}}@media screen and (max-width:768px){.row{width:auto;padding-left:30px;padding-right:30px}.row .row{padding-left:0;padding-right:0;margin-left:-15px;margin-right:-15px}[class*="col-"]{padding:0 15px}.tab-1-4{width:25%}.tab-1-3{width:33.33333%}.tab-1-2{width:50%}.tab-2-3{width:66.66667%}.tab-3-4{width:75%}.tab-full{width:100%}}@media screen and (max-width:600px){.row{padding-left:25px;padding-right:25px}.row .row{margin-left:-10px;margin-right:-10px}[class*="col-"]{padding:0 10px}.mob-1-4{width:25%}.mob-1-2{width:50%}.mob-3-4{width:75%}.mob-full{width:100%}}@media screen and (max-width:400px){.row .row{padding-left:0;padding-right:0;margin-left:0;margin-right:0}[class*="col-"]{width:100%!important;float:none!important;clear:both!important;margin-left:0;margin-right:0;padding:0}[class*="col-"] + [class*="col-"].end{float:none}}[class*="block-"]:before,[class*="block-"]:after{content:"";display:table}[class*="block-"]:after{clear:both}.block-1-6 .bgrid{width:16.66667%}.block-1-4 .bgrid{width:25%}.block-1-3 .bgrid{width:33.33333%}.block-1-2 .bgrid{width:50%}.block-1-6 .bgrid:nth-child(6n+1),.block-1-4 .bgrid:nth-child(4n+1),.block-1-3 .bgrid:nth-child(3n+1),.block-1-2 .bgrid:nth-child(2n+1){clear:both}@media screen and (max-width:1024px){.block-s-1-6 .bgrid{width:16.66667%}.block-s-1-4 .bgrid{width:25%}.block-s-1-3 .bgrid{width:33.33333%}.block-s-1-2 .bgrid{width:50%}.block-s-full .bgrid{width:100%;clear:both}[class*="block-s-"] .bgrid:nth-child(n){clear:none}.block-s-1-6 .bgrid:nth-child(6n+1),.block-s-1-4 .bgrid:nth-child(4n+1),.block-s-1-3 .bgrid:nth-child(3n+1),.block-s-1-2 .bgrid:nth-child(2n+1){clear:both}}@media screen and (max-width:768px){.block-tab-1-6 .bgrid{width:16.66667%}.block-tab-1-4 .bgrid{width:25%}.block-tab-1-3 .bgrid{width:33.33333%}.block-tab-1-2 .bgrid{width:50%}.block-tab-full .bgrid{width:100%;clear:both}[class*="block-tab-"] .bgrid:nth-child(n){clear:none}.block-tab-1-6 .bgrid:nth-child(6n+1),.block-tab-1-4 .bgrid:nth-child(4n+1),.block-tab-1-3 .bgrid:nth-child(3n+1),.block-tab-1-2 .bgrid:nth-child(2n+1){clear:both}}@media screen and (max-width:600px){.block-mob-1-6 .bgrid{width:16.66667%}.block-mob-1-4 .bgrid{width:25%}.block-mob-1-3 .bgrid{width:33.33333%}.block-mob-1-2 .bgrid{width:50%}.block-mob-full .bgrid{width:100%;clear:both}[class*="block-mob-"] .bgrid:nth-child(n){clear:none}.block-mob-1-6 .bgrid:nth-child(6n+1),.block-mob-1-4 .bgrid:nth-child(4n+1),.block-mob-1-3 .bgrid:nth-child(3n+1),.block-mob-1-2 .bgrid:nth-child(2n+1){clear:both}}@media screen and (max-width:400px){.stack .bgrid{width:100%!important;float:none!important;clear:both!important;margin-left:0;margin-right:0}}.group:before,.group:after{content:"";display:table}.group:after{clear:both}.hide{display:none}.invisible{visibility:hidden}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.overflow-hidden{overflow:hidden}.remove-bottom{margin-bottom:0}.half-bottom{margin-bottom:1.5rem!important}.add-bottom{margin-bottom:3rem!important}.no-border{border:none}.full-width{width:100%}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right} .pull-left{float:left}.pull-right{float:right}.align-center{margin-left:auto;margin-right:auto;text-align:center} .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; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 20%, 53%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.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 { 20%, 53%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.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 { 50%, from, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 50%, from, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 11.1%, from, to { -webkit-transform: none; transform: none; } 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(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 11.1%, from, to { -webkit-transform: none; transform: none; } 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(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 20%, 40%, 60%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 20%, 40%, 60%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } @keyframes bounceInDown { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } @keyframes bounceInLeft { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.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: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: none; transform: none; } } @keyframes bounceInRight { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -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 { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { 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 { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { 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 { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.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 { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.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 { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -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 { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -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 { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -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: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -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: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { 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 { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 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: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 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-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.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(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.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(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* --------------------------------------------------------- * 02. * Lightgallery.css * --------------------------------------------------------- */ @font-face { font-family: 'lg'; src: url("../fonts/lightgallery/lg.eot?n1z373"); src: url("../fonts/lightgallery/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lightgallery/lg.woff?n1z373") format("woff"), url("../fonts/lightgallery/lg.ttf?n1z373") format("truetype"), url("../fonts/lightgallery/lg.svg?n1z373#lg") format("svg"); font-weight: normal; font-style: normal; } .lg-icon { font-family: 'lg'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: #FFF; } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-next:before { content: "\e095"; } .lg-actions .lg-prev { left: 20px; } .lg-actions .lg-prev:after { content: "\e094"; } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-moz-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-ms-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-moz-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-ms-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; -o-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; -o-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 1082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .lg-download{ display:none!important } .lg-toolbar .lg-icon:hover { color: #FFF; } .lg-toolbar .lg-close:after { content: "\e070"; } .lg-toolbar .lg-download:after { content: "\e0f2"; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #0D0A0A; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: left; overflow: hidden; height: 100%; border: 2px solid #FFF; border-radius: 4px; margin-bottom: 5px; } @media (min-width:1025px) { .lg-outer .lg-thumb-item { -webkit-transition: border-color 0.25s ease; -o-transition: border-color 0.25s ease; transition: border-color 0.25s ease; } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #a90707; } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { -webkit-transition: bottom 0.25s ease; -o-transition: bottom 0.25s ease; transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { background-color: #0D0A0A; border-radius: 2px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; } .lg-outer .lg-toogle-thumb:after { content: "\e1ff"; } .lg-outer .lg-toogle-thumb:hover { color: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("../images/lightgallery/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #a90707; height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transition-duration: 0s; transition-duration: 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; -webkit-transition: box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .group { *zoom: 1; } .group:before, .group:after { display: table; content: ""; line-height: 0; } .group:after { clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { background: url("../images/lightgallery/loading.gif") no-repeat scroll center center transparent; display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { -webkit-transition: none 0s ease 0s !important; -moz-transition: none 0s ease 0s !important; -o-transition: none 0s ease 0s !important; transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { -webkit-transition: opacity 0.1s ease 0s; -moz-transition: opacity 0.1s ease 0s; -o-transition: opacity 0.1s ease 0s; transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } /*# sourceMappingURL=lightgallery.css.map */ @import url("font-awesome/css/font-awesome.min.css"); @import url("windows10/windows10.css"); /* =================================================================== * 02. base style overrides - (_document-setup) * * ------------------------------------------------------------------- */ html { font-size: 10px; } @media only screen and (max-width:1024px) { html { font-size: 9.375px; } } @media only screen and (max-width:768px) { html { font-size: 10px; } } @media only screen and (max-width:400px) { html { font-size: 9.375px; } } html, body { height: 100%; } body { background: #050505; font-family: 'open sans',arial,helvetica; font-size: 1.6rem; line-height: 3rem; color: #353535; margin: 0; padding: 0; } /* ------------------------------------------------------------------- * links - (_document-setup) * ------------------------------------------------------------------- */ a, a:visited { color: #007BBE; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover, a:focus { color: #000000; } /* =================================================================== * 03. typography & general theme styles - (_document-setup.scss) * * ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h01, .h02, .h03, .h04, .h05, .h06 { font-family: 'DIN',arial,helvetica; color: #151515; font-style: normal; text-rendering: optimizeLegibility; margin-bottom: 2.1rem; } h3, .h03, h4, .h04 { margin-bottom: 1.8rem; } h5, .h05, h6, .h06 { margin-bottom: 1.2rem; } h1, .h01 { font-size: 3.1rem; line-height: 1.35; letter-spacing: -.1rem; } @media only screen and (max-width:600px) { h1, .h01 { font-size: 2.6rem; letter-spacing: -.07rem; } } h2, .h02 { font-size: 2.4rem; line-height: 1.25; } h3, .h03 { font-size: 2rem; line-height: 1.5; } h4, .h04 { font-size: 1.7rem; line-height: 1.76; } h5, .h05 { font-size: 1.4rem; line-height: 1.7; text-transform: uppercase; letter-spacing: .2rem; } h6, .h06 { font-size: 1.3rem; line-height: 1.85; text-transform: uppercase; letter-spacing: .2rem; } p img { margin: 0; } p.lead { font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 2rem; line-height: 1.8; color: #4f4f4f; margin-bottom: 3.6rem; } @media only screen and (max-width:768px) { p.lead { font-size: 1.8rem; } } em, i, strong, b { font-size: 1.6rem; line-height: 3rem; font-style: normal; font-weight: normal; } em, i { font-family: 'open sans',arial; } strong, b { font-family: 'open sans',arial; } small { font-size: 1.1rem; line-height: inherit; } blockquote { margin: 3rem 0; padding-left: 5rem; position: relative; } blockquote:before { content: "\201C"; font-size: 10rem; line-height: 0px; margin: 0; color: rgba(0, 0, 0, 0.3); font-family: arial, sans-serif; position: absolute; top: 3.6rem; left: 0; } blockquote p { font-family: 'open sans',arial; font-style: italic; padding: 0; font-size: 1.9rem; line-height: 1.895; } blockquote cite { display: block; font-size: 1.3rem; font-style: normal; line-height: 1.615; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #4f4f4f; border: none; } abbr { font-family: 'open sans',arial; font-variant: small-caps; text-transform: lowercase; letter-spacing: .05rem; color: #4f4f4f; } var, kbd, samp, code, pre { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; } pre { padding: 2.4rem 3rem 3rem; background: #F1F1F1; } code { font-size: 1.4rem; margin: 0 .2rem; padding: .3rem .6rem; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 3px; } pre > code { display: block; white-space: pre; line-height: 2; padding: 0; margin: 0; } pre.prettyprint > code { border: none; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } mark { background: #FFF49B; color: #000; } hr { border: solid #d2d2d2; border-width: 1px 0 0; clear: both; margin: 2.4rem 0 1.5rem; height: 0; } /* ------------------------------------------------------------------- * Lists - (_document-setup.scss) * ------------------------------------------------------------------- */ ol { list-style: decimal; } ul { list-style: disc; } li { display: list-item; } ol, ul { margin-left: 1.7rem; } ul li { padding-left: .4rem; } ul ul, ul ol, ol ol, ol ul { margin: .6rem 0 .6rem 1.7rem; } ul.disc li { display: list-item; list-style: none; padding: 0 0 0 .8rem; position: relative; } ul.disc li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #007BBE; position: absolute; left: -17px; top: 11px; vertical-align: middle; } dt { margin: 0; color: #007BBE; } dd { margin: 0 0 0 2rem; } /* ------------------------------------------------------------------- * Spacing - (_document-setup) * ------------------------------------------------------------------- */ button, .button { margin-bottom: 1.2; } fieldset { margin-bottom: 1.5rem; } input, textarea, select, pre, blockquote, figure, table, p, ul, ol, dl, form, .fluid-video-wrapper, .ss-custom-select { margin-bottom: 3rem; } /* ------------------------------------------------------------------- * floated image - (_document-setup) * ------------------------------------------------------------------- */ img.pull-right { margin: 1.5rem 0 0 3rem; } img.pull-left { margin: 1.5rem 3rem 0 0; } /* ------------------------------------------------------------------- * block grids paddings * ------------------------------------------------------------------- */ .bgrid { padding: 0 20px; } @media only screen and (max-width:1024px) { .bgrid { padding: 0 18px; } } @media only screen and (max-width:768px) { .bgrid { padding: 0 15px; } } @media only screen and (max-width:600px) { .bgrid { padding: 0 10px; } } @media only screen and (max-width:400px) { .bgrid { padding: 0; } } /* ------------------------------------------------------------------- * tables - (_document-setup.scss) * ------------------------------------------------------------------- */ table { border-width: 0; width: 100%; max-width: 100%; font-family: 'DIN',arial,helvetica; } th, td { padding: 1.5rem 3rem; text-align: left; border-bottom: 1px solid #E8E8E8; } th { color: #151515; font-family: 'DIN',arial,helvetica; } td { line-height: 1.5; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------- * pace.js styles - minimal - (_document-setup.scss) * ------------------------------------------------------------------- */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #FFFFFF; position: fixed; z-index: 900; top: 0; right: 100%; width: 100%; height: 6px; } /* =================================================================== * 04. preloader - (_preloader-1.scss) * * ------------------------------------------------------------------- */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #050505; z-index: 800; height: 100%; width: 100%; } .no-js #preloader, .oldie #preloader { display: none; } #loader { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0; } #loader:before { content: ""; border-top: 6px solid rgba(255, 255, 255, 0.1); border-right: 6px solid rgba(255, 255, 255, 0.1); border-bottom: 6px solid rgba(255, 255, 255, 0.1); border-left: 6px solid #FFFFFF; -webkit-animation: load 1.1s infinite linear; animation: load 1.1s infinite linear; display: block; border-radius: 50%; width: 60px; height: 60px; } @-webkit-keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* =================================================================== * 04. forms - (_forms.scss) * * ------------------------------------------------------------------- */ fieldset { border: none; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { display: block; height: 6rem; padding: 1.5rem 0; border: 0; outline: none; vertical-align: middle; color: #313131; font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 1.5rem; line-height: 3rem; max-width: 100%; background: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.3); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ss-custom-select { position: relative; padding: 0; } .ss-custom-select select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; margin: 0; line-height: 3rem; vertical-align: middle; } .ss-custom-select select option { padding-left: 2rem; padding-right: 2rem; } .ss-custom-select select::-ms-expand { display: none; } .ss-custom-select::after { content: '\f0d7'; font-family: 'FontAwesome'; position: absolute; top: 50%; right: 1.5rem; margin-top: -10px; bottom: auto; width: 20px; height: 20px; line-height: 20px; font-size: 18px; text-align: center; pointer-events: none; color: #252525; } /* IE9 and below */ .oldie .ss-custom-select::after { display: none; } textarea { min-height: 25rem; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { color: #1c0d02; border-bottom: 1px solid #007BBE; } label, legend { font-family: 'DIN',arial,helvetica; font-size: 1.4rem; margin-bottom: .6rem; color: #020202; display: block; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-text { display: inline-block; margin-left: 1rem; font-family: 'DIN',arial,helvetica; line-height: inherit; } label > input[type="checkbox"], label > input[type="radio"] { margin: 0; position: relative; top: .15rem; } /* ----------------------------------------------------------- * Style Placeholder Text * ----------------------------------------------------------- */ ::-webkit-input-placeholder { color: #828282; } :-moz-placeholder { color: #828282; /* Firefox 18- */ } ::-moz-placeholder { color: #828282; /* Firefox 19+ */ } :-ms-input-placeholder { color: #828282; } .placeholder { color: #828282 !important; } /* ----------------------------------------------------------- * Change Autocomplete styles in Chrome * ----------------------------------------------------------- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: none; -webkit-text-fill-color: #007BBE; transition: background-color 5000s ease-in-out 0s; } /* =================================================================== * 05. buttons - (_button-essentials.scss) * * ------------------------------------------------------------------- */ .button, a.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font-family:'open sans', arial,helvetica; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .3rem; height: 5.4rem; line-height: 5.4rem; padding: 0 3rem; margin: 0 .3rem 1.2rem 0; background: #808080; color: #222222; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; border: none; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .button:hover, a.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { background: #737373; color: #000000; outline: 0; } .button.button-primary, a.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { background: #151515; color: #FFFFFF; } .button.button-primary:hover, a.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { background: #030303; } button.full-width, .button.full-width { width: 100%; margin-right: 0; } button.medium, .button.medium { height: 5.7rem !important; line-height: 5.7rem !important; padding: 0 1.8rem !important; } button.large, .button.large { height: 6rem !important; line-height: 6rem !important; padding: 0rem 3rem !important; } button.stroke, .button.stroke { background: transparent !important; border: 3px solid #313131; line-height: 4.8rem; } button.stroke.medium, .button.stroke.medium { line-height: 5.1rem !important; } button.stroke.large, .button.stroke.large { line-height: 5.4rem !important; } button.stroke:hover, .button.stroke:hover { border: 3px solid #007BBE; color: #007BBE; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* =================================================================== * 06. other components - (_others.scss) * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * alert box - (_alert-box.scss) * ------------------------------------------------------------------- */ .alert-box { padding: 2.1rem 4rem 2.1rem 3rem; position: relative; margin-bottom: 3rem; border-radius: 3px; font-family: 'DIN',arial,helvetica; font-size: 1.5rem; } .alert-box .close { position: absolute; right: 1.8rem; top: 1.8rem; cursor: pointer; } .ss-error { background-color: #ffd1d2; color: #e65153; } .ss-success { background-color: #c8e675; color: #758c36; } .ss-info { background-color: #d7ecfb; color: #4a95cc; } .ss-notice { background-color: #fff099; color: #bba31b; } /* ------------------------------------------------------------------- * additional typo styles - (_additional-typo.scss) * ------------------------------------------------------------------- */ /* drop cap * ----------------------------------------------- */ .drop-cap:first-letter { float: left; margin: 0; padding: 1.5rem .6rem 0 0; font-size: 8.4rem; font-family: 'DIN',arial,helvetica; line-height: 6rem; text-indent: 0; background: transparent; color: #151515; } /* line definition style * ----------------------------------------------- */ .lining dt, .lining dd { display: inline; margin: 0; } .lining dt + dt:before, .lining dd + dt:before { content: "\A"; white-space: pre; } .lining dd + dd:before { content: ", "; } .lining dd + dd:before { content: ", "; } .lining dd:before { content: ": "; margin-left: -0.2em; } /* dictionary definition style * ----------------------------------------------- */ .dictionary-style dt { display: inline; counter-reset: definitions; } .dictionary-style dt + dt:before { content: ", "; margin-left: -0.2em; } .dictionary-style dd { display: block; counter-increment: definitions; } .dictionary-style dd:before { content: counter(definitions, decimal) ". "; } /** * Pull Quotes * ----------- * markup: * * * * --------------------------------------------------------------------- */ .pull-quote { position: relative; padding: 2.1rem 3rem 2.1rem 0px; } .pull-quote:before, .pull-quote:after { height: 1em; position: absolute; font-size: 10rem; font-family: Arial, Sans-Serif; color: rgba(0, 0, 0, 0.3); } .pull-quote:before { content: "\201C"; top: 33px; left: 0; } .pull-quote:after { content: '\201D'; bottom: -33px; right: 0; } .pull-quote blockquote { margin: 0; } .pull-quote blockquote:before { content: none; } /** * Stats Tab * --------- * markup: * * * * Extend this object into your markup. * * --------------------------------------------------------------------- */ .stats-tabs { padding: 0; margin: 3rem 0; } .stats-tabs li { display: inline-block; margin: 0 1.5rem 3rem 0; padding: 0 1.5rem 0 0; border-right: 1px solid #ccc; } .stats-tabs li:last-child { margin: 0; padding: 0; border: none; } .stats-tabs li a { display: inline-block; font-size: 2.5rem; font-family: 'DIN',arial,helvetica; border: none; color: #252525; } .stats-tabs li a:hover { color: #007BBE; } .stats-tabs li a em { display: block; margin: .6rem 0 0 0; font-size: 1.4rem; font-family: 'DIN',arial,helvetica; color: #4f4f4f; } /** * skillbars - (_skillbars.scss) * ------------------------------------------------------------------- */ .skill-bars { list-style: none; margin: 6rem 0 3rem; } .skill-bars li { height: .6rem; background: #a1a1a1; width: 100%; margin-bottom: 6rem; padding: 0; position: relative; } .skill-bars li strong { position: absolute; left: 0; top: -3rem; font-family: 'DIN',arial,helvetica; color: #313131; text-transform: uppercase; letter-spacing: .2rem; font-size: 1.5rem; line-height: 2.4rem; } .skill-bars li .progress { background: #313131; position: relative; height: 100%; } .skill-bars li .progress span { position: absolute; right: 0; top: -3.6rem; display: block; font-family: 'DIN',arial,helvetica; color: white; font-size: 1.1rem; line-height: 1; background: #313131; padding: .6rem .6rem; border-radius: 3px; } .skill-bars li .progress span::after { position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #313131; content: ""; } .skill-bars li .percent5 { width: 5%; } .skill-bars li .percent10 { width: 10%; } .skill-bars li .percent15 { width: 15%; } .skill-bars li .percent20 { width: 20%; } .skill-bars li .percent25 { width: 25%; } .skill-bars li .percent30 { width: 30%; } .skill-bars li .percent35 { width: 35%; } .skill-bars li .percent40 { width: 40%; } .skill-bars li .percent45 { width: 45%; } .skill-bars li .percent50 { width: 50%; } .skill-bars li .percent55 { width: 55%; } .skill-bars li .percent60 { width: 60%; } .skill-bars li .percent65 { width: 65%; } .skill-bars li .percent70 { width: 70%; } .skill-bars li .percent75 { width: 75%; } .skill-bars li .percent80 { width: 80%; } .skill-bars li .percent85 { width: 85%; } .skill-bars li .percent90 { width: 90%; } .skill-bars li .percent95 { width: 95%; } .skill-bars li .percent100 { width: 100%; } /* =================================================================== * 07. common and reusable styles * * ------------------------------------------------------------------- */ .section-intro { text-align: center; position: relative; margin-bottom: 1.5rem; } .section-intro h1 { font-family:'DIN',arial,helvetica font-size: 4.8rem; line-height: 1.375; color: #151515; } .section-intro h3 { font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 2rem; color: #007BBE; text-transform: uppercase; letter-spacing: .15rem; margin-bottom: 0; } .section-intro.with-bottom-sep { padding-bottom: 4.2rem; position: relative; } .section-intro.with-bottom-sep::after { display: inline-block; height: 1px; width: 240px; background-color: #dedede; text-align: center; } /* ------------------------------------------------------------------- * responsive: * section-intro * ------------------------------------------------------------------- */ @media only screen and (max-width:768px) { .section-intro h1 { font-size: 4.2rem; } .section-intro h3 { font-size: 1.8rem; } } @media only screen and (max-width:600px) { .section-intro h1 { font-size: 3.6rem; } .section-intro h3 { font-size: 1.7rem; } } @media only screen and (max-width:400px) { .section-intro h1 { font-size: 3.3rem; } .section-intro h3 { font-size: 1.6rem; } } .wide { max-width: 1300px; } .narrow { max-width: 800px; } .js .animate-this, .js .animate-intro { opacity: 0; } .oldie .animate-this, .oldie .animate-intro .no-cssanimations .animate-this, .no-cssanimations .animate-intro { opacity: 1; } /* =================================================================== * 08. header styles - (_layout.scss) * * ------------------------------------------------------------------- */ header { width: 100%; height: auto; position: absolute; left: 0; top: 0; z-index: 700; } header .row { height: auto; max-width: 1300px; position: relative; } /* ------------------------------------------------------------------- * header logo - (_layout.css) * ------------------------------------------------------------------- */ header .header-logo { position: absolute; left: 26px; top: 30px; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } header .header-logo a { display: block; margin: 0; padding: 0; outline: 0; border: none; width: 60px; height: 60px; font: 0/0 a; text-shadow: none; color: transparent; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* ------------------------------------------------------------------- * menu trigger - (_layout.css) * ------------------------------------------------------------------- */ #header-menu-trigger { display: block; position: fixed; right: 26px; top: 30px; height: 42px; width: 42px; line-height: 42px; font-family: 'DIN',arial,helvetica; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .2rem; color: rgba(255, 255, 255, 0.5); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #header-menu-trigger.opaque { background-color: #000000; } #header-menu-trigger.opaque .header-menu-text { background-color: #000000; } #header-menu-trigger:hover, #header-menu-trigger:focus { color: #FFFFFF; } #header-menu-trigger .header-menu-text { display: block; position: absolute; top: 0; left: -75px; width: 75px; text-align: center; background-color: transparent; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #header-menu-trigger .header-menu-icon { display: block; height: 2px; width: 24px; background-color: #FFFFFF; position: absolute; top: 50%; right: 9px; margin-top: -2px; } #header-menu-trigger .header-menu-icon::before, #header-menu-trigger .header-menu-icon::after { content: ''; width: 100%; height: 100%; background-color: inherit; position: absolute; left: 0; } #header-menu-trigger .header-menu-icon::before { top: -9px; } #header-menu-trigger .header-menu-icon::after { bottom: -9px; } /* ------------------------------------------------------------------- * off-canvas menu - (_layout.scss) * ------------------------------------------------------------------- */ #menu-nav-wrap { background: #111111; color: rgba(255, 255, 255, 0.25); font-family: 'DIN',arial,helvetica; font-size: 1.5rem; line-height: 1.6; padding: 3.6rem 3rem; height: 100%; width: 240px; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 800; overflow-y: auto; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #menu-nav-wrap a, #menu-nav-wrap a:visited { color: rgba(255, 255, 255, 0.5); } #menu-nav-wrap a:hover, #menu-nav-wrap a:focus, #menu-nav-wrap a:active { color: white; } #menu-nav-wrap h3 { color: white; font-family: 'DIN',arial,helvetica; font-size: 2rem; line-height: 1.5; margin-bottom: 1.5rem; } #menu-nav-wrap .nav-list { margin: 3.6rem 0 1.5rem 0; padding: 0 0 1.8rem 0; list-style: none; line-height: 3.6rem; } #menu-nav-wrap .nav-list li { padding-left: 0; border-bottom: 1px dotted rgba(255, 255, 255, 0.03); line-height: 4.2rem; } #menu-nav-wrap .nav-list li:first-child { border-top: 1px dotted rgba(255, 255, 255, 0.03); } #menu-nav-wrap .nav-list li a { color: rgba(255, 255, 255, 0.25); display: block; } #menu-nav-wrap .nav-list li a:hover, #menu-nav-wrap .nav-list li a:focus { color: white; } #menu-nav-wrap .header-social-list { list-style: none; display: inline-block; margin: 0; font-size: 2.1rem; } #menu-nav-wrap .header-social-list li { margin-right: 12px; padding-left: 0; display: inline-block; } #menu-nav-wrap .header-social-list li a { color: rgba(255, 255, 255, 0.15); } #menu-nav-wrap .header-social-list li a:hover, #menu-nav-wrap .header-social-list li a:focus { color: white; } #menu-nav-wrap .header-social-list li:last-child { margin: 0; } #menu-nav-wrap .close-button { display: block; height: 30px; width: 30px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 36px; right: 30px; font: 0/0 a; text-shadow: none; color: transparent; } #menu-nav-wrap .close-button span::before, #menu-nav-wrap .close-button span::after { content: ""; display: block; height: 2px; width: 12px; background-color: #fff; position: absolute; top: 50%; left: 9px; margin-top: -1px; } #menu-nav-wrap .close-button span::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #menu-nav-wrap .close-button span::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* menu is open */ .menu-is-open #menu-nav-wrap { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); visibility: visible; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------- * responsive: * header section * ------------------------------------------------------------------- */ @media only screen and (max-width:768px) { header .header-logo { top: 27px; } header .header-logo a { width: 54px; height: 54px; background-size: 54px 54px; } } @media only screen and (max-width:400px) { #header-menu-trigger .header-menu-text { display: none; } } /* =================================================================== * 09. home - (_layout.scss) * * ------------------------------------------------------------------- */ #home { background: #151515; width: 100%; height: 100%; min-height: 804px; position: relative; } #home .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; background: -moz-linear-gradient(left, black 0%, black 20%, transparent 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, black 0%, black 20%, transparent 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, black 0%, black 20%, transparent 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */ } #home .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .6; background-color: #000000; } .home-content-table { width: 100%; height: 100%; display: table; position: relative; } .home-content-tablecell { display: table-cell; vertical-align: bottom; z-index: 500; } .home-content-tablecell .row { position: relative; padding-top: 4.2rem; padding-bottom: 15rem; } .home-content-tablecell h3 { font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 2.2rem; color: #007BBE; text-transform: uppercase; letter-spacing: .15rem; margin: 0 0 0 .3rem; } .home-content-tablecell h1 { font-family: 'DIN',arial,helvetica font-size: 5.2rem; line-height: 1.5; color: #FFFFFF; } .home-content-tablecell .home-section-links { display: inline-block; list-style: none; margin: 4.8rem 0 0 0; } .home-content-tablecell .home-section-links li { display: inline-block; font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1rem; color: rgba(255, 255, 255, 0.35); margin-right: 1.5rem; margin-bottom: .6rem; } .home-content-tablecell .home-section-links li:last-child { margin-right: 0; } .home-content-tablecell .home-section-links a { font-family: 'open sans',arial; font-size: 1.8rem; text-transform: none; letter-spacing: 0; color: #FFFFFF; margin-left: .3rem; } .scroll-icon { position: absolute; width: 60px; height: 48px; font-size: 3.3rem; bottom: 30px; right: 20px; color: #FFFFFF !important; -webkit-animation: vertical 3s ease infinite; animation: vertical 3s ease infinite; } /* vertical animation */ @-webkit-keyframes vertical { 0%, 60%, 80%, 100% { -webkit-transform: translateY(0); } 20% { -webkit-transform: translateY(-5px); } 40% { -webkit-transform: translateY(20px); } } @keyframes vertical { 0%, 60%, 80%, 100% { -webkit-transform: translateY(0); } 20% { -webkit-transform: translateY(-5px); } 40% { -webkit-transform: translateY(20px); } } /* ------------------------------------------------------------------- * responsive: * home section * ------------------------------------------------------------------- */ @media only screen and (max-width:1200px) { .home-content-tablecell h3 { font-size: 2.1rem; } .home-content-tablecell h1 { font-size: 5rem; } } @media only screen and (max-width:1024px) { .home-content-tablecell h3 { font-size: 2rem; } .home-content-tablecell h1 { font-size: 4.8rem; } } @media only screen and (max-width:768px) { .home-content-tablecell .row { padding-bottom: 11.4rem; } .home-content-tablecell .home-bottom-text { padding-right: 15%; } .home-content-tablecell h3 { font-size: 1.8rem; } .home-content-tablecell h1 { font-size: 4rem; } .home-content-tablecell h1 br { display: none; } .home-content-tablecell .home-section-links { margin: 4.2rem 0 0 0; } .home-content-tablecell .home-section-links li { font-size: 1.3rem; } .home-content-tablecell .home-section-links a { font-size: 1.6rem; } .scroll-icon { right: 15px; } } @media only screen and (max-width:600px) { #home { min-height: 702px; } .home-content-tablecell { vertical-align: middle; } .home-content-tablecell .row { padding-top: 9rem; padding-bottom: 3rem; } .home-content-tablecell .home-bottom-text { padding-right: 10%; } .home-content-tablecell h3 { font-size: 1.7rem; } .home-content-tablecell h1 { font-size: 3.8rem; } .scroll-icon { right: 10px; } } @media only screen and (max-width:500px) { .home-content-tablecell .home-bottom-text { padding-right: 5%; } .home-content-tablecell h3 { font-size: 1.5rem; } .home-content-tablecell h1 { font-size: 3.4rem; } } @media only screen and (max-width:400px) { #home { min-height: 654px; } .home-content-tablecell .home-bottom-text { padding-right: 0; } .home-content-tablecell h3 { font-size: 1.4rem; } .home-content-tablecell h1 { font-size: 3.2rem; } .home-content-tablecell .home-section-links { margin: 1.5rem 0 0 0; } } /* =================================================================== * 10. about - (_layout.scss) * * ------------------------------------------------------------------- */ #about { position: relative; padding: 10.8rem 0 10.8rem; background-color:transparent; min-height: 700px; } #about h3 { font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 1.6rem; color: #007BBE; text-transform: uppercase; letter-spacing: .15rem; margin: 0 0 0 .3rem; } #about h1 { font-family: 'DIN',arial,helvetica font-size: 3.3rem; line-height: 1.455; color:#fff } .about-profile-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #EBEBEB; width: 50%; background-image: url(../images/profile-bg.jpg); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; opacity: .35; } .about-wrap { width: 94%; max-width: 1300px; margin: 0 auto; } .about-wrap:before, .about-wrap:after { content: ""; display: table; } .about-wrap:after { clear: both; } .about-profile, .about-services { float: left; width: 50%; padding-left: 20px; padding-right: 20px; } .about-profile { padding-right: 9rem; position: relative; z-index: 2; } .about-profile p.lead,.about-profile p,.section-intro p{ color: #ccc; } .about-profile .about-profile-bg { display: none; } .about-services { padding-left: 9rem; position: relative; } .about-services p.lead { color: #757575; } .about-services ul.services { list-style: none; margin-left: 0; } .about-services ul.services li { padding-left: 0; margin-bottom: .6rem; position: relative; } .about-services ul.services li h4 { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .15rem; line-height: 1.313; margin-bottom: .6rem;color:#fff } .about-services ul.services li p { margin-bottom: 1.5rem; color: #4f4f4f; } .about-services ul.services .icon-wrap { position: absolute; top: 0; left: 0; color: rgba(46, 22, 3, 0.4); color: #007BBE; } .about-services ul.services .icon-wrap i { font-size: 5rem; } .about-services ul.services .item-photography .icon-wrap { top: -.3rem; } .about-services ul.services .item-webdesign .icon-wrap { top: -.7rem; } .about-services ul.services .item-uiux .icon-wrap { top: -.1rem; } .about-services ul.services .service-item { padding-left: 8rem; } /* ------------------------------------------------------------------- * responsive: * about * ------------------------------------------------------------------- */ @media only screen and (max-width:1024px) { .about-profile { padding-right: 5rem; } .about-services { padding-left: 5rem; } } @media only screen and (max-width:900px) { .about-profile { padding-right: 4rem; } .about-services { padding-left: 4rem; } } @media only screen and (max-width:768px) { #about { padding-top: 0; } .about-wrap { padding: 0; width: 100%; } .about-profile-bg { display: none; } .about-profile, .about-services { float: none; width: 100%; padding-top: 10.8rem; padding-left: 45px; padding-right: 45px; } .about-profile .intro, .about-services .intro { text-align: center; } .about-profile { padding-bottom: 9rem; } .about-profile .about-profile-bg { display: block; width: 100%; } } @media only screen and (max-width:600px) { .about-profile, .about-services { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width:400px) { .about-profile, .about-services { padding-left: 25px; padding-right: 25px; } .about-services { text-align: center; } .about-services ul.services .icon-wrap { position: static; margin-bottom: .6rem; } .about-services ul.services .icon-wrap i { font-size: 6rem; } .about-services ul.services .service-item { padding-left: 0; margin-bottom: 3rem; } .about-services ul.services .service-item h4 { margin-bottom: 1.5rem; } } /* =================================================================== * 11. skills - (_layout.scss) * * ------------------------------------------------------------------- */ #skills { background-color: #1f0e01; background-image: url(../images/diving-with-shark.gif); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; min-height: 800px; position: relative; padding: 12rem 0 9.6rem; color: rgba(255, 255, 255, 0.3); } #skills .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .7; background-color: #000000; } #skills .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; background: -moz-linear-gradient(left, black 0%, black 20%, transparent 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, black 0%, black 20%, transparent 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, black 0%, black 20%, transparent 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); /* IE6-9 */ } #skills .row { position: relative; } #skills [class="col-skills"] { width: 50%; padding-right: 0; } #skills .section-intro { text-align: left; } #skills .section-intro h3 { color: rgba(255, 255, 255, 0.35); color: #007BBE; } #skills .section-intro h1 { color: #FFFFFF; } #skills .skill-bars { margin-top: 8.4rem; } #skills .skill-bars li { background: #007BBE; margin-bottom: 7.2rem; } #skills .skill-bars li strong { color: #FFFFFF; } #skills .skill-bars li .progress { background: #FFFFFF; } /* ------------------------------------------------------------------- * responsive: * skills * ------------------------------------------------------------------- */ @media only screen and (max-width:1024px) { #skills [class="col-skills"] { width: 75%; } } @media only screen and (max-width:768px) { #skills .section-intro { text-align: center; } #skills [class="col-skills"] { width: 100%; padding-right: 15px; } } @media only screen and (max-width:600px) { #skills [class="col-skills"] { padding-right: 10px; } } @media only screen and (max-width:400px) { #skills [class="col-skills"] { padding-right: 0; } } /* =================================================================== * 12. credentials - (_layout.scss) * * ------------------------------------------------------------------- */ #credentials { background: #FFFFFF; position: relative; padding: 12rem 0 9rem; } #credentials .credentials-content h2 { margin-bottom: 4.8rem; color: #007BBE; padding-left: 8rem; font-size: 1.8rem; text-transform: uppercase; letter-spacing: .15rem; position: relative; } #credentials .credentials-content h2::before { display: block; content: ""; height: 3px; width: 4rem; background-color: #aeaeae; position: absolute; top: 50%; left: 2rem; margin-top: -3px; } #credentials .left { padding-right: 40px; } #credentials .right { padding-left: 40px; } #credentials .timeline-wrap { position: relative; text-align: left; } #credentials .timeline-wrap::before { content: ""; display: block; width: 1px; height: 100%; background-color: rgba(0, 0, 0, 0.1); position: absolute; left: 2rem; top: 0; } #credentials .timeline-block { position: relative; padding-left: 8rem; margin-bottom: 4.2rem; } #credentials .timeline-ico { height: 4.8rem; width: 4.8rem; line-height: 4.8rem; background: #007BBE; border-radius: 50%; text-align: center; color: #FFFFFF; position: absolute; left: 2rem; top: 0; margin-left: -2.4rem; } #credentials .timeline-header .timeframe { font-family: 'DIN',arial,helvetica; font-size: 1.6rem; color: #757575; margin-bottom: 0; } #credentials .timeline-header h3 { font-size: 2.4rem; line-height: 1.25; margin-bottom: 0; } /* ------------------------------------------------------------------- * responsive: * credentials * ------------------------------------------------------------------- */ @media only screen and (max-width:1024px) { #credentials .left { padding-right: 20px; } #credentials .right { padding-left: 20px; } } @media only screen and (max-width:768px) { #credentials .credentials-content h2 { padding: 0; text-align: center; } #credentials .credentials-content h2::before { display: none; } #credentials .left { padding-right: 10px; } #credentials .right { padding-left: 10px; } } @media only screen and (max-width:600px) { #credentials .timeline-block { padding-left: 7rem; } } @media only screen and (max-width:400px) { #credentials .timeline-header .timeframe { font-size: 1.5rem; } #credentials .timeline-header h3 { font-size: 2.2rem; } #credentials .timeline-block { padding-left: 6rem; } } /* =================================================================== * 13. portfolio - (_layout.scss) * * ------------------------------------------------------------------- */ #gear { background:transparent; min-height: 800px; position: relative; padding: 12rem 0 15rem; } #gear .section-intro h1{ color:#fff } #gear .bricks-wrapper:before, #gear .bricks-wrapper:after { content: ""; display: table; } #gear .bricks-wrapper:after { clear: both; } #gear .bricks-wrapper .brick { float: left; width: 50%; padding: 0; margin: 0; } #gear .bricks-wrapper .brick:nth-child(2n+1) { clear: both; } /* ------------------------------------------------------------------- * masonry entries - (_layout.css) * ------------------------------------------------------------------- */ .bricks-wrapper .item-wrap { position: relative; overflow: hidden; } .bricks-wrapper .item-wrap .overlay { cursor: zoom-in; } .bricks-wrapper .item-wrap .overlay img { vertical-align: bottom; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bricks-wrapper .item-wrap .overlay::before { content: ""; display: block; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 1; } .bricks-wrapper .item-wrap .overlay::after { content: "+"; font-family: sans-serif; font-size: 2.4rem; z-index: 1; display: block; height: 30px; width: 30px; line-height: 30px; margin-left: -15px; margin-top: -15px; position: absolute; left: 50%; top: 50%; text-align: center; color: #FFFFFF; opacity: 0; visibility: hidden; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .bricks-wrapper .item-wrap .item-text { position: absolute; top: 0; left: 0; padding: 3rem 0 0 3rem; margin-right: 5rem; z-index: 3; } .bricks-wrapper .item-wrap .item-text .folio-title { color: #FFFFFF; font-size: 2.2rem; line-height: 1.364; } .bricks-wrapper .item-wrap .item-text .folio-types { font-family: 'DIN',arial,helvetica; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .1rem; color: rgba(255, 255, 255, 0.7); } .bricks-wrapper .item-wrap .details-link { display: block; background-color: #FFFFFF; height: 4.6rem; width: 4.6rem; line-height: 4.6rem; color: #000000; text-align: center; z-index: 2; position: absolute; top: 3.6rem; right: 0; } .bricks-wrapper .item-wrap .details-link i { font-size: 2rem; line-height: 4.6rem; } .bricks-wrapper .item-wrap .details-link:hover, .bricks-wrapper .item-wrap .details-link:focus { background-color: #000000; color: #FFFFFF; } .bricks-wrapper .item-wrap .item-text, .bricks-wrapper .item-wrap .details-link { opacity: 0; visibility: hidden; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bricks-wrapper .item-wrap:hover .overlay::before { opacity: 1; visibility: visible; } .bricks-wrapper .item-wrap:hover .overlay::after { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .bricks-wrapper .item-wrap:hover .overlay img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .bricks-wrapper .item-wrap:hover .item-text, .bricks-wrapper .item-wrap:hover .details-link { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* ------------------------------------------------------------------- * Light Gallery Overrides - (_layout.css) * ------------------------------------------------------------------- */ .lg-sub-html { padding: 12px 20% 15px; } .lg-sub-html a:hover, .lg-sub-html a:focus { color: #FFFFFF; } @media only screen and (max-width:1024px) { .lg-sub-html { padding: 12px 15% 15px; } } @media only screen and (max-width:768px) { .lg-sub-html { padding: 12px 40px 15px; } } .lg-sub-html h4 { color: #FFFFFF; font-family: 'DIN',arial,helvetica; font-size: 1.8rem; line-height: 1.333; } .lg-sub-html p { font-family: 'DIN',arial,helvetica; font-size: 1.3rem; line-height: 2.4rem; margin: .6rem 0 0; color: rgba(255, 255, 255, 0.6); } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #007BBE; } .lg-progress-bar .lg-progress { background-color: #FFFFFF; } #lg-counter { font-family: 'DIN',arial,helvetica; } /* ------------------------------------------------------------------- * responsive: * portfolio * ------------------------------------------------------------------- */ @media only screen and (max-width:600px) { #gear .bricks-wrapper .brick { float: none; width: 100%; } } /* =================================================================== * 14. stats - (_layout.scss) * * ------------------------------------------------------------------- */ #stats { background-color: #111111; position: relative; padding: 6rem 0 6rem; } #stats .stat { text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.04); } #stats .stat:last-child { border: none; } #stats .stat .icon-part { color: #333; } #stats .stat .icon-part i { font-size: 6rem; } #stats .stat h5 { color: #FFFFFF; margin-top: 1.5rem; font-size: 1.4rem; } #stats .stat h3 { color: #007BBE; font-size: 4.8rem; text-transform: uppercase; letter-spacing: .2rem; margin: 1.5rem 0 0 0; padding-top: 1.5rem; line-height: 1; font-family: 'DIN',arial,helvetica; position: relative; text-align: center; } #stats .stat h3::before { content: ""; display: inline-block; width: 80px; height: 3px; background-color: rgba(5, 100, 139, 0.1); background-color: rgba(255, 255, 255, 0.1); text-align: center; position: absolute; top: 0; left: 50%; margin-left: -40px; } /* ------------------------------------------------------------------- * responsive: * stats * ------------------------------------------------------------------- */ @media only screen and (max-width:768px) { #stats .stat:nth-child(n) { border: none; padding-bottom: 2.4rem; } } /* =================================================================== * 15. contact - (_layout.scss) * * ------------------------------------------------------------------- */ #contact { background-color: #111111; background-image: url(../images/profile-bg.jpg); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; padding-top: 10.2rem; padding-bottom: 6rem; position: relative; } #contact .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .7; background-color: #000000; } #contact .section-intro h1 { color: white; } #contact .section-intro h3 { color: #007BBE; } #contact .section-intro p.lead { color: rgba(255, 255, 255, 0.3); } /* contact form */ .contact-form { max-width: 740px; margin-top: 4.2rem; position: relative; } .contact-form::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7); } .contact-form:-moz-placeholder { color: rgba(255, 255, 255, 0.7); /* Firefox 18- */ } .contact-form::-moz-placeholder { color: rgba(255, 255, 255, 0.7); /* Firefox 19+ */ } .contact-form:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .contact-form .placeholder { color: rgba(255, 255, 255, 0.7) !important; } #contact form { margin-top: 0; margin-bottom: 3rem; } #contact form .form-field { position: relative; } #contact form .form-field:before, #contact form .form-field:after { content: ""; display: table; } #contact form .form-field:after { clear: both; } #contact form .form-field label { font-family: 'DIN',arial,helvetica; font-size: 1.1rem; line-height: 2.4rem; position: absolute; bottom: -1.2rem; right: .6rem; text-transform: uppercase; letter-spacing: .1rem; padding: 0 2rem; margin: 0; color: #FFFFFF; background: #007BBE; } #contact form .form-field label::after { position: absolute; left: -5px; top: 50%; margin-top: -6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #007BBE; content: ""; } #contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact textarea { width: 100%; color: rgba(255, 255, 255, 0.7); margin-bottom: 0; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #contact input[type="text"], #contact input[type="password"], #contact input[type="email"] { height: 6.6rem; padding: 1.8rem 2rem; } #contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact input[type="email"]:focus { border-color: #007BBE; color: #FFFFFF; } #contact textarea { min-height: 20rem; padding: 1.8rem 2rem; } #contact textarea:focus { border-color: #007BBE; color: #FFFFFF; } #contact button.submitform { font-size: 1.5rem; display: block; letter-spacing: .2rem; height: 6.6rem; line-height: 6.6rem; padding: 0 3rem; margin-top: 4.8rem; width: 100%; background: #007BBE; color: #FFFFFF; } #contact button.submitform:hover, #contact button.submitform:focus { background: #007BBE; } #message-warning, #message-success { display: none; background: black; padding: 3rem; margin-bottom: 3.6rem; width: 100%; } #message-warning { color: #D32B2E; } #message-success { color: #007BBE; } #message-warning i, #message-success i { margin-right: 10px; } /* form loader */ #submit-loader { display: none; position: relative; left: 0; top: 1.8rem; width: 100%; text-align: center; margin-bottom: 4.2rem; } #submit-loader .text-loader { display: none; font-family: 'DIN',arial,helvetica; color: #FFFFFF; letter-spacing: .2rem; text-transform: uppercase; } .oldie #submit-loader .s-loader { display: none; } .oldie #submit-loader .text-loader { display: block; } .contact-info { margin: 4.8rem auto 0; font-family: 'open sans', arial,helvetica;font-weight:100; font-size: 1.6rem; text-align: center; position: relative; } .contact-info p { color: #555; } .contact-info .collapse { padding: 0; } .contact-info .icon { margin-bottom: 2.1rem; } .contact-info .icon i { font-size: 4.2rem; color: #FFFFFF; } .contact-info h5 { color: #FFFFFF; } /* --------------------------------------------------------------- * loader animation - (_layout.scss) * --------------------------------------------------------------- */ .s-loader { margin: 1.2rem auto 3rem; width: 70px; text-align: center; -webkit-transform: translateX(0.45rem); -ms-transform: translateX(0.45rem); transform: translateX(0.45rem); } .s-loader > div { width: .6rem; height: .6rem; background-color: #FFFFFF; border-radius: 100%; display: inline-block; margin-right: .9rem; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .s-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .s-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /* =================================================================== * 16. footer - (_layout.scss) * * ------------------------------------------------------------------- */ footer { padding-top: 4.2rem; padding-bottom: 4.2rem; text-align: center; font-family:'open sans', arial,helvetica; font-weight:100; font-size: 1.6rem; position: relative; } footer .footer-social { list-style: none; display: inline-block; margin-left: 0; margin-bottom: 9rem; } footer .footer-social li { display: inline-block; padding-left: 0; margin: 0 8px 1.5rem 8px; font-family: 'DIN',arial,helvetica; font-size: 1.8rem; } footer .footer-social li a, footer .footer-social li a:visited { color: rgba(255, 255, 255, 0.5); } footer .footer-social li a:hover, footer .footer-social li a:focus { color: #FFFFFF; } footer .footer-social li:last-child { margin-right: 0; } #go-top { position: fixed; bottom: 42px; right: 30px; z-index: 700; display: none; } #go-top a { text-decoration: none; border: 0 none; display: block; height: 63px; width: 60px; line-height: 63px; text-align: center; background-color: #000000; color: #888; text-align: center; text-transform: uppercase; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #go-top a i { font-size: 21px; line-height: inherit; } #go-top a:visited { background: #000000; color: #888; } #go-top a:hover, #go-top a:focus { background: #000000; color: #FFFFFF; } /* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */ @media only screen and (max-width:768px) { #go-top { bottom: 0; right: 0; } }