/* Responsive stylesheet A-side media v.2 release: 09-06-2015 by Cornee */

/* Desktop */
@media screen and (min-width: 1100px){

    /* Required hide/show classes for responsive */

    .hide-on-desktop {
        display: none;
        visibility: hidden;
    }

    /* Project styles*/

    /* Main navigation */

    /* Header */

    /* Elements */

    /* Footer */


}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1099px) {

    /* Required hide/show classes for responsive */

    .hide-on-tablet {
        display: none;
        visibility: hidden;
    }

    /* Container width required for responsive layout */

    .default-container-width {
        width: 96%;
    }

    /* Tablet responsive colums, can be used to overrule normal colums */

    .tablet-column-20{
        width: 17.61904761904762%;
    }

    .tablet-column-25 {
        width: 22.61904761904762%;
    }

    .tablet-column-33{
        width: 30.94904761904762%;
    }

    .tablet-column-40{
        width: 37.61904761904762%;
    }

    .tablet-column-50 {
        width: 47.61904761904762%;
    }

    .tablet-column-60{
        width: 57.61904761904762%;
    }

    .tablet-column-66{
        width: 64.2904761904762%;
    }

    .tablet-column-75 {
        width: 72.61904761904762%;
    }

    .tablet-column-80{
        width: 77.61904761904762%;
    }

    .tablet-column-100{
        width: 97.61904761904762%;
    }

    /* Project styles*/


    /* Fade effect styles */

    .fade-left{
        opacity: 1;
        left: 0px;
        position: relative;
    }

    .fade-right{
        opacity: 1;
        right: 0px;
        position: relative;
    }

    .fade-top{
        opacity: 1;
        top: 0px;
        position: relative;
    }

    .fade-bottom{
        opacity: 1;
        bottom: 0px;
        position: relative;
    }


    /* Elements */


    /* Footer */


}

/* Mobile */
@media screen and (max-width: 767px) {

    /* Required hide/show classes for responsive */

    .hide-on-mobile{
        display: none;
        visibility: hidden;
    }

    .show-on-mobile{
        display: block;
        visibility: visible;
    }

    /* Container width required for responsive layout */

    .default-container-width {
        width: 96%;
    }

    /* Responsive columns are all full width on mobile unless else defined*/

    .column-20, .column-25, .column-30, .column-33, .column-40, .column-50, .column-60, .column-66, .column-75, .column-80{
        width: 97.61904761904762%;
        margin: 0 1.19047619047619% 4.76190476190476% 1.19047619047619%;
    }

    .column-20-full, .column-25-full, .column-100-full{
        width: 100%;
    }

    /* Mobile responsive colums, can be used to overrule normal colums */

    .mobile-column-20{
        width: 17.61904761904762%;
    }

    .mobile-column-25 {
        width: 22.61904761904762%;
    }

    .mobile-column-33{
        width: 30.94904761904762%;
    }

    .mobile-column-40{
        width: 37.61904761904762%;
    }

    .mobile-column-50 {
        width: 47.61904761904762%;
    }

    .mobile-column-50-full{
        width: 50%;
    }

    .mobile-column-60{
        width: 57.61904761904762%;
    }

    .mobile-column-66{
        width: 64.2904761904762%;
    }

    .mobile-column-75 {
        width: 72.61904761904762%;
    }

    .mobile-column-80{
        width: 77.61904761904762%;
    }

    .mobile-column-100{
        width: 97.61904761904762%;
    }

    /* Project styles*/

    /* Main navigation */


    /* Header */


    /* Elements */

    /* Fade effect styles */

    .fade-left{
        opacity: 1;
        left: 0px;
        position: relative;
    }

    .fade-right{
        opacity: 1;
        right: 0px;
        position: relative;
    }

    .fade-top{
        opacity: 1;
        top: 0px;
        position: relative;
    }

    .fade-bottom{
        opacity: 1;
        bottom: 0px;
        position: relative;
    }

    /* Time info */

    .time-info{
        font-size: 30px;
    }

    .time-info-small{
        font-size: 25px;
    }

    .countdown-item{
        padding: 5px;
        margin-bottom: 10px;
    }

    .timer-time{
        font-size: 50px;
    }

    .timer-name{
        font-size: 16px;
    }

    h1, h2, h3{
        font-size: 30px;
    }

    /* Guests */

    /* Footer */

}