/* ==========================================================================
   16_SPECIFICS
   --------------------------------------------------------------------------
   * README

   * WIDGET: SOCIAL LOGIN
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the All specific styles.
 * That means they apply to any page that deals with an exception to any
 * default style.

 * If you need to deal with an exception to any default styles, you should
 * manage it by adding a .X--modifier class to the .X element and develop the
 * given exception nested to this .X--modifier class in this stylesheet under
 * the corresponding page subtitle.

 * These .X--modifier classes and its nested styles are grouped by page in which
 * are featured, sorted by HTML depth, and separated in Structure, Behaviour or
 * Appearance styles as appropriate.
 */


/* WIDGET: SOCIAL LOGIN
   ========================================================================== */

/* Behaviour
   -------------------------------------------------------------------------- */
.social-login {
    text-align: center;
}

/* Nav */

.nav__item.searchJobs {
	background: url(../images/button__searchJobs-1.gif) no-repeat top left;
	display: block;
	width: 259px;
	height: 56px;
	padding: 8px 15px;
}
@media all and (max-width: 559px) {
	.nav__item.searchJobs {
		width: 180px;
	    height: 46px;
	    background-size: contain;
	    padding: 2px 6px;
	}
}
.nav__item.searchJobs a:hover,
.nav__item.searchJobs a:focus {
	color: #FFFFFF;
}

/* Banner */


h2.banner__title span{
	display: block;
	width: 350px;
}
.banner--success h2.banner__title span {
	width: 200px;
}
@media all and (max-width: 400px) {
	h2.banner__title {
		text-align: center;
	}
	h2.banner__title span {
		width: unset;
	    max-width: unset;
	    margin-top: 10px;
	    text-align: center;
	}
}

@media all and (max-width: 550px) {
	.banner--success h2.banner__title {
		text-align: center;
	}
	.banner--success h2.banner__title span{
		width: unset;
	    max-width: unset;
	    margin-top: 10px;
	    text-align: center;
	}
}

/* first Section */

section h3 {
	font-size: 30px;
}
section .button {
	font-size: 14px;
	font-weight: 600;
	padding-left: 40px;
	padding-right: 40px;
}
@media all and (max-width: 599px) {
	section .button {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.grid > .grid__item.grid__item--padding {
	padding: 50px 60px;
}
@media (max-width: 400px) {
	.grid > .grid__item.grid__item--padding {
		padding: 40px 20px;
	}
}
.section-intro .grid:not(.grid--2) > .grid__item.whiteBg {
	margin: 0 10px 0 0;
}
@media (max-width: 768px) {
	.section-intro .grid:not(.grid--2) > .grid__item.whiteBg {
	    margin: 0;
	}
}
form .fieldSpec {
	width: 48%;
	float: left;
	clear: none;
}
form .fieldSpec.fullWidth {
	width: 100%;
	float: left;
	clear: none;
}
@media all and (min-width: 451px) {
	form .fieldSpec.fullWidth .cb {
		width: 50%;
		float: left;
	}
}
form .fieldSpec:nth-of-type(odd) {
	margin-right: 2%;
}
@media all and (max-width: 850px)  {
	form .fieldSpec {
		width: 100%;
		padding-bottom: 5px;
	}
	form .fieldSpec:nth-of-type(odd) {
		margin-right: 0;
	}
}
.blueskyBg form .saveButton,
.blueskyBg form .saveButton:hover,
.blueskyBg form .saveButton:focus {
	background-color: #9f9697;
	color: #FFFFFF;
	font-weight: 600;
	margin-top: 25px;
	font-size: 14px;
}

/* Carousel */

.section-carousel {
	width: calc(100vw - 20px);
    margin: 0 auto;
}
.carousel {
	color: #FFFFFF;
	text-shadow: 2px 2px 3px rgba(15, 15, 15, 0.70);
}
.carousel__item-one {
	background: url('../images/testimonial-Antony__bg.jpg') no-repeat center center;
	background-size: cover;
	height: 550px;
	padding-top: 50px;
}
.carousel__item-two {
	background: url('../images/testimonial-Robert__bg.jpg') no-repeat center center;
	background-size: cover;
	height: 550px;
	padding-top: 50px;
}
.carousel .quote {
	font-size: 28px;
	max-width: 650px;
    margin: 0 0 0 auto;
}
.carousel .name {
	font-size: 15px;
	margin: 30px 0;
	max-width: 650px;
    margin: 20px 0 0 auto;
}
.carousel a {
	font-size: 15px;
	text-decoration: underline;

}
.carousel .link,
.carousel .link:focus,
.carousel .link:hover {
	border-bottom: 0;
	font-weight: 600;
	color: #FFF;
	max-width: 650px;
    margin: 20px 0 0 auto;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    bottom: 50px;
    display: block;
    width: 100px;
    height: 101px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    z-index: 30
}
.slick-prev {
	background: url('../images/carousel__back.png') no-repeat top left;
	left: 10%;
	left: calc((100vw - 1148px)/2 + 24px)
}
.slick-next {
	background: url('../images/carousel__next.png') no-repeat top left;
	right: 10%;
	right: calc((100vw - 1148px)/2 + 24px)
}
@media all and (max-width: 1150px) {

	.slick-prev {
		left: 24px;
	}
	.slick-next {
		right: 24px;
	}
}

button.slick-prev:focus, button.slick-next:focus,
button.slick-prev:active, button.slick-next:active,
button.slick-prev:hover, button.slick-next:hover {
	background-color: transparent;
	border: none;
}

/* Oportunities */

.section-featured-oportunities h3 {
	color: #00a4e3;
}
.section-featured-oportunities p {
	font-size: 18px;
}
.section-featured-oportunities .grid__item a {
	font-size: 18px;
	margin: 0 auto;
    width: auto;
    display: block;
    text-align: center;
}
.section-featured-oportunities .grid__item a:hover {
	border-bottom: none;
}
.section-featured-oportunities .searchJobs {
	background: url(../images/button__searchJobs-2.gif) no-repeat top left;
	display: block;
	width: 269px;
    height: 56px;
    padding: 17px 15px;
    margin-top: 50px;
}
.section-featured-oportunities .grid__item {
	background-color: #FFFFFF;
	margin: 10px 10px 0 0;
    max-width: 32%;
    padding: 30px 10px;
}
@media all and (max-width: 810px) {
	.section-featured-oportunities .grid__item {
		max-width: 49%;
	    width: 50%;
	    flex: 0 0 50%;
	    margin-right:1%;
	}
	.section-featured-oportunities .grid__item:nth-of-type(even) {
		margin-right: 0px;
	}
}
@media all and (max-width: 560px) {
	.section-featured-oportunities .grid__item {
		max-width: 100%;
	    width: 100%;
	    flex: 0 0 100%;
	    margin-right:0;
	}
}

/* Section video1 and video2 */

.section-video1 {
	background: url('../images/sphere_videoGrab.jpg') no-repeat top center;
	background-size: cover;
	padding: 50px 0;
	margin-top: 0px;
}
.section-video2 {
	background: url('../images/WarriorGames_VideoGrab.jpg') no-repeat top -80px center;
	background-size: cover;
	margin-top: 0px;
}
@media all and (max-width: 1235px) {
	.section-video2 {
		background-position: top center;
	}
}
@media all and (max-width: 768px) {
	.section-video2 {
		background-position: top center;
	}
}
.section-video1 .grid {
	min-height: 450px
}
.section-video2 .grid {
	min-height: 550px
}
.section-video1 .grid__item.text,
.section-video2 .grid__item.text {
	max-width: 420px;
	/*margin-top: 40px;*/
	text-shadow: 2px 2px 3px rgba(15, 15, 15, 0.70);
}
.section-video1 .video,
.section-video2 .video {
	text-align: center;
}
.section-video1 .text {
	width: 230px;
	   min-height: 320px;
}
.section-video1 i.play-icon {
	display: inline-block;
	width: 100px;
	height: 100px;
	background: url(../images/play-btn.png) no-repeat top left;
	background-size: contain;
}
i.play-icon:hover {
	background: url(../images/play-btn--hover.png) no-repeat top left;
	background-size: contain;
}

/* Section Black */

.section.blackBg {
	background-color: #000000;
	margin-top: 0px;
}
.section.blackBg .main__wrapper{
	padding-top:20px;
	padding-bottom: 0px;
}
.section.blackBg .text{
	padding-right: 50px;
	padding-top:40px;
	padding-bottom: 40px;
}
.section.blackBg .text .bluesky{
	max-width: 400px;
}
.section.blackBg .photo {
	text-align: center;
	padding: 0;
}
.section.blackBg .photo img {
	width: 100%;
	height: auto;
}
@media all and (max-width: 768px) {
	.section.blackBg .text{
		padding-right: 0px;
	}
	.section.blackBg .photo{
		 padding: 20px 0 0 20px;
	}
}
/* Section Bluesky */

.section.blueskyBg {
	margin-top:0px;
}
.section.blueskyBg .button {
	margin-left: 30px;
}
@media all and (max-width: 895px) {
	.section.blueskyBg{
		text-align: center
	}
	.section.blueskyBg .button{
		margin: 15px auto;
	}
}


/* Mobile adjustments */

@media all and (max-width: 768px) {
	.section-video1 .grid__item.text,
	.section-video2 .grid__item.text,
	.section-final .grid__item.text,
	.section.blackBg .text .bluesky,
	.section-final .grid__item.text h3 {
		max-width: 100%
	}
	.slick-prev, .slick-next {
		height: 50px;
		width: 50px;
		background-size: contain;
	}
	.carousel__item-one,
	.carousel__item-two {
		height: 300px;
		padding-top: 25px;
	}
	.carousel__item-two {
		background-position: center top;
	}
	.carousel .quote {
		width: calc(80% - 60px);
		font-size: 22px;
		margin-left: 60px;
		line-height: 1;
	}
	.carousel .name,
	.carousel .link {
		margin-left: 60px;
		max-width: 70%
	}
	.section .button {
		display: block;
	    width: auto;
	    max-width: 400px;
	    margin: 30px auto;
	}
}
@media all and (max-width: 550px) {
	.section-carousel{
		width: 100vw;
		margin: 0;
	}
	.carousel__item-one,
	.carousel__item-two {
		height: 300px;
	}
	.carousel .quote {
		font-size: 18px;
		width: 90%;
		margin: 0;
	}
	.section.blackBg .text{
		padding: 20px 20px 20px 40px;
	}
}



/* Footer */

.footer h4 {
	font-size: 18px;
	margin-bottom: 20px;
	text-align: left;
	color: #000000;
}
.footer__nav {
	margin-bottom: 25px;
}
.footer__nav li {
	margin: 10px 0;
	text-align: left;
}
.footer__nav li a {
	font-size: 12px;
	color: #00a4e3;
	border-bottom: solid 1px transparent;
}
.footer__nav li a:hover {
	color: #00a4e3;
}
.footer p {
	font-size: 11px;
	color: #666666;
	text-align: left;
}
.footer a.link{
	color: #00a4e3
}
.footer__social .fa-stack{
	color: #cdd3d3;
	margin-right: 5px;
    font-size: 16px;
}

.icon {
	display: inline-block;
    width: 29px;
    height: 29px;
    line-height: 2em;
    vertical-align: middle;
	margin-right: 5px;
	transition: .3s;
	background-size: contain;
}

.icon--fb{
	background-image: url(../images/fbgrey.png);
}

.icon--fb:hover{
	background-image: url(../images/fb.png);
}

.icon--tw{
	background-image: url(../images/twgrey.png);
}

.icon--tw:hover{
	background-image: url(../images/tw.png);
}

.icon--li{
	background-image: url(../images/ligrey.png);
}

.icon--li:hover{
	background-image: url(../images/li.png);
}

.icon--yt{
	background-image: url(../images/ytgrey.png);
}

.icon--yt:hover{
	background-image: url(../images/yt.png);
}

.icon--gd{
	background-image: url(../images/gdgrey.png);
}

.icon--gd:hover{
	background-image: url(../images/gd.png);
}

.icon--ig{
	background-image: url(../images/iggrey.png);
}

.icon--ig:hover{
	background-image: url(../images/ig.png);
}
@media (min-width: 500px) and (max-width: 799px) {
	.footer .grid .grid__item {
		width: 49%;
		-webkit-box-flex: 0;
	    -webkit-flex: 0 0 50%;
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	}
}
@media all and (max-width: 499px) {
	.footer .grid .grid__item {
		width: 100%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
	}
	.footer__nav h4,
	.footer__nav li {
		text-align: center;
	}
}

/* SELECT 2 */
.select2-selection {
	min-height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #565656 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	margin-top: 5px;
	border-color: #565656 transparent transparent transparent;
	border-width: 6px 3px 0 3px;
}

/* HELPERS */

.mBot1 {
	margin-bottom: 1em;
}
.mTop1 {
	margin-top: 1em;
}
.mBot3 {
	margin-bottom: 3em;
}
.white {
	color: #FFFFFF;
}
.whiteBg {
	background-color: #FFFFFF;
}
.button--white {
	color: #FFFFFF;
	background-color: transparent;
	border-color: #FFFFFF;
}

.bluesky {
	color: #00a4e3;
}
.blueskyBg {
	background-color: #00a4e3;
	color: #FFFFFF;
}
.button--bluesky {
	color: #00a4e3;
	background-color: transparent;
	border-color: #00a4e3;
}
.black {
	color: #000000;
}
.blackBg {
	background-color: #000000;
}
.bold, strong {
	font-weight: 800;
}
.underline {
	text-decoration: underline;
}
.noAddOrRemoveLink a.removeDatasetRow,
.noAddOrRemoveLink a.addDatasetRow  {
	display: none;
}
.noAddOrRemoveLink .datasetfieldSpec {
	padding-bottom: 0px;
}
@media all and (min-width: 1024px) {
	.fitHeight {
	height: 100%;
    width: auto;
    max-width: unset;
}
}