/*
Theme Name: APA Procurement & Supply Training
Author: Pipe Media
Author URI: https://pipemedia.co.uk
Description: Responsive WordPress Theme for APA Procurement & Supply Training
Version: 1.0
*/

/* Basic Styles
------------------------------------------- */

	body {
		background-color: #FFFFFF;
		font-family: "greycliff-cf", Arial, Helvetica, Sans-serif;
		font-size: 26px;
		line-height: 34px;
		color: #FFFFFF;
		font-weight: 400;
	}

/* Typography
------------------------------------------- */

	h1, h2, h3, h4, h5, h6 {
		color: #FFFFFF;
		font-weight: 800;
		margin: 0 0 20px; }
	h1, .size-h1 { font-size: 40px; line-height: 50px; }
	h2 { font-size: 32px; line-height: 40px; }
	h3 { font-size: 40px; line-height: 46px; }
	h4 { font-size: 24px; line-height: 30px; }
	h5 { font-size: 16px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 18px; }
	
	p { margin: 0 0 20px; font-weight: 300; }
	p img { margin: 0; }

	em { font-style: italic; }
	strong { font-weight: 700; }
	small { font-size: 80%; }
	
/*	Horizontal Line  */
	hr { border: solid #F5A14C; border-width: 1px 0 0; clear: both; margin: 60px 0; height: 0; }

/* Misc Utilities
------------------------------------------- */

/*	Display None  */
	.d-none { display: none; }

/*	Margins  */
	.m-0 { margin: 0; }
	.mb-10 { margin-bottom: 10px; }
	.mb-20 { margin-bottom: 20px; }
	.mb-30 { margin-bottom: 30px; }
	.mb-40 { margin-bottom: 40px !important; }
	.mb-60 { margin-bottom: 60px; }
	.mt-0 { margin-top: 0px; }
	.mt-10 { margin-top: 10px; }
	.mt-20 { margin-top: 20px; }
	.mt-40 { margin-top: 40px; }
	.mt-60 { margin-top: 60px; }
	.ml-20 { margin-left: 20px; }
	.mr-20 { margin-right: 20px; }
	.m-auto { margin: 0 auto; }

/*	Padding  */
	
	.p-0 { padding: 0; }

/*	Floats  */

	.float-left { float: left; }
	.float-right { float: right; }

/* Links
------------------------------------------- */

	a { color: #454545; text-decoration: underline; }
	a:hover { color: #000000; }
	
	a.btn,
	button.btn,
	form .frm_submit button {
		display: inline-block;
		background-color: #8EF3C9;
		border: 3px solid #8EF3C9;
		padding: 10px 20px 8px;
		text-decoration: none;
		font-size: 24px;
		color: #3C3C3B;
		transition: background .3s ease;
		line-height: 30px;
		font-weight: 600;
	}
	
	a.btn:hover,
	form .frm_submit button:hover {
		background-color: #FFFFFF;
		color: #3C3C3B;
	}

/* Lists
------------------------------------------- */

	ul {
		list-style: square;
		padding: 0 0 0 22px;
	}
	
	ul li, ol li {
		margin: 0 0 8px;
		padding-left: 7px;
	}

/* Images
------------------------------------------- */

	img {
		max-width: 100%;
		height: auto;
	}

	img.alignleft {
		float: left;
		margin: 0 40px 0 0;
	}
	
	img.alignright {
		float: right;
		margin: 0 0 0 40px;
	}
	
	img.aligncenter {
		margin: 40px auto;
		display: block;
	}
	
	.wp-caption.alignleft {
		float: left;
		margin: 0 40px 0 0;
	}
	
	.wp-caption.alignright {
		float: right;
		margin: 0 0 0 40px;
	}
	
/* Navigation
------------------------------------------- */
	
	.fp-viewing-anchor-1 #fp-nav ul li a span,
	.fp-viewing-anchor-1 .fp-slidesNav ul li a span,
	.fp-viewing-anchor-2 #fp-nav ul li a span,
	.fp-viewing-anchor-2 .fp-slidesNav ul li a span,
	.fp-viewing-anchor-3 #fp-nav ul li a span,
	.fp-viewing-anchor-3 .fp-slidesNav ul li a span {
		background-color: #3C3C3B;
	}

	.fp-viewing-anchor-4 #fp-nav ul li a span,
	.fp-viewing-anchor-4  .fp-slidesNav ul li a span,
	.fp-viewing-anchor-5 #fp-nav ul li a span,
	.fp-viewing-anchor-5  .fp-slidesNav ul li a span {
		background-color: #8EF3C9;
	}

/* Page
------------------------------------------- */	
	
	.row {
		max-width: 1325px;
	}

/* Logo
------------------------------------------- */

	#logo .logo-circle {
		background-color: #3C3C3B;
		width: 600px;
		height: 600px;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
	}
	
	#logo .logo-circle img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 400px;
	}

/* Strapline
------------------------------------------- */

	#strapline {
		background: url('images/crossing-gap.jpg') center no-repeat;
		background-size: cover;
		position: relative;
	}

	#strapline .circle-bg {
		background: url('images/strapline.png') left center no-repeat;
		background-size: 290px auto;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#strapline h2 {
		font-size: 80px;
		line-height: 94px;
		color: #3C3C3B;
		margin: 0;
		position: relative;
		z-index: 999;
	}
	
	#strapline h2 span.line-break {
		display: inline-block;
	}
	
	#strapline h2 span.line-break span.dot {
		color: #FFFFFF;
	}
	
	#strapline .strapline-curve-1 {
		background: url('images/strapline-curve-1.png') left center no-repeat;
		background-size: 390px auto;
		width: 390px;
		height: 100vh;
		position: absolute;
		left: 100px;
		top: 0;
	}
	
	#strapline .strapline-curve-2 {
		background: url('images/strapline-curve-2.png') left center no-repeat;
		background-size: 303px auto;
		width: 303px;
		height: 100vh;
		position: absolute;
		left: 400px;
		top: 0;
	}

/* Slides
------------------------------------------- */

	.section-slide h2 {
		font-size: 76px;
		line-height: 86px;
		color: #8EF3C9;
		margin: 0 0 40px;
	}
	
	.section-slide h2 span.line-break {
		display: inline-block;
		color: #FFFFFF;
	}
	
	.section-slide h2 span.line-break span.dot {
		color: #8EF3C9;
	}
	
	.section-slide h2 span.dot-white {
		color: #FFFFFF;
	}
	
	#slide-one {
		background: url('images/slide-one.jpg') center no-repeat;
		background-size: cover;
		position: relative;
	}
	
	#slide-two {
		background: url('images/slide-two.jpg') center no-repeat;
		background-size: cover;
		position: relative;
	}
	
	.section-slide .circle-image {
		border: 20px solid #FFFFFF;
		float: right;
		border-radius: 50%;
	}
	
	.section-slide .dots {
		background: url('images/dot.png') repeat-y;
		background-size: 35px auto;
		position: absolute;
		right: 50px;
		top: 1rem;
		width: 35px;
		height: calc(100vh - 1rem);
	}
	
	.section-slide .dots-2 {
		right: 105px;
	}
	
	.section-slide .dots-3 {
		right: 160px;
	}
	
	.section-slide .dots-4 {
		right: 215px;
	}

/* Contact
------------------------------------------- */
	
	#contact .contact-circle {
		border: 50px solid #8EF3C9;
		width: 600px;
		height: 600px;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;
		-o-transition: all 0.4s ease-out 0s;
		-webkit-transition: all 0.4s ease-out 0s;
		-moz-transition: all 0.4s ease-out 0s;
	}
	
	#contact .contact-circle:hover {
		background-color: #8EF3C9;
	}
	
	#contact .contact-circle a {
		text-decoration: none;
		display: block;
		width: 100%;
		height: 100%;
	}

	#contact .contact-circle a span {
		font-weight: 800;
		font-size: 66px;
		line-height: 72px;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 400px;
		text-align: center;
	}
	
	#contact .contact-circle a span span.dot {
		color: #8EF3C9;
		position: static;
		margin-left: -10px;
	}
	
	#contact .contact-circle:hover a span {
		color: #3C3C3B;
	}
	
	
	#contact .contact-circle:hover a span span.dot {
		color: #FFFFFF;
	}
	
	.popup {
		position: relative;
		background: #FFFFFF;
		padding: 30px 20px;
		width: auto;
		max-width: 740px;
		margin: 20px auto;
	}
	
	.popup h3,
	.popup p {
		color: #3C3C3B;
	}
	
	.popup p {
		line-height: 27px;
		font-size: 22px;
	}

/* Play/Pause Controller
------------------------------------------- */

	.play-pause-control {
		position: fixed;
		width: 75px;
		height: 75px;
		bottom: 20px;
		left: 20px;
		border-radius: 50%;
	}
	
	.play-pause-control svg {
		width: 100%;
		height: 100%;
	}
	
	.fp-viewing-anchor-1 .play-pause-control div,
	.fp-viewing-anchor-2 .play-pause-control div {
		fill: #3C3C3B;
	}
	
	.fp-viewing-anchor-3 .play-pause-control div,
	.fp-viewing-anchor-4 .play-pause-control div,
	.fp-viewing-anchor-5 .play-pause-control div {
		fill: #8EF3C9;
	}

/* Media Queries
------------------------------------------- */

/* Small only */
@media screen and (max-width: 39.9375em) {
	
	body {
		line-height: 22px;
		font-size: 16px;
	}
		
	#logo .logo-circle {
		width: 300px;
		height: 300px;
	}
	
	#logo .logo-circle img {
		width: 65%;
	}
	
	#strapline .circle-bg {
		background-size: 160px auto;
	}
	
	#strapline h2 {
		line-height: 38px;
		font-size: 32px;
	}
	
	#strapline h2 span.line-break {
		display: inline;
	}
	
	#strapline h2 span.line-break span.dot {
		color: #8EF3C9;
	}
	
	.section-slide h2 {
		line-height: 42px;
		font-size: 36px;
	}
	
	#contact .contact-circle {
		width: 300px;
		height: 300px;
		border: 20px solid #8EF3C9;
	}
	
	#contact .contact-circle a span {
		line-height: 42px;
		font-size: 36px;
	}
	
	#contact .contact-circle a span span.dot {
		margin-left: -5px;
	}
	
	.popup {
		padding: 20px;
	}
	
	.popup h3 {
		line-height: 36px;
		font-size: 32px;
	}
	
	.popup .frm_forms {
		margin-bottom: 30px;
	}
	
	.section-slide .circle-image {
		float: none;
		margin: 0 auto 30px;
		display: block;
		width: 60%;
		border: 10px solid #FFFFFF;
	}
	
	#slide-two img.avl-logo {
		margin: 20px auto;
		display: block;
		width: 150px;
	}
	
	.play-pause-control {
		position: fixed;
		width: 45px;
		height: 45px;
		bottom: 10px;
		left: 10px;
		border-radius: 50%;
	}
	
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	body {
		line-height: 28px;
		font-size: 22px;
	}
	
	#logo .logo-circle {
		width: 450px;
		height: 450px;
	}
	
	#logo .logo-circle img {
		width: 65%;
	}
	
	#strapline h2 {
		line-height: 74px;
		font-size: 66px;
	}
	
	.section-slide h2 {
		line-height: 60px;
		font-size: 52px;
	}
	
	.dots.dots-3,
	.dots.dots-4 {
		display: none;
	}
	
	#contact .contact-circle {
		width: 450px;
		height: 450px;
		border: 25px solid #8EF3C9;
	}
	
	#contact .contact-circle a span {
		line-height: 56px;
		font-size: 48px;
	}
	
	#contact .contact-circle a span span.dot {
		margin-left: -5px;
	}
	
	.popup .frm_forms {
		margin-bottom: 30px;
	}
	
	.section-slide .circle-image {
		position: relative;
		z-index: 999;
		right: 60px;
		max-width: calc(100% - 65px);
		border: 15px solid #FFFFFF;
	}
	
	#slide-two img.avl-logo {
		margin: 45px 0 30px 0;
	}
	
}

/* Large and up */
@media screen and (min-width: 64em) {
	
	#slide-one img.circle-image {
		margin-top: 65px;
		position: relative;
		z-index: 999;
	}
	
	#slide-two img.avl-logo {
		float: right;
		margin: 45px 105px 0 0;
	}
	
	#slide-two img.circle-image {
		margin-top: 65px;
		position: relative;
		z-index: 999;
	}
	
	#logo .logo-circle {
		-webkit-animation: spin 2000ms linear forwards, moveLeftToRight 2s linear forwards;
		  -moz-animation: spin 2000ms linear forwards, moveLeftToRight 2s linear forwards;
		  -ms-animation: spin 2000ms linear forwards, moveLeftToRight 2s linear forwards;
		  animation: spin 2000ms linear forwards, moveLeftToRight 2s linear forwards;
		  -webkit-transition: all 1s ease;
		  transition: all 1s ease;
		  position: absolute;
		  left: 0;
		  top: 50%;
		  margin-top: -300px;
	}
	
	/* Spinning the sphere using key frames */
	@-ms-keyframes spin {
	  from { -ms-transform: rotate(0deg); }
	  to { -ms-transform: rotate(360deg); }
	}
	@-moz-keyframes spin {
	  from { -moz-transform: rotate(0deg); }
	  to { -moz-transform: rotate(360deg); }
	}
	@keyframes spin {
	  from { transform: rotate(0deg); }
	  to { transform: rotate(360deg); }
	}
	@-webkit-keyframes spin {
	  from { -webkit-transform: rotate(0deg); }
	  to { -webkit-transform: rotate(360deg); }
	}

	/* Move sphere from left to right */
	@-moz-keyframes moveLeftToRight {
	  0%   { left: -600px; }
	  100% { left: calc(50% - 300px); }
	}
	@-ms-keyframes moveLeftToRight {
	  0%   { left: -600px; }
	  100% { left: calc(50% - 300px); }
	}
	@keyframes moveLeftToRight {
	  0%   { left: -600px; }
	  100% { left: calc(50% - 300px); }
	}
	@-webkit-keyframes moveLeftToRight {
	  0%   { left: -600px; }
	  100% { left: calc(50% - 300px); }
	}
	
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}