:root {
    --white: #ffff;
    --red: #941D26;
    --lightRed: #A20021;
    --black: #0D0D0D;
    --footer-black: #202020;
  }

  /* ----------------------- fonts start -------------------- */
@font-face {
    font-family:'Bebas_Neue_bold';
    src: url('../fonts/BebasNeue\ Bold.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'Roboto_bold_italic';
    src: url('../fonts/RobotoCondensed-BoldItalic.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'Roboto_regular';
    src: url('../fonts/RobotoCondensed-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family:'Roboto_italic';
    src: url('../fonts/Roboto-Italic.ttf');
    font-weight: normal;
    font-style: normal;
}
/* ----------------------- fonts end --------------------   */
body {
    background-color: var(--black);
}

.normal-text {
    font-family:'Roboto_regular';
    color: var(--white);
    font-size: 0.9rem;
}

.small-text {
    font-family:'Roboto_regular';
    color: var(--white);
    font-size: 0.75rem;
    line-height: 1.1rem !important;
}
/* ------------------- component styles start ------------------*/

.topic-background {
    background-image: url('../../src/images/backgrounds/topic background.png');
    background-size: cover;
    padding-left: 12%;
}

.topic-background-1 {
    background-image: url('../../src/images/backgrounds/topic background1.png');
    background-size: cover;
text-align: center;
}

/* red button component */
.red-button {
    color: var(--white);
    background-color: var(--red) !important;
    font-size: 0.7rem;
    font-family:'Roboto_bold_italic';
    border: 1px solid var(--red) !important;
    width: 9rem;
}

.red-button:hover {
    color: var(--white);
    background-color: var(--red);
    font-size: 0.8rem;
    font-family:'Roboto_bold_italic';
    border: 1px solid var(--red);
    width: 9rem;
}

/* red button outline component */
.red-button-outline {
    color: var(--white);
    border: 1.5px solid var(--red);
    background-color: transparent;
    font-size: 0.7rem;
    font-family:'Roboto_bold_italic';
    width: 9rem;
}

.red-button-outline:hover {
    color: var(--white);
    border: 1.5px solid var(--red);
    background-color: transparent;
    font-size: 0.8rem;
    font-family:'Roboto_bold_italic';
    width: 9rem;
}

/* red button white outline component */
.red-button-white-outline {
    color: var(--white);
    border: 1.5px solid var(--white);
    background-color: transparent;
    font-size: 0.7rem;
    font-family:'Roboto_bold_italic';
    width: 9rem;
}

.red-button-white-outline:hover {
    color: var(--white);
    border: 1.5px solid var(--white);
    background-color: transparent;
    font-size: 0.8rem;
    font-family:'Roboto_bold_italic';
    width: 9rem;
}


/* header components */
.xlarge-header {
    font-family:'Bebas_Neue_bold';
    color: var(--white);
    font-size: 3rem;
    line-height: 3rem;
}

.large-header {
    font-family:'Roboto_bold_italic';
    color: var(--white);
    font-size: 1.7rem;
    line-height: 2rem;
}

.regular-header {
    font-family:'Roboto_bold_italic';
    color: var(--white);
    font-size: 1.1rem;
}

.watch-video-text {
    color: var(--white);
    font-family:'Roboto_bold_italic';
    font-size: 1.2rem;
}

/* firstDivTableComponent start */
.right-arrow {
    color: var(--white);
    float: right;
}

.first-div-table {
    border: 1px solid var(--white);
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-animation: mymove 10s infinite;
    /* Chrome, Safari, Opera */
    animation: mymove 10s infinite;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
    50% {
      color: CornflowerBlue;
    }
  }
  /* Standard syntax */
  
  @keyframes mymove {
    50% {
      color: CornflowerBlue;
    }
  }


/* first div table component */
.first-div-table-column {
    padding-left: 1.6rem !important;
}

.first-div-table-row:hover {
    cursor: pointer;
    background-color: var(--lightRed);
    border-top: 1px solid  var(--lightRed) !important;
    border-left: 1px solid  var(--lightRed);
    border-right: 1px solid  var(--lightRed);
}

.first-div-table-video-row {
    background-color: var(--red);
    border-bottom: 1px solid  var(--lightRed) !important;
    border-left: 1px solid  var(--lightRed);
    border-right: 1px solid  var(--lightRed);
}

.first-div-table-video-row:hover {
    cursor: pointer;
}

.first-div-table-first-Row {
    padding: 2.2rem !important;
}

.play-button-div {
    background-color: var(--white);
    height: 20px;
    width: 20px;
}


/* header bar component */
.header-first-row-link {
    font-family:'Roboto_regular' !important;
    color: var(--white) !important;
    font-size: 0.62rem !important;
}

.header-second-row-link {
    font-family:'Roboto_bold_italic' !important;
    color: var(--white) !important;
    font-size: 0.7rem !important;
}

.header-second-row-span:hover {
    transform: skew(20deg) !important;
    background: var(--red) !important;
}

.header-screw-div {
    padding: 0.5rem 0.8rem 0.5rem 0.8rem !important;
    height: 100% !important;
    width: 100% !important;
}

.header-screw-div:hover {
    transform: skew(-20deg) !important;
}

.header-second-row-span-mob {
    padding: 1rem 0rem 1rem 0rem !important;
}

.header-logo {
    width: auto;
    height: 3.3rem;
}

.uk-navbar.header-first-row{
    height: 3rem !important;
}

.toggle-icon {
    color: var(--red);
    padding: 2% 0% 0% 2%;
}

/* quick sign up div */
.signup-div-label {
    font-family:'Roboto_regular';
    color: var(--white);
}

.signup-div-input, input.signup-div-input[type=text]:focus, textarea.signup-div-input[type=textarea]:focus  {
    background-color: transparent !important;
    border: 1px solid var(--white) !important;
    color: var(--white) !important;
    font-family:'Roboto_regular';
}

.test-color-form {
    background-image: url("../../src/images/backgrounds/signup-background.png");
    background-size: cover;
}

/* our class component */
.our-class-image-div {
    height: 75%;
}

.our-class-bottom-div {
    height: 25%;
    background-color: var(--red);
}

.our-class-hover-div {
    background-color: var(--red);
    margin-left: 15px !important;
}

.our-class-hover-text {
    font-family:'Roboto_regular';
    color: var(--white);
    font-size: 0.65rem;
    line-height: 17px !important;
}

.our-class-circle-div {
    background-color: var(--red);
    margin-top: -25% !important;
    width: 30px;
    height: 30px;
}

/* footer bar component */
.footer-logo {
    height: 7rem;
    width: auto;
    margin-bottom: 1rem;
}

.footer-text {
    color: var(--white);
    font-family:'Roboto_regular';
    font-size: 0.6rem;
}

.footer-link-text {
    color: var(--white) !important;
    font-family:'Roboto_regular' !important;
    font-size: 0.63rem !important;
}

.footer-link-text {
    color: var(--white) !important;
    font-family:'Roboto_regular' !important;
    font-size: 0.63rem !important;
}

.footer-link-header-text {
    color: var(--white) !important;
    font-family:'Roboto_bold_italic';
    font-size: 0.73rem !important;
}

.footer-div {
    background-color: var(--footer-black);
}

/* member success */
.member-success-li {
    border: 2px solid var(--red);
}

.arrow-circle {
    position: absolute;
    margin-top: -45%;
    margin-left: 88%;
}

.arrow-circle1 {
    position: absolute;
    margin-top: -50%;
    margin-right: -50% !important;
}

/* --------------- component styles end -------------- */


/* home page start */

/* first div */
.home-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/hero- image.png');
    background-size: cover;
}

/* second div */

/* third div */
.third-div-first-col.uk-background-contain, .third-div-first-col.uk-background-cover{
    background-position: 70% 50%;
}

/* fourth div */
.trans-icon {
    height: 3.5rem;
    width: 3.5rem;
}

div.membership-red-div {
    background-color: var(--red);
    color: var(--white);
    font-family:'Roboto_bold_italic';
    font-size: 1rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* sixth div */

.height-large {
    height: 480px;
}

.membership-col-margin {
    margin-left: 5%;
    margin-right: 5%;
}

.member-div {
    background-color: var(--footer-black);
}

.membership-black-div {
    background-color: var(--black);
    color: var(--white);
    position: relative !important;
    padding-bottom: 0 !important;
}

.membership-price {
    font-size: 2.2rem;
    font-family:'Roboto_bold_italic';
}

.membership-price-time {
    font-family:'Roboto_bold_italic';
    font-weight: 1.8rem;
    padding: 0 0 6.5px 3px;
}

.membership-list-text {
margin-left: 0.4rem;
}

.membership-button {
    /* position: absolute;
    bottom: 4%;
    display: flex !important;
    justify-content: center !important; */
}

/* seventh div */

.member-success-measurement {
    font-family:'Roboto_bold_italic';
    font-size: 1rem;
    color: var(--white);
    margin-right: 1rem;
}


.member-success-comment {
    font-family:'Roboto_italic';
    font-size: 0.9rem;
    color: var(--white);
    line-height: 1rem;
    border-top: 2.5px solid var(--lightRed);
    padding-top: 0.5rem;
}

.member-success-comment-icon {
    height: auto;
    width: 2.5rem;
    position: absolute;
    margin-top: -2rem;
    margin-left: -2.5rem;
}

/* eighth div */
.coaching-details-div {
    background-color: var(--footer-black);
    border: 1px solid var(--red);
    color: var(--white);
    padding: 0.6rem 2rem 0.6rem 2rem;
    width: 100%;
    height: 20% !important;
}

.coaching-details-div:hover {
    background-color: var(--lightRed);
}

.coach-name {
    font-family:'Bebas_Neue_bold';
    font-size: 1.1rem;
    color: var(--white);
}

.coach-quote {
    font-family:'Roboto_italic';
    font-size: 0.7rem;
}

.coaching-div-social-icons {
    height: 1.3rem;
    width: auto;
    margin: 0.4rem;
}

/* ninth div */
.virtual-background-position {
    background-position: 100% 50%;
}


/* tenth div */
.mobile-app-div-icons {
    height: 2.5rem;
    width: auto;
    margin: 0.4rem;
}

.mobile-background-position {
    background-position: 0% 50% !important;
}

.phone-image-div {
    height: 20rem !important;
    width: 20rem !important;
}

/* .add-padding-mobile {
    padding-left: 45px;
} */


/* eleventh div */
.quick-signup-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/Contact Form Background.png');
    background-size: cover;
}
/* home page end */



/* about us start */
/* first div */
.aboutUs-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/about_us_image.png');
    background-size: cover;
    background-position: center;
}

/* second div */
.video-play-button {
    position: absolute;
    bottom: -2%;
    right: 1%;
    width: 20%;
    height: auto;
}

/* sixth div */
.blog-image-height {
height: 200px;
}
/* about us end */



/* transformation start */
/* first div  */
.transformation-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/Tranformation Banner Image.png');
    background-size: cover;
    background-position: right;
}

.trans2-arrow-circle {
    position: absolute;
    margin-top: -65%;
    margin-left: 37%;
}

.trans3-arrow-circle {
    position: absolute;
    margin-top: -65%;
    margin-left: -50%;
}

.trans-ul-height {
    height: 360px;
}
/* transformation end */


/* mp challenge start */
/* first div */
.mpChallenge-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/MP\ Challenge\ Banner\ Image.png');
    background-size: cover;
    background-position: center;
}
/* mp challenge end */


/* memberships start */
/* first div */
.memberships-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/Membeerships\ Hero\ Image.png');
    background-size: cover;
    background-position: center;
}
/* memberships start */



/* fire class start */
/* first div */
.fire-class-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/Fire\ Class\ Banner.png');
    background-size: cover;
    background-position: center;
}



.f-div-fire {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/focused.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

.i-div-fire {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/intense.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

.r-div-fire {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/Trainer Image 5.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

.e-div-fire {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/exercise.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

.xlarge-header-text {
    font-family:'Roboto_bold_italic';
    color: var(--white);
    font-size: 3.2rem;
    line-height: 3rem;
}

.class-card-top-div {
    height: 200px;
}

.consultation-text {
    font-family:'Bebas_Neue_bold';
    font-size: 1.2rem;
    color: var(--white);
}
/* fire class start */



/* ice class start */
/* first div */
.ice-class-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/Ice\ banner\ Image.png');
    background-size: cover;
    background-position: center;
}

.i-div-ice {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/Intensive\ ice.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

.c-div-ice {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/Cardio\ ice.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

.e-div-ice {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/Exercise\ ice.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}
/* ice class end */


/* lia class start */
.lia-class-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/lia-main.png');
    background-size: cover;
    background-position: center;
}

.l-div-lia {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/Lower\ lia.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px; 
}

.i-div-lia {
    background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url('../../src/images/backgrounds/Intensive\ lia.png');
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}
/* lia class end  */


/* boxercise class start */
/* first div */
.boxercise-class-first-full-div {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../../src/images/backgrounds/image\ 3.png');
    background-size: cover;
    background-position: center;
}
/* boxercise class end  */


/* blog page start */
.text-align-responsive {
    text-align: center !important;
}
/* blog page end */