/*---------------------+
 | Site: C82           |
 | Part: Metra tickets |
 +---------------------*/

/* Imports
=====================================================================*/
@import url(//fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Open+Sans:400,400italic,700,700italic);
@import url(/styles/fontawesome.css);
@import url(/styles/reset.css);


/* Fonts
=====================================================================*/
* { box-sizing: border-box; }
body, .tickets h2 { font-family: Lora, Georgia, "Times New Roman", Times, serif; }
#footer, #sharing, .tickets { font-family: "Open Sans", Verdana, Arial, sans-serif; }


/* Basics
=====================================================================*/
a { color: #36c; text-decoration: none; }
a:hover { text-decoration: underline; }
body { font-size: 18px; line-height: 1.5; padding: 80px 7% 40px; }
em { font-style: italic; }
h1 { font-size: 36px; font-weight: bold; line-height: 1.15; margin-bottom: 0.45em; }
h2 { font-size: 30px; line-height: 1.15;  }
hr { background: #e5e6e7; border: 0; clear: both; color: #e5e6e7; height: 1px; margin: 1em 0; }
img { max-width: 100%; }
p { margin-bottom: 1.5em; }
strong { font-weight: bold; }


/* Content
=====================================================================*/
.clear { clear: both; }
#sharing { float: right; }

/* Footer */
#footer { font-size: 12px; }

/* Intro */
#intro { font-size: 23px; }
#intro p { margin-bottom: 0.5em; }

/* Logo */
#logo { margin-bottom: 1rem; max-width: 242px; }

/* Muted text */
.mute { color: #666; font-size: 14px; }

/* Tickets */
.tickets a { display: block; transition: all 0.1s ease-in-out; }

.tickets a:hover {
    box-shadow:
        0px 0.6px 0.6px rgba(0, 0, 0, 0.02),
        0px 1.4px 1.5px rgba(0, 0, 0, 0.028),
        0px 2.6px 2.9px rgba(0, 0, 0, 0.035),
        0px 4.7px 5.1px rgba(0, 0, 0, 0.042),
        0px 8.8px 9.6px rgba(0, 0, 0, 0.05),
        0px 21px 23px rgba(0, 0, 0, 0.07)
    ;
    text-decoration: none;
    transform: scale(1.2);
}

.tickets h2 { border-top: 1px solid #ddd; margin-bottom: 0.5rem; padding-top: 1rem; }

.tickets img {
    display: block;
    margin: 0 auto;
    max-height: 250px;
    max-width: 200px;
    object-fit: contain;
    object-position: 50% 50%;
    padding: 10px;
    width: 100%;
}

.tickets li { display: flex; flex-direction: column; justify-content: center; margin: 0; }

.tickets ul {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin: 0 0 3rem;
}

/* Totals */
#totals {
    border-top: 1px solid #ddd;
    border-width: 1px 0;
    display: flex;
    list-style: none;
    margin: 0 0 30px;
    overflow: hidden;
    padding: 30px 0;
}

#totals li { flex: 0 0 auto; text-align: center; width: 33.33%; }
#totals h2 { font-size: 60px; }
#totals p { margin: 0; }


/* Widths
=====================================================================*/

@media screen and (max-width: 900px) {
    /* Basics */
    body { padding-top: 40px; }
    
    /* Content */
        /* Intro */
        #intro { font-size: 1em; }
}

@media screen and (max-width: 500px) {
    /* Basics */
    body { font-size: 14px; padding: 15px; }
    
    /* Content */
        /* Tickets */
        .tickets img { max-height: 150px; max-width: 100px; padding: 5px; }
        
        .tickets ul {
            gap: 0.5rem;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        }
        
        /* Totals */
        #totals { display: block; padding-bottom: 0; }
        #totals li { margin-bottom: 1em; width: auto; }
        #totals h2 { font-size: 30px; }
}