:root {
  --primary-color: #0072CE;
  --secondary-color: #FFC845;
  --third-color: #55534C;
}

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
  font-family: 'Montserrat', sans-serif;
  background: white;
  margin: 0;    
}

p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5em;
    color: black;
    margin-bottom: 8px;
}

td, th {
	text-align: left;
}

.image {
  position: relative;
}
.image a{
  display: block;      
  position: absolute;
}

.pickeers_image_map {
	top: 10%; 
	left: 40%; 
	width: 30%; 
	height: 10%;
}

.missionpick_image_map {
	top: 10%; 
	left: 40%; 
	width: 45%; 
	height: 10%;
}

.p-header-bold-grey {
	font-weight: bold;
    color: var(--third-color);	
}

.p-text {
    line-height: 2rem;
    margin-bottom: 0;
}

.p-text-head {
    color: black;
    font-size: 25px;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 2rem;
	
}

.p-text-black {
    line-height: 2rem;
    font-size: 20px;
    margin-bottom: 0;
    color: black;
	
}

.p-text-align-left {
   text-align: left;
   padding: 0 2rem;	
}	

.shadow-text {
	font-size: 34px;
    font-weight: bold;
    line-height: 1.5em;
    -webkit-text-stroke: 0.8px white;
    text-shadow: 2px 2px 0 #e0e0e1;
}

.nav-icon {
	width: 1.5rem;
}

.user-icon {
	vertical-align: middle;
	text-align: center;
	font-size: 1em;
	width: 1.5rem;
}

.banner {
	display: none;
}

#sidebar-nav {
	display: block;
}
	
.text-photo {
  width: 80vw;
  margin: 0 auto;	
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#solution-nav > div > a {
	font-weight: normal;
	background: #fff;
}

#solution-nav > div > a:hover {
    color: var(--primary-color);
    font-weight: bold;
    background: #eeeeee;
}


.navbar {
  background: white;
  padding: 13px;
  border: none;
  border-radius: 0;  
}

.navbar .header-logo img {
  max-width: 50%;
}

.navbar .primary-nav {
  display: none;
}

.navbar nav ul.secondary-nav {
	display: flex;
  	margin: 0;
  	align-items: center;
  	
}

.navbar .nav-container {
  display: flex;
  place-content: space-between;
  align-items: center;
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li a {
  color: black;
  text-decoration: none;
  display: block;
  padding: .5em;
  font-size: 1.3em;
}

nav li a:hover {
  font-weight: bold;
  text-decoration: none;
  color: var(--primary-color);
}

section {
    padding: 2em 1em;
}

.client {
	padding: 0 0;
}

.client .container {
  text-align: center;
  padding: 2rem 3rem 1rem 3rem;	
}

.client .client-list {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px;
}	

.client-img {
  margin: 1rem;
}

.client-img img {
  height: 4rem;		
  object-fit: contain;
}

.client-img-wide img {
  width: 80vw;		
}

.let-talk {
	background-color: var(--secondary-color);
}

.let-talk .container {
  text-align: center;
  padding: 3rem 3rem;	
  border-style: solid;
  border-color: black;
  border-width: thin;
}

.let-talk .container p {
	color: black;
}

.let-talk .container form div {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.let-talk .container form div input {
	align-self: flex-end;
	font-weight: bold;
}

.let-talk-button {
  background-color: transparent;
  color: black;
  font-weight: bold;
  border: 1px solid black;
  margin-top: 1rem;
  border-radius: 5em;
  display: inline-block;
  padding: .8em 2em;
  width: unset;
  cursor: pointer;
  	
}

.see-more {
	height: 450px;
	padding: 1rem 2rem;
	background-image: none;
	margin-bottom: 0rem;
	
}

.see-more-mobile {
	background-image:url('../img/ux_ui.png'), url('../img/orange.png');  
	height: 308px;
	background-position: 35px 0px, 0px 285px; 
	background-repeat:no-repeat, repeat-x;
	background-size: 330px 300px, auto 25px;
}

.see-more .container > h1 {
	color: var(--primary-color);
    font-weight: bold;
    font-size: 55px;
}

.see-more .container > h1 > span{
	font-weight: normal;
}

.see-more .rotate-90 {
	display: none;
}

.see-more .rotate-90 p {
	display: none;
}

.see-more .see-more-button {
  display: none; 		
  
}

.get_in_touch {
	text-align: center;
	background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/stock.jpg');
	height: 480px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	
}	

.get_in_touch p {
	font-size: 20px;
	color: white;
	
}	

.get_in_touch_button {
  font-size: 18px;		
  font-weight: 600;
  border: 2px solid white;
  color: white;
  text-align: center;
  text-decoration: none;
  width: 230px;
  cursor: pointer;
  height: 3rem;
  background-color: transparent;
  margin-bottom: 8rem;	
  
}

.solution {
	display: none;
}

.solution {
	background-color: var(--secondary-color);
	padding: 0 0;
}

.solution .container {
    text-align: center;
    padding: 0rem 0rem 3rem 0rem;
    max-width: 900px;
}

.solution-mobile {
	background-color: var(--secondary-color);
	padding: 0 0;
}

.solution-mobile .container {
    text-align: center;
    padding: 0rem 0rem 2rem 0rem;
    max-width: 900px;
}

.solution-mobile img {
    width: 85%;
}

.what_is_pickeers {
	display: none;
}

.what_is_pickeers_mobile {
	display: block;
}  

.footer {
	background-color: var(--primary-color);	
}

.footer .container {
  padding: 0rem 0rem;	
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.footer .container > a > i {
	color: white;
    font-weight: bold;
    font-size: 2rem;
}

.facebook-padding {
	padding-left: 2rem;
	padding-right: 2rem;
}

.linkedin-padding {
	padding-left: 2rem;
	padding-right: 1rem;
}

.footer .container > div {
	display: flex;
    flex-wrap: wrap;
    color: white;
    font-size: 14px;
    padding: 1rem 1rem;
}

.footer .container > div > div {
  padding: 1rem 1rem;
}

.primary-nav .current:after {
  content: '';
  position: absolute;
  
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--primary-color);
  margin-top: 22px;
 
}

#let-talk-nav .current:after {
   margin-left: 20px;	
}

#solution-nav:after {
  margin-left: 45px;	
}
	
#client-nav:after {
  margin-left: 40px;	
}

#about-nav:after {
  margin-left: 35px;	
}

#let-talk-nav:after {
  margin-left: 45px;	
}

#confirm_button {
      font-size: 18px;	
	  /* font-weight: 600; */
	  padding: 0 1em;
	  border: 0px solid grey; 
	  color: var(--secondary-color);
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  width: 250px;
	  cursor: pointer;
	  height: 3rem;
	  background-color: var(--primary-color);   
}

.solution-acquisition .container {
	text-align: center;
}

.solution-acquisition .pickeers-flow {
	display: none;
}

.solution-acquisition p, 
.solution-acquisition h2, 
.solution-validation p {
	text-align: center;
}

.solution-acquisition-line1 {
	color: var(--primary-color);
    font-weight: bold;
}

.solution-acquisition .pickeers-flow div,  .solution-acquisition .target-audience div, .shopping-cart {
  margin: 1rem;  
}

.solution-acquisition .pickeers-flow img {
  height: 12rem;		
  object-fit: contain;
}

.solution-acquisition .target-audience {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 0vw;
 }

.solution-acquisition .target-audience img {
  width: 12rem;
  height: 12rem;		
  object-fit: contain;
  padding: 1rem;
}

.solution-acquisition-text p {
	padding: 0 3rem;
}

.solution-validation {
	text-align: center;
	padding-bottom: 0;

}

.solution-validation .card {
  width: 100%;
  border: none;	
  margin-bottom: 3rem;
}

.solution-validation .steps {
	display: flex;
	margin-top: 2rem;
	justify-content: center;
	flex-wrap: wrap;
}

.solution-validation .steps img {
  margin: 0 auto;
  width: 12rem;
  height: 15rem;		
  object-fit: contain;
  padding: 1rem;
}

.solution-validation .benefit {
  	display: flex;
  	margin-top: 2rem;
	justify-content: center;
	flex-wrap: wrap;
}

.solution-validation .benefit .image{
	width: 15rem;
}		

.solution-validation .benefit img{
  margin: 0 auto;
  width: 10rem;
  height: 10rem;		
  object-fit: contain;
}

.solution-validation .benefit .description{
  width: 100%;
}			

.solution-validation .benefit h2{
  color: var(--primary-color);
  text-align: left;
  font-size: 25px;
  font-weight: bold;
}

.solution-validation .benefit p{
  text-align: left;
}

.solution-activation {
	text-align: center;
	padding-bottom: 0;

}

.solution-activation .card {
  width: 100%;
  border: none;	
  margin-bottom: 3rem;
  margin: 14px 4rem;
}

.solution-activation .card .heading {
    font-weight: bold;
    font-size: 28px;
}

.solution-activation .steps {
	display: flex;
	margin-top: 2rem;
	justify-content: center;
	flex-wrap: wrap;
}

.solution-activation .steps img {
  margin: 0 auto;
  width: 12rem;
  height: 15rem;		
  object-fit: contain;
  padding: 1rem;
}

.solution-retention {
	text-align: center;
	padding-bottom: 0;

}

.solution-retention .business-model {
	display: flex;
	margin-top: 2rem;
	justify-content: center;
	flex-wrap: wrap;	
}	

.solution-retention .business-model .card {
  width: 100%;
  border: none;	
  margin: 3rem 0rem;
	
}

.solution-retention .business-model .card .heading {
    font-size: 20px;
    font-weight: bold;
}

.solution-retention .business-model img {
  margin: 0 auto;
  width: 20rem;
  height: 20rem;		
  object-fit: contain;
  padding: 1rem;	
}	

.referral_pics {
	width: 90vw;
	margin: 0 auto;
}

.solution-revenue-photo {
	width: 80vw;
	margin: 0 auto;
}

.nav-content {
	display: none;
}

.dropdown-toggle:after {
    display: none;
}

.nav-link-border {
	border-left-color: var(--secondary-color);
    border-bottom-color: white;
}

.nav-tabs .nav-link {
	background-color: black;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

input {
    background-color:transparent;
    border: 0px solid;
    border-bottom: 1px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}
::placeholder {
  color: black;
  opacity: 1; /* Firefox */
}

.youtube-video {
  position: relative;
  width: 95%;
  padding-bottom: 56.25%; 
  height: 0;
}

.youtube-video iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shopping-cart {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 0vw;
 }

.shopping-cart img {
    object-fit: contain; 
    /* padding: 1rem; */
    /*border: solid red;  */
}

.product {
	width: 12rem;
    height: 11rem;
    margin: 1rem;
    background-color: var(--primary-color);
    color: white;
	font-weight: bold;
}

.register-login {
	display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.register-login > div {
	margin: 1rem; 
	font-weight: bold;
}	

.register-login span {
	padding: 10px; 
	font-weight: bold; 
	font-size: 20px;
}

.register-login .long-text {
/* 	width: 210px; */
}

.register-login input {

}

.register-login button {
      font-size: 18px;	
	  padding: 0 1em;
	  border: 0px solid grey; 
	  color: white;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  width: 250px;
	  cursor: pointer;
	  height: 3rem;
	  background-color: var(--primary-color);   
}

@media only screen and (min-width: 600px) {
	.banner {
		display: block;
	}
	
	.banner-mobile {
		display: none;
	}
	
	.see-more {
		height: 340px;
	}		
	
	.see-more-mobile {
		height: 330px;
		background-position: 125px 0px, 0px 310px; 
		background-size: 375px 330px, auto 25px;
	}
	
	.solution-mobile img {
    	width: 60%;
	}
	
	.pickeers_image_map {
		top: 10%; 
		left: 45%; 
		width: 25%; 
		height: 10%;
	}
	
	.missionpick_image_map {
		top: 10%; 
		left: 45%; 
		width: 25%; 
		height: 10%;
	}	
	
}	

@media only screen and (min-width: 760px) {
	section {
    	padding: 2em 2em;
	}
	.p-text-align-left {
	   padding: 0 6rem;	
	}		

	.see-more {
		height: 300px;
	}		
	
	.see-more-mobile {
		height: 350px;
		background-position: 300px 0px, 0px 335px; 
		background-size: 415px 350px, auto 25px;
	}
 
 	.solution-mobile img {
    	width: 50%;
	}
 
	 .what_is_pickeers {
		display: block;
	}

	 .what_is_pickeers_mobile {
		display: none;
	}
  		
  .solution-validation {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  
  .solution-validation .card {
    width: 15rem;
  }
  
  .solution-validation .benefit .description{
	margin-top: 1rem;
	width: 60%;
  }			

  .solution-activation .card {
    width: 15rem;
  }
  
  .solution-retention .business-model .card {
	  width: 20rem;
	  margin: 3rem 3rem;
  }
  
	.referral_pics {
		width: 70vw;
		margin: 0 auto;
	}  
  
  .client-img-wide img {
  	width: auto;		
  }
  
  .solution-revenue-photo {
	max-width: 60vw;
	margin: 0 auto;
  }
  
  .let-talk {
  	padding: 5rem 5rem;
  }

	.footer .container {
	  flex-wrap: nowrap;
	}

  .facebook-padding {
	padding-left: 5rem;
	padding-right: 3rem;
  }  
  
  .linkedin-padding {
  	padding-right: 5rem;
  }
}	

@media only screen and (min-width: 960px) {
	.navbar .header-logo img {
	  max-width: 80%;
	}	
	
	.text-photo {
	  max-width: 50rem;
	}

	.user-icon {
		font-size: 1.3em;
	}

	#sidebar-nav {
		display: none;
	}
	
  .nav-content {
	display: flex;
	height: 5rem;
	justify-content: center;
	align-items: center;
	background-color: var(--primary-color);
	color: white;
	font-size: 18px;
	font-weight: bold;
  }	
	
  .navbar .nav-container {
    display: grid;
    grid-template-columns: 180px auto;

  }
  .navbar nav {
    display: flex;
    justify-content: space-between;
    background: none;
    position: unset;
    height: auto;
    width: 100%;
    padding: 0;
  }
  .navbar nav ul {
    display: flex;
    align-items: center;
  }
  .navbar nav a {
    color: black;
    font-size: 1em;
    font-weight: bold;
    padding: .1em 1em;
  }
  .navbar nav ul.primary-nav {
  	display: flex;
  	align-items: flex-end;
    margin: 0;
  }
    
  .navbar nav li.current > a {
    color: var(--primary-color);
    font-weight: bold;
  }
  
  .navbar .header-logo img {
  	max-width: 100%;
  }  

	.client .client-list {
		margin: 20px 60px;
	}	

  .solution {
  	display: block;
  }

	.solution-mobile {
		display: none;
	}

  .see-more-mobile {
		display: none;
  }
  
  .see-more .rotate-90 {
  		display: block; 
  }	
  
  .see-more .rotate-90 p {
	float: left;
	color: black;
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: FontAwesome;    
  }
  
	.see-more .see-more-button {	
	  float: left;
	  border-radius: 99em;
	  font-weight: 600;
	  min-width: 2.5em;
	  padding: 0 1em;
	  border: 1px solid black;
	  color: black;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  width: 150px;
	  cursor: pointer;
	  height: 3rem;
	  background-color: transparent;
	  margin-bottom: 45px;	
	  
	}  

  .see-more {
	background-image:url('../img/ux_ui.png'), url('../img/orange.png');  
	height: 480px;
	background-position: 50vw 10px, 0px 456px; 
	background-repeat:no-repeat, repeat-x;
	background-size: auto 460px, auto 25px;
  }
  
  .see-more > div {
    margin: auto 1.5rem;	
  }
  
  .solution-acquisition .pickeers-flow {
	display:flex;
	justify-content: center;
  }
  
  .solution-acquisition-text p {
	padding: 0 13rem;
  }

	.solution-acquisition .target-audience, shopping-cart {
	  padding: 0 10vw;
	 }

  .solution-validation {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  
  .solution-validation .benefit .description{
	margin-top: 1rem;
	width: 60%;
  }			
	
	
}

@media only screen and (min-width: 1250px) {
	.solution-acquisition .target-audiencet {
	  padding: 0 20vw;
	 }
	 
	.shopping-cart {
	  padding: 0 18vw;
	 }	 
	 
}