html, body {height:100%;}
body {font-family: "Raleway", sans-serif; font-size:14px; color:#FFF; padding:0; margin:0; background-color:#222;}
h1 {font-size:42px; line-height:100%; padding:0; margin:0; transition:1s all;}
h2 {font-size:32px; line-height:100%; padding:0; margin:20px 0; transition:1s all;}
h3 {font-size:26px; line-height:100%; padding:0; margin:0; transition:1s all;}
sup {font-size: 50%;}
.wrapper {min-height:100%; height:auto !important; max-width:1300px; margin:0 auto -70px; padding-bottom:70px; overflow:hidden; -moz-box-sizing:border-box; box-sizing:border-box;}
.header {padding: 40px 100px;}
.topBar {text-align:center; display:none; background-color:#222; position:fixed; top:0; left:0; width:100%; padding:0 0 10px;}
.footer { height:70px; position:relative;}
.footer p {padding:0; margin:0; color:#333; font-size:12px; text-align:center; line-height:50px; display:block;}
.img {position:relative; margin:15px 0; width:80px;}
.img img {border-radius:50%;}
.img span {pointer-events: none; position:absolute; left:125px; top:10px; background-color:#444; color:#FFF; padding:10px; line-height:20px; width:100px; text-align:center; border-radius:3px; opacity:0; transition:all 0.5s ease-in-out;}
.img:hover span {left:90px; opacity:1;}
.show {display:block;}
.hide {display:none;}
p {line-height: 1.4}
.cFormW {background-color:rgba(0,0,0,0.5); position:fixed; top:0; width:100%; height:100%; display:none;}
.cForm {background-color:#333; overflow:hidden; padding:20px; border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.3);}
.img span:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.img span:after {
	border-color: transparent;
	border-right-color: #444;
	border-width: 6px;
	top: 50%;
	margin-top: -6px;
}

ul, ul > ul {padding:0; margin:0; list-style:none;}
ul.playground > li {
    float:left;
    height:650px;
    color:#333;
}
ul.playground > li:nth-child(3n+1) {
    background-color: #FFF;
    width:50%;   
}
ul.playground li li {
    background-color:#8BC65D; 
    height:315px;
}


ul.skills {padding:0; margin:-5px 0 0; list-style:none;}
ul.skills li {positon:relative; padding:5px 0 0;}

.skill {position:relative; height:30px; background-color:#333; overflow:hidden; border-radius:2px;}
.skill .set {position:absolute; top:0; left:0; height:30px; left:0; background-color:#73b1c8; border-radius:2px; width: 0%; transition:width 1s; }
.skill span {position:absolute; left:10px; top:5px; line-height:20px; font-weight:bold; color:#FFF;}

.full-width li:nth-child(1) .set {width:100%;}
.full-width li:nth-child(2) .set {width:95%; transition-delay:0.1s;}
.full-width li:nth-child(3) .set {width:95%; transition-delay:0.2s;}
.full-width li:nth-child(4) .set {width:90%; transition-delay:0.3s;}
.full-width li:nth-child(5) .set {width:90%; transition-delay:0.4s;}
.full-width li:nth-child(6) .set {width:85%; transition-delay:0.5s;}
.full-width li:nth-child(7) .set {width:80%; transition-delay:0.6s;}
.full-width li:nth-child(8) .set {width:65%; transition-delay:0.7s;}
.full-width li:nth-child(9) .set {width:60%; transition-delay:0.8s;}
.full-width li:nth-child(10) .set {width:60%; transition-delay:0.9s;}
.full-width li:nth-child(11) .set {width:55%; transition-delay:1s;}
.full-width li:nth-child(12) .set {width:50%; transition-delay:1.1s;}
a {color: #8BC65D; text-decoration: none;}
a.hello {display:inline-block; border-radius:2px; background-color:#8BC65D; width:120px; color:#EEE; text-align:center;  line-height:40px; transition:1s all; text-decoration:none;}
a.hello:hover {background-color:#82868F;}

@media (min-width: 480px) {
    .cForm {max-width:340px; margin:10% auto 0;}
    ul.playground > li:nth-child(3n+1) {
    width:calc(66% - 20px);   
    }
    ul.playground > li {
    width:calc(33% - 10px);
    margin:10px;
    }
    ul.playground li li {
    margin-bottom:20px; 
    }
}
@media (max-height: 480px) {
    .cForm {margin:10px auto;}
    .cForm .cBody {padding: 10px;}

}
@media (max-width: 479px) {
    .img {margin: 15px auto;}
    ul.playground {display:none;}
    .wrapper {text-align:center;}
    .header {padding: 30px 10px;}
    .cForm { margin:10% 10px;  text-align:center;}
	h1 {font-size: 32px;}
	h2 {font-size: 24px;}
	h3 {font-size: 20px;}
}