@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
@import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");
/* CSS Document */

* {
    box-sizing: border-box;
}

body, html {
	margin-right: 0px;
	margin-left: 0px;
	height: 100vh;
	
	
  
}




/* Hides the scroll bar */ 

::-webkit-scrollbar{
	width: 0px;
}

::-webkit-scrollbar-track-piece{
	background-color: transparent;
	webkit-border-radius: 6px;
}


.AboutKoen {
	
	background: #076600;  /* fallback for old browsers */
    background: -webkit- linear-gradient(to bottom, #206D20, #000000);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #1C531C, #1A1A1A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	position: relative;
 	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-origin: content-box;
	background-position: center;
	background-color: rgba(0,79,112,1.00);
	
	word-wrap: normal;
}

.HisArt {
	
	background: #076600;  /* fallback for old browsers */
    background: -webkit- linear-gradient(to bottom, #206D20, #000000);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #1C531C, #1A1A1A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	position: relative;
 	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-origin: content-box;
	background-position: center;
	
	
	word-wrap: normal;
}

.RodeSafety {
	
	background: #076600;  /* fallback for old browsers */
    background: -webkit- linear-gradient(to bottom, #206D20, #000000);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #1C531C, #1A1A1A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	position: relative;
 	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-origin: content-box;
	background-position: center;
	background-color: rgba(0,79,112,1.00);
	text-align: center;
	word-wrap: normal;
}

.Home {
	
overflow: hidden;
	
}

body.HOME {
  
  	background-image: url('../Images/BackGround1.jpg');
 
	position: relative;
 
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-origin: content-box;
	background-position: center;
	background-color: rgba(0,79,112,1.00);
	text-align: center;
	word-wrap: normal;
}

















.test {
	overflow: hidden;
	
	
	
}

.header {
	
	
	text-align: center;
	
	
}

.headerButton {
	
	color: white;
	font-size: 30px;
	text-align: center;
	border-radius: 0px 0px 30px 30px;
	background-color: #202020;
	padding: 20px;
	top: 41px;
	position: 0px;
	margin: 0px 10px 10px 10px;
	z-index: 0;
	
}

.NAVButton1{
	
	font-size: 15px;
	font-family: 'Arial', normal;
	
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  
  font-size: 20px;
  font-family: 'Poiret One', cursive;
}

.topnav a:hover {
  background-color: #336200;
  color: white;
}

.activeNAV {
    background-color: #666;
	font-size: 20px;
	font-family: 'Poiret One', cursive;
	color: #000000;
}

.topnav .icon {
  display: none;
	
}

@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.parallax {

	    /* The image used */
    background-image: url(' ../Images/BackGround.gif');
	
	
    /* Full height */
    height: 100%;
	width: 100%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.pasrallaPAGE {
	
	height:100%;
	background-color:white;
	
	
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
	padding-top: 30px;
	min-width: 40px;
	max-width: 300px;
    height: auto;	
	object-position: center;
	  -webkit-animation: Fade 2.5s ;
  animation: Fade 2.5s ;

}

.centerEvents {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
	padding-top: 30px;
	min-width: 40px;
	max-width: 600px;
    height: auto;	
	object-position: center;
	  -webkit-animation: Fade 2.5s ;
  animation: Fade 2.5s ;
 font-family: 'Poiret One', cursive;
pointer-events: none;
}

#crossfade {
    position:relative;

}

.Image1 {
    display: block;
	cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
	border-radius: 50%;
	object-position: center;
  transition: filter .9s ease-in-out;
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */

}




.Image1:hover {
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}






.demo a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}

#MainArrowAnimation a {
  padding-top: 50px;
}
#MainArrowAnimation a span {
  position: absolute;
  top: 0;
  left: 0%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

@keyframes Fade {
  0% {
    
    opacity: 0;
  }
  50% {
    
  }
  100% {
   
    opacity: 1;
  }
}

@keyframes Fade2 {
  0% {
    
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
   
    opacity: 1;
  }
}

span {

}





.MainText {
	text-align: center;
	font-size: 18px;
	padding: 20px;
	
	border-radius: 50px;
	margin: 50px;
	color: white;
	background-color: hsla(0,0%,0%,0.53);
}

.QuoteMain {
	text-align: center;
	font-size: 54px;
	padding: 20px;
	font-family: 'Poiret One', cursive;
	border-radius: 50px;

	color: white;
	background-color: hsla(0,0%,0%,0.00);
  -webkit-animation: Fade 2.5s ;
  animation: Fade 2.5s ;
	    margin: auto;
    width: 50%;
    border: 3px solid hsla(0,0%,0%,0.00);
   
}

.Quote2 {
	text-align: center;
	font-size: 34px;

	font-family: 'Poiret One', cursive;
	border-radius: 0px;

	color: white;
	background-color: hsla(0,0%,0%,0.00);
  -webkit-animation: Fade 3s ;
  animation: Fade 3s ;
	left: auto;
	right: auto;
	    margin: auto;
    width: 50%;
    border: 3px solid hsla(0,0%,0%,0.00);
    padding: 10px;
	
}



.p1 {
	text-align: left;
	font-size: 24px;
	padding: 20px;
	
	border-radius: 50px;
	margin: 50px;
	color: white;
	background-color: hsla(0,0%,0%,0.53);
}

h1 {
	text-align: center;
	font-size: 24px;
	padding: 20px;
	
	border-radius: 50px;
	margin: 50px;
	color: white;
	background-color: hsla(0,0%,0%,0.53);
	
}

.video1 {
	
text-align: center;

	height: 100%;
	color: white;
	width: auto;
	padding: 0px;

	border-radius: 20px;
	margin: 30px 200px;
	font-size: 18px;

	
	background-color: hsla(0,0%,0%,0.53);
}
	


* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;


}



.AnimatedButton1 {
  border-radius: 9px;
  background-color: #333;
 
  color: darkgray;
  text-align: center;
  font-size: 24px;
  padding: 20px;
  width: 335px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  border: 2px solid transparent;
  background-image: linear-gradient(#333, #333), linear-gradient(10deg,#7E00B9,#005B89,#ED00FF);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.AnimatedButton1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  		
}

.AnimatedButton1 span:after {
  content: '\25b7' ;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;

  color: hsla(214,100%,50%,1.00);

}

.AnimatedButton1:hover span {
  padding-right: 25px;
  color: white;
}

.AnimatedButton1:hover span:after {
  opacity: 1;
  right: 0px;
  
}


.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
	pointer-events: none;
}

.rowEVENTS {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 0px;
}

/* Create two equal columns that sits next to each other */
.columnEVENTS {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0 0px;
}

.columnEVENTS img {
    margin-top: 0px;
    vertical-align: middle;
}

/* Style the buttons ------------------------------------- */
.btn {
    
   margin: 10px;
    padding: 10px 100px;
    background-color: #333;
    cursor: pointer;
    font-size: 16px;
	color: white;
	border-radius: 50px;
    width: 335px;
	border: 2px solid hsla(122,39%,49%,0.00); /* Green */
	text-align: center;
}

.btn:hover {
    background-color: #336200;
	
}

.btn.active {
    background-color: #666;
    color: white;
}

.btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  font-family: 'Poiret One', cursive;		
}

.btn span:after {
  content: '\25b7' ;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -30px;
  transition: 0.5s;
 font-family: 'Poiret One', cursive;
  color: hsla(0,0%,100%,1.00);

}

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

.btn:hover span:after {
  opacity: 1;
  right: 0px;
  
}

.btn:focus {outline:0;}

/* ------------------------------------------ */



.CreditsP {
	
		
	font-size: 24px;
	padding: 30px;
	text-align: center;
	border-radius: 50px;
	margin: 30px 80px;
	background-color: hsla(0,0%,0%,0.38);
	color: white;
	font-family: 'Poiret One', cursive;
	
}

.PEvents {
	
	font-family: 'Poiret One', cursive;	
	font-size: 20px;
	padding: 30px;

	border-radius: 50px;
	margin: 30px 90px;
	background-color: hsla(0,0%,0%,0.38);
	color: white;

	
}

.TestUnderImage:disabled {
	
		
	font-size: 14px;
	padding: 10px;
	
	border-radius: 50px;
	margin: 10px 80px;
	background-color: hsla(0,0%,18%,1.00);
	color: white;

	
} 
.hr1 {
	border: 0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255,255,255,0.75), rgba(0, 0, 0, 0));

	margin: 0px 0px;
}

.hr2 {
	border: 0;
    height: 5px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0,255,123,1.00), rgba(0, 0, 0, 0));

	margin: 10px 10px;
}

.hr3 {
	border: 0;
    height: 3px;
	width: 600px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0,255,123,1.00), rgba(0, 0, 0, 0));
	
	
}

.NavBarUnderText {
	color: white;
	font-size: 30px;
	text-align: center;
	border-radius: 0px 0px 30px 30px;
	background-color: #202020;
	padding: 20px;
	top: 41px;
	position: 0px;
	margin: 0px 10px 10px 10px;
	z-index: 0;
	
	
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

.QuoteTextHome {
	text-align: center;
	font-size: 50px;
	font-family: 'Poiret One', cursive;
	color: white;
	
	
	
}

.QuoteTextHomeQuoteMark {

	font-size: 55px;


}

.QuoteTextHomeUnder {
	text-align: right;
	font-size: 20px;
	font-family: 'Poiret One', cursive;
	color: white;
	padding-right: 50px;
	
	
}

.QuoteTextHomeBackGround {

background-color: hsla(93,100%,11%,0.36);
border-radius: 20px;	
margin: 50px;	
}

.ImageColumn {
	
	padding: 10px;
	border-radius: 20px;
	background-color: hsla(174,80%,25%,0.65);
	margin: 10px;
}

.toprightIndex {
    position: inherit;
    bottom: 6px;
    right: 10px;
    font-size: 14px;
	color: skyblue;
	font-family: 'Poiret One', cursive;
	text-align: right;
}

.CopyRight {
    position: inherit;
    bottom: 6px;
    right: 10px;
    font-size: 14px;
	color: skyblue;
	font-family: 'Poiret One', cursive;
	text-align: right;
}

img:disabled {
    pointer-events: none;
}