@charset "UTF-8";
/* CSS Document */

.header {background-color: #bce4e8;}
ul.nav li {list-style: none; float:left; display: inline-block; padding: 15px;}
ul.nav li a {padding: 5px 20px; text-decoration: none; border: 1px solid #177075; border-radius: 5px; background-color: #51a1a5; color: #fff;}
ul.nav li a:hover, ul.nav li a.active {background-color: #064949;}
.portfolio .row {margin-top: 25px;}

.thumb {max-width: 100%; cursor: pointer;}


.rollover {opacity: 1;
-o-transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition: -webkit-transform 1s;
background:url(images/thumb-hover.png) center center no-repeat #000;
cursor: pointer;
position: absolute;
z-index: 10;
opacity: 0;
}

.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

.footer { position: fixed; width: 100%; height: 30px; background-color: #bce4e8; z-index: 1000; font-size: 11px; display: none;}

.push {height: 70px; width: 100%; display: block; }

.cbp-caption-activeWrap { color: #fff; padding: 10px;}
.cbp-caption-activeWrap h1 {font-size: 21px; }
.workex {padding: 15px;}
.workex .button {margin-top:10px;}
.workex .button {color: #064949; border-color:#064949}
.workex .button:hover {background-color:#bce4e8;}

#grid-container {max-width: 1300px; margin: 20px auto;}

.cbp-popup-content {border: 1px solid #ccc; margin: 10px 0;}

hr {border: 2px dotted #bce4e8; border-style: none none dotted; color: #fff; background-color: #fff; }

ul.skills {margin-left: 20px;}
ul.software {list-style-type:none;}
ul.software li {width: 25%; float:left; display: inline-block;  padding-left: 5px;}

 @media (max-width: 768px) {
	 
	ul.software li {width: 100%%; float:none; display: block;  padding-left: 5px;} 
	ul.nav li {padding:  0 5px }
	ul.nav {margin-top: 5px; border-top: 1px solid #ccc; padding:15px 0;}
	.logo img {display: block; margin: 0 auto;}
 }
.ps {border-left: 25px solid #51c9f0;}
.dw {border-left: 25px solid #93c83f;}
.ai {border-left: 25px solid #f58730;}
.id {border-left: 25px solid #c53372;}
.fw {border-left: 25px solid #ebe70d;}
.mac {border-left: 25px solid #ccc;}
.hc {border-left: 25px solid #e34e25;}
.jq {border-left: 25px solid #126bb2;}
.software-addition {font-size: 11px;}

.designer {border-right : 2px dotted #bce4e8;}
.responsibilities {border-left : 2px dotted #bce4e8; padding-left: 50px;}
.education {border-left : 2px dotted #bce4e8; padding-left: 50px;}
.contact  {border-left : 2px dotted #bce4e8; padding-left: 50px;}

 @media (max-width:549px) {
	 .designer, .responsibilities, .education, .contact {border-left: none; padding-left: 10px;}
	 .designer {border-right: none;}
	 
 }
h5 {margin: 0; font-weight: bold;}

.center {text-align: center;}

h3 {font-family: 'Arvo', serif;}

.thumb {width: 100%;}

input[type="text"], textarea {width: 100%;}