@charset "UTF-8";
/* htaccessbook.com CSS - Home Styles - Monzilla Media @ https://monzillamedia.com/ */

header { position: relative; overflow: hidden; width: 100%; height: 100vh; color: #fff; background-color: #000; }
header ul { margin: 0; padding: 0; }
header li { list-style-type: none; }
header a { color: #fff; text-decoration: none; } 

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
	header { height: 1024px; } /* iPad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
	header { height: 768px; } /* iPad landscape */
}
@media screen and (device-aspect-ratio: 40/71) {
	header { height: 500px; } /* iPhone 5 */
}

.logo { position: absolute; z-index: 999; top: 50%; width: 100%; color: #fff; font-size: 36px; -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
.logo h1 { margin: 0; font-size: 64px; }
.logo h2 { margin: 0; font-size: 36px; }

@media only screen and (max-width: 700px) {
	.logo h1 { font-size: 48px; }
	.logo h2 { font-size: 30px; }
}
@media only screen and (max-width: 550px) {
	.logo h1 { font-size: 30px; }
	.logo h2 { font-size: 20px; }
}

.logo p a.get-book { position: relative; padding: 20px 40px; font-size: 14px; text-transform: uppercase; border: 1px solid #fff; }
.logo p a.get-book:hover { color: #000; background-color: #fff; }
.logo p a.get-book:active { top: 2px; }

.logo p a.fa { display: inline-block; width: 50px; height: 50px; line-height: 50px; font-size: 48px; cursor: pointer; opacity: 0.3; }
.logo p a.fa:hover { opacity: 0.5; }

.slides { position: relative; height: 100%; width: 100%; float: left; margin: auto; }
.slides li { position: absolute; width: 100%; height: 100%; text-indent: -9999em; background-position: center center; background-size: cover; background-repeat: no-repeat; }

.slides li:nth-child(1) { background-image: url(../img/header/htaccess-01.jpg); }
.slides li:nth-child(2) { background-image: url(../img/header/htaccess-02.jpg); }
.slides li:nth-child(3) { background-image: url(../img/header/htaccess-03.jpg); }
.slides li:nth-child(4) { background-image: url(../img/header/htaccess-04.jpg); }
.slides li:nth-child(5) { background-image: url(../img/header/htaccess-05.jpg); }
.slides li:nth-child(6) { background-image: url(../img/header/htaccess-06.jpg); }
.slides li:nth-child(7) { background-image: url(../img/header/htaccess-07.jpg); }

.prev.fa, .next.fa { position: absolute; z-index: 999; top: 50%; margin-top: -25px; width: 50px; height: 50px; line-height: 50px; font-size: 48px; cursor: pointer; opacity: 0.3; }
.prev.fa { left: 0; right: auto; } .next.fa { left: auto; right: 0; } .prev.fa:hover, .next.fa:hover { opacity: 0.5; }

.pagination { position: absolute; bottom: 5px; z-index: 999; }
.pagination li { padding: 5px; display: inline-block; }
.pagination li a { display: inline-block; width: 25px; height: 25px; border-radius: 25px; line-height: 24px; font-size: 14px; text-align: center; color: rgba(0,0,0,0.7); background-color: rgba(255,255,255,0.3); }
.pagination li a:hover, .pagination li a.active { background-color: rgba(255,255,255,0.5); }

.wrap h3 { font-size: 30px; }

.box { display: inline-block; width: 270px; margin: 20px; }
.box .fa { display: inline-block; width: 100px; height: 100px; line-height: 105px; border-radius: 100px; font-size: 48px; color: #fff; background-color: #ffcc00; }
.box h3 { margin-top: 20px; font-size: 24px; }
.box p { font-size: 14px; }

.extras .col { display: inline-block; width: 48%; min-width: 450px; vertical-align: top; padding: 30px 0 0 0; }
.extras img { box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.extras h3 { margin: 0 0 15px 0; }
.extras ul { display: inline-block; }
.extras li { margin: 3px 0; text-align: left; }
.extras .book-desc { display: block; margin: 5px 20px 20px 20px; font-size: 12px; color: #777; }

@media only screen and (max-width: 500px) {
	.extras .col { width: 100%; min-width: 300px; }
}

.details { margin: 40px 0; }
.details img { vertical-align: middle; }

blockquote { max-width: 600px; margin: 0 auto; color: #fff; font-size: 22px; }

.sep { position: relative; width: 100%; height: 300px; }
.bg-01 { background: url(../img/bg.png) repeat 0 0 fixed; }
.sep-content { position: absolute; top: 50%; z-index: 0; width: 100%; -ms-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }

#overlay { background-color: #000; }
#modal { position: relative; height: 300px; width: 300px; padding: 20px; background-color: #fff; box-shadow: 0 0 17px rgba(0,0,0,0.7); }
#modal .close { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; line-height: 16px; font-size: 16px; color: #ccc; text-decoration: none; }
#modal h4 { margin: 0 0 15px 0; font-size: 18px; }
#modal p { margin: 10px 0; font-size: 14px; }
#modal p:last-child { margin: 0; padding: 15px 0 0 0; }
#modal img { display: block; margin: 0 auto; }
#modal .button { padding: 10px 15px; font-size: 13px; }