@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

body {
  font-family: Helvetica,Arial,sans-serif;
  margin:0;
}

body em{
	font-style: normal;
	font-weight: bold;
	color:teal;
}



/**********************  Top Logo and Banner **************************/

.LogoBox{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
}


.LogoBox .LogoWrap{margin:0;
}

.Strapline{
  font-family:helvetica,arial;
  font-size: x-large;
  color:teal;
  padding:16px;
}


/*Responsive Styles*/
@media screen and (max-width : 800px){
	.LogoBox{padding:5px;}
  .Strapline{font-size: large;}
	.LogoBox .LogoWrap{margin-left:35%;margin-right:35%}
}


.pagebanner{
  position:relative;
  height: 230px;
  display:block;
  width:100%;
  overflow: hidden;
}

.pagebanner .textoverlay{
  position:absolute;
  top: 50%;
  left: 3%;
  transform: translate(0,-50%);
  background: rgba(0, 0, 0, 0.65);
  /*background-color: black;*/
  /*opacity: 0.75;*/
  color: white;
  padding: 20px;
  font-weight: bold;
  font-size:26px;
}


/*************************    Main Page Layout  **************************************/

.pagecontent{
  display:block;
  float:left;
  width:67%;
  margin:4%;
  min-height: 750px;
  	  text-align: justify;
  text-justify: inter-word;
 	color:black;
 	line-height:1.6;
}

.pagecontent h1{
	font-size: x-large;
	font-weight:bold;
	color:teal;
}
.pagecontent h2{
  margin-top: -1em;
  font-size: large;
  font-weight:bold;
  color:black;
  font-style: italic;
}

.rightcol{
  display:block;
  float:right;
  width:17%;
  margin:4%;
}

.rightcol h1{
	font-size: large;
	font-weight:bold;
	color:teal;
}

.rightcol .selbut {
  float: none;
  color: black;
  width: 100%;
  padding: 16px;
  padding-left: 8px;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: #ddd;  
}

.rightcol a {
  float: none;
  color: black;
  width: 100%;
  padding: 16px;
  padding-left: 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.rightcol a:hover {
  background-color: #ddd;
}

/*Responsive Styles*/
@media screen and (max-width : 600px){
  .pagecontent{float:none; width:90%; margin:auto;}
  .rightcol{display:none}
}


.footer{
  clear:both;
  width: 100% ;
  display:block;
  min-height:85px;
  background-color: lavender;
}


/********************* top navigation menu **********************************/


.navbar {
  position:sticky;
  top:0;
  clear:both;
  min-height:50px;
  /*overflow: hidden;*/
  background-color: teal;
  z-index:1;
}

.MenuButt{
  display: none;
  float: left;
  font-size: xx-large;
  color: white;
  text-align: left;
  padding-left: 16px;
  padding-top:4px;
  padding-bottom: 4px;
  text-decoration: none;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

.dropdown {
  display: block ;
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  text-align: center;
  padding: 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #00cccc;
}


.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;
  overflow: hidden;
}

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

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

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



/*Responsive Styles*/
@media screen and (max-width : 720px){

    .navbar{width:100%;
        overflow:hidden;
        min-height:0;
    }

    .MenuButt{
        display:block;
        width: 100%;      
    }

    .navbar a, .dropdown{
      display: none ;
    }


    /*Make dropdown links appear inline*/
    .navbar .dropdown, .navbar a, .dropdown .dropbtn, .dropdown .dropdown-content {
        position: static;
        padding:0;
        width: 100%;
    }
    /*Create vertical spacing*/
    .navbar a, .dropdown .dropbtn, .dropdown .dropdown-content a {
        padding-top: 8px ;
        padding-bottom: 8px ;
        /*margin-bottom: 1px;*/
    }
    /*Make all menu links full width*/
    .dropdown-content a, .navbar a, .dropbtn {
      text-align: center;
    }

}

.navbar:hover a, .navbar:hover .dropdown{
  display: block;
}


/****** Text Elements ***********************************************************************/

.TextBlock{
	  text-align: justify;
  text-justify: inter-word;
	margin:24px;
	display: block;
	width: 75%;
	margin:auto;
 	/*background-color: rgb(250,250,250);*/
 	color:black;
 	padding:12px;
 	line-height:1.6;
}

/*Responsive Styles*/
@media screen and (max-width : 600px){
	.TextBlock{width:90%;}
}

.TextBlock h1{
	font-size: x-large;
	font-weight:bold;
	color:teal;
}


.TextBlock > a, .pagecontent > a, .EventbriteButton {
	display:inline-block;
  border: 2px solid white ;
  background-color: teal ;
  padding: 6px;
  border-radius:10px;
  text-align:center;
  color:white;
  text-decoration: none;
  margin-top: 18px;
  margin-bottom: 18px;
}

.EventbriteButton{
  font-size: medium;  
}

.rightcol a.DispButt{
  display:inline-block;
  width:100%;
  border: 2px solid teal ;
  background-color: white ;
  padding: 6px;
  border-radius:10px;
  text-align:center;
  color:black;
  text-decoration: none;
  margin-top: 6px;
  margin-bottom: 6px;
}


.TextBlock > a:hover, .pagecontent > a:hover, .EventbriteButton:hover{
  background-color: black;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  color:white;
}

.rightcol a.DispButt:hover{
  background-color: teal;
  color:white;
}


/******************* floating block elements *************************************************/

.DisplayCont{
  display:flex;
  width 100% ;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: flex-start;
}

.DisplayBox{
  position:relative;
  width:23vw;
  height:15vw;
  border: 2px solid teal ;
  /*background-color: white;*/
  padding: 8px;
  margin:18px ;
  padding:18px ;
  text-align:center;
}

.DisplayBox img{
    position:absolute;
    width:55%;
    left:0px;
    bottom:0px;
    z-index:-1;
}

.DisplayBox h1{
	font-size:larger;
	font-weight: bold;
}

/*Responsive Styles*/
/*@media screen and (max-width : 1050px){*/
/*.DisplayBox{width:60vw;height:20vw;}*/
/*}*/


@media screen and (max-width : 950px){
.DisplayBox{width:60vw;height:32vw;}
}


/*Responsive Styles*/
@media screen and (max-width : 600px){
.DisplayBox{width:80vw;height:35vw;padding:24px;}
}


.DisplayBox a{
  position:absolute;
  bottom:7%;
  width:60% ;
  left:50%;
  transform: translate(-50%,0);
  border: 2px solid teal ;
  background-color: rgba(256,256,256,0.6) ;
  padding: 6px;
  border-radius:10px;
  text-align:center;
  color:black;
  text-decoration: none;
}


.DisplayBox:hover{
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.DisplayBox:hover a{
  background-color: teal;
  opacity:100%;
  color:white;
}



/******************************* Sermon display ***********************************************/


.SermonBox {display:block; width:100%; 
	max-width:825px; 
	position:center; margin:auto; margin-bottom: 12px; margin-top:12px;  
 }
.SermonBox .Title {display:block;width:100%;margin:0px;font:arial;background-color:teal;border:1px solid teal; color:white;padding:7px}
.SermonBox .Content {display:block; width:100%; margin:0px;border:1px solid teal;padding:7px;}
.SermonBox > .Content > .SermonVid {position:relative;width:40%;height:0;padding-bottom:22.5%;display: block;float:right}
  .SermonVid > iframe, .SermonVid > img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

/*  .SermonVid > img {
  position: absolute;
  width: 100%;
  height:100%;
  left: 0; top: 0;
}
*/

.SermonBox > .Content > .Passage {font-weight: bold; color: teal}
.SermonBox .SermDate{float:left;}
.SermonBox .SermSpeaker{font-style: italic;border-right: 10px solid white;}


.SermonBox .DownloadButt {
	box-sizing: border-box;
	display:table-cell;
  background-color: black ;
  border: 10px solid white;
  width:60px;
  height:60px;
  /*line-height: 35px;*/
  vertical-align: middle ;
  /*padding: 6px;*/
  border-radius:50%;
  text-align:center;
  color:white;
  text-decoration: none;
}

/*Responsive Styles*/
@media screen and (max-width : 600px){
  .SermonBox {width:100%;}
  .SermonBox > .Content > .SermonVid {width:88%;padding-bottom: 49.5%; float:none; margin:auto;position:center;}
}

Table.SermonTable {
  position:relative;
  /*top:0px;*/
  align:center;
  width:100%;
     font-size:inherit;
    color:black;
border-collapse:collapse ;
 }

Table.SermonTable tr {
    vertical-align:center; 
  text-align:left;
    border-bottom:2px rgb(240,240,240) solid;
    border-top:2px rgb(240,240,240) solid;
    background:white;
   border-spacing:0pt ;
 }

 Table.SermonTable td {
  padding:0.6em ;}

 Table.SermonTable .TitleCell{
 	background-color: teal ;
 	color: white;
 	font-weight: bold;
 }


Table.SermonTable a:link { color:black; text-decoration:none; }
Table.SermonTable a:hover { color: white; text-decoration:none; }
Table.SermonTable a:visited { color:black; text-decoration:none;}
Table.SermonTable a:hover { color: white; text-decoration:none; }
Table.SermonTable a:active { color: white; text-decoration:none; }

Table.SermonTable tr:hover {
	background-color: #ddd;
}

 Table.SermonTable .TitleCell:hover{
 	background-color: teal ;}


/***** block picture with caption text next to it ****************/

.ProfBox{clear:both;display:inline-block; width:100%;margin-top: 8px; margin-bottom: 8px}
.ProfPicL{float:left;width:25%;margin:25px;margin-left:0;min-width:70px;}
.ProfPicR{float:right;width:25%;margin:25px;margin-right: 0;min-width:70px}