/* Подключение готических шрифтов */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel:wght@400;700&family=UnifrakturMaguntia&display=swap');

html{font-family:sans-serif;font-size:12px;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body{margin:0;padding:52px 0 20px 0;min-width:360px;background:#1a0000;color:#ffd700;font-family:"Cinzel", "MedievalSharp", serif;font-size:14px;line-height:1.4;text-shadow:1px 1px 2px #000}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
h1,h2{position:relative;margin:0;padding:0 0 15px 0;color:#ffd700;font-family:"UnifrakturMaguntia", "MedievalSharp", serif;font-size:28px;font-weight:bold;text-shadow:2px 2px 4px #8b0000;letter-spacing:1px}
h1 a{color:#ffd700}
h1 a:active,h1 a:hover{color:#ff6b6b;text-shadow:0 0 10px #ff0000}
h1 .more{display:none;position:absolute;bottom:5px;right:0;color:#ff6b6b;font-size:.7em}
a{color:#ffd700;text-decoration:none;transition:all 0.3s ease}
a.active{text-decoration:underline;color:#ff6b6b;text-shadow:0 0 5px #ff0000}
a:focus{outline:2px solid #ffd700}
a:active,a:hover{text-decoration:none;outline:0;color:#ff6b6b;text-shadow:0 0 8px #ff0000}
img{border:0;vertical-align:middle}
.show-xs{display:none}
.float-l{float:left}
.float-r{float:right}
.foot-vis{margin-top:10px}
.align-c{text-align:center}
.col-accent{color:#ff6b6b !important;text-shadow:0 0 5px #ff0000}
.fw-b{font-weight:bold}
.img-bg{background-color:#2d0000;border:2px solid #8b0000}
.img-responsive{display:inline-block;max-width:100%}

.image-picpost{background-color:#2d0000;display:block;line-height:0;margin-bottom:0;overflow:hidden;position:relative;padding-top:146%;border:3px solid #8b0000;box-shadow:0 0 15px rgba(139,0,0,0.5)}
.image-picpost img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:103%;filter:sepia(30%)}
.real-img{position:relative;overflow:hidden}
.clearfix:before,.clearfix:after,.main-app:before,.main-app:after{content:" ";display:table}
.clearfix:after,.main-app:after{clear:both}
.page-header{position:fixed;top:0;left:0;right:0;padding:8px 0;min-width:360px;background:linear-gradient(to bottom, #2d0000 0%, #1a0000 100%);z-index:10;border-bottom:3px solid #ffd700;box-shadow:0 5px 20px rgba(0,0,0,0.7)}
.page-header-logo{height:80px;filter:drop-shadow(0 0 10px #ffd700)}
.page-footer-logo{height:40px;filter:drop-shadow(0 0 5px #ffd700)}
.page-header-nav{margin-top:20px;padding:0;list-style-type:none}
.page-header-nav li{float:left;position:relative;padding:0 0 0 10px;line-height:35px}
.page-header-nav li.no-pad{padding:0}
.page-header-nav .material-icons{vertical-align:middle;color:#ffd700;text-shadow:0 0 5px #ff6b6b}
.page-ham-menu-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:102;}
.page-ham-menu{display:none;position:fixed;top:0;left:0;bottom:0;margin:0;padding:0;width:75%;background:linear-gradient(to right, #2d0000 0%, #1a0000 100%);list-style-type:none;z-index:103;overflow:auto;border-right:3px solid #ffd700;box-shadow:5px 0 25px rgba(0,0,0,0.8)}
.page-ham-menu li{min-width:170px;border-bottom:2px solid #8b0000}
.page-ham-menu-top{padding:15px;background:#2d0000;border-bottom:3px solid #ffd700}
.page-ham-menu a{display:block;padding:18px;text-decoration:none;text-transform:uppercase;color:#ffd700;font-family:"MedievalSharp", serif;font-size:16px;letter-spacing:1px;text-shadow:1px 1px 2px #000}
.page-ham-menu a:hover{color:#ff6b6b;background:rgba(139,0,0,0.3);text-shadow:0 0 10px #ff0000}
.page-footer{margin:20px 0 0 0;padding:0 0 20px 0;}
.page-footer .main-app{max-width:1160px}
.box{margin:25px 0 0 0}
.pg-crrv-bottoms{text-align:center}
.pg-crrv-bottoms a{display:inline-block;padding:12px 0 0 0;min-width:35px;height:35px;color:#ffd700;text-decoration:none;overflow:hidden;border-radius:5px;border:2px solid #8b0000;background:linear-gradient(to bottom, #2d0000 0%, #1a0000 100%);font-family:"MedievalSharp", serif;text-shadow:1px 1px 2px #000;box-shadow:0 0 10px rgba(139,0,0,0.4)}
.pg-crrv-bottoms a{padding:18px 18px 0 18px;min-width:55px;height:55px;margin:5px;}
.pg-crrv-bottoms a:hover,.pg-crrv-bottoms a:focus{background:linear-gradient(to bottom, #8b0000 0%, #2d0000 100%);color:#ff6b6b;border-color:#ffd700;text-shadow:0 0 8px #ff0000;box-shadow:0 0 15px rgba(255,0,0,0.6)}
.pg-crrv-bottoms a.active{background:linear-gradient(to bottom, #ffd700 0%, #8b0000 100%);color:#1a0000;border-color:#ffd700;text-shadow:none;box-shadow:0 0 20px rgba(255,215,0,0.7)}
.pg-crrv-bottoms a.active:hover{background:linear-gradient(to bottom, #ff6b6b 0%, #8b0000 100%);color:#1a0000;box-shadow:0 0 25px rgba(255,0,0,0.8)}
.grid-op{margin:-6px 0 0 -6px}
.grid-op:before,.grid-op:after{content:" ";display:table}
.grid-op:after{clear:both}
.grid-op.grid-spacing-md-equal{margin:-25px 0 0 -25px}
.grid-op .grid-class{float:left;width:100%;padding:6px 0 0 6px}
.grid-op.grid-spacing-md-equal .grid-class{padding:25px 0 0 25px}
.grid-op.grid-tn-2 .grid-class{width:50%}
.card{background:linear-gradient(to bottom, #2d0000 0%, #1a0000 100%);border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,0.6);border:3px solid #8b0000;overflow:hidden}
.card .card-img{position:relative;border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden}
.card .card-label{padding:12px;font-size:1.1em;font-weight:bold;text-align:center;text-overflow:ellipsis;min-height:70px;vertical-align:middle;color:#ffd700;font-family:"MedievalSharp", serif;text-shadow:1px 1px 3px #000;background:rgba(139,0,0,0.2)}
.card .card-label a{color:#ffd700}
.card .card-label a:hover{color:#ff6b6b;text-decoration:none;text-shadow:0 0 8px #ff0000}
button{margin:0;color:inherit;font-family:"MedievalSharp", serif;font-size:14px;line-height:normal}
button{overflow:visible}
button{text-transform:none}
.btn{height:38px;padding:8px 20px;border:2px solid #8b0000;background:linear-gradient(to bottom, #2d0000 0%, #1a0000 100%);color:#ffd700;font-family:"MedievalSharp", serif;font-size:14px;line-height:1.3;text-align:center;white-space:nowrap;border-radius:6px;cursor:pointer;text-shadow:1px 1px 2px #000;box-shadow:0 0 10px rgba(139,0,0,0.4)}
.btn:hover,.btn:focus{background:linear-gradient(to bottom, #8b0000 0%, #2d0000 100%);color:#ff6b6b;outline:0;text-shadow:0 0 8px #ff0000;box-shadow:0 0 15px rgba(255,0,0,0.6)}
.btn.btn-cta{color:#ffd700;background:linear-gradient(to bottom, #8b0000 0%, #2d0000 100%);border-color:#ffd700;text-shadow:0 0 5px #ff0000;box-shadow:0 0 15px rgba(255,215,0,0.5)}
.btn.btn-cta:hover{background:linear-gradient(to bottom, #ff6b6b 0%, #8b0000 100%);color:#1a0000;text-shadow:none;box-shadow:0 0 20px rgba(255,0,0,0.7)}
a.btn{display:inline-block;padding:10px 20px 0 20px;color:#ffd700;text-decoration:none}
@font-face{font-family:"Roboto";src:url("/res/roboto/Roboto-Regular.woff2") format("woff2"),url("/res/roboto/Roboto-Regular.woff") format("woff"),url("/res/roboto/Roboto-Regular.ttf") format("truetype");font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("/res/roboto/Roboto-Bold.woff2") format("woff2"),url("/res/roboto/Roboto-Bold.woff") format("woff"),url("/res/roboto/Roboto-Bold.ttf") format("truetype");font-weight:bold;font-style:normal;font-display:swap}
.main-app{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
@media(min-width: 1599px){
.hide-xs{display:none}
.show-xs{display:block}
.hide-sm{display:none}
}

@media(max-width: 768px){.card .card-label{font-size:1.3em;}
body{padding:82px 0 40px 0;font-size:16px}
.page-header-logo{height:70px}
}
@media(min-width: 768px){
h1,h2{font-size:32px}
.page-header{padding-top:0}
.page-header-logo{height:90px}
.page-header-nav li{line-height:40px}
.page-footer{margin:40px 0 0 0;padding:0 0 40px 0}
.box{margin:65px 0 0 0}
.grid-op.grid-sm-3 .grid-class{width:33.33333333%}
button{font-size:16px}
.btn{height:42px;padding:10px 22px;font-size:16px}
a.btn{padding:10px 22px 0 22px}
.main-app{width:740px}
}
@media(min-width: 992px){body{padding:80px 0 40px 0;font-size:18px}
h1,h2{font-size:36px}
.page-header-logo{height:90px}
.page-header-nav li{padding:0 0 0 5px;line-height:5px}
.grid-op.grid-spacing-md-equal{margin:-30px 0 0 -30px}
.grid-op.grid-spacing-md-equal .grid-class{padding:30px 0 0 30px}
.grid-op.grid-sm-3 .grid-class{width:24.66333333%}
button{font-size:18px}
.btn{height:48px;padding:12px 25px;font-size:16px}
a.btn{padding:12px 25px 0 25px}
.main-app{width:960px}
}
@media(min-width: 1200px){h1 .more{display:block}
.page-header-nav li{padding:0 0 0 15px}
.box{margin:30px 0 0 0}
.main-app{width:1160px}
}
@media(min-width: 1600px){
.grid-op.grid-xl-4 .grid-class{width:19%}
.main-app{width:1560px}
}
@media(min-width: 1960px){
.main-app{width:1920px}
}

.pictures-page {
position:relative
}
.bondage-club-picblocks {
-moz-column-gap:15px;-webkit-column-gap:15px;column-gap:15px;-moz-column-count:3;-webkit-column-count:3;column-count:3
}
.bondage-club-picblocks-right {
-moz-column-gap:15px;-webkit-column-gap:15px;column-gap:15px;-moz-column-count:1;-webkit-column-count:1;column-count:1
}

@media (max-width:660px){.bondage-club-picblocks {
-moz-column-gap:12px;-webkit-column-gap:12px;column-gap:12px;-moz-column-count:2;-webkit-column-count:2;column-count:2;
}

}

@media (max-width:450px){.bondage-club-picblocks {
-moz-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;-moz-column-count:1;-webkit-column-count:1;column-count:1;
}

}

.bondage-club-picblocks1 {
-moz-column-gap:15px;-webkit-column-gap:15px;column-gap:15px;-moz-column-count:5;-webkit-column-count:5;column-count:5
}
@media (max-width:860px){.bondage-club-picblocks1 {
-moz-column-gap:12px;-webkit-column-gap:12px;column-gap:12px;-moz-column-count:4;-webkit-column-count:4;column-count:4;
}
}
@media (max-width:660px){.bondage-club-picblocks1 {
-moz-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;-moz-column-count:3;-webkit-column-count:3;column-count:3;
}

}

@media (max-width:450px){.bondage-club-picblocks1 {
-moz-column-gap:8px;-webkit-column-gap:8px;column-gap:8px;-moz-column-count:2;-webkit-column-count:2;column-count:2;
}

}

.new-imgbondage-club-pg {
margin:8px;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box
}

.itemnew {
width:100%;height:auto;border-radius:12px;border:3px solid #8b0000;box-shadow:0 0 15px rgba(139,0,0,0.5)
}

.imgbondage-club-im {
	position: relative;
}
.imgdetails {
    position: absolute;
    left: 0;
    top: 0;
    border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
    background: rgba(139,0,0,0.8);
    color: #ffd700;
    line-height: 2.2;
    padding: 0 15px;
    text-align: center;
    font-size: 16px;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "MedievalSharp", serif;
    text-shadow: 2px 2px 4px #000;
    border:2px solid #ffd700;
}
.pics-list .picture-details {
  	background-color: #2d0000;
}
.pictures-page {
    position: relative;
}

/* Mobile menu styles */
.mobile-menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 28px;
    padding: 10px;
    color: #ffd700;
    text-shadow:0 0 8px #ff6b6b;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background:linear-gradient(to right, #2d0000 0%, #1a0000 100%);
    z-index: 1001;
    transition: left 0.4s ease;
    box-shadow:5px 0 30px rgba(0,0,0,0.9);
    overflow-y: auto;
    border-right:4px solid #ffd700;
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-header {
    padding: 20px;
    border-bottom:4px solid #ffd700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2d0000;
}

.mobile-menu-content {
    padding: 20px;
}

.mobile-menu-content a {
    display: block;
    padding: 18px 0;
    border-bottom:2px solid #8b0000;
    text-decoration: none;
    color: #ffd700;
    font-weight: bold;
    font-size: 18px;
    font-family: "MedievalSharp", serif;
    text-shadow:1px 1px 3px #000;
    letter-spacing:1px;
}

.mobile-menu-content a:last-child {
    border-bottom: none;
}

.mobile-menu-content a:hover {
    color: #ff6b6b;
    text-shadow:0 0 12px #ff0000;
    background:rgba(139,0,0,0.3);
}

/* Page header fixes */
.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    min-width: 360px;
    background:linear-gradient(to bottom, #2d0000 0%, #1a0000 100%);
    z-index: 10;
    border-bottom:4px solid #ffd700;
    box-shadow:0 8px 25px rgba(0,0,0,0.8);
}

/* Hide mobile menu on desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .page-header-nav.desktop-menu {
        display: flex !important;
    }
}

/* Show mobile menu toggle and hide desktop menu on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .page-header-nav.desktop-menu {
        display: none;
    }
    
    body {
        padding-top: 82px;
    }
}

/* Ensure proper body spacing */
body {
    padding-top: 102px;
    position: relative;
    min-width: 360px;
    background: #1a0000;
    color: #ffd700;
    font-family: "Cinzel", "MedievalSharp", serif;
    font-size: 14px;
    line-height: 1.4;
    text-shadow:1px 1px 2px #000;
}

@media (max-width: 768px) {
    body {
        padding-top: 82px;
    }
}