body{padding:0px; margin:0px; text-align: center; font-family: 'Oswald', sans-serif; font-size:18px;}

#header{background:#363535; color:#ffffff;}
/*3cc456*/
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  font-size:25px;
  cursor:pointer;
  margin-right:4px;
}

.icon-linkedin:hover{color:#4fcbda;}
.icon-instagram:hover{color:#ebdc7d;}
.icon-twitter:hover{color:#f0888b;}



.clearFloat{clear:both; haight:20px;}

/*Styles for Screen width 480px or smaller*/
@media screen and (max-width: 480px) {
	#header{height:75px;}
	#identity{text-align:center; font-size:1.5em; font-weight:400}
	.stripes{height:75px; position:absolute; right:10px; top:0px;}

	#identity:before {
		font-weight:200; 
	 content: "Roger ";
	}

	#bodyContainer{width:90%; padding-top:30%;}

	#intro{color:#bdbebd; font-size:18px; font-weight:300;}
	#welcome{color:#4f5258; font-size:22px; font-weight:200;}

	#listBox {margin-top:20px;}
	#listBox ul{list-style-type: none; margin:0px; list-style-position: inside; padding-left:0; color:#3b78c3; cursor:pointer;}
	#listBox li{display: inline; margin:5px;}
	#listBox li:hover{color:#888d91;}

	.moreBox {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    overflow: hidden;
    margin-top:20px; text-align:left; font-size:.9em;
  	}
}

/*Styles for Screen width 480px or larger*/
@media screen and (min-width: 480px) {
	#header{height:75px;}
	#identity{position:absolute; top:10px; left:20px; font-size:2em; font-weight:400;}
	.stripes{height:75px; position:absolute; right:150px; top:0px;}

	#identity:before {
		font-weight:200; 
	 content: "Roger ";
	}

	#iconBox{position:absolute; top:0px; right:0px; padding:30px;}
	#bodyContainer{width:80%; padding-top:5%; text-align:center;}

	#intro{ color:#bdbebd; font-size:24px; font-weight:300;}
	#welcome{color:#4f5258; font-size:28px; font-weight:200;}

	#listBox {right:25px;}
	#listBox ul{list-style-type: none; margin:0px; list-style-position: inside; padding-left:0; color:#3b78c3; cursor:pointer;}
	#listBox li{display: inline; margin:5px;}
	#listBox li:hover{color:#888d91;}

	.moreBox {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    overflow: hidden;
    margin-top:20px; text-align:left; font-size:.9em;
  	}

}

#backdrop{display:none; z-index:1000; position:fixed; left:0px; right:0px; top:0px; bottom:0px; background:#000000; opacity: 0.5; filter: alpha(opacity=50);}


.skillToolTip{display:none; position:absolute; background:#f1f1f1; margin-left:5px; margin-right:5px; padding:5px; font-size:.8em; max-width:200px; box-shadow: 0px 1px 2px #000000;}
.workTypeBox{float:left; width:48%; margin:1%; text-align:center;}

@media all and (max-width: 540px) {
	.skills {float:left; text-align:left; width:45%; margin:1%; background:#fafafa; cursor:pointer;}
  	.skillsBox {padding:20px 3px; text-align: center;}
  	.workIcon{width:80%; margin-top:10px; cursor:pointer;}
  	#galleryBox{display:none; z-index:2000; position:fixed; left:5%; right:5%; top:10%; max-height:50%; text-align:center; overflow:hidden;}
  	.galleryImg{width:100%; cursor:pointer;}
}

@media all and (min-width: 540px) and (max-width: 1200px) {
	.skills {float:left; text-align:left; width:30%; margin:1%; background:#fafafa; cursor:pointer;}
  	.skillsBox {padding:20px 3px; text-align: center;}
  	.workIcon{width:50%; margin-top:10px; cursor:pointer;}
  	#galleryBox{display:none; z-index:2000; position:fixed; left:15%; right:15%; top:10%; max-height:80%; text-align:center; overflow:hidden;}
  	.galleryImg{width:100%; cursor:pointer;}
}

@media all and (min-width: 1200px) {
	.skills {float:left; text-align:left; width:23%; margin:1%; background:#fafafa; cursor:pointer;}
  	.skillsBox {padding:20px 3px; text-align: center;}
  	.workIcon{width:50%; margin-top:10px; cursor:pointer;}
  	#galleryBox{display:none; z-index:2000; position:fixed; left:15%; right:15%; top:10%; max-height:80%; text-align:center; overflow:hidden;}
  	.galleryImg{width:100%; cursor:pointer;}
}