/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {padding-top: 3rem; padding-bottom: 3rem; color: #5a5a5a;}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {margin-bottom: 4rem;}
/* Since positioning the image, we need to help out the caption */
.carousel-caption { bottom: 3rem;  z-index: 10;}
/* Declare heights because of positioning of img element */
.carousel-item { height: 32rem;}
.carousel-item > img { position: absolute; top: 0;left: 0; min-width: 100%; height: 32rem;}

/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 { margin-bottom: 1.5rem; text-align: center;}
.marketing h2 {  font-weight: 400;}
.marketing .col-lg-4 p {  margin-right: .75rem;  margin-left: .75rem;}
/* Featurettes
------------------------- */
.featurette-divider {  margin: 5rem 0; /* Space out the Bootstrap <hr> more */}
/* Thin out the marketing headings */
.featurette-heading {  font-weight: 300;  line-height: 1;  letter-spacing: -.05rem;}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {margin-bottom: 1.25rem;font-size: 1.25rem;line-height: 1.4;}
  .featurette-heading {font-size: 50px;}}
@media (min-width: 62em) {.featurette-heading {margin-top: 7rem;}}

/* BELOW FOR MINE
-------------------------------------------------- */
/*  frontpage  
------------------------- */
 #row-r {background-color:#D6DAE4  }
#row-m {background-color:white}
#row-l {background-color: #D6DAE4}
@media (min-width: 62em) {#row-l,#row-m,#row-r{ background-color:white} }

 .front-links a{color:teal; }
 .front-about {background-color: white  }
.front-comments {background-color:white  }
p.flag{text-align:center}

/* my billboard */
p.billboard{font-size:13px;  }
 #contentwrapper{width: 100%; height: 290px; border: 0px solid   #C0C0C0;  padding: 5px;}
.billcontent{width: 100%; display:block;}

 /* announcement */ 
 p.announcement{text-align:center}
 .announcement a{ color: #FF9900;} 
   
  /* top nav */ 
 .bg-info{background-color:  teal!important}
 a.bg-info:focus,a.bg-info:hover,button.bg-info:focus,button.bg-info:hover{background-color:#117a8b!important}

.navbar-dark .navbar-brand{color:#fff}
 .navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}
 .navbar-dark .navbar-nav .nav-link{color: white}
 .navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color: aqua}
 .navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}
 .navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}
 .navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}
 .navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
 .navbar-dark .navbar-text{color:rgba(255,255,255,.5)}
 .navbar-dark .navbar-text a{color:#fff}
 .navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}
  
 /* banner */  
 header{  background-color: teal}   /* header and banner background */
.banner{}
.banner-text{}
.banner-images{  }
.banner a{color: white; text-decoration:none; font-size:21px;text-align:center}
  
 /* footer */	
footer{}
 .py-5{width:100%; background-color:white; }
footer a{color: #303030;}
footer p{margin:0 12px;}
p.copy{ text-align:center}
.footer-extra { min-height:40px; background-image: url('../footer/images/footerS.jpg')}
  /*  jumbotron */
  .jumbotron{ background-color: white;}

/* blockquote */
p.ayat,blockquoute.ayat{font-size:1.077em; font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold; color: #008000;}
p.hadith,blockquote.hadith{font-size:1.077em;font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold; color: #008000;} 
blockquote{font-size:1.077em;font-family: 'Open Sans',sans-serif; padding :0 0 0px 2px;font-weight:bold;color: #008000;}

/* headers */
h1.domain{font-size:14px; text-align:center; font-weight: bold;}
h1.impact {font-size:25px; text-align:center;  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif}
 .impact1 {font-weight: normal; color:  #D76942}
 .impact2 {font-weight: normal; color: #67879C}
 
h1{font-size:2em;margin:.67em 0}
h1.header{letter-spacing:-1px;}
h1.c-title,h1.contenttitle,h1.title{ color: teal; text-align:center; font-weight: bold; }
h2.c-subtitle{  font-weight: bold; letter-spacing:-1px; color: teal; text-align:left;}
h1.sisters{color:#FF66CC}

/* font sizes */
p.basmalah{text-align:center; padding: 10px 0 0px 0px;}

p{color: black; font-family:'Open Sans',sans-serif; padding :0 0 0px 2px;}  
p.annhead{font-weight:bold; color: yellow; }

 /* links */
a {color: navy;font-family:'Open Sans',sans-serif; font-weight:bold; text-decoration:none;}
a:hover,a:focus {color:#825; border-bottom:1px solid #c9a3a9; text-decoration:underline} 
 .front-links a{color:teal; }
 .blog-post a{color:teal}
 
  ul.dictionary-list li {display:inline}

 /* images */
 .responsiveimage {width: 100%;height: auto;}

/* end of my css */ 

/* BELOW IS MY TESTING */ 
 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container-comments {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
} 
 
 
 
  /* Style the container with a rounded border, grey background and some padding and margin */
.container-comments {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}

/* Clear floats after containers */
.container-comments::after {
  content: "";
  clear: both;
  display: table;
}

/* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.container-comments img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/* Increase the font-size of a span element */
.container-comments span {
  font-size: 20px;
  margin-right: 15px;
}

/* Add media queries for responsiveness. This will center both the text and the image inside the container */
@media (max-width: 500px) {
  .container-comments {
    text-align: center;
  }

  .container-comments img {
    margin: auto;
    float: none;
    display: block;
  }
} 











 /* Slideshow container */
.slideshow-container {
  position: relative;
  background: #f1f1f1f1;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: #ddd;
}

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

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {color: cornflowerblue;}