body {
    background-color: black;
    margin: 0px;
    text-align: center;
    font-family: 'Roboto', 'Signika', Arial, Helvetica, sans-serif;
}

h1 {
    text-transform: uppercase;
    font-family: 'Roboto Condensed';
    font-size: 2.4rem;
    font-weight: bold;
}

h2 {
    font-family: Roboto Condensed;
    font-weight: bold;
    font-size: 24px;
    color: black;
    text-transform: uppercase;
}

h4 {
    font-family: Roboto;
    font-weight: bold;
    font-size: 18px;
    color: #D2383F;
    text-transform: uppercase;
}

h5 {
    font-family: Roboto Condensed; 
    font-size: 1rem;
    text-transform: uppercase;
}

.canvas {
    display: inline-block;
    background-color: white;
    padding-top: 17px;
    min-height: 100vh;
    width: 100%;
    max-width: 1390px;
    z-index: -3;
}

.newsletter {
    background-color: black;
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.newsletter h1 {
    height: 5rem;
    text-transform: uppercase;
    padding-top: 1.5rem; 
    padding-left: 1.5rem; 
    font-family: 'Roboto Condensed';
    font-size: 2.4rem;
    font-weight: bold;
    text-align: left;
    color: white;
}

.newsletter p {
    padding-left: 1.5rem; 
    font-family: Roboto; 
    font-size: 1rem;
    text-align: left;
    color: white;
}

.newsletter form {
    padding-left: 1rem; 
	padding-top: 3.5rem; 
    padding-bottom: 3.5rem; 
}

.newsletter input[type=text] {
	height: 2.5rem;
	width: 55%;
	border: 2px solid white;
	background-color: black;
	color: white;
    margin-right: 1rem; 
    padding-left: 0.5rem;
    box-sizing: border-box;
}

.newsletter input[type=submit] {
	height: 2.5rem;
	width: 7rem;
	border: 2px solid white;
	background-color: white;
	color: black;
    font-family: Roboto Condensed; 
    font-size: 0.9rem;
    text-transform: uppercase;
}

.common-title {
    position: relative;
    padding-top: 2.5rem; 
    padding-left: 1rem; 
    font-family: Roboto Condensed; 
    font-size: 2.4rem;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    border-left-color: #F6F6F6;
    border-left-width: 3px;
    border-left-style: solid;
}

.common-title a {
    color: black;
}

.common-title a:hover {
    text-decoration: none;
    color: #3D4349;
}

.common-description {
    padding-left: 1rem; 
    text-align: justify;
}

.common-subtitle {
    padding-left: 1.5rem; 
    font-family: Roboto Condensed; 
    font-size: 1.5rem;
    text-align: left;
    text-transform: uppercase;
}

.common-item-title {
    font-size: 1.5rem; 
    font-weight: bold;
}

.common-column a {
    color: black;
}

.common-column a:hover {
    text-decoration: none;
    color: #3D4349;
}

.common-column p.title {
    font-family: Roboto Condensed; 
    font-size: 20px;
}

.common-column .item img {
    max-height: 350px;
    width: 100%;
    object-fit: contain; 
}

.common-column img.yall-loaded  {
	opacity: 1;
}

img.noshowing {
	transition: 2s opacity ease-out;
    opacity: 0.25;
}

.common-column .item {
    height: 100%;
} 

.common-column .thumbnail {
    height: 70%;
}
.common-column .details {
    height: 30%;
}

.dot-overlay {
    background: url(../imgs/dotm.png);
    width: 100%;
    z-index: 1;
}

#gotoTop {
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    bottom: 2rem; /* Stay at the top */
    right: 2rem;
    overflow: hidden; /* Disable horizontal scroll */
    width: 2.5em;
    height: 2.5em;
    background-color: black;
    display: none;
    border: white 1px solid;
    border-radius: 2px;
}

.news h4 {
    margin-top: 20px;
    margin-bottom: 0px;
    text-align: left;
}

.news h2 {
    margin-bottom: 0px;
    padding-top: 10px;
    color: black;
    text-align: left;
}

.news p {
    font-family: Roboto;
    font-weight: 100;
    font-size: 16px;
    color: black;
    text-align: left;
}

.special-mouse {
    background: url(../imgs/special_mouse.png);
    background-repeat: no-repeat;
    background-position: 95% 98%;
    z-index: 2;
}

.special {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: left;
    color: black;
}

.special .subtitle {
    text-transform: uppercase;
    padding-top: 0rem; 
    padding-left: 1rem; 
    font-family: 'Roboto';
    font-size: 1.1rem;
    font-weight: bold;
    text-align: left;
    border-left-color: #F6F6F6;
    border-left-width: 3px;
    border-left-style: solid;
}

.special .text {
    padding-top: 1rem; 
    padding-left: 1rem; 
    font-family: Roboto; 
    font-size: 1rem;
    text-align: left;
}

.item-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 50vh;
    padding-right: 2rem;
}

 
/* Items Pop-up Image */
.theImage {
    border-width: 0px;
    border-radius: 5px;
    transition: 0.3s;
}
  
.theImage:hover {
    opacity: 0.6;
    cursor: url('../imgs/search-outline.svg'), zoom-in;
}

.arrows {
    position: relative;
    height: 0px;
    left: 75%;
    top: 70px;
    width: 8%;
}
  
/* Navigation */
.swiper-button-next {
    background-image: url(../imgs/next.png);
    background-size: 40px 40px !important;
    width: 40px !important;
    height: 40px !important;
    top: 170px !important;
    right: 60px !important;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
    opacity: 50%;
    transition: 0.2s;
}
.swiper-button-next:hover {
    opacity: 100%;
}
.swiper-button-next.swiper-button-disabled {
    display: none !important;
}
.swiper-button-next::after {
    display: none;
}
.swiper-button-prev {
    background-image: url(../imgs/prev.png);
    background-size: 40px 40px !important;
    width: 40px !important;
    height: 40px !important;
    top: 170px !important;
    left: 60px !important;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
    opacity: 50%;
    transition: 0.2s;
}
.swiper-button-prev:hover {
    opacity: 100%;
} 
.swiper-button-prev::after {
    display: none;
}
.swiper-button-prev.swiper-button-disabled {
    display: none !important;
}

.arrow {
    width: 40px;
    border-radius: 20px;
}

.arrow:hover, .arrow:focus {
    background-color: #EDEDED;
}

.link {
    margin: auto;    
    display: block;
}

.link img {
    width: 100%;
}


/* /// EDGE LINKS /// */
#edge {
    position: relative;
    height: 0px;
    padding-right: 30px;
} 

#edge a {
    color: black;
    position: relative;
    z-index: 5;
}

#edge a:hover {
    text-decoration: none;
    font-weight: bold;
    position: relative;
    z-index: 5;
} 

#edge .row {
    height: 400px;
}

.vertical-rl {
    writing-mode: vertical-rl;
    display: inline-block;
}

/* === Overlays === */
.unavailable {
    position: relative;
}
  
.unavailable:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Ctitle%3Eionicons-v5-e%3C/title%3E%3Ccircle cx='256' cy='256' r='144' fill='%23d33030'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.deposit_fr, .deposit_en {
    position: relative;
}
  
.deposit_fr:after {
    content: "";
    display: block;
    width: 98px;
    height: 53px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    background-image: url('../imgs/deposit_fr.png');
    background-size: 98px 53px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.deposit_en:after {
    content: "";
    display: block;
    width: 98px;
    height: 53px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    background-image: url('../imgs/deposit_en.png');
    background-size: 98px 53px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}


.new-overlay_fr, .new-overlay_en {
    position: relative;
}
  
.new-overlay_fr:after {
    content: "";
    display: block;
    width: 98px;
    height: 53px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    background-image: url("../imgs/new_overlay_fr.png");
    background-size: 98px 53px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.new-overlay_en:after {
    content: "";
    display: block;
    width: 98px;
    height: 53px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    background-image: url("../imgs/new_overlay_en.png");
    background-size: 98px 53px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

/* === BOUTON === */
.button_container {
    position: relative;
    max-width: 165px; /* Maximum width */
    left: 0px;
    transition: 0.3s;
}

.button_container:hover {
    transform: matrix(1.02, 0, 0, 1.02, 2, 0); /* scale 1.02 and translateX -2px */;
}

.button_text {
    position: absolute; /* Position the background text */
    top: 0px;
    left: 0px;
    text-align: center;
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    padding-top: 10px; /* Some padding */
    padding-bottom: 10px;
    padding-right: 10px;
}

#btnSubmit {
    background-image: url('../imgs/button.png') !important;
    border: none;
    padding: 10px 10px 20px 0px !important;
    color: #f1f1f1; /* Grey text */
    text-align: center;
    font-family: Roboto Condensed; 
    font-size: 1rem;
    text-transform: uppercase;
    width: 164px;
    height: 50px;
    background-color: transparent;
}

#btnSubmit:hover:enabled {
    transform: matrix(1.02, 0, 0, 1.02, 2, 0); /* scale 1.02 and translateX -2px */;
    cursor: pointer;
}