/* Theme Name: Beck & Caul Theme URI: http://www.beckandcaul.co.nz Author: Beck & Caul Version: 1.0 */ /* =Reset default browser CSS. -------------------------------------------------------------- */ @font-face { font-family: 'DomaineDisplayBold'; src: url('fonts/DomaineDisplay-Bold.eot'); src: local(''), url('fonts/DomaineDisplay-Bold.woff') format('woff'), url('fonts/DomaineDisplay-Bold.ttf') format('truetype'), url('fonts/DomaineDisplay-Bold.svg') format('svg'); font-weight: normal; font-style: normal; } /*ARROWS*/ @font-face { font-family: 'Arrows'; src: url('fonts/arrows/Glyphter.eot'); src: url('fonts/arrows/Glyphter.eot?#iefix') format('embedded-opentype'), url('fonts/arrows/Glyphter.woff') format('woff'), url('fonts/arrows/Glyphter.ttf') format('truetype'), url('fonts/arrows/Glyphter.svg#Glyphter') format('svg'); font-weight: normal; font-style: normal; } /* Generated by Glyphter (http://www.glyphter.com) on Wed Sep 07 2016*/ @font-face { font-family: 'Glyphter'; src: url('fonts/Glyphter.eot'); src: url('fonts/Glyphter.eot?#iefix') format('embedded-opentype'), url('fonts/Glyphter.woff') format('woff'), url('fonts/Glyphter.ttf') format('truetype'), url('fonts/Glyphter.svg#Glyphter') format('svg'); font-weight: normal; font-style: normal; } [class*='icon-']:before{ display: inline-block; font-family: 'Glyphter'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .icon-facebook:before{content:'\0041';} .icon-twitter:before{content:'\0042';} .icon-googleplus:before{content:'\0043';} .icon-youtube:before{content:'\0044';} input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; font-family: 'Arial', sans-serif; font-size: 16px; line-height: 20px; color:#3F1F3E; } sup{ top:-10px; position:relative;} html {position:relative;overflow-x:hidden;height: 100%;display: block;} p {margin-bottom:10px;} h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; font-family: 'DomaineDisplayBold'; } img{max-width:100%;} .mp_plan img{ display: block; } h1{ color:#434343; font-size:24px; font-weight:bold; } h3{font-size: 50px;line-height: 50px;} ol, ul{ margin-left:20px; padding-left:5px; } .to_right ol, .to_right ul{ margin-bottom:20px; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin-left: auto; margin-right: auto} a img.alignright {float:right; margin:0 0 1em 1em} a img.alignleft {float:left; margin:0 1em 1em 0} a img.aligncenter {display: block; margin-left: auto; margin-right: auto} .logo{ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ } a:hover, a:link, a:visited{ color: #77b58a; text-decoration:none; } .acf-map { width: 100%; height: 300px; border: #ccc solid 1px; margin: 20px 0; } #sending, #sent{display:none;} input, select, textarea{box-sizing: border-box;} #savetarget{ padding: 0; margin: 0; border: 0; display: block; width: 0; height: 0; } .ninesixty{ width:1300px; position:relative; margin:0 auto; } .clear{clear:both;} .cl5{ height:5px;} .cl10{ height:10px;} .cl20{height:20px;} .cl30{height:30px;} .cl40{height:40px;} .cl50{height:50px;} .cl60{height:60px;} .cl70{height:70px;} .cl80{height:80px;} .cl90{height:90px;} .cl100{height:100px;} .cl110{height:110px;} .cl120{height:120px;} .smartphoneonly{ display: none; } div, input, span, a{ transition:all 0.5s ; -webkit-transition:all 0.5s ; -o-transition:all 0.5s ; -moz-transition:all 0.5s } .animated div{ transition:all 1s ; -webkit-transition:all 1s ; -o-transition:all 1s ; -moz-transition:all 1s; transition-delay: 0.5s ; } .mapdiv, .mapdiv div, div#map, #map div, .movebg{ transition:all 0s ; -webkit-transition:all 0s ; -o-transition:all 0s ; -moz-transition:all 0s } ::selection { background: #c4b2c2; /* WebKit/Blink Browsers */ color:#FFF; } ::-moz-selection { background: #c4b2c2; /* Gecko Browsers */ color:#FFF; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #FFF; } ::-moz-placeholder { /* Firefox 19+ */ color: #FFF; } :-ms-input-placeholder { /* IE 10+ */ color: #FFF; } :-moz-placeholder { /* Firefox 18- */ color: #FFF; } body, html{ height:100%; } *{ box-sizing:border-box; } svg text{ font-weight:bold; } .grid{ display:grid; grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr;grid-gap:25px; margin-bottom:80px;} .gridblock{background:#f8f8f8;padding:34px 29px;position: relative; opacity:0;width:0;height:0;display: none;} .active_gallery_element { opacity:1; width:100%; height:100%; display:block;} .gbtop{font-size: 39px;font-family:"DomaineDisplayBold";line-height:42px;margin-bottom:38px;position:relative;min-height: 75px;} .gbstatus{position:absolute;top:0;right:0;height:75px;width:168px;color:#FFF !important;text-transform:uppercase;font-weight:bold;font-size: 17px;box-sizing:border-box;padding:20px;text-align:center;} .gbstatus.l_sold{ padding:20px 40px } .gbtop span{display:block;font-size:32px;font-weight:bold;margin-top: 5px;} .gbbottom{ display:block; } .gbbottom b{display:inline-block;width: 120px;} .gbbottom sup{ font-size:11px; position:relative; top:-7px;} .gridblock a{ color:#3f1f3d; } .coverlink{display:block;position:absolute;width:100%;height:100%;top:0;left:0;} #filter_select{position:absolute;right:0;display:block;top:-70px;box-sizing:border-box;border:1px solid #f8f8f8;padding: 0 20px;width: 200px;height: 50px;} #filter_select:before{ content:"Filter"; } .filter_select_label{position:absolute;right:220px;display:block;top:-70px;line-height: 50px;text-transform:uppercase;font-size: 17px;font-weight:bold;font-family:"DomaineDisplayBold";} .sections_available{ padding:112px 0 48px 0; } .sections_available h1{ font-size:55px; line-height:55px; color:#3f1f3d; } .purplebg{ background-color:#3f1f3d; } .purple_graphic:before{content:"";display:block;width: 130%;height: 150%;/* background-size: cover; */position:absolute;top: -25%;z-index: 1;left:0;background-color: #4C2F48;-webkit-mask-image: url(img/bggraphic_large.svg);mask-image: url(img/bggraphic.svg) repeat;-webkit-mask-size: cover;mask-size: cover;} .yellowbg{ background-color:#eec25c; position:relative; overflow:hidden; } .yellowgraphic:before{content:"";display:block;width: 130%;height: 150%;/* background-size: cover; */position:absolute;top: -25%;z-index: 0;left:0;background-color: #f1cf7d;-webkit-mask-image: url(img/bggraphic_large.svg);mask-image: url(img/bggraphic.svg) repeat;-webkit-mask-size: cover;mask-size: cover;} .yellowbg *{ color:#3f1f3d; } .bluebg{ background-color:#71b2c9; position:relative; overflow:hidden; } .bluegraphic:before{content:"";display:block;width: 130%;height: 150%;/* background-size: cover; */position:absolute;top: -25%;z-index: 0;left:0;background-color: #8abed1;-webkit-mask-image: url(img/bggraphic_large.svg);mask-image: url(img/bggraphic.svg) repeat;-webkit-mask-size: cover;mask-size: cover;} .yellowbg *{ color:#3f1f3d; } .yellowbg .purple_button{ color:#FFF; } body:before{content:"";display:block;width:100%;height:100%;background: rgba(63, 31, 61, 0.9);position: fixed;z-index: -1;opacity:0;transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;-moz-transition:all 0.5s;} body.mobilmenushade:before{ z-index:9999999999; opacity:1; } body.mobilmenushade{overflow-x: hidden;max-height:100%;height: 100%;display: block;} .flex-direction-nav{ display:none; } .introtext{ padding:86px 0; text-align:left; } .introtext, .introtext p, .introtext a{ font-size:26px; color:#999999; line-height:32px; } /*showhomes*/ .show_homes{background: #eec25c;border-top: 20px solid #ffffff;} .show-homes .show_homes{ background:#FFF; } .show_homes *{ color:#3f1f3d !important; line-height:20px !important; } .show_homes .showhomecontent{ max-width: 400px; } .show_homes h1{ font-size:55px; line-height:45px !important; margin-bottom:20px;} .showhomeimage{width:72%;height: 700px;float:left;background-size: cover !important;background-position: 50% !important;} .showhome_imageslider, .showhome_imageslider .slides, .showhome_imageslider .imgslide, .showhome_imageslider .flex-viewport, .showhome_imageslider ul li{display:block;width:100%;height:100%;position: relative;} .showhome_imageslider .imgslide{ background-size:cover !important; background-position:50% !important; } .showhomecontent{width:28%;float:left;box-sizing:border-box;padding-left:50px;position: relative;top: 50%;transform:translateY(-50%);max-width: 360px;} .showhomewrapper{height: 700px;display:block;/* border-bottom: 20px solid red; */} .showhomecontent *{ font-size:20px; line-height:35px; color:#999999; } .showhomecontent p{ margin-bottom:20px; } .showhomecontent img{ height:auto !important; } /*DOCUMENTS*/ .document_greybar{ background:#F2F2F2; text-align:center; padding:86px 0} .document_greybar .ninesixty{ max-width: 1110px; } .document_greybar, .document_greybar *{ font-weight:bold; font-size:26px; color:#999999; line-height:32px;} .documents_left{ WIDTH:47%; float:left; margin-right:12.6%; } .documents_left h3{ margin-bottom:40px; } .stage{ margin-bottom:40px; } .stage p, .stage p *{ font-size:20px; line-height:28px;} .stage_button{ background:#3f1f3d;color:#FFF !important;padding: 26px 31px; margin-top:10px;display: inline-block;font-size: 24px !important;line-height: 24px !important; } .documents_right{ width:40.4%; float:left; background:#f2f2f2; } .dr_title{ padding:48px 113px 38px 66px; font-size:20px; font-weight:bold; background:#E5E5E5; } /*.documents_content{display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr;grid-gap: 130px 115px; }*/ .separator_box{text-align:center;max-width: 750px;margin: 0 auto 50px;} .separator_title{ font-size:32px; line-height:32px; font-weight:bold; margin-bottom:10px;} /*.separator_box:after{ content:""; display:block; margin:20px auto 40px; position:relative; width:200px; height:3px; background:#3f1f3d; }*/ .documents_content{ position:relative; display:Block; padding:0 60px; } .documents_content a{float:left;width:33.333%;margin: 0 auto 130px;} .documents_content a{display:block;text-align:center;position:relative;padding: 0 45px 70px;} .doctitle{display:block;font-weight:bold;font-size:24px;line-height: 27px;margin-bottom: 18px;} .docdescription{ padding:0 45px; display:block; } .docdownload{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#3f1f3d;color:#FFF;text-transform:uppercase;font-size:12px;padding:5px 20px;margin-left: 17px;} .docdownload:before{content:'';width: 42px;height: 49px;position:absolute;background:url('img/icon_pdf_large.png');position:absolute;background-size: contain;background-repeat: no-repeat;left: -40px;top: -14px;} .documents_right a{ position:relative;; font-size:20px; display:block; font-weight:bold; line-height:39px; margin-bottom:27px; padding-left:64px; ; } .documents_right a:before{ content:''; width:35px; height:39px; position:absolute; left: 0; background:url('img/icon_pdf.png'); } .doc_separator{ height:4px; width:100%; background:#ddd; margin-bottom:30px; } /*MASTER PLAM*/ .mp_intro *{ font-size:26px; line-height:32px; font-weight:bold; color:#999999; padding-right:0; } .mp_plan{width:100%;overflow: hidden;position: relative;height: 90%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6e9d8+0,c1cb9d+50,e6e9d8+100 */background: #e6e9d8; /* Old browsers */background: -moz-linear-gradient(45deg, #e6e9d8 0%, #c1cb9d 50%, #e6e9d8 100%); /* FF3.6-15 */background: -webkit-linear-gradient(45deg, #e6e9d8 0%,#c1cb9d 50%,#e6e9d8 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(45deg, #e6e9d8 0%,#c1cb9d 50%,#e6e9d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e9d8', endColorstr='#e6e9d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */} #zoomable { transform-origin:245px 0 0 !important; } #Stage_1_Outline{stroke: #ffffff !important;fill: rgba(255,255,255,0.5);stroke-width: 2px !important;} .mp_box{position:absolute;top:100px;right:100px;width:50%;max-width:400px;height:50%;background: url("img/masterplan_box.svg") no-repeat;z-index: 9;} .mp_box.stage1box{background: url("img/stage1_box.png") no-repeat;background-size: contain;} .showplaninfo{ /*width:100%;height:100%;overflow:hidden;position: fixed;overflow-y: hidden;display: block;*/ } body.showplaninfo:after{width:100%;height:100%;position:fixed;background: #000000d1;display:block;content:"";z-index: 999999999;top: 0;left: 0;} .plan_loading:after{ position:absolute; content:""; background:url("img/loading.gif"); width:100px; height:100px; margin-left:-50px; left:50%; top:50%; background-repeat:no-repeat; background-position:50%; } .plan_infowindow{position:fixed;z-index:9999999991;width:100%;max-width:900px;height:90%;left:50%;margin-left:-450px;top:-105%;background:#ffffff;box-sizing:border-box;padding: 0 0;opacity:1;} .showplaninfo .plan_infowindow{ top:5%; } .plan_closebox{position:absolute;right:0;top: -50px;width:50px;height:50px;background:#ee5f5b;margin:0px;cursor:pointer;z-index: 99999999999;} .plan_closebox:after{ content:"X"; color:#f9f9f9; font-size:40px; position:absolute;left:0; top:0; padding:0; line-height:50px; width:50px; text-align:center; } .plan_lotno{padding: 55px 0 16px 55px;font-family:"DomaineDisplayBold";font-size:55px;line-height:55px;height: 122px;} .plan_package.plan_price{/* font-weight:normal; */font-size: 28px;} .plan_package{font-size:32px;font-weight:bold;padding-left:55px;padding-bottom: 20px;line-height:32px;height: 40px;overflow: hidden;} .plan_halswellcommons{ position:absolute; right:0; top:0; width:202px; height:202px; box-sizing:border-box; text-align:center; } .plan_halswellcommons:before{ content:""; width:96px; height:78px; background:url("img/logo_plan.php?color=available"); position:absolute; display:block; background-size:contain; left:50%; margin-left:-48px; top:33px; } .plan_halswellcommons *{ color:inherit; font-size:24px; text-transform:uppercase; font-weight:bold; text-align:center; padding-top:128px; } .phwc_title{ padding-left: 20px; padding-right:20px; } .l_available{ background:#EDC15C; color:#fff2d6; } .l_available:before{ background:url("img/logo_plan.php?color=f3d48e"); } .l_terrace_development{ background:#FFD497; color:#fff2d6; } .l_terrace_development:before{ background:url("img/logo_plan.php?color=fff2d6"); } .l_house_and_land{ background:#e98a6b; color:#EFA993; } .l_house_and_land:before{ background:url("img/logo_plan.php?color=EFA993"); } .l_future_showhome{ background:#72B3CA; color:#81c0d6; } .l_future_showhome:before{ background:url("img/logo_plan.php?color=81c0d6"); } .l_showhome_open{ background:#0288C1; color:#A0E2FE; } .l_showhome_open:before{ background:url("img/logo_plan.php?color=A0E2FE"); } .l_affordable_house_and_land{ background:#BB92A9; color:#d0a3bc; } .l_affordable_house_and_land:before{ background:url("img/logo_plan.php?color=d0a3bc"); } .l_on_hold{ background:#60c5bc; color:#95e4dd; } .l_on_hold:before{ background:url("img/logo_plan.php?color=95e4dd"); } .l_sold{ background:#EE1746; color:#ff829d; } .l_sold:before{ background:url("img/logo_plan.php?color=ff829d"); } .valid_image{ width:100%; height:415px; background-size:cover !important; background-position:50% !important; } .plan_logo{position:absolute;bottom:35px;right:40px;max-width:300px;height: 70px;} .plan_logo img{ max-height:100%; max-width:100%; display:block; position:relative; } .plan_info{ padding:70px 50px 0; position:relative; } .plan_info .d_size{ font-size:28px; line-height:30px; padding-bottom:10px;} .plan_info .d_size sup{ top:-14px; font-size:14px; } .plan_info .detailed_iconbar { padding-top:30px; top: -10px; left: 50px; } .plan_enquiry a{ background:#3f1f3d; color:#FFF; text-transform:uppercase; font-family:"DomaineDisplayBold"; margin-left:50px; padding:20px 40px; margin-top:20px; position:relative; display:inline-block; clear:both; transition:all 0.5s ; -webkit-transition:all 0.5s ; -o-transition:all 0.5s ; -moz-transition:all 0.5s } .plan_enquiry a:hover{ background:#edc15c; } /*LESS DETAILED PLAN*/ .nd_lot{ width:49%; float:left; margin-right:2%; position:relative; } .nd_img{ width:100%; height:294px;} .nd_name{ font-size:32px; font-weight:bold; line-height:40px; width:50%; float:left; padding-bottom:5px;} .nondetailed_iconbar{ width:50%; float:right; height:40px; margin-top:10px; text-align:right; } .nondetailed_iconbar .d_icon:before{ background-size:contain !important; margin-right:5px; } .nondetailed_iconbar .d_icon{display:inline-block;float: unset;padding-right: 0;padding-left: 20px;} .nondetailed_iconbar .icon_bedroom:before{ bottom:0px; padding-right:5px; width:35px; height:29px; background:url(img/icon_bedroom.png) no-repeat;; content:""; display:block; position:relative; float:left; } .nondetailed_iconbar .icon_livingroom:before{ bottom:-1px; padding-right:5px; width:35px; height:29px; background:url(img/icon_livingroom.png) no-repeat;; content:""; display:block; position:relative; float:left; } .nondetailed_iconbar .icon_bathroom:before{ bottom:5px;; padding-right:5px; width:30px; height:29px; background:url(img/icon_bathroom.png) no-repeat;; content:""; display:block; position:relative; float:left; } .nondetailed_iconbar .icon_toilet:before{bottom:4px;; padding-right:5px; width:22px; height:29px; background:url(img/icon_toilet.png) no-repeat;; content:""; display:block; position:relative; float:left; } .nondetailed_iconbar .icon_garage:before{ bottom:8px;; padding-right:5px; width:30px; height:29px; background:url(img/icon_garage.png) no-repeat;; content:""; display:block; position:relative; float:left; } .nd_lot:nth-of-type(2n+2){ margin-right:0; } .nd_lotseparator{ clear:both;display:block;width:100%;height: 1px;border-bottom: 1px solid #d8d8d8;margin-bottom: 68px; } .nd_size{ position:absolute; bottom: 47px; font-size:20px; color:#999999; font-weight:bold; } .nd_size sup{top:-6px;font-size:12px;color: inherit;} /*DETAILED PLAN*/ .detailed_intro{ width:66%; float:left; } .detailed_intro *{ font-size:26px; line-height:32px; font-weight:bold; color:#999999; padding-right:0; } .detailed_logo{width:34%;float:left;text-align: center;} .detailed_logo a{ color:#3f1f3d; } .detailed_logo img{position:relative;padding:10px;max-width:370px;max-height:122px;display:block;margin:0 auto;top: -20px;/* transform: translateY(-50%); */} .lot{ display:block; position:relative; } .lot:after{content:"";clear:both;display:block;width:100%;height: 68px;border-bottom: 1px solid #d8d8d8;margin-bottom: 68px;} .lots_left { width:36.4%; float:left; padding-right:40px; position:relative; } .d_title{ font-size:55px; font-family:"DomaineDisplayBold"; line-height:55px; } .availablesite{ font-size:32px; line-height:50px; font-weight:bold; } .d_subtitle{ font-size:36px; line-height:36px; font-weight:bold; padding-bottom:0px; } .d_location{ color:#999; } .d_size{ font-weight:bold; } .d_size sup{font-size:10px;top: -6px;} .pdf_download{position:relative;display:block;font-size: 17px;font-weight: bold;line-height: 50px;padding-left: 31px;} .pdf_download:before{content:"";width:50px;height: 42px;background:url("img/pdf.png");display:block;background-size:contain;position:absolute;left: -11px;} .detailed_iconbar{ position:absolute; bottom:0; left:0; } .d_icon{ float:left; display:block; padding-right:30px; padding-left:0px; font-size:14px; font-weight:bold; color:#999999; line-height:29px; } .d_icon:before{position:absolute;left:0;background-size: contain;} .icon_bedroom:before{ bottom:0px; padding-right:5px; width:48px; height:29px; background:url(img/icon_bedroom.png) no-repeat;; content:""; display:block; position:relative; float:left; } .icon_livingroom:before{ bottom:-1px; padding-right:5px; width:51px; height:29px; background:url(img/icon_livingroom.png) no-repeat;; content:""; display:block; position:relative; float:left; } .icon_bathroom:before{ bottom:5px;; padding-right:5px; width:36px; height:36px; background:url(img/icon_bathroom.png) no-repeat;; content:""; display:block; position:relative; float:left; } .icon_toilet:before{bottom:4px;; padding-right:5px; width:31px; height:34px; background:url(img/icon_toilet.png) no-repeat;; content:""; display:block; position:relative; float:left; } .icon_garage:before{ bottom:8px;; padding-right:5px; width:37px; height:38px; background:url(img/icon_garage.png) no-repeat;; content:""; display:block; position:relative; float:left; } .lots_right{ width:63.6%; float:left; position:relative; overflow:hidden; } .lr_image{width:100%;height:100%;background-size:cover !important;background-position:50% !important;position: relative;} .enquire_button{ position:absolute; bottom:0; left:0; color:#FFF !important; font-size:26px; font-weight:bold; ; background:#ED1C24; padding:10px 20px; } .sold{position:absolute;top: -97px;right: -113px;background:#ED1C24;font-size:40px;font-family: 'DomaineDisplayBold';color:#FFF;text-align:center;width: 250px;padding: 176px 0 23px 0;transform: rotate(45deg);} /*TEXT ONLY*/ .textonly{ margin:122px auto; } .to_left{width: 30%; margin-left:7%; float: left;padding-right: 10px; text-align:right;} .to_left h3{ margin-bottom:20px; } .to_left h4{font-family: Arial;font-weight: bold;font-size: 24px;line-height: 24px;padding-bottom: 30px;} .to_right{width: 60%;margin-left: 3%; padding-left:30px; float: left;box-sizing:border-box;background-size:cover !important;background-position:50% !important;} .to_right, .to_right .nb_content *, .to_right *{ font-size:17px; } /*HOME BOXES*/ .home_boxes div{ cursor:pointer; position:relative; } .r_top_left:hover, .r_top_right:hover, .r_bottom_left:hover, .r_bottom_right:hover{ z-index:999 } .r_top_left:hover:before, .r_top_right:hover:before, .r_bottom_left:hover:before, .r_bottom_right:hover:before{ opacity:1; } .r_top_left:before, .r_top_right:before, .r_bottom_left:before, .r_bottom_right:before{ opacity:0; content:""; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:transparent; transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;-moz-transition:all 0.5s; box-shadow:inset 0 0 55px 0 rgba(0,0,0,0.5); z-index:111; } .r_top_right:before{/* box-shadow:inset 0 0 55px 0 rgba(255,255,255,0.9); */} .hb_left{ width:41.5%; float:left; background-color:#EA8A6C; position:relative; overflow:hidden; z-index:1; } .hb_left *{ z-index:2; } .hb_left:before{content:"";display:block;width: 180%;height: 180%; position:absolute;top: -25%;z-index: 0 !important;;left:0;background-color: #C67258;-webkit-mask-image: url(img/bggraphic_large.svg);mask-image: url(img/bggraphic.svg) repeat;-webkit-mask-size: cover;mask-size: cover;} .hb_left:after{ content:""; width:100%; height:100%; position:absolute; top:0; left:0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ea8a6c+0,ea8a6c+100&1+43,0+100 */ background: -moz-linear-gradient(top, rgba(234,138,108,1) 0%, rgba(234,138,108,1) 43%, rgba(234,138,108,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(234,138,108,1) 0%,rgba(234,138,108,1) 43%,rgba(234,138,108,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(234,138,108,1) 0%,rgba(234,138,108,1) 43%,rgba(234,138,108,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea8a6c', endColorstr='#00ea8a6c',GradientType=0 ); /* IE6-9 */ } .hb_left .grid_title{ font-size:80px; line-height:70px; } .hb_right{ width:58.5%; float:left; } .r_top_left, .r_top_right, .r_bottom_left, .r_bottom_right{ width:50%; float:left; } .r_top{ display:table; width:100%; min-height:40% !important; } .r_bottom{display:table;width: 100%;} .r_top_left, .r_top_right{display:table-cell;height: 100%;} .r_top_left{background:#78B58B;min-height: 410px;} .r_top_right{/* background-color: #3e1f3e !important; */min-height: 410px;} .r_top_right .box_content{height:100%;position: absolute;} .r_bottom_left, .r_bottom_right{display:table-cell;min-height:60%;min-height: 430px;} .r_bottom_right{ background:#71B2C9; } .r_bottom_right *, .r_bottom_right, .r_top_right *, .r_top_right{ color:#FFF !important;} .r_bottom_right .box_content{height:100%;position: absolute;width: 100%;} .r_bottom_right .grid_title{margin-bottom:0;padding-bottom:0;position: absolute;bottom: 41px;width: 100%;} .hbox{ background-size:cover !important; background-position:50% !important; } .box_content{ padding:87px 50px; } .hb_left .box_content{padding:87px 141px 87px 209px;z-index: 9;position: relative;} .grid_title{ font-family: 'DomaineDisplayBold';display: block;clear: both;margin-bottom: 38px; font-size:55px; line-height:55px; color:#3f1f3d; } .r_top_right .grid_title{margin-bottom:0;padding-bottom:0;padding-top: 86px;position: absolute;bottom: 41px;} .grid_subtitle{ font-size:24px; font-weight:bold; margin-bottom:40px; } .grid_content, .grid_content *{ font-size:20px; line-height:26px} /*PARTNER LOGOS*/ .partner_logos{text-align:center; background:#DDD; padding:107px 0;} .home .partner_logos{background:#FFF; } .pl_title{font-size:55px;line-height:55px;font-family: 'DomaineDisplayBold';display: block;clear: both;margin-bottom: 50px;max-width: 900px;margin: 0 auto 50px;} .home .pl_title{ color:#78B58B; } .partner_logo.animated.decentralize{ top:40px; } .partner_logo{display: block;height:100px;width: 16.666667%;text-align:center;position:relative;float: left;top:0;} .partner_logo img{display:block;position:relative;top:50%;transform:translateY(-50%);margin: 0 auto;max-width: 84%;max-height: 135px;} .partner_logo:nth-of-type(1) img{ max-height:50px; } .partner_logo:nth-of-type(3) img{ max-height:60px; } .partner_logo:nth-of-type(4) img{ max-height:50px; } .partner_logo:nth-of-type(6) img{ max-height:40px; } /*FULL WIDTH BOX WITH slider*/ .fwbox_slider{min-height: 521px;height: 100%;} .fwb_image{width:100%;height: 100%;position: relative;background-position:bottom right !important;background-repeat:no-repeat !important;background-size:cover !important;} .redbg{ background:#ed1846; color:#FFF; position:relative; overflow:hidden;} .redbg *{ } .redbg .fw_imagetitle{ background:#ed1846; color:#FFF; } .redbg .fw_imagetitle *, .redbg *{ color:#FFF; } .redbg:before{content:"";display:block;width: 130%;height: 150%;/* background-size: cover; */position:absolute;top: -25%;z-index: 0;left:0;background-color: #e45070;-webkit-mask-image: url(img/bggraphic_large.svg);mask-image: url(img/bggraphic.svg) repeat;-webkit-mask-size: cover;mask-size: cover;} .redbg *{ color:#ffffff; } .home .fullwidthbox.redbg{ border-top:5px solid #FFF; } .fullwidthbox.redbg .fw_content a{ color:#FFF; display:inline-block; padding:20px; border:1px solid #e28196; background:#ed1846; margin-top:20px; } .fullwidthbox.redbg .fw_content a:hover{ background:#3f1f3d } /*FULL WITH BOX*/ .fw_imagebg{width:56%;float:left;position:relative;background-size:cover !important;background-repeat: no-repeat !important;/* min-height:550px; *//* background-position:50% !important; */} .decentralize.fw_imagebg{transform: scale(1.5);} .fw_imagetitle{position:absolute;top:50%;transform: translateY(-30%);width:240px;padding:52px 22px 52px 40px;background:#ddd;} .image_text .fw_imagetitle{ background:rgba(238, 194, 92, 0.80); } .bluebg .fw_imagetitle{ background:#71b2c9db; } .image_text .fw_imagetitle *{ color:#3f1f3d; font-size:20px; line-height:20px; } .fw_contentbg{width:44%;float:left;/* background:#ddd; *//* min-height:550px; */} .decentralize .fw_content_wrapper{ transform:scale(0.5); } .fw_content_wrapper{transform:scale(1);width:100%;text-align:left;max-width: 450px;float:left;display:block;position:relative;padding-left: 70px;position:relative;top: 50%;transform:translateY(-50%);margin-top: -120px;} .fw_title{ margin-bottom:20px; } .fw_subtitle{ margin-bottom:20px; font-family: Arial;font-weight: bold;font-size: 24px;line-height: 24px;padding-bottom: 30px; } .w_contentbg{ width:44%; float:left;} .fw_imagebg .fwbox_slider, .fw_imagebg .fwbox_slider li, .fw_imagebg .fwbox_slider .fwb_image, .fw_imagebg .fwbox_slider .flex-viewport, .fw_imagebg ul.slides{height:100%;/* width: 100% !important; */} /*NARROW BOX*/ .narrowbox{margin:90px auto;} .narrowbox h1{ color: #3f1f3d !important; font-size: 55px; line-height: 55px; text-align:center; display:block; } .narrowbox h1:after { content: ""; clear: both; display: block; width: 100%; height: 38px; border-bottom: 1px solid #d8d8d8; margin-bottom: 18px; } .nb_left{width: 30%;float: left;padding-right: 10px;left:0;position: relative;} .decentralize .nb_left{ left:-200px; } .nb_left h3{ margin-bottom:20px; } .nb_left h4{font-family: Arial;font-weight: bold;font-size: 24px;line-height: 24px;padding-bottom: 30px;} .nb_content, .nb_content *{ font-size:20px; line-height:25px;} .nb_right{width: 67%;margin-left: 3%;float: left;box-sizing:border-box;background-size:cover !important;background-position:50% !important; right:0;position: relative;} .decentralize .nb_right{ right:-200px; } /*FOOTER*/ .ourvision_footer{ width:100%; height:450px; background:url('img/ourvision.jpg') no-repeat; background-size:cover; background-position:50%; } .footer{/* background: #dbdbdb; */padding: 82px 0;position: relative;top: -1px;z-index: 9;} .footer .ninesixty{ max-width:1135PX;} .footer_left{width:25%;float:left;position:relative;display:block;height:100%;min-height: 55px; color:#FFF; position:relative; top:-20px; } .footer_left *{ color:#FFF; font-family: 'DomaineDisplayBold'; font-size:55px; line-height:55px;} .footer_right{ width:75%; float:left; } .footer_right #sent, .footer_right #sent *{ color:#FFF; } .footer_right .fields{width: 49%;float:left;margin-right: 2%;margin-bottom: 2%;} .fields{ display:block; position:relative; } .footer_right .fields:nth-of-type(2n+2){ margin-right:0; } .footer_right .fields input{ background:rgba(255,255,255,0.08); height:52px; font-weight:bold; padding:0 30px; color:#FFF; border:0; } .submitfield{background:rgba(255,255,255,0.08);line-height: 52px;box-sizing:border-box;padding:0 30px;} .submitfield span{ color:#ddd; font-weight:bold; font-style:italic; } .footer_right .fields input[type="submit"], .footer_right button{box-sizing: border-box;width: auto;float:right;margin-right: 0;background: #6F576E;color:#FFF;text-transform:uppercase;border:0;margin-bottom: 0;cursor: pointer;height: 52px;font-weight: bold;padding: 0 30px;font-size: 16px;font-family: 'Raleway', sans-serif;position: absolute;right: 0;top: 0;} .footer_right .fields input[type="submit"]:hover{ background:rgb(119, 181, 138); } .footerbc{ background:#ffffff; color:#3F1F3E; text-align:center; padding:20px 0; } .footerbc a{ color:#3F1F3E;} .fbcleft{ float:left; width:50%; text-align:left; } .fbcright{ float:right; width:50%; text-align:right; } .fields label{ opacity: 1;font-size: 18px; color:#FFF; } #formdiv .fields label{ color:#3F1F3E !important; } .footer_right #formdiv .fields label{ color:#FFF !important; } .fields form div { position: relative; } .fields form div label { position: absolute; top: 3px; pointer-events: none; left: 10px; transition: .5s; opacity:0; } .fields input:focus ~label, .fields input:valid ~label, .fields textarea:focus ~label, .fields textarea:valid ~label { left: 30px; top: -10px; color: #FFF; font-size: 11px; font-weight: 400; opacity:0; } input:focus ~ label, input:not(:focus):valid ~ label, textarea:focus ~ label, textarea:not(:focus):valid ~ label{ top: -2px; bottom: 10px; left: 30px; font-size: 10px; opacity: 0; color: rgba(255,255,255,0.5); } .inputText { font-size: 14px; width: 200px; height: 35px; } label { position: absolute; pointer-events: none; left: 20px; top: 18px; transition: 0.2s ease all; } /*DEFAULT*/ .logobox{position:absolute;top:0;left:0;width:275px;height:228px;background: #77b58a;z-index:99; display:block;} .logobox a{ display:block; width:100%; height:100%; } .logo{ width:202px; height:145px; position:relative; display:block; background:#FFF; margin:0 auto; top:50%; transform:translateY(-50%); -webkit-mask-image: url(img/logo.svg);mask-image: url(img/bggraphic.svg) repeat;-webkit-mask-size: cover;mask-size: cover; -webkit-clip-path: url('img/logo.svg'); } .shortside{width:44%;display:block;height:100%;float: left;position:relative;z-index: 1;overflow: hidden;} .shortside_content{width:100%;text-align:left;max-width: 550px;float:right;display:block;position:relative;height: 200px;/* background: green; */} .longside{width:56%;float:left;display:block;background: #ddd;height:100%;z-index:2;} .top_banner{ height:6px; background: #77b58a; } .home .header, .home .header_slider, .home .hs_image{ height:856px; } .home .slider_title{margin-bottom: -225px;} .header{top:0;position: relative;top: 0;z-index: 999999999;width: 100%;height:635px; } .header .ninesixty{ height:100%; } .nav-up {/* top: -115px; */} .nav-up .logo{ margin-top: -215px;} .header_slider{ height:635px; } .hs_image, .header_image{ height:635px; width:100%; position:relative ; background-size:cover !important; background-position:50% !important; overflow:hidden; } .flexslider .slides > li { position: relative; width: 100%; height: 635px; background: #444; } .slider_title{position: absolute;bottom:50%;right: 100%;z-index: 9;width: 500px;margin-right: 30px;margin-top: 74px;transform: translateY(50%);margin-bottom: -140px;} .slider_title h1, .slider_title h1 p{color:#FFF;font-size: 79px;line-height: 75px;font-family:'DomaineDisplayBold';margin-bottom:10px;} .slider_title h1 *{ font-size:100px; line-height:100px; font-family:'DomaineDisplayBold'; } .flexslider .slides .slider_title img{/* filter:grayscale(1) invert(1); */width: auto;max-height: 115px;height:auto;display:block;margin: 34px auto 0;} .slider_title h2{color:#FFF;font-size:20px;line-height:26px;font-family: Arial;} .kenburns { position: absolute; width: 100%; height: 100%; background-size: cover !important; background-position: 50% !important; -webkit-animation-name: kenburns; animation-name: kenburns; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 20s; animation-duration: 20s; opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } .kenburns:nth-child(1) { -webkit-animation-name: kenburns-1; animation-name: kenburns-1; z-index: 3; } @-webkit-keyframes kenburns-1 { 0% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 50% { opacity:1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } } /*HOME*/ /*CONTACT*/ .contactcontent p, .contactcontent p *{ font-size:22px; line-height:29px; } #sending, #sent{display:none;} .fields input, .fields textarea{width: 100%;display:block;margin-bottom: 0;padding: 0px 10px;font-size:16px;font-family: 'Raleway', sans-serif;background: rgba(0,0,0,0.05);border: 0;margin: 0 0 5px 0;line-height: 30px;height: 57px;} .fields textarea{ height:150px;} .fields input[type="submit"]{width: 130px;float:right;margin-right: 0;background: #6f576e;border:0;color: #FFF;font-size: 18px;text-transform: uppercase;font-weight: bold;} .contact_content{ margin:70px 0; } .mapdiv{ width:100%; height:500px; background:black; } /*MENU*/ .main_menu{ z-index:9999; position:fixed; top:0; left:0; width:100%; box-sizing:border-box; background:rgba(255,255,255,0.7); } .menubar{width: 100%;float:right;bottom:0;position:absolute;right:0;text-align:left; height:115px; box-sizing:border-box; padding:0 70px; } .submenu{ display:none; } .page_item { list-style: none; padding: 0; margin: 0; float:right; position:relative; position:relative;} .page_item a:first-of-type{ line-height:115px; color:#182b53;} .page_item > li { position: relative; float: right; height: 40px; width: auto; background: transparent; display:block; padding:100px 10px 20px 0px; } /*.current-menu-item, .current_page_parent {background: #be001a !important;}*/ .page_item a {/* text-transform:uppercase; */padding: 0 5px 0 15px;display: block;font-weight:600;} /*.menu_item_has_children:hover .first_level_submenu{visibility:visible; opacity:1; height:auto; }*/ .first_level_submenu{ width:auto;position:absolute;top:115px;left: 50%;list-style: none;margin-top:-10px;clear:both;text-align:left;box-sizing:border-box;padding:10px 0px;width: auto; display:block; visibility:hidden; opacity:0; transition:all 0.2s ; -webkit-transition:all 0.2s ; -o-transition:all 0.2s ; -moz-transition:all 0.2s ; height:0; } .first_level_submenu li{ position:relative; left:-50%;display:block; top:auto; background:rgb(0,194,223); margin-left:-30px; } .first_level_submenu li:first-child{border-top:10px solid rgb(0,194,223);} .first_level_submenu li:last-child, .first_level_submenu li:last-child(1), .first_level_submenu li:last-child(2){ border-bottom:10px solid rgb(0,194,223); } .first_level_submenu a{ line-height:30px !important; white-space:nowrap; text-transform:none; padding:0 20px; text-align:center;transition:all 0.2s ; -webkit-transition:all 0.2s ; -o-transition:all 0.2s ; -moz-transition:all 0.2s ; } .first_level_submenu li:hover a, .current-submenu-item a{ background:#00aac6; display:block; } .submenu_item_has_children{ position:relative; } .submenu_item_has_children:after{content:'A';font-family:'Arrows';-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);position:absolute;right:10px;color: #264348;z-index: 999;top: 4px;} .submenu_item_has_children:hover .second_level_submenu{visibility:visible; opacity:1; height:auto; } .submenu_item_has_children:hover .second_level_submenu{visibility:visible; opacity:1; height:auto; } .second_level_submenu{ width:auto;position:absolute;top:0;left: 100%; z-index:10; list-style: none;margin-top:-10px;clear:both;text-align:left;box-sizing:border-box;padding:10px 0px;width: auto; display:block; visibility:hidden; opacity:0; transition:all 0.2s ; -webkit-transition:all 0.2s ; -o-transition:all 0.2s ; -moz-transition:all 0.2s ; height:0; } .first_level_submenu .second_level_submenu li{ position:relative; left:0%;display:block; top:auto; background:rgba(255,255,255,0.4) !important; margin-left:-20px; } .second_level_submenu li:first-child, .second_level_submenu li:last-child{ border:0; } .second_level_submenu a{ line-height:30px !important; white-space:nowrap; text-transform:none; background:rgba(255,255,255,0.4) !important; padding:0 20px; text-align:center;transition:all 0.2s ; -webkit-transition:all 0.2s ; -o-transition:all 0.2s ; -moz-transition:all 0.2s ; } .second_level_submenu a:hover, .current-submenu-item a{ background:#fff !important; display:block; } .first_level_menu .menu_item:first-child .first_level_submenu .second_level_submenu, .first_level_menu .menu_item:nth-of-type(2) .first_level_submenu .second_level_submenu, .first_level_menu .menu_item:nth-of-type(3) .first_level_submenu .second_level_submenu{ left:unset; right:100%;} .mobileonly{ display:none; } .smartphoneonly{ display:none; } .mobilemenu_button{margin-top: 0;position: fixed;z-index: 99991;right: 60px;cursor:pointer;top: 60px;width: 127px;height: 42px;} .mobilemenu_button:after{content:"";display:block;position:absolute;right:0px;top:0;width:67px;height:46px;background: url("img/menubutton.png") no-repeat;background-size:contain;z-index: 99999;-webkit-filter: drop-shadow(0px 0px 1px 0 rgba(0,0,0,0.3));filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.3));} .mobilemenu_button:before{content:"MENU";color:#FFF;position:absolute;top:14px;left:-5px; font-size:18px; ;text-shadow: 0 0 5px rgba(0,0,0,0.4); transition:all 0.5s ; -webkit-transition:all 0.5s ; -o-transition:all 0.5s ; -moz-transition:all 0.5s } .mobilemenu_button:hover:before{ text-shadow:0 0 15px rgb(255,255,255,1); } .mobilmenu{z-index: 21474836471;right: -100%;position: fixed;width: 100%;max-width: 960px;background: rgb(63, 31, 61);height: 100%;top: 0; box-sizing: border-box;padding: 47px 0 50px 34px;overflow: scroll;transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;-moz-transition:all 0.5s;overflow: auto;overflow-x: hidden;} .mobilmenushow{right: 0;} .mobilmenu .logobox{left:60px;top:-250px;transition-delay: 0.3s;} .mobilmenushow .logobox{ top:0} .mobilmenu .menu{margin-top: 241px;margin-left: 50px;position: relative;max-height: calc( 100% - 288px );overflow-y: auto;overflow-x: hidden;display: block;} .mobilmenu ul{clear:both;position: relative;top: 0;text-align: left;padding: 0 0 6px;float: none;visibility: visible;opacity: 1;height: auto;} .mobilmenu li{list-style: none;float: none;display: block !important;clear:both;display:block;width:100%;padding: 8px 6px;box-sizing:border-box;margin-bottom:5px;text-align: left;left: 0;margin: 6px 0;} .page_item_has_children{ position:relative; display:block; } .page_item_has_children:hover .children{/* height:auto; */} .page_item_has_children a:first-of-type:after{content:"+";position:relative;right: -25px;top: 5px;color:#FFF;font-size: 53px;display:inline;font-weight: bold;font-family: Arial;} .page_item_has_children a.afterminus:after{ content:"-"; } .mobilmenu li ul {margin-left: 0;left: 0;/* background: rgba(0,0,0,0.3); */} .mobilmenu li ul li{padding: 5px 0;text-align: left;background: transparent;} .mobilmenu a{color: #FFF !important;display:block;clear:both;padding: 12px 0;/* text-transform: lowercase; */line-height:20px !important;font-size: 33px;/* margin: 10px 0; */font-family: "DomaineDisplayBold";} .mobilmenu .children{left:30px;height: 0;overflow: hidden; } .mobilmenu .children a{font-size:24px;line-height:24px;padding: 4px;font-family: Arial;font-weight: 400;} .children a:after{ display:none !important; } .mobilmenu li ul li a{text-transform: none;text-align: left;} .mobilmenuclose{float:right;background: rgba(0,0,0,0.1);color:#FFF;font-size: 44px;font-weight: bold;padding: 11px 16px 11px;text-align:Center;margin-top:5px;cursor:pointer;position: absolute;z-index: 99992;right: 24px;top: 29px;/* transform:scaleX(1.5); */} .mobilmenuclose span{ display:none} .mobilmenuclose:before{content:"CLOSE";font-size:18px;position:relative;top:0px;padding-right: 9px;/* transform:scale(0.7); */display:block;float:left;} .mobmenu{ width:100%; box-sizing: border-box; clear:both;} .mobmenu span{ text-transform: uppercase; background:rgba(255,255,255,0.1); width:100%; display:block; padding:20px 30px; margin-bottom: 5px; box-sizing:border-box;} .mobmenu .menu-item:hover:after, .mobmenu .current_page_item:after, .mobmenu .parent_of_current_page:after, .mobmenu .current_page_parent:after, .current-menu-item:after { display:none; } .mobilmenu .current_page_item{/* background:#001A38; */} .mobilmenu .menu-item .sub-menu a{text-align:left;padding: 0;} .mobilmenu .menu-item .sub-menu li:first-of-type{padding: 11px 0 0 0;} .mobilmenu .menu-item .sub-menu li:last-of-type{ padding:0 0 0px 0; } .regyourinterest{position: absolute;bottom: 0;left:60px;padding:20px 50px;font-size:24px;background:#77b58a;opacity: 0;} .regyourinterest:hover{ background:#c4b2c2; } .mobilmenushow .regyourinterest{ opacity:1; transition-delay:0.5s; } /*POSTS*/ @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.6.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2018 Daniel Eden */ .animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, 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 { from, 20%, 53%, 80%, 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 { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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 headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: 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; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, 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 { from, 20%, 40%, 60%, 80%, 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-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, 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 { from, 60%, 75%, 90%, 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-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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-duration: 0.75s; animation-duration: 0.75s; -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-animation-duration: 0.75s; animation-duration: 0.75s; -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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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; } 100% { 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; } /*RESPONSIVE*/ @media only screen and (max-width:1400px){ .nb_left { padding-right: 10px; padding-left: 40px; } h3 { font-size: 40px; line-height: 40px; } .slider_title h1, .slider_title h1 p{ font-size:55px; } .narrowbox .cl120, .narrowbox .cl80{ height:30px; } } @media only screen and (max-width:1300px){ .ninesixty{ width:100%; } .to_left{width: 20%; margin-left:2%; float: left;padding-right: 10px; text-align:right;} .to_left h3{ margin-bottom:20px; } .to_left h4{font-family: Arial;font-weight: bold;font-size: 24px;line-height: 24px;padding-bottom: 30px;} .to_right{width: 70%;margin-left: 3%; padding-left:30px; padding-right:30px; float: left;box-sizing:border-box;background-size:cover !important;background-position:50% !important;} .to_right, .to_right .nb_content *, .to_right *{ font-size:17px; } } @media only screen and (max-width:1024px){ .showhomeimage{width:50%;height: 300px;} .showhomecontent{width:50%;float:left;box-sizing:border-box;padding-left:20px; max-width: 360px;} .showhomewrapper{height: 300px;display:block;} .show_homes .showhomecontent{ max-width: 300px; } .show_homes h1{ font-size:25px; line-height:29px !important;} .cl120 { height: 50px; } .mobileonly{ display:block; } .mobilemenu_button{ display: block; right: 10px; cursor: pointer; top: 40px;} .mobilemenu_button:before{ display:none; } .mobilemenu_button:after { content: ""; display: block; position: absolute; right: 0px; top: 0; width: 50px; height: 40px; background: url(img/menubutton.png) no-repeat; background-size: contain; z-index: 99999; -webkit-filter: drop-shadow(0px 0px 1px 0 rgba(0,0,0,0.3)); filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.3)); } .mobilmenu .menu { margin-top: 99px; margin-left: 0px; position: relative; max-height: calc( 100% - 131px ); overflow-y: auto; overflow-x: hidden; } body, html{max-width:100%; position:relative; } .desktoponly{ display:none !important;} .ninesixty{ width:100%;} .top_banner{ height:6px; background: #77b58a; } .home .shortside{width:100%;height: 753px;float: left;} .shortside{width:100%;height: 553px;float: left;} .shortside_content{width:100%; max-width: 550px;float:right; height: 200px; } .longside{width:100%;float:left;display:block;background: transparent;height: 0;z-index:2;} .logobox { top: 0; left: 0; width: 100%; height: 120px; } .logo { width: 244px; height: 77px; margin: 0 20px; background: url(img/logo_mobile.png); background-size:contain; -webkit-mask-image: unset; mask-image: unset; -webkit-mask-size: unset; mask-size: unset; background-repeat: no-repeat; } .home .header{height: 195px;} .home .slider_title{display: block;margin: 0;top: 289px;transform: translateY(0);position: relative;width: 100%;right: 0; padding:20px; } .home .slider_title h1, .home .slider_title h1 p {color: #FFF;font-size: 47px;line-height: 47px;} .slider_title h1 * {font-size: inherit;line-height: inherit;} .header{top:0;position: relative;top: 0;z-index: 999999999;width: 100%;height:120px; } .header .ninesixty{ height:100%; } .nav-up {/* top: -115px; */} .nav-up .logo{ margin-top: -215px;} .header_slider, .home .header_slider, .home .hs_image{height: 285px !important;} .header_slider{ position:absolute; top:120px; left:0; width:100%; } .hs_image, .header_image{height:285px;width:100%;position: absolute;background-size:cover !important;background-position:50% !important;overflow:hidden;top: 0;} .flexslider .slides > li {position: relative;width: 100%;height: auto;background: transparent;} .flexslider {height: 285px;} .slider_title { display: block;margin: 0;top: 309px;transform: translateY(0);position: relative;width: 100%;right: 0; padding:20px; } .slider_title h1, .slider_title h1 p {color: #FFF; font-size: 55px;line-height: 55px; } .hb_left{ width:100%; } .hb_left .box_content { padding: 20px; } .hb_left .grid_title { font-size: 55px; line-height: 55px;} .hb_right{ width:100%; } .r_top{ display:none; } .r_bottom_right{ display:none; height:284px; max-height:unset; } .r_bottom_left{ width:100%; height:284px; max-height:unset; } .nb_left {width: 100%;float: right;padding: 0 20px;left: 0 !important;position: relative;display: block;clear: both;z-index: 999;opacity: 1 !important;} .nb_right{width: 92%;float:left;height: 204px !important;margin: 4% 4% 0;right: 0 !important;} .contact .nb_right{ height:auto !important;} .notopmargin{ margin-top:0; } .fw_imagebg{width:100%;height: 285px !important;} .fw_imagetitle{ display:none; } .fw_content_wrapper { transform: scale(1); width: 100%; text-align: left; max-width: 100%; float: none; display: block; position: relative; padding-left: 0; position: relative; top: 0%; transform: translateY(0%); margin-top: -0; clear: both; left: 0; right: unset; } .fwbox_slider, .fwb_image { min-height: 285px; } .fwbox_slider .flex-control-nav { width: 100%; position: absolute; bottom: 10px; left:10px; text-align: left;} #fwbox2{ width:100%; padding:20px; } #fwbox2 .cl120{ height:20px; } .partner_logos{padding: 40px 0;} .pl_title { font-size: 40px; line-height: 40px; margin: 0 auto 30px; } .partner_logo{display: block;height:100px;width: 50%;text-align:center;position:relative;float: left;top:0;} .partner_logo img{display:block;position:relative;top:50%;transform:translateY(-50%);margin: 0 auto;max-width: 84%;max-height: 135px;} .partner_logo:nth-of-type(1) img{ max-height:50px; } .partner_logo:nth-of-type(3) img{ max-height:60px; } .partner_logo:nth-of-type(4) img{ max-height:50px; } .partner_logo:nth-of-type(6) img{ max-height:40px; } .footer_left { width: 100%; padding:20px; } .footer_right { width: 100%; padding:0 20px; } .footer_right .fields { width: 100%; margin-right: 0%; margin-bottom: 2%; } .fbcleft, .fbcright{ width:100%; text-align:center; } .textonly { margin: 40px auto; } .to_left { width: 100%;margin-left: 0%; padding:0 20px; text-align: left; } .to_left h3{ font-size:35px; line-height:35px; } .to_right{ width:100%; margin:0; padding: 0 20px; } .documents .cl120{ height:50px; } .documents_left{width: 100%;padding:0 20px;margin-right: 0%;float: none;} .documents_right {width: 100%;padding:0;margin-right: 0%;float: none;} .documents_content {padding: 40px;display: grid;grid-template-columns: 1fr;grid-template-rows: 1fr;grid-gap: 36px 15px;} .docdescription { padding: 0 ; display: block;} .dr_title{ padding:40px; } .mp_intro * { font-size: 20px; line-height: 26px; font-weight: bold; color: #999999; padding:0 20px; } .detailed_intro{ width:100%; float:left; padding:0 20px; } .detailed_intro *{ font-size:20px; line-height:24px; font-weight:bold; color:#999999; padding-right:0; } .detailed_logo{ width:100%; float:unset; margin:0 auto; } .detailed_logo img{position:relative;padding:10px;max-width:50%; max-height:122px;display:block;margin:0 auto;top:10px;/* transform: translateY(-50%); */} .lots_left { width:100%; float:left; padding:0 20px; position:relative; } .lots_right{width:100%;margin:0;padding: 0 0px;height: 350px !important;} .detailed_iconbar { position: absolute; bottom: 5px; left:unset; right:0px;} .d_title {font-size:35px; line-height:35px; } .lots .cl50{ height:20px; } .nd_lot { width: 100%; float: left; margin-right: 0%; position: relative;} .narrowbox { margin: 20px auto; padding:0 20px;} .narrowbox h1{ color: #3f1f3d !important; font-size: 35px; line-height: 35px; text-align:center; display:block; } .narrowbox h1:after { content: ""; clear: both; display: block; width: 100%; height: 38px; border-bottom: 1px solid #d8d8d8; margin-bottom: 18px; } } @media only screen and (max-height:800px){ .plan_infowindow{position:fixed;z-index:9999999991;width:100%;max-width:900px;height:90%;left:50%;top: -250% !important;transform:translate(-50%,-50%);margin-left:0px;background:#ffffff;box-sizing:border-box;padding: 0 0;opacity:1;} .showplaninfo .plan_infowindow{ left:50%;top: 50% !important;transform:translate(-50%,-50%); } .plan_lotno { padding: 15px 0 16px 15px; font-family: "DomaineDisplayBold"; font-size: 25px; line-height: 72px; height: 92px; } .plan_package { display:none; } .plan_halswellcommons { width: 50%; height: 92px; } .plan_halswellcommons:before { content: ""; width: 46px; height: 78px; background: url(img/logo_plan.php?color=available) no-repeat; left:unset; margin-left: -78px; top: 30px; } .plan_halswellcommons * { position:absolute; top: 50%; transform: translateY(-50%); color: inherit; font-size: 14px; text-transform: uppercase; font-weight: bold; text-align: center; padding-top: 0; } .plan_closebox { top: -0; width: 30px; height: 30px; background: #ee5f5b; margin: 0px; cursor: pointer; z-index: 99999999999; } .plan_closebox:after { font-size: 24px; padding: 0; line-height: 30px; width: 32px; } .valid_image { width: 100%; height: 315px; } .plan_logo { position: absolute; top: 340px; left: 50%; transform:translateX(-50%); max-width: 200px; height: 70px;} .plan_enquiry a { margin-left: 50%; transform:translateX(-50%); width:70%; text-align:center;; padding: 10px 40px; font-size:14px; } .mobilmenu a { padding: 5px 0; line-height: 20px !important; font-size: 30px; } .mobilmenu ul{padding: 0;} .page_item_has_children a:first-of-type:after {right: -25px;top: 0px; font-size: 33px; } } @media only screen and (max-width:767px){ .mobileonly{ display:block; } body, html{ width:100%;} .ninesixty{ width:100%;} .mobilmenu .logobox .logo{ width:200px; background-repeat:no-repeat; margin-top:10px; } .mobilmenuclose:before{ display:none; } .mobilmenu .logobox, .regyourinterest{ left:0; width:100%;} .sold{position:absolute;top: -111px;right: -113px;background:#ED1C24;font-size: 24px;font-family: 'DomaineDisplayBold';color:#FFF;text-align:center;width: 203px;padding: 162px 0 14px 0;transform: rotate(45deg);} .showplaninfo .plan_infowindow{position:fixed;z-index:9999999991;width:100%;max-width:900px;height:90%;margin-left:0px;top: 50%;background:#ffffff;box-sizing:border-box;padding: 0 0;opacity:1;} .showplaninfo .plan_infowindow{} .plan_lotno { padding: 15px 0 16px 15px; font-family: "DomaineDisplayBold"; font-size: 25px; line-height: 72px; height: 92px; } .plan_package { display:none; } .plan_halswellcommons { width: 50%; height: 92px; } .plan_halswellcommons:before { content: ""; width: 46px; height: 78px; background: url(img/logo_plan.php?color=available) no-repeat; left:unset; margin-left: -78px; top: 30px; } .plan_halswellcommons * { position:absolute; top: 50%; transform: translateY(-50%); color: inherit; font-size: 14px; text-transform: uppercase; font-weight: bold; text-align: center; padding-top: 0; } .plan_closebox { top: -0; width: 30px; height: 30px; background: #ee5f5b; margin: 0px; cursor: pointer; z-index: 99999999999; } .plan_closebox:after { font-size: 24px; padding: 0; line-height: 30px; width: 32px; } .valid_image { width: 100%; height: 315px; } .plan_logo { position: absolute; top: 340px; left: 50%; transform:translateX(-50%); max-width: 200px; height: 70px;} .plan_enquiry a { margin-left: 50%; transform:translateX(-50%); width:70%; text-align:center;; padding: 10px 40px; font-size:14px; } .document_greybar, .document_greybar *{ font-size:16px; line-height:22px; padding: 10px;} .slider_title h1, .slider_title h1 p { text-align:center; color: #FFF; font-size: 35px; line-height: 55px; } .showhomeimage{width:100%;height: 300px;} .showhomecontent{width:100%;float:left;box-sizing:border-box;padding-left:20px; max-width: 360px;} .showhomewrapper{height: auto;display:block;} .show_homes .showhomecontent{max-width: unset;margin: 50px 0 30px 0;top: 0%;transform: unset;padding: 0 35px;} .show_homes h1{ font-size:25px; line-height:29px !important;} .documents_content a{padding: 0 0px 70px;width: 100%;} .doctitle{display:block;font-weight:bold;font-size:24px;line-height: 27px;margin-bottom: 18px;} .docdescription{padding: 0 0px;display:block;} .docdownload{position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#3f1f3d;color:#FFF;text-transform:uppercase;font-size:12px;padding:5px 20px;margin-left: 17px;} .docdownload:before{content:'';width: 42px;height: 49px;position:absolute;background:url('img/icon_pdf_large.png');position:absolute;background-size: contain;background-repeat: no-repeat;left: -40px;top: -14px;} .mp_box { position: absolute; top: unset; bottom:0; right: 0; width: 40%; } .mp_plan svg{ height:100%; max-height:700px; } } @media only screen and (max-width:414px){ } @media only screen and (max-width:360px){ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .logo{ background: ('img/logo.png'); } } @supports (-ms-ime-align: auto) { .logo{ background: ('img/logo.png'); } } @supports (-ms-accelerator: true) { .logo{ background: ('img/logo.png'); } }