body{font-family: 'Yantramanav', sans-serif;
            font-weight: 300;}
            
.fender{background-image:url(http://tom.dalizweb.nl/theme-color/fender.svg);background-position: center top;background-size: cover;}
.heavy_metal{background-image:url(http://tom.dalizweb.nl/theme-color/heavy_metal.svg);background-position: center top;background-size: contain;}
.talented{background-image:url(http://tom.dalizweb.nl/theme-color/talented.svg);background-position: center top;}
.blues{background-image:url(http://tom.dalizweb.nl/theme-color/blues.svg);background-position: center top;}
.deep_purlpe{background-image:url(http://tom.dalizweb.nl/theme-color/deep_purple.svg);background-position: center top;}
.gold_n_dark{background-image:url(http://tom.dalizweb.nl/theme-color/black_n_gold.svg);background-position: center top;}
.coolblue{background-image:url(http://tom.dalizweb.nl/theme-color/coolblue.svg);background-position: center top;}
.allblack{background-image:url(http://tom.dalizweb.nl/theme-color/allblack.svg);background-position: center top;}
.shaky_pink{background-image:url(http://tom.dalizweb.nl/theme-color/shaky_pink.svg);background-position: center top;}
.abstract{background-image:url(http://tom.dalizweb.nl/theme-color/abstract.svg);background-position: center top;}
.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}


.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}


.cc-selector-2 input{
    position:absolute !important;
    z-index:999 !important;
    left:20px;
    top:4px;
}
.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;    border: 2px solid #6663fb;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
        border: 2px solid #6663fb;
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    border: 2px solid #6663fb;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
  
}
.drinkcard-cc:hover{
    border: 2px solid #fff;
}

.select-css {
   display: block;
   font-size: 16px;
   font-family: sans-serif;
   font-weight: 700;
   color: #444;
   line-height: 1.3;
   padding: .6em 1.4em .5em .8em;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: 1px solid #aaa;
   box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
   border-radius: .5em;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
   background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
     linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
   background-repeat: no-repeat, repeat;
   background-position: right .7em top 50%, 0 0;
   background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
   display: none;
}
.select-css:hover {
   border-color: #888;
}
.select-css:focus {
   border-color: #aaa;
   box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
   box-shadow: 0 0 0 3px -moz-mac-focusring;
   color: #222;
   outline: none;
}
.select-css option {
   font-weight:normal;
}


.other-comment-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(155,155,255,1.0); color: #000;padding:40px 40px 10px 40px;text-align: left;
  width: 100%;
}
.comment-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(255,255,255,1.0); color: #000;padding:40px 40px 10px 40px;text-align: left;
  width: 100%;
}
.read-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(111,172,215,1.0); color: #000;padding:40px 40px 10px 40px;text-align: left;
  width: 100%;
}

.send-message-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(235,245,235,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}

.received-message-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(247,200,0,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}

.received-message-wrapper:hover{
margin-bottom:15px;border-radius: 20px;background: rgba(155,155,255,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}

.message-wrapper{
  margin-bottom:15px;border-radius: 20px;background: rgba(247,200,0,1.0); color: #000;padding:10px 40px 10px 40px;text-align: left;
}
.message-wrapper:hover{
margin-bottom:15px;border-radius: 20px;background:#e42320; color: #000;padding:10px 40px 10px 40px;text-align: left;
}


.message-intro h4{   
    color:#000; 
    padding:0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;}
.message-intro p{padding:0;margin:0;line-height: 24px;}


.cover h1{font-family: 'Yantramanav', sans-serif;
font-weight: 500;
line-height: 24px;
text-align: center;
margin-bottom: 0px;font-size:24px;
color:#fff;background-color: #000;
 width: 100%;
 padding:10px 5px;
 position:fixed;top: 55px !important;left:0; height: 50px;
 opacity: 0.7; }
 
 
            h1{font-family: 'Yantramanav', sans-serif;
            font-weight: 500;
            margin-bottom: 0px;font-size:24px;
            color:#fff;background-color: #000;
             width: 100%;
             padding:10px 5px;
             position: absolute;bottom: 0 !important; 
             opacity: 0.7; }

             p{font-family: 'Yantramanav', sans-serif;
            font-weight: 300;} 

               ul li {font-family: 'Yantramanav', sans-serif;
            font-weight: 300;}


            .logo{padding:15px;}
            .square-100{
    position: relative;
    width: 100%;
    padding-bottom : 100%; /* = width for a 1:1 aspect ratio */
      background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    overflow: hidden
}

b{font-family: 'Yantramanav', sans-serif;
            font-weight: 500;}

            .logo{padding:15px;}
            .square-100{
    position: relative;
    width: 100%;
    padding-bottom : 100%; /* = width for a 1:1 aspect ratio */
      background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    overflow: hidden
}
            
   .square-box{
    position: relative;
    width: 50%;
    overflow: hidden;

}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    padding:15px;
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
        background: #4679BD;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}