body{
       margin: 0px;
       min-height: 1000px;
   } 
   
   .pageBound {
    max-width: 580px;
    margin: 0 20px;
    color: #f2f2f2;
  }
  
  .pageBound{
    /* background: rgba(204, 204, 204, 0.15); */
    border-radius: 3px;
    padding: 5px 2px;
  }
   
   .avatar{
     margin: 0 0 -4px 0;
     display: inline-block;
     height: 30px;
     width: 30px;
     background-color: transparent;
     border: none;
   }
   
   .avatar3 {
       width: 18px;
       height: 18px;
       vertical-align: sub;
       margin: 0 0 -1px 0;
   }
   .rating{
       display: flex;
       padding-bottom: 4px;
       padding-top: 2px;
       padding-left: 4px;
   }
   .like{
       color: #B72E2E;
       cursor: pointer;
       margin-right: 2px;
   }
       
   .dislike{
       cursor: pointer;
       margin-right: 2px; 
       margin-left: 5px;
       color: #bbbbbc;
   }
   /* animate heart / thumbs up*/
   @-webkit-keyframes heartBeat {
       0% {
         -webkit-transform: scale(1);
         transform: scale(1);
       }
     
       14% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3);
       }
     
       28% {
         -webkit-transform: scale(1);
         transform: scale(1);
       }
     
       42% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3);
       }
     
       70% {
         -webkit-transform: scale(1);
         transform: scale(1);
       }
     }
     
     @keyframes heartBeat {
       0% {
         -webkit-transform: scale(1);
         transform: scale(1);
       }
     
       14% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3);
       }
     
       28% {
         -webkit-transform: scale(1);
         transform: scale(1);
       }
     
       42% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3);
       }
     
       70% {
         -webkit-transform: scale(1);
         transform: scale(1);
       }
     }
     
     .heartBeat {
       -webkit-animation-name: heartBeat;
       animation-name: heartBeat;
       -webkit-animation-duration: 1.3s;
       animation-duration: 1.3s;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out;
     }
     @keyframes thumbsUp {
       0% {
         transform: rotate(0deg);
       }
       60% {
         transform: rotate(-40deg);
       }
       85% {
         transform: rotate(15deg);
       }
       100% {
         transform: rotate(0deg);
       }
     }
     .thumbsUp {
       transform-origin: bottom left;
       animation: thumbsUp .8s;
     }

     .preloader {
      margin: 30px auto;
    }
    .preloader.swap {
      text-align: center;
      width: 55px;
      position: relative;
    }
    .preloader.swap .point {
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
      position: absolute;
    }
    .preloader.swap .point.first {
      left: 5px;
      top: 5px;
      width: 10px;
      height: 10px;
      background-color: #34559e;
      margin-right: 10px;
      animation: preloaderSwapFirst 1s ease infinite;
    }
    .preloader.swap .point.second {
      right: 0px;
      top: 0px;
      width: 40px;
      height: 40px;
      background-color: #B72E2E;
      animation: preloaderSwapSecond 1s ease infinite;
    }
    
    @keyframes preloaderSwapFirst {
      0% {
        width: 10px;
        height: 10px;
      }
      50% {
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
      }
      100% {
        width: 10px;
        height: 10px;
      }
    }
    @keyframes preloaderSwapSecond {
      0% {
        width: 40px;
        height: 40px;
      }
      50% {
        right: 5px;
        top: 5px;
        width: 10px;
        height: 10px;
      }
      100% {
        width: 40px;
        height: 40px;
      }
    }

   .user {
       text-align: right;
       margin-left: auto;
       margin-right: 5px;
   }
   /* quick grid */
   .row {
       display: flex;
       justify-content: flex-end;
       margin: 0 22px;
   }
   #grid{
       padding: 0px 20px 0px 20px;
   }
   #search{
       max-height: 36px;
       height: 36px;
       width: 45%;
       max-width: 220px;
       display: inline-block;
       background-color: rgba(0,0,0,0.05);
       border-bottom: 2px solid rgba(1, 77, 178,1);
       margin-top: 0px !important;
   }

   #search::placeholder {
    color:rgba(0, 0, 0, 0.3)
   }

   .media-boxes-icon,
   .media-boxes-clear{
       height: 26px;
       max-height: 30px;
       background-color: rgba(0,0,0,0.05);
       padding: 8px 8px 0px 5px;
       display: inline-block;
       border-bottom: 2px solid rgba(1, 77, 178,1);
   }

   .media-boxes-clear{
    margin-right: 8px;
   }

   #sort {
       border: none;
       min-height: 39px;
   }
   .comments{
       background-color: #161616;
       height: auto;
       padding: 6px;
       border-radius: 3px;
       color: #f2f2f2;
       display: none;
       margin: 0px 1px;
   }
   .comments form{
       display: flex;
       justify-content: space-between;
       margin-bottom: 0px;
   }
   
   .add_comment {
       height: 14px;
       display: inline-block;
       padding: 5px 15px; 
       background: #34559e;
       color: #f2f2f2;  
       border: none;
       cursor:pointer;
       border-radius: 4px;
       -webkit-border-radius: 4px;
       font-size: 12px;
       transition: background .2s ease-in;
       user-select: none;
       margin-top: 5px;
   }
   .add_comment:hover {
       background: rgb(62, 103, 192);
   }
   input[type=text], textarea {
       width: calc(100% - 45px);
       height: 30px;
       font-size: 14px;
       display: inline-block;
       padding: 3px;
       margin-bottom: 5px;
       margin-top: 3px;
       background: none;
       border: 0px solid #a0b3b0;
       border-width: 0 0 2px 0;
       color: #f2f2f2;
       -webkit-transition: border-color .25s ease, box-shadow .25s ease;
       transition: border-color .25s ease, box-shadow .25s ease;
   }
   input:focus, textarea:focus {
       outline: 0;
       border-color: rgba(1, 77, 178,1);
       background-color: #272727;
   }
   .link{
       color: silver;
       line-height: 20px;
   }
   .each{
       margin: 2px 0 5px 0;
       background-color: #272727;
       border-radius: 2px;
       padding: 3px 4px 6px 4px;
   }
   .addMore {
       cursor: pointer;
       font-size: .8em;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 0 3px 0;
       color: rgba(128, 128, 128, 0.8);
       border: 1px solid rgba(128, 128, 128, 0.8);
       border-radius: 2px;
       padding: 4px;
       transition: background-color .3s ease-out;
       user-select: none;
   }
   .addMore:hover {
       color: rgba(128, 128, 128, 1);
       border: 1px solid rgba(128, 128, 128, 1);
       text-shadow: 0 .1em #161616;
       background-color: rgba(192, 192, 192, 0.1);
   }
   
   .addMore:active{
       box-shadow: 0 0 2px rgba(158, 158, 158, 0.8);
       transform: translateY(1px);
   }
   /* .addIco{
       font-size: 1.8em !important;
   } */
   
   .fonts {
   color: #f2f2f2 !important;
   text-shadow: 0 1px 1px #161616;
   background-color: rgba(0, 0, 0, 0.75);
   padding: 5px 5px 5px 5px;
   border-radius: 4px;
   max-width: 275px;
   margin: 15px auto;
   }
   @media screen and (max-width: 450px) {
       .expand{
           display: none;
       }
       #grid{
         padding: 0px 10px 0px 10px;
     }
     .row {
       justify-content: center;
       margin: 0 10px;
   }
   }