/*
    Vapour Table Tennis Style Sheet
    Filename: styles.css

    Author: Lim Choong Kai Joshua
    Adm No: 1828034
    Class:  DISM/FT/1A/22
    Date:   10/11/2018

*/

/* reset styles */
html {
    font-size: 16px;
}
a, article, body, div, fieldset, figure, figcaption, footer, header,
h1, h2, h3, iframe, img, input, label, legend, li, nav, p, textarea, ul {
    border: 0;
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
    width: auto;
}
/* body */
body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    background: url("images/table-tennis-3721931_1920.jpg");
    background-position: 100% 70%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}
p {
    font-size: 2em;
}
.container {
    min-height: 100vh;
    position: relative;
    overflow: auto;
}

/* skip navigation link */
p.skipnavigation a {
    position: absolute;
    left: -10000px;
    color: rgb(255, 255, 255);
}
p.skipnavigation a:focus {
    top: 0.4em;
    left: auto;
    right: 0.4em;
    z-index: 2;
}

/* header */
h1 {
    text-align: center;
    font-family: 'Roboto Slab', 'Liberation Serif', 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 4em;
    color: rgb(240, 248, 255);
    padding: 2em 1em;
}
h2 {
    text-align: center;
    font-family: 'Roboto Slab', 'Liberation Serif', 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 2em;
    color: rgb(240, 248, 255);
    padding: 0.5em 1em;
}
h3 {
    text-align: center;
    font-family: 'Roboto Slab', 'Liberation Serif', 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 2em;
    color: rgb(240, 248, 255);
    padding: 0.5em 1em;
}

/* navigation bar */
/* make navigation bar fixed at the top */
nav.sitenavigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: rgb(44, 98, 150);
    z-index: 100;
}
div.navigation-menu-button {
    float: right;
    margin: 0.5em 0.5em 0 0;
    display: none;
}
nav.sitenavigation li {
    font-size: 1.5em;
    display: inline-block;
    padding: 1em 0;
    position: relative;
    right: 3em;
}
nav.sitenavigation a {
    padding: 0.6em 1em;
}
/* change color and bg color when hovering */
nav.sitenavigation a:link {
    text-decoration: none;
    color: rgb(255, 255, 255);
}
nav.sitenavigation a:visited {
    color: rgb(255, 255, 255)
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
/* logo */
.sitenavigation img{
    float: left;
}
.sitenavigation figure a {
    float: left;
}
.sitenavigation figure a:hover, nav.sitenavigation figure a:focus {
    background-color: rgb(44, 98, 150);
}

/* offers */
/* make offers boxes always look the same even if visited before */
.offers a:visited {
    color: rgb(0, 0, 0);
}
.offers a:link {
    color: rgb(0, 0, 0);
}

/* blade navigation */
nav.bladenavigation {
    text-align: center;
    overflow: auto;
    margin-bottom: 2.8em;
}
nav.bladenavigation figcaption {
    font-size: 1.5em;
    text-align: center;
    margin-top: 1em;
}
/* change color and bg color when hovering */
nav.bladenavigation a:link {
    text-decoration: none;
    color: rgb(255, 255, 255);
}
nav.bladenavigation a:visited {
    color: rgb(255, 255, 255)
}
nav.bladenavigation a:hover, nav.bladenavigation a:focus {
    color: rgb(255, 184, 42);
}
/* layout of pictures */
nav.bladenavigation figure.shakehand {
    float: left;
    padding: 3em 0;
    width: 50%;
}
nav.bladenavigation figure.penhold {
    float: right;
    padding: 3em 0;
    width: 50%;
}

/* article content */
article div {
    margin: 5em auto auto auto;
    padding: 2em 0.5em;
    text-align: center;
    color: rgb(227, 235, 241);
}
article div p {
    line-height: 1.4em;
}

article h3 {
    font-size: 2em;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: normal;
}
/* form styles */
form {
   max-width: 720px;
   padding: 10px;
   margin: auto;
}
.form-instructions {
   color: rgb(255, 255, 255);
   font-size: 1.5em;
   text-align: center;
   font-family: 'Roboto Slab', 'Liberation Serif', 'Times New Roman', Times, serif;
   margin-bottom: 1em;
}
/* contact container */
.contact {
    margin-bottom: 2.8em;
    overflow: auto;
}
#responsetime {
    font-family: 'Roboto Slab', 'Liberation Serif', 'Times New Roman', Times, serif;
    text-align: center;
    color: rgb(255, 255, 255);
    margin: 1em auto;
    font-size: 1.6em;
}

/* fieldset styles */
fieldset {
   margin-bottom: 0.8em;
}
legend {
   font-size: 1.25em;
}
.reserveinfo {
   position: relative;
}
.submitbutton {
   display: none;
}

/* field styles */
input, textarea {
   padding: 0.2em;
   font-size: 1em;
   display: block;
}
.contactinfo input, .additionalinfo input {
   width: 100%;
   margin-bottom: 0.6em;
}
textarea {
   width: 100%;
   height: auto;
}
#submit {
   border: none;
   padding: 0.4em 0.6em;
   margin: 0 auto;
   background-color: rgb(44, 98, 150);
   font-size: 1.25em;
   color: rgb(255, 255, 255);
   border-radius: 5px;
}

/* label styles */
label {
   margin: 0.8em 0;
   font-size: 1em;
   line-height: 1.6em;
   font-weight: bold;
   color: rgb(255, 255, 255)
}

/* feedback preview section */
.feedback-preview {
   max-width: 720px;
   padding: 10px;
   margin: 2em auto;
   font-size: 0.8em;
   background-color: rgb(255, 255, 255);
   display: none;
   color: rgb(0, 0, 0);
}
.show {
   display: block;
}
.feedback-preview p {
   margin-bottom: 0.3em;
   color: rgb(0, 0, 0);
}
.table-row {
   display: table-row;
}
.table-row div:first-child {
   font-weight: bold;
}
.table-cell {
   padding: 0 0.2em;
   display: table-cell;
   width: 50%;
}
.feedback-content {
   padding: 0.4em 0.2em 0;
}

/* results */
.results {
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 0.8em;
}
.results p {
    margin: 3em;
}
.results a:visited {
    color: rgb(255, 255, 255);
}
.results a:hover {
    color: rgb(44, 98, 150);
}
/* about us */
article.about {
    max-width: 1280px;
    margin: auto;
    text-align: center;
    color: rgb(227, 235, 241);
    margin-bottom: 2em;
}
article p {
    padding: 0.6em;
    line-height: 1.3em;
    max-width: 1280px;
    margin: auto;
    text-align: center;
    color: rgb(227, 235, 241);
}
.slider-wrapper {
    margin: 3em auto;
    max-width: 960px;
}
.instagram {
    text-align: center;
    color: rgb(227, 235, 241);
    margin-bottom: 4em;
}
.instagram i {
    margin-top: 0.3em;
    color: rgb(227, 235, 241);
    text-align: center;
}
/* short write ups */
article.shakehandarticle, article.penholdarticle, article.rubbersarticle {
    max-width: 1280px;
    margin: 1em auto;
    text-align: center;
    color: rgb(227, 235, 241);
}
article.shakehandarticle p, article.penholdarticle p, article.rubbersarticle p {
    padding: 0.6em;
    line-height: 1.3em;
}
/* containers with images */
.bladescontainer, .rubberscontainer, .offers {
    max-width: 80%;
    margin: 7em auto;
    padding-bottom: 3em;
    text-align: center;
    background-color: rgb(255, 255, 255);
    overflow: auto;
}
.bladescontainer img{
    padding: 3em;
}
.row {
    padding: 4em 2em;
    clear: both;
}
.leftcolumn {
    padding: 3em;
    float: left;
    width: 40%;
}
.rightcolumn {
    padding: 3em;
    float: right;
    width: 40%;
}
.rubberscontainer .leftcolumn, .rubberscontainer .rightcolumn {
    padding: 1em;
}
/* details about items */
.model {
    font-size: 2em;
    margin-bottom: 1em;
}
.specs {
    font-size: 1.46em;
    text-align: left;
    line-height: 2em;
}
.accent {
    font-style: italic;
}
.offerprice {
    font-size: 1.5em;
    color: rgb(255, 0, 0);
}
/* short write-up on tenergy */
.rubberscontainer div.tenergy p {
    padding: 1em;
    font-size: 1.4em;
    line-height: 1.3em;
    color: rgb(0, 0, 0);
}
.rubberscontainer article {
    padding: 1.2em;
}
.rubberscontainer iframe {
    padding-top: 1em;
}
/* animation */
@keyframes fade {
    from {box-shadow: none;}
    to {box-shadow: 0px 0px 30px 5px;}
}
.leftcolumn:hover {
    animation-name: fade;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.rightcolumn:hover {
    animation-name: fade;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

/* manual position adjustments for various items */
#shaker3c2 figure{
    margin-top: 1em;
    margin-bottom: 2em;
}
#shaker2c1 figure {
    margin-bottom: 1.5em;
}
#shaker4c1 figure {
    margin-bottom: 2em;
}
#offerr2c1 figure {
    margin-top: 2em;
    margin-bottom: 2em;
}
#penholdr2c1 figure {
    margin-bottom: 1em;
}
#offer4 figure {
    margin-bottom: 0.8em;
}
/* footer */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.8em;
    padding: 1em 0;
    font-size: 0.6em;
    background-color: rgb(44, 98, 150);
    color: rgb(255, 255, 255);
    text-align: center;
}
.smallfooter {
    display: none;
}

/* 1280px breakpoints */
@media screen and (min-width: 1280px) {
    .container {
        max-width: 1280px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1279px) {
    .row {
        padding: 0;
    }
    .leftcolumn {
        padding: 2em 0 2em 0;
        float: none;
        width: auto;
    }
    .rightcolumn {
        padding: 2em 0 2em 0;
        float: none;
        width: auto;
    }
    /* details about items */
    .specs {
        font-size: 1.46em;
        text-align: center;
        line-height: 2em;
    }
    .offers a {
        text-decoration: none;
    }
    .bladescontainer img{
        padding-bottom: 3em;
    }
    /* manual position adjustments for various items */
    #shaker3c2 figure{
        margin: 0;
    }
    #shaker2c1 figure {
        margin: 0;
    }
    #shaker4c1 figure {
        margin: 0;
    }
    #offerr2c1 figure {
        margin: 0;
    }
    #penholdr2c1 figure {
        margin: 0;
    }
    #offer4 figure {
        margin: 0;
    }
}

/* 1000px breakpoint */
@media screen and (max-width: 1000px) {
    div.navigation-menu-button {
        display: block;
    }
    nav.sitenavigation ul {
        display: none;
        z-index: 101;
        position: absolute;
        right: 0;
        top: 100%;
        width: 150px;
        background-color: rgb(44, 98, 150);
    }
    nav.sitenavigation li {
        padding: 1em;
        position: relative;
        right: 0;
    }
    nav.sitenavigation a {
        padding: 0;
    }
    nav.sitenavigation figure a {
        padding: 0.6em 1em;
    }
}
/* 720px breakpoint */
@media screen and (max-width: 720px) {
    article div {
        margin: 3em auto auto auto;
    }
    .bladescontainer, .rubberscontainer, .offers {
        max-width: 90%;
        margin: 4em auto;
        padding-bottom: 3em;
    }
    /* remove write ups */
    article.shakehandarticle p, article.penholdarticle p, article.rubbersarticle p {
        display: none;
    }
    .rubberscontainer .tenergy {
        display: none;
    }
    .rubberscontainer iframe {
        display: none;
    }
    /* blade navigation pictures */
    nav.bladenavigation figure.shakehand {
        float: none;
        padding: 3em 0;
        width: auto;
    }
    nav.bladenavigation figure.penhold {
        float: none;
        padding: 3em 0;
        width: auto;
    }
    /* remove nivo slider */
    .slider-wrapper {
        display: none;
    }
    #introgallery {
        display: none;
    }
    /* footer */
    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2.8em;
        padding: 1em 0;
        font-size: 0.45em;
        background-color: rgb(44, 98, 150);
        color: rgb(255, 255, 255);
        text-align: center;
    }
    /* reduce size of about us text */
    .about p {
        font-size: 1.5em;
    }
    p.about {
        font-size: 1.5em;
    }

}

/* 680px breakpoint */
@media screen and (max-width: 680px) {
    .feedback-preview {
        display: none;
    }
}
/* 480px breakpoint */
@media screen and (max-width: 480px) {
    /* remove blade pictures */
    .bladescontainer figure {
        display: none;
    }
    .rubberscontainer figure {
        display: none;
    }
    .offers figure {
        display: none;
    }
    .normalfooter {
        display: none;
    }
    .smallfooter {
        display: block;
    }
}


/* print styles */
@media print {
    body, h1, article, footer {
       color: rgb(0,0,0);
       background: rgb(255,255,255);
    }
    body {
       max-width: 100%;
    }
    nav {
       display: none;
    }
}
@page {
    margin: 0.75in;
}