@charset "UTF-8";
/* CSS Document */

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 99999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
	
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.flex-container {
display: flex;
flex-direction: row;
background-color: #fff;
}

.flex-container > div {
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 18px;
}


.flex-container-spreads, .flex-container-spreads-5, .flex-container-spreads-6 {
display: flex;
flex-direction: row;
background-color: white;
}
.flex-container-spreads > div {
width: 25%;
margin: 10px 5px 10px 1px;
text-align: center;
}
.flex-container-spreads-5 > div {
width: 20%;
margin: 10px 5px 10px 1px;
text-align: center;
}	
.flex-container-spreads-6 > div {
width: 15%;
margin: 10px 5px 10px 1px;
text-align: center;
}		
.modal-headline {margin:5px 5px;font-size: 1.3em;}
.modal-text { color:#333; font-size: 1.0em; line-height: 1.2em; margin:5px 20px; text-align: center}
.modal-text-illustration { color:#333; font-size: 1.0em; line-height: 1.2em; margin:5px 20px; text-align: left}
.modal-authorName {font-style: italic; font-size: .9em; text-align: right; margin: 10px 20px 10px; line-height: 1.0em;}
.card-title {font-size:1.0em; font-weight: 700;}

.rightDiv {width: 30%; background-color: aliceblue}
.leftDiv {width: 70%;}		
.sidebarBook {margin:20px 20px 10px; box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.3); width: 50%;}
.sidebarimg-noshadow {margin:20px; width: 50%;}
.sidebarimg-bigger {margin:20px; width: 90%;}

.button-Amazon {
    background-color: #04AA6D; /* Green */
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 20px;
    margin: 30px 40px;
    transition-duration: 0.4s;
    cursor: pointer;
    }
.button-Amazon2:hover {
    background-color: #008CBA;
    color: white;
    }

    @media screen and (max-width: 768px) {
.flex-container {flex-direction:column}
.flex-container > div {width:100%}

.flex-container-spreads, .flex-container-spreads-5, .flex-container-spreads-6  {
  display: flex;
  flex-wrap: wrap;
flex-direction: row;
}
.flex-container-spreads > div {
width: 45%;
margin: 5px 1% 1px 1%;
}
.flex-container-spreads-5 > div {
width: 45%;
margin: 5px 1% 1px 1%;
}
.flex-container-spreads-6 > div {
width: 45%;
margin: 5px 1% 1px 1%;
}
	}
  
     @media (min-width: 769px) and (max-width: 1000px) {

.flex-container-spreads, .flex-container-spreads-5, .flex-container-spreads-6  {
  display: flex;
  flex-wrap: wrap;
flex-direction: row;
}
.flex-container-spreads > div {
width: 45%;
margin: 5px 1% 1px 1%;
}
.flex-container-spreads-5 > div {
width: 45%;
margin: 5px 1% 1px 1%;
}
.flex-container-spreads-6 > div {
width: 45%;
margin: 5px 1% 1px 1%;
}
	
		

		
	

}