/* width */
::-webkit-scrollbar {
	width: 10px;
	background: black; /*fallback*/
	background: linear-gradient(#00003b,#fff,#00003b);
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: #00003b; 
	border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #00003b; 
  }
body{
    background-color: #00003b;
    height: 100vh;
}
.icon{
    width: 65px;
}
.exco-image{
	width: 450px;
	border-radius: 10px;
	box-shadow: 5px 5px 10px 1px grey;
	-webkit-box-shadow:4px 4px 5px 1px grey;
}
.wrapper {
	width: 400px;
	margin: auto;
	border: none;
	overflow-x: hidden;
  }
  
.target {
	font-weight: bold;
	color: #fbfbfb;
	animation-name: rightToLeft;
	animation-duration: 4.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* animation: rightToLeft 4.5s linear infinite; */
}

@keyframes rightToLeft {
	0% {
		transform: translateX(200px);
	}
	100% {
		transform: translateX(-160px);
	}
}
.flags{
    max-width: 150px;
}
.emblem{
    max-width: 100px;
    max-height: 100px;
}
.emblem-container{
    max-width: 600px;
	height: 100%;
}
[data-animate] {
	opacity: 0;
	will-change: auto;
}

.animated {
	transition: all 1s cubic-bezier(0.57, 0.08, 0.9, 0.36);
	opacity: 1;
}
.btn-primary {
	border-radius: 50px;
	font-size: 20px;
	padding: 20px;
	transition: all 0.5s;
	cursor: pointer;
	position:relative;
}

.btn-primary span {
	cursor: pointer;
	position: relative;
	transition: 0.5s;
}

.btn-primary span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.btn-primary:hover span {
	padding-right: 25px;
}

.btn-primary:hover span:after {
	opacity: 1;
	right: 0;
}
.revealytop{
	position: relative;
	transform: translateY(150px);
	opacity: 0;
	transition: 1s all ease;
}
	
.revealytop.active{
	transform: translateY(0);
	opacity: 1;
}
.revealybottom{
	position: relative;
	transform: translateY(150px);
	opacity: 0;
	transition: 1s all ease;
}

.revealybottom.active{
	transform: translatex(0);
	opacity: 1;
}
.thumb {
	width: 400px; 
	height: 250px;
	perspective: 1000px;
	margin: 70px auto;
}
.thumb a {
	display: block; 
	width: 100%; 
	height: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	/*double layered BG for lighting effect*/
	background: 
		linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("/index-news/Braai-at-Swakopmund.jpg");
	/*disabling the translucent black bg on the main image*/
	background-size: 0, cover;
	/*3d space for children*/
	transform-style: preserve-3d;
	transition: all 0.5s;
}
.thumb:hover a {
	transform: rotateX(80deg); 
	transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
	/*36px high element positioned at the bottom of the image*/
	content: ''; 
	position: absolute; 
	left: 0; 
	bottom: 0; 
	width: 100%; 
	height: 36px;
	/*inherit the main BG*/
	background: inherit;
	 background-size: cover, cover;
	/*draw the BG bottom up*/
	background-position: bottom;
	/*rotate the surface 90deg on the bottom axis*/
	transform: rotateX(90deg);
	 transform-origin: bottom;
}
/*label style*/
.thumb a span {
	color: white; 
	text-transform: uppercase;
	position: absolute; 
	top: 100%; 
	left: 0; 
	width: 100%;
	font: bold 20px/36px Montserrat; 
	text-align: center;
	/*the rotation is a bit less than the bottom surface to avoid flickering*/
	transform: rotateX(-89.99deg); 
	transform-origin: top;
	z-index: 1;
}
/*shadow*/
.thumb a:before {
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;
	background: rgba(0, 0, 0, 0.5); 
	box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
	transition: all 0.5s; 
	/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
	opacity: 0.15;
	transform: rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin: bottom;
}
.thumb:hover a:before {
	opacity: 1;
	/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
	box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
	/*pushing the shadow down and scaling it down to size*/
	transform: rotateX(0) translateZ(-60px) scale(0.85);
}
.about-background-color{
	background-color: #f3f9f8;
}
.about-info{
	font-size: 14px;
	color: white;
}
.contact{
	width: 100%;
	height: 100%;
}
.event-flags{
	height: 150px; 
	width: 250px;
}
.USA-logo{
	width: 100%;
}
.member-flags{
	height: 195px;
	width: 200px;
}
.member-flags-NHPA{
	height: 195px;
	width: 35rem;
	margin-left: auto;
	margin-right: auto;
}
.member-flags-RSA{
	width: 15rem;
	margin-left: auto;
	margin-right: auto;
}
.SACARD{
	width: 16rem;
}
.NAMIBIACARD{
	width: 16rem;
}
.navbar{
	background-color: #00003b;
	justify-content: space-between;
	align-items: stretch;
	height: 85px;
}

.navbar a {
	font-size: 14px;
	gap: 12;
	color: #fff;
  }
  
.navbar a:hover {
	text-decoration: underline;
	color: white;
}



.index-about-backgroundcolor{
	background: black; /*fallback*/
	background: linear-gradient(#00003b,#fff);
}
.index-regulation-backgroundcolor{
	background: black; /*fallback*/
	background: linear-gradient(#fff,#00003b);
}
/* Flash class and keyframe animation */
.flashit{
	color:#f2f;
	  -webkit-animation: flash linear 1s infinite;
	  animation: flash linear 1s infinite;
  }
  @-webkit-keyframes flash {
	  0% { opacity: 1; } 
	  50% { opacity: .1; } 
	  100% { opacity: 1; }
  }
  @keyframes flash {
	  0% { opacity: 1; } 
	  50% { opacity: .1; } 
	  100% { opacity: 1; }
  }
  /* Pulse class and keyframe animation */
  .pulseit{
	  -webkit-animation: pulse linear .5s infinite;
	  animation: pulse linear .5s infinite;
  }
  @-webkit-keyframes pulse {
	  0% { width:200px; } 
	  50% { width:340px; } 
	  100% { width:200px; }
  }
  @keyframes pulse {
	  0% { width:200px; } 
	  50% { width:340px; } 
	  100% { width:200px; }
  }

.profiles{
	height: 300px;
	width: 300px;
}
.profilescard{
	width: 25rem;
	height: auto;
}
.imageprofiles{
	height: 450px;
	width: 450px;
}
/*********************************************/


/*Mobile development*/
@media screen and (max-width:1200){
	.thumb {
		width: 450px; 
		height: 250px;
		margin: 70px auto;
		perspective: 1000px;
	}
}
@media screen and (max-width:765px){
	.SACARD{
		width: 15rem;
	}
	.NAMIBIACARD{
		width: 15rem;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.about-text{
		color: #00003b;
	}
	.thumb {
		width: 450px; 
		height: 250px;
		margin: 70px auto;
		perspective: 1000px;
	}
}
@media screen and (max-width:700px){
	.exco-image{
		width: 100%;
		height: auto;
	}
	.img{
	max-width: 425px;
	}
	.member-flags{
		height: 195px;
		width: 200px;
	}
	.member-flags-NHPA{
		height: 100%;
		width: 30rem;
		margin-left: auto;
		margin-right: auto;
	}
	.member-flags-RSA{
		height: 100%;
		width: 16rem;
		margin-right: auto;
		margin-left: auto;
	}
	.SACARD{
		width: 15rem;
	}
	.NAMIBIACARD{
		width: 15rem;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.about-text{
		color: #00003b;
	}
	.thumb {
		width: 450px; 
		height: 250px;
		margin: 70px auto;
		perspective: 1000px;
	}
}
@media screen and (max-width:625px){
	.SACARD{
		width: 14rem;
	}
	.thumb {
		width: 300px; 
		height: 250px;
		margin: 70px auto;
		perspective: 1000px;
	}
}
@media screen and (max-width:600px){
	.img{ 
		max-width: 150px;
		text-align: center;
	}
	.member-flags{
		height: 195px;
		width: 200px;
	}
	.member-flags-NHPA{
		height: 100%;
		width: 20rem;
		margin-left: auto;
		margin-right: auto;
	}
	.member-flags-RSA{
		height: 100%;
		width: 16rem;
		margin-left: auto;
		margin-right: auto;
	}
	.exco-image{
		width: 100%;
		height: auto;
	}
	.flags{
		max-width: 100px;
	}
	.member-font{
		font-size: 12px;
		width: 100%;
		border:none;
		text-decoration: underline solid black;
	}
	.event-flags{
		height: 100%; 
		width: 100%;
		text-align: center;
	}
	.SACARD{
		margin-left: auto;
		margin-right: auto;
		width: 15rem;
		text-align: center;
	}
	.NAMIBIACARD{
		width: 15rem;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.namibia-name{
		text-align: left;
	}
	.wrapper {
		width: 250px;
		margin: auto;
		border: none;
		overflow-x: hidden;
	}
	.thumb {
		width: 300px; 
		height: 250px;
		margin: 70px auto;
		perspective: 1000px;
	}
	.about-text{
		color: #00003b;
	}
	.profiles{
		height: 250px;
		width: 250px;
	}
	.imageprofiles{
		height: 300px;
		width: 300px;
	}
	.profilescard{
		width: 20rem;
		height: auto;
	}
}
@supports (-webkit-appearance:none){
	@media screen and (max-width:1200){
		.thumb {
			width: 450px; 
			height: 250px;
			margin: 70px auto;
			perspective: 1000px;
		}
	}
	@media screen and (max-width:765px){
		.SACARD{
			width: 15rem;
		}
		.NAMIBIACARD{
			width: 15rem;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
		.about-text{
			color: #00003b;
		}
		.thumb {
			width: 450px; 
			height: 250px;
			margin: 70px auto;
			perspective: 1000px;
		}
	}
	@media screen and (max-width:700px){
		.exco-image{
			width: 100%;
			height: auto;
		}
		.img{
		max-width: 425px;
		}
		.member-flags{
			height: 195px;
			width: 200px;
		}
		.member-flags-NHPA{
			height: 100%;
			width: 30rem;
			margin-left: auto;
			margin-right: auto;
		}
		.member-flags-RSA{
			height: 100%;
			width: 16rem;
			margin-right: auto;
			margin-left: auto;
		}
		.SACARD{
			width: 15rem;
		}
		.NAMIBIACARD{
			width: 15rem;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
		.about-text{
			color: #00003b;
		}
		.thumb {
			width: 450px; 
			height: 250px;
			margin: 70px auto;
			perspective: 1000px;
		}
	}
	@media screen and (max-width:625px){
		.SACARD{
			width: 14rem;
		}
		.thumb {
			width: 300px; 
			height: 250px;
			margin: 70px auto;
			perspective: 1000px;
		}
	}
	@media screen and (max-width:600px){
		.img{ 
			max-width: 150px;
			text-align: center;
		}
		.member-flags{
			height: 195px;
			width: 200px;
		}
		.member-flags-NHPA{
			height: 100%;
			width: 20rem;
			margin-left: auto;
			margin-right: auto;
		}
		.member-flags-RSA{
			height: 100%;
			width: 16rem;
			margin-left: auto;
			margin-right: auto;
		}
		.exco-image{
			width: 100%;
			height: auto;
		}
		.flags{
			max-width: 100px;
		}
		.member-font{
			font-size: 12px;
			width: 100%;
			border:none;
			text-decoration: underline solid black;
		}
		.event-flags{
			height: 100%; 
			width: 100%;
			text-align: center;
		}
		.SACARD{
			margin-left: auto;
			margin-right: auto;
			width: 15rem;
			text-align: center;
		}
		.NAMIBIACARD{
			width: 15rem;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
		.namibia-name{
			text-align: left;
		}
		.wrapper {
			width: 250px;
			margin: auto;
			border: none;
			overflow-x: hidden;
		}
		.thumb {
			width: 300px; 
			height: 250px;
			margin: 70px auto;
			perspective: 1000px;
		}
		.about-text{
			color: #00003b;
		}
	}
}