/*
Project: Paul Capetola Personal Website;
Description: Resume page styles;
Author: Paul Capetola;
Version: 1.06.28.2018;
 */

/* ================================================================================================== */

/* Hero Styles
--------------------------------------------------------------*/
#resume section.hero {
	background-image: linear-gradient( 45deg, 
		#65219F, 
		#65219F 10%, 
		#571F9B 10%, 
		#571F9B 30%, 
		#441D97 30%, 
		#441D97 70%, 
		#3B1886 70%, 
		#3B1886 90%, 
		#331475 90%
	);
}

#resume section.hero h1 { font-size: 5rem; }

#resume .hero.varText { position: absolute; }

#resume section.containerFluid .row {
	max-width: 1366px;
}
@media (min-width: 1416px) {
	#resume section.containerFluid .row { margin: 50px auto; }
	#resume section.hero h1 { font-size: 8rem; }
}

/* Meter Elements */
.meter {
	width: 100%;
	margin-bottom: 25px;
	background-color: #7110A3;
	cursor: pointer;
}
.meter.active {
	background-color: #9600AF;
}
.meterGauge {
	background-color: #C23555;
	color: white;
	width: 95%;
}
.meter.active .meterGauge {
	background-color: #FF5800;
}
.meterGauge h3 {
	opacity: .75;
	padding: 10px;
	padding-left: 15px;
	white-space: nowrap;
}

.meter:first-child { /* Corrects issue created with added margin of hidden meter element. */
	margin-bottom: 10px;
}

@media (max-width: 991px) {
	.meterGauge h3 .trouble { display: none; }

	.publications ul li:nth-child(-n+2) {
		margin-bottom: 20px;
	}
}

.meter.active .meterGauge h3 {
	opacity: 1;
}
/* Meter widths */
#adobeMeter { width: 98%; }
#htmlMeter { width: 96%; }
#javascriptMeter { width: 40%; }
#wordpressMeter { width: 80%; }
#responsiveMeter { width: 93%; }
#uiUxMeter { width: 90%; }
#brandingMeter { width: 88%; }
#prepressMeter { width: 92%; }

@media (max-width: 767px) {
	.varText { color: #440099; }
	#resume section.hero h1 { font-size: 4rem; margin-top: -10px; }
	.meter { margin-bottom: 20px; background-color: #9600AF; }
	.meter .meterGauge { background-color: #EF4B1A; }
	.meterGauge h3 { padding: 7px; padding-left: 15px; opacity: 1; }
}

@media (min-width: 520px) and (max-width: 767px) {
	#resume section.hero h1 { margin-top: 15px; }
	#resume .hero h1 br { display: none; }
}

.meterGauge h3 {
  letter-spacing: .85pt;
}


/* Experience Section Styles
--------------------------------------------------------------*/
.experience.row, 
.education.row {
    margin-bottom: 5rem;
}

.resume dd, .education dd, 
.resume dd ul, .education dd ul, 
.resume dd ol, .education dd ol {
	font-size: 1.3rem;
	color: #999;
	line-height: 1.6rem;
}

.experience dt, .education dt, .publications dt {
	font-family: "RalewayTitle";
}
.experience dt .yearSpan, 
.education dt .yearSpan {
	font-family: "RalewayBody";
	font-weight: bold;
	color: #AEA199;
}
.experience dt, .experience dd .position, 
.education dt, .education dd .completion {
	font-size: 1.8rem;
}
.experience .position, .education .completion {
	margin-bottom: .5em;
}
.experience dl, 
.education dl {
	margin-bottom: 3.5em
}

#resume #content > .row > section:not(:last-child) {
	margin-bottom: 75px;
}

@media screen and (min-width: 1366px) {
	#resume #content .row {
		margin-left: -65px;
		margin-right: -65px;
  }
}

.experience dt, a.publicationTitle, 
.education dt {
  letter-spacing: 0.25pt;
}


/* Education Section Styles
--------------------------------------------------------------*/
.education .completion {
    color: #333;
    line-height: 1.48;
}

.education .description {
    color: #333;
    line-height: 1.48;
}


/* Publications Section Styles
--------------------------------------------------------------*/
.publications dt a:hover::after, 
.publications dt a:focus::after, 
.publications a.publicationFigure:hover::after, 
.publications a.publicationFigure:focus::after {
	opacity: 0;
}
.publications .fontNeutral {
	font-weight: bold;
}

a.publicationTitle {
  background: linear-gradient(#aea199, #aea199) center calc(100% + 2px) / 100% 2px no-repeat;
  color: #333;
  transition: all .3s ease-out;
}
a.publicationTitle:hover, 
a.publicationTitle:focus {
  background-position: center 100%;
  color: #440099
}

@media (max-width: 767px) {
	.publications figcaption {
		width: 66.66666667%;
		float: right;
		max-width: calc(100% - 200px);
	}
	.publications ul li:not(:last-child) {
		margin-bottom: 35px
	}
}

/* 3D Books */
.publications .visibleMobile img {
	width: 100%;
	height: auto;
}

.publications a.publicationFigure {
	position: relative;
	height: 265px;
	float: left;

	-webkit-perspective: 1800px;
					perspective: 1800px;
}
.book3D {
	display: block;
	position: absolute;
	width: 175px;
	height: 250px;
	left: calc(50% - 175px/2);

	-webkit-transform-style: preserve-3d;
					transform-style: preserve-3d;

	-webkit-transition: -webkit-transform .5s;
					transition: transform .5s;
}

.book3D > div {
	display: block;
	position: absolute;
}

.book3D .publicationCover {
	width: 175px;
	height: 250px;
	background-color: #FF5800;
	box-shadow: 0 0 25px rgba(0,0,0,0.15);
	z-index: -1;

	-webkit-transform-style: preserve-3d;
					transform-style: preserve-3d;

	-webkit-transform-origin: 0% 50%;
					transform-origin: 0% 50%;

	-webkit-transition: -webkit-transform .5s;
					transition: transform .5s;

	-webkit-transform: translate3d(0,0,15px);
					transform: translate3d(0,0,15px);
}
.book3D .publicationSpine {
	width: 30px;
	height: 250px;
	left: -15px;
	background-color: #DD3600;
	z-index: 5;
	box-shadow: -5px 0 10px rgba(0,0,0,0.1);

	-webkit-transform: rotate3d(0,1,0,-90deg);
					transform: rotate3d(0,1,0,-90deg);
}

.book3D .publicationCover.thinSpine {
	-webkit-transform: translate3d(0,0,5px);
					transform: translate3d(0,0,5px);
}
.book3D .publicationSpine.thinSpine {
	width: 10px;
	left: -5px;
}

.book3D img {
	width: 100%;
}

a:hover .book3D, a.onHover .book3D {
	-webkit-transform: rotate3d(0,1,0,35deg);
					transform: rotate3d(0,1,0,35deg);
}
.publications .publicationSpine {
	-webkit-transform: rotate3d(0,1,0,-90deg);
					transform: rotate3d(0,1,0,-90deg);
}

@media screen and (max-width: 991px) {
  .publications ul.flexRow li {
    margin-bottom: 50px;
  }
}

@media (max-width: 568px) {
	.book3D, .book3D .publicationCover {
		width: 140px;
		height: 200px;
		left: calc(50% - 140px/2);

		-webkit-transform: translate3d(0,0,12px);
						transform: translate3d(0,0,12px);
	}
	.book3D .publicationCover.thinSpine {
		-webkit-transform: translate3d(0,0,4px);
						transform: translate3d(0,0,4px);
	}
 	.book3D .publicationSpine, .book3D .publicationSpine.thinSpine {
 		width: 24px;
 		height: 200px;
 		left: -12px;
 	}
	.book3D .publicationSpine.thinSpine {
		width: 8px;
		left: -4px;
	}
 	.publications a.publicationFigure { 
 		height: 212px; 
 	}
	.publications figcaption {
		max-width: calc(100% - 165px);
	}
}

@media (max-width: 399px) {
	.publications figcaption {
		max-width: 100%;
	}
}


/* Print Styles
--------------------------------------------------------------*/
@page {
  margin: 0;
}

@media print {
	img.visiblePrint {
		width: 100%;
		height: 100%;
		page-break-after: always;
    	page-break-inside: avoid;
	}
	footer {
	    display: none;
	    position: fixed;
	    bottom: 0;
	}
  	header {
    	display: none;
    	position: fixed;
    	top: 0;
  	}
}