.blue_on_hover{
background-color:#888888 !important;  
border:none !important;
transition:all 0.2s ease-out;
}

.blue_on_hover:hover{
background-color:#0A81ED !important;    
border:none;
    
}


.eventgreyarea{
height:65px;    
padding:5px 10px 5px 10px;  
background-color:#333333; 
border-radius:5px; 
margin-bottom:7px;    
}





.topFighterLink{
text-decoration:none;   
outline:none;
}

.topFighterName{
color:grey; 
transition: all 0.3s ease;
margin-left:1px;
}

.topFighterLink:hover .topFighterName { 
color:#F5C518;
margin-left:5px;
    
}


.topFighterRating{
text-decoration:none;
transition: all 0.3s ease;
color:#F5C518;    

}

.topFighterLink:hover .topFighterRating{
/*margin-right:8px;*/
color:#F5C518;    
margin-right:-5px;
    
}


.recommended_title{
color:#808080;
transition: all 0.3s ease-out;
}

.recommended_event{
color:#808080;
transition: all 0.3s ease-out;
}


.recommendedLink{
transition: all 0.3s ease-out;
}

.recommendedLink:hover{

}

.recommendedLink:hover .recommended_title{
color:white;
}

.recommendedLink:hover .recommended_event{
color:white;
}




.index_single_recommended_fight_title{
color:#eeeeee;   
transition: all 0.3s ease;
}

.index_single_recommended_fight_star_and_score{
opacity:0.8;    
transition: all 0.3s ease;
}

.index_single_recommended_fight_container{
background-color:none;
transition: all 0.3s ease;
opacity:0.9;
}

.index_single_recommended_fight_container:hover{
/*background-color:#333333;*/
opacity:1;
    
}

.distribution_bar_background{
background-color:#333333;
transition: all 0.3s ease-out;
}

.distribution_chart_line{
 text-decoration:none;
 
}

.distribution_chart_line:hover .distribution_bar_background { 
background-color:#808080;
}



.distribution_bar_background_no_hover{
 background-color:#333333;
transition: all 0.3s ease-out;   
}

.distribution_bar_background_no_hover:hover{
 background-color:#333333;
    
}




.index_single_recommended_fight_container:hover .index_single_recommended_fight_title { 
color:white;
}


.index_single_recommended_fight_container:hover .index_single_recommended_fight_star_and_score{
opacity:1;    
}










.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


/* tags */

/* This is to be able to center the content in the middle of the page; */
/*.tags-container{width: 250px; height: 38px; margin: 100px auto;}*/


.cat{
  margin: 4px;
  background-color: #e3e3e3;
  border-radius: 15px;
  border: none;
  overflow: hidden;
float:left; 
transition: all 0.3s ease-out;
color:#333333;

}

.cat:hover{
cursor:pointer; 
background-color: #F5C518;
}

.cat label {
  line-height: 1.5em;
  height: 2.0em;
}

.cat label span {
  text-align: center;
  padding: 7px 13px 20px 13px;
  display: block;
  transition:0.3s ease;
  color:#333333;

}



.cat label span::before {
  /*content: '\00002B \0000A0 \0000A0'; THIS LINE PUTS A PLUS SIGN IN THE TAG BOX IF NOT CHECKED.    */
  content: '';
}


.cat label input {
  position: absolute;
  display: none;
  color: #333333 !important;
}
/* selects all of the text within the input element and changes the color of the text */
.cat label input + span{
    color: #333333;
    
}


/* This will declare how a selected input will look giving generic properties */
.cat input:checked + span {
    color: #ffffff;
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.mainaction input:checked + span{background-color:#F5C518; color:#333333;}
.mainaction input:checked + span::before {
  /*content: '\002714 \0000A0';  THIS LINE PUT A CHECKMARK IN THE TAG BOX IF CHECKED. */
  content: '';
  
}

/*.mainaction input:unchecked + span::before {*/
/*  content: '\0000A0 \00002B \0000A0';*/
/*}*/









.tagwords{
font-weight:500 !important;  
font-size:17px;
    
}




/* end of tags checkboxes */












.grow_on_hover{
transition: all 300ms ease-out;    
}

.mobile_break{
display:none;    
}

.sidebar_container{

}

.mobile_only{
display:none !important;    
}

.desktop_only{
display:inline-block !important;    
}

.add_word_row{
background-color:#333333; 
padding:15px 30px 40px 30px; 
border-radius:8px; 
margin-bottom:20px;
}



.underlined{
text-decoration:underline;    
    
}

.white{
color:white !important;    
    
}


.fw_body_container{
padding:0px;    
}



.a_to_z_links{

color:#dddddd;    
transition:0.4s ease;
font-size:16px;
}

.a_to_z_links:hover{

color:white;  
text-decoration:underline;

}




.fw_navbar{
margin-left:-15px;
margin-top:-5px;
    
}

.word_card_video_title{
margin-top:10px;
margin-left:4px;
    /*color:white; */
color:#eeeeee;
font-weight:600;
font-size:15px;  
white-space: pre-line;
line-height:1.6em;

    
    
}



.define_a_word_button{
padding-top:8px;
padding-bottom:8px;
padding-left:28px;
padding-right:28px;
border:1px solid white;
background-color:white;
color:#333333;
font-size:16px;
font-weight:900;
border-radius:7px;
transition: all 300ms ease-out;  
width:100%;
}



.define_a_word_button:hover{

background-color:#333333;
color:white;
transform: scale(1.03);    
transition: all 300ms ease-out;    

}    
   


.grow_on_hover:hover{
transform: scale(1.03);    
transition: all 300ms ease-out;    
}



.sidebar_fight_words_sort_by_links{

background-color:#333333;
border-radius:7px;
padding:10px;
text-align:center;
margin:5px 0px 5px 0px;
cursor:pointer;    
transition:0.4s ease;
    
}


.sidebar_fight_words_sort_by_links:hover{
background-color:#888888;
    
}









.fight_card_primary{
padding:5px 10px 5px 10px;  
height:70px; 
background-color:#333333; 
border-radius:5px; 
margin-bottom:7px;    
transition: all 300ms ease-out;
}

.fight_card_primary:hover{
transform: scale(1.03);
transition: all 300ms ease-out;
}

.upvote_downvote_buttons_row{
 
padding-left:35px;
padding-right:35px;

}

.fight_word_sidebar_word{
color:white;
font-size:18px;
font-weight:700;
    
}


.fight_word_sidebar_definition{
    color:#ddd;
font-size:14px;
font-weight:500;
line-height:1.1em;
margin-top:6px;
}


.sidebar_fightword_card{
padding:15px;  
min-height:65px; 
background-color:#333333; 
border-radius:5px; 
margin-bottom:10px;  
cursor:pointer;
transition: all 300ms ease-out;    
}

.sidebar_fightword_card:hover {
/*background-color:#444444; */
transform: scale(1.03);
transition: all 300ms ease-out;
    
}


/* video modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ 
  
}

/* Modal Content/Box */
.modal-content {
  
  background-color: black;
  margin: 10% auto; /* 10% from the top and centered */
  /*padding: 35px 20px 35px 20px;*/
  padding: 20px 20px 20px 20px;
  border: 1px solid black;
  width: 720px; /* Could be more or less, depending on screen size */
  text-align: center;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 60px;
  font-weight: bold;
  margin-top:-10px;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}







/* Fight Words */


.add_another_video_button{
color:#e8e8e8;    
font-size:18px;
cursor:pointer;
padding:10px;
margin-top:-30px;
}



.validation_response_class{
display:inline-block; 
width:100%; 
margin-top:10px; 
color:#A26076;
font-size:22px;
margin-bottom:30px;
}




.input_box{
    color:white;
border-radius:7px;
background-color:#878787;
border-radius:10px; 
padding:20px 15px 20px 15px; 
width:100%; 
font-size:20px;
outline:0;
}

::placeholder{
color:#c1c1c1;    
}



.input_label{
width:230px; 
color:white;
font-size:20px;
padding-bottom:5px;
font-family:sans-serif;
font-weight:900;
}



.grey_disabled_submit_button{

    width: 100%;
    border: none;
    color: #aaaaaa;
    background-color: #cccccc;
    display: inline-block;
    border-radius: 8px;
    font-size: 20px;
    padding: 20px 60px 20px 60px;
    margin-top: 5px;
    margin-bottom: 10px;
font-family:sans-serif;
font-weight:900;

}




.blue_submit_button{
    
    width: 100%;
    border: none;
    color: white;
    background-color: #83B4F3;
    display: inline-block;
    border-radius: 8px;
    font-size: 20px;
    padding: 20px 60px 20px 60px;
    margin-top: 5px;
    margin-bottom: 10px;
font-family:sans-serif;
font-weight:900;
transition:0.5s ease;
}


.blue_submit_button:hover {
background-color: #b2d0f8;    
    
}



.grey_cancel_button{
    
    width: 100%;
    border: none;
    color: #dddddd;
    background-color: #808080;
    display: inline-block;
    border-radius: 8px;
    font-size: 20px;
    padding: 20px 60px 20px 60px;
    margin-top: 5px;
    margin-bottom: 10px;
font-family:sans-serif;
font-weight:900;



}


.word_card_col{

}

.word_card{

background-color:#333333; 
border-radius:6px; 
padding:15px 35px 15px 35px;
    
}

.word_card_title {
color:white; 
font-weight:700;
font-size:32px;

}

.link_style{
text-decoration: none !important;
}

.link_style:hover{
text-decoration: none !important;
}

.word_card_definition{
/*color:white; */
color:#eeeeee;
font-size:18px;  
white-space: pre-line;
line-height:1.6em;
}

.word_card_example{
/*color:white; */
color:#eeeeee;
font-size:18px;  
font-style:italic;    
white-space: pre-line;
line-height:1.6em;
padding:15px;
}

.word_card_author_and_date{

font-size:14px;  
 text-align:right;
 color:#aaa;

}

.word_card_video_card{
color:white;
margin-bottom:10px;
font-size:18px;
}

.word_card_video_card:hover {
cursor:pointer;
    
}

.word_card_video_thumbnail{
border-radius:10px;    
width:100%;
}

.word_card_videos_card_title{
color:#ffffff;
font-size:18px;
font-weight:700;
padding-bottom:20px;
}



.unclicked_word_upvote{
margin: 0px;
font-weight:900; 
font-size:10px;        
color:#777777;
width:100%;
height:50px;
border:1px solid grey;
background-color:#333333;
font-weight:700; 
border-radius: 15px 0px 0px 15px;
transition: 0.4s ease;
text-align:center;
cursor:pointer;

padding:12px 10px 10px 10px;

}

.unclicked_word_upvote:hover{
background-color:#4C4630;
    
}


.clicked_word_upvote{
    margin: 0px;
font-weight:900; 
font-size:10px;        
color:#777777;


width:100%;
height:50px;
border:1px solid #777777;
background-color:#F5C518;
font-weight:700; 
border-radius: 15px 0px 0px 15px;
transition: 0.4s ease;

padding:12px 10px 10px 10px;
text-align:center;
cursor:pointer;
animation: divBounce;
animation-duration: 0.75s;
animation-delay: 0s;
animation-timing-function: ease-out;

}



.unclicked_word_downvote{
    margin: 0px;
font-weight:900; 
font-size:20px;        
color:#777777;
width:100%;
height:50px;
border:1px solid grey;
background-color:#333333;
font-weight:700; 
border-radius: 0px 15px 15px 0px;
padding:10px 10px 10px 10px;
transition: 0.4s ease;
cursor:pointer;
text-align:center;
}


.unclicked_word_downvote:hover{
background-color:#4C4630;
    
}


.clicked_word_downvote{
    margin: 0px;

font-weight:900; 
font-size:20px;        
color:#777777;

transition:0.4s ease;
width:100%;
height:50px;
border:1px solid #777777;
background-color:#F5C518;
font-weight:700; 
border-radius: 0px 15px 15px 0px;
padding:10px 10px 10px 10px;
cursor:pointer;
animation: divBounce;
animation-duration: 0.75s;
animation-delay: 0s;
animation-timing-function: ease-out;
text-align:center;
}




.hidden_floating_one{

display:none;
position:absolute;   
margin-top:0px;

}




.showing_floating_one{

margin-top:0px;
display:inline-block;
color:#DDDDDD;
font-size:18px; 
margin-left:-14px;
position:absolute;
animation: riseUp;
animation-duration: 1.25s;
animation-delay: 0s;
animation-timing-function: ease-out;

    
}



@keyframes riseUp {

0% { margin-top:0px;}
100% { margin-top:-50px; opacity:0.0;}

}








@keyframes fadeIn {

0% { color: pink; background-color:pink; }
20% { color: yellow; }
40% { color: cyan; background-color:red; }
60% { color: green; }
80% { color: red; }
100% { color: blue; background-color:#F5C518; }

}



@keyframes thumbBounce {

0% { margin-left:14px;}
25% { margin-left:24px; }
50% { margin-left:14px; }
75% { margin-left:24px; }
100% { margin-left:14px; }

}



@keyframes divBounce {

0% { padding-left:10px; /* background-color:#333333; */ }
/*13% { background-color:#5f95f7; }*/
15% { padding-left:13px;}
25% { padding-left:20px;}
/*35% { background-color:#f98484;}*/
50% { padding-left:5px; }
/*65% {background-color:#F5C518;}*/
75% { padding-left:12px;}
100% { padding-left:10px;}

}



.thumbs_upvote_vote_image{
    
width:25px;  
height:35px;
margin-right:10px;
margin-top:-5px;


}


.thumbs_upvote_vote_image_bouncing{
    
width:25px;  
height:35px;
margin-right:10px;
margin-top:-5px;

animation: thumbBounce;
animation-duration: 1s;
animation-delay: 0s;


}


.upvote_number{
font-size:18px;    


  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}



.thumbs_downvote_vote_image{
    
width:25px;  
height:35px;
margin-right:10px;
margin-top:-12px;

    
    
}


.thumbs_downvote_vote_image_bouncing{
    
width:25px;  
height:35px;
margin-right:10px;
margin-top:-12px;

    
    
animation: thumbBounce;
animation-duration: 1s;
animation-delay: 0s;

    
}


.downvote_number{
font-size:18px;    

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}




/*********************************************/
/******** BEGIN MOBILE ***********************/
/*********************************************/

@media only screen and (max-width: 600px) {     /* start of css for phone screens */

.cat:hover{
background-color: #e3e3e3;
}


.eventgreyarea{
height:94px;
padding:5px 15px 5px 10px;  
background-color:#333333; 
border-radius:5px; 
margin-bottom:7px;
}



.recommended_title{
color:#808080;
transition: all 0.3s ease-out;
}




.topFighterLink{
text-decoration:none;   
outline:none;
}

.topFighterName{
color:grey; 
transition: all 0.3s ease;
margin-left:1px;
}

.topFighterLink:hover .topFighterName { 
color:#F5C518;
margin-left:5px;
    
}


.topFighterRating{
text-decoration:none;
transition: all 0.3s ease;
color:#F5C518;    

}

.topFighterLink:hover .topFighterRating{
/*margin-right:8px;*/
color:#F5C518;    
margin-right:-5px;
    
}






.upvote_number{


  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}



.downvote_number{

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */

}


.mobile_break{
display:inline-block;    
}



.sidebar_container{
padding-left:0px !important;
padding-right:0px !important;

}



.mobile_only{
display:inline-block !important;    
}

.desktop_only{
display:none !important;    
}




.add_word_row{
background-color:#333333; 
padding:5px; 
border-radius:8px; 
margin-bottom:20px;
}



.fw_body_container{
padding:20px;    
}




.fw_navbar{
margin-left:-15px; 
margin-right:-15px;
margin-top:-40px;
}



.upvote_downvote_buttons_row{
 
padding-left:15px;
padding-right:15px;

}





.hidden_floating_one{

display:none;
position:absolute;   
margin-top:0px;

}




.showing_floating_one{

margin-top:0px;
display:inline-block;
color:#DDDDDD;
font-size:18px; 
margin-left:-14px;
position:absolute;
animation: riseUp;
animation-duration: 1.25s;
animation-delay: 0s;
animation-timing-function: ease-out;

    
}


























.add_another_video_button{
color:#e8e8e8;    
font-size:18px;
cursor:pointer;
padding:10px;
margin-top:-30px;
}



.validation_response_class{
display:inline-block; 
width:100%; 
margin-top:10px; 
color:#A26076;
font-size:18px;
margin-bottom:30px;
}




.input_box{
color:white;
border-radius:7px;
background-color:#878787;
border-radius:10px; 
padding:20px 15px 20px 15px; 
width:100%; 
font-size:16px;
outline:0;
}

::placeholder{
color:#c1c1c1;    
}



.input_label{
width:230px; 
color:white;
font-size:20px;
padding-bottom:5px;
font-family:sans-serif;
font-weight:900;
}

.blue_submit_button{
    
    width: 100%;
    border: none;
    color: white;
    background-color: #83B4F3;
    display: inline-block;
    border-radius: 8px;
    font-size: 20px;
    padding: 20px 60px 20px 60px;
    margin-top: 5px;
    margin-bottom: 10px;
font-family:sans-serif;
font-weight:900;
}

.grey_cancel_button{
    
    width: 100%;
    border: none;
    color: #dddddd;
    background-color: #808080;
    display: inline-block;
    border-radius: 8px;
    font-size: 20px;
    padding: 20px 60px 20px 60px;
    margin-top: 5px;
    margin-bottom: 10px;
font-family:sans-serif;
font-weight:900;



}




  
.word_card_col{
    
}


.word_card{

background-color:#333333; 
border-radius:6px; 
padding:5px 15px 5px 17px;

}


.word_card_title {
color:white; 
font-weight:900;
font-size:24px;
    
}



.link_style{
text-decoration: none !important;
}

.link_style:hover{
text-decoration: none !important;
}


.word_card_definition{
color:#eeeeee; 
font-size:16px;
white-space: pre-line;
}

.word_card_example{
color:white; 
font-size:16px; 
font-style:italic;   
white-space: pre-line;
}

.word_card_author_and_date{
color:#aaaaaa; 
font-size:14px; 
text-align:center;
margin-top:15px;
}



.word_card_video_card{
color:white;
margin-bottom:10px;
font-size:18px;
}

.word_card_video_thumbnail{
border-radius:10px;    
width:100%;
}

.word_card_videos_card_title{
color:white;
font-size:18px;
font-weight:700;
}



/* video modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ 
  
}

/* Modal Content/Box */
.modal-content {
  
  background-color: black;
  margin: 1% auto; /* 10% from the top and centered */
  /*padding: 35px 20px 35px 20px;*/
  border: 1px solid black;
  width: 100%; /* Could be more or less, depending on screen size */
  
  text-align: center;
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 60px;
  font-weight: bold;
  margin-top:-10px;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}





.modal-content iframe {
	width: 100%;
	height: 100%;
	margin-top:20px;
}





} /* end of under 600px - phones*/