/*
Available Google fonts for this website

Body Font --> font-family: 'Livvic', sans-serif;
Navigation Font --> font-family: 'Francois One', sans-serif;
Quotation Font --> font-family: 'Indie Flower', cursive;
Banner Text --> font-family: 'Fredericka the Great', cursive;

*/

.myButton{ 
  background-color:#E5C45B; margin:1.5% 40%; padding:2%; border-radius:15px; font-size:150%; font-weight:bold;
}

.myButton:hover{ 
  background-color:#E5865B; 
  border: 5px solid #E5C45B;
  margin:1.5% 40%; 
  padding:2.5%; 
  border-radius:15px; 
  font-size:155%; 
  font-weight:bold;
  font-style:italic;
}
/****** BEGINNING | MAKING An IFRAME Responsive **************/

.iframe-container {
	overflow: hidden; /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625) */
	padding-top: 56.25%;
	position: relative;
  }
   
  .iframe-container iframe {
	 border: 0;
	 height: 100%;
	 left: 0;
	 position: absolute;
	 top: 0;
	 width: 100%;
  }

  /****** END | MAKING An IFRAME Responsive **************/


/****** BEGINNING | MAKING A ToolTip **************/
.hoverFeedback:hover + .myToolTip  {
  display: inline-block;
  background-color:rgba(65, 109, 148,.90);
  position:absolute;
  z-index:1;
  color:white;
}

.myToolTip {
  display:none;

}


/****** END | MAKING A Tooltip **************/

.hoverFeedback:hover{
  border:solid 5px rgb(65, 109, 148);
}

.formError{
    color:red;
    font-style:italic;
}

body{
	font-family: 'Livvic', sans-serif;
}

.fontColorBlue{
  color: rgb(29, 83, 129);
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Francois One', sans-serif;
}

.centerHeadingsBlueLine{
	text-align:center;
	border-bottom: solid 3px rgb(65, 109, 148);
	width:75%;
	margin: 0% auto;
	padding-top:2.5%;
    margin-bottom:1.5%;
}

.centerHeadingsOrangeLine{
	text-align:center;
	border-bottom: solid 3px rgb(290, 134, 91);
	width:75%;
	margin: 0 auto;
	padding-top:2.5%;
}


header{

	border: solid red 0px;
	text-align: center;
	padding:.5%;
	margin:0%;
	background-color: #F5F5DC;
	color: #893165;
	}


img#logo{
width:50px;
position: absolute;
top:1%;
left:2%;

}



/*  ###################################################################################   */

/*  ##############  Beginning re CSS for w3schools Responsive Navbar  #################   */

/*  ###################################################################################   */


.topnav {
  overflow: hidden;
  background-color: rgb(65, 109, 148);
  border-bottom: solid 5px rgb(229, 134, 91);
  font-family: 'Francois One', sans-serif;
  font-size:175%;
  padding: 0px;
  width:100%;
 
}

.topnav a {
  float: right;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: rgb(229, 134, 91);

}


.topnav .icon {
  display: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown{
  border: none;
  outline: none;
  color: rgb(229, 134, 91);
  padding: 14px 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown:hover{

  background-color: rgb(229, 134, 91);
 
}

.dropbtn {
  border: none;
  outline: none;
  color: rgb(229, 134, 91);
  padding: 7.5px 1px 7.5px 1px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(229, 134, 91);
  color: white;
  font-style: italic;

}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*  ###################################################################################   */

/*  ##################   End re CSS for w3schools Responsive Navbar  ##################   */

/*  ###################################################################################   */
	
nav ul{
	   font-size: 125%;
	   padding:0;
	   list-style-type: none;
	   text-align: center;
	   overflow: hidden;
	   color: rgb(229, 134, 91);
	  
}

nav li{
		padding: 2%;
		background-color: rgb(65, 109, 148);

		
	}

nav li:hover{
		margin: 0%;
		background-color:rgb(229, 134, 91);
		color: white;
		font-size: 115%;
		text-decoration: none;
		font-style: italic;
		
	}

nav li a{
    color: rgb(229, 134, 91);
    text-decoration: none;
    
}


nav li a:hover{
    color: white;
}

nav li a:visited{
    color:inherit;
}

/*
div#bannerPic{
	height: 150px;
	background-image: url("../images/bannerImageFiles/church_front_mobile_portrait.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	
}
*/
	
aside{
	background-color: #F5F5DC;
}




/* To create a parallax 

#firstHeroSection{
	background-image: url("../images/auditorium-1920x1080-blurred.jpg") ;
	background-attachment:fixed ;
	background-position:center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height:1080px;
}

*/


#logoFooter{
	width: 12.5%;
	color: rgb(65, 109, 148);
}

div#footerLogo{
	border-left: solid 3px rgb(65, 109, 148);
	padding-top: 7.5%;
	padding-left: 5%;
	margin-left: -1%;
	height:115%;
}

.chrisSignature{
	font-family: 'Indie Flower', cursive;
	font-weight:normal;
}


footer{
	border-top: solid 5px rgb(229, 196, 91);
	background-color: rgb(229, 134, 91);
	color: white;
	margin-top:0%;
	padding-top:1.5%;
	font-size:125%;
	font-weight:bold;

}

footer h1,h2,h3,h4,h5,h6{
	font-size:200%;
}


footer div section ul{
		list-style-type: none;
		margin-left:0%;
		color: white;
	}

#footerBorder{
    clear: both;
    width: 100%;
    height: 50px;
    background-color: rgb(65, 109, 148);
}

/* media query for tablets, laptops and desktops; minimum device width of 720px */
@media only screen and (min-width: 720px){
	
/*
div#bannerPic{
	height: 600px;
	background-image: url("../images/bannerImageFiles/church_front_1600x600.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	
}

*/

/*

.mainContentRow1Cols img{
	width: 100%;
}
*/

	/*Closure bracket of media query */
}