﻿body {
 letter-spacing: 0.02em;
}

body > main {
	padding: 30px 0;
	min-height: 80vh;
}

body > footer {
	background: #f9f9f9;
}

.container-fluid {
	max-width: 900px;
}

.navbar {
	padding: 0.5rem 0;
}

h1,
h2,
h3,
h4,
h5 {
	letter-spacing: normal;
}

.display-1,
.display-2,
.display-3,
.display-4 {
  font-family: roboto, sans-serif;
  font-weight: 300;
}

.swipe-container { position: relative; max-width: 100%; }
.swipe-container img { display: block; }

.swipe-image-label { position: absolute; bottom: 0; right: 0; padding: 1rem; opacity: 0; text-align: center; color: #fff; text-shadow: 1px 1px rgba(0,0,0,0.5); -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; }

.swipe-over-image { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; border-right: 1px solid #fff; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.swipe-over-image img { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; }
.swipe-over-image .swipe-image-label { right: auto; left: 0; }

.swipe-handle { position: absolute; height: 81px; width: 17px; left: 50%; top: 50%; margin-left: -9px; margin-top: -41px; background: url(/images/drag-handle.svg) no-repeat center center #d9d9d9; background-size: cover; cursor: col-resize; transform: scale(0, 1); box-shadow: rgba(0,0,0,0.5) 1px 1px 2px; }

@keyframes swipe-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } }
.swipe-container.initialized .swipe-image-label { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.swipe-container.initialized .swipe-over-image { width: 50%; animation: swipe-bounce-in 0.7s; }
.swipe-container.initialized .swipe-handle { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; }
