@charset "utf-8";
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
/* Make HTML5 layout elements block elements for older browsers */
header, nav, sidebar, content, aside, article, footer, section {
  display: block;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	padding: 0;
	color: #000;
	margin: 10 auto; /* center the layout */
	background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;	 /* remove the top margin */
	padding-right: 15px;
	padding-left: 15px;
}
a img { /* remove border around an image when it is a link */
	border: none;
}
.center {
	text-align: center;
}
.clear {
	clear: both;
}
.clear-p {
	clear: both;
	display: none;
}
.bold {
	font-weight: 700; 
}
#wrapper {
	width: 100%;
	background: #FFFFFF;
	margin: 0 auto; /* center the layout */
}
/* ---------------------------------  Links  ------------------------------------------- */
a:link {
	color: #eea03c;
	text-decoration: underline;
}
a:visited {
	color: #eea03c;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}

/***********************************************************   HEADER   ****************************************************/
.header-bar {
	width: 98%;
	min-height: 40px;
	margin: 0 auto;
	display: block;
	background-color: #006bb7;
}
.header-bar .text {
	font-weight: 600;
	font-size: 20px;
	color: #ffffff; 
	text-align: center;
	padding-top: 5px;
}
header {
	text-align: center;
	width: 98%;
	margin: 0 auto;
	padding-bottom: 10px;
}
.logo {
	float: left;
	width: 39%;
	text-align: left;
	padding-top: 30px;
}
.logo img {
	width: 100%;
	max-width: 400px;	
}
.currentPresident {
	float: left;
	width: 33%;
	text-align: center;
	padding-top: 30px;
	font-size: 12px;
	font-weight: 600;	
}
.currentPresident img {
	width: 100%;
	max-width: 145px;
}
header .theme {
	float: left;
	text-align: right;
	width: 27%;
	padding-top: 20px;
}
header .theme img {
	width: 100%;
	max-width: 170px;	
}
.nav-bar {
	width: 95%;
	text-align: center;
	padding: 25px 0px 0px 10px;
	margin: 0 auto;
}
.nav-bar a {
	text-decoration: none;
}
.link-home {
	float: left;
	width: 50px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-calendar {
	float: left;
	width: 85px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-membership {
	float: left;
	width: 105px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-history {
	float: left;
	width: 75px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-foundation {
	float: left;
	width: 95px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-service {
	float: left;
	width: 70px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-ri-district {
	float: left;
	width: 125px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
.link-ri {
	float: left;
	width: 175px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	padding-right: 16px;
}
/* -------------------------------------- FOOTER ----------------------------------- */
footer {
	clear: both;
	width: 100%;
	height: 300px;
	padding: 10px 0px 10px 0px;
	background: #006bb7;
	margin: 0 auto;
	color: #ffffff;
}
footer .footerBox {
	width: 100&;
	margin: 0 auto;
}
footer .footerBox a:link {
	color: #fff;
	text-decoration: underline;
}
footer .footerBox a:visited {
	color: #fff;
	text-decoration: underline;
}
footer .footerBox a:hover {
	color: #fff;
	text-decoration: underline;
}
footer .footerBox a:active {
	color: #fff;
	text-decoration: underline;
}
footer .footerBox .contact {
	display: block;
	float: left;
	color: #ffffff;
	width: 30%;
}
footer .footerBox .titles {
	font-weight: 600;
}
footer .footerBox .contact .social {
	border: solid 5px #ffffff;
}
footer .footerBox .joinUs {
	display: block;
	float: left;
	color: #ffffff;
	width: 35%;
	text-align: center;
	padding: 20px 10px 10px 10px;
	border: 1px solid #ffffff;
}
footer .footerBox .joinUs .t400 {
	font-weight: 600;
}
footer .footerBox .joinUs .t600 {
	font-weight: 700;
}
footer .footerBox .riResources {
	display: block;
	float: right;
	color: #ffffff;
	width: 25%;
}
footer .footerBox .riResources ul {
	margin-top: -15px;
  	padding: 0px 0px 0px 5px;
}
footer .footerBox .riResources ul li {
	list-style-type: none;
}
footer .footerBox .copy {
	clear: both;
	text-align: center;
	font-size: 12px;
	font-weight: 300;
	padding-top: 20px;
	color: #ffffff;
}

/***********************************************************   PAGE LAYOUT   ****************************************************/
article {
	padding: 30px 0px 10px 0px;
	width: 100%;
	min-height: 640px;
	margin: 0 auto;
}
sidebar {
	width: 80%;
	float: none;
	padding-top: 15px;
	text-align: center;
}
sidebar .sideBox {
	display: block;
	text-align: center;
	width: 95%;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #b1d4ee;
	box-shadow: -1px 2px 2px #CCC;
	margin-bottom: 25px;
}
sidebar .sideBox .sideTopic {
	width: 100%;
	min-height: 30px;
	font-weight: 600;
	font-size: 18px;
	color: #17458f;
	border-width: 0px 0px 2px 0px;
	background-color: #b1d4ee;
	margin: 0 auto;
	padding-top: 3px;
}
sidebar .sideBox .sideContent {
	width: 100%;
	padding: 5px;
}
sidebar .sideBox .sideContent .makeup {
	font-weight: 600;
	font-size: 13px;
}
sidebar .sideBox .sideContent .attend {
	font-weight: 700;
	font-size: 13px;
}
sidebar .sideBox .sideContent .list {
	text-align: left;
}
sidebar .sideBox .sideContent .rip {
	text-align: center;
}
sidebar .sideBox .sideContent .rip img {
	width: 100%;
	max-width: 150px;
}
sidebar .sideBox .sideContent .dg {
	text-align: center;
}
sidebar .sideBox .sideContent .dg img {
	width: 100%;
	max-width: 150px;
}
sidebar .sideBoxCigar {
	display: none;
}
sidebar .sideBoxCigar .sideTopicCigar {
	width: 100%;
	min-height: 30px;
	font-weight: 400;
	font-size: 18px;
	color: #333;
	border-width: 0px 0px 2px 0px;
	background-color: #abcff8;
	margin: 0 auto;
	padding-top: 3px;
}
sidebar .sideBoxCigar .sideContentCigar {
	display: none;
}
sidebar .sideBoxCigar .sideContentCigar .list {
	text-align: left;
}
.sideBoxCigarP {
	display: block;
	text-align: center;
	width: 95%;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #b1d4ee;
	box-shadow: -1px 2px 2px #CCC;
	margin-bottom: 25px;
}
.sideBoxCigarP .sideTopicCigar {
	width: 100%;
	min-height: 30px;
	font-weight: 600;
	font-size: 18px;
	color: #333;
	border-width: 0px 0px 2px 0px;
	background-color: #b1d4ee;
	margin: 0 auto;
	padding-top: 3px;
}
.sideBoxCigarP .sideContentCigar {
	width: 100%;
	padding: 5px;
}
.sideBoxCigarP .sideContentCigar .list {
	text-align: left;
}
sidebar .sideBox .sideContent .partners {  /* Cigar Dinner */
	text-align: center;
}
sidebar .sideBox .sideContent .partners img {  /* Cigar Dinner */
	width: 100%;
	max-width: 200px;
}
sidebar .sideBox .sideContent .sponsorLevels {  /* Cigar Dinner */
	text-align: left;
	font-size: 14px;
	padding-top: 10px;
}
sidebar .sideBox .sideContent .sponsorList {  /* Cigar Dinner */
	text-align: left;
	font-size: 12px;
	padding-left: 20px;
	padding-bottom: 10px;
}
content {
	width: 90%;
	float: none;
	min-height: 640px;
	text-align: left;
}
content .contentBox {
	display: block;
	text-align: left;
	width: 100%;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #b1d4ee;
	margin-bottom: 25px;
}
content .contentBox .contentTopic {
	width: 99.7%;
	min-height: 30px;
	font-weight: 600;
	font-size: 20px;
	color: #333;
	border-width: 0px 0px 2px 0px;
	background-color: #b1d4ee;
	margin: 0 auto;
	text-align: left;
	padding: 3px 0px 0px 3px;
}
content .contentBox .contentContent {
	width: 97%;
	padding: 0px 10px 3px 5px;
	text-align: left;
}
content .contentBoxCD {  /* Cigar Dinner */
	display: block;
	text-align: center;
	width: 100%;
	border-width: 0px;
	/*border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #f2cfa3; */
	margin-bottom: 25px;
}
content .contentBoxCD .contentContentCD {  /* Cigar Dinner */
	width: 99%;
	padding: 3px 0px 3px 0px;
	margin: 0 auto;
}
content .contentBoxCD .contentContentCD img {  /* Cigar Dinner */
	width: 100%;
	max-width: 650px;
}
content .contentBoxLB {  /* Liberty Bank Thanksgiving Drive */
	display: block;
	text-align: center;
	width: 100%;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #1a437a;
	margin-top: 0px;
	margin-bottom: 25px;
}
content .contentBoxLB .contentContentLB {  /* Liberty Bank Thanksgiving Drive */
	width: 99%;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0 auto;
}
content .contentBoxLB .contentContentLB img {  /* Liberty Bank Thanksgiving Drive */
	width: 100%;
	max-width: 650px;
}
content .contentBoxLB .contentContentLB .LBmessage {  /* Liberty Bank Thanksgiving Drive */
	width: 99%;
	padding: 1px 3px 1px 3px;
	margin: 0 auto;
	text-align: left;
	font-weight: 600;
}
content .contentBox .contentContent ul li {
	margin-bottom: 15px;
}
.sectionTitle {
	color: #006ab6;
	font-weight: 700;
	font-size: 16px;
}
.paraHead {     /*****  Membership page ****/
	color: #006ab6;
	font-weight: 600;
}

/***********************************************************   INDEX   ****************************************************/


/***********************************************************   MAKE-UP   **************************************************/


/***********************************************************   PRESIDENTS   ***********************************************/

content .contentBox .contentContent .presidents {
	float: left;
	width: 49%;
	text-align: left;
	font-size: 13px;
	padding-top: 15px;
}
content .contentBox .contentContent .presidentsRight {
	float: right;
	width: 49%;
	text-align: left;
	font-size: 13px;
	padding-top: 15px;
}
.govList {
	width: 90%;
	font-size: 14px;
	margin: 0 auto;
	padding-top: 30px;
}

/***********************************************************   MEMBERSHIP   ****************************************************/
.self {
	width: 90%;
}
.self li {
	margin-bottom: 10px;
}
.rimission {
	float: left;
	width: 60%;
}
.ripromo {
	float: right;
	width: 40%;
	text-align: center;
}
.fourWay {
	width: 95%;
	font-size: 13px;
	text-align: left
}
.fourWay li {
	margin-bottom: 10px;
}
/***********************************************************   HISTORY   ****************************************************/

.video {
	text-align: center;
	width: 560px;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/***********************************************************   FOUNDATION   ****************************************************/

.programs {
	width: 95%;
	text-align: left;
}
.programs li {
	margin-bottom: 10px;
}
.youth {
	width: 98%;
}
.youth li {
	margin-bottom: 15px;
}

/***********************************************************   SERVICE   ****************************************************/

.donations {
	width: 98%;
	padding-left: 20px;
}
.donations ul { 
	padding: 0;
	margin: 20px;
}
.donations li {
	margin-bottom: 10px;
	list-style: none;
}
.donationPhotos {
	margin-top: 10px;
	width: 98%
}
.donationPhotos .imgLeft {
	float: left;
	width: 48%;
	margin-bottom: 15px;
}
.donationPhotos .imgLeft img {	
	width: 100%;
	max-width: 300px;
}
.donationPhotos .imgRight {
	float: right;
	width: 48%;
	margin-bottom: 15px;
}
.donationPhotos .imgRight img {	
	width: 100%;
	max-width: 300px;
}
.subText {
	font-size: 12px;
}
.indented {
	margin-left: 20px;
}

/****************************************   Meeting (Time, Location and Directions)   *****************************************/
.meet {
	width: 95%;
}
.meet li {
	margin-bottom: 20px;
	list-style: none;
}
.meetDir {
	width: 95%;
}

/************************************************   C A L E N D A R   ******************************************************/

.calendar {
	width: 97%;
}
.calendar .space {
	height: 25px;
}
.calendar .date {
	width: 15%;
	float: left;
	text-align: center;
	text-weight: 600;
	padding: 0px 10px 15px 0px;
}
.calendar .event {
	width: 80%;
	float: left;
	text-align: left;
	padding: 0px 10px 15px 0px;
}
.calendar .month {
	width: 100%;
	font-weight: 700;
	color: #006bb7;
	text-align: center;
	padding: 20px 0px 10px 0px;
}
.calendar .month .topic {
	font-weight: 400;
	text-align: center;
	color: #687d90;
}
.calendar .detail {
	display: block;
	width: 90%;
	margin: 0 auto;
	border: 1px solid #687d90;
	box-shadow: 2px 5px 3px 3px #888888;
	padding: 0px 0px 20px 0px;
}

/*  ----------------------------------------------------  CIGAR DINNER  -------------------------  */

.dinnerInfo {
	width: 95%;
	margin: 0 auto;
	padding-top: 30px;
	text-align: center;
}
.dinnerInfo .cigarTitle {
	font-weight: 700;
	font-size: 22px;
	color: #1d11b2;
	border-width: 0px 0px 2px 0px;
	margin: 0 auto;
	padding: 3px 0px 0px 3px;
}
.cigar {
	width: 95%;
	margin: 0 auto;
	font-size: 18px;
}
.sponsors {
	width: 100%;
	margin-top: 20px;
}
.sponsors .spLevels {
	width: 75%;
	margin: 0 auto;
	padding-bottom: 10px;
}
.sponsors .spLevels .notes {
	font-size: 14px;
	margin: 0px;
	padding-left: 20px;
}
.cigarTickets {
	width: 75%;
	margin: 0 auto;
}
.dinnerMenu {
	width: 95%;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
}
.boxTitle {
	color: #a74d14;
	font-weight: 700;
	text-align: center;
}

/*  ----------------------------------------------------  PONTE DINNER  -------------------------  */

/* ------ Banner on Index ------- */
content .contentBoxPonte {
	display: none;
	text-align: center;
	width: 100%;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #199613;
	margin-bottom: 25px;
}
content .contentBoxPonte .contentContentPonte {
	width: 99%;
	padding: 3px 3px 3px 3px;
	margin: 0 auto;
}
content .contentBoxPonte .contentContentPonte img {
	width: 100%;
	max-width: 650px;
}
/* ------ End Banner on Index ------- */

content .contentBox .ponteTopic {
	width: 99.7%;
	min-height: 30px;
	font-weight: 700;
	font-size: 20px;
	color: #17458f;
	border-width: 0px 0px 2px 0px;
	background-color: #f2cfa3;
	margin: 0 auto;
	text-align: center;
	padding: 3px 0px 0px 3px;
}
.ponteInfo {
	width: 95%;
	margin: 0 auto;
	padding-top: 30px;
	text-align: center;
	font-size: 18px;
}
.ponte {
	width: 95%;
	margin: 0 auto;
	font-size: 18px;
}
sidebar .sideBoxPonte {
	display: block;
	width: 95%;
	border-width: 0px 1px 1px 1px;
	border-style: solid;
	border-color: #f2cfa3;
	box-shadow: -1px 2px 2px #CCC;
	margin-bottom: 25px;
}
.sideBoxPonteP {
	display: none;
}
sidebar .sideBoxPonte .sideTopicPonte {
	width: 100%;
	min-height: 30px;
	font-weight: 700;
	font-size: 18px;
	color: #333;
	border-width: 0px 0px 2px 0px;
	background-color: #f2cfa3;
	margin: 0 auto;
	padding-top: 3px;
	text-align: center;
}
sidebar .sideBoxPonte .sideContentPonte {
	width: 95%;
	padding: 10px;
	text-align: center;
}
/*  ----------------------------------------------------  Day of Service (Dos)  -------------------------  */
content .contentBoxDos {
	display: block;
	text-align: center;
	width: 100%;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #f2cfa3;
	margin-bottom: 25px;
}
content .contentBoxDos24 {
	display: block;
	text-align: center;
	width: 100%;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #b1d4ee;
	margin-bottom: 25px;
}
content .contentBoxDos .contentTopicDos {
	width: 99.7%;
	min-height: 30px;
	font-weight: 600;
	font-size: 20px;
	color: #17458f;
	border-width: 0px 0px 2px 0px;
	background-color: #f2cfa3;
	margin: 0 auto;
	text-align: left;
	padding: 3px 0px 0px 3px;
}
content .contentBoxDos24 .contentTopicDos24 {
	width: 99.7%;
	min-height: 30px;
	font-weight: 600;
	font-size: 20px;
	color: #000000;
	border-width: 0px 0px 2px 0px;
	background-color: #b1d4ee;
	margin: 0 auto;
	text-align: left;
	padding: 3px 0px 0px 3px;
}
content .contentBoxDos .contentContentDos {
	width: 97%;
	padding: 0px 0px 3px 5px;
	text-align: left;
}
content .contentBoxDos24 .contentContentDos24 {
	width: 97%;
	padding: 0px 0px 3px 5px;
	text-align: left;
}
content .contentBoxDos .contentContentDos .DosPhotos {
	float: left;
	width: 45%;
	padding-top: 10px;
	margin-left: 20px;
}
content .contentBoxDos24 .contentContentDos24 .DosPhotos24 {
	width: 99%;
	padding-top: 10px;
	margin-left: 5px;
}
content .contentBoxDos .contentContentDos .DosPhotos img {
	width: 98%;
	margin: 0 auto;
	max-width: 600px;
	padding: 0px;
}
content .contentBoxDos24 .contentContentDos24 .DosPhotos24 img {
	width: 99%;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0px;
}


/* --------------------------------------------------  SLIDESHOW - STANDARD  ----------------------------- */
.i-slideshow {
	display: block;
	width: 100%;
	height: 344px;
	margin: 0 auto;
	text-align: center;
	padding-top: 2px;
}
#indexSlide {
	background-color: #ffffff;
	position: relative;	
	height: 292px;
    width: 850px;
}

#mask {
   overflow: hidden;
   height: 344px;
}

/* IMAGE LIST */

#indexSlide ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#indexSlide li {
   width: 850px;  /* Width Image */
   height: 292px; /* Height Image */
   position: absolute;
   right: -850px; /* Original Position - Outside of the Slider */
   list-style: none;
}

#indexSlide li.firstanimation {
   animation: cycle 30s linear infinite;
}

#indexSlide li.secondanimation {
   animation: cycletwo 30s linear infinite;
}

#indexSlide li.thirdanimation {
   animation: cyclethree 30s linear infinite;
}

#indexSlide li.fourthanimation {
   animation: cyclefour 30s linear infinite;
}

#indexSlide li.fifthanimation {
   animation: cyclefive 30s linear infinite;
}
#indexSlide li.sixthanimation {
   animation: cyclesix 30s linear infinite;
}

/* ANIMATION */

@keyframes cycle {
   0%  { right: 0px; } /* When you start the slide, the first image is already visible */
   3%  { right: 0px; } /* Original Position */
   13% { right: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   17% { right: 850px; opacity: 1; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   18% { right: -850px; opacity: 0; z-index: -1; } /* Return to Original Position */
   93% { right: -850px; opacity: 0; z-index: 0; }
   97% { right: -850px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ right: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { right: -850px; opacity: 0; }
   13% { right: -850px; opacity: 0; }
   17% { right: 0px; opacity: 1; }
   20% { right: 0px; opacity: 1; }
   30% { right: 0px; opacity: 1; z-index: 0; }
   33% { right: 850px; opacity: 1; z-index: 0; }
   34% { right: -850px; opacity: 0; z-index: -1; }
   100%{ right: -850px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { right: -850px; opacity: 0; }
   30% { right: -850px; opacity: 0; }
   33% { right: 0px; opacity: 1; }
   37% { right: 0px; opacity: 1; }
   47% { right: 0px; opacity: 1; }
   50% { right: 850px; opacity: 1; z-index: 0; }
   51% { right: -850px; opacity: 0; z-index: -1; }
   100%{ right: -850px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { right: -850px; opacity: 0; }
   47% { right: -850px; opacity: 0; }
   50% { right: 0px; opacity: 1; }
   53% { right: 0px; opacity: 1; }
   63% { right: 0px; opacity: 1; z-index: 0; }
   67% { right: 850px; opacity: 1; z-index: 0; }
   68% { right: -850px; opacity: 0; z-index: -1; }
   100%{ right: -850px; opacity: 0; z-index: -1; }
}

@keyframes cyclefive {
   0%  { right: -850px; opacity: 0; }
   63% { right: -850px; opacity: 0; }
   67% { right: 0px; opacity: 1; }
   70% { right: 0px; opacity: 1; }
   80% { right: 0px; opacity: 1; z-index: 0; }
   83% { right: 850px; opacity: 1; z-index: 0; }
   84% { right: -850px; opacity: 0; z-index: -1; }
   100%{ right: -850px; opacity: 0; z-index: -1; }
}

@keyframes cyclesix {
   0%  { right: -850px; opacity: 0; }
   80% { right: -850px; opacity: 0; }
   83% { right: 0px; opacity: 1; }
   87% { right: 0px; opacity: 1; }
   97% { right: 0px; opacity: 1; z-index: 0; }
   100%{ right: 850px; opacity: 1; z-index: 0; }
}

/* --------------------------------------------------  SLIDESHOW - COVID-19 MASKS  ----------------------------- */
.covidMasks {
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: 0;
	font-size: 14px;
	padding-top: 2px;
}

.covidMasks .text {
	display: block;
	float: left;
	width: 45%;
	text-align: left;
}

.covidMasks .slides {
	display: block;
	float: right;
	width: 50%;
}

.i-slideshow-masks {
	display: none;

}
.p-slideshow-masks {
	display: block;
	width: 98%;
	margin: 0;
}
#indexSlide {
	background-color: #ffffff;
	position: relative;	
	height: 450px;
    width: 350px;
}

#mask {
   overflow: hidden;
   height: 450px;
}

/* IMAGE LIST */

#indexSlide ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#indexSlide {
	background-color: #ffffff;
	position: relative;	
	height: 450px;
    width: 325px;
}

#mask {
   overflow: hidden;
   height: 450px;
}

/* IMAGE LIST */

#indexSlide ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#indexSlide li {
   width: 325px;  /* Width Image */
   height: 450px; /* Height Image */
   position: absolute;
   right: -325px; /* Original Position - Outside of the Slider */
   list-style: none;
}

#indexSlide li.firstanimation {
   animation: cycle 50s linear infinite;
}
#indexSlide li.secondanimation {
   animation: cycletwo 50s linear infinite;
}
#indexSlide li.thirdanimation {
   animation: cyclethree 50s linear infinite;
}
#indexSlide li.fourthanimation {
   animation: cyclefour 50s linear infinite;
}
#indexSlide li.fifthanimation {
   animation: cyclefive 50s linear infinite;
}
#indexSlide li.sixthanimation {
   animation: cyclesix 50s linear infinite;
}
#indexSlide li.seventhanimation {
   animation: cycleseven 50s linear infinite;
}
#indexSlide li.eighthanimation {
   animation: cycleeight 50s linear infinite;
}
#indexSlide li.ninthanimation {
   animation: cyclenine 50s linear infinite;
}
#indexSlide li.tenthanimation {
   animation: cycleten 50s linear infinite;
}

@keyframes cycle {
   0%  { right: 0px; } /* When you start the slide, the first image is already visible */
   2%  { right: 0px; } /* Original Position */
   8% { right: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   10% { right: 325px; opacity: 1; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   11% { right: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   96% { right: -325px; opacity: 0; z-index: 0; }
   98% { right: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ right: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   8% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   10% { right: 0px; opacity: 1; }
   12% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   18% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   20% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   21% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   18% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { right: 0px; opacity: 1; }
   22% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   28% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   30% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   31% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   28% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   30% { right: 0px; opacity: 1; }
   32% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   38% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefive {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   38% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   40% { right: 0px; opacity: 1; }
   42% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   48% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   50% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   51% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclesix {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   48% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   50% { right: 0px; opacity: 1; }
   52% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   58% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   60% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   61% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}

@keyframes cycleseven {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   58% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   60% { right: 0px; opacity: 1; }
   62% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   68% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   70% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   71% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}
@keyframes cycleeight {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   68% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   70% { right: 0px; opacity: 1; }
   72% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   78% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   80% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   81% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclenine {
   0%  { right: -325px; opacity: 0; } /* Original Position */
   78% { right: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   80% { right: 0px; opacity: 1; }
   82% { right: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   88% { right: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   90% { right: 325px; opacity: 1; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   91% { right: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ right: -325px; opacity: 0; z-index: -1; }
}
@keyframes cycleten {
   0%  { right: -325px; opacity: 0; }
   88% { right: -325px; opacity: 0; }
   90% { right: 0px; opacity: 1; }
   92% { right: 0px; opacity: 1; }
   98% { right: 0px; opacity: 1; z-index: 0; }
   100%{ right: 325px; opacity: 1; z-index: 0; }
}