@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: "open-sans-p";
  src: url("../font/open_san/OpenSans-Regular.ttf");
}
@font-face {
  font-family: "header-font";
  src: url("../font/header-font.otf");
}
@font-face {
  font-family: "Football-font";
  src: url("../font/Football-font.otf");
}
@font-face {
  font-family: "Lato";
  src: url("../font/Lato-Regular.otf");
}
@font-face {
  font-family: "oswald";
  src: url("../font/Oswald-Regular.ttf");
}
@font-face {
  font-family: "montserrat";
  src: url("../font/Montserrat-Regular.ttf");
}
@font-face {
  font-family: "autograpghy";
  src: url("../font/NothingYouCouldDo-Regular.ttf");
}

/*WRAPPER/BODY/HTML STYLING*/
#wrapper {
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  padding: 0;
  letter-spacing: 1.5px;
}
body,
html {
  height: 100%;
  width: 100%;
}
/*html, body {margin: 0; height: 100%; overflow: hidden}    TO BE USED TO STOP SCROLL*/
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}
.resp-menu {
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(46, 46, 46, 0.98);
  z-index: 300;
}
.resp-menu a {
  float: left;
  width: 100%;
  height: 70px;
  text-align: center;
  text-decoration: none;
  text-decoration-style: none;
  font-family: "header-font";
  font-size: 20px;
  margin: 0;
  color: #fff;
}
.resp-menu ul {
  margin-top: 50%;
  padding: 0;
  color: #fff;
  list-style-position: inside;
  list-style: none;
}
.resp-menu ul li {
  margin: 10px 0;
  list-style-position: inside;
  transition: all 0.25s ease-in-out;
}
.resp-menu ul li a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s;
}
.resp-menu ul li a:hover::after {
  width: 100%;
  transition: width 0.02s;
}

/*LOADING SCREEN*/
#loader {
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
}
/*FLEX OPTIONS*/
.flex {
  display: flex;
}
.flex-directionColumn {
  flex-direction: column;
}
.flex-directionRow {
  flex-direction: row;
}
.flex-absolute-centre {
  justify-content: center;
  align-content: center;
  align-items: center;
}
.margin-auto {
  margin: auto;
}
.align-text-centre {
  text-align: center;
}
.flex-tl {
  justify-content: start;
  align-items: center;
}
.flex-tr {
  margin: auto 5% auto auto;
}
.flex-br {
  justify-content: end;
  align-items: center;
}
.bold {
  font-weight: bold;
}
.bold-p {
  font-family: "montserrat";
  font-weight: bolder;
  font-size: 3.5vw;
}
.light-p {
  font-family: "montserrat";
  font-weight: lighter;
  font-size: 1.5vw;
}

/*Rounded-Corner*/
.rounded-border {
  border-radius: 25px;
}
.box-shadow-mid {
  box-shadow: 0px 0px 5px 1px grey;
}

/*MIN SIZE SETTINGS FOR RESPONSIVNESS*/
.min-size-rule {
  min-height: 700px;
}
.min-size-rule2 {
  min-height: 1200px;
}

/*Headers*/
h1 {
  font-size: 8rem;
  color: #fff;
  font-family: "oswald";
  font-weight: 1;
  text-shadow: 4px 4px 8px #000;
}
h2 {
  font-size: 80px;
  color: #fff;
  font-family: "oswald";
  font-weight: 1;
}
h3 {
  font-size: 50px;
  color: #fff;
  font-family: "Football-font";
  font-weight: 2;
  text-shadow: 1 1 3 #fff;
  text-shadow: 2px 2px 3px #989898;
}
h4 {
  font-size: 50px;
  color: #000;
  font-family: "Football-font";
  font-weight: 2;
  text-shadow: 1 1 3 #fff;
  text-shadow: 2px 2px 3px #989898;
}

/*HEADER/NAV STYLING*/
.header1 {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 20;
}
.header1 li {
  padding: 0 10px 0 0;
  margin-right: 5px;
}
.header1 .no-bord,
li {
  border-right: none;
}
.header2 {
  display: none;
  width: 100%;
  height: 80px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 15;
}
nav {
  display: none;
  width: 100%;
  height: 75px;
  padding: 5px;
  margin: auto;
}
.nav-settings {
  width: 50%;
  height: 75px;
  margin: 0;
  padding: 0;
}
.logo {
  width: 100%;
  height: 45px;
  background: url("../img/logo.jpg") no-repeat;
  background-size: contain;
  float: left;
  transition: transform 0.6s; /* Animation */
}
.logo:hover {
  transform: scale(1.1);
}
.nav-left {
  width: auto;
  height: auto;
  padding: 0;
  align-items: center;
  position: absolute;
  right: 0;
  top: 30px;
}
.nav-left a {
  margin-right: 20px;
}
.nav-right {
  width: 100%;
  height: 75px;
  padding: 0;
  margin: auto;
  justify-content: center;
  text-align: center;
}
ul {
  padding: 0;
  color: white;
  list-style-position: inside;
  list-style: none;
}
ul li {
  margin: 6px 12px;
  list-style-position: inside;
  transition: all 0.25s ease-in-out;
}
ul li a {
  color: #fff;
  list-style-position: inside;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 1.5px;
  font-family: "montserrat";
  text-shadow: 2px 2px 5px #000;
}
ul li a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s;
}
ul li a:hover::after {
  width: 100%;
  transition: width 0.3s;
}
.nav2 {
  position: fixed;
  display: none;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
}
.rep-1 {
  width: 50%;
  height: 100px;
  padding: 0;
  justify-content: start;
  align-items: center;
}
.rep-2 {
  width: 50%;
  height: 100px;
  padding: 0;
  justify-content: end;
  align-items: start;
  margin-top: 3px;
}
.rep-menu-holder {
  width: 150px;
  height: 50px;
  top: 0;
  right: 0;
}
.menu-text {
  width: 50%;
  height: 50px;
  margin: 0;
  padding: 0;
}
.menu-burger {
  width: 40px;
  height: 40px;
  padding: 0;
  background: url("../img/burger-menu.png") no-repeat;
  background-size: cover;
}
.menu-burger:hover {
  transform: scale(1.2) rotate(45deg);
  transition: -webkit-transform 0.3s ease-in;
}
.exit {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  color: #fff;
  margin-top: 15px;
  margin-right: 20px;
  border: solid;
  border-color: #fff;
  border-radius: 5px;
}
.exit:hover {
  transform: scale(1.2) rotate(-45deg);
  transition: -webkit-transform 0.3s ease-in;
}

#hero {
  height: 100vh;
  width: 100%;
  background: url("../img/charlie-doig.webp") no-repeat top;
  background-size: cover;
}
.hero-text {
  margin: auto;
}
#hero h1 {
  margin: 5px 0px;
}
#hero h2 {
  margin: 30px 0px;
  font-family: "autograpghy";
  font-size: 2.5rem;
  color: #e22121;
  font-weight: bold;
  text-shadow: 2px 2px 3px #fff;
}
.header-underline-hero {
  height: 1px;
  width: 90%;
  background-color: #fff;
  box-shadow: 2px 2px 3px #000;
}
.header-underline {
  height: 4px;
  width: 80%;
  background-color: #fff;
  box-shadow: 2px 2px 3px #000;
}
.header-underline2 {
  height: 2px;
  width: 90%;
  background-color: #1d1f4a;
  box-shadow: 2px 2px 3px #000;
  margin: 0px auto;
}
.header-underline3 {
  height: 2px;
  width: 90%;
  background-color: #fff;
  box-shadow: 2px 2px 3px #000;
  margin: 0 auto auto auto;
}
.header-underline-record {
  height: 2px;
  width: 100%;
  background-color: #1d1f4a;
  box-shadow: 2px 2px 3px #000;
  margin: 0px auto;
}
.fight-event {
  height: auto;
  width: 40%;
  background-color: #0c112e;
  margin-bottom: 100px;
  border: solid 2px #fff;
  font-family: "montserrat";
  color: #fff;
  font-size: 1.5rem;
  min-height: 200px;
  min-width: 600px;
}
.fight-info {
  width: 80%;
  height: 100%;
}
.fight-info-t {
  width: 100%;
  height: auto;
}
.fight-info-t p {
  margin: 0;
}
.upcoming-fight {
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 2px 2px 3px #000;
  background-color: #08309c;
  padding: 20px 25px;
  margin-right: auto;
}
.upcoming-fight2 {
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 2px 2px 3px #000;
  background-color: #e22121;
  padding: 20px 25px;
  margin-right: auto;
}
.upcoming-fight3 {
  font-size: 0.5rem;
  color: #fff;
  text-shadow: 2px 2px 3px #000;
  background-color: #e22121;
  width: 40%;
  text-align: center;
  padding: 0px;
  justify-content: center;
  margin-top:200px;
  margin-left:80px;
}
.fight-info-b {
  width: 100%;
  height: auto;
  padding:10px 0px;
}
.fight-info-b-l {
  width: 65%;
  height: 100%;
}
.fight-info-b-l p {
  margin: 5px 0px;
}
.fight-info-b-r {
  width: 35%;
  height: 100%;
  margin: auto;
}
.fight-info-b-r a {
  color: #fff;
  font-size: 1rem;
  border: solid 1px #fff;
  text-shadow: 2px 2px 3px #000;
  float: right;
  transition: ease 1s;
  border-radius: 30px;
}
.fight-info-b-r a:hover {
  transform: scale(1.1);
}
.fe-but-holder {
  width: 100%;
  height: 30px;
  background-color: #e22121;
}
.fe-event-but {
  background-color: rgb(46, 57, 212);
}
.ticket-icon {
  background: url("../img/ticket-icon.png") no-repeat;
  background-size: contain;
  height: 15px;
  width: 15px;
  margin-top: 5px;
  margin-right: 5px;
}
.date-icon {
  background: url("../img/date-icon.png") no-repeat;
  background-size: contain;
  height: 15px;
  width: 15px;
  margin-right: 5px;
}

#hero-news h2,
#hero-athlete-record h2 {
  font-family: "montserrat";
  color: #1d1f4a;
  margin: 40px auto 40px 40px;
  font-size: 3vw;
}
#hero-news {
  height: auto;
  width: 90%;
  background-color: #fff;
  border-top: #fff 2px solid;
}
.news-holder {
  width: 70%;
  height: 90%;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news-container {
  background-color: #08309c;
  flex: 1 0 30%;
  margin: 20px;
  border: solid #fff 2px;
  position: static;
  height: 400px;
  box-shadow: #1d1f4a 2px 2px 20px;
}
.news-text {
  font-family: "montserrat";
  text-decoration: underline;
  font-weight: bold;
  background-color: rgb(7, 13, 29, 0.9);
  max-height: 100px;
  margin-top: auto;
  color: #fff;
  transition: max-height ease 1.5s;
  overflow: hidden;
}
.news-container:hover {
  .news-text {
    max-height: 150px;
  }
}
.news-text p {
  align-items: end;
  justify-content: center;
  color: #fff;
  padding: 5px;
}
.news1 {
  background: url("../img/the-courier-charlie-doig.webp") no-repeat top;
  background-size: cover;
}
.news2 {
  background: url("../img/boxing-news-charlie-doig.webp") no-repeat top;
  background-size: cover;
}
.news3 {
  background: url("../img/the-courier-charlie-doig2.webp") no-repeat top;
  background-size: cover;
}
.news4 {
  background: url("../img/charlie_doig_the_herald.webp") no-repeat top;
  background-size: cover;
}
.news5 {
  background: url("../img/charlie_doig_evening_telegraph.webp") no-repeat top;
  background-size: cover;
}
.news6 {
  background: url("../img/charlie_doig_evening_express2.webp") no-repeat top;
  background-size: cover;
}
#hero-statistics {
  height: auto;
  width: 100%;
  background: url("../img/scotland-flag.webp") no-repeat top;
  background-size: cover;
  border-top: #fff 2px solid;
}
#hero-statistics h2 {
  font-family: "montserrat";
  color: #fff;
  margin: 40px auto 40px 40px;
  font-size: 3vw;
}
.stats-holder {
  margin: 50px 0px;
}
.stats1 {
  height: 100px;
  width: 90%;
  margin: 20px auto 20px auto;
  flex-direction: row;
}
.stats1-holder {
  width: 33.33%;
  height: 100%;
  background-color: rgb(255, 255, 255, 0.8);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.stats1-1 p,
.stats1-2 p,
.stats1-3 p {
  margin: auto 0 auto 0;
  padding-left: 10px;
  font-family: "montserrat";
  color: #0f1844;
  text-shadow: 1px 1px 8px #0f1844;
  font-weight: bolder;
}
.stats2 {
  height: auto;
  height: auto;
  width: 90%;
  margin: 20px auto 20px auto;
  background-color: rgb(255, 255, 255, 0.8);
  flex-direction: row;
}
.stats2-1 {
  width: 30%;
  padding: 30px 30px;
}
.stat-tl {
  align-items: start;
  justify-content: start;
}
.stat-br {
  align-items: end;
  justify-content: end;
  border-bottom: solid 1px #0f1844;
  width: 90%;
}
.stat-tl p,
.stat-br p {
  padding: 5px;
  text-shadow: 1px 1px 8px #0f1844;
  font-weight: bolder;
}
.stat-br p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.stats2-holder {
  height: auto;
  width: 100%;
  font-family: "montserrat";
  color: #0f1844;
  padding-bottom: 10px;
}
.stats2-holder p {
  font-size: 1rem;
}
.stats2-2 {
  background: url("../img/charlie-doig-stats.webp") no-repeat;
  width: 70%;
  background-size: contain;
  height: auto;
}
.stats3 {
  height: 350px;
  width: 90%;
  margin: 20px auto 20px auto;
  justify-content: space-between;
  flex-wrap: wrap;
}
.stats3-1 {
  width: 49%;
  height: 100%;
  border: solid 2px #fff;
}
.stats3-left {
  width: 30%;
  height: 90%;
  background: url("../img/stats-figure.png") no-repeat center;
  background-size: contain;
  margin: auto;
}
.stats3-left2 {
  width: 30%;
  height: 90%;
  background: url("../img/stats-figure2.png") no-repeat center;
  background-size: contain;
  margin: auto;
}
.stats3-right {
  width: 70%;
  height: 100%;
  font-family: "montserrat";
}
.stat3-top {
  align-items: start;
  justify-content: start;
  border-bottom: solid 1px #fff;
}
.stat3-bottom {
  align-items: end;
  justify-content: end;
  width: 100%;
}
.stat3-top p,
.stat3-bottom p {
  padding: 5px;
  font-size: 0.8rem;
  color: #fff;
  font-weight: bolder;
}
#hero-athlete-record {
  height: auto;
  background-color: #fff;
}
.blue {
  background-color: #08309c;
}
.red {
  background-color: red;
}
.athlete-holder {
  height: auto;
  width: 80%;
  margin: 40px auto 40px auto;
  border-bottom: solid 2px #0f1844;
  font-family: "montserrat";
  color: #0f1844;
  font-size: 1.5rem;
  flex-direction: row;
}
.athlete-text {
  color: #0f1844;
}
.athlete-text-alt {
  color: #0f1844;
  font-size: 1.2rem;
  padding:5px 0px;
}
.athlete-text-rounds{
  font-size: 1.2rem;
  padding:5px 0px;
  color:#D7253D;
}
.athlete-text-points{
  color:#008800;
  font-size: 1.2rem;
  padding:5px 0px;
}
.athlete-text-title {
  color: #0f1844;
  font-weight: bolder;
  font-size: 2rem;
}
.athlete-text-header{
  color: #0f1844;
  font-size: 2.3rem;
  padding:5px 0px;
}
.athlete-pic {
  width: 40%;
}
.fight-details {
  font-size: 1.5vw;
  flex-wrap: wrap;
  font-family: "montserrat";
  gap: 30px;
  margin: auto;
}
.fight-details p {
  margin: 0;
  text-shadow: 2px 2px 15px #00000081;
}
.athlete-button-holder {
  width: 40%;
  margin: auto;
  height: 50px;
  justify-content: space-around;
  gap: 20px;
}
.athlete-button-holder p {
  color: #fff;
  padding: 5px;
}
.button-gallery {
  width: 100%;
  height: 30px;
}
.button-boxrec {
  width: 100%;
  height: 30px;
  background-color: #08309c;
}
.athlete-pic-charlie {
  background: url("../img/charlie-doig-event.webp") no-repeat;
  background-size: cover;
  width: 50%;
  max-width:180px;
}
.athlete-pic-unknown {
  background: url("../img/athlete-unknown.png") no-repeat;
  background-size: cover;
  width: 50%;
  max-width:180px;
}
.athlete-pic-stewart {
  background: url("../img/stewart.jpg") no-repeat;
  background-size: cover;
  width: 50%;
  max-width:180px;
}
.athlete-pic-bricknell {
  background: url("../img/bricknell.png") no-repeat;
  background-size: cover;
  width: 50%;
  max-width:180px;
}
.athlete-pic-fox {
  background: url("../img/fox.png") no-repeat;
  background-size: cover;
  width: 50%;
  max-width:180px;
}
.athlete-pic-narvaez {
  background: url("../img/narvaez.png") no-repeat;
  background-size: cover;
  width: 50%;
  max-width:180px;
}
.athlete-pic-na {
  background: url("../img/na.png") no-repeat center;
  background-size: cover;
  width: 50%;
  max-width:180px;
}

.carousel {
}
.carousel-cell {
  overflow: hidden;
}
.carousel-cell img {
  display: block;
  height: 600px;
  width: auto;
}
.hidden {
  display: none;
}

/*Footer*/
footer {
  height: 250px;
  width: 100%;
  background-color: #2e2e2e;
  border-top: #fff solid thin;
  align-self: flex-end;
}
.foot-bot {
  width: 100%;
  height: 30%;
}
.foot-top {
  width: 100%;
  height: 40%;
}
.foot-top-holder {
  width: 60%;
  height: 70%;
}
.links {
  height: 33%;
  width: 100%;
  margin-bottom: 1%;
}
.links ul li a {
  font-size: 10px;
}
.foot-bar {
  height: 3%;
  width: 100%;
  background-color: #b0adae;
}
.foot-bar-anco {
  height: 2px;
  width: 100%;
  background-color: #b0adae;
  margin: 80px 0px;
}
.socail {
  height: 53%;
  width: 30%;
  margin-top: 2%;
}
.socail-rules {
  width: 40px;
  height: 40px;
}
.socail a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s;
  margin-top: 10px;
}
.socail a:hover::after {
  width: 120%;
  transition: width 0.3s;
}
.socail a {
  margin: auto;
}
.socail a :hover {
  transform: scale(1.4);
}
.fb {
  background: url("../img/fb.png") no-repeat;
  background-size: contain;
}
.fb1 {
  background: url("../img/fb1.png") no-repeat;
  background-size: contain;
}
.linkedIn {
  background: url("../img/linkedin.png") no-repeat;
  background-size: contain;
}
.twitter {
  background: url("../img/twitter.png") no-repeat;
  background-size: contain;
}
.instagram {
  background: url("../img/insta.png") no-repeat;
  background-size: contain;
}
.foot-bot-left {
  width: 100%;
  height: 100%;
}
.foot-bot-text {
  width: 100%;
  height: 50%;
}
.foot-bot-text p {
  font-size: 12px;
  color: #fff;
  letter-spacing: 3px;
  padding-top: 10px;
  text-align: center;
}
.certs {
  width: 500px;
  height: 140px;
  background: url("../img/certs.png") no-repeat;
  background-size: contain;
}
.certs:hover {
  transform: scale(1.2);
}
.terms-dl {
  color: mediumpurple;
  font-size: 15px;
}
.terms-dl:hover {
  color: darkred;
}
.footer-copyr {
  font-size: 10px;
  font-family: "oswald";
}

/*LOADER ANIMATIONS*/
.circle {
  width: 180px;
  height: 180px;
  border: 10px inset rgb(33, 36, 226);
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  border-radius: 200px;
  -moz-animation: rotate 5s infinitelinear;
  -webkit-animation: rotate 5s infinite linear;
  animation: rotate 5s infinite linear;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.circle-small {
  width: 150px;
  height: 150px;
  border: 6px outset rgb(33, 36, 226);
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -81px;
  margin-top: -81px;
  border-radius: 156px;
  -moz-animation: rotate-rev 3s infinite linear;
  -webkit-animation: rotate-rev 3s infinite linear;
  animation: rotate-rev 3s infinite linear;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.circle-big {
  width: 210px;
  height: 210px;
  border: 4px dotted rgb(87, 90, 255);
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -109px;
  margin-top: -109px;
  border-radius: 214px;
  -moz-animation: rotate-rev 10s infinite linear;
  -webkit-animation: rotate-rev 10s infinite linear;
  animation: rotate-rev 10s infinite linear;
}
.circle-inner {
  width: 80px;
  height: 80px;
  background-color: rgb(33, 36, 226);
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 80px;
  -moz-animation: pulse 1.5s infinite ease-in;
  -webkit-animation: pulse 1.5s infinite ease-in;
  animation: pulse 1.5s infinite ease-in;
  opacity: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.circle-inner-inner {
  width: 100px;
  height: 100px;
  background-color: rgb(33, 36, 226);
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 100px;
  -moz-animation: pulse 1.5s infinite ease-in;
  -webkit-animation: pulse 1.5s infinite ease-in;
  animation: pulse 1.5s infinite ease-in;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/*==============ANIMATIONS=================*/
/*Hero Spin*/
.image-spin {
  -webkit-animation: rotation 0.8s linear;
  animation-iteration-count: 1;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
/*Loading-Screen*/
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotate-rev {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes rotate-rev {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes rotate-rev {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0.1);
    opacity: 0.2;
  }
  50% {
    -moz-transform: scale(1);
    opacity: 0.8;
  }
  100% {
    -moz-transform: scale(0.1);
    opacity: 0.2;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 0.2;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(0.1);
    opacity: 0.2;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.1);
    opacity: 0.2;
  }
}

/*Mobile Site*/

@media screen and (max-width: 1100px) {
  nav ul li a {
    font-size: 1vw;
  }
  .nav-left {
    width: 20%;
  }
  .nav-right {
    width: 80%;
  }
}
@media screen and (max-width: 1200px) {
  /*NAV*/
  .header2 {
    display: flex;
    z-index: 100;
  }
  .header1 {
    display: none;
  }
  .nav1 {
    display: none;
  }
  .nav2 {
    display: flex;
    z-index: 100;
    height: 60px;
  }
  .logo {
    height: 40px;
  }
  .rep-1 {
    height: 60px;
  }
  .logo:hover {
    transform: scale(1.1);
  }
  #hero {
    background: url("../img/charlie-doig-mobile.webp") no-repeat top;
    background-size: cover;
  }
  #hero h1 {
    font-size: 3rem;
    text-align: center;
  }
  #hero h2 {
    font-size: 1.5rem;
    text-align: center;
    margin: 30px 0px;
  }
  .bold-p {
    font-size: 5vw;
  }
  .light-p {
    font-size: 3vw;
  }
  .header-underline-hero {
    height: 1px;
    width: 90%;
    background-color: #fff;
    box-shadow: 2px 2px 3px #000;
  }
  .header-underline {
    height: 1px;
    width: 90%;
    box-shadow: 2px 2px 3px #000;
  }
  .header-underline2 {
    height: 1px;
    width: 90%;
    background-color: #1d1f4a;
    box-shadow: 2px 2px 3px #000;
    margin: 0px auto;
  }
  .header-underline3 {
    height: 1px;
    width: 90%;
    background-color: #fff;
    box-shadow: 2px 2px 3px #000;
    margin: 0 auto auto auto;
  }
  #hero-statistics h2,
  #hero-news h2,
  #hero-athlete-record h2 {
    font-size: 5vw;
    margin-bottom: 5px;
  }
  .fight-event {
    height: auto;
    width: 90%;
    margin-bottom: 100px;
    font-size: 0.8rem;
    min-height: 90px;
    min-width: auto;
  }
  .fight-pic {
    width: 40%;
    height: 100%;
    background-size: contain;
  }
  .fight-info {
    width: 90%;
    height: 100%;
    margin: auto;
    padding:20px 0px;
  }
  .fight-info-t {
    width: 100%;
    height: 30%;
  }
  .upcoming-fight {
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 2px 2px 3px #000;
    background-color: #08309c;
    padding: 15px 25px;
    margin-right: auto;
  }
  .upcoming-fight2 {
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 2px 2px 3px #000;
    background-color: #e22121;
    padding: 15px 25px;
    margin-right: auto;
  }
  .upcoming-fight3 {
    font-size: 0.5rem;
    color: #fff;
    text-shadow: 2px 2px 3px #000;
    background-color: #e22121;
    width: 40%;
    text-align: center;
    padding: 0px;
    margin: auto;
    align-content: center;
    justify-content: center;
    margin-top: 120px;
  }
  .upcoming-fight3 p {
    margin: 3px 3px;
  }
  .fight-info-b {
    padding: 10px 0px;
    width: 100%;
    height: 70%;
  }
  .fight-info-b-l {
    width: 60%;
    height: 100%;
    text-align: center;
    margin: auto;
  }
  .fight-info-b-l p {
    margin: 5px 0px;
  }
  .fight-info-b-r {
    width: 60%;
    height: 100%;
    margin: auto;
    padding:15px;
  }
  .fight-info-b-r a {
    color: #fff;
    font-size: 0.6rem;
    border: solid 1px #fff;
    text-shadow: 2px 2px 3px #000;
  }
  .fe-but-holder {
    width: 100%;
    height: 20px;
    background-color: #e22121;
  }
  .fe-event-but {
    background-color: rgb(46, 57, 212);
  }
  .ticket-icon {
    background: url("../img/ticket-icon.png") no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px;
  }
  .date-icon {
    background: url("../img/date-icon.png") no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px;
  }
  #hero-news {
    height: auto;
    width: 100%;
  }
  .news-holder {
    width: 90%;
  }
  .news-text p {
    font-size: 0.8rem;
  }
  .news-container {
    flex: 1 100%;
    margin: 15px;
    height: 350px;
  }
  .news2 {
    background: url("../img/boxing-news-charlie-doig.webp") no-repeat center;
  }
  .stats1-holder {
    flex-direction: column;
  }
  .stats1-holder p {
    margin: 0 auto 0 auto;
  }
  .stats2 {
    flex-direction: column;
    height: auto;
  }
  .stats2-holder p {
    font-size: 0.8rem;
  }
  .stats2-1 {
    width: 100%;
    height: auto;
    padding: 10px;
    margin: auto;
  }
  .stats2-2 {
    display: none;
  }
  .stats3 {
    height: 400px;
  }
  .stats3-1 {
    width: 48%;
    height: 100%;
    border: solid 2px #fff;
    flex-direction: column;
  }
  .stats3-left,
  .stats3-left2 {
    width: 100%;
    height: 30%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .stats3-right {
    width: 100%;
    height: 70%;
  }
  .stat3-top p,
  .stat3-bottom p {
    padding: 5px;
    font-size: 0.8rem;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .stat3-bottom p {
    padding-bottom: 10px;
  }
  .stat3-top p {
    padding-top: 10px;
  }
  #hero-athlete-record {
    height: auto;
    background-color: #fff;
  }
  #hero-athlete-record .header-underline2 {
    margin-bottom: 20px;
  }
  .athlete-holder {
    width: 95%;
    font-size: 0.7rem;
    margin: 40px 0px;
    font-weight: bolder;
    flex-direction: column;
    border-bottom: none;
  }
  .athlete-pic {
    width: 60%;
    height:130px;
    margin: auto;
  }
  .athlete-text-title {
    font-size: 0.8rem;
  }
  .athlete-pic-charlie {
    background: url("../img/charlie-doig-event.webp") no-repeat center;
    background-size: cover;
    width: 50%;
  }
  .athlete-pic-unknown {
    background: url("../img/athlete-unknown.png") no-repeat center;
    background-size: cover;
    width: 50%;
  }
  .athlete-pic-bricknell {
    background: url("../img/bricknell.png") no-repeat center;
    background-size: cover;
    width: 50%;
  }
  .fight-details {
    font-size: 0.8rem;
    margin: 0 auto 0 auto;
    flex-direction: column;
  }
  .fight-info-t p {
    margin: auto;
    font-size: 1.1rem;
    text-shadow: 2px 2px 15px #00000081;
    text-align: center;
  }
  .athlete-text-header{
    font-size: 1.6rem !important;
  }
  /*FOOTER*/
  footer {
    height: auto;
    width: 100%;
    background-color: #2e2e2e;
  }
  .foot-bot {
    width: 100%;
    height: auto;
    flex-direction: column;
  }
  .foot-top {
    width: 100%;
    height: 500px;
    margin: none;
  }
  .foot-top-holder {
    width: 80%;
    height: auto;
  }
  .links {
    height: auto;
    width: 80%;
    text-align: center;
    margin: auto;
  }
  .links li {
    margin: 10px 0px;
  }
  .links ul li a {
    font-size: 15px;
    margin: auto;
    text-align: center;
  }
  .links ul {
    display: flex;
    flex-direction: column;
  }
  .foot-bar {
    height: 1%;
    width: 100%;
    background-color: #b0adae;
  }
  .socail {
    height: auto;
    width: 80%;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  .socail-rules {
    width: 30px;
    height: 30px;
  }
  .socail a {
    margin: none;
  }
  .socail a :hover {
    transform: scale(1.4);
  }
  .fb {
    background: url("../img/fb.png") no-repeat;
    background-size: contain;
    margin-top: 20px;
  }
  .linkedIn {
    background: url("../img/linkedin.png") no-repeat;
    background-size: contain;
    margin-top: 20px;
  }
  .twitter {
    background: url("../img/twitter.png") no-repeat;
    background-size: contain;
    margin-top: 20px;
  }
  .instagram {
    background: url("../img/insta.png") no-repeat;
    background-size: contain;
    margin: 10px 10px;
  }
  .foot-bot-left {
    width: 100%;
    height: auto;
  }
  .foot-bot-right {
    width: 100%;
    height: auto;
  }
  .foot-bot-text {
    width: 100%;
    height: auto;
    margin: auto;
    text-align: center;
  }
  .foot-bot-text p {
    font-size: 10px;
    color: #fff;
    letter-spacing: 3px;
    padding-top: 30px;
  }
}