@import url('https://fonts.googleapis.com/css2?family=Lato&family=Quicksand&display=swap');

body {
	padding: 0;
	margin: 0;
	font-family: 'Quicksand', sans-serif!important;
	font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  height: 100vh; 
}

html {	font-size: 10px; height: 100%;}

* { padding: 0; margin: 0;}

p{ font-size: 1.8rem; line-height: 2.8rem;padding-bottom: 1rem; }

.clear{clear: both;}


.logo { display: flex; justify-content: flex-start;}

.logo img{width: 70%; height: auto; padding: 20px 0; }

.banner {height: auto; display:flex; align-items: center; z-index:100; position: relative; }

.banner img{width: 100vw; height: auto;z-index: 0;}

.banner h1 {
    font-size: 3vw;
    position: absolute;
    top: 50%;
    left: 8.5%;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    transform: translateY(-50%);
}
.banner h1 span{color: #cf3b2f;}

.menu {background: #243238; height: 50px;  line-height: 50px; font-size:1.5rem; display: flex; }

.menu ul.listing {display: flex; list-style: none;  }

.menu ul.listing li{padding: 0 0px; }

.menu ul.listing li a { display: block; color: #fff; text-decoration: none; padding: 0 20px;  }

.menu ul.listing li a:hover { background-color: #fff; color:#243238;  }

.menu ul.listing li a.active { background-color: #fff; color:#243238;  }


.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  margin-top: 50px;
  margin-bottom: 50px;
}

.content_bg {background:url(../images/content_bg.jpg)#F9F6F6 no-repeat bottom left; min-height: 719px; }

.President {background:url(../images/Prasident.png) no-repeat 50% 50%;  min-height: 720px!important; background-size:65%; background-position: left bottom;}

h2.title {font-size: 3.5rem; font-weight: 600; color: color: #0b3e5b; }

h2.title span{ font-size: 2.2rem; color: #cf3b2f;  }

/*------Accordion starts------*/
.panel,
.panel-body {
 box-shadow: 0 0px 10px #e2e2e2!important;
 border:0!important; 
}
.panel-default>.panel-heading {
    color: #333;
    background-color: #fff!important;
    border-color: #ddd;
}

.panel-group .panel {
    margin-bottom: 15px!important;
    border-radius: 10px!important;
}

.panel-group .panel-heading {
  padding: 0; 
}

.panel-group .panel-heading a {
  display: block;
  padding: 15px 15px;
  text-decoration: none;
  position: relative;
  font-size: 23px;
  font-weight: 500;
  
}

.panel-group .panel-heading a:after {
  content: '-';

  float: right;
  border: 1px solid #449c38;
    border-radius: 100%;
    padding: 0 9px;
     font-size: 23px;
     font-weight: bold;
     color: #449c38;
}

.panel-group .panel-heading a.collapsed:after {
  content: '+';
  border: 1px solid #449c38;
    border-radius: 100%;
    padding: 0 6px;
     font-weight: bold;
     color: #449c38;
}


}
/*--video-popup---*/


[aria-expanded=false]>.expanded, [aria-expanded=true]>.collapsed {
    display: none;
}


/*------Accordion ends------*/

.box a{height: 70px; width: 100%; border-radius: 20px; display: flex; 
align-items: center; font-size: 2rem; justify-content: flex-start; line-height:2.3rem; 
background: #ec3233; color: #fff; padding-left: 15px; margin-bottom: 20px; }

.box a:hover { background: #be1a1b; color: #fff; text-decoration: none; }

.box a img{padding-right: 15px; }

.purple a{background: #ae12d5; border-radius: 20px; z-index: 1000}

.purple a:hover {background: #920fb3;}

.blue a{background: #4a2eb6; border-radius: 20px; z-index: 1000}

.blue a:hover {background: #2b1190;}

.meroon a{background: #c31263; border-radius: 20px; z-index: 1000}

.meroon a:hover {background: #910c49;}

.skyblue a{background: #1c18eb; border-radius: 20px; z-index: 1000}

.skyblue a:hover {background: #0b08a7;}

.orange a{background: #f18000; border-radius: 20px; z-index: 1000}

.orange a:hover {background: #d37408;}

.darkgreen a{background: #0a8f8e; border-radius: 20px; z-index: 1000}

.darkgreen a:hover {background: #046463;}

.green a{background: #66cc3a; border-radius: 20px; z-index: 1000}

.green a:hover {background: #3a8b17;}

.obituary { 
  padding: 15px; 
  border-radius: 10px; 
  border: 1px solid rgba(51, 51, 51, 0.21);
  display: flex;
  margin-bottom: 30px;
}

.corner-radius {border-radius: 10px;-webkit-border-radius: 10px;-ms-border-radius: 10px;}
[aria-expanded="false"] > .expanded,
[aria-expanded="true"] > .collapsed {
    display: none;    
}

.pointer {
    cursor: pointer;
}

.readmore {
    color: #e2602c;
    text-decoration:none;
    font-weight: 600;
}
.readmore:hover {
    color: #e2602c;
    text-decoration: underline;
}

.img_spacer {margin-top: 85px;}



.obituary .img-box { max-width: 100px; flex: 0 0 100px; }

.obituary .img-box img{max-width: 100%;}

.obituary .content-box {margin-left: 20px; }
.obituary .content-box h3 {font-weight: bold; padding-bottom: 15px;}
.obituary .content-box p { font-size: 14px;}

.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 0px;
}

.footer_1 {background: #353847; height: 85px; color: #fff; font-size: 1.2rem; line-height: 85px; text-align: center;}

/*------ Media starts  ------*/
@media only screen and (max-width: 767px) {

.President {background:url(../images/Prasident.png) no-repeat 50% 50%;  min-height: 360px !important; background-size:45%; background-position: center bottom;}
.align { text-align: center;}
.content_bg {background:#F9F6F6; min-height: 719px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

.President {background:url(../images/Prasident.png) no-repeat 50% 50%;  min-height: 560px !important; background-size:35%; background-position: center bottom;}
.content_bg {background:#F9F6F6; min-height: 719px; }

}

.col { padding: 7px !important;}

.column-box {
	text-align: center;
	border: 1px solid #4285f4;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0px 0px 5px 5px rgb(183 183 183 / 15%);
	min-height: 300px;
}

.column-box p{ text-align:center; line-height:25px}

.venue { 
padding-top: 70px;
padding-bottom: 70px;
}
.radius-img {
border-radius: 50px;
 }
p { text-align:justify !important;   }