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


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

.magazine-grid { width: 80%; max-width: 1300px; margin 100px auto 100px auto; }
.magazine-grid h5 { font-size: 1.4em; font-weight: 400; letter-spacing: 0; margin-top: 15px; color: grey; text-align: center; }

.magazine-thumb { text-align: center; margin-bottom: 50px; cursor: pointer; }
.magazine-thumb img { width: 100%; min-width: 250px; max-width: 340px; border: 1px solid lightgrey; box-shadow: 2px 6px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
.magazine-thumb img:hover { transform: scale(1.05); box-shadow: 3px 10px 14px rgba(0,0,0,0.2); }



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

.modal[id^="modal-"] { overflow-y: auto !important; } 

.modal-dialog { z-index: 998; width: 80%; max-width: 1000px; margin: 40px auto !important; }
.modal-content { z-index: 997; border-radius: 12px;}
.modal-body { z-index: 999; 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.8em; 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; }

/* Backdrop während Navigation persistent halten */
.modal-backdrop .persist { z-index: 990; opacity: 0.5 !important; transition: none !important; }



/* NAVIGATION  Arrows -------------------------  */

.modal-nav { position: absolute; z-index: 1000; top: 45vh; width: 60px; height: 60px; padding: 7px 18px; font-size: 36px; color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.3s ease;
}
.modal-nav:hover { background: rgba(0, 0, 0, 0.8); color: #f46363; }

.modal-nav-prev { left: -9%; transform: scaleX(-1);} /* horizontal gespiegelt */ 
.modal-nav-next { right: -9%; }


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

/* Cover Bild */
.modal-cover-image { display: block; width: 100%; max-width: 360px; margin: 45px auto 30px; border: 1px solid lightgrey; 
	-webkit-box-shadow: 10px 15px 21px -2px rgba(0,0,0,0.69);
	box-shadow: 10px 15px 21px -2px rgba(0,0,0,0.69);
	}
/* Magazin Titel + No. */
.modal-issue-title { margin: 20px 0 20px; padding-bottom: 2px; font-size: 36px; line-height: 1.2; color: #222; 
	border-bottom: 1.5px solid grey;
    }
.modal-issue-no { float: right; color: #e0004d; }
/* Text */
.modal-text p { padding: 35px 5% 0 3%; font-size: 1em; line-height: 1.35em; text-align: justify; }
.modal-topics { font-family: 'Assistant', sans-serif; font-size: 1.15em; font-weight: 500; line-height: 1.3em; color: #222;
	text-transform: uppercase;
	hyphens: auto; 
	margin-bottom: 40px; 
	}
/* Get it Buttons */
.modal-buttons { text-align: center; margin-top: 10px; margin-bottom: 50px; }
.modal-buttons .btn { margin: 15px; padding: 0 28px 10px; background: #e0004d; border: 1px solid #d8014b;
    transition: all 0.3s ease;
    }
.modal-buttons .btn h3 { font-size: 1.5em; color: white; }
.modal-buttons .btn:hover { background: #a20034; }




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

/* max 1200 px */
@media ( max-width: 1439px) {
.magazine-thumb img { max-width: 270px; }

.modal-dialog { width: 85%; }
}

/* max 1200 px */
@media ( max-width: 1199px) {
.magazine-grid { width: 90%; max-width: 1300px; }
.magazine-grid h5 { font-size: 1.3em; }
.magazine-thumb img { max-width: 260px;}

.modal-dialog { width: 82%; max-width: 900px; margin: 30px auto; }
}

/* max 992 px */
@media (max-width: 991px) {
.magazine-thumb img { width: 90%; max-width: 320px;}

.modal-dialog { width: 80%; }
.modal-body { padding: 20px; }
.modal-nav { top: 320px; width: 50px; height: 50px; font-size: 28px; padding: 6px 15px; }
.modal-nav-prev { left: 4%; }
.modal-nav-next { right: 4%; }

.modal-cover-image { margin-bottom: 70px; } 
.modal-issue-title, .modal-text p, .modal-topics {width: 80%; margin: 0 auto; }
}

/* max 768 px */
@media (max-width: 767px) {
.magazine-thumb { margin-bottom: 90px; }
.magazine-thumb img { width: 80%; max-width: 350px; }

.modal-dialog { width: 85%; margin: 10px auto; }
.modal-nav { top: 270px; font-size: 26px; padding: 8px 15px; }

.modal-issue-title { font-size: 28px; }
.modal-cover-image { max-width: 280px; }
}

/* max 575 px */
@media (max-width: 575px) {
.magazine-grid h5 { font-size: 1.55em; }
.magazine-thumb img { width: 90%; }


.modal-dialog { width: 90%; }
.modal-body { padding: 15px; }
.modal-nav { top: 270px; font-size: 24px; padding: 10px 15px; }

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

/* max 479 px */
@media (max-width: 479px) {
.magazine-grid { width: 95%; }

.modal-dialog { width: 95%; }
.modal-body { padding: 15px; }
.modal-nav { top: 270px; }
.modal-nav-prev { left: 1.5%; } 
.modal-nav-next { right: 1.5%; }

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