@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

body, ul, li, p, h1, h2, form, input, button, img { margin: 0; padding: 0; }
li { list-style-type: none; }

body { background-color: #000000; color: #ffffff; font-family: Arial, sans-serif; font-size: 14px; margin: 0; padding: 0; }

img, .sq { background-color: rgba(0,0,0,0.1); border: 0 none; }

a { color: #ffffff; text-decoration: none; }
a:hover, .footer span { color: #fc6333; }

h1 { color: rgb(55,55,55); text-transform: uppercase; margin: 10px 5px 0 5px; display: block; font-size: 22px; line-height: 24px; font-weight: normal; }

.wrapper { margin: 0 auto; width: 100%; overflow: hidden; }

.head { overflow: hidden; text-align: center; margin: 4px 3px 0 3px; }
.logo a { background-image: url(http://nudeeroticclub.com/images/logo.jpg); background-repeat: no-repeat; background-size: 200px 40px; margin: 0 auto; width: 200px; height: 40px; display: block; }

.head-desc { display: none; }
.desc { font-size: 12px; line-height: 16px; margin-top: 10px; height: 160px; text-align: justify; overflow: hidden; }

.head-list { margin-top: 10px; overflow: hidden; }
.head-list li { float: left; }
.head-list li a { border: 1px solid #606060; border-radius: 3px; display: block; font-size: 12px; height: 23px; line-height: 23px; padding: 0 10px; }
.head-list li a:hover, .head-list li.active a { background-color: #fc6333; color: #000000; border-color: #fc6333; }

.head-sort li { width: 50%; }
.head-sort li:first-child a { margin-right: 1px; }
.head-sort li:last-child a { margin-left: 1px; }

.head-sort { margin-top: 1px; }
.head-pages li { width: 20%; }
.head-pages li a { margin: 2px 1px 0 1px; }

.head-go-to-sp { margin: 10px 0 9px 0; }
.head-go-to-sp a { background-color: rgb(55,55,55); color: #FFFFFF; text-align: center; height: 46px; line-height: 46px; border-radius: 3px; display: block; font-size: 15px; text-transform: uppercase; padding: 0 10px; }
.head-go-to-sp a:hover { background-color: #fc6333; }

.content-wrapper { overflow: hidden; margin-right: -1px; margin-left: -1px; }

.thumb { float: left; width: 50%; }
.thumb a { border: 1px solid rgb(195,195,195); display: block; margin: 4px 2px 0 2px; }
.thumb a img { width: 100%; height: auto; max-height: 310px; display: block; }
.thumb a:hover { border-color: #fc6333; }

.pages { text-align: center; padding-top: 8px; font-size: 0; }
.pages li {  display: inline-block; vertical-align: top; margin: 2px 1px 0 1px; }
.pages li a { border: 1px solid #606060; border-radius: 3px; font-size: 11px; display: block; width: 23px; height: 23px; line-height: 23px; }
.pages li a:hover, .pages li.active a { background-color: #fc6333; color: #000000; border-color: #fc6333; }

.sqs { text-align: center; padding-top: 6px; padding-bottom: 6px; }
.sq { display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; width: 300px; height: 250px; }
.sq-2, .sq-3, .sq-4, .sq-5 { display: none; }

.toplist { margin: 8px 4px 0 4px; overflow: hidden; }
.toplist-column { font-size: 12px; float: left; width: 50%; overflow: hidden; }
.toplist li { margin: 2px 1px 0 1px; }
.toplist li a { border-radius: 3px; border: 1px solid #606060; display: block; padding: 0 10px; height: 28px; line-height: 28px; overflow: hidden; }
.toplist li a:hover { background-color: #fc6333; border-color: rgb(55,55,55); color: #000000; }

.gallery-thumb .view-icon { width: 40px; height: 40px; line-height: 40px; font-size: 40px; margin: -20px 0 0 -20px; }

.go-to-sp { margin: 10px 5px 0 5px; }
.go-to-sp a { border: 1px solid #606060; text-align: center; border-radius: 3px; display: block; font-size: 16px; text-transform: uppercase; padding: 15px; }
.go-to-sp a:hover { background-color: #fc6333; color: #FFFFFF; border-color: #fc6333; }

.big-pic-wrapper { background-color: rgb(0,0,0); }
.big-pic { padding: 10px; }
.big-pic img { margin: 0 auto; max-width: 100%; display: block; }

.footer { border-top: 1px solid #000000; text-align: center; padding: 15px; }

@media screen and (min-width: 450px) {
    .thumb, .gallery-thumb { width: 33.3333%; }
    .toplist-column { font-size: 14px; }
}

@media screen and (min-width: 672px) {
    .thumb, .gallery-thumb { width: 25%; }
    .sq-2 { display: inline-block; }
}

@media screen and (min-width: 834px) {
    .wrapper { width: 824px; }
    .head { width: 200px; height: 300px; float: left; }
    .head-desc { display: block; }
    .thumb { width: 206px; }
    .thumb a { width: 200px; }
    .thumb a img { width: 200px; height: 300px; }
    .pages { padding-top: 2px; }
    .pages li { margin: 8px 4px 0 4px; }
    .pages li a { width: 30px; height: 28px; line-height: 28px; font-size: 12px; }
    .toplist-column { width: 25%; font-size: 12px; }
    .go-to-sp a { font-size: 22px; }
    
    
}

@media screen and (min-width: 1256px) {
    .wrapper { width: 1236px; }
    .sqs { padding-top: 8px; }
    .sq { margin: 2px 1px 0 1px; }
    .sq-3, .sq-4 { display: inline-block; }
    .toplist-column { width: 12.5%; }
}

@media screen and (min-width: 1668px) {
    .wrapper { width: 1648px; }
    .sqs { padding-top: 6px; }
    .sq { margin: 4px 2px 0 2px; }
    .sq-5 { display: inline-block; }
    .toplist-column { font-size: 14px; }
}