.mybox-holder {
  margin-left: -40px;
}
.mybox-holder .mybox {
  position: relative;
  float: left;
  margin-left: 40px;
  margin-bottom: 40px;
  width: 268px;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #777;
  text-align: center;
  color: #b1b1b1;
  box-shadow: 0 0 10px #000000;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000;
  transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -webkit-transition: all 0.7s ease 0s;
  -ms-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
}
.mybox-holder .mybox .mybox-inner {
  padding: 7px;
}
.mybox-holder .mybox .mybox-teaser {
  position: relative;
  width: 254px;
  height: 208px;
  max-width: 100%;
}
.mybox-holder .mybox .mybox-teaser img {
  max-width: 100%;
  display: block;
}
.mybox-holder .mybox .mybox-teaser:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: 0 solid rgba(255, 255, 255, 0.25);
  z-index: 1;
  transition: border 0.7s ease 0s;
  -moz-transition: border 0.7s ease 0s;
  -webkit-transition: border 0.7s ease 0s;
  -ms-transition: border 0.7s ease 0s;
  -o-transition: border 0.7s ease 0s;
}
.mybox-holder .mybox .mybox-teaser:after {
  content: attr(data-text);
  position: absolute;
  left: 40%;
  right: 40%;
  top: 48%;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background-color: #E60101;
  opacity: 0;
  filter: alpha(opacity=0);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease 0.5s;
  -moz-transition: all 0.3s ease 0.5s;
  -webkit-transition: all 0.3s ease 0.5s;
  -ms-transition: all 0.3s ease 0.5s;
  -o-transition: all 0.3s ease 0.5s;
}
.mybox-holder .mybox .mybox-name {
  margin-top: 7px;
  font-weight: bold;
  font-size: 13px;
  text-shadow: 1px -1px 0 #000000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mybox-holder .mybox .popup {
  position: absolute;
  bottom: 0;
  width: 0;
  background-color: #000;
  border: 1px solid #777;
  margin-bottom: -1px;
  color: #eee;
  font-size: 12px;
  overflow: hidden;
  box-shadow: 0 0 10px #000000;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000;
  transition: width 0.5s ease 0s;
  -moz-transition: width 0.5s ease 0s;
  -webkit-transition: width 0.5s ease 0s;
  -ms-transition: width 0.5s ease 0s;
  -o-transition: width 0.5s ease 0s;
}
.mybox-holder .mybox .popup.expand-right {
  left: 100%;
  border-left: none;
  text-align: left;
}
.mybox-holder .mybox .popup.expand-left {
  right: 100%;
  border-right: none;
  text-align: right;
}
.mybox-holder .mybox .popup .popupbox-inner {
  position: relative;
  padding: 10px;
  padding-bottom: 40px;
  width: 240px;
}
.mybox-holder .mybox .popup .popup-desc {
  font-size: 12px;
  font-style: italic;
  color: #cacaca;
}
.mybox-holder .mybox .popup .difficulty {
  display: table;
  width: 100%;
  margin-top: 7px;
}
.mybox-holder .mybox .popup .difficulty > * {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.mybox-holder .mybox .popup .difficulty .label {
  width: 65px;
}
.mybox-holder .mybox .popup .mybtn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 10px;
  text-transform: uppercase;
}
.mybox-holder .mybox:hover {
  position: relative;
  background-color: #000;
  color: #eee;
  z-index: 5;
  box-shadow: 0 0 17px #000000;
  -moz-box-shadow: 0 0 17px #000000;
  -webkit-box-shadow: 0 0 17px #000000;
  transform: scale(1.05);
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}
.mybox-holder .mybox:hover .mybox-teaser:before {
  border-width: 15px;
}
.mybox-holder .mybox:hover .mybox-teaser:after {
  opacity: .8;
}
.mybox-holder .mybox:hover .popup {
  width: 260px;
  transition: width 0.5s ease 0.25s;
  -moz-transition: width 0.5s ease 0.25s;
  -webkit-transition: width 0.5s ease 0.25s;
  -ms-transition: width 0.5s ease 0.25s;
  -o-transition: width 0.5s ease 0.25s;
}
.mybox-holder .mybox.transparent {
  opacity: 0.3;
  filter: alpha(opacity=30);
  transform: scale(0.95);
  -moz-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
}
.fadetext {
  color: #888;
  text-align: center;
  font-style: italic;
  font-weight: normal;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 8px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.star {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAFmklEQVRIx52XTYxlRRXHf6fuve+7X/frnv5knEaRBSACCgsiAUZGwRgSYkz8CBsTJy6cxRhcmOjOEGNiNGFhSDSBxZhoIiTKsBJxIzEGYxhgiIYJDo4yMD1jp8eefh+36hwXdd9H97tPIzev+r56t279z/nX//yrWuzVL4MIEKC2CnO3QXYYrA84EEquBPM79+xtnSHf2/69S9KSMYYGjyRVqpmQ6RZhsEtSaZA4SA9OiO6A78Vu6IF5ptDFzUlWeVzzK7q79deHlWTXbBLSSNIqlXqbRudDVJotdOfivimmQzUPlU2o3wRXXoLeu+AmholAtXKUrH53Y/VGu3p56+jfz7/z3CAYIjHA4PssbXyUO459D3Zex2+9OAXjKL0ULI9BiBTDZJj5HNhxy/eypNmq1BdWjgu0pIgpYhvquxD2MM0pW68ZwAV4dTnedQ+sF5vYfYg+SBiAz2mvbj64srp0f7Oe0KxlNKopC+0265u3gB/MnH02sCk01oEc9BpoF7TbxOnXzUKGBqy/R9poVA5vHjkx36o1m/WUZj1hod1m48Y73ycwQMihugI6gHANnHvAhGOEfrEUOZZ3qXbWH6jUmsdUDecSljc2sN7ekPf3AYxB1iqAB00TOYn5lJBD8LENurgsTZfWNk6Kk4YB7YUONinz/x8YUIVaB5LKQyD34fugfgysHhtcY65z6N7FzvxnjlzXIXj/P6dNZwckKcgicAOS3WJp4yRh4EYlNVKqQTDEJW55bf27DLYXgddAzoP8C8RHhU4DC1AHaQAfAPsIFu4EfzsMPmx6dZngE9S7aCZFaQ3Xr6DUtE9SbdxE1nySpOZx4RKWv4XlrwAvI+4s4i4AXaAnduZLHyOpftukegdJ5TpcVjGpxlIOu6B9cALiAFeYhExpIa6pxWooXFBcHZyLDqj5wMLggtjgTYf/QRq8raPhXmz3UDQMHbPtMnAVMBfZEsFG2U5QPQKdALccC5djXyBO5G4wko6qzqVgz1vv8ldEkp/g0jUkBZfEDLVwsKF7jcpjmuopYDS+YwohxEDUv4v541KZO50Wpn/alBNo+LE4VjAt/C8pGBhSLZSKy4r7CFyLrDUGj2Kql8zshDh3Gtmv6mcshDpmT4hJx3Ag9t+zHS3xwazHwIJiattm+hjOPVNeTiKnNIRMlB+JuHlER6Ia66nIdiLh4s9EECHeTVHTHTMeE+dOTWqyrI6fVq+Jk/BDcTK3H1gO0H0g21E/gpravxW+Kc49PV3H035qwFOm1kDD4yKuxZSSZ2U8FpiZ7hruOzj31H5KYtDSfeHTE1FPioVU0FNO9Av711XKyngKXM39wnCPAn7M1pis1Gk+y049QQeYRgMZvSuzNxQbr7NgA5x5mMq3oDro7O0j92sWLWO/kmeqOn43wETXJEtnbxLqQ/kTcQ3xYR40BiwyIexyYJsMQlxbSRrx+FICbPmsLUw6BN8SsxHFNmT6IHX7frPioy0zWQArB47OUnrNk4cseu24dMwsGn+SnImnlHAbqnHzmBgnSNWcWwDeKQUW01lUL6Ja1xBwTsCMaiuDTv1lTH6JuefjOP0sYp9nu3dXfzf6uqohLqkCi8w4iaS1dlIO3LelvKe1rJlA5qCe/e7VN679/PtPXHhRlXMhxAmTRM46x7PfemT1k7fe3Pwi3fwoueJ7Vktrskil/JCT3v+Ns6UPvvqpQ4cfvWf+0B/e2Pvts3+6+uSf/9Z96dJVf/H1t/eYOGgPNXXuj3/ZPXdkufLcxz9Y/8Tn7mp/7e6bm8d+9pv3jvz0hSvlhM5a4Fs36w8f7mTXv3K++6v3dvxFNasClfh/zr53h1wGYOBE+qvz6crt19cf+cd2/s/X3u7+uuzoM+sSgcrSXOoK70iBatFqM9rweeoEluZSJ7Ffmtx/AGDXpJ+WZAdxAAAAAElFTkSuQmCC) no-repeat 0 0;
}
@media (max-width: 767px) {
  .mybox-holder {
    margin-left: 0;
  }
  .mybox-holder .mybox {
    width: 100%;
    margin-left: 0;
    float: none;
  }
  .mybox-holder .mybox .mybox-name {
    position: absolute;
    top: 8px;
    left: 278px;
    right: 10px;
    font-size: 18px;
    color: #eee;
    text-align: left;
  }
  .mybox-holder .mybox .popup {
    top: 48px;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0;
    width: auto !important;
    border: none;
    margin-left: 270px;
    text-align: left !important;
    background: inherit;
    z-index: 1;
  }
  .mybox-holder .mybox .popup .popupbox-inner {
    position: static;
    width: auto;
    padding-bottom: 0;
  }
  .mybox-holder .mybox .popup .mybtn {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .mybox-holder .mybox .mybox-teaser {
    margin: 0 auto;
    height: auto;
  }
  .mybox-holder .mybox .mybox-name {
    position: static;
    margin-left: 0;
    font-size: 14px;
  }
  .mybox-holder .mybox .popup {
    position: relative;
    top: -10px;
    margin-left: 0;
    font-size: 14px;
    padding-bottom: 25px;
  }
  .mybox-holder .mybox .popup .mybtn {
    font-size: 10px;
    bottom: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .mybox-holder .mybox .mybox-name {
    color: #eee;
  }
  .mybox-holder .mybox .popup {
    position: relative;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0;
    width: auto !important;
    border: none;
    text-align: left !important;
    background: transparent;
  }
  .mybox-holder .mybox .popup .popupbox-inner {
    position: static;
    width: auto;
    height: 100px;
    padding-bottom: 40px;
    padding-top: 5px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  
}
@media (min-width: 1200px) {
  
}