* {-webkit-box-sizing: border-box;box-sizing: border-box; font-family: 'Montserrat', sans-serif;}
a, a:hover, a:link, a:visited {text-decoration: none; color: inherit;}

.cover {box-shadow: -2px 1px 5px #939393; margin-bottom: 0px; text-align: center; }
/*.imageHolder:before {content: ''; position: absolute; left: -6px; bottom: -1px; width: 39px; height: 11px; background: url(../images/shadow.png) no-repeat; background-size: 100% 100%}*/



.book  {text-align: center;   margin-top: 10px;}
.bookshelf { padding: 20px; background: /*url(../images/bg.jpg) no-repeat*/ #cdd0d4; background-size: cover; border: 1px solid #e7e7e7; text-align: center; position: relative; min-height: 320px; }
.bookshelf.extraMargin {padding-top: 40px;}

.booksInfo {width: 960px;
  margin-left: auto;
  margin-right: auto; max-width: 90%}

header {font-weight: normal;padding: 20px; background: #242038; color: #fff; font-size: 20px}
footer {font-weight: normal; padding: 20px; background: #C49A6C; color: #FFF; font-size: 12px; text-align: right}
.clients {font-size: 16px; background: #222220; padding: 10px 20px; color: #fff; margin-top: 20px;}
.links {padding: 20px 00px 0px 20px; text-align: right}
.BrandmuscleLogo {width: 145px; max-width: 100%}

.book_wrapper{margin-top: 20px; text-align: center; width: 25%; display: inline-block; padding: 0px 5px; /*display: none;*/ /*background: url(../images/shelf.png) no-repeat; background-position: center 210%;   background-size: 100%;*/  vertical-align: bottom; position: relative}  
.book_wrapper.active {display: inline-block; margin-bottom: 32px;}

/*.book_wrapper:hover img {opacity: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: scale(1.05); transform: scale(1.05);}*/
.book_wrapper img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; max-height: 200px; max-width: 90%; position: relative}

.title {padding-top:5px; font-weight: 600; text-align: center; font-size: 33px; line-height: 120%; color: #c67a4f;}
/*.caption {background: #c21fbf; padding: 10px; color: #fff; display: none}*/


.headerBar {text-align: left; padding-right: 00px; font-size: 14px; font-weight: normal}
.HeaderCols {display: inline-block; width: 33%; vertical-align: middle;}
.HeaderCol3 {width: 32%;}

.shelfRow {background: url(../images/shelf.png) no-repeat; background-position: -4px 185%;   vertical-align: bottom; background-size: 100%; padding: 0px 80px; margin-bottom: 40px;}

.tooltipBox {position: absolute; width: 85%; display: none; left: 7%; bottom: 0%; border: 1px solid #000000; background-color: #000000; font-size: 16px; border-radius: 5px; padding: 5px 10px; z-index: 999; height: 100%; color: #fff; line-height: 20px; padding-top: 20px; cursor: pointer; font-weight: 500}
.tooltipBox .description {font-size: 14px; margin-top: 10px; line-height: 16px; font-weight: 400}

[data-tooltip^="MHUSA"]  .tooltipBox {font-size: 17px; line-height: 19px; padding-left: 5px; padding-right: 5px; } 

/*Search button*/
.search {width: 290px; vertical-align: top; position: relative; background-color: #C49A6C; padding: 5px; border-radius: 5px;   margin-left: auto; max-width: 100%}
.search #searchbook {width: 250px; min-height: 30px; border-radius: 5px; border: 1px solid #e7e7e7; padding: 3px 5px; color: #333 ; max-width: 90%}
.search:after {    content: "";
    position: absolute;
    right: 3px;
    top: 6px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: block;
    background: url(../images/search.png);
    background-size: 100%;
    background-repeat: no-repeat;}

/* Navigation */
.navigate {display: block; width: auto; vertical-align: top; position: absolute; right: 18px; top: 10px; text-align: right}
.navigate > div {padding: 5px 10px; background: #fff; display: inline-block; vertical-align: top; color: #fff; cursor: pointer; margin-right: 2px; border-radius: 3px; border: 1px solid #c21fbf; color: #882385; }
.navigate > div:hover, .navigate > div.active {background-color: #882385; color: #fff; border: 1px solid #c21fbf}
.navigate > div:active {b}



/*Password*/

.no-scroll {overflow: hidden}

.passBlock {
  position: fixed;
  top: 0px;
  width: 100%;
  background: #000;
  z-index: 101;
  display: block;
  height: 1400px;
}
.passBlock * {font-family: arial}
.passWindow {
  max-width: 400px;
  background-color: #fff;
  padding: 20px 20px 20px 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
.lock {max-width: 60px; margin-left: auto; margin-right: auto; margin-left: auto; margin-top: 42px}
.btnEnter {
  background-color: #792373;
  color: #fff;
  font-size: 12px;
  margin-left: auto;
  width: 100px;
  float: none;
  margin-top: 15px;
  font-weight: bold;
  border: none;
  padding: 8px;
  border-radius: 5px;
  min-height: 30px;
  outline: none;
  display: block;
}
.btnEnter:hover {color:#ffffff}
.passTxt1 {font-size:16px; font-weight:normal;}
.passTxt2 {font-size:12px; margin-top: 20px; margin-bottom:7px}
.passTxt3 {font-size:12px; margin-top: 3px; color:#f91313}
.pass {border:1px solid #999999; width:100%; border-radius: 5px; padding:4px}
/*.container {opacity:0}*/
.pass:focus{outline: none;}    
.passBlock .col-xs-4 {width: 40%; display: inline-block; vertical-align: top; text-align: center; }
.passBlock .col-xs-8 {width: 60%; display: inline-block; padding-left: 0px}
.passBlock .col-xs-12 {width: 100%; text-align: right}



@media (max-width: 1199px) {
    .shelfRow {background-position: -4px 173%;}
    .booksInfo {max-width: 100%}
}
   

@media (max-width: 991px) {
    .shelfRow {background-position: -4px 161%; padding: 0px 60px;}
    .booksInfo {max-width: 100%}
    .tooltipBox {width: 100%; left: 0%; font-size: 16px; line-height: 18px;}
    .book_wrapper.active {margin-bottom: 22px;}
    .tooltipBox .description { font-size: 12px; margin-top: 10px; line-height: 14px; }
    
}
  


@media (max-width: 768px) {
    .HeaderCols {width: 31%}
    .search {width: 240px;}
    .search #searchbook {width: 199px;}
    .HeaderCol1 {display: block; margin-bottom: 20px;}
    .HeaderCol2 {width: 60%; }
    .HeaderCol3 {width: 39%; }
    .BrandmuscleLogo {width: 130px; max-width: 100%;}
    
    .book_wrapper img {max-width: 240px}
    .container {width: 100%; padding: 0px;}
    .shelfRow {background: none}
    .book_wrapper { width: 50%}
    
    .tooltipBox {position: relative; width: 80%; display: block; left: 10%; bottom: auto; border: 0px solid #882385; background-color: inherit; font-size: 18px; border-radius: 5px; padding: 5px 10px; z-index: 999; height: auto; color: #333; line-height: 20px; padding-top: 20px; cursor: pointer}
    .tooltipBox .description {font-size: 14px; margin-top: 5px; line-height: 16px;}
    .shelfRow {margin-bottom: 0;}
    .book_wrapper.active {margin-bottom: 10px;}
    
    
}

@media (max-width: 767px) {
	
	.no-scroll{overflow:auto !important;}
	
    .book_wrapper {background: none;}
    .book_wrapper img {max-height: 170px;}
    .shelfRow {padding: 0px 20px}
    .BrandmuscleLogo {margin-left: auto; margin-right: auto}
    .title {  font-size: 22px; line-height: 26px;}
    .HeaderCol1 {width: 100%;}
    .HeaderCol2 {width: 100%;}
    .HeaderCol3 {width: 100%; }
    .search:after {right: 0px;top: 0px;width: 0px;height: 0px;display: none;}
    .search #searchbook {width: 100%; max-width: 100%; border-radius: 3px;}
    .search {width: 230px;   padding: 3px; margin-left: auto; margin-right: auto; margin-top: 25px}
    .tooltipBox {width: 90%; left: 5%}
    .book_wrapper {width: 100%; margin-left: auto; margin-right: auto}
    
}
    
@media (max-width: 480px) {
    
    .book_wrapper img {max-width: 90%}
    /*.book_wrapper {background-position: center 100%; }
    .cover  {margin-bottom: 15px;}
    .BrandmuscleLogo  {max-width: 100%}
    .logo {padding: 0px;padding-left: 10px;}
    .text-right {padding-right: 10px;}
    .title {padding-top: 0;  font-size: 16px; line-height: 22px;}
    header {padding: 15px 15px}
    .book_wrapper img {  max-width: 60%;}
    .HeaderCol2 {  width: 100%}
    .HeaderCol3 {  width: 100%;}    
    .title {  padding-top: 0;   font-size: 22px;  line-height: 26px;    margin-bottom: 20px;}    */
    
    
    
}

@media (max-width: 320px) {
    /*.cover  {margin-bottom: 12px;}*/
}