/* CSS Document */ body { font-family: 'Work Sans', sans-serif; letter-spacing: 1px; min-width: 100%; min-height: 100%; background-color: #FAFAFA; padding-right: 0px !important; background-image: url("https://imfwbg.connectionshousingapps.com/images/AdobeStock_84849478.jpg"); background-position:center; background-size:cover; background-attachment:fixed } .container-main { max-width: 1920px; min-width: 680px; margin: 0 auto; padding: 0 15px; background-color: #FFFFFF } h1 { font-size:1.5em; font-weight:bold } h2 { font-size:1.25em; } select { color:#000000; font-weight: bold; } select option:disabled { color: #c0c0c0; font-weight: 100; } .select { } .selectBG { background-color:rgba(27,68,155,.15); } .vcenter { display: inline-block; vertical-align: middle; float: none; } .vertical-center { min-height: 100%; min-height: 100vh; display: flex; align-items: center; } .eventDates { background-color: #CCCFD7 } .shoulderDates { background-color: #F8F8F8 } .sliding-u-l-r { text-decoration: none; display: inline-block; border-bottom: 1px solid transparent; transition: 0.5s ease; white-space: nowrap; height: 40px; width:100% } .sliding-u-l-r:hover { border-bottom: 1px solid white; width: 100% } .socialMedia:link { color: #333 } a.socialMedia:link { color: #333; text-decoration: none } a.socialMedia:visited { color: #333; text-decoration: none } a.socialMedia:hover { color: #d3242c; } a.socialMedia:active { color: #d3242c; } .manageEventsBetter { visibility:hidden } .callOut:link { color: #444444 } a.callOut:link { color: #444444; text-decoration: none } a.callOut:visited { color: #000000; text-decoration: none } a.callOut:hover { color: #000000; } a.callOut:active { color: #000000; } /*Loader*/ .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-color:#F2F2F2; display:table; text-align:center } .timerGradBG { background: #FFF; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#FFF,#F0F0F0); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#FFF, #F0F0F0); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#FFF, #F0F0F0); /* For Firefox 3.6 to 15 */ background: linear-gradient(#FFF, #F0F0F0); /* Standard syntax */ } /* Navbar */ .navbar { border-radius: 0 } .navbar-header { background-color: transparent } .navbar-header > .navbar-brand { color: #FFF } .navbar-header > .navbar-brand:hover, .navbar-header > .navbar-brand:focus { color: #FFF } .navbar-brand { font-size: 1.15em; } .navbar-default { background-color: rgba(0,72,151,.95); border-bottom: 1px solid #CCC; margin: 0; } .navbar-nav > li > a { padding-left: 30px; padding-right: 30px } .navbar-default .navbar-nav > li > a { color: #FFF } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: transparent; color: #FFF; } .navbar-default .navbar-nav > li.dropdown.active.open > a, .navbar-default .navbar-nav > li.dropdown.active.open > ul.dropdown-menu a:hover, .navbar-default .navbar-nav > li.dropdown.open > a, .navbar-default .navbar-nav > li.dropdown.open > ul.dropdown-menu a:hover { color: #fff; background-color: #024a96; border-color: transparent; } .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* Gray Scale */ .hover01 figure img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .hover01 figure:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } /* Zoom In #1 */ .hover01 figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .hover01 figure:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } .hover01 figure .calloutHover { background-color: rgba(211,36,44,.9); -webkit-transition: background-color 1s; transition: background-color 1s; } .hover01 figure:hover .calloutHover { background-color: #d3242c } /* Form Elements */ input[type="text"].placeholderWhite::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #FFF; } input[type="text"].placeholderWhite::-moz-placeholder { /* Chrome/Opera/Safari */ color: #FFF; } input[type="text"].placeholderWhite:-ms-input-placeholder { /* Chrome/Opera/Safari */ color: #FFF; } input[type="text"].placeholderWhite:-moz-placeholder { /* Chrome/Opera/Safari */ color: #FFF; } .btn-default { color: #d3242c; background-color: transparent; border:none } .btn-default.focus, .btn-default:focus { color: #333; background-color: transparent; border:none } .btn-default:hover { color: #333; background-color: transparent; border:none } .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default { color: #333; background-color: transparent; border:none } .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { color: #333; background-color: transparent; border:none } .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default { background-image: none } .btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled].focus, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover { background-color: transparent; border:none } .btn-default2 { color: #333; background-color: #FFF; border-color: #CCC; border-radius:0 } .btn-default2.focus, .btn-default2:focus { color: #333; background-color: #EEE; border-color: #CCC; border-radius:0 } .btn-default2:hover { color: #333; background-color: #EEE; border-color: #CCC; border-radius:0 } .btn-default2.active, .btn-default2:active, .open>.dropdown-toggle.btn-default2 { color: #333; background-color: #EEE; border-color: #CCC; border-radius:0 } .btn-default2.active.focus, .btn-default2.active:focus, .btn-default2.active:hover, .btn-default2:active.focus, .btn-default2:active:focus, .btn-default2:active:hover, .open>.dropdown-toggle.btn-default2.focus, .open>.dropdown-toggle.btn-default2:focus, .open>.dropdown-toggle.btn-default2:hover { color: #333; background-color: #EEE; border-color: #CCC; border-radius:0 } .btn-default2.active, .btn-default2:active, .open>.dropdown-toggle.btn-default2 { background-image: none } .btn-default2.disabled.focus, .btn-default2.disabled:focus, .btn-default2.disabled:hover, .btn-default2[disabled].focus, .btn-default2[disabled]:focus, .btn-default2[disabled]:hover, fieldset[disabled] .btn-default2.focus, fieldset[disabled] .btn-default2:focus, fieldset[disabled] .btn-default2:hover { background-color: transparent; border-color: #CCC; border-radius:0 } .btn-primary { color: #FFF; background-color: rgba(227,8,13,.9); border-color: #A3205B } .btn-primary.focus, .btn-primary:focus { color: #FFF; background-color: #e3080d; border-color: #e3080d } .btn-primary:hover { color: #FFF; background-color: #e3080d; border-color: #e3080d } .btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary { color: #FFF; background-color: #e3080d; border-color: #e3080d } .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { color: #FFF; background-color: #e3080d; border-color: #e3080d } .btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary { background-image: none } .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { background-color: #e3080d; border-color: #e3080d } .btn-primary2 { color: #FFF; background-color: rgba(3,74,148,.9); border-color: #4AC0B1; border-radius:0 } .btn-primary2.focus, .btn-primary2:focus { color: #FFF; background-color: #024a95; border-color: #024a95 } .btn-primary2:hover { color: #FFF; background-color: #024a95; border-color: #024a95 } .btn-primary2.active, .btn-primary2:active, .open>.dropdown-toggle.btn-primary2 { color: #FFF; background-color: #024a95; border-color: #024a95 } .btn-primary2.active.focus, .btn-primary2.active:focus, .btn-primary2.active:hover, .btn-primary2:active.focus, .btn-primary2:active:focus, .btn-primary2:active:hover, .open>.dropdown-toggle.btn-primary2.focus, .open>.dropdown-toggle.btn-primary2:focus, .open>.dropdown-toggle.btn-primary2:hover { color: #FFF; background-color: #024a95; border-color: #024a95 } .btn-primary2.active, .btn-primary2:active, .open>.dropdown-toggle.btn-primary2 { background-image: none } .btn-primary2.disabled.focus, .btn-primary2.disabled:focus, .btn-primary2.disabled:hover, .btn-primary2[disabled].focus, .btn-primary2[disabled]:focus, .btn-primary2[disabled]:hover, fieldset[disabled] .btn-primary2.focus, fieldset[disabled] .btn-primary2:focus, fieldset[disabled] .btn-primary2:hover { background-color: #024a95; border-color: #024a95 } .btn-secondary { color: #000; background-color: transparent; border-color: #000; border-radius: 0 } .btn-secondary.focus, .btn-secondary:focus { color: #FFF; background-color: #00ADBC; border-color: #00ADBC } .btn-secondary:hover { color: #FFF; background-color: #00ADBC; border-color: #00ADBC } .btn-secondary.active, .btn-secondary:active, .open>.dropdown-toggle.btn-secondary { color: #FFF; background-color: #00ADBC; border-color: #00ADBC } .btn-secondary.active.focus, .btn-secondary.active:focus, .btn-secondary.active:hover, .btn-secondary:active.focus, .btn-secondary:active:focus, .btn-secondary:active:hover, .open>.dropdown-toggle.btn-secondary.focus, .open>.dropdown-toggle.btn-secondary:focus, .open>.dropdown-toggle.btn-secondary:hover { color: #FFF; background-color: #00ADBC; border-color: #00ADBC } .btn-secondary.active, .btn-secondary:active, .open>.dropdown-toggle.btn-secondary { background-image: none } .btn-secondary.disabled.focus, .btn-secondary.disabled:focus, .btn-secondary.disabled:hover, .btn-secondary[disabled].focus, .btn-secondary[disabled]:focus, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary.focus, fieldset[disabled] .btn-secondary:focus, fieldset[disabled] .btn-secondary:hover { background-color: #00ADBC; border-color: #00ADBC } .btn-accent { color: #333; background-color: #FFF; border-color: #d3242c; border-radius: 0 } .btn-accent.focus, .btn-accent:focus { color: #333; background-color: #F8F8F8; border-color: #d3242c } .btn-accent:hover { color: #333; background-color: #F8F8F8; border-color: #d3242c } .btn-accent.active, .btn-accent:active, .open>.dropdown-toggle.btn-accent { color: #333; background-color: #F8F8F8; border-color: #d3242c } .btn-accent.active.focus, .btn-accent.active:focus, .btn-accent.active:hover, .btn-accent:active.focus, .btn-accent:active:focus, .btn-accent:active:hover, .open>.dropdown-toggle.btn-accent.focus, .open>.dropdown-toggle.btn-accent:focus, .open>.dropdown-toggle.btn-accent:hover { color: #333; background-color: #F8F8F8; border-color: #d3242c } .btn-accent.active, .btn-accent:active, .open>.dropdown-toggle.btn-accent { background-image: none } .btn-accent.disabled.focus, .btn-accent.disabled:focus, .btn-accent.disabled:hover, .btn-accent[disabled].focus, .btn-accent[disabled]:focus, .btn-accent[disabled]:hover, fieldset[disabled] .btn-accent.focus, fieldset[disabled] .btn-accent:focus, fieldset[disabled] .btn-accent:hover { background-color: #F8F8F8; border-color: #d3242c } .form-control { border-radius: 0 } .btn-primary { border-radius: 0 } .fa-angle-right { background-color: #FFF; color: #00ADBC } .fa-angle-left { background-color: #FFF; color: #00ADBC } .tierBadge { position:absolute; z-index:3; margin:0; background:#d3242c; color:#ffffff; font-size:1.1em; } .thumbnailImg { width:250px; min-height:140px; height:140px; max-height:140px; margin:0 auto; } .thumbnailImgTest { width:250px; min-height:140px; height:140px; max-height:140px; margin:0 auto; } /*Animations*/ .calloutImg { opacity: 1; } .calloutImg:hover { opacity: .75; } @media screen and (max-width: 991px) { .increasePaddingTop { padding-top:246px !important } } @media screen and (max-width: 1083px) and (min-width:992px) { .increasePaddingTop { padding-top:185px !important } } @media screen and (max-width: 1000px) { .hideBrand { display:none } } @keyframes slide { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .slideAnimate { opacity:0; -webkit-animation: slide 1s ease 2s forwards; -moz-animation: slide 1s ease 2s forwards; -o-animation: slide 1s ease 2s forwards; animation: slide 1s ease 2s forwards; } .slideAnimate2 { opacity:0; -webkit-animation: slide 1s ease 2.25s forwards; -moz-animation: slide 1s ease 2.25s forwards; -o-animation: slide 1s ease 2.25s forwards; animation: slide 1s ease 2.25s forwards; } .slideAnimate3 { opacity:0; -webkit-animation: slide 1s ease 2.5s forwards; -moz-animation: slide 1s ease 2.5s forwards; -o-animation: slide 1s ease 2.5s forwards; animation: slide 1s ease 2.5s forwards; } .slideAnimate4 { opacity:0; -webkit-animation: slide 1s ease 2.75s forwards; -moz-animation: slide 1s ease 2.75s forwards; -o-animation: slide 1s ease 2.75s forwards; animation: slide 1s ease 2.75s forwards; } .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(150%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp{ animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== expandOpen ============================================== */ .expandOpen{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } }/* CSS Document */