@charset "utf-8";

/*+++++ 
Common 
+++++*/

html,
body {
	margin:0;
	padding:0;
	height:100%;
	font-family: 'Ropa Sans', sans-serif; 
	font-size:1em;
	line-height:1.5em; 
}

h1{ 
	font-size:2.8em; 
	margin-bottom:20px; 
	height:0; 
	font-weight:normal; 
	color:#5288DB;
}

h2{  
	font-size:1.6em; 
	margin-bottom:20px; 
}

h3{  
	font-size:1.4em; 
	margin-bottom:20px; 
}

h4{  
	font-size:1.2em; 
	margin-bottom:20px; 
}

p { 
	font-size:1em; 
	margin-bottom:20px; 
	color:#9DA7B2; 
}

img { 
	width:100%; 
	max-width:750px; 
	height:auto; 
	margin-bottom:10px;
}

a:link {
	color:#5288DB;
	text-decoration: none;
}

a:visited {
	color:#5288DB;
	text-decoration: none;
}

a:hover {
	color:#71C42B;
}

a:active {
	color:#5288DB;
	text-decoration: none;
}


span.bold {font-weight: bold;}
span.italic {font-style: italic;}
span.underline {text-decoration:underline;}
span.normal {font-weight:normal;}
span.t11 { font-size:1.2em; line-height: 1.5em;}

.mb20{ margin-bottom:20px;}


/*++++++++++ Media Queries - For PC and all others ++++++++++*/

#wrapper {
	min-height:100%;
	position:relative;
}


/*+++++ 
HEADER 
+++++*/

#header {
	background:#F2F39E;
    background-image: url(../images/img-generic.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding:5px; 
	color:#FFF; 
}

#header-blog {
	background:#F2F39E;
    background-image: url(../images/img-gene-blog.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding:5px; 
	color:#FFF; 
}

#header-contact {
	background:#F2F39E;
    background-image: url(../images/img-gene-contact.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding:5px; 
	color:#FFF; 
}

#header-resume {
	background:#F2F39E;
    background-image: url(../images/img-gene-resume.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding:5px; 
	color:#FFF; 
}

#header-work {
	background:#F2F39E;
    background-image: url(../images/img-gene-work.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	padding:5px; 
	color:#FFF; 
}

#headset { 
	width:95%; 
	height:480px; 
	margin: 0 auto; 
	padding-top: 15px;
}

#headset h1{ 
	color:#FFF; 
	font-size:0.7em; 
	text-align:right; 
}

/*+++++ 
Navigation MENU 
+++++*/

#navigator { 
	position: absolute; 
	width:100%;
	margin-top:80px; 
	display:none; 
	z-index:100;
}

#menu {
	margin: 0 auto; 
	left:50; 
	margin-left:19%;
}

#menu li {
	text-align: center; 
	display: inline-table;  
	width:15%;
	margin: 0 auto;
	padding: 0 auto; 
}

#menu li a {
	display: block;
	color: #fff; 
	padding:5px 0 0 0;
	background: #01243B; 
	height:30px;
}

#menu li a:hover{
	background: #555;
}

.nav-button {
	font-size: 1em;
	padding: 0.8em 0;
	text-decoration: none;
	color: #000; 
	background: #01243B;

}

.current, a.nav-button:hover {
	color: #000;
}
	
#toggle {
	display: none;
}
	
ul.NavMenu { width:90%; margin-top:400px; }
ul.NavMenu li{ width:15%; list-style:none; text-align:center; float:left; }
ul.NavMenu li a{ display:block; padding: 5px 10px; background:#FFF; }

ul.SiteMenu { width:90%; margin: 0 auto 0.66em; display:block; }
ul.SiteMenu li { width: 20%; display:inline-block; list-style:none; float:left; text-align:center; background:rgba(0,0,0,0.6); }
ul.SiteMenu li a{ display:block; padding:0.5em 0; background:rgba(255,255,255,1); }
ul.SiteMenu li a:hover{ background:rgba(82,136,219,0.7); color:#FFF; }


/*+++++ 
CONTENT 
+++++*/

#content {
	padding-bottom:50px;  /* Height of the footer element */
	color:#666; 
	margin-top:50px;
	background:#FFF; 
}

#contentset { 
	width:96%;
	margin:0 auto;
	padding:20px 0 50px 0; 
}

#content-col-left { 
	width:30%; 
	background:#CCFFCC; 
	float:left; 
	padding:6px;
}

#content-col-right { 
	width:65%; 
	background: #CCFFFF; 
	float:right; 
	padding:6px;
}

.togglepanel { 
	display:block; 
	cursor:pointer; 
	width:100%; 
	margin: 0 auto; 
	text-align:center; 
	font-size:2em;
	padding: 20px 0; 
	color:#5288DB; 
}

.togglepanel2 { 
	display:block; 
	cursor:pointer; 
	width:100%; 
	margin: 0 auto; 
	text-align:center; 
	font-size:2em;
	padding: 20px 0 15px 0; 
	color:#5288DB; 
}

.togglepanel2 p.shead{ 
	font-size:0.8em;
}

.activepanel {
	width:98%; 
	margin:0 auto; 
	padding-left:1%; 
	padding-right:1%; 
	text-align:center;
}

.activepanel2 {
	width:98%; 
	margin:0 auto; 
	padding-left:1%; 
	padding-right:1%; 
	text-align:center;
}

.activepanel2 p{ 
	max-width: 750px; 
	margin: 0 auto; 
	margin-bottom:0.5em;
}

dl.biofeeds { width:720px; margin: 0 auto; text-align:left; border-bottom:#CCC 2px solid; margin-bottom:2em; }
dl.biofeeds dt { width:30%; float:left; border-top:#CCC 1px solid; padding-top:0.5em; }
dl.biofeeds dd { width:70%; margin-left:30%; margin-bottom:1em; border-top:#CCC 1px solid; padding-top:0.5em; }

dl.biofeeds img{ width:40px; height:auto; vertical-align:middle; }

img.iconlaunch { width:35px; height:35px; vertical-align: middle; border:0;
}

ul.socialmedia { margin-top: 15px; margin-bottom:50px;}
ul.socialmedia li{ display:inline; margin: 0 5px 5px 0;}
ul.socialmedia li img{ border:0; width:50px; height:auto; }


.headlinepanel { 
	width:98%; 
	margin: 0 auto; 
	padding:1%; 
	text-align:center; 
	font-size:2em;
	padding: 20px 0; 
	color:#5288DB;
}

.bodypanel {
	width:98%; 
	margin:0 auto; 
	padding:1%; 
	text-align:center;
	color:#9DA7B2; 
}

.bodypanel p{ 
	max-width: 720px; 
	margin: 0 auto; 
	margin-bottom:0.5em;
}

.biopanel {
	width:98%; 
	margin:0 auto; 
	padding:1%; 
	text-align:left;
	color:#9DA7B2; 
}

.biopanel h2{ 
	font-size: 1.4em; 
	color:#5288DB; 
	font-weight:normal;
	max-width: 720px; 
	padding-bottom:20px;
	margin: 0 auto; 
}

.biopanel p{ 
	max-width: 720px; 
	margin: 0 auto; 
	margin-bottom:1em;
}




/*+++++ 
What I Do? 
+++++*/

.newsboxhd {
	width: 32%; 
	font-size:1.2em;  
	text-align:left; 
	margin: 0 auto;
}

.newsbox ul {
	margin-left:15px; 
	margin-bottom: 20px;
	text-align:left; 
	/* -- border-top:dotted 1px #FFCCCC; --*/
}

.newsbox li {
	/* -- border-bottom:dotted 1px #FFCCCC; --*/
	padding: 0 0 5px 0; 
	line-height:1.3em; 
	list-style:square outside;  
}

.newsbox li.first {
}



/*+++++ 
SLIMBOX 
+++++*/

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(../images/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute; 
	/* width:100%; 
	height:auto; */
	left: 0;
	top: 0;
	border: 5px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../images/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../images/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}


/*+++++ 
 Portfolio
+++++*/

.portfolio {
  /* max-width: 1170px; */
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.portfolio .gallery a img {
  float: left;
  width: 100%;
  height: auto;
  /* border: 1px #C5C5C5 dotted; */
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
}

.portfolio .gallery a:hover img {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  z-index: 5;
}

.portfolio .gallery a.big img {
  width: 40%;
}

ul.gallerylist { width: 100%; margin-bottom:3em; }
ul.gallerylist li{ width:32%; margin-right:1%; margin-bottom:2em; list-style:none; display: inline-block; border:0; }


.clear {
  clear: both;
  float: none;
  width: 100%;
}

* {
  box-sizing: border-box;
}




/*+++++ 
FOOTER 
+++++*/

#footer {
	background:#F2F39E; 
	color:#5288DB;
	width:100%;
	height:50px; /* Height of the footer */
	position:absolute;
	bottom:0;
	left:0; 
	border-top: #F2F39E solid 1px;
}

#footer-panel { 
	width:98%; 
	padding-top:5px; 
	text-align:center; 
}


/*++++++++++ Media Queries - For Tablets ++++++++++*/
@media screen and (min-width: 1440px){

	#headset { 
		height:450px; 
		max-height:450px 
	}

}


/*++++++++++ Media Queries - For Tablets ++++++++++*/
@media screen and (min-width: 950px) and (max-width: 1249px){
	
	/*+++++ 
	Tablets CONTENT 
	+++++*/
	
	#headset { 
		height:360px; 
		max-height:360px 
	}

	#content {
		padding-bottom:50px;  /* Height of the footer element */
		color:#666; 
		margin-top:50px;
		background:#FFF; 
	}
	
	#contentset { 	
		width:96%;
		margin:0 auto;
	}

	#content-col-left { 
		width:30%; 
		background:#CCFFCC; 
		float:left; 
		padding:6px;
	}
	
	#content-col-right { 
		width:65%; 
		background: 
		#CCFFFF; 
		float:right; 
		padding:6px;
	}

	.togglepanel { 
		font-size:2em;
		padding: 15px 0; 
	}

	.bodypanel p{ 
		max-width: 620px; 
	}

	.newsboxhd {
		width: 40%; 
	}

	ul.gallerylist { width: 100%; }
	ul.gallerylist li{ width:48%; margin-right:1%; margin-bottom:2em; list-style:none; display: inline-block; }

}



/*++++++++++ Media Queries - For Mobile Phones ++++++++++*/

@media screen and (max-width: 949px) {

	#navigator { 
		display: block; 
		width:100%; 
		position: fixed; 
		margin-top:0; 
		background:none;
	}

	#menu {
		display: none;
		margin: 0 auto; 
	}
	
	#menu li {
		text-align: center; 
		width:100%; 
		border:0;
	}

	#menu li a {
		display: block;
		color: #FFF; 
		padding:5px;
		background: rgba(1,36,59,0.7); 
		border-bottom:#01243B solid 1px;
	}

	#menu li:hover, #menu li a:hover {
		color: rgba(1,36,59,1);
		background: rgba(255,255,255,0.6);
		/* 
		color: #FFF;
		background: rgba(1,36,59,0.5); 
		*/
	}

	.nav-button {
		font-size: 1em;
		padding: 0.6em 0;
		text-decoration: none;
		color: #FFF;
		background: rgba(1,36,59,0.7);
	}

	.current, a.nav-button:hover {
		color: #000;
		background: rgba(1,36,59,0.5);
	}
	
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		background: #01243B;
		font-size:1em;
	}
	
	#toggle a {
		display: block;
		position: relative;
		padding: 0.4em 0;
		border-bottom: 1px solid #999;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}

	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 20px;
		height: 19px !important; /* control the 3 horizontal stroke at top dropdown menu bar */
		margin-top: -10px;
		background: #fff;
	}

	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 20px;
		height: 5px !important; /* control the 3 horizontal stroke at top dropdown menu bar */
		background: #222;
	}

	#toggle a:before {
		margin-top: -6px;
		}

	#toggle a:after {
		margin-top: 2px;
	}



	/*+++++ 
	Mobile HEADER 
	+++++*/

	/* #header {
		background: #F2F39E;
		padding:50px 0 10px 0; 
		color:#FFF; 
		width:100%; 
	}*/

	#headset { 
		width:96%; 
		height:360px;
	}

	ul.SiteMenu { display: none; }


	/*+++++ 
	Mobile CONTENT 
	+++++*/

	#content {
		width:100%;
		padding-bottom:50px;  /* Height of the footer element */
		color:#000;
		padding: 0;
		margin:0 auto; 
		text-align:center;
	}

	#contentset { 
		width:96%; 
		padding: 20px 0 80px 0; 
		margin: 0 auto; 
		text-align:center;
		background:#FFF;
	}

	#content-col-left { 
		width:96%; 
		background: #CCFFCC; 
		margin:0 auto; 
		text-align:center; 
		border:#999999 solid 1px; 
		float:none;
	}
	
	#content-col-right { 
		width:96%; 
		background: #CCFFFF; 
		margin:0 auto; 
		text-align:center; 
		border:#999 solid 1px; 
		margin-bottom:20px; 
		float:none;
	}

	.togglepanel { 
		font-size:1.8em; 
		padding: 12px 0; 
	}

	.activepanel p{ 
		font-size:1.1em; 
	}

	dl.biofeeds { 
		width:100%; 
	}
	
	dl.biofeeds dt { width:40%; float:left; }
	dl.biofeeds dd { width:60%; margin-left:40%; margin-bottom:1em; }

	.newsboxhd {
		width: 85%; 
	}

	ul.gallerylist li{ width:98%; margin-right:1%; margin-bottom:2em; list-style:none; display: inline-block; }


	/*+++++ 
	Mobile FOOTER 
	+++++*/
	
	#footer, .content:after {
		position:absolute;
		width:100%;
		height:50px;
		bottom:0;
		background: #F2F39E; 
		color:#5288DB;
		border-top: #CCC solid 1px;
	}

	#footer-panel { 
		width:100%;
		margin: 0 auto; 
		text-align:center; 
		/* padding-top:8px;
		height:40px; */
	}

}


/*++++++++++ Media Queries - For Mobile Phones ++++++++++*/

@media screen and (max-width: 460px) {

	h1 {
		font-size:1.8em; 
	}

	.togglepanel { 
		font-size:1.6em; 
		padding: 10px 0; 
	}

	.newsboxhd {
		width: 86%; 
		font-size:1em;  
	}

	#header {
		background:#F2F39E;
	    background-image: url(../images/img-generic.jpg);
	    background-repeat: no-repeat;
	    background-position: top;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		padding:5px; 
		color:#FFF; 
	}

	#header-blog {
		background:#F2F39E;
	    background-image: url(../images/img-gene-blog.jpg);
	    background-repeat: no-repeat;
	    background-position: top;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		padding:5px; 
		color:#FFF; 
	}

	#header-contact {
		background:#F2F39E;
	    background-image: url(../images/img-gene-contact.jpg);
	    background-repeat: no-repeat;
	    background-position: top;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		padding:5px; 
		color:#FFF; 
	}

	#header-resume {
		background:#F2F39E;
	    background-image: url(../images/img-gene-resume.jpg);
	    background-repeat: no-repeat;
	    background-position: top;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		padding:5px; 
		color:#FFF; 
	}

	#header-work {
		background:#F2F39E;
	    background-image: url(../images/img-gene-work.jpg);
	    background-repeat: no-repeat;
	    background-position: top;
	    background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		padding:5px; 
		color:#FFF; 
	}

	#headset { 
		width:96%; 
		height:180px;
	}



}



/*++++++++++
My ColorCombo355 Scheme
#01243B - R1 G36 B59 - Dark Navy Blue
#5288DB - R82 G136 B219 - Blue
#9DA7B2 - R157 G167 B178 - Darker Cool Grey
#C5C5C5 - R197 G197 B197 - Lighter Cool Grey
#71C42B - R113 G196 B43 - Light Green
#F2F39E - R242 G243 B158 - Sand Yellow
++++++++++*/


/*++++++++++
ContentsClear
++++++++++*/

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* ie 6/7 */
}