:root {
	--main-bg-color: #121212;
	--sec-bg-color: #1d1d1d;
	--third-bg-color: #2d2d2d;
	--main-accent-color: #00E676;
	--sec-accent-color: rgb(20, 128, 61);
	--main-border-color: #00E676;
  }




body, html {
	overflow-x: hidden;
	color: #ffffff;
	height: auto;
	width: 100%;
	position: relative;
	background-color: var(--main-bg-color);
	text-shadow: 1px 1px #000000;
	font-family: 'Titillium Web', sans-serif;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}	

body {
	overflow: hidden;
}

a {
	color: var(--main-accent-color);
}

a:link {
	color: var(--main-accent-color);
  }
  
  a:hover {
	color: var(--sec-accent-color);
  }
  
  a:active {
	color: blue;
  }

li {
	color: #ffffff;
}

h1, h2 {
	color: var(--main-accent-color);
}

h3, h4 {
	color: #ffffff;
}

.transparent {
	opacity: 1;
}

.navbar {
	background: var(--sec-bg-color);
	margin-top: 0vw;
	position: fixed;
	top: 0;
	height: 4vh;
	width: 100vw;
	z-index: 9999;
	border-style: none;
}
.nav > li > div {
	position: relative;
	display: block;
	padding: 10px 15px;
	cursor: default;
}
.navbar-nav > li > div {
	padding-top: 15px;
	padding-bottom: 15px;
	line-height: 20px;
}
.navbar-default .navbar-nav > li > div {
	color: rgb(119, 119, 119);
}

@media screen and (max-width: 600px) {
	.navbar{width: 100vw;}
}

.nav a {
    text-decoration:none;
    display: block;
}

.button1 {
	border: 0.1vw;
	border-style: solid;
	border-color : var(--main-border-color);
	color: #000000;
	top: 0.5vh;
	height:3vh;
	text-align: center;
	vertical-align: middle;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	align-content: center;
	font-size: 1.75em;
}
.button1 span {
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.75s;
}
.button1 span:after {
	color: #ffffff;
	content: '\276F';
	position: absolute;
	opacity: 0;
	right: -1vw;
	transition: 1s;
	text-shadow: 1px 1px #ffffff;
}
.button1:hover span {
	color: #000000;
	padding-right: 1vw;
	text-shadow: 1px 1px #ffffff;
}
.button1:hover span:after {
	color: #000000;
	opacity: 1;
	right: 0;
	text-shadow: 1px 1px #ffffff;
}
.button1:focus {
	background-color: var(--main-accent-color) !important;
	color: black;
	opacity: 1;
	text-shadow: 1px 1px #ffffff;
}
.button1:focus span {
	color: #000000;
	text-shadow: 1px 1px #ffffff;
}
.button1:hover {
	background-color: var(--main-accent-color) !important;
	color: #000000;
	text-shadow: 1px 1px #ffffff;
}
@media screen and (max-width: 600px) {
	.button1:hover{background-color: #e6e6e6 !important;color: #ffffff;}
}

.button2 {
	left: 40%;
	display: block;
	border: 0.1vw;
	border-style: solid;
	border-color : var(--main-border-color);
	color: #000000;
	top: 0.5vh;
	height:3.5vh;
	width: 3.5vh;
	padding-top: 1vh;
	text-align: center;
	vertical-align: middle;
	position: relative;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	align-content: center;
	font-size: 1.75em;
}
.button2 span {
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.75s;
}
.button2 span:after {
	color: #ffffff;
	content: '\276F';
	position: absolute;
	opacity: 0;
	right: -0.15vw;
	transition: 1s;
	text-shadow: 1px 1px #ffffff;
}
.button2:hover span {
	color: #000000;
	padding-right: 0.75vw;
	text-shadow: 1px 1px #ffffff;
}
.button2:hover span:after {
	color: #000000;
	opacity: 1;
	right: 0;
	text-shadow: 1px 1px #ffffff;
}
.button2:focus {
	background-color: var(--main-accent-color) !important;
	color: black;
	opacity: 1;
	text-shadow: 1px 1px #ffffff;
}
.button2:focus span {
	color: #000000;
	text-shadow: 1px 1px #ffffff;
}
.button2:hover {
	background-color: var(--main-accent-color) !important;
	color: #000000;
	text-shadow: 1px 1px #ffffff;
}
@media screen and (max-width: 600px) {
	.button2:hover{background-color: #e6e6e6 !important;color: #ffffff;}
}

.button3 {
	display: block;
	border: 0.1vw;
	border-style: solid;
	border-color : var(--main-border-color);
	color: #000000;
	top:7.5vh;
	position:relative;
	height:3.5vh;
	width: 3.5vh;
	padding-top: 1vh;
	text-align: center;
	vertical-align: middle;
	position: relative;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
	align-content: center;
	font-size: 1.75em;
}
.button3 span {
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.75s;
}
.button3 span:after {
	color: #ffffff;
	content: '\276E';
	position: absolute;
	opacity: 0;
	right: -0.15vw;
	transition: 1s;
	text-shadow: 1px 1px #ffffff;
}
.button3:hover span {
	color: #000000;
	padding-right: 0.75vw;
	text-shadow: 1px 1px #ffffff;
}
.button3:hover span:after {
	color: #000000;
	opacity: 1;
	right: 0;
	text-shadow: 1px 1px #ffffff;
}
.button3:focus {
	background-color: var(--main-accent-color) !important;
	color: black;
	opacity: 1;
	text-shadow: 1px 1px #ffffff;
}
.button3:focus span {
	color: #000000;
	text-shadow: 1px 1px #ffffff;
}
.button3:hover {
	background-color: var(--main-accent-color) !important;
	color: #000000;
	text-shadow: 1px 1px #ffffff;
}
@media screen and (max-width: 600px) {
	.button3:hover{background-color: #e6e6e6 !important;color: #ffffff;}
}



.parallax-1 {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	max-height: 90vh; 
	background-image: url('../Resources/Images/bgtest1.jpg');
}
@media only screen and (max-width: 600px) {
	.parallax-1{min-height: 60vh; max-height: 60vh;}
}	

.topkek {
	position: absolute;
	display: flex;
	width: 70%;
	height: 45vh;
	align-items: center;
	justify-content: center;
	right: 32.5%;
	text-align:center;
	text-shadow: 2px 2px #000000;
}

.topkek a {
	color: #ffffff!important;
}

.topkak {
	position: absolute;
	display: flex;
	float: right;
	width: 30%;
	height: 45vh;
	align-items: center;
	justify-content: center;
	right: 0vw;
	text-align:center;
	text-shadow: 2px 2px #000000;
}

.topkak a {
	color: #ffffff!important;
}


.caption {
	position: relative;
	justify-content: center;
	text-align: center;
	color: #000;
	width: auto;
	height: 5vw;
}

.caption span.border{
	background-color: var(--main-accent-color);
	color: #000000;
	padding: 1vw;
	letter-spacing: 0.2vw;
}



.headerText {
	padding: 0;
	position: relative;
	margin: 2vh auto;
	top: 8vh;
	border-radius: 6px;
	background-color: var(--main-accent-color) !important;
	text-shadow: 1.5px 1.5px #ffffff;
	color: black;
	opacity: 1;
	max-width: 25vw;
}

.middleText {
	text-align: center;
	vertical-align: middle;
}

.text-margin{
	margin-right: 0.25vw;
	margin-left: 0.25vw;
	margin-top: 0.25vh;
	margin-bottom: 0.25vh;
}

.center { 
	display: flex;
	vertical-align:middle; 
	align-items: center;
	justify-content: center;
}

.border {
	border: 0.1vw;
	border-style: solid;
	color : var(--main-accent-color);
	width: auto;
}

.divider {
	width: 100vw;
}

.card_keeper {
	position: relative;
	width: 100vw;
	height: 40vh;
}

.card_space {
	float: left;
	width: 15vw;
	height: 100%;
}

.card_box {
	margin-right: 5%;
	float: left;
	width: 20vw;
	height: 100%;
}

.card_top {
	width: 100%;
	height: 50%;
}

.mid_img {
	position: relative;
	justify-content: center;
	align-items: center;
	align-self: center;
}

.card_top_img {
	width: 100%;
	height: 100%;
}

.card_mid_img {
	position: absolute;
	border-radius: 100%;
	z-index: 5;
	width: 10vw;
	left: 5vw;
	top: 12.5vh;
	height: auto;
}

.card_bot_txt {
	width: 100%;
	height: 50%;
	align-content: center;
	text-align: center;
	color : var(--main-accent-color);
}

.main_box {
	border: 0.1vw;
	border-style: solid;
	border-color : var(--main-border-color);
	border-radius: 20px;
	margin-bottom: 5vh;
	height: 30vh;
	width: 80vw;
	background-color: var(--sec-bg-color);
	position: relative;
	left: 10vw;
	overflow: hidden;
}

.sec_box {
	border-radius: 20px;
	margin-top: 5vh;
	margin-left: 2.5vw;
	margin-right: 2.5vw;
	height: 20vh;
	width: 40vw;
	position: relative;
	left: 5vw;
	overflow: hidden;
	float: left;
}

.banner0 {
	width: 100%;
	height: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
}

.top-m {
	width: 100vw;
	top: 2.5vh;
	position: relative;
	margin-bottom: 5vh;
}

.column0 {
	float: left;
	width: 50%;
}

.column1 {
	float: left;
	width: 25%;
	height: 100%;
	text-align: center;
	color: var(--main-accent-color);
}
	
.column2 {
	float: right;
	width: 75%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.column3 {
	float: left;
	width: 35%;
	height: 100%;
	text-align: center;
	color: var(--main-accent-color);
}
	
.column4 {
	float: right;
	width: 60%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.column5 {
	float: left;
	width: 60%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	
}
	
.column6 {
	float: right;
	width: 35%;
	height: 100%;
	text-align: center;
	color: var(--main-accent-color);
}

.table_title {
	overflow: hidden;
	left: 17.5vw;
	width: 50vw;
	height: 10vh;
	position: relative;
	color: var(--main-accent-color);
}

table {
	margin-bottom: 5vh;
	text-align: center;
	width: 70vw;
	left: 15vw;
	position: relative;
}

th {
	text-align: center;
	color: var(--main-accent-color);
}




.sec_pag_top {
	width: 80vw;
	height: 90vh;
	position: relative;
	left: 10vw;
}

.sec_column0 {
	width: 55%;
	float: left;
	height: 70vh;
	text-align: justify;
	

}

.sec_column1 {
	width: 40%;
	float: right;
	height: 70vh;
}



.sec_pag_mid {
	width: 80vw;
	height: 60vh;
	position: relative;
	left: 10vw;
}

.sec_column2 {
	width: 55%;
	float: left;
	height: 40vh;
	text-align: justify;
	

}

.sec_column3 {
	width: 40%;
	float: right;
	height: 40vh;
}
































/* colours */

	.cl-bg {
		background-color : #121212;
	}
		
	.cl-surface_1 {
		background-color : var(--sec-bg-color);
	}
	
	.cl-surface_2 {
		background-color : var(--third-bg-color);
	}
	
	.cl-primary {
		background-color : var(--main-accent-color);
	}
	
	.cl-secondary {
		background-color : var(--main-accent-color);
	}


/* font colours */

	.font-color-white {
		color: #ffffff;
	}
	
	.clrimp {
		color : var(--main-accent-color)!important;
	}
	
/* font size */
	.font-size-1 {
		font-size: 3.5vw;
		letter-spacing: auto;
	}
	
	.font-size-2 {
		font-size: 2.5vw;
		letter-spacing: auto;
	}

	.font-size-3 {
		font-size: 3vw;
		letter-spacing: auto;
	}

	.font-size-4 {
		font-size: 2.2em;
		letter-spacing: auto;
	}

	.font-size-5 {
		font-size: 1em;
		letter-spacing: auto;
	}
	
.main-banner {
	width: 99vw;
	height: 55vh;
}
	.size-1 {
		position: relative;
		text-align: center;
		height: 7.5vh;
		width: 100vw;
	}	
	
	.size-2 {
		height: 7.5vh;
		width: 60vw;
	}

	.size-3 {
		height: 7.5vh;
		width: 40vw;
		color: var(--main-accent-color);
	}

	.size-4 {
		height: auto;
		width: 100vw;
	}	

	.size-5 {
		float: left;
		height: 50vh;
		width: 70%;
	}	

	.size-6 {
		float: right;
		height: 50vh;
		width: 30%;
	}	


	.size-16 {
		height:4.5vh;
		width: 15vw;
	}
	
	.size-17 {
		width: 10.5vw;
	}