123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html> 
<html>
	<head>
		<title>Pure CSS3 Tabs</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

	</head>
	<body>
	
		<div class="page">
			<h1>Pure CSS3 Tabs</h1>			
		
			
			<!-- tabs -->
			<div class="pcss3t pcss3t-effect-slide-left pcss3t-effect-slide-top">
				<input type="radio" name="pcss3t" checked  id="tab1"class="tab-content-first">
				<label for="tab1"><i class="icon-thumbs-up"></i> Tesla</label>
				
				<input type="radio" name="pcss3t" id="tab2" class="tab-content-2">
				<label for="tab2"><i class="icon-picture"></i>da Vinci</label>
				
				<input type="radio" name="pcss3t" id="tab3" class="tab-content-3">
				<label for="tab3"><i class="icon-cogs"></i>Einstein</label>
				
				<input type="radio" name="pcss3t" id="tab4" class="tab-content-last">
				<label for="tab4"><i class="icon-globe"></i>Newton</label>
				
				<ul>
					<li class="tab-content tab-content-first typography">
						<h1>Nikola Tesla</h1>
						<p>Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electrical supply system.</p>
						<p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p>
						<p class="text-right"><em>Find out more about Nikola Tesla from <a href="http://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">Wikipedia</a>.</em></p>
					</li>
					
					<li class="tab-content tab-content-2 typography">
						<h1>Leonardo da Vinci</h1>
						<p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanist ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
						<p class="text-right"><em>Find out more about Leonardo da Vinci from <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci" target="_blank">Wikipedia</a>.</em></p>
					</li>
					
					<li class="tab-content tab-content-3 typography">
						<h1>Albert Einstein</h1>
						<p>German-born theoretical physicist who developed the general theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics). While best known for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"), he received the 1921 Nobel Prize in Physics "for his services to theoretical physics, and especially for his discovery of the law of the photoelectric effect". The latter was pivotal in establishing quantum theory.</p>
						<p>Near the beginning of his career, Einstein thought that Newtonian mechanics was no longer enough to reconcile the laws of classical mechanics with the laws of the electromagnetic field. This led to the development of his special theory of relativity. He realized, however, that the principle of relativity could also be extended to gravitational fields, and with his subsequent theory of gravitation in 1916, he published a paper on the general theory of relativity.</p>
						<p class="text-right"><em>Find out more about Albert Einstein from <a href="http://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Wikipedia</a>.</em></p>				
					</li>
					
					<li class="tab-content tab-content-last typography">
						<h1>Isaac Newton</h1>
						<p>English physicist and mathematician who is widely regarded as one of the most influential scientists of all time and as a key figure in the scientific revolution. His book Philosophiæ Naturalis Principia Mathematica ("Mathematical Principles of Natural Philosophy"), first published in 1687, laid the foundations for most of classical mechanics. Newton also made seminal contributions to optics and shares credit with Gottfried Leibniz for the invention of the infinitesimal calculus.</p>
						<p>Newton's Principia formulated the laws of motion and universal gravitation that dominated scientists' view of the physical universe for the next three centuries. It also demonstrated that the motion of objects on the Earth and that of celestial bodies could be described by the same principles. By deriving Kepler's laws of planetary motion from his mathematical description of gravity, Newton removed the last doubts about the validity of the heliocentric model of the cosmos.</p>
						<p class="text-right"><em>Find out more about Isaac Newton from <a href="http://en.wikipedia.org/wiki/Isaac_Newton" target="_blank">Wikipedia</a>.</em></p>
					</li>
				</ul>
			</div>
			<!--/ tabs -->
		</div>
	</body>
</html>
            
          
!
            
              @import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css"; 


html, body, div, h1, h2, h3, p, pre {
    color: #333333;
    margin: 0;
    padding: 0;
}
html, body {
    background: none repeat scroll 0 0 #BDCBE5;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 1.55;
}
h1 {
    color: #FFFFFF;
    font: 40px/60px Gabriela,Georgia,serif;
    padding: 40px 0 20px;
    text-align: center;
    text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
}
p {
    margin-bottom: 40px;
    text-align: center;
}
a {
    color: #1889E6;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
.bg {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
.page {
    margin: 0 auto;
    max-width: 980px;
    padding: 0 20px 40px;
    position: relative;
}




.pcss3t {
    border: 0 none;
    font-size: 0;
    margin: 0;
    outline: medium none;
    padding: 0;
    text-align: left;
}
.pcss3t > input {
    left: -9999px;
    position: absolute;
}
.pcss3t > label {
    border: 0 none;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    outline: medium none;
    padding: 0;
    position: relative;
    transition: all 0.1s ease 0s;
}
.pcss3t > label i {
    border: 0 none;
    display: block;
    float: left;
    font-family: FontAwesome;
    font-size: 17px;
    font-style: normal;
    margin: 16px 8px 0 -2px;
    outline: medium none;
    padding: 0;
}
.pcss3t > input:checked + label {
    cursor: default;
}
.pcss3t > ul {
    border: 0 none;
    display: block;
    font-size: 13px;
    list-style: none outside none;
    margin: 0;
    outline: medium none;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.pcss3t > ul > li {
    -moz-box-sizing: border-box;
    opacity: 0;
    overflow: auto;
    padding: 3px 4px 0px;
    position: absolute;
    transition: all 0.5s ease 0s;
    width: 99%;
}
.pcss3t > .tab-content-first:checked ~ ul .tab-content-first, .pcss3t > .tab-content-2:checked ~ ul .tab-content-2, .pcss3t > .tab-content-3:checked ~ ul .tab-content-3, .pcss3t > .tab-content-4:checked ~ ul .tab-content-4, .pcss3t > .tab-content-5:checked ~ ul .tab-content-5, .pcss3t > .tab-content-6:checked ~ ul .tab-content-6, .pcss3t > .tab-content-7:checked ~ ul .tab-content-7, .pcss3t > .tab-content-8:checked ~ ul .tab-content-8, .pcss3t > .tab-content-9:checked ~ ul .tab-content-9, .pcss3t > .tab-content-last:checked ~ ul .tab-content-last {
    left: 0;
    opacity: 1;
    top: 0;
    z-index: 1;
}
.pcss3t-height-auto > ul {
    height: auto !important;
}
.pcss3t-height-auto > ul > li {
    display: none;
    height: auto !important;
    position: static;
}
.pcss3t-height-auto > .tab-content-first:checked ~ ul .tab-content-first, .pcss3t-height-auto > .tab-content-2:checked ~ ul .tab-content-2, .pcss3t-height-auto > .tab-content-3:checked ~ ul .tab-content-3, .pcss3t-height-auto > .tab-content-4:checked ~ ul .tab-content-4, .pcss3t-height-auto > .tab-content-5:checked ~ ul .tab-content-5, .pcss3t-height-auto > .tab-content-last:checked ~ ul .tab-content-last {
    display: block;
}
.pcss3t .grid-row {
    margin-top: 20px;
}
.pcss3t .grid-row:after {
    clear: both;
    content: "";
    display: table;
}
.pcss3t .grid-row:first-child {
    margin-top: 0;
}
.pcss3t .grid-col {
    display: block;
    float: left;
    margin-left: 2%;
}
.pcss3t .grid-col:first-child {
    margin-left: 0;
}
.pcss3t .grid-col .inner {
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 0;
    text-align: center;
}
.pcss3t .grid-col-1 {
    width: 15%;
}
.pcss3t .grid-col-2 {
    width: 32%;
}
.pcss3t .grid-col-3 {
    width: 49%;
}
.pcss3t .grid-col-4 {
    width: 66%;
}
.pcss3t .grid-col-5 {
    width: 83%;
}
.pcss3t .grid-col-offset-1 {
    margin-left: 19%;
}
.pcss3t .grid-col-offset-1:first-child {
    margin-left: 17%;
}
.pcss3t .grid-col-offset-2 {
    margin-left: 36%;
}
.pcss3t .grid-col-offset-2:first-child {
    margin-left: 34%;
}
.pcss3t .grid-col-offset-3 {
    margin-left: 53%;
}
.pcss3t .grid-col-offset-3:first-child {
    margin-left: 51%;
}
.pcss3t .grid-col-offset-4 {
    margin-left: 70%;
}
.pcss3t .grid-col-offset-4:first-child {
    margin-left: 68%;
}
.pcss3t .grid-col-offset-5:first-child {
    margin-left: 85%;
}
.pcss3t .typography {
    color: #666666;
}
.pcss3t .typography h1, .pcss3t .typography h2, .pcss3t .typography h3, .pcss3t .typography h4, .pcss3t .typography h5, .pcss3t .typography h6 {
    color: #333333;
    font-family: Gabriela,Georgia,serif;
    margin: 40px 0 0;
    padding: 0;
    text-align: left;
}
.pcss3t .typography h1 {
    font-size: 40px;
    line-height: 60px;
    text-shadow: 3px 3px rgba(0, 0, 0, 0.1);
}
.pcss3t .typography h2 {
    font-size: 32px;
    line-height: 48px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
}
.pcss3t .typography h3 {
    font-size: 26px;
    line-height: 38px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
.pcss3t .typography h4 {
    font-size: 20px;
    line-height: 30px;
}
.pcss3t .typography h5 {
    font-size: 15px;
    line-height: 23px;
    text-transform: uppercase;
}
.pcss3t .typography h6 {
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}
.pcss3t .typography p {
    line-height: 20px;
    margin: 20px 0 0;
    padding: 0;
    text-align: left;
}
.pcss3t .typography ul, .pcss3t .typography ol {
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
}
.pcss3t .typography li {
    margin-top: 5px;
    padding-left: 20px;
    position: relative;
}
.pcss3t .typography li ul, .pcss3t .typography li ol {
    margin-top: 5px;
}
.pcss3t .typography ul li:before {
    background: none repeat scroll 0 0 #404040;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 6px;
}
.pcss3t .typography ol {
    counter-reset: list1;
}
.pcss3t .typography ol > li:before {
    content: counter(list1, decimal) ".";
    counter-increment: list1;
    left: 0;
    position: absolute;
    top: 0;
}
.pcss3t .typography a {
    color: #1889E6;
    text-decoration: underline;
}
.pcss3t .typography a:hover {
    text-decoration: none;
}
.pcss3t .typography .pic {
    border: 1px dotted #CCCCCC;
    padding: 4px;
}
.pcss3t .typography .pic img {
    display: block;
}
.pcss3t .typography .pic-right {
    float: right;
    margin: 0 0 10px 20px;
}
.pcss3t .typography .link {
    color: #1889E6;
    cursor: pointer;
    text-decoration: underline;
}
.pcss3t .typography .link:hover {
    text-decoration: none;
}
.pcss3t .typography h1:first-child, .pcss3t .typography h2:first-child, .pcss3t .typography h3:first-child, .pcss3t .typography h4:first-child, .pcss3t .typography h5:first-child, .pcss3t .typography h6:first-child, .pcss3t .typography p:first-child {
    margin-top: 0;
}
.pcss3t .typography .text-center {
    text-align: center;
}
.pcss3t .typography .text-right {
    text-align: right;
}
.pcss3t-steps > label {
    cursor: default;
}
.pcss3t-effect-scale > ul > li {
}
.pcss3t-effect-rotate > ul > li {
}
.pcss3t-effect-slide-top > ul > li {
    top: -40px;
}
.pcss3t-effect-slide-right > ul > li {
    left: 80px;
}
.pcss3t-effect-slide-bottom > ul > li {
    top: 40px;
}
.pcss3t-effect-slide-left > ul > li {
    left: -80px;
}
.pcss3t-layout-top-right {
    text-align: right;
}
.pcss3t-layout-top-center {
    text-align: center;
}
.pcss3t > .right {
    float: right;
}
.pcss3t-icons-top > label {
    text-align: center;
}
.pcss3t-icons-top > label i {
    float: none;
    font-size: 23px;
    line-height: 23px;
    margin: 0 auto -10px;
    padding-top: 17px;
    text-align: center;
}
.pcss3t-icons-right > label i {
    float: right;
    margin: 0 -2px 0 8px;
}
.pcss3t-icons-bottom > label {
    text-align: center;
}
.pcss3t-icons-bottom > label i {
    float: none;
    font-size: 23px;
    line-height: 23px;
    margin: -10px auto 0;
    padding-bottom: 17px;
    text-align: center;
}
.pcss3t-icons-only > label i {
    float: none;
    font-size: 23px;
    margin: 0 auto;
}

.icon-glass:before {
    content: "";
}
.icon-music:before {
    content: "";
}
.icon-search:before {
    content: "";
}
.icon-envelope:before {
    content: "";
}
.icon-heart:before {
    content: "";
}
.icon-star:before {
    content: "";
}
.icon-star-empty:before {
    content: "";
}
.icon-user:before {
    content: "";
}
.icon-film:before {
    content: "";
}
.icon-th-large:before {
    content: "";
}
.icon-th:before {
    content: "";
}
.icon-th-list:before {
    content: "";
}
.icon-ok:before {
    content: "";
}
.icon-remove:before {
    content: "";
}
.icon-zoom-in:before {
    content: "";
}
.icon-zoom-out:before {
    content: "";
}
.icon-off:before {
    content: "";
}
.icon-signal:before {
    content: "";
}
.icon-cog:before {
    content: "";
}
.icon-trash:before {
    content: "";
}
.icon-home:before {
    content: "";
}
.icon-file:before {
    content: "";
}
.icon-time:before {
    content: "";
}
.icon-road:before {
    content: "";
}
.icon-download-alt:before {
    content: "";
}
.icon-download:before {
    content: "";
}
.icon-upload:before {
    content: "";
}
.icon-inbox:before {
    content: "";
}
.icon-play-circle:before {
    content: "";
}
.icon-repeat:before {
    content: "";
}
.icon-refresh:before {
    content: "";
}
.icon-list-alt:before {
    content: "";
}
.icon-lock:before {
    content: "";
}
.icon-flag:before {
    content: "";
}
.icon-headphones:before {
    content: "";
}
.icon-volume-off:before {
    content: "";
}
.icon-volume-down:before {
    content: "";
}
.icon-volume-up:before {
    content: "";
}
.icon-qrcode:before {
    content: "";
}
.icon-barcode:before {
    content: "";
}
.icon-tag:before {
    content: "";
}
.icon-tags:before {
    content: "";
}
.icon-book:before {
    content: "";
}
.icon-bookmark:before {
    content: "";
}
.icon-print:before {
    content: "";
}
.icon-camera:before {
    content: "";
}
.icon-font:before {
    content: "";
}
.icon-bold:before {
    content: "";
}
.icon-italic:before {
    content: "";
}
.icon-text-height:before {
    content: "";
}
.icon-text-width:before {
    content: "";
}
.icon-align-left:before {
    content: "";
}
.icon-align-center:before {
    content: "";
}
.icon-align-right:before {
    content: "";
}
.icon-align-justify:before {
    content: "";
}
.icon-list:before {
    content: "";
}
.icon-indent-left:before {
    content: "";
}
.icon-indent-right:before {
    content: "";
}
.icon-facetime-video:before {
    content: "";
}
.icon-picture:before {
    content: "";
}
.icon-pencil:before {
    content: "";
}
.icon-map-marker:before {
    content: "";
}
.icon-adjust:before {
    content: "";
}
.icon-tint:before {
    content: "";
}
.icon-edit:before {
    content: "";
}
.icon-share:before {
    content: "";
}
.icon-check:before {
    content: "";
}
.icon-move:before {
    content: "";
}
.icon-step-backward:before {
    content: "";
}
.icon-fast-backward:before {
    content: "";
}
.icon-backward:before {
    content: "";
    left: -2px;
    position: relative;
}
.icon-play:before {
    content: "";
    left: 1px;
    position: relative;
}
.icon-pause:before {
    content: "";
}
.icon-stop:before {
    content: "";
}
.icon-forward:before {
    content: "";
    left: 2px;
    position: relative;
}
.icon-fast-forward:before {
    content: "";
}
.icon-step-forward:before {
    content: "";
}
.icon-eject:before {
    content: "";
}
.icon-chevron-left:before {
    content: "";
}
.icon-chevron-right:before {
    content: "";
}
.icon-plus-sign:before {
    content: "";
}
.icon-minus-sign:before {
    content: "";
}
.icon-remove-sign:before {
    content: "";
}
.icon-ok-sign:before {
    content: "";
}
.icon-question-sign:before {
    content: "";
}
.icon-info-sign:before {
    content: "";
}
.icon-screenshot:before {
    content: "";
}
.icon-remove-circle:before {
    content: "";
}
.icon-ok-circle:before {
    content: "";
}
.icon-ban-circle:before {
    content: "";
}
.icon-arrow-left:before {
    content: "";
}
.icon-arrow-right:before {
    content: "";
}
.icon-arrow-up:before {
    content: "";
}
.icon-arrow-down:before {
    content: "";
}
.icon-share-alt:before {
    content: "";
}
.icon-resize-full:before {
    content: "";
}
.icon-resize-small:before {
    content: "";
}
.icon-plus:before {
    content: "";
}
.icon-minus:before {
    content: "";
}
.icon-asterisk:before {
    content: "";
}
.icon-exclamation-sign:before {
    content: "";
}
.icon-gift:before {
    content: "";
}
.icon-leaf:before {
    content: "";
}
.icon-fire:before {
    content: "";
}
.icon-eye-open:before {
    content: "";
}
.icon-eye-close:before {
    content: "";
}
.icon-warning-sign:before {
    content: "";
}
.icon-plane:before {
    content: "";
}
.icon-calendar:before {
    content: "";
}
.icon-random:before {
    content: "";
}
.icon-comment:before {
    content: "";
}
.icon-magnet:before {
    content: "";
}
.icon-chevron-up:before {
    content: "";
}
.icon-chevron-down:before {
    content: "";
}
.icon-retweet:before {
    content: "";
}
.icon-shopping-cart:before {
    content: "";
}
.icon-folder-close:before {
    content: "";
}
.icon-folder-open:before {
    content: "";
}
.icon-resize-vertical:before {
    content: "";
}
.icon-resize-horizontal:before {
    content: "";
}
.icon-bar-chart:before {
    content: "";
}
.icon-twitter-sign:before {
    content: "";
}
.icon-facebook-sign:before {
    content: "";
}
.icon-camera-retro:before {
    content: "";
}
.icon-key:before {
    content: "";
}
.icon-cogs:before {
    content: "";
}
.icon-comments:before {
    content: "";
}
.icon-thumbs-up:before {
    content: "";
}
.icon-thumbs-down:before {
    content: "";
}
.icon-star-half:before {
    content: "";
}
.icon-heart-empty:before {
    content: "";
}
.icon-signout:before {
    content: "";
}
.icon-linkedin-sign:before {
    content: "";
}
.icon-pushpin:before {
    content: "";
}
.icon-external-link:before {
    content: "";
}
.icon-signin:before {
    content: "";
}
.icon-trophy:before {
    content: "";
}
.icon-github-sign:before {
    content: "";
}
.icon-upload-alt:before {
    content: "";
}
.icon-lemon:before {
    content: "";
}
.icon-phone:before {
    content: "";
}
.icon-check-empty:before {
    content: "";
}
.icon-bookmark-empty:before {
    content: "";
}
.icon-phone-sign:before {
    content: "";
}
.icon-twitter:before {
    content: "";
}
.icon-facebook:before {
    content: "";
}
.icon-github:before {
    content: "";
}
.icon-unlock:before {
    content: "";
}
.icon-credit-card:before {
    content: "";
}
.icon-rss:before {
    content: "";
}
.icon-hdd:before {
    content: "";
}
.icon-bullhorn:before {
    content: "";
}
.icon-bell:before {
    content: "";
}
.icon-certificate:before {
    content: "";
}
.icon-hand-right:before {
    content: "";
}
.icon-hand-left:before {
    content: "";
}
.icon-hand-up:before {
    content: "";
}
.icon-hand-down:before {
    content: "";
}
.icon-circle-arrow-left:before {
    content: "";
}
.icon-circle-arrow-right:before {
    content: "";
}
.icon-circle-arrow-up:before {
    content: "";
}
.icon-circle-arrow-down:before {
    content: "";
}
.icon-globe:before {
    content: "";
}
.icon-wrench:before {
    content: "";
}
.icon-tasks:before {
    content: "";
}
.icon-filter:before {
    content: "";
}
.icon-briefcase:before {
    content: "";
}
.icon-fullscreen:before {
    content: "";
}
.icon-group:before {
    content: "";
}
.icon-link:before {
    content: "";
}
.icon-cloud:before {
    content: "";
}
.icon-beaker:before {
    content: "";
}
.icon-cut:before {
    content: "";
}
.icon-copy:before {
    content: "";
}
.icon-paper-clip:before {
    content: "";
}
.icon-save:before {
    content: "";
}
.icon-sign-blank:before {
    content: "";
}
.icon-reorder:before {
    content: "";
}
.icon-list-ul:before {
    content: "";
}
.icon-list-ol:before {
    content: "";
}
.icon-strikethrough:before {
    content: "";
}
.icon-underline:before {
    content: "";
}
.icon-table:before {
    content: "";
}
.icon-magic:before {
    content: "";
}
.icon-truck:before {
    content: "";
}
.icon-pinterest:before {
    content: "";
}
.icon-pinterest-sign:before {
    content: "";
}
.icon-google-plus-sign:before {
    content: "";
}
.icon-google-plus:before {
    content: "";
}
.icon-money:before {
    content: "";
}
.icon-caret-down:before {
    content: "";
}
.icon-caret-up:before {
    content: "";
}
.icon-caret-left:before {
    content: "";
}
.icon-caret-right:before {
    content: "";
}
.icon-columns:before {
    content: "";
}
.icon-sort:before {
    content: "";
}
.icon-sort-down:before {
    content: "";
}
.icon-sort-up:before {
    content: "";
}
.icon-envelope-alt:before {
    content: "";
}
.icon-linkedin:before {
    content: "";
}
.icon-undo:before {
    content: "";
}
.icon-legal:before {
    content: "";
}
.icon-dashboard:before {
    content: "";
}
.icon-comment-alt:before {
    content: "";
}
.icon-comments-alt:before {
    content: "";
}
.icon-bolt:before {
    content: "";
}
.icon-sitemap:before {
    content: "";
}
.icon-umbrella:before {
    content: "";
}
.icon-paste:before {
    content: "";
}
.icon-lightbulb:before {
    content: "";
}
.icon-exchange:before {
    content: "";
}
.icon-cloud-download:before {
    content: "";
}
.icon-cloud-upload:before {
    content: "";
}
.icon-user-md:before {
    content: "";
}
.icon-stethoscope:before {
    content: "";
}
.icon-suitcase:before {
    content: "";
}
.icon-bell-alt:before {
    content: "";
}
.icon-coffee:before {
    content: "";
}
.icon-food:before {
    content: "";
}
.icon-file-alt:before {
    content: "";
}
.icon-building:before {
    content: "";
}
.icon-hospital:before {
    content: "";
}
.icon-ambulance:before {
    content: "";
}
.icon-medkit:before {
    content: "";
}
.icon-fighter-jet:before {
    content: "";
}
.icon-beer:before {
    content: "";
}
.icon-h-sign:before {
    content: "";
}
.icon-plus-sign-alt:before {
    content: "";
}
.icon-double-angle-left:before {
    content: "";
}
.icon-double-angle-right:before {
    content: "";
}
.icon-double-angle-up:before {
    content: "";
}
.icon-double-angle-down:before {
    content: "";
}
.icon-angle-left:before {
    content: "";
}
.icon-angle-right:before {
    content: "";
}
.icon-angle-up:before {
    content: "";
}
.icon-angle-down:before {
    content: "";
}
.icon-desktop:before {
    content: "";
}
.icon-laptop:before {
    content: "";
}
.icon-tablet:before {
    content: "";
}
.icon-mobile-phone:before {
    content: "";
}
.icon-circle-blank:before {
    content: "";
}
.icon-quote-left:before {
    content: "";
}
.icon-quote-right:before {
    content: "";
}
.icon-spinner:before {
    content: "";
}
.icon-circle:before {
    content: "";
}
.icon-reply:before {
    content: "";
}
.icon-github-alt:before {
    content: "";
}
.icon-folder-close-alt:before {
    content: "";
}
.icon-folder-open-alt:before {
    content: "";
}
.pcss3t > .right {
    float: none;
}
.pcss3t > label {
    background: none repeat scroll 0 0 #E5E5E5;
    font-size: 13px;
    line-height: 49px;
    padding: 0 20px;
}
.pcss3t > label:hover {
    background: none repeat scroll 0 0 #F2F2F2;
}
.pcss3t > input:checked + label {
    background: none repeat scroll 0 0 #FFFFFF;
}
.pcss3t > ul {
    background: none repeat scroll 0 0 #FFFFFF;
    text-align: left;
}
.pcss3t-steps > label:hover {
    background: none repeat scroll 0 0 #E5E5E5;
}
.pcss3t-theme-1 > label {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px rgba(0, 0, 0, 0.2);
    color: #808080;
    margin: 0 5px 5px 0;
    opacity: 0.8;
}
.pcss3t-theme-1 > label:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    opacity: 1;
}
.pcss3t-theme-1 > input:checked + label {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #2B82D9;
    margin-bottom: 0;
    opacity: 1;
    padding-bottom: 5px;
}
.pcss3t-theme-1 > ul {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 3px rgba(0, 0, 0, 0.2);
}
.pcss3t-theme-1 > .tab-content-first:checked ~ ul {
    border-top-left-radius: 0;
}
.pcss3t-theme-1 > label {
    margin-right: 0;
}
.pcss3t-theme-1 > input:checked + label {
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 5px;
    padding-bottom: 0;
}
.pcss3t-theme-1 > .tab-content-first:checked ~ ul {
    border-top-left-radius: 5px;
}
.pcss3t-theme-2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    padding: 5px;
}
.pcss3t-theme-2 > label {
    background: none repeat scroll 0 0 transparent;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    margin-bottom: 0;
    margin-right: 0;
    opacity: 1;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.pcss3t-theme-2 > label:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
}
.pcss3t-theme-2 > input:checked + label {
    background: -moz-linear-gradient(center top , #E5E5E5 0%, #FFFFFF 100%) repeat scroll 0 0 transparent;
    color: #822BD9;
    padding-bottom: 0;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.pcss3t-theme-2 > ul {
    border-radius: 0 0 0 0;
    box-shadow: none;
    margin: 0 -5px -5px;
}
.pcss3t-theme-2 > ul {
    margin-top: 5px;
}
.pcss3t-theme-3 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
}
.pcss3t-theme-3 > label {
    background: none repeat scroll 0 0 transparent;
    border-right: 1px dotted rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    opacity: 0.6;
    text-align: center;
}
.pcss3t-theme-3 > label:hover {
    background: none repeat scroll 0 0 transparent;
    color: #D9D92B;
    opacity: 0.8;
}
.pcss3t-theme-3 > input:checked + label {
    background: none repeat scroll 0 0 #D9D92B;
    color: #000000;
    opacity: 1;
}
.pcss3t-theme-3 > ul {
    border-bottom: 4px solid #D9D92B;
    border-radius: 0 0 0 0;
    border-top: 4px solid #D9D92B;
    box-shadow: none;
}
.pcss3t-theme-4 > label {
    background: -moz-linear-gradient(center top , #78C5FD 0%, #2C8FDD 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    line-height: 39px;
    margin: 0 10px 10px 0;
    text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.pcss3t-theme-4 > label:hover {
    background: -moz-linear-gradient(center top , #90CFFC 0%, #439BDE 100%) repeat scroll 0 0 transparent;
}
.pcss3t-theme-4 > input:checked + label {
    background: -moz-linear-gradient(center top , #5F9DC9 0%, #2270AB 100%) repeat scroll 0 0 transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px rgba(255, 255, 255, 0.5);
    text-shadow: none;
    top: 1px;
}
.pcss3t-theme-4 > ul {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
.pcss3t-theme-4 > label {
    margin-right: 0;
}
.pcss3t-theme-5 {
    background: -moz-linear-gradient(left center , #AD6395 0%, #A163AD 100%) repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    padding: 15px;
}
.pcss3t-theme-5 > label {
    background: none repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    margin-bottom: 15px;
    margin-right: 10px;
    opacity: 1;
    text-align: center;
}
.pcss3t-theme-5 > label:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.15);
}
.pcss3t-theme-5 > input:checked + label {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    color: #000000;
}
.pcss3t-theme-5 > input:checked + label:after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    left: 50%;
    margin-left: -6px;
    margin-top: 10px;
    position: absolute;
    top: 100%;
}
.pcss3t-theme-5 > ul {
    border-radius: 0 0 5px 5px;
    box-shadow: none;
    margin: 0 -15px -15px;
}
.pcss3t-theme-5 > input:checked + label:after {
    display: none;
}
.pcss3t > ul, .pcss3t > ul > li {
    height: 370px;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console