/*------------

JOURNEY CYCLE

------------*/

#journey-cycle {
	min-height:80vh;
	z-index:1;
}

#journey-cycle .cycle-slide .slide-content {
	z-index:1;
}	

#journey-cycle div.result.active,
#journey-cycle div.result-image.active,
#journey-cycle div.scenario.active, 
#journey-cycle div.result.outcome, 
#journey-cycle div.outcome div.result {
	display:block;
	opacity:1;
}	

/*hide outcome copy by default for fade in*/
#journey-cycle div.scenario.outcome .col {
	opacity:0;
}

#journey-cycle .cycle-slide div.slide-image {
	opacity:0.6;
}

#journey-cycle .cycle-slide div.slide-image.result-image {
	opacity:0.45;
}

#journey-cycle .cycle-slide div.outcome .slide-image,
#journey-cycle .cycle-slide div.slide-image.outcome {
	opacity:0.35;
}

#journey-cycle .cycle-slide div.slide-image {
	display:none;
}	

#journey-cycle .cycle-slide div.slide-image.active {
	position:fixed; 
	top:0;
	left:0; 
	z-index:-1; 
	width:100%;
	height:100%;
	display:inline-block;
	background-size:cover; 
	background-repeat:no-repeat;
    animation: shrink 15s infinite alternate steps(80);
}

#journey-cycle span.name {
	color:#ffff05;
}
	
#journey-cycle .journey-options {
	margin-top:20px;
}

#journey-cycle div.result-content {
	position:relative;
	width:500px;
	padding:50px;
 	margin:0 auto;
	color:white;
	background:white;
    background:url('../img/GGG_Gradient_6.jpg') right center no-repeat; 
    background-size:100%;
}

@media only screen and (max-width: 650px) {	
	#journey-cycle div.result-content {
  		width: calc(100% - 100px);
	}
}

#journey-cycle div.result-content button {
	text-align:center;
}

#journey-cycle div.outcome-circle div.copy {
	display:table-cell;
	vertical-align:middle;
	padding:0 30px;
	margin-left:auto;
}

#journey-cycle div.result-content.outcome-circle {
	position:relative;
	display:table;
 	width:250px;
	height:250px;
	line-height:30px;
 	margin:0 auto;
    text-align:center;
	color:white;
	background:white;
    background:url('../img/GGG_Gradient_8.jpg') right center no-repeat; 
    background-size:100%;
    border-radius:125px;
    border-radius:50%;
    -webkit-border-radius:50%;
    transform: rotate(-20deg); 
}

@keyframes shrink {
  0% {
    transform: scale(1.1)
  }
  100% {
    transform: scale(1.0)
  }
}

input#journey_username {
	color:#ffff05;
	text-shadow: 0 0 0 transparent;
	width: 100%;
	font-family: 'Trade Gothic LT Std Cn Bold';
	font-size:16px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.1em;
	word-spacing: 0;
	text-transform: uppercase;
    width:50%;
	height: 100%;
	padding: 20px 30px;
	margin-bottom:30px;
	border:solid 1px rgba(255, 255, 255, 0.5);
	background: none;
}

#journey-cycle button {
	text-align:left;
	font-size:15px;
	color:#ffff05;
	background-color:rgba(144, 7, 249, 0.75);
}

#journey-cycle button:hover {
	background-color:rgba(144, 7, 249, 1);
}

ul.question-pager {
	padding:0;
	padding-inline-start:0;
	margin-block-start:0;
	margin:0 0 15px 0;
}
ul.question-pager li {
	display:inline;
}

.page-bottom {
	position:relative;
	z-index:100;
	display:none;
}

.backstage {
	position:fixed; 
	top:-2000px;
	left:-2000px;
	opacity:0;
}


/*  SOCIAL  ============================================================================= */

ul.sharing {
	display:table;
	padding:0;
	padding-inline-start:0;
	margin-block-start:0;
	margin:25px 0 15px 0;
}

ul.sharing li {
	display:table-cell;
	vertical-align:middle;
	padding:0 10px;
}

ul.sharing li a:hover {
	opacity:0.66;
}

a.fb {
	display:inline-block;
	width:28px;
	height:28px;
	background:url("../img/icons/icon_fb_white.png") center center no-repeat;
	background-size:92%;
}

a.linkedin {
	display:inline-block;
	width:28px;
	height:28px;
	background:url("../img/icons/icon_linkedin_white.png") center center no-repeat;
	background-size:92%;
}

a.twitter {
	display:inline-block;
	width:28px;
	height:28px;
	background:url('../img/icons/icon_twitter_white.png') center center no-repeat;
	background-size:100%;
}
