#breakpoint-mobile {display: block}
#breakpoint-tablet {display: none}
#breakpoint-desktop {display: none}

@font-face {
  font-family: "Din";
  src: url("../font/DINNextLTPro-Light.woff") format('woff');
}

html {
  font-size: 16px;
}

body {
  color: #676C81;
  font-family: 'Poppins', sans-serif;  
  font-weight: 300;
  line-height: 1.5rem;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a, a:visited {
  color: #676C81;
}

h1 {
  font-size: 3rem;
  font-weight: normal;
  line-height: 3.5rem;
  margin: 0;
}

h2 {
  font-family: 'Din', 'Poppins', sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: normal;  
  text-align: center;
  color: #363840;
  padding: 1.5rem 0 0 0;
}

code {
  padding: 0.2rem 0.5rem;
  color: #363840;
  background-color: #EDF1FF;
  border-radius: 0.5rem;
}

.image {
  height: auto;
  width: 100%;  
}

.w100 {
  width: 100%;
  box-sizing: border-box;
}

.h2-separator {
  background-color: #F1F4FF;      
  padding: 3px;
  min-width: 3rem;
  max-width: 3rem;
  margin: 2rem auto;  
}

.button-light, .button-pale, .button-dark, .button-important {
  display: inline-block;
  padding: 0.8rem 2rem;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.5s;
  box-shadow: 0 4px 6px hsla(0,0%,0%,.05);
}

.button-light:hover, .button-pale:hover, .button-dark:hover, .button-important:hover {
  box-shadow: 0 1px 3px hsla(0,0%,0%,.05);  
}

.button-light, .button-light:visited {
  background-color: #FFFFFF;
  color: #3754BC;
}

.button-light:hover {
  background-color:#32499A;
  color:#FFFFFF;
}

.button-pale, .button-pale:visited {
  background-color: #EDF1FF;
  color: #3754BC;
}

.button-pale.filled {
  background-color: #3754BC;
  color: #FFF;
  margin-left: 1rem;
}

.button-pale.filled:hover {
  background-color: #0126aa;
}

.button-pale:hover {
  background-color:#3754BC;
  color:#FFF;
}

.button-pale svg {
  position: relative;
  top: 3px;
}

.button-dark, .button-dark:visited {
  background-color: #3754BC;
  color: #FFFFFF;
}

.button-important, .button-important:visited {
  background-color: rgba(55, 188, 157, 0.2);
  color: #37BC9D;
}

.button-important:hover {
  background-color: #37BC9D;
  color:#FFF;
}

.button-important.filled {
  background-color: #37BC9D;
  color: #FFFFFF;
}

.button-important.filled:hover {
  background-color: #129e7d;
  color: #FFFFFF;
}

.button-nav {
  width: 8rem;
  display: flex;
  margin: 0rem 1rem 1rem 1rem;
  justify-content: center;
}

.line {
  display: block;
  background-color: #F1F4FF;
  padding: 0.7px;
}

#hero {
  font-family: 'Din', 'Poppins', sans-serif;
  color: #363840;
  background-color: #EDF1FF;
  padding: 4rem 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 6rem;
  text-align: center;
}

#hero .breadcrumb {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.25rem;
  text-transform: uppercase;
  color: #C3CBEA;
  font-size: 0.875rem;
  padding-bottom: 10px;
}

.breadcrumb a {
  text-decoration:none;
  color:#676C81;
}

.breadcrumb a:hover {
  color:#333;
}

/* Hero home styles */

.hero-content {
  width: 100%;
}

.hero-home {
  font-family: 'Din', 'Poppins', sans-serif;
  color: #363840;
  background-color: #EDF1FF;
  text-align: center;
  position: relative;
  min-height: auto;
  justify-content: center;
}

.hero-home h1 {
  font-size: 3rem;
  line-height: 3.75rem;
}

.hero-home .desc {
  font-size: 1.125rem;
  line-height: 1.875rem;
  margin-top: 1rem;
}

.hero-text {
  text-align: left;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  justify-content: center;
  padding: 2rem;
}

.hero-text a {
  display: inline-block;
  width: 8.125rem;
  margin-left: 0;
  text-align: center;
  margin-top: 2rem;
}

.hero-illustration {
  /* display: none; */
  background-image: url(../images/home-page-hero.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 300px;
  height: 240px;
  margin: 0 auto;
}

/* ------------------ */

.panel {
  padding: 1rem 1.5rem;
}

.panel-light, .panel-pale, .panel-dark, .panel-transparent {
  display: inline-block;
}

.panel a {
  font-weight: 400;
  text-decoration: none;  
  margin-top: 25px;
}

.panel a.link {
  margin-top: 25px;
  color: #9BA9DD;  
}

.panel h3 {  
  font-family: 'Din', 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: normal;
  line-height: 2.25rem;
  display: inline-block;
  margin: 1rem 0 0.25rem 0;
}

.panel ul {
  margin-left: -1.2rem;
  margin: 0;
  padding-left: 0;
  margin-top: 1.5rem;
}

.panel li {
  line-height: 1.5rem;
}

.panel-dark {
  color: #FFFFFF;
  background-color: #3754BC;
}

.panel-dark {
  display: inline-block;  
}

.panel-dark li {
  list-style-image: url("../images/li-dark.png");
}

.panel-pale {
  color: rgba(103, 108, 129, 0.75);
  background-color: #FBFBFB;
}

.panel-pale h3 {  
  color: #363840;
}

.panel-light {  
  color: #676C81;
  background-color: #FFFFFF;
}

.panel-transparent {
  background-color: inherit;
}

li {
  padding-bottom: 2rem;
  list-style: none;
}

li:before { content:"\2713\0020"; color:#3754BC; }

nav a.selected {  
  color: #3754BC;
  opacity: 1;
  font-weight: 400;
}

nav a.selected:hover {  
  color: #3754BC  
}

header nav a, footer nav a {
  color: #494D58;
  text-decoration: none;
  padding: 1rem 0.5rem;
  white-space: nowrap;
  font-weight: 400;
}

/* Header styles */

header {  
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF; 
  z-index: 2;
  position: relative;
}

header nav {
  display: none;  
  flex-direction: column;
}

header nav a {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #EDF1FF;
  display: block;
  padding: 1rem;
  margin: 0; 
}

header nav > a:first-child {
  border-bottom-width: 0;
  display: block;            
}

header nav a:hover, header nav a:focus {
  color: #333;
}

#logo {
  display: block;  
  background: no-repeat url(../images/appia-logo.svg);
  width: 135px;
  height: 33px;    
  flex: auto;
  margin: 1.4rem;
}

#solutions-link {
  display: none;        
  white-space: nowrap;
}

#solutions-menu {
  display: flex;
  flex-direction: column;  
}

a.submenu {
  background-color: #FBFBFB;
  border: 0;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding-left: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #676C81;
}

a.submenu.last {
  margin-bottom: 1rem;
}

.nav-arrow {
  border: solid #494D58;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  margin-bottom: 3px;
  margin-left: 3px;
}

#hamburger, #hamburger-close {
  position: absolute;
  right: 1.563rem;
  top: 1.563rem;
}

#hamburger-container {
  display: block;
  cursor: pointer;
}

#hamburger {
  display: block;
}

#hamburger-close {
  display: none;
}

.participant {
  padding: 0 0.5rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.participant-light {
  color: #3754bc;
  background-color: #FFFFFF;
  font-weight: 400;
}

.participant-pale {
  color: #3754bc;
  background-color: #EDF1FF;
  font-weight: 400;
}

/* Footer styles */

footer nav a {
  padding: 1rem 0.5rem;
}

#logo-footer {
  display: block;
  width: 100px;
  background: no-repeat url(../images/appia-mark-mobile.svg);
  background-size: 75% auto;
}

#footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;  
}

#footer-inner .logo-and-nav {
  display: flex;
  margin-top: 2rem;
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
}

#footer-inner nav {
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  justify-content: flex-start;
  width:100%;
}

#footer-inner nav .column div {
  min-width: 7rem;
  max-width: 15rem;
  padding-bottom: 1.5rem;
}

#footer-inner .contact {
  max-width: 100%;
  padding: 0 0 2rem 0;
  border-bottom: 1px solid #F1F4FF;
}

#footer-inner .contact-text {
  padding-bottom: 2rem;
}

#footer-inner .contact-icons {
  display: flex;
  flex-direction: row;
  justify-content: start;
}

#footer-inner .contact-icons div {
  width: 45px;
  height: 45px;
  background: #EDF1FF;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center; 
  margin-right:1rem; 
}

#footer-inner nav > .column {
  margin: 0 .5rem;
}

/* ------------------ */

#intro {
  font-size: 1.3rem;
  line-height: 2.5rem;
  padding: 3rem 5% 3rem 3%;
  margin-bottom: 1rem;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.no-pt {
  padding-top: 0rem !important;
}

#copyright {
  color: #C4C4C4;
  text-align: center;
  margin: 2rem 0;
}

.container-drop-shadow {
  box-shadow: 10px 10px 0px 0px rgba(237,241,255,1);
}

.separator {
  padding: 3rem;
}

.with-icon {
  background-repeat: no-repeat;
  background-position: 2rem 1rem;
  padding-top: 3rem;      
}

#testimonial {
  display: flex;
  background-color: #3754BC;
}

#testimonial .testimonial-main {
  display: block;
  margin: 10rem 3rem;
}

#testimonial .testimonial-image {
  display: none;
}

#testimonial .testimonial-name-and-location {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#testimonial .testimonial-name {
  color: #FFFFFF;
  font-size: 1.75rem;
}

#testimonial .testimonial-location {
  margin-left: 0.5rem;
  color: #FFFFFF;
}

#testimonial .testimonial-icon {
  padding: 1rem 0 0.5rem 1rem;
}

#testimonial .testimonial-quote {
  padding: 0 2rem;
  color: #D6DFFF;
}

#testimonial .testimonial-separator {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

#testimonial .testimonial-separator .left {
  background-color: #FFFFFF;
  height: 6px;
  width:20%;
} 

#testimonial .testimonial-separator .right {
  background-color: #CCD3EE;      
  height: 3px;
  width:80%;
}

/* Cookie consent styles */

#cookie-consent {
  display: flex;          
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 94%;
  padding: 0.5rem 3%;
  z-index: 3;
}

#cookie-consent p a, #cookie-consent p a:visited {        
  text-align: center;
  color: #FFFFFF;
  text-decoration: underline;
}

#cookie-consent-agree {        
  margin: 0.3rem 0.5rem;
  padding: 0.3rem 0.5rem;
}

/* Alternating panel styles */

.alternate-1, .alternate-2 {
  display: flex;  
  align-items: center;
  margin: 5rem 0;
}

.alternate-1 {
  flex-direction: column-reverse;
}

.alternate-2 {
  flex-direction: column;
}

.alternate-1 div, .alternate-2 div {
  margin: 0rem 1rem;
}

.alternate-fw {
  background-color: #EDF1FF;
  padding: 4rem 0;
  margin: 0;
}

.alternate-fw-pale {
  background-color: #FBFBFB;
}

.alternate-fw-light-grey {
  background-color: #EFF1F2;
}

/* ------------------ */

.container {
  margin: 10rem 0;
}

/* Home page styles */

#home-page-video-container {
  text-align: center;
  margin: 5rem 0;
}        

#home-page-three-panel .panel {
  margin: 0.5rem auto;
}

#home-page-video {  
  width: 80%;
  height: 300px;
  background-color: #333;
}

#video-home-page-container {
  display: flex;
  justify-content: center;
  margin-bottom: 6rem;
}

#video-home-page-thumbnail {
  display: none;
  border: 1px solid #99A6D9;
  background-color: #666;
  display: block;
  background-image: url(../images/video-home-page-thumbnail.png);
  background-size: cover;
  cursor: pointer;
}

#video-home-page {
  display: none;
  flex-direction: row;
  position: relative;
}

/* Small white columns to hide the black bars sometimes present on a YouTube embed */
#video-home-page-column-left, #video-home-page-column-right {
  background-color: #FFFFFF;
  height: 100%;
  width: 3px;
  z-index: 15;
  position: absolute;
  top: 0;
}

#video-home-page-column-left {
  left: 0;
}

#video-home-page-column-right {
  right: 0;
}

/* Business page styles */

#business-page-panel-row-container {
  margin: 2rem 0 ;
}

.business-page-panel-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.business-page-panel-row .panel {
  margin-bottom: 2rem;
}

.business-page-wraparound-panel, .business-page-alternate-panel {
  margin: 5rem 0;
}

.business-page-wraparound-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
  padding-right: 0rem;
}

.business-page-alternate-panel {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.business-page-alternate-panel div:nth-child(2) {
  width: 100%;
}

/* Developers page styles */

#developers-page-manta-intro ul {
  margin-top: 3rem;
}

#developers-page-manta-intro li {
  list-style: none;
}

#developers-page-protocol-participants {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#developers-page-protocol-participants h3 {
  margin-bottom: 1rem;
}    

#developers-page-protocol-participants ul {
  list-style: none;
}    

#developers-page-protocol-participants .panel {
  width: 100%;
  box-sizing: border-box;
}

#developers-page-protocol-participants .panel:first-child {
  border-bottom: 1px solid #eaeaea;
}

#developers-page-protocol-participants .panel:last-child {
  border-top: 1px solid #eaeaea;
}

#developers-page-protocol-participants li {
  padding-left: 3rem;
  background-repeat: no-repeat;      
  background-image: url(../images/protocol-participants-arrow.png);
  background-position-y: 5px;
}

#developers-page-protocol-participants li:before {
  content:"";
}

#developers-page-documentation-links {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#developers-page-documentation-links .panel {
  margin: 1rem;
  padding: 1rem 3rem;
}

#developers-page-documentation-links .buttons a { 
  margin: 0;
}

.buttons {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

#developers-page-open-protocol-container {
  display: flex;
  flex-direction: row;
  margin: 2rem 5%; 
}

#developers-page-open-protocol-container .left {
  display: none;
}    

#developers-page-open-protocol-container .right {
  display: flex;
  flex-direction: column;
}

#developers-page-open-protocol-container .intro {
  color: #000000;
}

#developers-page-appia-certification {
  background-color: rgba(237, 241, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5rem 10%;
  text-align: center;
  margin-top: 6rem;
}

/* Personal page styles */

#personal-page-benefits-container {
  display: flex;
  flex-direction: row;
  margin: 5rem 0;
}

#personal-page-benefits-image {
  display: none;
}

#personal-page-benefits {
  display: block;
  width: 100%;
}

ul.personal-list {
  padding: 20px;
}

.personal-page-panel-row {
  display: flex;
  flex-direction: column;  
  justify-content: space-evenly;
}

.personal-page-panel-row .panel {
  margin: 1rem 0;
}

#personal-page-appia-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#personal-page-appia-payment .step {
  margin: 1rem;
  margin-bottom: 4rem;
  width: 225px;  
}

#personal-page-appia-payment .step div:first-child {
  display: flex;
}

#personal-page-appia-payment .step img {
  align-self: flex-end;
}

#personal-page-appia-payment .step .panel {
  width: 100%;
  height: 17rem;
  box-sizing: border-box;
}

#personal-page-wallet-support {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.personal-page-wallet-support-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.personal-page-wallet-support-row .panel {
  margin: 1rem 0;
}

.personal-page-cryptocurrency-support-row {
  padding: 1rem 0;
  padding-top: 0;
}

.personal-page-cryptocurrency-support-row span {
  display: inline-block;
  color: rgba(103, 108, 129, 0.75);
  background-color: #FFFFFF;
  border-radius: 1rem;
  padding: 5 10;
  margin: 5 5 5 0;  
}

.panel-wallet {
  text-align: center;
  background-color: #FBFBFB;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2rem;
  justify-content: space-between;
}

.panel-wallet img {
  display: flex;
  margin: 1.5rem 0;
  width: 10rem;
}

.panel-centered {
  font-size: 1.25rem;
  text-align: center;
  padding: 3rem 0 3.5rem 0;
}

#personal-page-wallet-support p.leading {
  margin-bottom: 50px;
  margin-top: 30px;
}


/* Retail page styles */

.retail-page-alternate-1, .retail-page-alternate-2 {
  display: flex;  
  align-items: center;
}

.retail-page-alternate-1 {
  flex-direction: column-reverse;
}

.retail-page-alternate-2 {
  flex-direction: column;
}

.retail-page-alternate-2 > div {
  margin: 3rem 0 1rem 0;
}

.retail-page-alternate-1 .panel, .retail-page-alternate-2 .panel {
  display: flex;
  flex-direction: column;
}

.retail-page-alternate-1 img, .retail-page-alternate-2 img {
  width: 100%;
  max-width: 500px;
}

#retail-page-virtual-pos-app {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 5%;
}

#apm-page-use-case-container, #apm-page-use-case-container .left, #apm-page-use-case-container .right {
  display: flex;
  flex-direction: column;
}

/* Automated Payment Machines page styles */

#apm-page-use-case-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5rem;
}

.apm-page-use-case-column {
  display: flex;
  flex-direction: column;
}

.apm-page-use-case-column > div {
  margin: 0.5rem;            
}

.apm-page-use-case-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #FFFFFF;
  height: 17.375rem;    
  text-align: center;
  background-position-x: -3rem;  
}

.apm-page-use-case-panel p {
  text-align: center;
  width: 8rem;
}

.apm-page-gradient-upper, .apm-page-gradient-lower {      
  display: none;
  height: 7.75rem;  
}

.apm-page-gradient-upper {
  background: linear-gradient(178.72deg, rgba(237, 241, 255, 0) 27.68%, #EDF1FF 96.98%);
}

.apm-page-gradient-lower {
  background: linear-gradient(178.72deg, #EDF1FF 27.68%, rgba(237, 241, 255, 0) 96.98%);
}    

.apm-page-use-case-panel, .apm-page-gradient-upper, .apm-page-gradient-lower {
  width: 11rem;
}

#apm-page-use-case-panel-atms {
  display: flex;
}

/* Team page styles */

#team-page-members-container {
  display: flex;
  flex-direction: column;
  align-content: center;
}

#team-page-members-container > div {
  margin: 3rem 0;
}

#team-page-members-container > div:last-child {
  margin-bottom: 6rem;
}

.team-page-spacer {
  display: none
}

.team-page-photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.team-page-photo img {
  max-width: 350px;
  max-height: 350px;
  height: auto;
}

.team-page-member-1, .team-page-member-2 {
  display: flex;
}

.team-page-member-1 {
  flex-direction: column;
}

.team-page-member-2 {
  flex-direction: column-reverse;
}

.team-page-member > div {
  margin: 0.5rem;
}

.team-page-linkedin-link {
  width: 2.5rem;
  height: 2.5rem;
  background: #EDF1FF;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;  
}

/* Contact page styles */

#contact-page-emails-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

#contact-page-socials-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#contact-page-socials-container a {  
  min-width: 10rem;
  text-align: center;
  margin: 1.5rem 0;  
}

#contact-page-socials-container a:hover {
  background-color: #0126aa;
}

#contact-page-socials-container img {  
  margin-right: 0.75rem;
} 

#contact-page-socials-container svg {
  fill: #3754BC;
}

#contact-page-socials-container svg:hover {
  fill: #FFFFFF;
}