/* Component Needs */
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);

/* Visual Styles */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/*  Tab 1  Responsive */
.jt-tab1 > input,
.jt-tab1 section > div { display: none; }

#topic1:checked ~ section .topic1,
#topic2:checked ~ section .topic2,
#topic3:checked ~ section .topic3 { display: block; }

#topic1:checked ~ nav .topic1,
#topic2:checked ~ nav .topic2,
#topic3:checked ~ nav .topic3 { color: red; }

.jt-tab1 { width: 100%; margin: 0 auto; }
.jt-tab1 ul { list-style: none; margin: 0; padding: 0; }
.jt-tab1 ul li label { font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.3px; float: left; padding: 15px 25px; border: 1px solid #00B0F0; border-bottom: 0; background: #000066; color: #fff; font-weight:800; cursor: pointer; }
.jt-tab1 ul li label:hover { background: #ADFF2F; color: #000; }
.jt-tab1 ul li label:active { background: #ffffff; }
.jt-tab1 ul li:not(:last-child) label { border-right-width: 0; }
.jt-tab1 section { font-family: "Archivo", sans-serif; font-size: 1.0em; clear: both; }
.jt-tab1 section div { padding: 20px; width: 100%; border: 1px solid #00B0F0; background: #fff; line-height: 1.2em; letter-spacing: 0.3px; color: #444; }
.jt-tab1 .contentimg { max-width:73%; max-height: 73%; border:0; }
.jt-tab1 .imgcontainer { background-image: url(../images/poled.png); width: 100%; height: 50vh; background-size: 100% 100%; border: 0px solid #000066; }
.jt-tab1 .poledimg { background-image: url(../images/poled.png); }
.jt-tab1 .tadfimg { background-image: url(../images/tadf.png); } 
.jt-tab1 .pvimg { background-image: url(../images/pv.png); }
.jt-tab1 .opvimg { background-image: url(../images/opv.png); }

#topic1:checked ~ nav .topic1 label,
#topic2:checked ~ nav .topic2 label,
#topic3:checked ~ nav .topic3 label { background: #00B0F0; color: #111; position: relative; cursor: not-allowed; }

#topic1:checked ~ nav .topic1 label:after,
#topic2:checked ~ nav .topic2 label:after,
#topic3:checked ~ nav .topic3 label:after { content: ''; display: block; position: absolute; height: 2px; width: 100%; background: #ffffff; left: 0; bottom: -1px; }

@media screen and (max-width: 45em) {
/* hide unecessary label/control pairs */
.jt-tab1 ul li label { display: none; } 
.jt-tab1 section > div { display: block; } }

/* usage html */
/*
<h1>PureCSS Tabs</h1>

<div class="jt-tab1">
  <input checked="checked" id="topic1" type="radio" name="pct" />
  <input id="topic2" type="radio" name="pct" />
  <input id="topic3" type="radio" name="pct" />
  <nav>
    <ul>
      <li class="topic1">
        <label for="topic1">First Tab</label>
      </li>
      <li class="topic2">
        <label for="topic2">Second Tab</label>
      </li>
      <li class="topic3">
        <label for="topic3">Third Tab</label>
      </li>
    </ul>
  </nav>
  <section>
    <div class="topic1">
      <h2>First</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
    </div>
    <div class="topic2">
      <h2>Second</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
    </div>
    <div class="topic3">
      <h2>Third</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
    </div>
  </section>
</div>

*/

/*  Tab 2 Responsive */

.jt-tab2 { position: relative; background: #999; }
.jt-tab2 > label { position: absolute; z-index: 1; }
.jt-tab2 > label, .jt-tab2 > h2 { font-size: 1.1em; width: 9em; height: 2em; line-height: 2em; }
.jt-tab2 > h2 { position: relative; margin: 0; text-align: center; background: #999; color: #fff; }
.jt-tab2 > label { border-right: 1px solid #fff; }
.jt-tab2 input, .jt-tab2 > label ~ label, .jt-tab2 > h2 ~ h2 { position: absolute; top: 0; }
.jt-tab2 label:nth-child(1), .jt-tab2 h2:nth-child(3) { left: 0em; }
.jt-tab2 label:nth-child(5), .jt-tab2 h2:nth-child(7) { left: 9em; }
.jt-tab2 label:nth-child(9), .jt-tab2 h2:nth-child(11) { left: 18em; }
.jt-tab2 input + h2 + div { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }
.jt-tab2 input:checked + h2 + div { position: static !important; padding: 1em !important; height: auto !important; width: auto !important; }
.jt-tab2 label:hover { cursor: pointer; }
.jt-tab2 > div { background: #f0f0f0; padding: 1em; }
.jt-tab2 input[name="tabs"] { opacity: 0; position: absolute; }
.jt-tab2 input[name="tabs"]:focus + h2 { outline: 1px dotted #000; outline-offset: 10px; }
.jt-tab2:hover h2 { outline: none !important; }
.jt-tab2 input[name="tabs"]:checked + h2 { background: #333; }
.jt-tab2 input[name="tabs"]:checked + h2:after { content: ""; margin: auto; position: absolute; bottom: -10px; left: 0; right: 0; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; }

/**
 * Make it plain/simple below 45em (stack everything, for mobile devices)
 */
@media screen and (max-width: 45em) {
/* hide unecessary label/control pairs */
.jt-tab2 label, .jt-tab2 input[name="tabs"] { display: none; }

/* reveal all panels */
.jt-tab2 > input + h2 + div { display: block !important; position: static !important; padding: 1em !important; height: auto !important; width: auto !important; }
/* "unstyle" the heading */
.jt-tab2 h2 { width: auto; position: static !important; background: #999 !important; }
/* "kill" the marker */
.jt-tab2 h2:after { display: none !important; } }


/* HTML USE
https://codepen.io/thierry/pen/RrQpzK
  <div class="jt-tab2">
    <label for="tab-1" tabindex="0"></label>
      <input id="tab-1" type="radio" name="tabs" checked="true" aria-hidden="true">
    <h2>Strong</h2>
    <div>
      <p>Represents strong importance for its contents. Indicate relative importance by nesting strong elements; each strong element increases the importance of its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.</p>
      <p>Source: <a href="http://html5doctor.com/element-index/">html5doctor</a> for Strong</p>
    </div>
    <label for="tab-2" tabindex="0"></label>
    <input id="tab-2" type="radio" name="tabs" aria-h idden="true">
    <h2>Section</h2>
    <div>
      <p>Represents a generic document or application section. In this context, a section is a thematic grouping of content, typically with a header, possibly with a footer. Examples include chapters in a book, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A web site's home page could be split into sections for an introduction, news items, contact information.</p>
      <p>Source: <a href="http://html5doctor.com/element-index/">html5doctor</a> for Section</p>
    </div>
    <label for="tab-3" tabindex="0"></label>
    <input id="tab-3" type="radio" name="tabs" aria-hidden="true">
    <h2>Source</h2>
    <div>
      <p>The source element allows authors to specify multiple alternative media resources for media elements. It does not represent anything on its own. The src attribute gives the address of the media resource. The value must be a valid non-empty URL potentially surrounded by spaces. This attribute must be present.</p>
      <p>Source: <a href="http://html5doctor.com/element-index/">html5doctor</a> for Source</p>
    </div>
  </div>
*/

/*  Tab 3 */

.jt-tab3 { width: 90%; margin: 0 auto; padding-top: 70px; position: relative; }

.jt-tab3 input, .jt-tab3 section { clear: both; padding-top: 10px; display: none; }

.jt-tab3 label { font-weight: 700; font-size: 18px; display: block; float: left; width: 20%; padding: 1.5em; color: #757575; cursor: pointer; text-decoration: none; text-align: center; background: #f0f0f0; }

.jt-tab3 #tab1:checked ~ .jt-tab3 #content1,
.jt-tab3 #tab2:checked ~ .jt-tab3 #content2,
.jt-tab3 #tab3:checked ~ .jt-tab3 #content3,
.jt-tab3 #tab4:checked ~ .jt-tab3 #content4,
.jt-tab3 #tab5:checked ~ .jt-tab3 #content5 { display: block; padding: 20px; background: #fff; color: #999; border-bottom: 2px solid #f0f0f0; }

.jt-tab3 .jt-tab-content p,
.jt-tab3 .jt-tab-content h3 { -webkit-animation: jtScaleFade 0.7s ease-in-out; -moz-animation: jtScaleFade 0.7s ease-in-out;   animation: jtScaleFade 0.7s ease-in-out; }
.jt-tab3 .jt-tab-content h3  { text-align: center; }

.jt-tab3 [id^="tab"]:checked + .jt-tab3 label { background: #fff; box-shadow: inset 0 3px #0CE; }

.jt-tab3 [id^="tab"]:checked + .jt-tab3 label .fa { color: #0CE; }

.jt-tab3 label .fa { font-size: 1.3em; margin: 0 0.4em 0 0; }

/*Media query*/
@media only screen and (max-width: 930px) {
.jt-tab3 label span { font-size: 14px; }
.jt-tab3 label .fa { font-size: 14px; }   }

@media only screen and (max-width: 768px) {
.jt-tab3 label span { display: none; }
.jt-tab3 label .fa { font-size: 16px; }
.jt-tab3 { width: 98%; }  }

/*Content Animation*/
@keyframes jtScaleFade {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; } }

/* HTML USE
http://www.sevensignature.com/blog/demo/responsive-pure-css-tabs/
<div class="jt-tab3">
			<input id="tab1" type="radio" name="tabs" checked>
			<label for="tab1"><i class="fa fa-code"></i><span>Code</span></label>

			<input id="tab2" type="radio" name="tabs">
			<label for="tab2"><i class="fa fa-pencil-square-o"></i><span>About</span></label>

			<input id="tab3" type="radio" name="tabs">
			<label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Services</span></label>

			<input id="tab4" type="radio" name="tabs">
			<label for="tab4"><i class="fa fa-folder-open-o"></i><span>Portfolio</span></label>

			<input id="tab5" type="radio" name="tabs">
			<label for="tab5"><i class="fa fa-envelope-o"></i><span>Contact</span></label>

			<section id="content1" class="jt-tab-content">
				<h3>Headline 1</h3>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		      	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur.</p>
			</section>

			<section id="content2" class="jt-tab-content">
				<h3>Headline 2</h3>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		      	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</section>

			<section id="content3" class="jt-tab-content">
				<h3>Headline 3</h3>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		      	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		      	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</section>

			<section id="content4" class="jt-tab-content">
				<h3>Headline 4</h3>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua.</p>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur.</p>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat.</p>
			</section>

			<section id="content5" class="jt-tab-content">
				<h3>Headline 5</h3>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
		      	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		      	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		      	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		      	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</section>
</div>
*/