
.socialShareBox{
	cursor: pointer;
    text-align: center;
    float: left;
}

.socialShareBox > .socialSendBox{
	border: 1px solid #c3c3c3;
    padding: 2px;
    border-radius: 5px;
    background-color:  #FFFFFF;
}
.socialShareBox > .socialSendBox:hover{
	background-color:  #e6e6e6;
    /*color: #FFFFFF;*/
}

.socialShareBox > .socialClear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/*default*/
.socialShareBox > .fa-facebook{
	color: #3b5998;
	padding: 5px;
}

.socialShareBox > .fa-facebook:hover{
	background-color: #3b5998;
	color: #FFFFFF;
}


.socialShareBox > .fa-twitter{
	color: #4099FF;
	padding: 5px;
}

.socialShareBox > .fa-twitter:hover{
	background-color: #4099FF;
	color: #FFFFFF;
}


.socialShareBox > .fa-google-plus{
	color: #dd4b39;
	padding: 5px;
}

.socialShareBox > .fa-google-plus:hover{
	background-color: #dd4b39;
	color: #FFFFFF;
}


.socialShareBox > .fa-linkedin{
	color: #0e76a8;
	padding: 5px;
}

.socialShareBox > .fa-linkedin:hover{
	background-color: #0e76a8;
	color: #FFFFFF;
}


.socialShareBox > .fa-whatsapp{
	color:#42b179;
}

.socialShareBox > .fa-whatsapp:hover{
	background-color: #42b179;
	color: #FFFFFF;
}


.socialShareBox > .fa-mobile{
	color:#f5935c;
}

.socialShareBox > .fa-mobile:hover{
	background-color: #f5935c;
	color: #FFFFFF;
}

.socialShareBox > .fa-envelope-o{
	color:#dd4b39;
}

.socialShareBox > .fa-envelope-o:hover{
	background-color: #dd4b39;
	color: #FFFFFF;
}

/*square*/
.socialShareBox > .fa-facebook-square{
	color: #3b5998;
}

.socialShareBox > .fa-facebook-square:hover{
	color: #c3c3c3;
}


.socialShareBox > .fa-twitter-square{
	color: #4099FF;
}

.socialShareBox > .fa-twitter-square:hover{
	color: #c3c3c3;
}


.socialShareBox > .fa-google-plus-square{
	color: #dd4b39;
}

.socialShareBox > .fa-google-plus-square:hover{
	color: #c3c3c3;
}


.socialShareBox > .fa-linkedin-square{
	color: #0e76a8;
}

.socialShareBox > .fa-linkedin-square:hover{
	color: #c3c3c3;
}

.bg-facebook, .bg-facebook:hover, .bg-facebook:focus{
  background-color: #3b5998;
}
.bg-instagram, .bg-instagram:hover, .bg-instagram:focus{
  background-color: #ac2bac;
}
.bg-linkedin, .bg-linkedin:hover, .bg-linkedin:focus{
  background-color: #0082ca;
}
.bg-twitter, .bg-twitter:hover, .bg-twitter:focus{
  background-color: #55acee;
}
.bg-whatsapp, .bg-whatsapp:hover, .bg-whatsapp:focus{
  background-color: #25d366;
}
.bg-email, .bg-email:hover, .bg-email:focus{
  background-color: #dd4b39;
}
.bg-sms, .bg-sms:hover, .bg-sms:focus{
  background-color: #f5935c;
}

.btn-share-social{
  font-size: 1.2rem;
}

.reactionListTouchExit{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
  display: none;
  top: 0;
  left: 0;
}

.reactionsList{
  position: absolute;
  right: 0;
  margin-top: 50px;
  background-color: #FFF;
  border-radius: 25px;
  border: 1px solid #ddd;
  display: none;
  z-index: 10;
  box-shadow: 0px 0px 10px #ccc;
  cursor: pointer;
  width: 305px;
}
.reactionsList ul{
  list-style-type: '';
  padding: 0;
  margin: 0;
}
.reactionsList ul li{
  float: left;
  width: 50px;
}

.reactions{
  float: right;
  margin-right: 10px;
  user-select: none;
}
.reactions div{
  float: left;
}


.smallReactions div{
  float: left;
  margin-left: -18px;
  margin-top: 13px;
}

.nReactions{
    font-size: 18px;
    width: 100%;
    float: left;
    clear: both;
    text-align: center
}

.reactions_json{
  display: none;
}

.reactions_user_json{
  display: none;
}

.reactions .totReactions{
    margin-top: 10px;
    font-size: 18px;
    float: right;
}

.reactions .mainReaction{
  float: right;
  position: relative;
  z-index: 3;
  cursor: pointer;
}

.reactions .smallReactions{
  float: right;
  position: relative;
  z-index: 2;
}

.reactions .smallReactions div{
  float: right;
}



.reactionIconBig{
  background-image: url("https://media.tio.ch/static/img/reactions/reactions_big.png");
  width: 120px;
  height: 120px;
}

.reactionIconMedium{
  background-image: url("https://media.tio.ch/static/img/reactions/reactions_med.png");
  width: 50px;
  height: 50px;
}

.reactionIconSmall{
  background-image: url("https://media.tio.ch/static/img/reactions/reactions_small.png");
  width: 30px;
  height: 30px;
}


.reactionIconSmall,.reactionIconMedium,.reactionIconBig{

}

.reactionIconSmall.active,.reactionIconMedium.active,.reactionIconBig.active{
  filter: drop-shadow(0 0 0.2rem #007ac1);
}
.totReactions.active{
  color: #007ac1;
}
.nReactions.active{
  color: #007ac1;
}


.reactionIconSmall.up{
  background-position-y: -1158px;
}
.reactionIconMedium.up{
  background-position-y: -1930px;
}

.reactionIconSmall.angry{
  background-position-y: -988px;
}
.reactionIconMedium.angry{
  background-position-y: -1645px;
}

.reactionIconSmall.happy{
  background-position-y: -174px
;}
.reactionIconMedium.happy{
  background-position-y: -288px;
}

.reactionIconSmall.lol{
  background-position-y: -677px
;}
.reactionIconMedium.lol{
  background-position-y: -1127px;
}

.reactionIconSmall.surprised{
  background-position-y: -575px;
}
.reactionIconMedium.surprised{
  background-position-y: -958px;
}

.reactionIconSmall.sad{
  background-position-y: -275px;
}
.reactionIconMedium.sad{
  background-position-y: -458px;
}

.reactionIconSmall.love{
  background-position-y: -141px;
}
.reactionIconMedium.love{
  background-position-y: -234px;
}

.reactionIconSmall.down{
  background-position-y: -1187px;
}
.reactionIconMedium.down{
  background-position-y: -1978px;
}

.reactionIconSmall.nocomment{
  background-position-y: -1216px;
}
.reactionIconMedium.nocomment{
  background-position-y: -2027px;
}

/*WEB*/

.reactionIconSmall:hover, .reactionIconMedium:hover, .reactionIconBig:hover{
  transform: scale(1.2);
  filter: drop-shadow(0 0 0.2rem #007ac1);
}

.smallReactions .reactionIconSmall:hover, .smallReactions .reactionIconMedium:hover, .smallReactions .reactionIconBig:hover{
  transform: none;
  filter: none;
}

.reactions:hover .reactionsList{
  display: block;
}

/* FONT SIZE SLIDER */
#font-size-slider{
  position: absolute;
  top: 60px;
  font-size: 1.3rem !important;
}
#font-size-slider .thumb{
  display: none !important;
}
