/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Jérémy Maas - Graphisterie Générale
   ========================================================================== */

@font-face {
    font-family: 'lobster_1.3regular';
    src: url('fonts/lobster_1.3-webfont.eot');
    src: url('fonts/lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lobster_1.3-webfont.woff') format('woff'),
         url('fonts/lobster_1.3-webfont.ttf') format('truetype'),
         url('fonts/lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { background: #000206; font-family: 'Raleway', sans-serif; color: white; font-size: 14px; }

nav { position: fixed; left: 50px; z-index: 1000; }
nav ul { list-style: none; }
nav ul li { margin: 0 0 15px 0; }
nav ul li a { display: block; width: 10px; height: 10px; border-radius: 10px; background: rgba(255,255,255,0.6); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4); }
nav ul li a.current { background: rgba(181,18,23,0.6); }

.slide { width: 100%; }

a, .red { color: rgb(181,18,23); }

.text { background: rgba(0,13,38,0.85); padding: 30px 50px 40px 50px; width: 390px; position: absolute; z-index: 500; border-radius: 10px; }

h1 { margin: 0; padding: 0 0 25px 0; font-size: 18px; font-weight: 700; text-transform: uppercase; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); }
h2 { font-family: 'lobster_1.3regular'; font-size: 50px; font-weight: normal; margin-top: 0; padding-top: 0; }

#un { position: relative; height: 1060px; background: url("../img/bg_01.jpg") no-repeat 50% 0px fixed; }
#intro { height: 730px; text-align: center; filter: dropshadow(color=#000000, offx=0, offy=0); }

#deux { position: relative; height: 1060px; background: url("../img/bg_02.jpg") no-repeat 50% 0px fixed; }
.bazzoka { width: 100%; height: 1060px; background: url("../img/bazzoka.png") no-repeat 50% 0px fixed; position: absolute; top: 0; left: 0; z-index: 1; }
#deux .text { right: 150px; }
#deux .pict { left: -25px; top: 36px; }

#trois { position: relative; height: 1060px; background: url("../img/bg_03.jpg") no-repeat 50% 0px fixed; }
.gillet { width: 100%; height: 1060px; background: url("../img/gillet.png") no-repeat 50% 0px fixed; position: absolute; top: 0; left: 0; z-index: 1; }
#trois .text { left: 150px; }
#trois .pict { left: 330px; top: 25px; }

#quatre { position: relative; height: 1060px; background: url("../img/bg_04.jpg") no-repeat 50% 0px fixed; }
#quatre .text { right: 150px; }
.bar { width: 100%; height: 1060px; background: url("../img/bar_front.png") no-repeat 50% 0px fixed; position: absolute; top: 0; left: 0; z-index: 1; }
.fille { width: 100%; height: 1060px; background: url("../img/fille_front.png") no-repeat 50% 0px fixed; position: absolute; top: 0; left: 0; z-index: 2; }
.bgbleu { width: 100%; height: 1060px; background: url("../img/bleu_droit.png") no-repeat 50% 0px fixed; position: absolute; top: 0; left: 0; z-index: 3; }
#quatre .pict { left: 275px; top: 20px; }

#gal { width: 390px; height: 70px; }

#cinq { position: relative; height: 1060px; background: url("../img/bg_05.jpg") no-repeat 50% 0px fixed; }
#cinq .text { left: 150px; }
#cinq .pict { left: 13px; top: -4px; }

#six { position: relative; height: 1060px; background: url("../img/bg_06.jpg") no-repeat 50% 0px fixed; }
#six .text { left: 150px; }
#six .pict { left: 355px; top: 30px; }

#sept { color: #6e7c97; position: relative; height: 10px !important; text-align: center; font-size: 10px; padding: 9px 0 10px 0; }
#sept a { text-decoration: none; color: #6e7c97; }

#un.iphone { position: relative; height: 1060px; background: url("../img/bg_01.jpg") no-repeat center center; }
#deux.iphone { position: relative; height: 1060px; background: url("../img/bg_02.jpg") no-repeat center center; }
#trois.iphone { position: relative; height: 1060px; background: url("../img/bg_03.jpg") no-repeat center center; }
#quatre.iphone { position: relative; height: 1060px; background: url("../img/bg_04.jpg") no-repeat center center; }
#cinq.iphone { position: relative; height: 1060px; background: url("../img/bg_05.jpg") no-repeat center center; }
#six.iphone { position: relative; height: 1060px; background: url("../img/bg_06.jpg") no-repeat center center; }
.bar.iphone { width: 100%; height: 1060px; background: url("../img/bar_front.png") no-repeat center center; position: absolute; top: 0; left: 0; z-index: 1; }
.fille.iphone  { width: 100%; height: 1060px; background: url("../img/fille_front.png") no-repeat center center; position: absolute; top: 0; left: 0; z-index: 2; }
.bgbleu.iphone  { width: 100%; height: 1060px; background: url("../img/bleu_droit.png") no-repeat center center; position: absolute; top: 0; left: 0; z-index: 3; }
.text.iphone { left: 50% !important; margin-left: -245px !important; right: auto !important; }

.picto, .pict { position: absolute; }

.frites { width: 350px; height: 960px; background: url("../img/frites.png") no-repeat 0px 0px; top: 100px; right: 350px; background-size: 350px; }
.currywurst { width: 350px; height: 1060px; background: url("../img/currywurst.png") no-repeat 0px 0px; top: 0; right: 50px; background-size: 350px; }
.hotdog { width: 250px; height: 860px; background: url("../img/hotdog.png") no-repeat 0px 0px; top: 200px; right: 550px; background-size: 250px;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: url(blur1.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');
}
.sandwich { width: 250px; height: 910px; background: url("../img/sandwich.png") no-repeat 0px 0px; top: 150px; right: 275px; background-size: 250px;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: url(blur1.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');
}
.porchetta { width: 250px; height: 935px; background: url("../img/porchetta.png") no-repeat 0px 0px; top: 125px; right: 25px; background-size: 250px;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: url(blur1.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');
}
.riz { width: 250px; height: 760px; background: url("../img/riz.png") no-repeat 0px 0px; top: 300px; right: 200px; background-size: 250px;
	filter: blur(1px);
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: url(blur1.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');
}
.glace { width: 150px; height: 760px; background: url("../img/glace.png") no-repeat 0px 0px; top: 300px; right: 300px; background-size: 150px;
	filter: blur(3px);
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: url(blur3.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
.tworinger { width: 150px; height: 860px; background: url("../img/tworinger.png") no-repeat 0px 0px; top: 200px; right: 400px; background-size: 150px;
	filter: blur(3px);
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: url(blur3.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
.pasta { width: 150px; height: 810px; background: url("../img/pates.png") no-repeat 0px 0px; top: 250px; right: 150px; background-size: 150px;
	filter: blur(3px);
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: url(blur3.svg#blur);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}


footer { position: fixed; z-index: 10000; width: 100%; height: 0; display: none; color: #6e7c97; text-align: center; font-size: 10px; padding: 9px 0 0 0; background: #000206; bottom: 0; left: 0; }
footer a { text-decoration: none; color: #6e7c97; }


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {



}

@media only screen and (min-width: 768px) {



}

@media only screen and (min-width: 1140px) {



}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}