/*** styling for MERCY site **/
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding-top: 25px;
	background: tan;
	color: #FFF;
	font: 1.3em/1.6 sans-serif;
}
.wrap {
	margin: auto;
	width: 95%;
}

header {
  background: green;
  border-color: darkgreen;
}

#logo {
  text-align: center;
  margin: 0;
}

/*
h1 {
	margin: 40px 0 10px;
	text-align: center;
	color: #384047;
}
*/

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

h3 {
  margin: 0 0 1em 0;
}


/** coding for Header, Nav **/

.main img {
	padding: .5em;
	width: 100%;
	border: none;
/*	border: 1px solid rgba(34,34,34,.3); */
}

.main-header {
/*	background: #34495E;   dark blue */
	background: darkgreen;  
	text-align: center;
}
.logo, 
.main-nav a {
	display: inline-block;
	color: #FFF;
	text-decoration: none;
}
.hdr-txt {
	display: inline-block;
	float: left;
	color: #FFF;
	font-size: .7em;
	line-height: .7rem;
}
.main-nav a {
	padding: 0 .75em;
	border-right: 1px dotted;
	color: rgba(255,255,255, .8);
	font-size: .7em;
	line-height: 1rem;
}
.main-nav a:hover {
	text-decoration: underline;
	background: green;  
	border-radius: 5px;
}
.main-nav a:last-child {
	border-right: none;
}
.content, 
.main-header {
	overflow: hidden;
}

.secondary, 
.extra,
.full img {
	border: none;
/*	border: 1px solid rgba(34,34,34,.3); */
}


/* TABz */
.main-tabs {
	background: darkgreen;  
	text-align: center;
	width: 100%;
}
.tabs-nav a {
	display: inline-block;
	color: #FFF;
	text-decoration: none;
}
.tabs-nav a {
	padding: 0 .75em;
	border-right: 1px dotted;
	color: rgba(255,255,255, .8);
	font-size: .7em;
	line-height: 1rem;
}
.tabs-nav a:hover {
	text-decoration: underline;
	background: green;  
	border-radius: 5px;
}
.tabs-nav a:last-child {
	border-right: none;
}
.main-tabs {
	margin-bottom: 5px;
	padding: 1%;
	border-radius: 25px;
}


/* Section TABz */
.secn-tabs {
	background: green;  
	text-align: center;
}
.secn-nav a {
	display: inline-block;
	color: #FFF;
	text-decoration: none;
}
.secn-nav a {
	padding: 0 .50em;
	border-right: 1px solid;
	color: rgba(255,255,255, .8);
	font-size: .7em;
	line-height: .7rem;
}
.secn-nav a:hover {
	text-decoration: underline;
	background: grey;  
	border-radius: 5px;
}
.secn-nav a:last-child {
	border-right: none;
}
.secn-tabs {
	margin-bottom: 5px;
	padding: 1%;
	border-radius: 25px;
}


/** Coding for sections **/
.col {
	height: 100%;
}
.main {
	background: green;
}
.secondary {
	background: lightgreen;
}
.extra {
	background: darkgreen;
}
.full {
      width: 100%;
	background: green;
}

.main-footer {
	background: gray;  
/*	background: #95A5A6;     blue-ish grey */
	text-align: center;
}

/**********************************
FOOTER
***********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
} 

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

.main-header, 
.main-footer, 
.col {
	margin-bottom: 15px;
	padding: 2.15%;
	border-radius: 5px;
}

.Cont_Text, 
.Cont_secn1, 
.Cont_secn2,
.Cont_secn3,
.Cont_secn4 {
	background: #FFFFFF;
	font-size: .7em;
	line-height: 1rem;
	color: #000; 
	height: 100%;
	margin-bottom: 1%;
	padding: 1%;
	border-radius: 5px;
      width:   49%; 
}
.Cont_secn1,
.Cont_secn3 {
  float: left;
}
.Cont_secn2,
.Cont_secn4 {
  float: right;
}

.Cont_Full {
	background: #FFFFFF;
	font-size: .7em;
	line-height: 1rem;
	color: #000; 
	height: 100%;
	margin-bottom: 1%;
	padding: 1%;
	border-radius: 5px;
      width:  100%; 
}

.Cont_Text {
      width:  100%; 
}

.Cont_ListR,
.Cont_ListL,
.Cont_List {
	margin-top: 3%;
	background: #FFFFFF;
	color: #000; 
	height: 100%;
	margin-bottom: 1%;
	border-radius: 5px;
      width:   100%; 
}

.Cont_Text, 
.Cont_ListR,
.Cont_ListL,
.Cont_List {
	font-size: .8em;
	line-height: 1.3rem;
	padding: 5%;
} 

/**********************************
PAGE: ABOUT
***********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

/**********************************
PAGE: CONTACT
***********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../images/phone.png');
}

.contact-info li.mail a {
  background-image: url('../images/mail.png');
}

.contact-info li.mesg a {
  background-image: url('../images/mesg.png');
}

.contact-info li.post a {
  background-image: url('../images/post.png');
}

/* ====================================================================
   Media Queries
   ================================================================= */
/* Phone view by default */

@media only screen and (max-width: 785px) {
  .hdr-txt {
    display: none;
  }
}

/** for Tablets view, **/

/*** Sections display ***/

@media only screen and (min-width: 481px) {

      .col {
		float: left;
	}
	.main {
		width: 65.957446808511%;
	}
	.secondary {
		width: 31.914893617021%; 
		margin-left: 2.127659574468%;
	}
	.extra {
            width: 99%;
	}

  .Cont_ListL {
    width: 49%; 
    float: left;
  }
  .Cont_ListR {
    width: 49%; 
    float: right;
  }
}

/*** for Tablets view; Pages, Header Nav and Menu ***/

@media screen and (max-width: 769px) and (min-width: 480px) {

  /**********************************
  Menu: TABLET view
  ***********************************/

  #menu ul {
    display:none;
  }
	
  /**********************************
  Three COLUMN LAYOUT for Galley pages
  ***********************************/
  #gallery li {
    width: 28.3333%;
  }
  
  #gallery li:nth-child(4n) {
    clear: left;
  }  
  
  /**********************************
  TWO COLUMN LAYOUT for basic pages
  ***********************************/
  #info1 {
    width: 50%;
    float: left;
  }
  
  #info2 {
    width: 40%;
    float: right;
  }
  
  /**********************************
  PAGE: ABOUT
  ***********************************/
  
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

/* for Desktop view */

@media only screen and (min-width: 769px) {	
  .main {
    width: 40.425531914894%;
  }
  .extra {
    display: block;
    width: 23.404255319149%;
    margin-left: 2.127659574468%;
  }
  .Cont_secn3 {
    width:  99%; 
  }
  .Cont_secn4 {
    float: left;
    width:  99%; 
  }

  /**********************************
  HEADER
  ***********************************/
	.logo, .hdr-txt {
		float: left;
	}
	.main-nav {
		float: right;
	}
  
  h1 {
    font-size: 2.5em;
  }
  
  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }
  
/* bottom: #599a68; (green) */
  
  /**********************************
  Menu: PC view
  ***********************************/
  
  #menu select, #menu button {
    display:none;
  }

  /**********************************
  TWO COLUMN LAYOUT for basic pages
  ***********************************/
  #info1 {
    width: 50%;
    float: left;
  }
  
  #info2 {
    width: 40%;
    float: right;
  }
  
  /**********************************
  PAGE: ABOUT
  ***********************************/
  
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

  /**********************************
  Footer: Social Media links
  ***********************************/
  .social-icon {
    width:  60px;
    height: 60px;
  }

}