/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');

body {
	padding: 0;
	margin: 10px;
    font-size: 16px; 
    line-height: 1.5rem;
	max-width: 100%;
	max-width: 100%;
    font-family: 'Roboto', 'Arial', serif;
}

.headertop {
	padding: 5px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
    background-color:
}

.logo {
	display: flex;
	align-items: center;
	margin-left: 1rem;
}

.logo img {
	width: 315px;
	height: auto;
	margin-right: 20px;
	margin-left: 100px;
}

.headings {
	display: flex;
	flex-direction: column;
	margin-left: .5rem;
    
    margin-left: 10px;
	font-family: 'Lora', 'Arial', san serif; 
	color: white;
}

.headings h1 {
	font-size: 1.5rem;
    margin: 0;
	/* text-shadow: 1px 1px gray; */
}

.eliora {
    font-size: 1rem;
    margin: 0;
	margin-left: 40px;
	color:gainsboro
}

.eliakim {
	
	color:orange;
	text-align: center;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.fa {
	display:grid;
	padding: 20px;
	font-size: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
	margin: 5px 2px;
	float: right;

  }
  
  .fa:hover {
	  opacity: 0.7;
  }
  
  .fa-facebook {
	background: #3B5998;
	color: white;
	border: 2px solid;
	border-color: gainsboro;
	  margin-right: 50px;
  }
  
  .fa-linkedin {
	background: #007bb5;
	color: white;
	margin-left: 650px;
	border: 2px solid;
	border-color: gainsboro;
  }

header {
	background-color: #24292f;
	padding: .8rem 0;	
	box-shadow: -1px -1px 10px 10px rgba(63, 65, 63, 0.5);	
}

.date {
	display:flex;
	font-size: .8rem;
	letter-spacing: 2px;
	text-align: center;
	/* border: 2px solid blue; */
	padding: 10px;
	margin-top: 20px;
	margin-right: 15px;
	margin-left: 15px;
	color:gainsboro;

    }

    main{
        display: block;
        padding: 1rem 0;
        width: 100%;
    }



/* Footer Section */

footer {
    display: block;
    background-color: #24292f;
	justify-items: center;
	text-align: center; 
	color: white;
	padding: .5rem;
    box-shadow: -1px -1px 10px 10px rgba(63, 65, 63, 0.5);
	font-family: 'Lora', 'Arial', serif;
	font-size: 0.8rem;
	margin-top: 700px;

}
.logofooter img {
    width: 160px;
    height: auto;
    margin-top:10px;
}
.location {
	padding-bottom: 1rem;
	font-size: .9rem;
}

 /*Author Section */
  .author {
    display: block;
	padding-top: 1rem;
	font-family: 'Roboto', 'Arial', serif;;
    font-size: .9rem;
	border-top: 2px solid white;
    padding-bottom:2rem;
  }


/* slideshow */
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}

.mySlides {
  display: none;
  width:100%;
  height: 100%;
 
}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}


/* Caption text */
.slidecontent {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0); 
  background: rgba(0, 0, 0, 0.5); 
  color: #f1f1f1; 
  width: 50%; 
  padding: 10px;
  margin-left: 350px;
  text-align: center;
  margin-bottom: 150px;
  
}

.slideimg {
  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;
  align-items: center;
}

.active {
  background-color: #717171;
}

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
/* Services */

.services {
	margin-top: 30px;
}

.amccimg {
	width: 100%;
	overflow: hidden;
}

.service-item {
	background-color: #f7f7f7;
	padding: 30px;
}

.down-content h4 {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.25px;
	margin-bottom: 15px;
}
.down-content p {
	margin-bottom: 20px;
}

.down-content {
	background-color: #f7f7f7;
	padding: 30px;
}

.section-heading {
	text-align: center;
	margin-bottom: 80px;
  margin-top: 10px;
}

.section-heading h2 {
	font-size: 36px;
	font-weight: 600;
	color: #1e1e1e;
}

.section-heading em {
	font-style: normal;
	color: #a4c639;
}

.section-heading span {
	display: block;
	margin-top: 10px;
  margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 15px;
	color: #444;
	letter-spacing: 1px;
}

.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}

.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}




.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}
.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}


/* Responsive Style */
@media (max-width: 768px) {
  .services .service-item {
		margin-bottom: 30px;
  }
}

/* Tabbed Menu */

/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #444;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 16.666%;
  
}

.tablink:hover {
  background-color: #faa627;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: gainsboro;
  display: none;
  padding: 50px 5px;
  height: 100%;
}

#Home {background-color: gainsboro;}
#About{background-color: gainsboro;}
#Discover{background-color: gainsboro;}
#Directory{background-color: gainsboro;}
#Join{background-color: gainsboro;}
#Contact{background-color: gainsboro;}


/* Discover Abuja */

.image {
	float:right;
	padding-top: 10px;
}

.city{
	padding-top: 10px;
	text-align: center;
	margin-left: 50px;
	color:#1e1e1e;
}

.cityp{
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 20px;
	text-align: center;
	color: #444;
	font-weight: bold;
	margin-left: 50px;;
}

.cityp2{
	text-align: justify;
	font-size: 20px;
	color:#444;
	margin-left: 50px;
}

.discoverbutton {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 200px;
  }

  /*discover column */

 .column {
  float: left;
  width: 50%;
  padding: 10px;
  }


.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

/* Sight and Sound of Abuja */

div.desc {
	padding: 15px;
	text-align: center;
  }
  
  .sightsound{
	  padding-top: 10px;
	  text-align: center;
	  font-size: 30px;
	  color: #444;
	  margin-left: 400px;
  }
  
  .sight-sound {
	margin-bottom: 90px;
	margin-left: 10px;
	margin-right: 10px;

  }


  div.dew {
	border: 1px solid #ccc;
  }
  
  div.dew:hover {
	border: 1px solid #777;
  }
  
  div.dew img {
	width: 100%;
	height: auto;
  }
  
  div.desc {
	padding: 15px;
	text-align: center;
  }
  
  * {
	box-sizing: border-box;
  }
  
  .wuse {
	padding: 0 6px;
	float: left;
	width: 24.99999%;
	margin-bottom: 150px;
  }
  
  @media only screen and (max-width: 700px) {
	.wuse {
	  width: 49.99999%;
	  margin: 6px 0;
	}
  }
  
  @media only screen and (max-width: 500px) {
	.wuse {
	  width: 100%;
	}
  }
  
 
  .desc {
	  text-align: justify;
  }
  .h2title {
	  text-align: center;
	  color:#1e1e1e;
  }
  
  .description {
	  color:#444;
  text-align: justify;
  }
  
    /* Clear floats after the columns */
  .row2:after {
	content: "";
	display: table;
	clear: both;
  }

  .btndiscover{
	background-color: #36454F;
	border: none;
  	color: white;
  	padding: 15px 32px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 16px;
	align-content: center;
  }

  /* About AMCC */
  .about-column {
	float: left;
	width: 33.3%;
	margin-bottom: 16px;
	padding: 0 8px;
  }
  
  .rain {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	margin: 8px;
  }
  
  .about-section {
	padding: 50px;
	text-align: center;
	background-color: #474e5d;
	color: white;
  }
  
  .container {
	padding: 0 16px;
  }
  
  .container::after, .row::after {
	content: "";
	clear: both;
	display: table;
  }
  
  .title {
	color: grey;
  }
  
  .about-button {
	border: none;
	outline: 0;
	display: inline-block;
	padding: 8px;
	color: white;
	background-color: #000;
	text-align: center;
	cursor: pointer;
	width: 100%;
  }
  
  .about-button:hover {
	background-color: #555;
  }
  
  @media screen and (max-width: 650px) {
	.about-column {
	  width: 100%;
	  display: block;
	}
  }

  .team {
	width:100%;
  }

  .leadership {
	text-align: center;
	font-size: 35px;
	color: #1e1e1e;
  }

  .leadership2 {
	text-align: center;
	color: #444;
	font-size: 25px;
  }

  .team-button {
	border: none;
	outline: 0;
	display: inline-block;
	padding: 8px;
	color: white;
	background-color: #000;
	text-align: center;
	cursor: pointer;
	width: 100%;
  }
  
  .team-button:hover {
	background-color: yellowgreen;
  }

  .title {
	color:#444;
	text-align: center;
  }

  p {
	color:#444;
	text-align: justify;
  }

  .intro {
	color:gainsboro;
	text-align: justify;
	font-size: 17px;
  }

/******* DIRECTORY PAGE ********/

main#directory{
    display: block;
    margin:0 auto;
    text-align: center;
}  
/* ------GRID----- */

.dirgrid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        max-width:1350px;
        text-align: center;
}

.dirgrid section{
    margin: 1rem;
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #555;
    /* justify-items: center; */
}

.dirgrid section p{
    margin: 0.5rem 0 0.5rem 0;
}

.dirgrid section p.name{
    display: none;
}

.dirgrid section img{
    margin-bottom: 15px;
}
/* -----LIST------ */

.dirlist section{
    display: block;
    text-align: center;
    line-height:1rem;
    padding: 0.05rem;

} 

.dirlist img{
    height: 40px;
    margin-top: 10px;
    margin-bottom:0;
}

.dirlist section:nth-child(even){
    background-color: #fff;
}

.dirlist section:nth-child(9){
    margin-bottom: 25px;
}

.dirlist section:nth-child(1){
    margin-top: 25px;
}

/* GRID/LIST BUTTONS */
#btnContainer{
    margin: auto auto auto auto;
    text-align: center;
    font-size: 18px;
}

#listbtn{
    margin-right: 20px;
}

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

.btn.active{
    color: #fff;
    background-color: #666;

}

.btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
  }

  /* Contact Us */

  #contact {
	width: 100%;
	height: 100%;
  }
  
  .section-header {
	text-align: center;
	margin: 0 auto;
	padding: 40px 0;
	font: 300 60px 'Oswald', sans-serif;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 6px;
  }
  
  .contact-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 auto;
	padding: 20px;
	position: relative;
	max-width: 840px;
  }
  
  /* Left contact page */
  .form-horizontal {
	/*float: left;*/
	max-width: 400px;
	font-family: 'Lato';
	font-weight: 400;
  }
  
  .form-control, 
  textarea {
	max-width: 400px;
	background-color: #000;
	color: #fff;
	letter-spacing: 1px;
  }
  
  .send-button {
	margin-top: 15px;
	height: 34px;
	width: 400px;
	overflow: hidden;
	transition: all .2s ease-in-out;
  }
  
  .alt-send-button {
	width: 400px;
	height: 34px;
	transition: all .2s ease-in-out;
  }
  
  .send-text {
	display: block;
	margin-top: 10px;
	font: 700 12px 'Lato', sans-serif;
	letter-spacing: 2px;
  }
  
  .alt-send-button:hover {
	transform: translate3d(0px, -29px, 0px);
  }
  
  /* Begin Right Contact Page */
  .direct-contact-container {
	max-width: 400px;
  }
  
  /* Location, Phone, Email Section */
  .contact-list {
	list-style-type: none;
	margin-left: -30px;
	padding-right: 20px;
  }
  
  .list-item {
	line-height: 4;
	color: #aaa;
  }
  
  .contact-text {
	font: 300 18px 'Lato', sans-serif;
	letter-spacing: 1.9px;
	color: #bbb;
  }
  
  .place {
	margin-left: 62px;
  }
  
  .phone {
	margin-left: 56px;
  }
  
  .gmail {
	margin-left: 53px;
  }
  
  .contact-text a {
	color: #bbb;
	text-decoration: none;
	transition-duration: 0.2s;
  }
  
  .contact-text a:hover {
	color: #fff;
	text-decoration: none;
  }
  
  
  /* Social Media Icons */
  .social-media-list {
	position: relative;
	font-size: 22px;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	padding: 0;
  }
  
  .social-media-list li a {
	color: #fff;
  }
  
  .social-media-list li {
	position: relative; 
	display: inline-block;
	height: 60px;
	width: 60px;
	margin: 10px 3px;
	line-height: 60px;
	border-radius: 50%;
	color: #fff;
	background-color: rgb(27,27,27);
	cursor: pointer; 
	transition: all .2s ease-in-out;
  }
  
  .social-media-list li:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	line-height: 60px;
	border-radius: 50%;
	opacity: 0;
	box-shadow: 0 0 0 1px #fff;
	transition: all .2s ease-in-out;
  }
  
  .social-media-list li:hover {
	background-color: #fff; 
  }
  
  .social-media-list li:hover:after {
	opacity: 1;  
	transform: scale(1.12);
	transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
  }
  
  .social-media-list li:hover a {
	color: #000;
  }
  
  hr {
	border-color: rgba(255,255,255,.6);
  }
  
  /* Begin Media Queries*/
  @media screen and (max-width: 850px) {
	.contact-wrapper {
	  display: flex;
	  flex-direction: column;
	}
	.direct-contact-container, .form-horizontal {
	  margin: 0 auto;
	}  
	
	.direct-contact-container {
	  margin-top: 60px;
	  max-width: 300px;
	}    
	.social-media-list li {
	  height: 60px;
	  width: 60px;
	  line-height: 60px;
	}
	.social-media-list li:after {
	  width: 60px;
	  height: 60px;
	  line-height: 60px;
	}
  }
  
  @media screen and (max-width: 569px) {
  
	.direct-contact-container, .form-wrapper {
	  float: none;
	  margin: 0 auto;
	}  
	.form-control, textarea {
	  
	  margin: 0 auto;
	}
   
	
	.name, .email, textarea {
	  width: 280px;
	} 
	
	.direct-contact-container {
	  margin-top: 60px;
	  max-width: 280px;
	}  
	.social-media-list {
	  left: 0;
	}
	.social-media-list li {
	  height: 55px;
	  width: 55px;
	  line-height: 55px;
	  font-size: 2rem;
	}
	.social-media-list li:after {
	  width: 55px;
	  height: 55px;
	  line-height: 55px;
	}
	
  }
  
  @media screen and (max-width: 410px) {
	.send-button {
	  width: 99%;
	}
  } 
/* Weather Forecast */
.weather {
	background-color: #1e1e1e;
	margin-top: 200px;
	margin-bottom: 100px;
	padding: 50px;
	color: gainsboro;
}

.weather-column {
	float: left;
	width: 50%;
  }
  
  /* Clear floats after the columns */
  .weather-row:after {
	content: "";
	display: table;
	clear: both;
  }

.article {
	color: gainsboro;
	width: 83%;
}

.article2 {
	background-color: #123456;
	width: 50%;
	border-radius: 15px;
	padding: 30px;
	margin-left: 100px;

}

ul {
	list-style-type: none;
}

.value {
	text-align: right;
}

.table-header {
	text-align: center;
	border-bottom: white solid 2px;
	margin-bottom: 10px;
}

.first-header {
	text-align: center;
}