p {
    font-size: 100%;
}
.pic-icon {
	position: absolute;
	display: inline-block;
	left: 10px;
	bottom: 0px;
	pointer-events: none;
	opacity: 0;
	transition: 1s;
}
.section:hover .pic-icon {
	opacity: 0.5 !important; 
}
.section:hover {
	background-color: rgba(0,0,0,0.15);
	border-radius: 15px;
}
.border {
	width: auto;
	height: auto;
	position: relative;
	max-width: 300px;
	pointer-events: none;
	opacity: 0.7
}
a {
	text-decoration: none;
}
			
#darkWindow {
	position: relative; 
	background-color: #121212; 
	padding-top: 100px; 
	padding-bottom: 100px
}
.pageName {
	font-size: 130%; font-weight: bolder; color: rgba(0,0,0,0.8)
}
.pageNameWhite {
	font-size: 130%; font-weight: bolder; color: rgba(225,225,225,0.7);
}

			.white {
				color: rgba(225,225,225,0.7)
			}



			@media (max-width: 999px) { 
    .promotion1 {height: 220px;width:50%;margin-top:10px;margin-bottom:20px;overflow:hidden; float:left}
    .promotion2 {height: 220px;width:50%;margin-top:10px;margin-bottom:20px;overflow:hidden; float:left}
				.subjName {
					text-align: center; font-size: 130%; font-weight: bold; color: #3e3e3e
				}
				.book {
					margin: 10px;
					padding: 10px;
					width: auto;
					height: auto;
					max-width: 300px; 
					max-height: 500px; 
					position: relative; 
					display: inline-block;
					transition: .3s;
				}
				.book:hover {
					transform: scale(1.05,1.05);
					transition: .3s;
				}
		        .bookPicture {
		        	width: 50%; 
		        	height: auto;
		        }
		        .nameBig {
        		    font-size: 110%;
        		    font-weight: 600;
        		}
				.name { 
					font-size: 100%; 
					transition: .2s
				} 
				.name:hover { 
					transform: scale(1.05, 1.05); 
					transition: .3s
				} 
				.window { 
					padding-left: 5%; 
					padding-right: 5%; 
					margin-top: 50px; 
					margin-bottom: 50px;
					text-align: left;
					} 
				.main { 
					font-size: 25px; 
					font-weight: bolder; 
					color: rgba(0,0,0,0.8) 
					} 
				.top { 
					font-size: 20px; 
					font-weight: bolder; 
					}
				} 
			@media (min-width: 1000px) {
				.subjName {
					text-align: center; font-size: 180%; font-weight: bold; color: #3e3e3e
				}
				.book {
				    margin-left: 0px;
					margin: 10px;
					padding: 10px;
					width: auto;
					height: auto;
					max-width: 300px; 
					max-height: 500px; 
					position: relative; 
					display: inline-block;
					transition: .3s;
				}
				.book:hover {
					transform: scale(1.05,1.05);
					transition: .3s;
				}
		        .bookPicture {
		        	width: auto; 
		        	height: 15vw
		        }
		        .nameBig {
        			margin-left: 10%;
        		    font-size: 110%;
        		    font-weight: 600;
        		    }
				.name { 
					margin-left: 10%;
					font-size: 100%; 
					transition: .2s; 
					} 
				.name:hover { 
					transform: scale(1.05, 1.05); 
					transition: .3s; 
					} 
				.window { 
					padding-left: 15%; 
					padding-right: 15%; 
					margin-top: 50px; 
					margin-bottom: 50px; 
					text-align: left;
					} 
				.main { 
					font-size: 35px; 
					font-weight: bolder; 
					color: rgba(0,0,0,0.8) 
					}
				.top { 
					font-size: 25px; 
					font-weight: bolder; 
					} 
				} 
				a {
					text-decoration: none;
					color: black
				}

@media (max-width: 999px) {
    .pic-icon {
        width: 50px;
    }
			  	.massive {
			  		width: 100%;
			  		margin-bottom:50px;
			  	}
			  	
				.section {
				    position: relative;
                    width: 45vw;
                    max-width: 350px;
                    height: 180px;
                    line-height: 10px;
                    background-color: rgba(225,225,225,0.7);
                    display: inline-block;
                    border: 2px solid transparent;
                    transition: 0.4s;
                    margin: 8px 5px;
				}
                .section:hover {
                    border: 2px solid #dcdcdc;
                    box-shadow: 0 0 20px -12px #5e5e5e;
                    transition: 0.4s;
                }
				.block {
                    position: relative;
                    font-size: 30px;
                    font-weight: bold;
                    color: #2e2e2e;
                    pointer-events: none;
                    margin-top: 90px;
				}
		  	}
@media (min-width: 1000px) {
			  	.massive {
			  		width: 87%;
			  		margin-bottom:50px;
			  	}
				.section {
					position: relative;
					width: 300px;
					height: 200px;
					background-color: rgba(225,225,225,0.7); 
					margin: 10px; 
					display: inline-block;
                    border: 2px solid transparent;
					transition: 0.4s;
				}
                .section:hover {
                    border: 2px solid #dcdcdc;
                    box-shadow: 0 0 20px -12px #5e5e5e;
                    transition: 0.4s;
                }
				.block {
					position: absolute;
					font-size: 40px;
					font-weight: bold;
					color: #2e2e2e;
					pointer-events: none;
					margin-top: 25%;
					margin-left: 45%;
				}
		  	}
.author {font-size: 15px}

.protocols {width: 100%; pointer-events: none;}

      	#premiumContent {
      		border: 1px solid #121212; border-radius: 10px; background: #eeeeee; transition: 0.5s;
      	}
      	#premiumContent:hover {
    		color: #f5f5f5; background: #121212e0; transition: 0.5s;
      	}
      	
.addBtn {
    background-color: transparent;
    margin-bottom: 10px;
    text-align: center;
    transition: 0.5s;
    color: #4e4e4e;
    font-weight: 600;
    font-size: 90%;
    width: 45%;
    max-width: 250px;
    height: 40px;
    line-height: 40px;
}
.addBtn:hover {
    background-color: #e3e3e3;
    border-radius: 10px;
    transition: 0.5s
}