/* Font's used on the invitation: Futura, Sackers Italian */
html,h1,p, body {
    margin: 0;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif; 
}

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 5% 90% 5%;
    grid-template-columns: 5% 90% 5%;
    width: 100vw;
    min-width: 100vw;
}

.heading {
    padding: 10px 20px;
    text-transform: uppercase;
}

#title {
    font-size: 6vw;
    font-weight: 800;
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    font-family: 'Parisienne', cursive;
    text-transform: none;
    text-align: center;
    z-index: 10;
    color: black;
 }

#subtitle {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-grid-columns: 150px 10px 150px;
    grid-template-columns: repeat(2, 150px);
    grid-row-gap: 20px;
    grid-column-gap: 10px;
}

#event-time {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
}

/* Appleton tower easter egg */
#appleton-tower {
    display: none;
    width: 50% !important;
    /* center in div */
    margin: auto;
}

#event-time:hover #appleton-tower {
    display: block;
}

#event-time:hover #timer {
    display: none;
}

#subtitle > * {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}

/* One line for larger screens */
@media only screen and (min-width: 768px) {
    #subtitle {
        -ms-grid-columns: (300px)[3];
        grid-template-columns: repeat(3, 300px);
    }

    #event-time {
        -ms-grid-column: 3;
        grid-column: 3;
        height: inherit;
    }

    #subtitle > * {
        height: 210px;
    }
}

#subtitle img {
    width: 100%;
}

#subtitle .text-top {
    /* Gold Foil Effect */
    color:    #D5AD6D; /*if no support for background-clip*/
    background: 
        -webkit-linear-gradient(transparent, transparent),
        -webkit-linear-gradient(
            top, 
            rgba(213,173,109,1) 0%, 
            rgba(213,173,109,1) 26%, 
            rgba(226,186,120,1) 35%, 
            rgba(163,126,67,1) 45%, 
            rgba(145,112,59,1) 61%, 
            rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent, transparent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#event-time {
    vertical-align: middle;
}

.img-banner {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / span 3;
}

.img-banner img {
    width: 100vw;
}

.subsection-body {
    padding: 20px;
}

#content {
    text-align: center;
    display: -ms-grid;
    display: grid;
    grid-column: 2;
    -ms-grid-column: 2;
}

#timeline {
    display: -ms-grid;
    display: grid;
    row-gap: 20px;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

#timeline .cell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#timeline img {
    margin: 5px;
    width: 30px;
}

#general .subsection-body {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#general .subsection-body .title {
    -ms-grid-row: 1;
    grid-row: 1;
}

#general .subsection-body .description {
    -ms-grid-row: 3;
    grid-row: 3;
    font-size: small;
    text-align: justify;
}

#how-to-get-there {
    text-align: center;
}

#transport-options {
    display: -ms-grid;
    display: grid;
    grid-gap: 20px;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

#transport-options .title {
    -ms-grid-row: 1;
    grid-row: 1;
}

#transport-options .description {
    -ms-grid-row: 3;
    grid-row: 3;
    font-size: small;
    text-align: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#transport-options img {
    margin: 5px;
    width: 30px;
}

#gift-list {
    text-align: center;
}

#img-wedding-shop {
     width: 30vw;
}

#what-to-do-in-edinburgh {
    text-align: center;
}

#what-to-do-in-edinburgh-suggestions {
    display: -ms-grid;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

#what-to-do-in-edinburgh-suggestions .title {
    -ms-grid-row: 1;
    grid-row: 1;
}

#what-to-do-in-edinburgh-suggestions .description {
    -ms-grid-row: 3;
    grid-row: 3;
    font-size: small;
    text-align: justify;
}

/* Style the tab */
.tab {
    overflow: hidden;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
  
/* Style the buttons that are used to open the tab content */
.tab button {
    font-size: large;
    text-transform: uppercase;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif; 
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}
  
.tabcontent {
    display: none;
    padding: 6px 0 12px 0;
}

.tablinks .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 50px;
}

.tablinks .gold-foil-border-wrap {
    display: none;
}

.tablinks.active .gold-foil-border-wrap {
    display: block !important;
}

.tablinks img {
    margin: 5px;
}

.gold-foil-border-wrap {
    background: -webkit-gradient(
            linear, 
            left top, right top, 
            from(rgba(213,173,109,1)), 
            color-stop(26%, rgba(213,173,109,1)), 
            color-stop(35%, rgba(226,186,120,1)), 
            color-stop(45%, rgba(163,126,67,1)), 
            color-stop(61%, rgba(145,112,59,1)), 
            to(rgba(213,173,109,1)));
    background: -o-linear-gradient(
            left, 
            rgba(213,173,109,1) 0%, 
            rgba(213,173,109,1) 26%, 
            rgba(226,186,120,1) 35%, 
            rgba(163,126,67,1) 45%, 
            rgba(145,112,59,1) 61%, 
            rgba(213,173,109,1) 100%);
    background: linear-gradient(
            to right, 
            rgba(213,173,109,1) 0%, 
            rgba(213,173,109,1) 26%, 
            rgba(226,186,120,1) 35%, 
            rgba(163,126,67,1) 45%, 
            rgba(145,112,59,1) 61%, 
            rgba(213,173,109,1) 100%);
    padding-top: 5px;
  }
  
.gold-foil-border {
    background: white;
}

#img-castle {
    width: 100%;
    margin-bottom: 20px;
}

/* No horizontal rule for larger screens */
@media only screen and (min-width: 768px) {
    hr {
        display: none;
    }
}

/* Set up classes for CSS grid rows and columns as 
   these need to be applied explicitly in IE */
.row1 {
    grid-row: 1;
    -ms-grid-row: 1;
}
.row2 {
    grid-row: 2;
    -ms-grid-row: 2;
}
.row3 {
    grid-row: 3;
    -ms-grid-row: 3;
}
.row4 {
    grid-row: 4;
    -ms-grid-row: 4;
}

.column1 {
    -ms-grid-column: 1;
}
.column2 {
    -ms-grid-column: 2;
}
.column3 {
    -ms-grid-column: 3;
}
.column4 {
    -ms-grid-column: 4;
}
.column5 {
    -ms-grid-column: 5;
}
.column6 {
    -ms-grid-column: 6;
}

/* Column gap doesn't work in IE so here is a workaround */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    #general .subsection-body > div+div {
        padding-left: 10px;
    }

    #transport-options > div+div {
        padding-left: 10px;
    }

    #what-to-do-in-edinburgh-suggestions > div+div {
        padding-left: 10px;
    }
}