@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); }						
        }