@import url("./sanitize.css");

html {
    scroll-behavior: smooth;
}

body {
    padding:0;
    margin:0;
    background-color:#ECEFF1;
    color:#222;
    font-family: "Roboto", sans-serif;
}

section {
    margin:0;
    padding-top:5rem;
    padding-bottom:5rem;
}

h1,h2,h3,h4,h5,h6,p {
    margin:0;
    padding:0;
}

.title {
    font-family:"Cormorant", serif;
    text-transform:uppercase;
}

/* Flexbox */

.container {
    margin:0 auto;
    width:80%;
    max-width:1280px;
    display:flex;
    flex-direction:column;
}

.row {
    display:flex;
    flex-direction: column;
}

.column {
    display:flex;
    flex-direction:column;
    flex:1;
}

.one-third {
    flex:0 0 33.33%;
    align-items: center;
    justify-content: center;
}

.one-quarter {
    flex: 0 0 25%;
    align-items: center;
    justify-content: center;
}

/* Panels */

.panel {
    display:flex;
    flex-direction:column;
    background:transparent;
    flex:1
}

.panel-title {
    padding:1rem;
    border-top:2px solid silver;
}

.panel-text {
    padding:1rem;
    padding-bottom:0
}

.panel-image {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.panel-image * {
    max-width:100%;
}

.panel-buttons {
    display:flex;
    flex-direction:column;
    padding:1rem;
    justify-content:center;
}

/* Buttons */

.button {
    color:#fff;
    background-color:#007dba;
    text-decoration:none;
    text-transform: uppercase;
    letter-spacing: .1rem;
    font-size: small;
    font-weight: bold;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    padding:.5rem;
    margin:.25rem;
    margin-left:.5rem;
    margin-right:.5rem;
    flex:1;
    transition:background-color .2s ease-in-out
}

.button:hover {
    background-color: #004a6e;
}

/* Border */

.border-break {
    display:flex;
    flex-direction: row;
    justify-content: center;
    overflow: visible;
    height:0;
}

.arrow-down {
    height:3rem;
    width:3rem;
    background-color:#007dba;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23FFFFFF'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
    margin-top:-1.5rem;
    z-index:5
}

/* Header */

.header-wrap {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:10;
}

header {
    background-color:#222;
    color:#e0e0e0;
    position: relative;
    z-index:5;
}

header .column {
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
}

header .title {
    padding-top:1rem;
    padding-bottom:1rem;
}

header .title a {
    color:#e0e0e0;
    text-decoration: none;
    transition: color .2s ease-in-out;
}

header .title a:hover {
    color:#007dba
}

.toggle {
    height:1rem;
    width:1rem;
    background-image: url("../img/menu.svg");
    background-position: center center;
    background-size:cover;
    background-repeat: no-repeat;
}

.toggle:hover {
    cursor: pointer;
}

.toggle-active {
    background-image: url("../img/close.svg");
}

nav {
    background-color: #111;
    margin-top:-1000px;
    transition: margin .2s ease-in-out;
    position: relative;
    z-index:0
}

nav.active {
    margin-top:0;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:0;
    padding:.5rem;
}

nav li {
    padding:.25rem;
    padding-left:1rem;
    padding-right:1rem
}

nav a {
    color:#e0e0e0;
    text-decoration: none;
    font-weight: bold;
    transition: color .2s ease-in-out;
}

nav a:hover {
    color:#007dba
}

/* Hero */

.hero {
    min-height:50vh;
    padding-top:0;
    padding-bottom:0;
    position: relative;
    background-image: url("../img/calgary-01.jpg");
    background-position: 0% 0%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index:-5;
    animation: pan 180s ease;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes pan {
    0% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.hero .row {
    padding-top:5rem;
    padding-bottom:5rem;
    background-color: rgba(255,255,255,.55);
    backdrop-filter: blur(15px);
}

.hero-overlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index:-1;
}

.overlay-stripe {
    width:100%;
    height:65%;
    background-color:rgba(255,255,255,.5);
    backdrop-filter: blur(15px);
}

.hero .container {
    z-index:5;
}

.book {
    max-height:75vh;
}

.hero .title {
    font-size:4rem;
    line-height:1.5rem;
    text-align:center;
    display: none;
}

.hero .title span {
    font-size:2rem;
}

.hero-text .panel {
    justify-content: center;
    padding-bottom: 1rem;
}

.hero-text .panel-title {
    border-top: none;
}

.hero .panel-image {
    padding:1rem
}

/* Contents */

.contents .container {
    width:90%;
}

.contents .anchor {
    padding-bottom:2.75rem;
}

.contents .column {
    padding:1rem;
}

.contents .panel {
    background-color: transparent;
    border-left:2px solid silver;
    border-right:2px solid silver;
}

.contents .panel-image {
    border-bottom:2px solid silver;
    border-top:2px solid silver
}

.contents .panel-title {
    border-bottom:2px solid silver;
    padding:1rem;
}

.contents ul {
    list-style: none;
    padding-left:2rem;
    padding-right:2rem;
    padding-bottom:1rem;
}

.contents ul li {
    padding-top:.5rem;
    padding-bottom:.5rem;
}

.contents ul li:before {
    content:"";
    background-image: url("../img/check.svg");
    background-size: contain;
    display: inline-block;
    width:1rem;
    height:1rem;
    position: relative;
    top:.2rem;
    margin-right:.5rem
}

/* Reviews */

.reviews {
    background-color:#fff;
    /*background-image:linear-gradient(
        to bottom,
        #eee,
        #eee 10%,
        #fff 10%,
        #fff 90%,
        #eee 90%
    )*/
}

.reviews .container {
    width:90%;
}

.reviews .column {
    padding:1rem;
}

.reviews .title {
    text-align: center;
    border-bottom:2px solid silver;
    border-left:2px solid silver;
    border-right:2px solid silver;
    font-size:2rem;
}

.reviews .title span {
    text-transform:none;
}

.reviews .panel {
    border-left:2px solid silver;
    border-right:2px solid silver;
}

.slider {
    position:relative;
    max-width:95%;
    margin:0 auto;
    height:15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow:visible;
}

.slide {
    font-style: italic;
    position: absolute;
    top:0;
    bottom:0;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top:1rem;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.slide .right {
    text-align: right;
}

.slide.active {
    opacity:1;
    transition-delay: 500ms;
}

.highlight {
    border-radius: 1em 0 1em 0;
    background-color: yellow;
    padding-left:.25rem;
    padding-right:.25rem;
  }

/* Purchase */

.purchase {
    position: relative;
    padding-top:0;
    padding-bottom:0
}

.purchase-overlay {
    background-image: url("../img/calgary-01.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index:-1;
}

.overlay-stripe {
    width:100%;
    height:65%;
    background-color:rgba(255,255,255,.5);
    backdrop-filter: blur(15px);
    visibility: hidden;
}

.purchase .row {
    padding-top:5rem;
    padding-bottom:5rem;
    background-color: rgba(255,255,255,.55);
    backdrop-filter: blur(15px);
}

.purchase .panel-title {
    text-align: center;
    font-size:3rem;
    padding-top:2rem;
}

.purchase .panel-text {
    padding-top:0
}

.purchase .panel-buttons {
    padding-bottom:2rem;
}

/* Author */

.author {
    background-color: #444;
    color:#e0e0e0
}

.author .panel {
    font-style: italic;
    border-left:2px solid #222;
    border-right:2px solid #222
}

.author .panel-title {
    border-bottom:2px solid #222;
    border-top:2px solid #222;
    padding:1rem;
}

.author .panel-image {
    justify-content: flex-start;
    width:100%;
    height:100%;
    padding:1rem;
    padding-top:2rem;
}

.author .panel-image img {
    border:2px solid #222
}

.author .panel-text {
    padding-bottom:1rem;
}

.panel-socials {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding:.5rem;
    background-color:#222;
}

.panel-socials a {
    height:2rem;
    width:2rem;
    margin-left:.5rem;
    margin-right:.5rem;
    color:#777;
    transition: color .2s ease-in-out;
}

.panel-socials a:hover {
    color:#fff
}

/* Contact Page */

.contact {
    background-color: #e0e0e0;
    padding-top:7.5rem;
}

.contact .panel {
    border-left:2px solid silver;
    border-right:2px solid silver;
}

.contact .panel-title {
    border-bottom: 2px solid silver;
    font-style: italic;
    padding:1rem;
}

form input,
textarea {
    background-color: #fff;
    margin-left:.5rem;
    margin-right:.5rem;
    margin-bottom:.5rem;
    border-radius: 4px;
    border: 1px solid silver;
    font-style: italic;
}

form input:active,
form input:focus,
textarea:active,
textarea:focus {
    border:1px solid transparent;
    outline: 1px solid #007dba;
}

textarea {
    min-height:250px;
}

form label {
    font-size:small;
    font-style: italic;
    letter-spacing: .1rem;
    text-transform: uppercase;
    margin-left:.5rem;
    margin-bottom:.25rem;
    margin-top:.25rem;
}

form .panel-buttons {
    padding-left:0rem;
    padding-right:0rem;
}

form .button {
    width:50%;
    align-self: flex-end;
}

/* Preview */

.preview {
    padding-top: 7.5rem;
}

.preview .panel-image {
    padding-top:1rem;
    padding-bottom:1rem;
}

/* Terms & Privacy */

.terms,
.privacy {
    padding-top:7.5rem;
}

.terms h1,
.privacy h1 {
    padding-top: 2rem;
    padding-bottom:1rem;
}

.terms h2,
.privacy h2 {
    padding-top:2rem;
}

.terms h3,
.privacy h3 {
    padding-top:2rem;
}

/* Footer */

footer {
    background-color:#222;
    color:#999;
    padding-top:5rem;
    padding-bottom:5rem;
}

.footer-nav {
    border-left:1px solid #555;
    border-right:1px solid #555;
}

.footer-nav .column {
    border-left:1px solid #555;
    border-right: 1px solid #555;
    padding-bottom:2rem;
}

.footer-nav h6 {
    color:#c0c0c0;
    border-bottom: 2px solid #555;
    border-top:2px solid #555;
    text-transform: uppercase;
    padding:1rem;
    letter-spacing: .1rem;
    font-style:italic
}

.footer-nav ul {
    list-style: none;
    margin:0;
    padding:0;
    padding-top:.5rem;
}

.footer-nav li {
    padding:.25rem;
    padding-left:1rem;
}

.footer-nav a {
    color:#999;
    font-style: italic;
    text-decoration: none;
    transition: color .2s ease-in-out;
}

.footer-nav a:hover {
    color:#007dba
}

.copyright {
    text-align:center;
    padding-top:2rem;
    padding-bottom:.25rem;
}

.privacy-links {
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.privacy-links a {
    font-size: small;
    text-decoration: none;
    color:#999;
    font-style: italic;
    padding-left:.5rem;
    padding-right:.5rem;
    transition: color .2s ease-in-out;
}

.privacy-links a:hover {
    color:#007dba;
}


/* Media Queries */

@media(min-width:768px) {
    nav ul {
        flex-direction: row;
        justify-content: center;
    }
    .row {
        flex-direction:row;
    }
    .overlay-stripe {
        visibility: visible;
    }
    .panel-buttons {
        flex-direction: row;
    }
    .hero {
        padding-top:4rem;
        padding-bottom:2rem;
        background-size: unset;
        animation: pan 60s ease-in-out;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }
    .hero .row,
    .purchase .row {
        padding-top:0;
        padding-bottom:0;
        background-color:transparent;
        backdrop-filter:none;
    }
    .book {
        max-height:unset
    }
    .hero .title {
        display: flex;
        flex-direction: column;
        padding-bottom: 2rem;
    }
    .hero .panel-text {
        padding-left:2rem;
        padding-right:2rem;
    }
    .contents ul {
        columns: 2
    }
    .purchase {
        padding-top:5rem;
        padding-bottom:5rem;
    }
    .purchase .panel-buttons {
        padding-bottom:2rem;
    }
    .author .panel-image {
        padding-left:1.25rem;
        padding-top:1.25rem;
        padding-right:.25rem;
    }
}