/* css variables */
:root{
  --background: #ffffff;
  --foreground: #333333;
}

/* header styles */
header{
  padding:20px;
}
@media only screen and (max-width: 700px){
  header > .flex-container{
    /* flex-wrap:wrap; */
  }
  header .carjeta-logo{
    background-image:url("/img/carjeta_wordmark_light_trans.png");
    width:150px;
    height:50px;
  }
}


/* footer styles */
footer{
  margin-top:90px;
}
footer a.standard-link{
	transform: scale(1);
	position:	relative;
	display:inline-block;
	transition: transform .25s;
}
footer a.standard-link .link-icon{
  width:16px;
  height:16px;
  margin-right:8px;
}
footer a.standard-link:before{
  display:none;
}
footer a.standard-link:after{
	content:"";
  pointer-events: none;
	opacity:1;
	position:absolute;
	left:0;
  bottom:-2px;
	width:100%;
	height:1px;
	background-color:currentColor;
	cursor:pointer;
}
@media (hover: hover) and (pointer: fine) {
  footer a.standard-link:hover:after{
    animation:hoverLink .45s;
  }
}
@keyframes hoverLink{
	/* fade out */
	0%{
		opacity:1;
	}
	25%{
		opacity:0;
	}
	30%{
		width:0;
	}
	35%{
		opacity:1;
	}
	100%{
		width:100%;
	}
}
footer a.standard-link:active{
	transform:scale(.95);
}
#footer-bottom{
  margin-top:20px;
}


/* shared content styles */
.text-link{
  text-decoration:underline;
}
.landing-container{
  max-width:300px;
}
.carjeta-logo{
  width:300px;
  height:100px;
  /* background-size:; */
  /* background-image:url("img/carjeta-powered-by-logo.png"); */
  background-image:url("/img/carjeta_full-logo_light_trans.png");
  /* margin-bottom:50px; */
}

/* mobile (700px) */
@media only screen and (max-width: 700px){
  body.flex-container{
    flex:none;
    display:block;
  }
  h1{
    font-size: 1.5em;
    margin-bottom:20px;
  }
  button{
    width:100%;
    display:block;
    padding:10px;
  }
}