@charset "UTF-8";
/* 
  html5doctor.com Reset Stylesheet
  v1.6.1
  Last Updated: 2010-09-17
  Author: Richard Clark - http://richclarkdesign.com 
  Twitter: @rich_clark
*/

html, body, div, span, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  abbr, address, cite, code,  del, dfn, em, img, ins, kbd, q, samp,  small, strong, sub, sup, var,  b, i,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary,  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
    font-family: arial;
}

body {
	line-height: 1;
    font-family: arial;
}

article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {
	display: block;
}

.desktop_nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,  q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
    color: grey;
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}
ul {
	list-style-type: none;
}
a:hover {
-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
  transition: 1s;
    text-decoration: none
}
li:hover {
-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
  transition: 1s;
    text-decoration: none
}
.clearfix {
  overflow: auto;
}


@media screen and (max-width:1024px){

 /*COIN MENU*/   
    .coin_menu {
        display: none;
    }   
}

.btn-primary {
    color: black;
    background-color: transparent;
    border-color: 1px solid var(--gold);
    border-width: 0;
    width: 100%;
    font-weight: 700;
}
.btn-primary:hover {
    background-color: grey;
    border: 0;

}


.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.btn-primary:hover {
    background-color: grey;
}
.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0;
}
.card {
    text-align: center;
    line-height: 1.4;
}
.body_container {
    max-width: 1366px;
    display: flex;
    flex-wrap: nowrap;
    
}


/* ==============================================================GLOBAL STUFF */
:root {
  	--grey: #A2A2A2;
	--brick: #B2662F;
	--cream: #E7DBC7;
	--gold: #BC9860;
}

/*FOOTER*/
.footer_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-items: center;
    padding: 30px 0;
}

.footer_col_1 {
    text-align: center;
    width: 20%;
}
.footer_col_1 img{
    max-width: 160px;
}
.footer_col_2 {
    text-align: center;
    width: 50%;
    border-right: solid var(--gold) 1px;
    border-left: solid var(--gold) 1px;
}
.footer_col_3 {
    text-align: center;
    width: 30%;
}
/*//FOOTER*/
/*BUTTONS*/
.btn_gold {
    width: 270px;
    background-color: var(--gold);
    text-align: center;
    padding: 15px 5px;
    margin: 30px auto;
    color: white;
}

.btn_gold:hover {
    background-color: var(--brick);
    color: black !important;
}
.btn_gold a {
    color: white;
}
.btn_grey {
    width: 270px;
    background-color: var(--grey);
    text-align: center;
    padding: 15px 5px;
    margin: 30px auto;
    color: white;
}

.btn_grey:hover {
    background-color: var(--brick);
    color: black;
}
.btn_grey a {
    color: white;
}
.btn_grey a:hover {
    color: black;
}

.btn_brick {
    width: 270px;
    background-color: var(--brick);
    text-align: center;
    padding: 15px 5px;
    margin: 30px auto;
    color: white;
}

.btn_grey:hover {
    background-color: var(--brick);
    color: black;
}
.btn_grey a {
    color: white;
}
.btn_grey a:hover {
    color: black;
}

.btn_gold_center {
    width: 270px;
    background-color: var(--gold);
    text-align: center;
    padding: 15px 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 30px;
    color: white;
}
.btn_gold_center a {
    color: white;
}
.btn_gold_center a:hover {
    color: black !important;
}
.btn_gold_center:last-child {
    margin-right: 0px;
}
@media screen and (max-width:768px){
    .btn_gold_center{
    margin-right: 0;

    }
                                        }

.btn_blk {
    width: 270px;
    background-color: black;
    text-align: center;
    padding: 15px 30px;
    margin: 30px auto;
    color: white;
}


.btn_wht {
    width: 270px;
    background-color: white;
    text-align: center;
    padding: 15px 40px;
    margin: 30px auto;
    color: var(--grey);
}

.btn_wht:hover {
    color: black;
}
.btn_wht a {
    color: var(--grey);
}
.btn_wht a:hover {
    color: black;
}

.btn_wht_center {
    width: 270px;
    background-color: var(--gold);
    text-align: center;
    padding: 15px 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 30px;
    color: white;
}


.btn_blk_center {
    width: 270px;
    background-color: black;
    text-align: center;
    padding: 15px 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 30px;
    color: white;
}
.btn_blk_center:last-child {
    margin-right: 0px;
}


.btn_artist {
    background-color: black;
}
.mt_btn_div {
    clear: both;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    padding: 50px 0

}
.btn_wht_wht {;
    width: 270px;
    background-color: white;
    padding: 15px 10px;
}
/*//BUTTONS*/
html {
  scroll-behavior: smooth;
}
body {
	font-family: Arial, "Arial Black";
    margin: 0 auto;
}
.icn_notice {
    margin-right: 7px;
    height: 25px;
}
.block_ms {
    background-color: white;
    padding: 7px;
    line-height: 1.2;
}
.notice_block {
    display: flex;
    justify-content: center;
}
.notice_block p{
    margin-top: 3px;
}
.heading_grey {
	font-size: 1.5rem;
	font-weight: 300;
    letter-spacing: 3px;
	color: var(--grey);
	text-align: center;
	text-transform: uppercase;
}

.heading_black {
    font-family: Arial Black;
    letter-spacing: 3px;
	font-size: 3.125rem;
	text-align: center;
	text-transform: uppercase;
}
.heading_gold_bold {
    font-family: Arial Black;
    letter-spacing: 3px;
        margin-top: 5px;
	font-size: 1.5rem;
	color: var(--gold);
	text-align: center;
	text-transform: uppercase;
}
.heading_gold_lte {
	font-size: 1.5rem;
    letter-spacing: 3px;
    margin-top: 10px;
	font-weight: 300;
	color: var(--gold);
	text-align: center;
	text-transform: uppercase;
}
h1 {
	font-family: Arial Black;
	font-size: 3.75rem;
	text-align: center;
	text-transform: uppercase;
}
h2 {
	font-family: Arial Black;
	font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

h3 {
	font-family: Arial Black;
	font-size: 1.82rem;
	text-align: center;
	text-transform: uppercase;
}
h4 {
    font-family: Arial;
	font-size: 1rem;
	text-align: left;
	text-transform: uppercase;
    color: var(--gold);
    margin-top: 15px;
}
p {
	font-family: Arial, "Arial Black";
    line-height: 1.3;
	font-weight: 400;
	text-align: center;
    font-size: 1rem;
}

.col_gold {
	color: var(--gold);
}
.col_white {
	color: white;
}
.col_blk {
	color: black;
}
.col_grey {
	color: var(--grey);
}
.col_brick {
	color: var(--brick);
}
.back_blk {
    background-color: black;
}
.back_cream {
    background-color: var(--cream);
}
.back_gold {
    background-color: var(--gold);
}
.back_brick {
    background-color: var(--brick);
}
.back_grey {
    background-color: var(--grey);
}
.heading_divider {
	width: 489px;
	margin: 20px auto;
    border-bottom: solid 1px;
}
/*=====================================@MEDIA++++++++++++++++*/


@media screen and (min-width:1337px){
.btn_position {
    position: relative;
    top: 150px;
    padding: 15px 50px;
}
    .social_media{
        margin: 0;
    }
                                        }
@media screen and (min-width:769px){
.container_ms {
    width: 80%;
	float: right;
}   
.mobile_nav, .mobilenav_ms, .video_small, .mobile_page  {
        display: none;
    }
    .video_single {
        display: none;
    }
    
                                    }
@media screen and (max-width:1337px){
.btn_position {
    position: relative;
    bottom: 0px;
    padding: 15px 50px;
}
    .mt_btn_div {
    padding: 20px 0;
}
                                    }
@media screen and (max-width:768px){
.desktop_nav, .footer_container, .img_header, .video_large, .desktop_page  {
        display: none;
    }

.container_ms {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
    
.heading_grey {
	font-size: 1.2rem;
	font-weight: 300;
    letter-spacing: 3px;
	color: var(--grey);
	text-align: center;
	text-transform: uppercase;
}

.heading_black {
    font-family: Arial Black;
    letter-spacing: 3px;
	font-size: 1.55rem;
	text-align: center;
	text-transform: uppercase;
}
.heading_gold_bold {
    font-family: Arial Black;
    letter-spacing: 3px;
        margin-top: 5px;
	font-size: 1.2rem;
	color: var(--gold);
	text-align: center;
	text-transform: uppercase;
}
.heading_gold_lte {
	font-size: 1.2rem;
    letter-spacing: 3px;
    margin-top: 10px;
	font-weight: 300;
	color: var(--gold);
	text-align: center;
	text-transform: uppercase;
}
h1 {
	font-family: Arial Black;
	font-size: 2.5rem;
	text-align: center;
	text-transform: uppercase;
}
h2 {
	font-family: Arial Black;
	font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

h3 {
	font-family: Arial Black;
	font-size: 1.82rem;
	text-align: center;
	text-transform: uppercase;
}
h4 {
    font-family: Arial;
	font-size: 1rem;
	text-align: left;
	text-transform: uppercase;
    color: var(--gold);
    margin-top: 15px;
}
p {
	font-family: Arial, "Arial Black";
    line-height: 1.3;
	font-weight: 400;
	text-align: center;
    font-size: 1rem;
}
.heading_divider {
	width: 300px;
	margin: 10px auto;
    border-bottom: solid 1px;
}
.ms_container_child_2 {
        overflow: hidden;
        margin-left: auto;
    margin-right: auto;
    }
    
.ms_container_child_one {
    width: 100%;
    min-width: 350px;
    padding: 0 30px;
    margin-left: auto;
    margin-right: auto;
}
    .flip-cardd-inner, .block {
  min-width: 350px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    clear: both
    }
    .btn_blk_center {
        margin: 0;
    }

    
                                    }
/*=====================================@MEDIA++++++++++++++++*/


/*=====================================MOBILE STUFF++++++++++++++++*/

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1012;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: #919191;
  display: block;
  transition: 0.3s;

}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 32px;
  margin-left: 50px;
    color: white;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


.mobile_open {
    color: White;
    font-size:22px;
    cursor:pointer; 
}
.mobile_nav {
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 7px 20px;
    position:fixed;
    width: 100%;
    z-index: 1011;
}
.logo_mobile {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 20px;
    background-color: black;
}



/*=====================================MOBILE STUFF++++++++++++++++*/

.ms_container_btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  
    align-items: center;
    overflow: hidden;
}

.ms_container_btn_center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; 
}

.padding_sides {
    padding: 0 20px;
}
.padding_top {
    padding: 20px 0;
}
.margin_sides {
    margin: 0 20px;
}
.margin_top {
    margin: 30px auto;
}
.margin_bot {
    margin: 0px auto 30px;
}



/* ==============================================================//GLOBAL STUFF */
/* ==============================================================DESKTOP NAV */
.desktop_nav {
    width: 20%;
    background-color: black;
    height: 100%; /* Full-height: remove this if you want "auto" height */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1000; /* Stay on top */
    top: 0; /* Stay at the top */
    float: left;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.nav-link {
    padding: 0rem 0rem;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: black;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
}
.logo_desktop img{
    width: 171px;
    height: auto;
}
.desktop_nav ul {
	list-style: none;     
}
.desktop_nav li {
    padding: 15px 0;
    border-bottom: 1px solid var(--grey)
}
.desktop_nav li:last-child {
    border-bottom: 0px solid var(--grey)
}
.desktop_nav ul a{
	color: white; 
}
.desktop_nav .btn-secondary {
    
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0em solid;
    border-right: 0em solid transparent;
    border-bottom: 0;
    border-left: 0 solid transparent;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {

    color: #fff;
    background-color: transparent;
    border-color: transparent;
    width: 100%;
    text-align: left;
}
.fas fa-angle-right {
   padding-left: 100px;
}
.arrow_ms {
    font-size: 24px;
    color: var(--gold);
    position: relative;
    top: 4px;
    left: 160px;
      -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari 3-8 */
  transform: rotate(45deg);
}

.menu_flex {
    display: flex;
    justify-content: space-between;
}
.dropdown-menu {
    background-color: var(--brick);
    width: 88.5%;
}
.btn-secondary:focus, .btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.0);
}
.desktop_nav .btn {
padding: 0;
}
.social_media {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.social_media img{
    width: 30px;
    height: auto;
}
.my_img {
    margin-right: 20px;
}
/*========================================CAROUSEL*/
.img_header {
    height: auto;
    width: 100%;
    padding: 0px 0;
    
}
.header_blk {
    float: right;
    position: relative;
    z-index: 1000;
    margin-right: -2px;
}
.img_carousel {
    position: absolute;
    z-index: 1;
    background-color: white;
    overflow-y: hidden;
    height: 461px;
    right: 0;
    width: 100%;

}
.carousel-item img {
    max-width: 400px;
    overflow: hidden;
    margin-left: 0px;
    padding: 60px 0;

}
.carousel-item {
padding: 0 140px;
    
}
.carousel-inner {

    position: relative;
    width: 50%;
    overflow: hidden;
    left: 13%;

}

/*========================================CAROUSEL*/
.heading_ms {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

.video_large {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    text-align: center;
    display: block;
}
.video_large iframe {
    text-align: center;
    margin: auto;
}
.video_double {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.video_double iframe{
    margin-right: 30px;
}
.video_double iframe:last-child{
    margin-right: 0px;
}
/* ==============================================================Coin Boxes */
.coin_box_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;    
}

.coin_stack_gold {
    text-align: center;
    margin-bottom: 15px;
}
.coin_box_wht {
    padding: 7px;
    width: 320px;
    height: 395px;
    border: 1px solid white;
    margin-bottom: 30px; 
    margin-left: auto;
    margin-right: auto;
}
.coin_box_gold {
    padding: 7px;
    width: 350px;
    height: 395px;
    border: 1px solid var(--gold);
    margin-bottom: 30px; 
    margin-left: auto;
    margin-right: auto;
}
.coin {
    height: 283px;
    text-align: center;
    padding-top: 40px;
}
.coin img{
    max-height: 170px;
}
.coin_menu img {
    width: 200px;
    height: auto;
    margin: 0 5px;
}

.coin_name {
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 11px;
}
.coin_date {
    font-size: 19px;
    font-weight: 300;
    text-align: center;
}
/* ==============================================================6 Piece */
.ms_container_com {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  
    align-items: center;
}

.ms_container_child_one {
    width: 60%;
    padding: 0 30px;
}

@media screen and (min-width:1337px){
.ms_container_child_2 img {
    margin-right: 110px;
    max-width: 300px;
}
}
@media screen and (max-width:1337px) and (min-width:769px){
.ms_container_child_2 img {
    margin-right: 50px;
    max-width: 300px;
}
}
/*===============================================================COIN PAGES*/
.coin_menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}  
img.two-rand {
    width: 100px;
    height: auto;
    margin-right: 30px;
}
 img.five-rand{
    height: 120px;
    width: 120px;
} 
.coin_info_blocks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.block   {
	width: 50%;
    height: 600px;
	padding: 10px;
	text-align: center;
	color: white;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}
.blockk::before   {
	position: relative;
    top: -1200px;
}.blockk   {
	width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
.blockk::before   {
	position: relative;
    top: -1200px;
}}

.block_heading {
    font-family: arial black;
    font-size: 29px;
    margin: 15px auto;
}
.block_underline {
    height: 1px;
    width: 75%;
    background-color: white;
    margin: 15px auto 30px auto;
}
.block_info {
    font-size: 19px;
    margin-bottom: 30px;
    line-height: 1.3;
}
.box_set img{
    max-width: 500px;
    height: auto;
}
.box_set{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
    min-width: 300px;
}
/*===============================================================Artists Page*/

.artist_info_blocks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 111px;
}
.artist_photo {
    width: 350px;
    height: 400px;
    padding: 10px;
    border: 1px solid var(--gold);
    
}
.artist_info {
    max-width: 600px;
    min-width: 300px;
    text-align: center;
    padding: 20px;
}
.artist_name {
    font-family: arial black;
    font-size: 29px;
    margin: 15px auto;
    min-width: 100px;
}
.artist_menu_name {
    color: var(--gold);
  border: 1px solid var(--gold);
    padding: 7px 10px;
    margin: 10px 5px;
}
.artist_menu_name a{
    color: var(--gold);
    font-size: 7px;
}
.artist_menu_name:hover{
    border: 1px solid black;
    background-color: black;
    -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
  transition: 1s;
}
.artist_menu {
    width: 100%;
}
@media screen and (max-width:641px){
    .artist_menu {
        display: none;
    }
    .heading_ms {
        margin-top: 33px;
    }
    .artist_info_blocks {
    padding-top: 0px;
}
    .artist_coins {
        height: auto;
    }
.btn_col {
    margin: 22px auto;
    
}
    .journey_block {
        margin-bottom: 10px;
    }
    .btn_gold_center {
    width: 270px;
    background-color: var(--gold);
    text-align: center;
    padding: 15px 5px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-right: auto;
        margin-left: auto;
    color: white;
}
    .btn_gold_center:last-child {
    margin-right: auto;
}
    .video_double {
        display: none;
    }
    
}
.artist_divider {
    height: 1px;
    width: 75%;
    background-color: var(--gold);
    margin: 15px auto 30px auto;
}
.artist_coins {
    background-color: var(--gold);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    clear: both;
    margin: 10px auto 50px auto;
    max-width: 950px;
    min-width: 300px;
}
.artist_coins_copy {
    background-color: black;
    max-width: 351.5px;
    height: 130px;
    padding: 15px 15px 15px 15px;
    font-family: arial black;
    font-size: 16px;
    color: var(--gold);
    line-height: 1.3;
    display: flex;
    align-items: center;
    min-width: 300px;
    
}
.artist_coins_img {

    margin-left: auto;
    margin-right: auto;
    padding: 15px 20px 12px 20px;
    min-width: 300px;
}

.artist_coins_img img{
max-height: 100px;
}
.btn_col {
    text-align: center;
    font-size: 14px;
    padding: 0 11px;
}
.btn_blk_artist {
    
    background-color: black;
    text-align: center;
    padding: 11px 15px;
    margin: 0 auto;
    min-width: 170px;
}
.btn_blk_artist a{
    color: white;
}
/*=====================================================STICKY NAV BAV FOR ARTIST*/
#navbar {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

#navbar a {
  display: block;
  color: var(--gold);
  text-align: center;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 14px;
}

#navbar a:hover {

}

#navbar a.active {
  color: var(--gold);
}


.sticky {
    position: fixed;
    top: 0;
    max-width: 1072px;
        margin: 0 auto;

}
.sticky {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}
.sticky a{
    min-width: 100px;
}
@media only screen and (min-width: 1336px) {
.artist_menu .sticky {
    padding-left: 0px;;
}
}



/*==================================BUY PAGE*/
.buy_provience {
    background-color: black;
    padding: 10px;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 29px;
    letter-spacing: 3px;
    margin-top: 60px;
    margin-bottom: 30px;
}
.table_jhb table{
    border: 5px solid var(--gold);
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 14px;
}
.table_jhb {
    border: 2px solid var(--gold);
    padding: 5px;
}
.table_jhb tr {
    border: 1px solid var(--gold);
    padding: 5px;
}
.table_jhb table tr:nth-child() {
    color: red;
}
.table_jhb td {
    border: 1px solid var(--gold);
    width: 50px;
    padding: 8px;
    font-size: 14px;
}
/*==================================JOURNEY SELECTION*/
.journey_selection {
	background-image: url(images/journey-background@2x.jpg);
	color: white;
	padding: 20px 10px;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}
.journey_flex {
    margin: 30px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
}
.journey_block {
    width: 340px;
    height: 178px;
    background-color: var(--gold);
    padding: 15px;
    text-align: center;
    line-height: 1.3;
}
/*=========================================FLIP CARD*/

.flip-card {
  background-color: transparent;
  perspective: 1000px;
        padding: 7px;
    width: 320px;
    height: 395px;
    border: 1px solid white;
    margin-bottom: 30px; 
    margin-left: auto;
    margin-right: auto;
}
.flip-card_wht {
  background-color: white;
  perspective: 1000px;
        padding: 7px;
    width: 320px;
    height: 395px;
    border: 1px solid var(--gold);
    margin-bottom: 30px; 
    margin-left: auto;
    margin-right: auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card_wht:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

.flip-card-front {
  z-index: 2;
}
.flip-card-front img:hover {
opacity: 0.0;
}
.flip-card-front:hover {
opacity: 0.0;
}

.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  z-index: 1;
}

.coin_box_wht {
    padding: 7px;
    width: 320px;
    height: 395px;
    border: 1px solid white;
    margin-bottom: 30px; 
    margin-left: auto;
   margin-right: auto;
}
/*===========================================================FLIP CARD FOR COINS PAGE*/

.flip-cardd {
  background-color: transparent;
  width: 50%;
  height: 600px;
  perspective: 1000px;
}

.flip-cardd-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

.flip-cardd:hover .flip-cardd-inner {
  transform: rotateY(180deg);
}

.flip-cardd-front, .flip-cardd-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-cardd-front {
  background-color: black;
     backface-visibility: hidden;
  color: black;
  z-index: 2;
}
.flip-cardd-front {
  background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.flip-cardd-back {
  background-color: black;
  color: black;
  transform: rotateY(180deg);
  z-index: 1;
}
.flip-cardd-back{
  display: flex;
    justify-content: center;
    align-items: center;
}
.flip-cardd-back img{
  width: 280px;
    height: auto;
}

.btn_position_btm {
    position: relative;
    top: 438px;
}
/*======================xxxxxxxxxxxxxxxxx=====MEDIA*/
@media screen and (max-width:641px){
.flip-cardd {
  background-color: transparent;
  width: 100%;
  height: 350px;
  perspective: 1000px;
    margin-bottom: 15px;
}

.flip-cardd-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */
  backface-visibility: hidden;
}

.flip-cardd:hover .flip-cardd-inner {
  transform: rotateY(180deg);
}

.flip-cardd-front, .flip-cardd-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-cardd-front {
  background-color: black;
     backface-visibility: hidden;
  color: black;
  z-index: 2;
}
.flip-cardd-front {
  background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.flip-cardd-back {
  background-color: black;
  color: black;
  transform: rotateY(180deg);
  z-index: 1;
}
.flip-cardd-back{
  display: flex;
    justify-content: center;
    align-items: center;
}
.flip-cardd-back img{
  width: 280px;
    height: auto;
}

.btn_position_btm {
    position: relative;
    top: 484px;
}
.block {
    width: 100%;
    height: auto;
    margin-bottom: 0;
}
    #cir1 {
        margin-top: 10px;
    }
    .btn_position_btm {

    position: relative;
    top: 244px;

}
    .events-content {
        
    } 
        .history_img {
            width: 90%;
        height: auto;
    }   
        .history_date {
        font-family: Arial Black;
            font-size: 33px;
            color: var(--gold);
            text-align: right;
            padding: 15px;
    }   
        .history_info {
            min-width: 300px;
            margin: 10px auto;
            clear: both;
    }  
    .history_divider {
        height: 2px;
        background-color: var(--gold);
        margin: 30px 7px;
    }
    
    
                                    }


/*==============================NEWS PAGE===========================================*/
.news_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 30px;
}
.news_block {
    width: 320px;
    border: solid 1px var(--gold);
    padding: 7px;
    margin-bottom: 15px;
    text-align: center;
}
.news_date {
    margin: 7px 0;
}
.news_title {
    margin: 7px 0;
    font-family: arial black;
    color: var(--gold);
    font-size: 22px;
}
.news_copy {
    line-height: 1.3;
}
.btn_news {
    background-color: black;
    padding: 10px 18px;
    margin: 10px auto;
    display: inline-block;
    color: white;
}
.btn_news a{
    color: white;
}
.btn_news a:hover{
    color: var(--gold) !important;
}
/*==============================//NEWS PAGE===========================================*/

/*==============================CONTACT FORM===========================================*/
.contact_container {
       display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 30px; 
    margin-top: 30px; 
}
.contact_details {
   max-width: 400px;
    width: 40%;
    min-width: 320px;
}
.contact_form {
       max-width: 700px;
    width: 60%;
    min-width: 320px;
}
.contact_form input {
    width: 100%;
    margin-bottom: 11px;
    padding: 5px;
    border: solid var(--gold) 1px;
}
.contact_form textarea {
    width: 100%;
    margin-bottom: 7px;
    padding: 5px;
    border: solid var(--gold) 1px;
}
.contact_name {
    color: var(--gold);
    margin-bottom: 10px;  
}
.contact_detail {
    line-height: 1.3;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 20px;
}
.contact_detail:last-child {
    line-height: 1.3;
    margin-bottom: 20px;
    border-bottom: 0px solid var(--gold);
    padding-bottom: 0;
}
/*==============================//CONTACT FORM===========================================*/
/*COMPETITION PAGE*/
.container_comp    {
    max-width: 1336px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.comp_details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.com_lhs {
    max-width: 600px;
    text-align: left;
    padding: 10px;
    line-height: 1.3;
    border-bottom: 1px solid black;
    margin-bottom: 30px;
    padding-bottom: 30px
}

.comp_pack {
    max-width: 300px;
}
.comp_form {
    padding: 30px 0 30px 110px;
}
.mycheck {
    width: 100px;
}
.myfield {
    width: 100%;
    padding: 10px;
    margin: 10px 0 10px 0;
}
.comp_form_new {
    max-width: 600px;
}
.form_block {
    background-color: var(--gold);
    padding:40px;
    margin-bottom: 40px;
    font-size: 24px;
}

/*======================================EVENT GALLERY SLIDER*/

.gallery {
    max-width: 1000px;
    margin: 60px auto;
}
.thumb_img img{
    max-width: 200px;
    height: auto;
}
.slider-nav {
    margin-top: 20px;
}

.slider-main {
    max-width: 900px;
    margin: 30px auto;
    overflow: hidden;
}
.slider-main img {
    width: 100%;
}
.slider-tnail {
    width: 200px;
    height: 100px;
    margin: 0 5px;
}
.slider-tnail img {
    width: 100%;
}
.slider-nav {
    max-width: 900px;
    margin: 0 auto;
}

/*=============================================USE FOR CSS*/
@media screen and (min-width:769px){
    .social_media {
        display: none;
    }
}
/*===============================================VIDEO ARTIST========================*/


p {
    text-align: center;
}

/*===============================================FORM========================*/
.form_order td {
    padding: 5px;
    border-bottom: 1px solid var(--gold);
}
.form_order table {
    font-size: 12px;
}
.table_black {
background-color: black;
}
.table_white {
    color: white;
}
.ms_new_form {
    background-color: red;
}
@media screen and (min-width:1337px){
  iframe {
 /*   margin-left: 229px;*/
}  
    
}
@media screen and (min-width:1281px) and (max-width:1336px){
  iframe {
    margin-left: 180px;
}  
    
}
@media screen and (min-width:1025px) and (max-width:1280px){
  iframe {
   /* margin-left: -97px;*/
    width: 1200px;
    height: 964px;
}  
    
}
@media screen and (min-width:200px) and (max-width:1024px){
  iframe {
    margin-left: -34px;
}  
    
}
@media screen and (min-width:600px){
.order_mobile {
    display: none;
}  
    
}
@media screen and (max-width:768px){
.order_desktop {
    display: none;
}  
    .callout {
    position: fixed;
    bottom: 43%;
    right: 0;
    margin-left: 0px;
    width: 100%;
    height: auto;
    background-color: 
    rgba(0,0,0,0.6);
}
    
}
.wpcf7-mail-sent-ok {
    border: 2px solid black !important;
    background-color: black !important;
    color: white !important;
    text-align: center !important;
}
.wpcf7-response-output {
    margin: 0em 0.5em 1em !important;
    padding: 0.2em 1em !important;
    border: 2px solid #ff0000 !important;
}
/*====================================FAQ*/
.container_faq {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
}
.container_faq *{
    text-align: left;
    font-family: arial;
}
.container_faq p{
    border-bottom: 1px solid var(--gold);
    padding: 10px 0;
}
/*====================FOR MENu*/
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 0.3rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
/*====================PRICE FOR COIN*/
.price {
    font-size: 22px;
    font-weight: 400;
    border: 1px solid black;
    padding: 7px 15px;
    color: black;
    max-width: 200px;
    margin: 0 auto 15px;
}
.event_download {
    background-color: var(--gold);
    color: black;
    font-weight: 700;
margin: 15px auto;
padding: 10px 30px;
}
.event_download:hover {
    background-color: var(--gold);
    color: white;
    font-weight: 700;
margin: 15px auto;
padding: 10px 30px;
}
.ght {
   margin: 53px auto;
text-align: center;
}
a.dropdown-item {
    font-size: 15px;
}
/*====================COMPETITION PAGE*/
.allcoins img {
    width: 70%;
    max-width: 600px;
}
.com_gold {
    color: var(--gold);
    text-align: center;
}
.comp_f {
    font-size: 24px;
    text-transform: uppercase;
        max-width: 700px;
    margin: 0 auto;
    line-height: 1.4;
}
.comp_s {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 14px auto;
    
}
.comp_t {
    font-size: 16px;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.4;
}
.ms_container_com {
    text-align: center;
}
.comh1 {
    font-size: 32px;
    text-align: center;
    font-weight: 700;
    margin: 20px auto;
}
.comh2 {
    font-size: 24px;
    text-align: center;
    font-weight: 400;
    margin: 20px auto;
    color: var(--gold);
}
/*===========++===================COMPETITION*/
@media screen and (min-width: 1200px) {
    .competition {
        width: 1100px;
        height: 1050px;
    }
    
}
@media screen and (max-width: 600px) {
    .competition {
        width: 375px;
        height: 1050px;
    }
    
}/*==============CALL OUT*/
@media screen and (min-width:769px) {
.callout {
position: fixed;
bottom: 48%;
right: 15%;
margin-left: 0px;
width: 50%;
height: auto;
background-color: rgba(0,0,0,0.6);

}
}

.callout p {
color: white;
    font-size: 18px;
    line-height: 1.5;

}

.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
}

.callout-container {
      padding: 10px 31px 10px 10px;
  background-color: unset;
  color: black
}

.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
}
.callout .mint-sm{
    font-size: 14px;
    padding-top: 7px;
}
.ms_order.clearfix.order_desktop {
    text-align: center;
}