/*



*/

/*==================================================*/

#myBtn {
  display: none; /* Hidden by default */
  position:fixed; /* Fixed/sticky position */
  bottom: 5.5%; /* Place the button at the bottom of the page */
  right: 3px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: blue; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/*==================================================*/

.h1_DDA{
  text-align:center;
  font-family: "Montserrat-black";
  color: darkblue;
  font-weight:bolder;
  font-size: 3.5rem;
  line-height: 0.8; 
}

h1{
  text-align:center;
  font-family: "Montserrat-black";
  font-weight: bold;
  color: darkblue;
  font-size: 2rem;
  line-height: 1.0; 
}
h2{
  text-align:center;
  font-family: "Montserrat-black";
  font-weight: bold;
  color: blue;
  font-size: 1.2rem;
  line-height: 1.0; 
  padding-top:10px;
}

h3{
  text-align:center;
  font-family: "Montserrat-black";
  font-weight: bold;
  color: darkblue;
  font-size: 1rem;
  line-height: 1.0; 
  padding-top:10px;
} 

.custom_p{
  text-align:left;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: darkblue;
  line-height: 1.0;
  
}
.custom_h3{
  text-align:left;
  font-family: "Montserrat-black";
  font-weight: bold;
  color: blue;
  font-size: 1.2rem;
  line-height: 1.0; 
  padding-top:10px; 
}
.custom_ul{
  text-align:left;
  font-family: "Montserrat-black";
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.0; 
  padding-top:10px; 
  padding-left:20px;  
}



/* Page Headers  ============= */
._header{
   background-image: url('../images/darsilami.png');   
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size:contain;
  height:100%;
}
 /* Page Headers  ============= */

/* Main Body of Pages ============== */
.content {
  max-width: 100%;
  height: 100%;
  margin: auto;
  background-color: lightblue;
} /* Main Body of Pages ============== */

/* Page Footers ============= */
.Page_Footer2 {
position:fixed;
left: 0;
bottom:0;
width: 100%;
text-align: center;
background-color: gray;
} /* Page Footers ============= */


/* Welcome and Mission Statement */
.missionStmt{
   background-color:lightskyblue;
   padding-top:10px;
   padding-bottom:10px;
}

.message1{
  text-align: left;
  
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: black;
  line-height: 1.0;
  
  padding-left:3%;
 
} /* Welcome and Mission Statement */


/* Executive Leadership ==================== */
.executives{
    background-color:azure;
    padding-top:10px;
}
/* Executive Leadership ==================== */




/*Div class DDANews ====================*/
.DDANews { 
    padding:10px;
} 
.DDANews p { 
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: black;
  line-height: 1.0;
} /*Div class DDANews ====================*/


/*Div class InsideDDA*/
.InsideDDA { 
    padding:10px;
    background-color:lightseagreen;
 }
.InsideDDA p { 
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: black;
  line-height: 1.0;
} /* class InsideDDA ====================*/


/*SecondColumn*/
.SecondColumn { 
    padding-bottom:30px;
    background-color:yellowgreen;
 }
.SecondColumn p { 
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: black;
  line-height: 1.0;
} /*Div class SecondColumn ====================*/



/* Football History and Heroes ====================*/
.football_history {
background-color: aliceblue;
padding:10px;
}


.football_history p{  
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: black;
  line-height: 1.0;
}/* Football History and Heroes ====================*/


/* Faith, Religion and Local Organizations ===== */
.local_orgs{
  background-color:azure; 
  padding-right:40px;
  padding-left:40px;
  padding-bottom:60px;
  padding-top:10px;
}
.local_orgs p{
  text-align:left;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight:lighter;
  color: black;
  line-height: 1.0;
}


/* Faith, Religion and Local Organizations ===== */





/* ****** Not used Now or For Future Use ********** */

.In_Memoriam{
    background-color: #9276adcc;
    padding-right:40px;
    padding-left:40px;
    padding-bottom:60px;
    padding-top:10px;
}

/* ****** Not used Now or For Future Use ********** */






  
.img {
  width: 100%;
  height: 10%;
}




/* Container holding the image and the text */
.container {
  /* position: relative;
  //text-align: center; */
  position: relative;
  bottom: 0;
  right: 0;
  left: 10;
  width: 100%;
  padding-bottom: 0%;
}

/* Centered text */
.centered1 {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Centered2 text */
.centered2 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Montserrat-black";

  font-size: 1.5rem;
  font-weight: bold;
  font-style: italic;
  color: yellow;
  line-height: 0.8;
}

/* Centered3 text */
.centered3 {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Montserrat-black";
  font-size: 1.5rem;
  font-weight: bold;
  font-style: italic;
  color: blue;
  line-height: 1.5;
}
/* Centered4 text */
.centered4 {
 text-align:center;
 postion
  transform: translate(-50%, -50%);
  font-family: "Montserrat-black";
  font-size: 2.5rem;
  font-weight: bold;
  font-style: normal;
  color: blue;
  line-height: 1.5;
}



.GambiaFlag {
  margin-top: 1.5%;
  margin-left: 1.5%;
  margin-bottom: 0;
  height: 100%;
  width: 80%;
}

.Darsilami_Road_Sign {
  background-color: red;
  margin-top: 1.5%;
  margin-right: 1.5%;
  margin-bottom: 0;
  height: 90%;
  width: 80%;
}


.responsive {
  width: 100%;
  height: auto;
}


.close {
    color: black; 
    opacity: 4;
    font-size: 50px;
}



.modal-content{
  width: 100%;
  height: 100%;
    
}


/*  ====================================     */


#featured{
	position: relative;
}
#featuredico{
	position: absolute;
	top: 0;
	left: 0;
}


body{
	font-family: SourceSansProLight, Verdana, Arial, sans-serif;
	font-size: 14px;
}
/* header h1, nav, nav li{
	display: inline-block;
} */
/* header{
	background-color: black;
	height: 50px;
	width: 100%;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	box-shadow: 0px 0px 10px rgba(0,0,0,.8);
	z-index: 100;
	border-bottom: 0px solid #C10021;
}
header h1 a{
	font-family: LeagueGothic, Verdana, Arial, sans-serif;
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 28px;
	position:absolute;
	top:8px;
	left: 35px;
} */

#secwrapper{
	
	padding-top: 0%;
    padding-left: 5%;
    padding-bottom: 5%;
    margin: 2%;
}

#secwrapper2{
	background-color: lightgreen;
	padding-top: 0%;
    padding-left: 5%;
    padding-bottom: 5%;
    margin: 2%;
}
article{
	width: 280px;
	margin-right: 40px;
	display: inline-block;
	vertical-align: top;
	border: 0px solid #c8c8c8;
	margin-bottom: 20px;
	padding: 7px;
	border-radius: 3px;
	*display:inline;
    zoom:1;
}

.readmore{
	background-color: black;
	padding: 5px 10px;
	color: white;
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
}

.readmore:hover{
	background-color: #383838;
}
article p{
	margin-bottom: 7px;
}


body {
    font-family: Arial;    
}

#gridview {
   text-align:center; 
}

div.image {
    margin: 10px;
    display: inline-block;
}

div.image img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

div.image img:hover {
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.32), 0 0 0 0px rgba(0,0,0,0.16);
}

.heading{    
    padding: 10px 10px;
    border-radius: 2px;
    color: #FFF;
    background: #6aadf1;
    margin-bottom:10px;
    font-size: 1.5em;
    text-align: center;
}
.central2{
    padding-bottom:70px;
}
.heading_{    
    padding: 10px 10px;
    border-radius: 2px;
    color: #FFF;
    background: #6aadf1;
    margin-bottom:10px;
    font-size: 1.5em;
}

#grid{
    margin-bottom:30px;
}

/* Responsive Styles */

@media screen and (min-width: 1224px) {
    div.image {
        width: 300px;
    }
}

@media screen and (min-width: 1044px) and (max-width: 1224px) {
    div.image {
        width: 250px;
    }
}

@media screen and (min-width: 845px) and (max-width: 1044px) {
    div.image {
        width: 200px;
    }
}




.login, .register {
  width: 400px;
  background-color: #ffffff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  margin: 100px auto;

}

.login h1, .register h1 {
  text-align: center;
  color: #5b6574;
  font-size: 24px;
  padding: 20px 0 20px 0;
  border-bottom: 1px solid #dee0e4;
}

.login .links, .register .links {
  display: flex;
  padding: 0 105px;
  text-align: center;
  border-bottom: 13px solid #3274d6;
  color: #3274d6;

}

.login .links a.active, .register .links a.active {
  border-bottom: 10px solid #3274d6;
  color: #3274d6;
   
}



.login .links a, .register .links a {
  color: #adb2ba;
  text-decoration: none;
  display: inline-flex;
  padding: 0 10px 10px 10px;
  font-weight: bold;


}

.login .links a:hover, .register .links a:hover {
  color: #9da3ac;

}



.login form, .register form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}

.login form label, .register form label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: #3274d6;
  color: #ffffff;

}

.login form input[type="password"], .login form input[type="text"], .login form input[type="email"], .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  width: 310px;
  height: 50px;
  border: 1px solid #dee0e4;
  margin-bottom: 20px;
  padding: 0 15px;
}

.login form input[type="submit"], .register form input[type="submit"] {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  background-color: #3274d6;
  border: 0;
  cursor: pointer;
  font-weight: bold;
  color: #ffffff;
  transition: background-color 0.2s;
}

.login form input[type="submit"]:hover, .register form input[type="submit"]:hover {
  background-color: #2868c7;
  transition: background-color 0.2s;
}



body.loggedin {
  background-color: #f3f4f7;
}

.xcontent {
  width: 1000px;
  margin: 0 auto;
}

.xcontent h2 {
  margin: 0;
  padding: 25px 0;
  font-size: 22px;
  border-bottom: 1px solid #e0e0e3;
  color: #4a536e;
}

.xcontent > p, .xcontent > div {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  margin: 25px 0;
  padding: 25px;
  background-color: #fff;
}

.xcontent > p table td, .xcontent > div table td {
  padding: 5px;
}

.xcontent > p table td:first-child, .xcontent > div table td:first-child {
  font-weight: bold;
  color: #4a536e;
  padding-right: 15px;
}

.myPHPDiv{
height: 100px;
background-color: red;
}




PhotoGrid{
  background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
  min-height: 100vh;
  font: normal 16px sans-serif;
  padding: 60px 0;


}


/* 2019 Reunion Image Page Style */
    /* Outer Box*/
.container.gallery-container {
    background-color: #b3d7ff;
    /*color: #35373a;*/
    /*min-height: auto;*/
    /*border-radius: 40px;*/
    /*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);*/
    
    color: #35373a;
    min-height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
    margin:10px;
    padding:10px;
}

.reunion_2019_gallery{
    background-color: #b3d7ff;
    color: #35373a;
    min-height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06); 
    margin:10px;
    padding:10px;  
}


/*cv19Drive*/
.cv19Drive{
    /*background-color:lightgreen;*/
}
/*===============================================*/


.gallery-container p.page-description {
    text-align: center;
    max-width: 10000px;
    margin: 15px auto;
    color: #888;
    font-size: 18px;
}


/*===============================================*/

/* Football History Page Style ======================================= */
    /* Outer Box*/
.container.gallery-container_football {
    background-color:    burlywood;
    color: #35373a;
    min-height: auto;
    border-radius: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.container.gallery-container_football2 {
      background-color:    cornsilk;
    color: #35373a;
    min-height: auto;
    border-radius: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}


/* Text and Font*/
.gallery-container_football h1 {
    text-align: center;
    margin-top: 20px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

/* Text and Font*/
.gallery-container_football h2 {
    text-align: center;
    margin-top: 15px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
    font-style: italic;
    
}

/* Text and Font*/
.gallery-container_football p {
    text-align: center;
    margin-top: 20px;
    font-family: 'Droid Sans', sans-serif;
    font-weight:  normal;
    font-style:italic;
}

/* ======================================= */






/* Alpha Omega Philip  ======================================= */
    /* Outer Box*/
.container.gallery-AO_Philip {
    background-color:    #e9ecef;
    color: #35373a;
    min-height: auto;
    border-radius: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

/* Alpha Omega Philip  2*/
    /* Outer Box*/
.container.gallery-AO_Philip2 {
    background-color:    #b3d7ff;
    color: #35373a;
    min-height: auto;
    border-radius: 0px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

/* Text and Font*/
.gallery-AO_Philip h1 {
    text-align: center;
    margin-top: 20px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

/* Text and Font*/
.gallery-AO_Philip h2 {
    text-align: center;
    margin-top: 15px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
    font-style: italic;
    
}

/* Text and Font*/
.gallery-AO_Philip p {
    text-align: center;
    margin-top: 20px;
    font-family: 'Droid Sans', sans-serif;
    font-weight:  normal;
    font-style:italic;
}
/* Alpha Omega Philip */  /* ======================================= */

/* Text and Font*/
.gallery-container h1 {
    text-align: center;
    margin-top: 50px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}



/* DDA Leaders Image Page Style ----  Outer Box*/
.container.gallery-containerx {
    
    background-color: lightblue;
    color: #35373a;
    min-height: auto;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.06);
}
/* Text and Font*/
.gallery-containerx h1 {
    text-align: center;
    margin-top: 5px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
} /* DDA Leaders Image Page Style ----  Outer Box*/ 


 /*Football Fence Project Image Page Style --- Outer Box*/
.container_gallery_containery{
    background-color: #b3f8ff;
    color: #35373a;
    min-height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
    margin:10px;
    padding:10px;
}





/* Text and Font*/
.gallery-containery h1 {
    text-align: center;
    margin-top: 5px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
} /* Football Fence Project Image Page Style --- Outer Box*/


/* Football Fence Project Image Page Style --- Outer Box*/
.container.gallery-containerz{
    background-color: lightblue;
    color: #35373a;
    min-height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}
/* Text and Font*/
.gallery-containery h1 {
    text-align: center;
    margin-top: 5px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
} /* Football Fence Project Image Page Style --- Outer Box*/
















.gallery-container p.page-description {
    text-align: center;
    max-width: 10000px;
    margin: 15px auto;
    color: #888;
    font-size: 18px;
}

/*.tz-gallery {*/
/*    padding: 40px;*/
/*}*/

.tz-gallery .lightbox img {
    width: 100%;
    margin-bottom: 3px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}


.tz-gallery .lightbox img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}
/*.tz-gallery img {*/
/*    border-radius: 4px;*/
/*}*/
.baguetteBox-button {
    background-color: transparent !important;
}


@media(max-width: 768px) {
    body {
        padding: 0;
    }
    .container.gallery-container {
        border-radius: 0;
    }
}



/* ========  Radio CSS */


.DDA_Radio{
    width:100%;
    height:100vh;
    background-color:rgba(1, 1, 5, 0.3);
}


.iframe{
  width: 200px;
}


/*=============  Reunion Page ==============*/

/*{*/
/*  box-sizing: border-box;*/
/*}*/

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

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}