/* ======================================================

                        FOOTER

====================================================== */


/* ============== DIVIDER ============== */


.skyline {
    background-image: url("../images/city-skyline.webp");
    background-repeat: repeat-x;
    transform: translateY(1px);
    }


/* ============== FOOTER & COLUMNS ============== */


.footer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: black;
    color: white;
    padding: 0 60px 20px;
    margin: 0;
    }

.footer-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 1440px;
    }

.left {
    display: flex;
    flex-direction: row;
}

.right {
    display: flex;
    flex-direction: row;
}



.column {
    max-width: 380px;
    margin: 30px;
    }


/* ============== LOGO ============== */


.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

.logo img {
    max-width: 380px;
    }

.battle {
    text-align: center;
    font-size: 14px;
    padding: 0;
    margin: -3px 0 -5px;
    transform: translateX(10px);
    }

.mini-sub-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  width: 100%;
}

.logo h5 {
    font-size: 12px;
    font-weight: 900;
    text-align: start;
    padding: 0 10px;
    }

.sub-sub {
    display: flex;
    justify-content: center;
}

.sub-sub h2 {
font-size: 23px;
font-weight: 900;
}

.right {
    text-align: center;
}

.copyright {
    text-align: center;
    font-size: 14px;
    padding: 10px 0 20px;
    }

/*
.contact {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    }
*/

.please-play-safe2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    }



/* ============== FART ============== */


.charlie {
    display: flex;
    flex-direction: row;
padding-left: 30px;
/* border-left: 2px solid white; */
    }


/* ============== BROWSE ============== */



.browse a {
  display:flex;
  flex-direction: column;
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    transition: 0.25s;
    }

.browse a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
    }

.browse-more a {
  display:flex;
  flex-direction: column;
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 0 0 0 10px;
    transition: 0.25s;
    }

.browse-more a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
    }



/* ============== SOCIAL ============== */


.social {
    display: flex;
    flex-direction: column;
    }

.social img {
    max-width: 40px;
    padding: 0 0 13px 0;
    margin: 0 0 0 40px;
    }

.social a {
    transition: 0.25s;
    }

.social a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
    }

.contact b {
    font-weight: 600;
    padding: 0;
    }

.contact p {
    text-decoration: none;
    color: white;
    font-weight: 100;
    text-align: center;
    padding: 0 0 0px;
    transition: 0.25s;
    }


/* ============== DISCLAIMER ============== */


.disclaimer h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 0.8;
    display: flex;
    justify-content: start;
    margin: 0 0 20px;
   }


.disclaimer {
    padding: 10px;
    border: 2px solid white;
    }

.disclaimer p {
    padding: 0;
    font-size: 16px;
text-align: left;
    }

.please-play-safe {
    display: flex;
    justify-content: center;
    }

.please-play-safe2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

.white-line2 {
    border: none;
    height: 0px;
    background-color: black;
    width: 0;
    }

.please-play-safe2 p {
    padding: 20px 0 0;
    }

.white-line {
    border: none;
    height: 1px;
    background-color: white;
    width: 100px;
    }




/* ============== THANKS ============== */

.footer-logo {
    display: flex;
    justify-content: center;
    }


.footer-logo a {
    transition: 0.25s;
    }
   
.footer-logo a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
    }

.thank-you {
    margin: 0 12px 5px;
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    text-align: center;
border: 2px solid white;
border-radius: 50%;
  transform:translateY(-1px);
    }

.thank-you p {
    font-size: 16px;
    padding: 0 ;
    }


/* ============== HORSE HEAD ============== */


.horse-pic {
    display: flex;
    justify-content: center;
    }

.horse-pic img {
    max-width: 160px;
    padding: 5px 0 0;
    }


/* ======================================================

                       RESPONSIVE 

====================================================== */

@media (max-width: 1175px) {

/* ===== FOOTER ===== */   /* RESPONSIVE */

.skyline {
    background-image: none;
    }

.column {
    max-width: 380px;
    margin: 5px;
    }
   
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    }

.battle {
    transform: translateX(15px);
    }


.footer-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    }

.left {
    flex-direction: column;
}

.right {
    display: flex;
    flex-direction: column;
}

.logo img {
    padding: 0 20px 0;
    }

.sub-sub h2 {
    max-width: 380px;
    font-size: 21px;
    text-align: center;
    padding: 0 20px 0;
    }

.copyright {
    text-align: center;
    padding: 8px 0 15px;
    }

.copyright p {
    font-size:12px;
    }

.contact {
    padding: 0 0 0
    }


.browse a {
    font-size: 14px;
    font-weight: 200;
    padding: 0 0 0 10px;
    }

.browse-more a {
    font-size: 14px;
    font-weight: 200;
    }

.disclaimer h4 {
    font-size: 18px;
   }

.please-play-safe2 p {
    padding: 15px 0 0;
    }

.white-line {
    border: none;
    height: 1px;
    background-color: white;
    width: 320px;
    }

.white-line2 {
    border: none;
    height: 1px;
    background-color: white;
    width: 320px;
    }

.browse {
    padding: 0;
    }

.social img {
    padding: 0 0 15px;
    margin: 0 0 0 15px;
    }

.social {
    display: flex;
    flex-direction: row;
    padding: 0 0 0 55px;
    }


.fart {
    display: flex;
    flex-direction: row;
    }

/*
.white line {
    align-items: center;

    }
*/

.disclaimer {
    padding: 0 10px 15px;
    }

.disclaimer h4 {
    margin: 15px 0 20px;
    }

.charlie {
  margin: 15px 0 0;
  display: flex;
  justify-content: center;
transform: translateX(-20px);
  }

.column2 {
display: flex;
flex-direction: row;
}

.thank-you  {
  width: fit-content;
  height: fit-content;
  margin: 20px 0 0 10px;
}


.thank-you p {
  padding: 0;
}

.horse-pic img {
    max-width: 140px;
    padding: 10px 0 20px;
    }
}

/* ======================================================

                         MOBILE 

====================================================== */


@media (max-width: 600px) {


.column {
    max-width: 380px;
    margin: 8px;
    }

   
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    }

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    }

.right {
    flex-direction: column;
}

.logo img {
    padding: 0 20px 0;
    }

.sub-sub h2 {
    max-width: 380px;
    font-size: 20px;
    text-align: center;
    padding: 0 20px 0;
    }

.copyright {
    text-align: center;
    padding: 8px 0 15px;
    }

.copyright p {
    font-size:12px;
    }

.contact {
    padding: 0 0 0;
    }

.browse a {
    font-size: 14px;
    font-weight: 200;
    padding: 0 0 0 10px;
    }

.browse-more a {
    font-size: 14px;
    font-weight: 200;
    }

.disclaimer h4 {
    font-size: 18px;
   }

.please-play-safe2 p {
    padding: 15px 0 0;
    }

.white-line {
    border: none;
    height: 1px;
    background-color: white;
    width: 320px;
    }

.white-line2 {
    border: none;
    height: 1px;
    background-color: white;
    width: 320px;
    }

.browse {
    padding: 0;
    }

.social img {
    padding: 0 0 15px;
    margin: 0 0 0 15px;
    }

.social {
    display: flex;
    flex-direction: row;
    padding: 0 0 0 55px;
    }


.fart {
    display: flex;
    flex-direction: row;
    }

/*
.white line {
    align-items: center;

    }
*/

.disclaimer {
    margin: 0 10px;
}

.disclaimer h4 {
    margin: 15px 0 20px;
    }

.charlie {
    margin: 15px 0 0;
    }

.thank-you {
max-width: 65%;
}

.column2 {
width: 90%;
}

.thank-you p {
  padding: 0;
transform: translateY(-1px);
}

.horse-pic img {
    max-width: 140px;
    padding: 10px 0 20px;
    }

}