/* MODAL Magazine issues ///////////////////////////////-  */

/* THUMBNAIL GRID --------------------  */

.modal-box { width: 60%; max-width: 600px; margin: 50px auto 250px auto; text-align: center; }
.modal-box h5 { margin: 25px 0 20px; font-size: 1.85em; font-weight: 400; line-height: 1.3em; color: grey; text-align: center; }
.modal-box img { width 100%: border: 1px solid lightgrey; box-shadow: 13px 20px 25px rgba(0,0,0,0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    }



/* MODAL Fenster -------------------------  */

.modal { overflow-y: auto !important; }

.modal-dialog { z-index: 9998; width: 80%; max-width: 1000px; margin: 40px auto !important; }
.modal-content { z-index: 9997; border-radius: 12px;}
.modal-body { z-index: 9999; padding: 0 5% 30px 5%; max-height: none !important; overflow-y: visible !important; }
.modal-header { border-bottom: 0; padding: 0; }
.modal-header .close {font-size: 2.5em; padding: 20px 25px 0; color: #000 }

/* Modal Fade Transition */
.modal.fade .modal-dialog { transform: none !important; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.modal.fade { transition: opacity 0.5s ease-in-out; }
.modal-backdrop.fade { transition: opacity 0.5s ease-in-out; }
.modal.fade.in .modal-dialog { opacity: 1; }



/* MODAL Content -------------------------  */

/* Cover Bild */
.modal-image { display: block; width: 100%; max-width: 360px; margin: 55px auto 30px; }
/* Magazin Titel + No. */
.modal-headline { margin: 40px 0 20px; padding: 0 0 8px 10px; font-size: 36px; line-height: 1.2; color: #222; 
	border-bottom: 1.5px solid grey;
    }
/* Text */
.modal-text { padding: 30px 5% 0 3%; } 
.modal-text > h4 { margin-top: 30px; font-size: 1.5em; }
.modal-text p { margin-top: 20px; font-size: 1.1em; line-height: 1.4em; text-align: justify; }


/* Get it Buttons */
.modal-button { text-align: center; margin: 70px 0 50px; }
.modal-button .btn { padding: 7px 30px 7px; background: #e0004d; border-radius: 20px; transition: all 0.3s ease; }
.modal-button .btn h4 { font-size: 1.5em; color: white; }
.modal-button .btn:hover { background: #a20034; }



/* M E D I A Queries ------------------------  */

/* max 1200 px */
@media ( max-width: 1439px) {
.modal-dialog { width: 85%; }
}

/* max 1200 px */
@media ( max-width: 1199px) {
.modal-box h5 { font-size: 1.3em; }
.modal-dialog { width: 82%; max-width: 900px; margin: 40px auto; }
}

/* max 992 px */
@media (max-width: 991px) {

.modal-dialog { width: 80%; }
.modal-body { padding: 20px; }

.modal-image { margin-bottom: 70px; } 
.modal-headline {text-align: center; padding-bottom: 30px;  }
.modal-headline, .modal-text {width: 80%; margin: 0 auto; }
}

/* max 768 px */
@media (max-width: 767px) {

.modal-dialog { width: 85%; margin: 10px auto; }

.modal-headline { font-size: 28px; }
.modal-image { max-width: 280px; }
}

/* max 575 px */
@media (max-width: 575px) {
.modal-box h5 { font-size: 1.55em; }

.modal-dialog { width: 90%; }
.modal-body { padding: 15px; }

.modal-text p { padding: 40px 5% 0 3%; font-size: 1.15em; }
.modal-button { margin-top: 40px; margin-bottom: 60px; }
}

/* max 479 px */
@media (max-width: 479px) {
.modal-box { width: 85%; }
    
.modal-dialog { width: 95%; }
.modal-body { padding: 15px; }

.modal-headline { font-size: 28px; }
.modal-headline, .modal-text p, .modal-topics {width: 94%; }
}