@charset "utf-8";
/* CSS Document */

body{
	background-color: black;
	

 
}



header {
	position:top;
}

h1 {
	color:white;
	text-transform:uppercase;
	text-align:center;
	font-size:60px;
	letter-spacing: 3px;
	font-family:"baskerville Old Face";
	
}

h2 {
	color:white;
	text-transform:uppercase;
	text-align:center;
	font-size:10px;
	letter-spacing: 3px;
	font-family:"baskerville Old Face";
	margin-top:-40px;
}

#logoicons {
	text-align:center;
}

/*Nav*/

.nav {
  overflow: hidden;
  
  text-transform:uppercase;
  background-color: white;
  font-family:Arial, Helvetica, sans-serif;
  margin-top:30px;
  text-align:center;
  width:100%;
  
  
}

.nav a {
  
  display: inline-block;
  color: black;
  text-align: center;
  padding: 7px 16px;
  text-decoration: none;
  font-size: 12px;
  
}

.nav a:hover {
  background-color: #ddd;
  color: black;
  text-decoration:underline;
}

.active {
 
  color: white;
  font-weight:bold;
}

.nav .icon {
  display: none;
}

/*Image slider*/
.slideshow-container {
padding-top:10px;
  max-width: 100%;
  position: relative;
  margin: auto;
 
}

.slider-img {
	max-width:100%;
}




/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.showSections {
	padding-top:30px;
}

/*
table {
	
	   display: block;
}
*/

.articles {
	width:22%;
	display: inline-block;
	margin:5px;
	
}

h3 {
	 text-transform:uppercase;
 	color:white;
	font-weight:bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  width:100%;
  
 
  
}

h3 a:link {
    text-decoration:underline;
	color:white;
}

.articleInfo {
	
	color:white;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	
	margin-left:0;
	margin-top:0;
}



.articleImg {
	width:100%;
	height:130px;
}


	
	
footer {

  margin-top:50px;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: white;
   color: black;
   text-align: center;
   text-transform:uppercase;
   font-size:12px;
  
}

p {
	display:inline-block;
	 color: black;
  
   font-family:Arial, Helvetica, sans-serif;
   margin-left:5px;
   text-decoration:none;
  
}


#copyright {
	color:white;
	 text-align: center;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
  
}

#copyright a:hover {
	text-decoration:underline;
}

/*mobile
*/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px)
   {
	
	h1 {
		font-size:45px;
	}
	
	h2 {
		font-size:6px;
		padding-top:5px;
		font-weight:bold;
	}
	
	#logoicons {
		 clear:both;
   max-width:50%;
   margin: auto;
		
	}
	
	.nav {
		margin-top:10px;
	}
	
	.dot {
		width:10px;
		height:10px;
		
	
	}
	
	
	
  .nav a:not(:first-child) {display: none;}
  .nav a.icon {
    float: right;
    display: block;
  }
  
  .nav a {
	  float:left;
  }

  .nav.responsive {position: relative;}
  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
 .slider-img {
	 height:200px;
	 
 }
 
 .showSections {
	 text-align:center;
 }
 
 .articles, .articleImg {
	 width:100%;
	 text-align:center;
	 margin-left:0;
 }
 
 
 
 .articleImg {
	 height:230px;
 }
 
 footer {
	 margin-top:20px;
	 font-size:10px;
 }

 

}

@media only screen 
  and (min-device-width: 736px) 
  and (max-device-width: 1000px) 
 {
	
	.showSections {
	 text-align:center;
 }
	
	.articles {
		width:49%;
		text-align:center;
		margin-left:0;
		
}

.articleInfo {
	width:90%;
	margin-top:0;
}

 .articleImg {
	 height:260px;
	 width:330px;
 }
 
 h3 {
	 text-align:center;
	 width:100%;
	 
	 
}
 }