@charset "UTF-8";

article, aside, footer, header, main, nav, section {
    display: block;
  }
  
  html, body, h1, h2, h3, ul, li, a, p, 
  article, aside, footer, header, main, nav, section {
    padding: 0;
    margin: 0;
  }

  body {
    
	background-color:#ffffff;		
	background-image:url('../images/mygradient2.png');
	background-repeat:repeat-x;
    width:100%;
    height:100%;
  }

  .banner {
    margin: auto;
    text-align: center;
	height: auto;
    color: yellow;
    width: 960px;
  }

.main {
    position: relative;
    height: 720px;
    width: 960px;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    padding-right:-0px;
    padding-bottom:0px;
}

#mainPhoto {
    height: 720px;
    width: 960px;
}

.list {
    position: absolute;
    top: 0px; left: 0px;
	height: 172px;
    width: 200px;
	background-color: #333;
	opacity: .7;
    list-style-type: none;
}

.list li a {
    font-size: 18px;
	color: yellow;
	font-weight: 700;
    line-height: 1.5;
    margin-left: 5px;
}



.blinking{
    animation:blinkingText 2.0s infinite;
}

@keyframes blinkingText{
    0%{     color: #FFFF00;    }
    49%{    color: #FFFF00; }
    50%{    color: transparent; }
    99%{    color: #FFFF00;  }
    100%{   color: #FFFF00;    }
}

/* Move it (define the animation) */
@-moz-keyframes marq {
	0%   { -moz-transform: translateY(-100%); }
	100% { -moz-transform: translateY(100%); }
   }
   @-webkit-keyframes marq {
	0%   { -webkit-transform: translateY(-100%); }
	100% { -webkit-transform: translateY(100%); }
   }
   @keyframes marq {
	0%   { 
	-moz-transform: translateY(-100%); /* Firefox bug fix */
	-webkit-transform: translateY(-100%); /* Firefox bug fix */
	transform: translateY(-100%); 		
	}
	100% { 
	-moz-transform: translateY(100%); /* Firefox bug fix */
	-webkit-transform: translateY(100%); /* Firefox bug fix */
	transform: translateY(100%); 
	}
   }

   .copywrite {
    color: yellow;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 auto;
    text-align: center;
  }

 .bright {
   width:263px; 
   height:172px; 
   overflow:hidden; 
   position:absolute; 
   right: 0px; 
   top: 0px;
  }

 .bright img { 
   position:absolute; 
   animation:bright 50s infinite; 
   opacity:0; 
   width: 100%; 
   height: auto;
  }
  
@keyframes bright {25%{opacity:1;} 40%{opacity:0;}}
.bright img:nth-child(5){animation-delay:0s;}
.bright img:nth-child(4){animation-delay:10s;}
.bright img:nth-child(3){animation-delay:20s;}
.bright img:nth-child(2){animation-delay:30s;}
.bright img:nth-child(1){animation-delay:40s;}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; } 

.modalStory {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity: 0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

	.modalStory:target {
		opacity: 1;
		pointer-events: auto;
	}

	.modalStory > div {
		width: 900px;
		position: relative;
		margin: 1% auto;
		padding: 20px 20px 20px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

  .modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

	.modalDialog:target {
		opacity:1;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 50%;
		position: relative;
		margin: 1% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.modalDialog div div a {
		color:white;
		font-size: 18px;
	}

  .modalDialog div .lnk {
    margin: auto;
    color:white;
		font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #div1 {
    margin: 0 auto;
    width: 70%;
    text-align: center;
    }
    
    #div2 {
      margin: 0 auto;
      width: 50%;
      text-align: center;	
    }
#div2 #mypic {
width: 263px;
height: 172px;
}  

footer {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
color: white;
font-size:20px;
}

.modalAudio {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity: 0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

	.modalAudio:target {
		opacity: 1;
		pointer-events: auto;
	}

	.modalAudio > div {
		width: 300px;
		position: relative;
		margin: 1% auto;
		padding: 20px 20px 20px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}