@media only screen and (max-width: 1000px) { .desktopOnly { display:none; } } .no-scroll { overflow:hidden; } .modalCloseButton { color:#aaa; float:right; font-size:28px; font-weight:bold; text-decoration:none; cursor:pointer; } .modalScrollCloseButton_containerOuter { position:absolute; top:10; right:0; width:35px; } .modalScrollCloseButton_containerInner { position:relative; } .modalScrollCloseButton { color:#aaa; font-size:28px; font-weight:bold; text-decoration:none; cursor:pointer; position:fixed; } .modalCloseButton:hover, .modalCloseButton:focus, .modalScrollCloseButton:hover, .modalScrollCloseButton:focus { color:black; } .modalButtonSaveEdits, .modalScrollButtonSaveEdits { background-color:var(--appColor_green2); border: 1px solid var(--appColor_green1); border-radius:4px; color:white; padding: 6px 17px; text-align:center; text-decoration:none; outline:none; cursor:pointer; font-size:12px; } .modalButtonSaveEdits:hover, .modalScrollButtonSaveEdits:hover { background-color:var(--appColor_blue1); border: 1px solid var(--appColor_blue1); } .modalScrollButtonSaveEdits { position:fixed; } @media only screen and (max-width: 1000px) { .modalButtonSaveEdits, .modalScrollButtonSaveEdits { font-size:14px; } } /* _________________________________ MODAL: Load Screen 1 ____________________________________ */ @keyframes animateLoader { from {opacity: 0} to {opacity: 0.7} } #modalLoadScreen { opacity:0.7; background-color:var(--appColor_loadBackground1); text-align:center; animation-name:animateLoader; animation-duration:0.2s; z-index: 10; } #modalLoadScreenContent { margin:auto; margin-top:15%; width:300px; height:100px; position:relative; opacity:1; text-align:center; } /* _________________________________ MODAL FRAMEWORK ____________________________________ */ .modalBackdrop { font-size:15px; display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4); animation-name:fadeIn; animation-duration:0.3s; /*animation-name:animatetop; animation-duration:0.2s;*/ } .modalBackdrop_tableCenter1 { position:absolute; display:table; top:0; left:0; width:100vw; height:100vh; } .modalBackdrop_tableCenter2 { display:table-cell; vertical-align:middle; } .modalContent { background-color:white; border: 2px solid var(--appColor_modalBorders1); border-radius:5px; position:relative; overflow:scroll; margin:auto; /*animation-name:animatetop; animation-duration:0.3s;*/ } .modalContent input, .modalContent select { font-size:14px; } .modalContentInner { padding:0px 20px; } /* _________________________________________________ MODAL: Helper ____________________________________________________ */ /* added CLASS for budget2, but should prob change all instances to class? */ #modal_helper { z-index:8; } .modal_helper { z-index:7; } #modal_helper .modalScrollCloseButton, .modal_helper .modalScrollCloseButton, .modal_standard .modalScrollCloseButton { color:var(--appColor_modalCloseButton1); } #modal_helper .modalScrollCloseButton:hover, .modal_helper .modalScrollCloseButton:hover, .modal_standard .modalScrollCloseButton:hover { color:black; transform: translateX(1px) scale(1.6,1.5); } #modal_helper .modalContent, .modal_helper .modalContent { background-color:var(--appColor_grey1); color:black; font-size:22px; padding:50px 50px; padding-bottom:30px; min-width:340px; width:50%; max-width:900px; height:auto; margin:auto; overflow:auto; } #modal_helper_text { padding-bottom:40px; } @media only screen and (max-width: 1000px) { #modal_helper .modalContent { font-size:19px; padding: 50px 30px; padding-bottom:0px; min-width:240px; width:70%; } } .icon_question-mark_container { display:inline-block; position:relative; height:18px; } .icon_question-mark { height:100%; vertical-align:bottom; margin-left:3px; margin-bottom:-3px; cursor:pointer; border-radius:50%; } .icon_question-mark:hover { transform: translateX(1px) scale(1.6,1.5); background-color:var(--appColor_green3); } @keyframes animate_slideIn_fromTop_200px { from { top:-210px; opacity:0; } to { top:0; opacity:1; } } @keyframes animate_slideIn_fromBottom_200px { from { bottom:-210px; opacity:0; } to { bottom:0; opacity:1; } } @keyframes animate_slideIn_fromLeft_200px { from { left:-130px; opacity:0; } to { left:0; opacity:1; } } @keyframes animate_slideIn_fromRight_200px { from { right:-130px; opacity:0; } to { right:0; opacity:1; } } .animate_old-top { animation-name: animatetop; animation-duration: 0.3s; } @keyframes animatetop { from {top: -300px; opacity: 0} to {top: 0; opacity: 1} } @keyframes animateMenu { from {opacity: 0} to {opacity: 1} } @keyframes animateMenuDropper { from { opacity:0; transform: translateY(-20%) } to { opacity:1; transform: translateY(0%) } } .animate_fadeIn { animation-name: fadeIn; animation-duration: 0.5s; } @keyframes fadeIn { from {opacity: 0} to {opacity: 1} } /*___________________________ ENTRANCES ___________________________*/ .stretchLeft { animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1s; -webkit-animation-duration: 1s; 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); } } .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); } 60% { transform: scaleY(1); } 80% { transform: scaleY(1); } 100% { transform: scaleY(1); } /*80% { transform: scaleY(1); } 100% { transform: scaleY(1); }*/ } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1); } 60% { -webkit-transform: scaleY(1); } 80% { -webkit-transform: scaleY(1); } 100% { -webkit-transform: scaleY(1); } } .animate-expandUp { animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 1s; -webkit-animation-duration: 1s; 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); } } .animate-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); } } /* shakes at end */ .flipInX { -webkit-animation-name: flipInX; animation-name: flipInX; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); } 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); } } /* no shake at end */ .flipInX-soft { -webkit-animation-name: flipInX-soft; animation-name: flipInX-soft; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; } @keyframes flipInX-soft { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } /* HOVERS */ .animate-pulse { animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 2s; -webkit-animation-duration: 2s; 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; } } .animate-float { animation-name: float; -webkit-animation-name: float; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes float { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes float { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } .animate-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; } .animate-tossingSlow { animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 5s; -webkit-animation-duration: 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); } } .animate-left-right { animation-name: left-right; -webkit-animation-name: left-right; animation-duration: 4s; -webkit-animation-duration: 4s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes left-right { 0% { transform: translateX(-8%); } 50% { transform: translateX(29%); } 100% { transform: translateX(-8%); } } @-webkit-keyframes left-right { 0% { -webkit-transform: translateX(-8%); } 50% { -webkit-transform: translateX(29%); } 100% { -webkit-transform: translateX(-8%); } } .animate-spin360 { animation-name: spin360; -webkit-animation-name: spin360; animation-duration: 8s; -webkit-animation-duration: 8s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes spin360 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes spin360 { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(0deg); } }