/* GCA - Layout */


/* Common */

.top-bar {
  background: #ffffff;
}

.logo,
.footer--logo {
  width: auto;
  height: 3.6rem;
  margin: 0;
  padding: 0;
  text-align: left;
  text-indent: -9999px;
  background: url(../img/gca-logo.svg) no-repeat;
  background-size: contain;
  font-size: 1px;
}

.footer--logo {
  background: url(../img/gca-logo-small.svg) no-repeat top right;
}

@media (max-width: 767px) {
	.footer--logo {
	  background: url(../img/gca-logo-small.svg) no-repeat top left;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.logo {
		background: url(../img/gca-logo-small.svg) no-repeat;
	}
}

.hero,
.panel.has-image {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center center;
}

.hero.bg-right {
	background-position: right top;
}

.hero-image {
  position: absolute;
  z-index: 1;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  opacity: 0.5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 10.2rem;
}

.hero.has-image .hero-image {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  min-height: 100%;
  height: auto;
  min-width: 100%;
  width: auto;
  -webkit-filter: grayscale(50%);
	filter: grayscale(50%);
}

.benefits--item {
  position: relative;
}

.benefits--item:nth-child(odd),
.persona--section:nth-child(even),
.post-listing {
  background: #F5F6F7;
}

.persona--section .row {
	position: relative;
	z-index: 1;
}

.persona--section--graphic {
	position: absolute;
	top:0;
	left:0;
	transform: translate(-35%, -20%);
	z-index: -9;
}

@media (max-width: 767px) {
	.persona--section--graphic {
		transform: translate(40%, -40%) scale(0.5, 0.5); 
		left: auto;
		right: 0;
	}
}

.post {
  background: #ffffff;
}

.down-arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 15.2rem;
  height: 5.4rem;
  cursor: pointer;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background: url(../img/down-arrow.svg) center bottom no-repeat;
  background-size: contain;
}

@media (max-width: 767px) {
	.down-arrow {
		width: 11.4rem;
		height: 4rem;
	}
}

.benefits--item:nth-child(even) .down-arrow {
  background: url(../img/down-arrow-gray.svg) center bottom no-repeat;
  background-size: contain;
}

.benefits--item:last-child .down-arrow {
  display: none;
}

.hero.purple {
  background: #135091;
}

.hero.green {
  background: #28BE9C;
}

.hero.blue {
  background: #00B1E4;
}

.hero.orange {
  background: #DC4611;
}

.hero.gray {
  background: #7A859B;
}

.hero.dark-gray {
  background: #606a7e;
}

.hero.blog {
  border-top: 16px solid #8FE1F8;
}

.hero-persona {
	background: url('../img/gca_hero_persona.jpg') no-repeat center center;
	background-size: cover;
}

.hero.has-image h1, .hero.has-image .text-small, .hero.has-image a {
	color: white !important;
}

.hero--content b {
	color: #00BCF2;
	font-size: 4.4rem;
}

@media (max-width: 767px) {
	.hero--content b {
		font-size: 3rem;
	}
}

.the-stories {
  background: url('../img/big-graph.svg') no-repeat center top #F5F6F7;
}

@media (min-width: 2000px) {
	.the-stories {
		background-size: 100% auto;
	}
}

@media (max-width: 767px) {
	.the-stories {
		background-position: center -7.5rem;
	}
}

.section-head h3 { max-width: 280px; margin-left: auto!important; margin-right: auto!important; }
.section-head h3:after {
  display: block;
  width: 72px;
  margin: 15px auto 35px;
  content: "";
  border-bottom: 4px solid #58D3F6;
}

.footer {
  color: #7A859B;
  border-top: 16px solid #8FE1F8;
  background: #2C3137;
}

.footer a {
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #8FE1F8;
}

.the-team {
  position: relative;
  background-color: rgba(0, 171, 221, 0.9);
  background: url('../img/gca_hero_team.jpg') no-repeat center center;
  background-size: cover;
}

.panel.has-image {
  position: relative;
  background-color: rgba(44, 49, 55, 0.9);
  overflow: hidden;
}

.panel.has-image h2, 
.panel.has-image h3,
.panel.has-image p {
	color: #ffffff;
}

.panel-background {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  width: auto;
  min-height: 100%;
  height: auto;
}

.post-listing .post.has-photo > .left-col {
  overflow: hidden;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background: #434952;
}

@media (max-width: 767px) {
	.post-listing .post.has-photo > .left-col {
		border-top-left-radius: 0.5rem;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0.5rem;
	}
}

.post-listing .post--photo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0.15;
  min-height: 100%;
  height: auto;
  min-width: 100%;
  width: auto;
  -webkit-filter: grayscale(75%);
	filter: grayscale(75%);
}

/* Buttons */

button,
.btn {
  padding: 1.5rem 3.2rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: #ffffff;
  border: transparent;
  border-radius: 2.5rem;
  background: #00BCF2;
  font-weight: 600;
  font-size: 1.6rem;
}

.btn-block {
	width: 100%;
	display: block
}

@media (max-width: 767px) {
	button,
	.btn {
	  font-size: 1.4rem;
	}
}

button:focus,
.btn:focus,
button:active,
.btn:active {
	outline: none;
}

button:hover,
.btn:hover {
  text-decoration: none;
  color: #ffffff;
}

button:active,
.btn:active,
button:focus,
.btn:focus {
  background: #03b3e6;
}

button.white,
.btn.white {
  color: #00BCF2 !important;
  background: #ffffff;
}

button.black,
.btn.black {
  color: #ffffff;
  background: #2C3137;
}

button.black:active,
.btn.black:active,
button.black:focus,
.btn.black:focus {
  background: #222529;
}

button.play,
.btn.play {
  padding: 1.5rem 2.5rem;
  color: #7A859B;
  background: url(../img/play.svg) 1.75rem center #ffffff no-repeat;
	border: 1px solid #e9edf2;
}

button.video,
.btn.video {
  padding: 1.5rem 3.2rem 1.5rem 5.2rem;
  color: #7A859B;
  background: url(../img/play.svg) 1.75rem center #ffffff no-repeat;
}


/* Icons */

@media (min-width: 768px) {
	.tabs--item > .icon-big:after {
	  position: relative;
	  z-index: -1;
	  top: -8rem;
	  left: 100%;
	  display: block;
	  width: 133%;
	  height: 1px;
	  content: " ";
	  border-top: 1px dashed #E9EEF2;
	}

	.tabs--item:last-child > .icon-big:after {
	  display: none;
	}
}

.num-small,
.icon-round {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  margin: 0 2rem 0 0;
  vertical-align: middle;
  border: 2px solid #E9EEF2;
  border-radius: 50%;
  background: #ffffff;
}

.icon-round {
  padding: 2rem;
}

.nums li:last-child:after,
.contact-details li:last-child:after {
  display: none;
}

.contact-details li,
.nums li {
  position: relative;
  display: block;
  padding-bottom: 3rem;
}

.contact-details li:after,
.nums li:after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 4rem;
  display: inline-block;
  width: 1px;
  height: 100%;
  margin-top: 2rem;
  content: "";
  border-right: 1px dashed #dce3e8;
}

@media (max-width: 991px) {
	.contact-details li:after {
	  display: none;
	}
}

.num-big {
  display: inline-block;
  width: 16rem;
  height: 16rem;
  margin: auto;
  border: 2px solid #B5C2DC;
  border-radius: 50%;
  background: #ffffff;
}

@media (max-width: 767px) {
	.num-big {
	  width: 8rem;
		height: 8rem;
		float: left;
		margin-bottom: 4rem;
	}
}

.icon-big {
  display: inline-block;
  width: 16rem;
  height: 16rem;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 767px) {
	.icon-big {
	  width: 10rem;
	  height: 10rem;
	}
}

.icon-small {
  display: inline-block;
  width: 3.6rem;
  height: 3.6rem;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-achievement {
  background-image: url(../img/acheivement.svg);
}

.icon-download {
  background-image: url(../img/download.svg);
}

.icon-chat {
  background-image: url(../img/chat.svg);
}

.icon-graph {
  background-image: url(../img/graph.svg);
}

.icon-shield {
  background-image: url(../img/shield.svg);
}

.icon-medal {
  background-image: url(../img/medal.svg);
}

.icon-team {
  width: 28rem;
  background-image: url(../img/team.svg);
}

@media (max-width: 767px) {
	.icon-team {
	  width: 17.5rem;
	}
}

.icon-email {
  background-image: url(../img/email.svg);
}

.icon-phone {
  background-image: url(../img/phone.svg);
}

.icon-globe {
  background-image: url(../img/globe.svg);
}


/* Photos */

.persona--photo img,
.team--member--photo img,
.hero--content .photo img {
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
}

@media (max-width: 767px) {
	.persona--photo img,
	.team--member--photo img,
	.hero--content .photo img {
	  width: 16rem;
	  height: 16rem;
	}
}

.team--member--photo.small img,
.hero--content .photo.small img {
  width: 16rem;
  height: 16rem;
}

@media (min-width: 768px) and (max-width: 991px) {
	.hero--content .photo img {
	  width: 24rem;
	  height: 24rem;
	}
	.team--member--photo.small img,
	.hero--content .photo.small img {
	  width: 8rem;
	  height: 8rem;
	}
}

.post--author--photo img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
}

.persona:nth-child(even) img,
.team--member.big:nth-child(even) img,
.team--member.small img {
  border-top-right-radius: 0.3rem !important;
  border-bottom-left-radius: 50% !important;
}

.persona:nth-child(odd) img,
.persona--photo:nth-child(even) img,
.hero--content .photo img,
.post--author--photo img {
  border-bottom-left-radius: 0.3rem !important;
  border-top-right-radius: 50% !important;
}

.team--member.big:nth-child(odd) img {
  border-top-left-radius: 0.3rem !important;
}


/* Misc */

.cta .left-col {
  border-right: 2px dashed #c5d1e8;
}

@media (max-width: 767px) {
	.cta .left-col {
	  border-right: none;
	  border-bottom: 1px dashed #c5d1e8;
	  padding-bottom: 8rem;
	}
	.cta .right-col {
	  padding-top: 6rem;
	}
}