.modal_fighttitle{
font-size:24px;    
}


.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;
  /*background-color: cyan;*/
  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;*/
  line-height: 1.5em;
  height: 1.9em;
}

.cat label span {
  text-align: center;
  /*padding: 7px 13px 20px 13px;*/
  padding: 5px 11px 18px 11px;
  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 {
  /*THIS LINE PUT A CHECKMARK IN THE TAG BOX IF CHECKED. */
  content: '\002714 \0000A0';  
  /*content: '';*/
  
}

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









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




/* 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 */




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




.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*/























/* section copied from index */



.whereisx{
position:relative; 
margin-top:0px; 
margin-left:0px;
}


.largegreystar{
height:100px; 
width:100px; 
margin-left:20px; 
margin-top:1px; 
}




/* code for slick slider on sidebar, top rated fighters. */



.carousel.slick-initialized {
    visibility: visible;
    opacity: 1;    
}


.slick-slide{
  margin:0px;
}
.slick-slide img{
  width:100%;
  border: none;
  border-radius:4px;
  max-height:180px;
}
.wrapper .slick-dots li button:before {
  font-size:12px;
  color:white;
}  


.scrollerTitle{
margin-left:0px;    
font-size:22px;
color:#e5e5e5;
font-weight:700;
    
}

.carouselListing{
font-size:14px;    
}



.sliderFightTitle{
font-size:15px;
color:#e5e5e5;
font-weight:500;
margin-top:21px;
}


.sliderFightEvent{
font-size:12px;
color:#666666;
font-weight:500;
}



 /*end of stuff for sidebar slider top rated fighters */






























        .chart-container {
            width: 100%;
            max-width: 600px;
            margin: auto;
        }
        .bar {
            display: flex;
            align-items: center;
            margin: 5px 0;
            background-color:red;
        }
        .bar-label {
            width: 70px;
            text-align: right;
            margin-right: 10px;
        }
        .bar-fill {
            background-color: #ffcc00;
            height: 20px;
            /*flex-grow: 1;*/
            position: relative;
        }
        .bar-fill span {
            position: absolute;
            right: 5px;
            top: 0;
            font-size: 12px;
        }

.fill-container{
width:100%;    
}





















 .makedarkerbg{background-color:#f1f1f1;}
 .makedarkerbg:hover{background-color:#cccccc;} 
 
 

/* to show different chunks of content on mobile and desktop */

@media (min-width:800px){
.mobile-display{display:none}
.desktop-display{display:block;}
}


@media (max-width:800px){
.desktop-display {display:none}
.mobile-display {display:block;}

    
    
.rating > label {
background-size:30px;
margin-left:0px; 
width:41px;

/*margin-left:5px;*/
/*margin-right:5px;*/
}    
    
    
    
    
    
    
    
}


















.percentscore-thumbnail{
margin-left:10px; 
font-weight:900; 
font-size:16px; 
color:#83B4F3;    
}





 /* slider stuff */
 
 .wrapper{
  width:100%;
  padding:0px;
  text-align:left;
  
}

h2{
  font-family:sans-serif;
  color:#fff;
}

.carousel{
  width:100%;
  margin:0px auto;
  margin-top:0px;
  /* margin-left:-10px !important; */

    
opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    
    
    
    
}




.carousel.slick-initialized {
    visibility: visible;
    opacity: 1;    
}



















.slick-slide{
  margin:0px;
}
.slick-slide img{
  width:100%;
  border: none;
  border-radius:4px;
  max-height:180px;
}
.wrapper .slick-dots li button:before {
  font-size:12px;
  color:white;
}  


.scrollerTitle{
margin-left:0px;    
font-size:22px;
color:#e5e5e5;
font-weight:700;
    
}

.carouselListing{
font-size:14px;    
}



.sliderFightTitle{
font-size:15px;
color:#e5e5e5;
font-weight:500;
margin-top:21px;
}


.sliderFightEvent{
font-size:12px;
color:#666666;
font-weight:500;
}





.arrow-hover{
background-color:#181818;
transition-duration: 0.2s;
width:70px;    
}


.arrow-hover:hover {
background-color:#404040;
width:70px;
    
}






.donotshow{
display:none !important;    
}


.underline-on-hover{
text-decoration:none;
}


.underline-on-hover:hover {
text-decoration:underline;
}




/* MODAL STUFF     */



.modal-button{
width:300px;    
}


    
    .vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
    
}
    
    
/* STAR RATING STUFF */



.starboxcontainer {
  background:none;
  display: flex;
  flex-wrap: wrap;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin-bottom:15px;
  margin-top:-180px;
}

.rating {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  flex-direction: row-reverse;
  height: 285px;                    /* spot 4 */
  position: relative;
}

.rating-0 {
  filter: grayscale(100%);
}

.rating > input {
  display: none;
}

.rating > label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-top: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  /*background-size: 76%;*/
  background-size: 90%;
  transition: .3s;
  
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23F5C518' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d4a809' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.feedback {
  max-width: 360px;
  background:none;
  /*width: 100%;*/
  padding:0px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  width:150%; 
  margin-left:4.5%; 
  text-align:center;

    
}





.emoji-wrapper {
  width: 100%;
  text-align: center;
  height: 125px;             /*  spot 2 */
  overflow: hidden;
  position: absolute;
  margin-top:2px;
  margin-left: 0px;
}

.emoji-wrapper:before,
.emoji-wrapper:after{
  content: "";
  height: 15px;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.emoji-wrapper:before {
  top: 0;
  background: linear-gradient(to bottom, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 35%,rgba(51,51,51,0) 100%);
}

.emoji-wrapper:after{
  bottom: 0;
  background: linear-gradient(to top, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 35%,rgba(51,51,51,0) 100%);
}

.emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .9s;
  margin-top:-822px;
  transition-timing-function: ease;
}



/* spot 3 */

#rating-1:checked ~ .emoji-wrapper > .emoji { transform: translateY(109px); }
#rating-2:checked ~ .emoji-wrapper > .emoji { transform: translateY(195px); }
#rating-3:checked ~ .emoji-wrapper > .emoji { transform: translateY(281px); }
#rating-4:checked ~ .emoji-wrapper > .emoji { transform: translateY(366px); }
#rating-5:checked ~ .emoji-wrapper > .emoji { transform: translateY(450px); }
#rating-6:checked ~ .emoji-wrapper > .emoji { transform: translateY(536px); }
#rating-7:checked ~ .emoji-wrapper > .emoji { transform: translateY(622px); }
#rating-8:checked ~ .emoji-wrapper > .emoji { transform: translateY(706px); }
#rating-9:checked ~ .emoji-wrapper > .emoji { transform: translateY(791px); }
#rating-10:checked ~ .emoji-wrapper > .emoji { transform: translateY(878px); }




.ratingnumber{
font-size:50px; 
color:white;
font-weight:900;
height:85px;
    
}

    
 
 
 
 
 
 
 
 
 /* for rate buttons on this page */
 
 
 
 .ratebuttongrey {
  background-color:#333333;     
  transition-duration: 0.2s;
  padding:9px; 
  padding-right:10px; 
  margin-left:-17px; 
  margin-top:-14px; 
  width:100px; 
  border:none; 
  border-radius:8px; 
  text-align:left;
}



.ratebuttongrey:hover {
  background-color: #999999;
  
}



.ratebuttongrey-novote{

  background-color:#333333;     
  transition-duration: 0.2s;
  padding:9px; 
  padding-right:5px; 
  padding-left:5px; 
  margin-left:-17px; 
  margin-top:-14px; 
  width:100px; 
  border:none; 
  border-radius:8px; 
  text-align:center;
      
}



.ratebuttongrey-novote:hover {
  background-color: #999999;
  
}





.ratebuttongrey-novote-thumbnailtype{


  background-color:#202020;     
  transition-duration: 0.2s;
  padding:0px; 
  padding-right:10px; 
  padding-left:10px; 
  padding-top:1px; 
  padding-bottom:9px; 
  margin-left:-12px; 
  margin-top:0px; 
  min-width:80px; 
  border:none; 
  border-radius:8px; 
  text-align:left;

/*
  background-color:#202020;
  transition-duration: 0.2s;
  padding:0px; 
  padding-right:10px; 
  padding-left:10px;
  padding-bottom:9px;
  padding-top:9px;
  margin-left:-10px; 
  margin-top:0px; 
  min-width:80px; 
  border:none; 
  border-radius:8px; 
  text-align:center;
 */
 
}



.ratebuttongrey-novote-thumbnailtype:hover {
  /* background-color: #999999; */
  background-color: #404040;
  
}




.ratebuttongrey-novote-thumbnailtype-mobile{


  background-color:#202020;  
   
  transition-duration: 0.2s;
  /*padding:0px 10px 0px 20px;  */
  margin-left:-7px; 
  margin-top:7px;
  border:none; 
  border-radius:8px; 
  text-align:center;
  width:100%;
 
}



.ratebuttongrey-novote-thumbnailtype-mobile:hover {
  /* background-color: #999999; */
  background-color: #404040;
  
}




 
 .ratebuttongrey-thumbnailtype {
  background-color:#202020;     
  transition-duration: 0.2s;
  padding:0px; 
  padding-right:25px; 
  padding-left:18px; 
  padding-top:2px; 
  padding-bottom:10px; 
  margin-left:-15px; 
  margin-top:1px; 
  min-width:80px; 
  border:none; 
  border-radius:8px; 
  text-align:left;
}



.ratebuttongrey-thumbnailtype:hover {
  background-color: #404040;
  
}



 
 .ratebuttongrey-thumbnailtype-mobile {
  
    
    
  background-color:#202020;  
  transition-duration: 0.2s;
  padding:0px 5px 5px 10px; 
  margin-left:0px; 
  margin-top:3px;
  border:none; 
  border-radius:8px; 
  text-align:left;
  width:100%;
 
  
  
  
}



.ratebuttongrey-thumbnailtype-mobile:hover {
  background-color: #404040;
  
}






.buttongreyed-thumbnailtype{
  
    
  background-color:#696969;     
  transition-duration: 0.75s;
  padding:0px; 
  padding-right:10px; 
  padding-left:10px; 
  padding-top:1px; 
  padding-bottom:9px; 
  margin-left:-7px; 
  margin-top:0px; 
  min-width:80px; 
  border:none; 
  border-radius:8px; 
  text-align:left;
  
}



.buttongreyedintermediate-thumbnailtype{
    
  background-color:#333333;     
  transition-duration: 1s;
  padding:0px; 
  padding-right:10px; 
  padding-left:10px; 
  padding-top:1px; 
  padding-bottom:9px; 
  margin-left:-7px; 
  margin-top:0px; 
  min-width:80px; 
  border:none; 
  border-radius:8px; 
  text-align:left;
    
}







.buttongreyed{
    
  background-color:#696969;     
  transition-duration: 0.75s;
  padding:9px; 
  padding-right:10px; 
  margin-left:-17px; 
  margin-top:-14px; 
  width:100px; 
  border:none; 
  border-radius:8px; 
  text-align:left;
  
}



.buttongreyedintermediate{
    
  background-color:#333333;     
  transition-duration: 1s;
  padding:9px; 
  padding-right:10px; 
  margin-left:-17px; 
  margin-top:-14px; 
  width:100px; 
  border:none; 
  border-radius:8px; 
  text-align:left;
    
}


 
.bluestar{
height:24px; 
margin-top:-6px; 
padding-right:16px;    
} 


.bluestar-novote{
height:24px; 
margin-top:-6px; 
padding-right:8px;    
padding-left:8px;        
}


.bluestar-thumbnailtype{
margin-left:0px; 
height:24px;  
width:24px; 
display:inline-block;
    
} 


.bluestar-novote-thumbnailtype{

height:24px;  
width:24px; 
display:inline-block;
margin-left:20px;     
}





.bluestar-thumbnailtype-mobile{
margin-left:0px; 
height:20px;  
width:20px; 
display:inline-block;
    
} 


.bluestar-novote-thumbnailtype-mobile{

height:20px;  
width:20px; 
display:inline-block;
margin-left:0px;  
margin-top:-6px;
}




.yellowstar-thumbnailtype{
height:24px; 
max-width:24px !important;
display:inline-block !important;

}


.yellowstar{
height:24px; 
margin-top:-6px; 
padding-right:16px;    
}



.thispercentscorespanclass{
display:inline-block;
}    


.thispercentscorespanclass-thumbnailtype{
color:#e5e5e5; 
font-weight:900; 
display:inline-block; 
font-size:16px;
margin-left:10px;

    
}    




.fighterlisting{
margin-top:9px;
text-align:left;    
font-size:20px;
}    
   
   
   
   
.maincardtitle{
width:62%; 
display:inline-block;
}   
   
   

.maincarddate{
width:35%;    
display:inline-block;
text-align:right;   
}   
   

.bluebuttoncontainer{

background-color:none; 
color:#83b4f3; 
font-size:20px;    
    
}  


.fighternamelisting{
    
display:inline-block; 
margin-left:0px; 
margin-top:4px; 
position:absolute; 
line-height:20px;    
font-size:16px;

}
   
   
.fighternamelistingwithodds{
    
display:inline-block; 
margin-left:0px; 
margin-top:10px; 
position:absolute; 
line-height:14px;    
font-size:16px;

}
   
   


.marginleftondesktop{
margin-left:50px;    
}
   


.yellowstarcontainer{
white-space: nowrap;
display:inline-block;
}    


.yellowstarcontainer-thumbnailtype{
width:100%;  
padding-left:7px;
padding-top:3px;
    
}


.yellowstarcontainer-thumbnailtype-mobile{
padding-top:3px; 
}



.numvotesspan{
margin-left:0px;
margin-top:12px;
font-size:14px;
}




/* start of for tablets */
/* start of for tablets */
/* start of for tablets */

@media only screen and (max-width: 1200px) {
  
.starboxcontainer {
margin-top:-63px;
}
 
.ratingnumber{
margin-left:-21px;
}

.modal-content {
width:600px;
}

    
} 

/* end of for tablets */
/* end of for tablets */
/* end of for tablets */


@media only screen and (max-width: 1001px) {




.modal_fighttitle{
font-size:18px;    
}



.feedback {
background:none;
margin-left:0; 
margin-top:15px;
max-width:280px;
}



.bluebuttoncontainer{

background-color:none; 
color:#83b4f3; 
font-size:20px;    
margin-top:-9px;  

}   
 

.yellowstarcontainer{
    
background-color:none; 
font-size:20px;    
margin-top:-11px;  
line-height:23px;

display:inline-block;
    
}
 
 
 
.yellowstar{
    

height:20px; 
margin-top:-10px; 
padding-right:0px;   
margin-left:1px; 

}


.fighternamelisting{
    
display:inline-block; 
margin-left:0px; 
margin-top:4px; 
position:absolute; 
line-height:20px;    
font-size:16px;

}
  
.fighternamelistingwithodds{
    
display:inline-block; 
margin-left:0px; 
margin-top:10px; 
position:absolute; 
line-height:14px;    
font-size:16px;

}
  
  

 .ratebuttongrey {
  /* background-color:#333333;   */
  background-color:transparent;
  transition-duration: 0.2s;
  padding:6px; 
  padding-right:7px; 
  padding-bottom:2px;
  margin-left:-17px; 
  width:45px; 
  border:none; 
  border-radius:8px; 
  text-align:center;
  line-height:23px;
     
 }

.ratebuttongrey:hover {
  background-color: #999999;
  
}



.ratebuttongrey-novote{

background-color:transparent;

  /* background-color:#333333;  */   
  transition-duration: 0.2s;
  height:53px;
  margin-top:-5px;
  
  padding:6px; 
  padding-right:7px; 
  padding-bottom:2px;
  margin-left:-17px; 
  width:45px; 
  border:none; 
  border-radius:8px; 
  text-align:center;
  line-height:23px;
      
}



.ratebuttongrey-novote:hover {
  background-color: #999999;
  
}



.buttongreyed{
    
  background-color:#696969;     
  transition-duration: 0.75s;
    padding:6px; 
  padding-right:7px; 
  padding-bottom:2px;
  margin-left:-17px; 
  width:45px; 
  border:none; 
  border-radius:8px; 
  text-align:center;
  line-height:23px;
  
}



.buttongreyedintermediate{
    
  background-color:#333333;     
  transition-duration: 1s;
  padding:6px; 
  padding-right:7px; 
  padding-bottom:2px;
  margin-left:-17px; 
  width:45px; 
  border:none; 
  border-radius:8px; 
  text-align:center;
  line-height:23px;
    
}









.bluestar{
height:20px; 
margin-top:-10px; 
padding-right:0px;    

} 


.bluestar-novote{
height:20px; 
margin-top:-10px; 
margin-left:-7px;
padding-right:0px;    

}





.yellowstar{
height:20px; 
margin-top:-6px; 
padding-right:16px;    
}





    
.thispercentscorespanclass{

margin-top:3px;    
    
}    
    
.fighterlisting{
margin-top:7px;
text-align:left;    
font-size:16px;
}    
    
.fighterimage    {
display:none;    
    
}


    
.fighterimage-sidebar    {
display:inline-block;    
    
}




.marginleftondesktop{
margin-left:0px;    
}







.numvotesspan{
margin-left:0px;    
margin-top:0px;
font-size:12px;
}




.starboxcontainer {
margin-top:-180px;
}
 
.ratingnumber{
margin-left:0px;
}

.modal-content {
width:inherit;
/*max-width:75%;*/
/*margin-left:2%;*/
max-width:315px; 
margin-top:50px; 
margin-bottom:100px;

    
}


.modal-button{
width:90%;    
}







.scrollerTitle{
margin-left:30px;    
}

.carousel{
  /* width:90%; */
  margin:0px auto;
  margin-top:-10px;
  /* margin-left:20px !important; */

    
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    
    
    
    
    
    
}



.arrow-hover{
background-color:#181818;
transition-duration: 0.2s;
width:20px;    
}


.arrow-hover:hover {
background-color:#404040;
width:20px;
    
}



.percentscore-thumbnail{
margin-left:0px; 
font-weight:900; 
font-size:16px; 
color:#83B4F3;    
}


.thispercentscorespanclass-thumbnailtype{
color:#e5e5e5; 
font-weight:900; 
display:inline-block; 
font-size:16px;
margin-left:0px;

    
}   




.emoji{
margin-left:-9px;
}


.emoji-wrapper {
  margin-top:-12px;
  margin-left:10px;
}


.whereisx{
position:absolute; 
margin-top:-25px; 
margin-left:-10px;
}


.largegreystar{
height:100px; 
width:100px; 
margin-left:0px; 
margin-top:1px; 
}


} /* end of on small screens */