/* ====================================================================== *
      [1] MAIN STUFF@import url("https://use.typekit.net/ves2cxt.css");
 * ====================================================================== */
	
	
	

	html {
    	margin-right: 0 !important;
    	overflow: visible !important;
    	
	}
	
	body{
		font-family: apparat, sans-serif;
		font-weight: 400;
		font-style: normal;

		background: #FAFAFA;
		font-size: 16px;
		
		-webkit-transition: margin 0.4s ease;
	       -moz-transition: margin 0.4s ease;
	         -o-transition: margin 0.4s ease;
	            transition: margin 0.4s ease;
	    background-color: #fff;
	}
	a {
		color: #000 !important;
	}
	a:hover {
		outline: none;
		text-decoration: none;
		color: #141414 !important;
	}
	a.u-email-inverted {
		color: #fff !important;
	}
	a.h-resume {
		color: #fff !important;
	}
	
	
	h1, h2, h3, h4, h5, h6, p {

		
		font-family: apparat, sans-serif;
		font-weight: 300;
		font-style: normal;
	}

	h1, .h1 {
		/* My Name */
		font-family: le-monde-livre-std, serif;
		font-weight: 700;
		font-style: normal;

		font-size: 3.75em;
		/*color: #39B1C6;*/

		color: #000000;
		line-height: .5em;
		margin: 0;
		padding: 0;
	}
	h3 {
		font-size: 1.43em;
		/* Text under my name */
		color: #000000;
	}
	h5 {
		display: inline;
		font-size: 1.25em;
		color: #252525;
	}
	.colorOne {
		/* header */
		background-color: #F9F9F9; 
	}
	.colorTwo {
		/* section (under header) */
		background: #ffffff;
	}
	.colorThree {
		/* grid-section */
		background: #252525;
	}
	.colorFour {
		/* section-bottom */
		background-color: #ffffff;
	}
/* ====================================================================== *
      [2] HEADER
 * ====================================================================== */

	.header{
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 999;
		top:0;
		/* background-color: #252839; */
		
		width: 100%;
		
		-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.22);
		   -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.22);
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.22);
	}

	/* !!! sets the height position of my name */
	.navbar-header{
		padding-top: 0px;
	}

/* ====================================================================== *
      [3] MENU
 * ====================================================================== */
	.navbar a,
	.dropdown a {
    	outline: none;
    	
	}
	/* !!! Drop down miniture menu at larger resolutions (parent of navbar and dropdown */
	.navbar-collapse {
		border: none !important;

	}
	.collapse {
		
	}
	/* !!! navbar collapse drop down miniture menu at smaller resolutions 760 870 */
	@media(max-width:990px){
		.navbar-collapse {
			position: absolute;
			right: 0px;
			top: 40px;
			margin-top: 0px; 
			
			float:right; 
			background-color: #fff;
			-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
		       -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
		        -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
		            box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
		}
		.content .navbar-nav>li>a{
			color: #000000 !important;
		}




		.navbar-header {
        float: none;
	    }
	    .navbar-left,.navbar-right {
	        float: none !important;
	    }
	    .navbar-toggle {
	        display: block;
	    }
	    .navbar-collapse {
	        border-top: 1px solid transparent;
	        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	    }
	    .navbar-fixed-top {
			top: 0;
			border-width: 0 0 1px;
		}
	    .navbar-collapse.collapse {
	        display: none!important;
	    }
	    .navbar-nav {
	        float: none!important;
			margin-top: 7.5px;
		}
		.navbar-nav>li {
	        float: none;
	    }
	    .navbar-nav>li>a {
	        padding-top: 10px;
	        padding-bottom: 10px;
	    }
	    .collapse.in{
	  		display:block !important;
		}
	}
	.content .navbar{
		margin: 0;
		background: none;
		border: 0;

	}
	
	/* this is how the height of the menu is calculated */
	.portfolio-name {
		padding: 0px 0;

		
	}

	/* !!! adjust height global top nav container only */
	.content .navbar {
		/*background-color: white;
		 height: 150px; */
	}
	/* !!! adjust height of top nav at higher resolutions */
	.content .navbar-nav>li>a{
		padding: 12px 35px !important;
		color: #000;
		margin-top: -10px;
		font-weight: 300 !important;
		font-size: 1em;
	}
	.navbar-nav{
		margin: 0px 0px !important;
	}

	/* !!! adjusts the vertical position of the miniture nav button */
	.navbar-toggle{
		margin: 6px 0;

	}


	/* !!! adjusts the rollover effect of the full size nav FF5A09  */
	.content .navbar-nav>li.active>a,
	.content .navbar-nav>li>a:hover, 
	.nav>li.open>a, 
	.nav>li.open>a:hover, 
	.nav>li.open>a:focus{
		background: #252525 !important;
		color: #fff !important;

	}

	.nav>li.open>a, 
	.nav>li.open>a:hover, 
	.nav>li.open>a:focus{
		/* F3843E*/
		background: #141414 !important;
		color: #fff !important;

	}

	.nav>li.dropdown>a.selected, 
	.nav>li.dropdown>a.selected:hover, 
	.nav>li.dropdown>a.selected:focus{
		background: #141414 !important;
		color: #fff !important;
	}

	.nav>li>a.active{
		color: #000;
	}

	.navbar-nav .caret{
		border-top-color: #000 !important;
  		border-bottom-color: #000 !important;
	}


	.navbar-toggle:focus{
		background: none !important;
		outline: 0;	
	}

	/* !!! adjusts the rollover effect of the miniture nav button */
	.navbar-toggle:hover{
		/*background: rgba(0,0,0,.07) !important;*/
		background: #141414 !important;
	}
	.navbar-toggle:active{
		/*background: rgba(0,0,0,.07) !important;*/
		background: #141414 !important;
	}

	.navbar-toggle{
		border-color: #000 !important;
	}
	.navbar-default .navbar-toggle .icon-bar{
		background-color: #000 !important;
	}

	/* drop down styes */
	.list-unstyled li{
		position: relative;

	}
	.list-unstyled a{
		font-size: .75em;
		/* font-size: 12px; */
		width: 100%;
		padding: 10px 20px;
		height: auto;
		color: #000 !important;
		display: block;
	}
	.list-unstyled a:hover, .list-unstyled a.selected{
		color: #fff !important;
		text-decoration: none;
	}

	.yamm .yamm-content {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		padding-right: 15px !important;
  		padding-left: 15px !important;
	}
	
	@media(min-width:990px){.navbar-right .dropdown-menu{left:0;right:auto}}

	.navbar-nav>li>.dropdown-menu{
		/* D1474C*/
		background: #F5BE88;
		width: 302px;
		color: #000;
		border: 0 !important;
		 -webkit-border-radius: 0px; 
  		    -moz-border-radius: 0px; 
  				 border-radius: 0px; 

		-webkit-box-shadow: none !important;
  		   -moz-box-shadow: none !important;
				box-shadow: none !important;
	}

	.no-gutter [class*='col-']{
	  padding-right:0;
	  padding-left:0;
	}

	.popover_img_container{
		width: 244px;
		height: 160px;
		overflow: hidden;
	}

	.popover_img_container img{
		max-width: 100%;
		width: 100%;
	}

/* ====================================================================== *
      [3.1] SHRINK MENU
 * ====================================================================== */	
	.reverse{
		display: none;
	}

	@media only screen and (min-width: 895px) {

		.header{
			/*position: fixed; /* sticky meny */

		}

		div.header{
			-webkit-transition: padding 0.2s ease, height 0.2s ease, background 0.2s ease;
		       -moz-transition: padding 0.2s ease, height 0.2s ease, background 0.2s ease;
		         -o-transition: padding 0.2s ease, height 0.2s ease, background 0.2s ease;
		            transition: padding 0.2s ease, height 0.2s ease, background 0.2s ease;
		}

		.content .navbar-nav>li>a, .portfolio-name, .content .navbar {

			-webkit-transition: padding 0.2s ease, height 0.2s ease;
		       -moz-transition: padding 0.2s ease, height 0.2s ease;
		         -o-transition: padding 0.2s ease, height 0.2s ease;
		            transition: padding 0.2s ease, height 0.2s ease;
		}
		
		/* this is how the height of the menu is calculated */
		.shrink .content .navbar-nav>li>a {
		  	padding: 18px 35px !important;

		}
		.shrink .content .navbar {
			height: 46px;

		}
		.shrink .portfolio-name {
		  	padding: 5px 0;
		}

		/* Change the colors */
		.shrink div.header{
			background: rgba(255,255,255,1) !important;
		}

		.shrink .reverse{
			display: block;
		}
		.shrink .normal{
			display: none;
		}

		.shrink .content .navbar-nav>li>a {
			color: #575757;

		}

		.shrink .content .navbar-nav>li.active>a,
		.shrink .content .navbar-nav>li>a:hover{
			color: #141414 !important;

		}

		.shrink .content .navbar-nav>li.active>a,
		.shrink .content .navbar-nav>li.dropdown>a:hover{
			color: #fff !important;

		}	

		.shrink .nav>li>a.active{
			color: #141414;

		}

	}

	/* ====================================================================== *
	      COPIED from Pageone.css
	 * ====================================================================== */
	/* The style of the first grid */
	  #grid{
	    margin-top: 40px;
	    margin-left: 60px !important;
	    margin-right: 60px !important;
	    margin-bottom: 80px !important; /* this is important to compensates the negative space between boxes */
	  }
	      
	  /* hide "no more entries button" */
	  .media-boxes-no-more-entries{
	    display: none;
	  }
	#first {
	    border-left: 2px solid #fff;
	    border-radius: 4px 4px 4px 4px;
	  }

	/* hover effect on the thumbnail-overlay  
	OPTIONS:
	background-color: rgba(0,0,0, 0) !important;*/
	.thumbnail-overlay:hover{
	 
	}

	/* hover effect on the image */
	.media-box-image img{
	  -webkit-transition: all 0.6s ease-in-out;
	     -moz-transition: all 0.6s ease-in-out;
	       -o-transition: all 0.6s ease-in-out;
	      -ms-transition: all 0.6s ease-in-out;
	          transition: all 0.6s ease-in-out;

	  -webkit-transform-origin: center;
	     -moz-transform-origin: center;
	       -o-transform-origin: center;
	      -ms-transform-origin: center;
	          transform-origin: center;
	}
	.media-box-image:hover img{
	  -webkit-transform: scale(1) translate(0px);
	     -moz-transform: scale(1) translate(0px);
	       -o-transform: scale(1) translate(0px);
	      -ms-transform: scale(1) translate(0px);
	          transform: scale(1) translate(0px);
	}
	
	.white-popup {

		padding: 0;
		display: block;
		margin: 0 auto;
		max-height: 100%;
		max-width: 100%;
		background-color: #c6c6c6;
		margin-right: 5%;
		margin-left: 5%;
		/*
		
		position: relative;
		
		padding: 0;
		*/
		
	}
	video {
		  /* override other styles to make responsive */
		  width: 100%    !important;
		  height: auto   !important;
		}
	 		
	 /* style of the html popup 
        .white-popup {
          position: relative;
          background: #FFF;
          padding: 20px;
          width: auto;
          max-width: 500px;
          margin: 20px auto;
        }*/


	/* change style of filter menu */
    .media-boxes-filter>li {
        margin: 0 !important;
        background: #252525 !important;
    }
    .media-boxes-filter>li:last-child a{
        border-right: 1px solid #EBEBEB;
        border-radius: 0 4px 4px 0;
    }
    .media-boxes-filter>li:first-child a{
        border-radius: 1px 0 0 4px;
    }
 		
  	/* Center the filters */
    .filters-container{
    	 text-align: center;
    }

	.media-boxes-filter {
		text-align: left;

		width: 530px;
		display: inline-block;
		padding-top: 10px;

	}

	.media-boxes-filter h2 {
		font-size: 20px;
	}
	@media(max-width:690px){.media-boxes-filter {width: 100%; text-align: center}}


	.media-boxes-filter>li a {
		color: #fff !important;		/* Text color */
		background-color: transparent !important;/* Each cell background color */
		outline: none;
	    border-bottom: 1px solid #EBEBEB;
	      border-left: 1px solid #EBEBEB;
	       border-top: 1px solid #EBEBEB;
	       border-right: none;

	    -webkit-box-shadow: none;
	       -moz-box-shadow: none;
	         -o-box-shadow: none;
	        -ms-box-shadow: none;
	            box-shadow: none;
	}

	.media-boxes-filter>li a.selected {
		-webkit-box-shadow: none !important;
		 -moz-box-shadow: none !important;
		  -ms-box-shadow: none !important;
		      box-shadow: none !important;
	}
	/* Hover effect on filter menu  */
	.media-boxes-filter>li a:hover{
		background: #141414 !important; /* Background color change on hover */
		color: #000 !important;/* Unknown */
	}
        
       

       

/* ====================================================================== *
      [5] CONTENT
 * ====================================================================== */
 	.my-name img {
 		position: relative;
 		float: left;

 		margin-right: 25px;
 		margin-bottom: 15px;

 		max-width: 500px;
  		height: 100px;

 	}
 	.about img {
 		position: relative;
 		float: left;

 		margin-right: 25px;
 		margin-bottom: 15px;

 	}
 	@media(max-width:400px){
 		.mypic {
 			width: 100% !important;
 			height: auto !important;
 		}
 	}
 	.about h5 {
 		color: #fff;
 	}
 	.about {
 		position: relative;
 		margin-top: 25px !important;
 	
 		height: auto;

 	}
 	.about p{
 		font-size: 1em;
 		color: #fff !important;
 		
 	}
 	.about-copy {
 		
 	}
 	.resume {
 		position: relative;
 		height: auto;
 		text-align: left;

 	}
 	#resume {
 		text-align: left;
 		color: #545454;
 	}
 	.resume p a {
 		font-size: 1em;
 		color: #000 !important;
 		
 	}
 	.awards-videos>ul>li a {
 		color: #000 !important;	
 	}
 	.awards-videos>ul>li a:hover {
 		color: #141414 !important;	
 	}
 	.resume p a:hover {
 		color: #141414 !important;
 		
 	}
 	.resume p {
 		
 		color: #545454 !important;
 		
 	}
 	.resume>ul>li {
 		
 	}
 	.resume h5 {
 		color: #545454;
 	}
 	.vevent .company {
 		color: #000 !important;
 	}
 	.resume .location {
 		margin-left:1em
 	}
 	.resume .date {
 		margin-left:1em
 	}
 	.date abbr {
 		border-bottom-width: 0;
 		cursor: help;
 	}
 	.name {
 		float: left;
 		padding-top: 24px;
 	}
 	.summary {
 		float: left;
 		padding-top: 24px;

 	}
 	.skills-software {
 		float: left;
 		width: 100%;
 		padding-top: 24px;

 	}
 	.skills {
 		
 		float: left;
 		width: 50%;
 		list-style-type:none;
 	}
 	.software {
 		width: 50%;
 		float: right;
 		list-style-type:none;
 	}
 	.p-software>li {
 		list-style-type:none;
 	}
 	.p-skill>li {
 		list-style-type:none;
 	}

 	.software {
 		padding-top: 24px;
 	}
 	.experience {
 		float: left;
 		padding-top: 24px;
 	}
 	.education {
 		float: left;
 		padding-top: 24px;
 		width: 100%;
 	}
 	.university-cincinnati {
 		float: left;
 		width: 50%;
 	}
 	.sinclair {
 		padding-top: 24px;
 		padding-left: 24px;
 		float: right;
 		width: 50%;
 	}
 	.awards {
 		float: left;
 		padding-top: 24px;
 	}
 	.resume-bottom {
 		clear: both;
 		padding-top: 24px;
 		font-size: .8em;
 	}
 	.p-role {
 		text-align: left;
 		padding-right: 10px;
 	}
	.content {
		width: 100%;
		padding: 60px 150px 120px !important;
	}

	.content h2{
		color: #252525;
		font-size: 1.25em;
		text-align: center;
		/*font-size: 20px;*/
	}

	.content h4{
		margin: 20px 0;
		color: #252525;
	}

	.section{
		/* background: #39B1C6; Secondary Orange: F3843E*/
		
		width: 100%;
		padding: 20px 0px;
		text-align: center;
		
	}
	.section-bottom {
		/* background: #39B1C6; */
		
		
		width: 100%;
		padding: 20px 0px;
		text-align: center;
		
	}

	.section h2{
		margin-top: 0px;
	}

	.content p{
		color: #252525;
		margin-bottom: 0;
	}
	.grid-container {
		/*width: 960px;*/
		width: 100%;
	}
	.grid-section{
		display: block;
		margin: 0 auto;
		
		max-width: 100%;
		/*background-image: none !important;*/
		background-repeat: no-repeat;
		/*background-attachment: fixed;
		background-size: 100% 100%;*/
	    
		/*background: #25242C;
		background: #343a40;*/
		padding-top: 20px;
		padding-bottom: 60px;
		/* Thin lines - stripes - originally light blue 59B2C0
		border-bottom: 4px solid #59B2C0;*/


/*
		padding: 0;
		display: block;
		margin: 0 auto;
		max-height: 100%;
		max-width: 100%;
		background-color: #c6c6c6;
		margin-right: 5%;
		margin-left: 5%;
*/



	}
	.grid-section-resume {
		background-repeat: no-repeat;
	    background-size: 100% 100%;

		padding-top: 20px;
		padding-bottom: 20px;
		/*
		border-bottom: 4px solid #59B2C0;*/
	}
	.animate-on-load{
		opacity: 0;
	}

	.section-label{
		text-align: left;

	}

	@media(max-width:590px){.section-label {width: 100%; text-align: center}}
	
	.filters-container{

		text-align: center;
		
		width: 100%;
	}
	.right-align {
    		float: right;
  	}
	.proj-descr {
		font-size: 1em;
		width: 100%;
		padding: 10px 20px;

		color: #252525;
		word-wrap: break-word;

		text-align: left;
	}

	
	
	
/* ====================================================================== *
      [6] FEATURES
 * ====================================================================== */
	
	.features-container{
		text-align: left;
	}
	
	.features-container hr{
		margin: 40px 0 !important;
		/*
		border: 1.5px solid #59B2C0;*/
	}

	.features-container h4{
		font-size: 1em;
		font-weight: 600;
		text-align: center;
	}

	.features-container p{
		margin-bottom: 50px;
		
		font-size: .9em;
		line-height: 21px;
	}

	.col-md-4{
		padding-left: 15px;
		padding-right: 15px;
	}

	.features{
		color:rgb(88, 88, 88);
	}

/* ====================================================================== *
      [7] FOOTER
 * ====================================================================== */
	
	.footer{
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		
		color: #000;
		/*
		border-top: 4px solid #59B2C0;*/
		
	}

/* ====================================================================== *
      [8] TO TOP
 * ====================================================================== */
	
	.fixed{
		position: fixed;
		right: 17px;
		bottom: 17px;
		
		z-index: 999;
	}

	.fixed>*{
		float: left;
		text-decoration: none !important;
	}
	.to-top{
		height: 29px;
		width: 29px;
		background-color: rgba(0,0,0,0.6);
		color: #fff;
		cursor: pointer;
		text-align: center;

		-webkit-border-radius: 2px;
		   -moz-border-radius: 2px;
		     -o-border-radius: 2px;
		        border-radius: 2px;
	}

	.to-top>i{
		margin-top: 6px;
	}

	.to-top:hover{
		background-color:#42414d!important;
	}

/* ====================================================================== *
      [9] RESPONSIVE DESIGN
 * ====================================================================== */

	@media only screen and (max-width: 990px) {
		.content{
			/* DELETE this*/
			width: 100%;
			padding: 60px 60px !important;

		}
		.col-md-4{
			padding-left: 100px;
			padding-right: 100px;
			
		}
		.row-bottom {
			margin-top: -15px;
		}
		.grid-container {
			
		}

	}

	@media only screen and (max-width: 895px) {
		.content .navbar-nav>li>a{
			padding: 15px 15px !important;

		}
		.col-md-4{
			padding-left: 50px;
			padding-right: 50px;
		}
		.media-box-title{
			font-size: 80% !important;
		}
	}
	/
	@media only screen and (max-width: 640px) {
		h1 {
			font-size: 2.8em;
			line-height: .3em;
		}
		h3 {
			font-size: 1em;
		}
		.media-box-container{
			margin: 0px !important;
		}
		.white-popup .overlay-content {
			width: 100%;
			height: auto;
			
		}
		.proj-descr {
			padding: 10px 50px;
			font-size: .75em;
		}
		.header {
			padding-bottom: 10px;
			padding-bottom: 10px;
		}
		.section {
			padding: 15px 0px;
		}
		.grid-container {
			
		}
		.media-box-title{
			font-size: 80% !important;
		}
		.skills {
 		
	 		float: left;
	 		width: 100%;
	 		list-style-type:none;
	 	}
	 	.software {
	 		width: 100%;
	 		float: left;
	 		list-style-type:none;
	 		padding-top: 0px;
	 	}
	 	.university-cincinnati {
	 		float: left;
	 		width: 100%;
	 	}
	 	.sinclair {
	 		padding-top: 12px;
	 		padding-left: 0px;
	 		float: left;
	 		width: 100%;
	 	}
		
	}
	@media only screen and (max-width: 490px) {
		h1 {
			font-size: 2em;
			line-height: .1em;
		}
		h3 {
			font-size: .75em;
		}
		.header {
			padding: 0;
			height: 100%;
		}
		.navbar-toggle{
			margin: -2px 0;

		}
		.navbar-header{
			/*padding-top: 32px;*/
		}
		.col-md-4{
			padding-left: 20px;
			padding-right: 20px;
		}
		.section {
			padding: 10px 0px;
		}
		.grid-container {
			
		}
	}