/* Debug */

.debug {
    background-color: red;
}

.square_blue {
    width: 200px;
    height: 150px;
    background-color: blue;
}
.square_yellow {
    width: 200px;
    height: 150px;
    background-color: yellow;
}


/* Common */

.nav-link {
    color: rgba(0, 0, 0, 0.9);
}

.nav-link:focus, .nav-link:hover {
    color: #000;/* Overwritten BS rule, final behaviour TBC*/
}

.jumbo_wrap {
    background-size:cover;
    background-position: top center;
    padding: 250px 0 40px 0;
}

li {
    list-style: none;
}

/* Common - Buttons */

.btn {
    transition: .7s;
}

.btn_shape {
    border-radius: 50px;
    color: #fff;
}

.btn-primary {
    border: 2px solid #0d6efd;
}

.btn-primary:hover {
    box-shadow: inset 0px 0px 0px 2px #fff;
    color: #FFF; 
}

.btn_bg_dgrey {
    background-color: #363636;
    border: 2px solid #363636;
}

.btn_bg_dgrey:hover {
    box-shadow: inset 0px 0px 0px 2px #fff;
    color: #FFF; 
    opacity: 0.5;
}


.btn_bg_red {
    background-color: #CD3D0F;
    border: 2px solid #CD3D0F;
}

.btn_bg_red:hover {
    box-shadow: inset 0px 0px 0px 2px #000;
    color: #FFF; 
}

.btn_bg_inverted {
    background-color: #D9DADC;
    color: #0d6efd;
    font-weight: 600;
}
.btn_bg_inverted:hover {
    box-shadow:  0px 0px 10px 2px rgb(247, 247, 247);
    color: #0d6efd;
}

.btn_bg_inverted_dark {
    background-color: #D9DADC;
    font-weight: 600;
    color: #000;
    border: 2px solid #D9DADC;
}

.btn_bg_inverted_dark:hover {
    box-shadow: inset 0px 0px 0px 2px #000;

}

/* Typo */

body {
    font-family: Arial, sans-serif;
    color: #000; 
}

h2 {
    font-size: calc(2.3rem + .9vw);
}

h3 {
    font-size: calc(2.0rem + .9vw);
}

h4 {
    font-size: calc(1.1rem + .3vw);
    color: #838383;
    margin: 30px 0;
}

h5 {
    font-size: 1.05rem;;
    font-weight: 600;
}

h6 {
    margin: 30px 0;
}


/* Header */

header {
    width: 100%;
    height: 110px;
    position: fixed;
    top: 0;
    z-index: 10; 
}

.header-top {
    padding: 5px 0px;
}

.header-top img {
    height: 15px;
}

.navbar-light .navbar-nav .nav-link {
    color:#000;
    font-size: 1.05rem;
}

.dropdown-toggle::after {
    content: url('../img/chevron-down-solid.svg');
    display: inline-block;
    width: 10px;
    border: none;
    vertical-align: middle;
    transition: ease 0.5s;
}

.navbar-nav li:hover .dropdown-toggle::after {
    content: url('../img/chevron-down-solid-hover.svg');
    display: inline-block;
    width: 10px;
    border: none;
    vertical-align: middle;
    transform: rotate(-180deg);
}

header .dropdown-menu {
    width: 100%;
    text-align: center;
    border: none;
}

.dropdown-menu[data-bs-popper] {
    margin-top: 0;
    border-radius: 0;
}

.nav-item {
    position: static;
}

.dropdown-menu.show li {
    display: inline-block;
}

#custom_divider {
    display: block;
}

#custom_divider hr {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #000;
}

.dropdown-menu p {
    margin: 0;
}

.sub_ul {
    list-style: none; /* Remove default bullets */
}

.sub_ul li {
    margin-left: 15px;
}

.sub_ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #0d6efd; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.sub_link {
    text-decoration: none;
    color: #000;
}
.lens {
    height: 25px;
}


/* Hero */

#hero {
    margin-top: 110px;
}

.jumbo_bg_top{
    background-image: url(../img/jumbo-bg.png);
}

.game_logo {
    width: 70%;
    margin-bottom: 20px;
}

/* Hero Cards*/

.thumbnail {
    padding: 80px 20px;
}

.cards img {
    width: 100%;
    border-radius: 20px;
}

.card_thumb {
	padding: 2px;
	border-radius: 20px;
}

.card_thumb:active {
	box-shadow: 0px 0px 0px 2px #0072ce;
}

#hero .cards {
    position: relative;
    top: 0;
    transition: top ease 0.5s;
}

#hero .cards:hover {
    top: -20px;
    cursor: pointer;
}

/* PS5*/

#ps5 {
    padding: 20px;
}

#ps5 h5 {
    color: #0d6efd;
}

#ps5 img {
    width: 100%;
}

.tile {
    text-align: center;
    opacity: 0.8;
}
.tile:hover {
    box-shadow: 0px 2px 0px 0px #0072ce;
    opacity: 1;
}

.tile h6 {
    margin-top: 10px;
    padding-bottom: 20px;
    height: 60px;
}

/* New releases*/

.jumbo_bg_middle{
    background-image: url(../img/it-takes-two-hero-banner-desktop.jpg);
}

#releases h6 {
    margin-top: 10px;
}

/* PS4 */

#ps4, #sales, #social {
    margin-top: 50px;
    padding: 20px;
}

/* PS Plus*/

#plus {
    background-color: #BEBCBB;
}

#plus p {
    font-size: 0.9rem;
}

/* PS Now */

#now {
    background-color: #161C3B;
}

/* Social */

#social .container {
    max-width: 600px;
}

/* Footer */

footer {
    background-color: #00439C;
    padding: 50px 20px;
}

footer .container-fluid {
    padding: 0;
}

#globe {
    width: 25px;
    height: 25px;
    margin: 45px 0;
}

#footer-top-right ul {
    padding-left: 0;
}
#footer-top-right li {
    padding: 5px 0;
}

#footer-top-right a {
    text-decoration: none;
    color: #fff;
}

#footer-bottom p {
    font-size: 0.8rem;
    line-height: 1.5;
}