@charset "utf-8";
/* CSS Document */

h1 {
	font-weight: bolder;
}

.light {
	font-size: 50%;
	font-weight: 300;
	font-style: italic;
}

/* Navbar */
#mcnavbar {	
	font-weight: bolder;
	font-size: 18px;
}
#navbar li .nav-item {	
	color: #FFF;
}
.mcstyle13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

#mcbanner {
	width: 100%;
}
@media (min-width: 992px){
    .navbar li {
        margin-left : .5em;
        margin-right : .5em;
	color: #FFF;
    }
}

.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.5);
}

/* Blog */
#blog {
	margin-top: -30px;
}

/* Contact */
#contact .hr {
	border-top: 1px solid #000; 
	width:50%;
}
#contact a {
	color: #000;
}
#contact a:link {
	text-decoration:none;
}
.box1 {
	background: rgb(192, 192, 200, 0.6);
	padding-bottom: 20px;
}
.box2 {
	background: rgb(255, 0, 0, 0.6);
	padding-bottom: 20px;
}

/* Footer */
section {
    padding: 1px 0;
}
section .section-title {
    text-align: center;
    color: #343A40;
    margin-bottom: 1px;
    text-transform: uppercase;
}
#footer {
    background: #343A40 !important;
    margin-top: 40px;
}
#footer h5{
	padding-left: 10px;
    border-left: 3px solid #eeeeee;
    padding-bottom: 6px;
    margin-bottom: 20px;
    color:#ffffff;
}
#footer a {
    color: #ffffff;
    text-decoration: none !important;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
#footer ul.social li{
	padding: 3px 0;
}
#footer ul.social li a i {
    margin-right: 5px;
	font-size:25px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.social li:hover a i {
	font-size:30px;
	margin-top:-10px;
}
#footer ul.social li a,
#footer ul.quick-links li a{
	color:#ffffff;
}
#footer ul.social li a:hover{
	color:#eeeeee;
}
#footer ul.quick-links li{
	padding: 3px 0;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.quick-links li:hover{
	padding: 3px 0;
	margin-left:5px;
	font-weight:700;
}
#footer ul.quick-links li a i{
	margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
    font-weight: 700;
}
@media (max-width:767px){
	#footer h5 {
    padding-left: 0;
    border-left: transparent;
    padding-bottom: 0px;
    margin-bottom: 10px;
}
}

/* Recource Section */
.module {
    position: relative;
    padding: 70px 0px 70px 0px;
}
.services .service-item {
    background: whitesmoke;
    padding: 0% 8% 12% 8%;
    text-align: center;
    line-height: 1.6;
    font-size: 14px;
    position: relative;
    z-index: 10;
}
.shadow-hover {
    transition: all 0.4s linear;
}

.shadow-hover:hover {
    box-shadow: 0px 10px 25px rgba(232,109,32,0.15);
}
.services {
    padding-top: 0;
}
.services .service-item .fa {
    width: 100px;
    height: 100px;
    color: white;
    background: #E86D1F;
    font-size: 45px;
    padding-top: 25px;
    border-radius: 100px;
    margin-top: -40px;
    margin-bottom: 30px;
    border: 5px solid white;
    transition: all 0.4s;
}
.services .service-item h4 {
    font-weight: 700;
    font-size: 18px;
    color: #323746;
    margin-bottom: 20px;
}

/* Modal Section */
.modal-title {
	font-weight: bolder;
	color: #E86D1F;
	font-family: 'Josefin Slab', serif, cursive;
}

/* Modal #3 */
#myModal3 .p {
	font-weight: bold;
}

/* Modal #6 */
#myModal6 h6 {
	padding-top: 10px;
	color: red;
	font-style: italic;
}
#myModal6 p {
	font-weight: bolder;
}

/* Card Section */

.card-body {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}
.card {
	width: 100%;
	margin: 10px;
	border-radius:0; 
	box-shadow: 0 3px 5px rgba(232,109,32,.4); 
}
.card:hover {
   border: 1px solid #eb6e1f;
}
.card-body:hover {
   background-color: rgba(235,110,31,0.4);
   color: rgb(86, 86, 86); 
}

.btn-outline-custom{
	color: #000;
	background-color: #a3bf97;
}
.btn-outline-custom:hover{
	background-color: #e86d20;
	color: #fff;
}
.force-to-bottom {
    position:absolute;
    margin: -20px;
    bottom: 30px;
}
.address {
	font-size: 80%;
}
#mccard {
	margin-top: 20px;
	margin-bottom: 40px;
}
#mccard .card {
	min-height: 100px;
	width: 180px;
}
#mccard .card h6 {
	font-size: 80%;
}

/* Header Section */
#mcheader {
	box-shadow: 0 3px 5px rgba(0,0,0,.1)
}
#mcheader {
  position: relative;
  width: 100%;	
  height: 200px;	
}
#mcheader .center {
  	position: absolute;
  	right: 46%;
	top: 35%;
}
#mcheader .left {
  	position: absolute;
  	top: 35%;
	width: 40%;
}
#mcheader .right {
  	position: absolute;
  	top: 4%;
  	left: 68%;
	padding: 30px;
}
#mcheader {
	background: #355c7d;  
    background: 
		linear-gradient(
        to left,
        rgba(232, 109, 32, 0.8), /* #d66d75       #E86D20 */
        rgba(185, 83, 19, 0.7) /* #e29587 */
        ),
        url('https://cdn.stocksnap.io/img-thumbs/960w/IZJKSG1FLK.jpg') no-repeat left top;
  	background-size: cover;
	z-index: 0; /* bottom layout */
}
#mcheader .caption {
	z-index: 5; 
  	text-align: center;
  	color: #fff;
}
#mcheader .caption .title {
	margin-bottom: 1.5rem;
} 
#mcheader .caption .text {
	margin-bottom: 1.5rem;
} 
#mcheader .caption .action {
	margin-bottom: 1rem;
	padding-left: 3rem;
	padding-right: 3rem;
}

/* On screens that are 992px or less */
@media (max-width: 992px) {
		#mcheader .right {
		position: absolute;
		top: 1%;
		left: 65%;
}
		#mcheader .left {
		position: absolute;
		top: 30%;
		width: 45%;
}
		#mcheader .center {
		position: absolute;
		right: 38%;
		top: 40%;
}
}

/* On screens that are 600px or less */
@media (max-width: 600px) {
	#mcheader .right {
		position: absolute;
		top: 5%;
		left: 42%;
}
	#mcheader .left {
		position: absolute;
		top: 1%;
		width: 45%;
}
	#mcheader .center {
		position: absolute;
		right: 64%;
		top: 60%;
}
}

/* Accessibility Section */
#mcresource .logo {
	padding-top: 30px;
   
}
#mcresource .no-margin {
    margin:0px;
    padding:0px;
}
#mcresource h4 {
    font-weight: bold;
}
#mcresource p {
    font-style: italic;
}
#mcresource .btn {
	
}
#mcresource .cat h6 {
	font-weight: bold;
	padding-left: 10px;
}

.modal-body h6 {
	font-weight: bold;
}

/* On screens that are 992px or less */
@media (max-width: 992px) {
	#mcdirectory .overview-img {
		padding-top: 25px;
}
}

/* On screens that are 600px or less */
@media (max-width: 600px) {
	#mcdirectory .overview-img {
		padding-top: 10px;
		padding-left: 50px;
}
	#mcdirectory .overview-title {
		padding-top: 10px;
}
	#mcdirectory h5 {
		padding-bottom: 10px;
}
}

/* modal printer */
@media print { 
	.modal-header {
    margin-top: -30px;
  }
  .modal-body {
    width:993px;
    margin-left: -260px;
  }
	.modal-open {
    overflow: auto;
  }
  .modal-open .container {
    display: none;
  }
  .modal-backdrop,
  .modal {
    position: static;
    bottom: auto;
  }
  .modal-content {
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    border: none
  }
  .modal-header button.close {
    display: none;
  }
  /* hacks below resolve issues with block display of .modal-content
     in browsers other than chrome (and maybe safari)
     (see https://browserstrangeness.github.io/css_hacks.html) */
  /* ie hack */
  .modal-content {
    display: inline\0; /* not a typo */
  }
  /* firefox hack */
  @-moz-document url-prefix() {
    .modal-content {
      display: inline;
    }
  }
  /* edge hack */
  @supports (-ms-ime-align:auto) {
    .modal-content {
      display: inline;
    }
  }
  /* display: flex causes print problems in most browsers */
  .row {
    display: inline;
  }
}

/* Member Section */
#mcmember .bg-custom {
	background-color: #E86D1F;
}
#mcmember .far {
	color: #E86D1F;
}
#mcmember .card {
	min-height: 100px;
}


/* About Section */
#about .card-block {
	width: 100%;
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border:thick;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
     
}

#about h2 {
	font-style:italic;
}

/* social sidebar */
.icon-bar {
  position: fixed;
  top: 152px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
    background-color: #000;
}{
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bob {
  position: relative;
  top: 100px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bob a {
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bob a:hover {
    background-color: #000;
}{
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.instagram {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

/* Event Section */
 .event-list {
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	.event-list > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 20px;
	}
	.event-list > li > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: rgb(197, 44, 102);
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.event-list > li:nth-child(even) > time {
		background-color: rgb(165, 82, 167);
	}
	.event-list > li > time > span {
		display: none;
	}
	.event-list > li > time > .day {
		display: block;
		font-size: 24pt;
		font-weight: 100;
		line-height: 1;
	}
	.event-list > li time > .month {
		display: block;
		font-size: 14pt;
		font-weight: 500;
		line-height: 1;
	}
	.event-list > li time > .year {
		display: block;
		font-size: 16pt;
		font-weight: 500;
		line-height: 1;
	}
	.event-list > li > img {
		width: 100%;
	}
	.event-list > li > .info {
		padding-top: 5px;
		text-align: center;
	}
	.event-list > li > .info > .title {
		font-size: 17pt;
		font-weight: 700;
		margin: 0px;
	}
	.event-list > li > .info > .desc {
		font-size: 13pt;
		font-weight: 300;
		margin: 0px;
	}
	.event-list > li > .info > ul,
	.event-list > li > .social > ul {
		display: table;
		list-style: none;
		margin: 10px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
		
	}
	.event-list > li > .social > ul {
		margin: 0px;
	}
	.event-list > li > .info > ul > li,
	.event-list > li > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
        padding: 3px 0px;
	}
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 100%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	} 
    .event-list > li > .social > ul > li {    
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        padding: 3px 0px;
	} 
	.event-list > li > .info > ul > li:hover,
	.event-list > li > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.edit a,
	.confirm a,
	.delete a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.confirm a {
		color: rgb(79, 213, 248) !important;
	}
	.delete a {
		color: rgb(221, 75, 57) !important;
	}
	.edit:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.confirm:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(79, 213, 248) !important;
	}
	.delete:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}
	
	@media (min-width: 992px) {
		.info > h6 {
			font-size: 90%;
		}
	}
	
	@media (min-width: 768px) {
		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			height: 120px;
			padding: 0px;
		}
		.event-list > li > time,
		.event-list > li > img  {
			display: inline-block;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			float: left;
		}
		.event-list > li > .info {
			background-color: rgb(245, 245, 245);
			overflow: hidden;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			height: 120px;
			padding: 0px;
			margin: 0px;
		}
		.event-list > li > .info {
			position: relative;
			height: 120px;
			text-align: left;
			padding-right: 40px;
		}	
		.event-list > li > .info > .title, 
		.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list > li > .social {
			background-color: rgb(255, 255, 255);
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .event-list > li > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.event-list > li > .social > ul > li {			
			display: block;
            padding: 0px;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 8px;
		}
	}

.address {
	font-size: 80%;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  padding: 6px 12px 9px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index:1000;
}


.clickable {
    cursor: pointer;
}

.orange {
    color: rgba(228,109,46,1.00);
}

.orange_bk {
    background-color: rgba(228,109,46,1.00);
}

.white {
    color: rgba(255,255,255,1.00);
}

.white_bk {
    background-color: rgba(255,255,255,1.00);
}


.black {
    color: rgba(0,0,0,1.00) !important;
}

.black_bk {
    background-color: rgba(0,0,0,1.00) !important;
}

.swich_to_grey {
  background-color: rgba(228,109,46,1.00); 
}

.swich_to_grey:hover {
  background-color: rgba(126,127,128,1.00); 
}

.swich_to_orange {
  background-color: rgba(126,127,128,1.00); 
}

.swich_to_orange:hover {
  background-color: rgba(228,109,46,1.00); 
}

.search_input {
    margin-bottom: 10px;
}

input[type=submit] {
    padding: 15px 15px !important;
    background: #eb6e1f;
    border: 0 none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 26px;
    font-weight: bold;
    color: rgba(255,255,255,1);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
input[type=reset] {
    padding: 4px 8px !important;
    background: #7E7F80;
    border: 0 none;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
    font-weight: bold;
    color: rgba(255,255,255,1);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}


.carousel-control-next-icon {
    background-image: none !important;
}
    
.carousel-control-prev-icon {
    background-image: none !important;
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    color: rgba(228,109,46,1.00) !important;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}


.carousel-control-next, .carousel-control-prev {
    width: 10% !important;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 43px !important;
    height: 43px !important;
}

#myCarousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 1;
    border: 3px solid #eb6e1f;
}


a.link_button2:hover {
    padding: 2px 7px;
    text-decoration: none;
    text-transform: uppercase;
    background: #000000;
    border: 0 none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    white-space: nowrap;
}


a.link_button2 {
    padding: 2px 7px;
    text-decoration: none;
    text-transform: uppercase;
    background: #eb6e1f;
    border: 0 none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    white-space: nowrap;
}