@charset "UTF-8";
/* CSS Document */
* {
     margin: 0px;
}

body#holding, html#holding { 
 margin:20px;
 padding:0;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 18px;
line-height:24px; 
text-align:center; 
background-color: #49008e;
	color:#fff; 

}


body#live, html#live { 
 margin:0px;
 padding:0;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 18px;
line-height:24px; 
text-align:center; 
/*background-color: #e6db6a;*/
	/*background: rgba(252, 231, 51, 0.3);*/
	color:#fff; 
background-color: #49008e;
	z-index: -10;
}



.container{margin:auto; max-width: 800px;}
/*html page*/
@media all and (max-width: 99999px) and (min-width: 960px){	.logo-html { width:200px;  }	}
@media all and (max-width: 959px) {	.logo-html   { width:140px;    }	}

ul {display: inline-block;
text-align: left; margin-bottom: 14px; }


ul.home {display: inline-block;
text-align: left; margin-bottom: 14px; font-size: 20px;
line-height: 35px;}


a:link, a:visited   {  color: #fff;}
a:hover {color: #fce700;}

@media all and (max-width: 99999px) and (min-width: 960px){
.h1plus {font-size:38px!important;}
	}
@media all and (max-width: 959px) {	
.h1plus {font-size:34px!important;}
}

hr {border-top: 7px dotted #49008e; }

.smallprint {font-size: 11px;
color: gray;
line-height: 18px;
margin-top: 40px;}


video.video1 {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
	   z-index: -1;
	opacity: 0.2;
	background: rgba(51, 170, 51, .1)
}


video.video2 {
top: 0;
left: 0;
/* max-width: 280px; */
height: 177px;
object-fit: cover;
width: 288px;
}
		




@media all and (max-width: 99999px) and (min-width: 960px){
.bgcpurple {background-color: #49008e;
padding-bottom: 6px;
box-shadow: 0px 0px 20px 0px #000;
/* top: -23px; */
position: relative;
margin-top: -26px;}
}

@media all and (max-width: 959px) {	
.bgcpurple {background-color: #49008e; padding-bottom: 39px; box-shadow: 0px 0px 20px 0px #000;}
	}

@media all and (max-width: 99999px) and (min-width: 960px){	.logo   {  top: 37px;
position: relative;
float: left;
/* margin-left: 10px; */
left: 12px;	}	}
@media all and (max-width: 959px) {	.logo   {  top: 12px;    position: relative; float:left;	left: 12px;}	}


.logofooter   { max-width: 119px;
position: relative;
top: -40px;}	


#page-nav {
  width: 100%;
 
  /* If you want the navigation bar to stick on top
  position: sticky;
  top: 0;
  */
}

/* Hide Hamburger */
#page-nav label, #hamburger {
  display: none;
}

/* Menu Items */
	@media screen and (max-width: 959px){
#page-nav ul {
  list-style-type: none;
  margin: 14px 0 30px 0;
  padding: 0; 
font-size: 28px;


}}
	@media screen and (max-width: 959px){
#page-nav ul li {
  display: inline-block;
  padding: 10px 0 0px 0;
  box-sizing: border-box;
}}
#page-nav ul li a {
  color: #fff;
  text-decoration: none;
	cursor: pointer;
}

/* [ON SMALL SCREENS] */
@media screen and (max-width: 959px){
  /* Show Hamburger */
  #page-nav label {
    display: block;
 cursor: pointer;
   text-align: right;

   font-size: 40px;
    margin: 0px 0 0px 0px;
	      top: 16px;
	  padding-top:-63px;
	  right: 10px;
    position: relative;
  }

  /* Break down menu items into vertical */
  #page-nav ul li {
    display: block;
  }
  #page-nav ul li {
    /*border-top: 1px solid #333;*/
  }

  /* Toggle show/hide menu on checkbox click */
  #page-nav ul {
    display: none;
  }
  #page-nav input:checked ~ ul {
    display: block;
	  text-align: center;
margin-top: 40px;
margin-bottom: -20px;
  }
	
}

.mainmenu { }
a.mainmenunew:link, a.mainmenunew:visited { color: #fff!important; border:5px solid #49008e; background-color: transparent}
a.mainmenunew, a.mainmenunew:hover {color: #fce700!important;
border-bottom: 5px solid #49008e;
padding: 0px 10px 0px 14px;
line-height: 26px;
cursor: pointer;}

@media all and (max-width: 99999px) and (min-width: 960px){	
a.mainmenunewactive:link, a.mainmenunewactive:visited {color: #fce700!important; border-bottom: 5px solid; padding: 0px 0px 0px 0px;line-height: 26px;
margin-right:15px; margin-left: 19px;
display: inline-block;}
	}

@media all and (max-width: 959px) {	
a.mainmenunewactive:link, a.mainmenunewactive:visited {color: #fce700!important; border-bottom: 5px solid; padding: 0px 0px 0px 0px;line-height: 26px;

display: inline-block;}
	}




.navmain {   position: relative;
font-size: 18px;
font-weight: 900;
margin-bottom: 1px;
padding-inline-start: 0px;
text-transform: uppercase;
text-align: right;
display: block;
right: 10px;
padding-top: 40px;}
.navmain ul { list-style-type:none; margin:0; padding:0;  }
.navmain li {     display: inline-block;    margin:0 2px 12px 2px;}
.navmain a { padding: 4px 10px 4px 14px;  text-decoration:none; -webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;  }


@media all and (max-width: 99999px) and (min-width: 960px){	
#live .clusterhero {min-height:280px;color:#49008e;padding:10px 10px 80px 10px; background: rgba(251, 251, 251, 0.8);}
	#live .clusterherolite {min-height:280px;color:#49008e;padding:30px 10px 10px 10px; background: rgba(251, 251, 251, 0.8);}


	}

@media all and (max-width: 959px) {	
#live .clusterhero {min-height:200px;color:#49008e;padding:0px 10px 24px 10px; background: rgba(251, 251, 251, 0.8);}
	#live .clusterherolite {min-height:200px;color:#49008e;padding:0px 10px 24px 10px; background: rgba(251, 251, 251, 0.8);}

	}


.photocluster {margin: 10px;}
.caption {display: block;
margin-top: -10px;
margin-bottom: 10px;
font-size: 14px;
/* position: relative; */
width: 100px;
/* text-align: center; */
/* position: relative; */
margin: -10px auto 10px auto;}
/* CLUSTER HERP*/

.clusterhero a:link, .clusterhero a:visited   {  color: #49008e;text-decoration: none;}
.clusterhero a:hover {color: #49008e; text-decoration: underline;}

.clusterhero .photo {border: 4px solid #49008e; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
.clusterhero .videostyle {border: 4px solid #49008e; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }





@media all and (max-width: 99999px) and (min-width: 960px){	
#live .clusterpurple { background-color: #49008e; color:#fce700; padding:10px 10px 20px 10px;}
	#live .clusteryellow { background-color: #fce700; color:#49008e;padding:10px 10px 20px 10px;}
	#live .clusterwhite { background-color: #fff; color:#49008e;padding:30px 10px 20px 10px;}

}

@media all and (max-width: 959px) {	
#live .clusterpurple { background-color: #49008e; color:#fce700; padding:40px 10px 20px 10px;}
	#live .clusteryellow { background-color: #fce700; color:#49008e;padding:40px 10px 20px 10px;}
	#live .clusterwhite { background-color: #fff; color:#49008e;padding:40px 10px 20px 10px;}

	
	#live .clusterhome { padding:10px 10px 20px 10px;}


	}


/* CLUSTER PURPLE*/

.clusterpurple .photo {border: 4px solid #ffea00; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
.clusterpurple .videostyle {border: 4px solid #ffea00; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }

#bgvidcolor{ background-color: #fff;}

#live .clusterpurple h1 {
	text-transform: capitalize; font-size: 30px;
font-weight: 900;
line-height: 28px;
color: #fce700;
line-height: 40px;
position: relative;
padding: 10px 10px 0px 10px;
	top: 14px;
}	
#live .clusterpurple h2 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #fce700;
line-height: 32px;
position: relative;
padding: 18px 10px 10px 10px;
}	

/* CLUSTER YELLOW*/

.clusteryellow a:link, .clusteryellow a:visited   {  color: #49008e;text-decoration: none;}
.clusteryellow a:hover {color: #49008e; text-decoration: underline;}

.clusteryellow .photo {border: 4px solid #49008e; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
.clusteryellow .videostyle {border: 4px solid #49008e; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }



#live .clusteryellow h1 {
	text-transform: capitalize; font-size: 30px;
font-weight: 900;
line-height: 28px;
color: #49008e;
line-height: 40px;
position: relative;
padding: 10px 10px 0px 10px;
	top: 14px;
}	
#live .clusteryellow h2 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #49008e;
line-height: 32px;
position: relative;
padding: 18px 10px 10px 10px;
}	


/* CLUSTER WHITE*/
.clusterwhite .photo {border: 4px solid #49008e; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
.clusterwhite .labelsmall {top: -8px;
position: relative;
	font-size: 16px;
	color: #49008e;
	}

.clusterwhite .label{
margin-bottom: -15px;
font-weight: bold;
display: block;
color: #49008e;
}



#live .clusterwhite h1 {
font-size: 30px;
font-weight: 900;
line-height: 28px;
color: #49008e;
line-height: 50px;
position: relative;
padding: 10px 10px 0px 10px;
	top: 14px;
}	
#live .clusterwhite h2 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #49008e;
line-height: 32px;
position: relative;
padding: 18px 10px 10px 10px;
}	


#live .clusterwhitetestimonial { background-color: #fff; color:#49008e;padding:10px 10px 20px 10px;}

#live .clusterwhitetestimonial h1 {

 font-size: 24px;
font-weight: 900;
	font-style: italic;
line-height: 28px;
color: #49008e;
line-height: 34px;
position: relative;
padding: 10px 10px 0px 10px;
	top: 14px;
}	
#live .clusterwhitetestimonial h2 {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #49008e;
line-height: 32px;
position: relative;
padding: 18px 10px 10px 10px;
}	




@media all and (max-width: 99999px) and (min-width: 960px){	
#live .clusterhero h1 {
font-size: 40px;
font-weight: 900;
line-height: 28px;
color: #49008e;
line-height: 42px;

position: relative;
padding:60px 10px 10px 10px;
}	

	#live .clusterhero h2 {
font-size: 24px;
font-weight: 400;
color: #49008e;
line-height: 32px;
position: relative;
padding: 0px 10px 10px 10px;
		max-width: 1000px;
margin: auto;
}	
	
}

@media all and (max-width: 959px) {	
	#live .clusterhero h1 {
		 font-size: 34px;
font-weight: 900;
line-height: 28px;
color: #49008e;
line-height: 42px;
top: 40px;
position: relative;
padding:0px 10px 30px 10px;
}
	
		#live .clusterhero h2 {
font-size: 24px;
font-weight: 400;
line-height: 28px;
color: #49008e;
line-height: 32px;
position: relative;
padding: 18px 10px 10px 10px;
}	
	
}



#holding h1{ font-size: 20px;
font-weight: 900;
line-height: 28px;
	margin-bottom: 14px;
}

#live h1{font-size: 28px;
font-weight: 900;
line-height: 28px;
color: #49008e;
}


sup {font-size: 20px;
position: relative;
top: 8px;
line-height: 0px;}





@media all and (max-width: 99999px) and (min-width: 960px){	
.panel { padding: 17px;
margin-right: 10px;
display: inline-block;
border-radius: 0px;
margin-bottom: 0px; /*was 0px;*/
margin-top: 20px;
vertical-align: top;
}

.panelsleft { padding: 0px 17px 0px 17px;
margin-right: 10px;
display: inline-block;
border-radius: 0px;
margin-bottom: 0px; /*was 26px;*/
/* margin-top: 20px; */
vertical-align: top;
/*float: left;*/
max-width: 500px;
	min-height: 250px;
}

.panelsright { padding: 0px 17px 0px 17px;
margin-right: 10px;
display: inline-block;
border-radius: 0px;
margin-bottom: 0px; /*was 26px;*/
/* margin-top: 20px; */
vertical-align: top;
float: right;
max-width: 510px;
}

}



@media all and (max-width: 959px) {	
.panel { padding: 0;
display: inline-block;
border-radius: 0px;
margin-bottom: 6px;

vertical-align: top;

}}


@media all and (max-width: 99999px) and (min-width: 960px){	
	
	.panelpad {margin-top: -16px;}
	
.panels {max-width: 570px;
min-width: 320px; padding: 0px 10px;

display: inline-block;
border-radius: 0px;
margin-bottom: 6px;
vertical-align: top;
text-align: left;
}
	
.panels ul {top: 0px;
		position: relative;line-height: 28px;left: -20px;}

}


@media all and (max-width: 959px) {	
.panels {max-width: 550px; padding: 0px 10px;

display: inline-block;
border-radius: 0px;
margin-bottom: 0px;
vertical-align: top;
	margin-top: 20px;
	
	
}
	
	
	
	.panels ul {top: 0px;
		position: relative;line-height: 28px;}
	
}





/* FORM FIELDS */
.label{
margin-bottom: -15px;
font-weight: bold;
display: block;
color: #fce700;
}

.label:focus{
    color: #fce700;}

.labelsmall {top: -8px;
position: relative;
	font-size: 16px;
	color: #fff;
	}

 .field-input{
border: 6px solid #fce700;
/*-webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; */
font-size: 20px;
	font-weight: normal;
	font-weight: normal;
padding: 8px 12px;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
position: relative;
color: #49008e;
margin-bottom: 10px;
background-color: #fff;
width:88%;
max-width: 335px;
	    /*-webkit-transition: border-color .3s ease-in-out;*/
    /* transition: border-color .3s ease-in-out; */
    min-height: 32px;
 outline-width: 0px;
	 outline-color: #fce700;
	 outline-style: solid;

}


.field-input-select{
border: 6px solid #fce700;
/*-webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; */
font-size: 20px;
	font-weight: normal;
padding: 8px 12px;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
position: relative;
color: #49008e;
margin-bottom: 10px;
background-color: #fff;
width:88%;
max-width: 370px;
	    /*-webkit-transition: border-color .3s ease-in-out;*/
    /* transition: border-color .3s ease-in-out; */
    min-height: 32px;
 outline-width: 0px;
	 outline-color: #fce700;
	 outline-style: solid;

}


	
.field-comments{
border: 6px solid #fce700;
	color: #49008e;
   /* -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;*/
font-size: 20px;
	font-weight: normal;
    padding: 8px 12px;
    width: 88%;
    max-width: 335px;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	background-color: #fff;
	margin-bottom: 0;
	    margin-left: 4px;

    position: relative;
	 outline-width: 0px;
	 outline-color: #fce700;
	outline-style: solid;
	}


/*BUTTONS*/
#holding .calltoaction {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px; 
	color: #49008e!important; 
	background-color: #fce700; 
	border:1px solid #fce700; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;   
	text-transform: capitalize; /*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
	margin:20px 0 0 0px; 
	cursor: pointer; 
min-width: 170px;
display: inline-block;
	text-align: center;
}

#holding .calltoaction:hover, #holding .calltoaction:active {
	background-color: #fff; 
	border:1px solid #fff; 
	color: #49008e; 
	}

#holding .calltoactionhollow {
	background-color: transparent; 
	border:1px solid #fce700; 
	color: #fce700!important;
	cursor: pointer; 
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px;
	margin:20px 0 0 0px; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;  
	text-transform: capitalize; min-width: 170px;
display: inline-block;
	text-align: center;
	; 
	/*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
}
#holding .calltoactionhollow:hover, #holding .calltoactionhollow:active {
	color: #fff!important; 
	border:1px solid #fff; 
	background-color: transparent; 
}

/*BUTTONS*/
#live .clusterhero .calltoaction {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px; 
	color: #fce700!important; 
	background-color: #49008e; 
	border:1px solid #49008e; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;   
	text-transform: capitalize; /*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
	margin:20px 0 0 0px; 
	cursor: pointer; 
min-width: 170px;
display: inline-block;
	text-align: center;
}

#live .clusterhero .calltoaction:hover, #live .clusterhero .calltoaction:active {
	background-color: #fff; 
	border:1px solid #fff; 
	color: #49008e!important; 
	}

#live .clusterhero .calltoactionhollow {
	background-color: transparent; 
	border:1px solid #49008e; 
	color: #49008e!important;
	cursor: pointer; 
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px;
	margin:20px 0 0 0px; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;  
	text-transform: capitalize; min-width: 170px;
display: inline-block;
	text-align: center;
	; 
	/*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
}
#live .clusterhero .calltoactionhollow:hover, #live .clusterhero .calltoactionhollow:active {
	color: #fff!important; 
	border:1px solid #fff; 
	background-color: transparent; 
}


/*BUTTONS*/
#live .clusterpurple .calltoaction {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px; 
	color: #49008e!important; 
	background-color: #fce700; 
	border:1px solid #fce700; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;   
	text-transform: capitalize; /*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
	margin:20px 0 0 0px; 
	cursor: pointer; 
min-width: 170px;
display: inline-block;
}

#live .clusterpurple .calltoaction:hover, #live .clusterpurple .calltoaction:active {
	background-color: #fff; 
	border:1px solid #fff; 
	color: #49008e; 
	}

#live .clusterpurple .calltoactionhollow {
	background-color: transparent; 
	border:1px solid #fce700; 
	color: #fce700!important;
	cursor: pointer; 
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px;
	margin:20px 0 0 0px; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;  
	text-transform: capitalize; min-width: 170px;
display: inline-block;
	text-align: center;
	; 
	/*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
}
#live .clusterpurple .calltoactionhollow:hover, #live .clusterpurple .calltoactionhollow:active {
	color: #fff!important; 
	border:1px solid #fff; 
	background-color: transparent; 
}

/*BUTTONS*/
#live .clusteryellow .calltoaction {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px; 
	color: #fce700!important; 
	background-color: #49008e; 
	border:1px solid #49008e; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;   
	text-transform: capitalize; /*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
	margin:20px 0 0 0px; 
	cursor: pointer; 
min-width: 170px;
display: inline-block;
	text-align: center;
}

#live .clusteryellow .calltoaction:hover, #live .clusteryellow .calltoaction:active {
	background-color: #fff; 
	border:1px solid #fff; 
	color: #49008e!important; 
	}

#live .clusteryellow .calltoactionhollow {
	background-color: transparent; 
	border:1px solid #49008e; 
	color: #49008e!important;
	cursor: pointer; 
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px;
	margin:20px 0 0 0px; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;  
	text-transform: capitalize; min-width: 170px;
display: inline-block;
	text-align: center;
	; 
	/*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
}
#live .clusteryellow .calltoactionhollow:hover, #live .clusteryellow .calltoactionhollow:active {
	color: #fff!important; 
	border:1px solid #fff; 
	background-color: transparent; 
}



/*BUTTONS*/
#live .clusterwhite .calltoaction {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px; 
	color: #fce700!important; 
	background-color: #49008e; 
	border:1px solid #49008e; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;   
	text-transform: capitalize; /*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
	margin:20px 0 0 0px; 
	cursor: pointer; 
min-width: 170px;
display: inline-block;
	text-align: center;
}

#live .clusterwhite .calltoaction:hover, #live .clusterwhite .calltoaction:active {
	background-color: #fce700; 
	border:1px solid #fce700; 
	color: #49008e!important; 
	}

#live .clusterwhite .calltoactionhollow {
	background-color: transparent; 
	border:1px solid #49008e; 
	color: #49008e!important;
	cursor: pointer; 
font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-size: 20px; 
	font-weight:bold; 
	line-height: 27px;
	margin:20px 0 0 0px; 
	padding: 9px 25px 9px 25px; 
	text-decoration:none;  
	text-transform: capitalize; min-width: 170px;
display: inline-block;
	; 
	/*-webkit-border-radius: 80px;  -moz-border-radius: 80px; border-radius: 80px; */
}
#live .clusterwhite .calltoactionhollow:hover, #live .clusterwhite .calltoactionhollow:active {
	color: #fff!important; 
	border:1px solid #fff; 
	background-color: transparent; 
}




#footer {	background-color: #fff; color: #49008e!important; padding: 20px 0 0 0;}

#footer a:link, a:visited   {  color: #49008e; text-decoration: underline;}
#footer a:hover {color: #49008e;text-decoration: none;}
.footer { margin: auto; background-color: #fce700;}
.footercontainer {max-width: 1000px; margin: auto; margin-top:100px; background-color: #fce700;padding: 10px;}
/* Slider */
/* Slideshow container */
#slide-container {
 position: relative;
 max-width: 800px; /* responsiveness */
}
/* First element to be in block mode for responsiveness */
#slide-first-element {
 display: block; /* to get the dimensions set */
 width: 100%;
 height: auto;
}
/* Other element to be in absolute position */
#slide-element-2,
#slide-element-3 {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
/* Style images */
.slide-image {
 width: 100%;
 border-radius: 20px;
}
/* Style text */
.slide-text {
 position: absolute;
 bottom: 10px;
 background-color: #0042b1bb;
 color: white;
 width: 100%;
 text-align: center;
 font-size: 1.5rem;
}
/* Animation settings for individual elements */
/* For more images the animations have to be adjusted */
#slide-first-element {
 animation: fade-1 10s infinite;
 -webkit-animation: fade-1 10s infinite;
}
#slide-element-2 {
 animation: fade-2 10s infinite;
 -webkit-animation: fade-2 10s infinite;
}
#slide-element-3 {
 animation: fade-3 10s infinite;
 -webkit-animation: fade-3 10s infinite;
}
/* and more if there are more slides to show */
@keyframes fade-1 {
 0% { opacity: 1; }
 33% { opacity: 0; }
 66% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes fade-2 {
 0% { opacity: 0; }
 33% { opacity: 1; }
 66% { opacity: 0; }
 100% { opacity: 0; }
}
@keyframes fade-3 {
 0% { opacity: 0; }
 33% { opacity: 0; }
 66% { opacity: 1; }
 100% { opacity: 0; }
}
/* example for a 4th slide */
@keyframes fade-4 {
 0% { opacity: 0; }
 25% { opacity: 0; }
 50% { opacity: 0; }
 75% { opacity: 1; }
 100% { opacity: 0; }
}