body { margin:0px; height:100%; font-family:'Open Sans'; color:#000;background: #D0D3D1;}
.header {background: #116D96;padding: 15px 10px 5px;width: calc(100% - 20px);}
.container{width:100%; max-width:1100px; margin:auto;}
.logo{width:70px; float:left;}
.logo img{width:100%;}
.headercontent{float:left; width:calc(100% - 150px);}
.headercontent h3{font-family: 'shadows_into_light_tworegular'; text-align:center; font-size:28px; margin:12px 0;}
.headershare{width:79px; float:right;margin-top: 5px;}
.headershare img {padding: 10px 20px;border: 1px solid #004B75;border-radius: 10px;	width: 37px;}
@font-face {
    font-family: 'shadows_into_light_tworegular';
    src: url('../fonts/shadowsintolighttwo-regular-webfont.woff2') format('woff2'),
         url('../fonts/shadowsintolighttwo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.countertitle{text-transform:uppercase; margin-top:0;}
.maincontentarea {background: #D0D3D1;width: 95%;padding:50px 0; margin:auto;}
a { text-decoration: none;}
.clearfix{clear:both;}
.textareabox textarea { border: 1px solid #e9e9e9;}
.hide { display: none;}
.textareabox p.numcount {   color: #000; font-size: 15px; margin-left: 20px; z-index: 5; display: block; position: relative;}
.characterremaining{margin-left: 20px; color: #008000;}
.textareabox {margin: auto;	max-width: 1100px;}
.textareabox p span { font-weight: bold; color:#000;}
.textareabox textarea {width: 100%;	padding: 10px;box-sizing: border-box;margin: 0;	box-shadow: 0 5px 3px -2px rgba(0, 0, 0, 0.1);border: 1px solid #999;font-size: 16px;height: 200px; color:#000;}
::-webkit-input-placeholder { color: #999 !important;}
:-ms-input-placeholder { color: #999 !important;}
::placeholder { color: #999 !important;}
.contentcontainer{width:95%;max-width:1100px;margin:auto;}
.contents{margin-top:50px;}
p{text-align:justify;}
.bottomadd{ width:100%;}
.bottomadd img{ width:100%;}
.footer{background:#333; padding:15px 0;}
.footertext{text-align:center; margin:0; font-size:13px; color:#fff;}

@media (min-width: 100px) and (max-width: 767px){
.leftcol{width:100%; padding:0;}
.rightcol{width:100%; padding:0; text-align:center;}
.headercontent h3{font-family: 'shadows_into_light_tworegular'; text-align:center; font-size:28px; margin:12px 0;}
}
@media (min-width: 100px) and (max-width: 550px){
.logo{width:45px;}
.headercontent h3{font-size:18px; margin:12px 0;}
.headershare{width:40px;}
.headershare img {padding: 5px 10px; width: 20px;}
.headercontent {width: calc(100% - 95px);}
.textareabox textarea{height:100px;}
}

#tabscontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
}  
#tabscontainer > [name="radiogroupfortabs"] {
  position: absolute; 
  visibility: hidden; 
}
/* Set Flexbox ordering of radio items within the #tabscontainer.  A unique rule has to be created for each tab. */
#tabscontainer > #radiofortab1{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;}
#tabscontainer > #radiofortab2{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;}
#tabscontainer > #radiofortab3{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3;}
#tabscontainer > #radiofortab4{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4;}
/* Style all radio group LABELS (by class) to look like tabs.  The currently selected tab is re-styled by another rule near the end.  Could use the background-image attribute here instead of colors in order to give the tabs any appearance desired.  If doing this, then would have to create a separate rule for each tab. */
#tabscontainer > [id^="tab-label"] {
  position: relative;
  top: 0px;
  max-height: 18px;  
  margin: 4px 2px 0 0;
  display: inline-block;  
  padding: 12px 21px;
  border-radius: 5px 5px 0 0;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #999;
  font-size: 12px;
  font-weight: bold;
  text-transform: capitalize;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
/* Style unselected tabs (INPUT element's label) when the pointer hovers over them.  Could use the background-image attribute here instead of colors in order to give the tab any appearance. */
#tabscontainer > [id^="tab-label"]:hover {
  background: #969696;  
}
/* Style all of the content DIVs including setting DISPLAY to None to start with.  The DIV corresponding to the currently selected tab is displayed by the rule near the end. */
#tabscontainer > [id^="tab-content"] {
	-webkit-box-ordinal-group: 999;
	-webkit-order: 999;
	-ms-flex-order: 999;
	order: 999;
	display: none;
	z-index: 2;
	top: 48px;
	width: 100%;
	min-height: 5em;
	overflow: hidden;
	font-size: 14px;
	/* border-width: 1px; */
	/* border-style: solid; */
	/* padding: 10px 25px 25px 25px; */
	/* background: #c9c9c9; */
	margin-top: -1px;
	/* border-radius: 0 5px 5px 5px; */
}
/* Style the currently selected tab (checked INPUT element's label) by first selecting the lone checked item from the radiogroup for the tabs and then select the label (by class) that follows the checked INPUT element (INPUT element within the named group - radiogroupfortabs) in order to apply the following effects to just the selected tab/label.  Could use the background-image attribute here instead of colors in order to give the tab any appearance. */
#tabscontainer > [name="radiogroupfortabs"]:checked + [id^="tab-label"] {
  z-index: 4;
  margin-top: 0px;
  padding-top: 16px;
  background: #fff;
  border-color: #999 #999 #fff #999;
}
/* Display the content DIV that corresponds to the selected tab (because of the limitations of CSS selectors, this could not be done with a single rule.  A unique rule has to be created for each tab/tab content within the tab set.) */
#tabscontainer > #radiofortab1:checked ~ #tab-content1{display: block;}
#tabscontainer > #radiofortab2:checked ~ #tab-content2{display: block;}
#tabscontainer > #radiofortab3:checked ~ #tab-content3{display: block;}
#tabscontainer > #radiofortab4:checked ~ #tab-content4{display: block;}
/* Style a container within the 4th tab to hold media items.  Could have also just put this styling directly on the tab-content4 div instead of creating the #mediacontainer div.  And, while the following are fully name-spaced for explanatory purposes, only the #mediacontainer item is actually needed as long as it is unique on the page. */
#tabscontainer #tab-content4 #mediamatrix{
display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#tabscontainer #tab-content4 #mediamatrix .mediaitem {
  min-width: 21%;
  margin: 15px 0.9% 0;
  padding: 5px;
  border-radius: 10px; /* This and the following line placed here just to show where media items will be displayed */
  background-color: #ddeeff;
  text-align: center;
}
#tabscontainer #tab-content4 #mediamatrix .mediaitem .mediaitemthumb{
  margin-bottom: 5px;
  min-height: 50px;
}
#tabscontainer #tab-content4 #mediamatrix .mediaitem .mediaitemcaption{
  min-height: 20px;
}
/* ----- END OF TAB COMPONENT ----- */

/*----- Separate styling of H2 tag for CodePen demo -----*/
h2{
  font-size: 1rem;
  margin-bottom: -0.75rem;
}