html{
    min-width: 280px;
}

body{
    padding: 50px 0 0 0;
    color: #222;
}

a{
    text-decoration: none;
    color: #a81d1d;
}
    a:hover{
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        transition: all 0.2s linear;
        color: #691212;
    }
    a.more:after{
        content: '\A0\BB';
    }



/* Header */
[role="banner"]{
    background: #222 url(../img/header.png);
    border-bottom: 5px solid #FFF;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 10;
}
    [role="banner"] > .inner{
        max-width: 750px;
        margin: 0 auto;
        position: relative;
    }
    [role="banner"] h1{
        position: absolute;
        top: 13px;
        left: 15px;
        width: 94px;
        height: 36px;
        background: url(../img/logo.png);
    }
    [role="banner"] nav{
        position: absolute;
        top: 21px;
        right: 15px;
    }
        [role="banner"] nav li{
            float: left;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            margin-right: 40px;
        }
            [role="banner"] nav li:last-child{
                margin-right: 0;
            }
        [role="banner"] nav a{
            color: #BBB;

        }
            [role="banner"] nav a:hover{
                color: #FFF;
            }

    @media all and (max-width: 480px){
        [role="banner"] nav li:first-child{
            display: none;
        }
    }

    @media all and (max-width: 360px){
        [role="banner"]{
            height: 80px;
        }
            [role="banner"] nav{
                top: 53px;
                left: 20px;
            }
    }

#banner{
    position: fixed;
    top: 33px;
    right: -90px;
    background: url(../img/banner.png) no-repeat top;
    display: inline-block;
    padding: 11px 100px 10px;
    color: #FFF;
    font-size: 16px;
    font-weight: 700;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.66);
    -webkit-box-shadow: 0px 0px 10px 0px #000000;
    -moz-box-shadow: 0px 0px 10px 0px #000000;
    box-shadow: 0px 0px 10px 0px #000000;
    z-index: 11;
}

    @media all and (max-width: 1000px){
        #banner{
            display: none;
        }
    }

#egeaux{
    max-width: 370px;
    padding: 50px 340px 50px 0;
    margin: 0 auto;
    position: relative;
}
    #egeaux #app{
        position: absolute;
        top: 50px;
        right: -16px;
    }
    #egeaux h1{
        font-size: 60px;
        font-weight: 700;
    }
        #egeaux h1 em{
            text-transform: uppercase;
            font-size: 13px;
            font-weight: 900;
            color: #a81d1d;
            position: relative;
            top: -20px;
        }
    #egeaux h2{
        font-weight: 700;
        color: #a81d1d;
        font-size: 24px;
        margin: 24px 0 12px;
    }
    #egeaux p{
        font-size: 14px;
        color: #666;
        margin-top: 16px;
        line-height: 1.29;
    }
        #egeaux p strong{
            font-weight: 700;
            color: #333;
        }
        #egeaux p.intro{
            color: #666;
            font-size: 16px;
            margin: 15px 0 25px;
            line-height: 1.375;
        }
            #egeaux p.intro strong{
                color: #222;
            }
        #egeaux p.note{
            color: #333;
            font-size: 11px;
            line-height: 1.27;
            margin-top: 36px;
        }
    #egeaux li{
        text-indent: -5px;
        position: relative;
        left: 12px;
        padding-right: 12px;
        color: #222;
        font-size: 14px;
        line-height: 1.29;
        margin: 4px 0;
    }
        #egeaux li a{
            color: #333;
        }
            #egeaux li a:hover{
                color: #a81d1d;
            }
        #egeaux li:before{
            content: '\B7';
            font-weight: 900;
            color: #a81d1d;
            width: 5px;
            display: inline-block;
        }
    #egeaux abbr{
        color: #a81d1d;
    }
    #egeaux #tickets{
        background: rgb(178,44,50);
        background: -moz-linear-gradient(top, rgba(178,44,50,1) 0%, rgba(140,13,22,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,44,50,1)), color-stop(100%,rgba(140,13,22,1)));
        background: -webkit-linear-gradient(top, rgba(178,44,50,1) 0%,rgba(140,13,22,1) 100%);
        background: -o-linear-gradient(top, rgba(178,44,50,1) 0%,rgba(140,13,22,1) 100%);
        background: -ms-linear-gradient(top, rgba(178,44,50,1) 0%,rgba(140,13,22,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b22c32', endColorstr='#8c0d16',GradientType=0 );
        background: linear-gradient(top, rgba(178,44,50,1) 0%,rgba(140,13,22,1) 100%);
        display: inline-block;
        color: #FFF;
        margin-top: 12px;
        padding: 18px 26px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
        font-size: 24px;
        font-weight: 700;
        -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
        box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
        clear: both;
    }

    @media all and (max-width: 787px){
        #egeaux{
            padding: 50px 20px;
            max-width: 710px;
        }
        #egeaux #app{
            display: none;
        }
        #egeaux > section{
            width: 46%;
            float: left;
            padding-right: 4%;
            padding-bottom: 30px;
        }
        #egeaux .note{
            clear: both;
        }
    }

    @media all and (max-width: 480px){
        #egeaux > section{
            width: auto;
            float: none;
            padding: 0;
        }
        #egeaux h1{
            font-size: 48px;
        }
    }


#data{
    background: url(../img/data.png);
    background: url(../img/top_shadow.png) repeat-x top,
                url(../img/bottom_shadow.png) repeat-x bottom,
                url(../img/data.png);
    padding: 75px 0;
}
    #data > .inner{
        max-width: 530px;
        margin: 0 auto;
        background: #FFF;
        -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
        padding: 45px 60px;
        -moz-transform: rotate(2deg);
        -webkit-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg);
        position: relative;
        top: 10px;
    }
        #data > .inner:before,
        #data > .inner:after{
            content: '\A0';
            display: inline-block;
            width: 150px;
            height: 50px;
            background: rgba(0, 0, 0, 0.03);
            -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
            position: absolute;
            top: 0;
        }
        #data > .inner:before{
            left: 15px;
            top: -30px;
            -moz-transform: rotate(-5deg);
            -webkit-transform: rotate(-5deg);
            -o-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }
        #data > .inner:after{
            right: -14px;
            top: -30px;
            -moz-transform: rotate(3deg);
            -webkit-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            -ms-transform: rotate(3deg);
            transform: rotate(3deg);
        }
    #data h1{
        font-size: 30px;
        font-weight: 700;
    }
    #data h2{
        font-size: 18px;
        font-weight: 700;
        color: #a81d1d;
        margin: 18px 0 6px;
    }
    #data p{
        font-size: 14px;
        line-height: 1.5;
        color: #444;
    }

    @media all and (max-width: 787px){
        #data > .inner{
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        #data > .inner:after{
            right: 10px;
        }
    }

    @media all and (max-width: 480px){
        #data{
            padding: 35px 0 50px;
        }
            #data > .inner{
                padding: 0 20px;
                margin: inherit 15px;
                background: none;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                text-shadow: 1px 1px 0 #FFF !important;
            }
                #data > .inner:before{
                    display: none;
                }
                #data > .inner:after{
                    display: none;
                }
    }


#about{
    background: url(../img/about.png);
    color: #CCC;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
    padding: 50px 0;
}
    #about > .inner{
        max-width: 710px;
        margin: 0 auto;
    }
    #about h1{
        font-size: 30px;
        font-weight: 500;
        color: #FFF;
    }
    #about p{
        font-size: 16px;
        line-height: 1.375;
        color: #DDD;
        margin-top: 15px;
    }
    #about li{
        font-size: 12px;
        line-height: 1.43;
        color: #BBB;
        margin-top: 30px;
        width: 47.5%;
        margin-right: 5%;
        float: left;
        font-weight: 300;
    }
        #about li:nth-child(odd){
            clear: left;
        }
        #about li:nth-child(even){
            margin-right: 0;
        }
        #about li em{
            color: #DDD;
            font-weight: 500;
        }
        #about li strong{
            color: #FFF;
            font-weight: 700;
            text-transform: uppercase;
        }
        #about li a{
            color: #BBB;
            border-bottom: 1px dotted #444;
        }
            #about li a:hover{
                color: #FFF;
                border-bottom-color: #BBB;
            }

    @media all and (max-width: 787px){
        #about{
            padding-right: 20px;
            padding-left: 20px;
        }
            #about li{
                width: auto;
                float: none;
            }
    }


#contact{
    max-width: 530px;
    margin: 75px auto 0;
    background: #FFF;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
    padding: 45px 60px;
    -moz-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
    position: relative;
    top: 10px;
}
    #contact:before,
    #contact:after{
        content: '\A0';
        display: inline-block;
        width: 150px;
        height: 50px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 0;
    }
    #contact:before{
        left: 15px;
        top: -30px;
        -moz-transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    #contact:after{
        right: -14px;
        top: -30px;
        -moz-transform: rotate(3deg);
        -webkit-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    #contact h2{
        font-size: 30px;
        font-weight: 700;
        color: #222;
        margin-bottom: 12px;
    }
    #contact p{
        font-size: 14px;
        line-height: 1.5;
        color: #444;
    }
    #contact .facebook{
        background: url(../img/facebook.png) no-repeat;
    }
    #contact .twitter{
        background: url(../img/twitter.png) no-repeat;
    }
    #contact .icon{
        display: inline-block;
        width: 28px;
        height: 28px;
        margin: 12px 6px 0 0;
    }
    #contact p{
        margin: 6px 0 6px;
    }

    @media all and (max-width: 787px){
        #contact{
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        #contact:after{
            right: 10px;
        }
    }
    @media all and (max-width: 480px){
        #contact{
            padding: 25px 30px;
            margin-top: 45px;
        }
            #contact:before{
                display: none;
            }
            #contact:after{
                display: none;
            }
            #contact h2{
                font-size: 24px;
            }
    }


[role="contentinfo"]{
    background: url(../img/about.png);
    color: #CCC;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
    padding-top: 65px;
}
    [role="contentinfo"] > .inner{
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        max-width: 710px;
        padding: 25px 5px 15px;
        margin: 0 auto;
    }
    [role="contentinfo"] .fringe{
        display: inline-block;
        width: 86px;
        height: 45px;
        background: url(../img/fringe.png) no-repeat;
        margin-right: 24px;
        float: left;
        position: relative;
        top: -4px;
    }
    [role="contentinfo"] p{
        color: #AAA;
        font-size: 13px;
        line-height: 1.39;
    }

    @media all and (max-width: 780px){
        [role="contentinfo"]{
            padding: 25px 15px 15px;
        }
    }


/* Utility classes */

    /* Clearfix */
    .clearfix:before, .clearfix:after{
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    .clearfix:after{
        clear: both;
    }

    /* Image replacement */
    .ir{
        text-indent: -999em;
        overflow: hidden;
    }

    /* Hide elements visually and in screen readers */
    .gone{
        display: none;
        position: absolute;
        visibility: hidden;
    }

    /* Hide elements visually, allow in screen readers */
    .hidden{
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }