a {
	color:white;
}

.content a {
	color: black;
}

.content a:hover {
	color:#1779ba;
}

.large-heading {
font-size: 2.5rem;
font-family: ProximaAltNovaExtraBold, serif,Arial, sans-serif;
}

.content-heading {
 font-size:1.9375rem;
 font-family: ProximaAltNovaExtraBold, serif,Arial, sans-serif;
margin-bottom:0 !important;
}

.content-subheading {
	font-family: ProximaAltNovaBold;
	font-size: 1.25rem;
}

.content-section li
 {
width:100%;
}

.contact-us {
	color:white !important;
	margin-top:0 !important;
}

.contact-us:hover {
	color:#414042 !important;
}

.confirmation-section {
  color:green;
  font-size:1.25rem;
  display:none;
}

.hero-heading {
	font-family: ProximaAltNovaExtraBold;
	font-size:4em;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 1rem;
}



footer {
	height:150px;
}

h5 {
	font-family:ProximaAltNovaBold;
}

textarea {
	resize:vertical;
}

.bg-darkgrey {
	background-color:#414042 !important;
   color:white;
}

.bg-darkergrey {
	background-color:#363636 !important;
   color:white;
}

.bg-purple {
	background-color:#1d1433 !important;
   color:white;
}

.content {
   padding-top:3rem;
   padding-bottom:3rem;
}

.content-section {
	margin-bottom:1.5em;
}

.contact-input {
	color:#1779ba;
	margin-bottom: 1.25rem;
	height: 2rem;
	border: 0;
	padding-left: 0;
	box-shadow: none;
	border-bottom: 1px solid #5598c9;
	font-weight: 400;
}

.contact-input:focus {
	color: #1779ba;
	transition: 0.2s ease-in-out;
	box-shadow: none;
	border: 0;
	border-bottom: 2px solid #5598c9;
}

.contact-input::placeholder {
	color:#414042;
}

#continuous-slider {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}


.continuous-slider--wrap {
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}


#continuous-slider  ul {
	display: block;
	list-style: none;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	height: 100px;
}

#continuous-slider   li {
	display: block;
	float: left;
	position: relative;
	width: 160px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

#continuous-slider img {
	vertical-align: middle;
	max-width: 100px;
	max-height: 60%;

	-webkit-transition: 0 linear left;
	-moz-transition: 0 linear left;
	transition: 0 linear left;
	opacity: 1;
}

.hero-text {
	margin-bottom:1rem !important;
}

.contact-text,
.hero-heading,
.hero-text
{
	text-align: center;
}

.footer-content {
	display:flex;
}



.hero-section {
   background: url("../media/img/geo-background.png") 50% no-repeat;
   background-position: center top;
   background-size: auto 100%;
	padding-left:1rem;
	padding-right:1rem;
   width:100%;
   text-align: center;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}

/* .hero-section .hero-section-text {
  color: #fefefe;
  position:absolute;
  text-align:start;
	margin-left:auto;
	margin-right:auto;
	top:12%;
} */


.hero-section .hero-section-text {
	color: #fefefe;
   position:relative;
   text-align:start;
 	margin-left:auto;
 	margin-right:auto;
	display:flex;
	flex-direction:column;


}

.hero-section-text {
	font-family:ProximaAltNovaExtraBold;
}

.in-touch {
	display: block;
	background-color:white !important;
	margin-top:20px;
	border-radius:.75rem;
	color:#39383a;
	font-size:1.25rem;
	padding: 0.425em .5em;
	min-height:1.75rem !important;
	width:150px;
}

.in-touch:hover {
	background-color:#39383a !important;
	color:white;
}

.contact-us {
	display: block;
	background-color:#39383a !important;
	width:150px;
	margin-top:20px;
	border-radius:10px;
	color:white;
 	border: 2px solid white;
 	font-size:1.5rem;
 	padding: 0.425em .5em;
	min-height:1.75rem !important;
	font-size:1.25rem;
	font-family:ProximaAltNovaExtraBold;

}

.contact-us:hover {
	background-color:white !important;
	color:#39383a;
 	border: 2px solid #39383a;
	font-family:ProximaAltNovaExtraBold;
}

.logo a {
padding:0;
}


.logos {
margin-left:auto;
margin-right:auto;
width:1000px;
}

.logo-img {
	height:50px;
	width:160px;
}

.logo-img-nav {
 	height:auto;
	width:160px;
	margin-left:.75rem;
	margin-top:.5rem
}

.menu {
	font-family:ProximaAltNovaBold;
}

.title-bar {
	width:100%;
	padding:1rem !important;

}

.partner-logo {
   margin: 0 1% ;
}

.partner-logo-svg {
   margin: 0 1% ;
	 padding: 0 1.25%;
	 max-width: 150px;
	 height: 100px;
}

.partner-logo-svg > img {
	max-height: 55px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.title-bar {
background-color: rgba(0,0,0,0);
position:fixed;
z-index:1000;
}

.title-bar-right {
	right:0;
	margin-right:.5rem;
}

.top-bar {
	width:100%;
	position:fixed;
	z-index:1000;
}

.top-bar,
.top-bar ul {
	background-color:rgba(0,0,0,0);
	transition:background-color 0.3s ease;
}

.top-bar-right
 {
	margin-right:1rem;
}

.partner-container {
	display:flex !important;
	justify-content:space-around !important;
}



.mb05 {
margin-bottom:0.5rem;
}

.service {
width:20%;
height:100%;
display:inline-block;
margin:0;
padding:0;
float:left;
position: relative;
background-size: cover !important;
}

.service-text {
	font-size:1.9375rem;
	font-family: ProximaAltNovaExtraBold, serif,Arial, sans-serif;
	overflow-x:hidden;
	margin-bottom:0 !important;
}

.service-1 {
  background: url("../media/img/design-wide.jpg") no-repeat;
  background-position: center;
}

.service-2 {
  background: url("../media/img/print-wide.jpg") no-repeat;
}

.service-3 {
  background: url("../media/img/campaign-wide.jpg") no-repeat;
  background-position: center;
}

.service-4 {
  background: url("../media/img/portal-wide.jpg") no-repeat;
}

.service-5 {
  background: url("../media/img/warehouse-wide.jpg") no-repeat;
}



.service-1 .service-title {
	background-color:rgba(189, 75, 134, 0.8);
}

.service-2 .service-title {
	background-color:rgba(74, 19, 67, 0.8);
}

.service-3 .service-title {
	background-color:rgba(42, 27, 78, 0.8);
}

.service-4 .service-title {
	background-color:rgba(61, 84, 160, 0.8);
}

.service-5 .service-title {
	background-color:rgba(105, 176, 107, 0.8);
}

.services {
height:45vh ;
margin:0;
padding:0;
}

.service-title {
position:absolute;
content:"";
top:40%;
width:100%;
color:white;
text-align:center;
padding-top:.5em;
padding-bottom:.5em;

}

.service-title h5 {
	margin-bottom:0;
}

.contact-container {
height:380px;
color:white;
}

.contact-section {
	background: url("../media/img/geo-contact.png") 50% no-repeat;
	background-position: center top;
	background-size: auto 100%;
	height:100%;
	width:100%;
	text-align: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-family:'ProximaBlack';
}

.contact-text {
   font-size:1.6em;
}

.contact-number {
   font-size:8em;
}

.logos {
	margin-left:auto;
	margin-right:auto;
	width:900px;
}

@media print, screen and (min-width: 40em) {


	.small-logo {
	width:80px;
	padding-top:0 !important;
	padding-bottom:0 !important;
	}

	.small-bar {
	max-height:50px;
	}

	.hero-heading {
		font-size:3rem;
	}

	.hero-text {
	font-size: 1.25rem;
	}
}

@media print, screen and (max-width:69.7em) and (min-width: 64em)  {

	.hero-large {
	height:100vh !important;
}

}

@media print, screen and (max-width:83.9em) and (min-width: 64em)  {

	.ps-large {
	height:100vh !important;
}

}

@media print, screen and (min-width: 64em) {

	.hero {
		min-height:520px;
	}

	.hero {
	  height: 55vh;
	}

	.hero-heading {
		font-size:6.5em !important;
	}



	.hero .large {
	  height: auto !important;
	}

	.hero-section {
		height:100%;
	}


	.hero-heading ,
 	.hero-text {
  		text-align: start !important;
	}

.hero-section-text {
	margin-top:110px;
	margin-bottom:50px;
}

	/* #partners:hover:after {
		   position:absolute;
			right:150px;
			top:20px;
			width:300px;
			height:20px;
			text-align:center;
			justify-content:center;
		   content: '';
   		background: url("../media/img/skoop_are_great.png") 50% no-repeat;
			background-color:#5598c9;
			font-size:1.5rem;
			font-family: ProximaAltNovaBold;
			border-radius:10px;
		 	transform: rotate(-5deg);
			padding:7px;
	}

	#partners:hover:before {
	   position:absolute;
	   content: "";
		right:220px;
		top:60px;
		text-align:center;
		justify-content:center;
		font-size:1rem;
		font-family: ProximaAltNovaBold;
			transform: rotate(-5deg);
		width: 0;
	   height: 0;
	   border-left: 20px solid transparent;
	   border-right: 20px solid transparent;
	   border-top: 20px solid #5598c9;
	} */

	.bubble-skoop {
		display:block;
		position:absolute;
		right:155px;
		top:22px;
	}

	.hide {
		display:none !important;
	}

	.small-bar {
		max-height:50px;
	}

	.small-logo {
		width:100px;
	}

	.service:hover .service-overlay {
 	  width:100%;
 	  height:100%;
 	  position:absolute;
 	  background-color: rgba(0,0,0,0.8);
 	  text-align:center;
   }

   .service:hover .service-overlay::after {
 	  color:white;
 	  opacity:1;
 	  top:33%;
 	  text-align: center;
 	  position:absolute;
 	  width:80%;
 	  left:10%;
   }

   .service:hover .service-title {
 	  display:none;
   }

	.service-1 {
	  background: url("../media/img/design.jpg") no-repeat;
	}

	.service-2 {
	  background: url("../media/img/print.jpg") no-repeat;
	}

	.service-3 {
	  background: url("../media/img/campaign.jpg") no-repeat;
	  background-position: center;
	}

	.service-4 {
	  background: url("../media/img/portal.jpg") no-repeat;
	}

	.service-5 {
	  background: url("../media/img/warehouse.jpg") no-repeat;
	}

   .service-1:hover .service-overlay::after {
 	  content:"Our team of graphic designers can create artwork to your brand and specs, or come up with something new. Get whatever is kicking around in your head out into the real world!";
   }

   .service-2:hover .service-overlay::after {
 	  content:"You dream it, we'll print, produce or manufacture it. From business cards to annual reports, uniforms to large scale signage. Plus whatever else you can think of, we love a challenge!";
   }

   .service-3:hover .service-overlay::after {
 	  content:"Say goodbye to grey-hair-inducing campaign execution and hello to an easier, more economical way to get your collateral produced and delivered to where it needs to be, when it needs to be there.";
   }

   .service-4:hover .service-overlay::after {
 	  content:"Our powerful online software makes ordering and managing your print a breeze. With customisable art templates to protect your brand and was-it-really-that-easy features to make you say ‘wow’!";
   }

   .service-5:hover .service-overlay::after {
 	  content:"End-to-end warehouse, pick and pack and distribution service with associated reporting tools. All the moving parts brought under one roof and made easy.";
   }

}

@media print,screen and (max-width:63.99em) {

	.hero {
		margin-top:46px;

	}

	.hideoverflow {
	overflow:hidden;
	}

	.content {
	   padding-top:2rem;
	   padding-bottom:2rem;
	}

	.centered-medium {
      justify-content:center;
      text-align:center;
   }

	.center-medium {
      margin-left:auto !important;
      margin-right:auto !important;
   }


	.contact-container {
      height:250px;
   }

.content-heading {
	font-size:1.6rem !important;
	font-family: ProximaAltNovaExtraBold, serif,Arial, sans-serif;
	border-bottom:0 !important;
}

   .contact-text {
      font-size:1.25em !important;
   }

   .contact-number {
      font-size:5rem !important;
   }

	.hero-section .hero-section-text {
		margin-top:50px;
		margin-bottom:50px;
	}

	.logos {
	   margin-left:auto;
	   margin-right:auto;
	   width:500px;
   }

   .partner-container {
		display:flex !important;
		justify-content:space-around !important;
   }


	.top-bar {
	background-color:#414042 !important;
      width:200px !important;
		top:45px;
		overflow-y:auto;
   }

   .top-bar-right {
      height:100%;
      padding-top:0.25em;
		flex: 0 0 100% !important;
		overflow-x:hidden;
   }

	.in-touch,
 	.contact-us{
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.bubble-skoop {
		display:none;
		position:absolute;
		right:160px;
		top:20px;
	}

	.hero {
		height:auto;
	}

	.service {
	width:100% !important;
	height:80px !important;
	border: 1px solid rgba(0,0,0,.8);
	}

	.service:hover .service-overlay::after {
		top:20% !important;
	}

	.services {
	height:400px !important;
	margin:0;
	padding:0;
	}

	.service-title {
	position:relative !important;
	top:25% !important;
	height:80px;
	width:100% !important;
	margin-left:auto !important;
	margin-right:auto !important;
	top:0 !important;
	vertical-align:middle;
	padding-top:20px;
	}

	.service-text {
		font-size:1.9375rem;
}

.title-bar {
background-color:#363636 !important;
padding:.5rem !important;
position:fixed !important;
top:0 !important;
}

.top-bar {
	background-color:#363636 !important;
	width:100% !important;
	height:100%;
}

.top-bar::-webkit-scrollbar {
    display: none;
}

.logo-img {
	height:30px;
	width:100px;
	margin-left:0.5rem;
}

}

@media print, screen and (max-width: 40em) {
	.main-heading {
	line-height: 0.8 !important;
	font-size: 60px !important;
	}
}

@media print, screen and (max-width: 64em) and (min-width:40em) {
	.main-heading {
	line-height: 0.8 !important;
	font-size: 60px !important;
	}
}

@media print, screen and (max-width: 600px) {
	.tiny-split {
	width:100% !important;
	display:block !important;
	}
}

@media print, screen and (max-width: 40em) {
	.nextline {
	display:block;
	}

	.button.small-only-expanded {
     display: block;
     width: 100%;
     margin-right: 0;
     margin-left: 0;
 	}

	.centered-small {
      justify-content:center;
      text-align:center;
   }

	.large-heading {
	font-size: 1.5rem;
	font-family: ProximaAltNovaBold, serif,Arial, sans-serif;
	}

	.content-heading {
		font-size:1.1875rem !important;
		font-family: ProximaAltNovaBold, serif,Arial, sans-serif;
	}

	.content-subheading {
		font-family: ProximaAltNovaBold;
		font-size: 1rem;
	}

	.small-split {
	width:100%;
	display:block;
	}

	.large-text {
	font-size: 1.2rem;
	}

	.content {
	   padding-top:1.5rem;
	   padding-bottom:1.5rem;
	}

	.contact-container {
   height:200px;
   color:white;
   }


	.center-small {
      margin-left:auto !important;
      margin-right:auto !important;
   }

	.contact-number {
      font-size:3rem !important;
   }

   .contact-text {
      font-size:1em !important;
   }

	.footer-header {
		font-family: ProximaAltNovaBold !important;
	}

	.footer-right {
	    margin-top:0.5rem
	  }

	.hero-heading {
		font-size:2.5rem;
	}

	.hero-text {
	font-size: 1.0625rem;
	font-family: ProximaAltNovaExtraBold !important;
	}

	.logos {
   margin-left:auto;
   margin-right:auto;
   width:250px;
   }




	h3 {
		font-size:1.1875rem;
	}
}

#partners {
position:relative;
}



.center {
margin-left:auto !important;
margin-right:auto !important;
}

.text-centered{
	justify-content:center !important;
	text-align:center !important;
}


#footer-container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  margin-top: 0;
  background-color: #414042 !important;
}

#footer-container a:hover {
color:#5598c9;
}

#footer-content {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
  color: #e6e6e6;
  padding: 1rem 0;
}

#footer-content a {
  color: white ;
}

.footer-left,
.footer-right {
  width: 100%;
  float: left;
  padding-right: 1rem;
  padding-left: 1rem;
}


.footer-right {
  text-align: right;
}


@media print, screen and (min-width: 40em) {
.footer-right,
.footer-left {
    width: 50%;
    padding-right: 1rem;
    padding-left: 1rem;
  }


}

.fa-icon {
  margin: .25rem;
}

.socials {
margin-bottom:.25rem;
}


 .js-dropdown-active {
background-color:#414042 !important;
left: 0 !important;
right:auto;
border: none;

}

.is-accordion-submenu-item {
margin-left:1rem;
}


/* OLD CSS */
#login-popup-con {
	background: rgba(0, 0, 0, 0.8);
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
  right: 0;
	left: 0;
  bottom: 0;
	z-index: 99998;
	text-align: center;
  overflow: auto;
  font-family: ProximaAltNovaRegular,Century Gothic, Arial, Sans-Serif;
}

#loginform {
  width:460px;
  margin-top:30vh;
  margin-left:auto !important;
  margin-right:auto !important;
  background-color:#414042;
  border-radius:6px;
  box-shadow:0px 0px 10px 0px #424242;
  padding:10px;
  box-sizing:border-box;
  visibility:hidden;
  display:none;
  text-align: center;
	color:white;
	font-family: ProximaAltNovaRegular,Arial, sans-serif;
}

#loginform .logo-img {
	margin-top:1rem;
	margin-bottom:1rem;
}


.login-section {
    background-color: whitesmoke;
    height: 100%;
}

.login-input {
    height:2em;
    font-size:18px;
    width:400px;
    text-align: center;
	 margin-left: auto !important;
	 margin-right: auto !important;
    border: 0.5px solid #bababa;
}

.login-static-text {
    font-size: 18px;
    color: white;
}

.login_btn {
    cursor: pointer;
    border-radius: 6px;
    padding: 3px 70px 3px 70px;
    font-size: 14px;
    color: black;
    display:inline-table;
    border: 2px solid #bababa;
	 background-color:white;
		margin: 1rem .5rem 1rem .5rem;

}

.email-submit-btn {
	cursor: pointer;
	border-radius: 6px;
	padding: 3px 70px 3px 70px;
	font-size: 14px;
	color: black;
	display:inline-table;
	border: 2px solid #bababa;
	background-color:white;
	margin-bottom:1rem;
}

.email-submit-btn:first-child {
	background-color:blue;
}

.login_btn a,
.email-submit-btn a
 {
    color: black;
}

.login_btn:focus,
.email-submit-btn:focus {
    color: white;
    background-color: #bababa;
}

.login_btn:hover,
.email-submit-btn:hover {
    color: white;
    background-color: #bababa;
}

@media print, screen and (max-width: 40em) {

	#loginform {
	  width:100%;
	  height:100%;
	  margin-top:0;
	  margin-left:auto !important;
	  margin-right:auto !important;
	  background-color:#414042;
	  border-radius:0;
	  box-shadow:0px 0px 10px 0px #424242;
	  padding:10px 10px ;
	  box-sizing:border-box;
	  visibility:hidden;
	  display:none;
	  text-align: center;
		color:white;
	}

	.login_btn {
	    cursor: pointer;
	    border-radius: 6px;
	    padding: 3px 70px 3px 70px;
	    width: 100%;
	    font-size: 14px;
	    color: #414042 !important;
	    margin: 0 auto;
	    display:inline-table;
	    border: 2px solid #bababa;
		background-color:white;
		height:2em;
		margin-top:1rem;
	}


	.login-input {
	    height:2em;
	    font-size:18px;
	    width:100%;
	    text-align: center;
		 margin-left: auto !important;
		 margin-right: auto !important;
	    border: 0.5px solid #bababa;
	}

	.login-static-text {
		color:white;
	}
}

.error-msg {
color:red;
}

.error-msg-div {
margin-top:1rem;
}

.email-msg-div {
margin-bottom:1rem;
}

.grid-container {
max-width: 1020px;
}

textarea {
resize:none;
min-height:32px;
line-height:1rem;
overflow-y:hidden;
}

.social-overlay {
  background: rgba(0, 0, 0, 0.92);
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
  right: 0;
	left: 0;
  bottom: 0;
	z-index: 1005;
	text-align: center;
}

.social-text {
  color: #fff;
	font-size: 25px;
	margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
  padding-left: 30px;
  padding-right: 30px;
}

.social-text h3 {
  font-size: 40px;
  margin-bottom: 25px;
}

.social-text p {
  font-size: 24px;
  margin-left: 10%;
  margin-right: 10%;
}

.social-text p span {
  display: block;
}
