.flex { display: flex; }
.align-center { justify-content: center; }
.align-vert,.align-vert.align-center { align-items: center; }

.modal { display: none; }
.modal--show,
.modal--hide { display: flex; } /* classes fired by js for animation control */

/* This is on the wrapper for the whole modal */
.modal--align {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}
.modal__container {
    position: relative;
    width: 100%;
    max-width: 900px;
    padding: 20px 20px 0px 20px;
    margin: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
/* As there is no href to avoid the hash being added to the URL when clicked we add a pointer */
/* This 'x' is hidden from screen readers as there is an accessible close button in the modal */
.modal__close--x:hover {
    cursor: pointer;
}
/* Animations */
/* Open */
.modal.modal--show {
    animation: modal-open 0.3s;
}
@keyframes modal-open {
    0%    { opacity: 0; }
    100%  { opacity: 1; }
}

/* Close */
.modal.modal--hide {
    animation: modal-close 0.3s;
}
@keyframes modal-close {
    0%    { opacity: 1; }
    100%  { opacity: 0; }
}
.modal__close--x {
    position: absolute;
	    line-height: 19px;
	    top: 10px;
	    right: 10px; 
	    font-size: 32px;
	    font-weight: 700;
	    line-height: 1;
	    color: #000;
	    text-shadow: 0 1px 0 #fff;
	    font-family: "Open Sans", "Arial","sans-serif";
	    opacity: .2;
	}
.modal {
    text-align: center;
}
.modal__container [id*="sec-"] {
    display: block !important;
    overflow: hidden;
}
.modal__close--x {
    z-index: 1;
}
	
/* Hint Download CSS */
.u-responsive-sm .download-hint,
.u-responsive-xs .download-hint,
.download-hint.hidden {
    display: none;
}

.download-hint {
	position: relative;
	z-index: 1000;
}
        
.download-hint .hint-background {
    height: 320px;
    width: 100px;
    position: fixed;
    bottom: 0;
    opacity: 0.8;
    margin-left: 60px;
}
        
.download-hint .hint-container {
    height: 325px;
    width: 100px;
    position: fixed;
    bottom: 20px;
    z-index: 10;
    margin-left: 60px;
    text-align: center;
}
        
.download-hint .hint-message {
    color: #ffffff;
    font-family: Monserrat, sans-serif;
    font-size: 21px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
	text-shadow: -1px -1px 0 #333,  1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
}
        
.download-hint .hint-arrow {
    font-size: 42px;
    bottom: 30px;
    position: absolute;
    left: 50%;
    margin-left: -75px;
    animation-name: download-hint-arrow-animation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;
    z-index: 1000;
}
      
.download-hint-top.download-hint .hint-container {
    top: -55px;
    right: 80px;
    bottom: 0px;
}
.download-hint-top.download-hint .hint-arrow {
    transform: rotate(180deg);
}
	
.download-hint-top.download-hint .hint-message {
    position: absolute;
    top: 320px;
    right: 5px;
}
  
@keyframes download-hint-arrow-animation {
    0% {
        bottom: 0;
    }
        
    50% {
        bottom: 25px;
    }
        
    100% {
        bottom: 0;
    }
}
        
@-webkit-keyframes download-hint-arrow-animation {
    0% {
        bottom: 0;
    }
        
    50% {
        bottom: 25px;
    }
        
    100% {
        bottom: 0;
    }
}
/* END of Hint Download CSS */