@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Roboto);

html, body {
    margin:0;
    padding:0;
    font-family: 'Raleway', sans-serif;
    font-size:14px;
    color:#231F20;
    background:#FFF;
    overflow-x:hidden;
}

.left { float:left; }
.right { float:right; }
.light { font-weight:300; }
.bold { font-weight:700; }
.justify { text-align:justify; }
.green, .green:hover { color:#83b441 !important; }
.pink, .pink:hover {	color:#C60B46 !important; }
.pink2, .pink2:hover {	color:#C92E92 !important; }
.red, .red:hover { color:#E02224; }
.orange, .orange:hover { color:#E87126; }
.dark, .dark:hover { color:#231F20; }
.big { font-size:24px; }
.small { font-size:12px; }
.verysmall { font-size:10px; }

.philo-h2{
    font-size: 14px;
    margin: 0;
}

.philo-h2:last-of-type{
    margin-bottom: 10px;
}
a {
    color:#83b441;
    text-decoration:underline;
    cursor:pointer;
}

a:hover {
    color:#83b441;
    text-decoration:none;
}



#header {
    background:#83b441 url(../img/header_bottom.jpg) bottom center repeat-x;
    min-height:37px;
}

#branding {
    float:left;
    line-height:37px;
}

#branding, #branding a {
    color:#FFF;
}

#branding a {
    text-decoration:underline;
}

#branding a:hover {
    text-decoration:none;
}

#menulng {
    float:right;
    width:98px;
    height:36px;
    background:url(../img/menulng.png) top left no-repeat;
    text-align:center;
    line-height:37px;
    font-size:10px;
    text-transform:uppercase;
}

#menulng, #menulng a {
    color:#83B341;
}

#menulng a {
    font-size:12px;
}

#logo {
    margin:25px 0 25px -5px;
    float:left;
}

#menu {
    float:left;
    margin:50px 0 0 55px;
    text-transform:uppercase;
}

@media (max-width: 480px) {
    #menu {
        margin-top: 30px;
    }

    #logo img {
        width: 100px;
    }
}


#menu li {
    line-height:10px;
    white-space:nowrap;
    padding: 0 15px;
    color:#83B341;
    font-size:14px;
}

#menu li:before {
    content:"|";
    position:absolute;
    left:-2px;
    top:9px;
}

#menu li:first-child:before {
    content:"";
}

#menu li.active a {
    border-bottom:3px solid #83B341;
    color:#83B341;
    font-weight:bold;
}

#menu li.active a:hover {
    text-decoration:none;
}

.nav > li > a {
    padding: 10px 0;
    color:#83B341;
    text-decoration:none;
}
.nav-justified > li {
    width:auto;
}
.nav > li > a:hover {
    background:none;
    text-decoration:underline;
}

.navbar {
    min-height:inherit;
    margin-bottom:0;
}

.navbar-default {
    background:none;
    border: none;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border:none;
}

.navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color:#83B341
}

.navbar-default .navbar-toggle .icon-bar {
    background-color:#FFF;
}

@media (max-width: 768px) {
    #menu {
        float:right;
    }
    #menu li {
        padding:0;
    }
    #menu li a {
        text-align:right;
    }
    #menu li:before {
        content:"";
    }
}

#footer {
    border-top:1px solid #b8d492;
    border-bottom: 8px solid #83b441;
    padding:5px 0 0 0;
    font-weight:300;
    font-size:12px;
    white-space:nowrap;
}

#footer p#footerleft {
    text-align:left;
}

#footer p#social {
    text-align:center;
}

#footer p#social a {
    margin:0 5px;
}

#footer p#copyright {
    text-align:right;
}

@media (max-width: 768px) {
    #footer p#footerleft {
        text-align:center;
    }
    #footer p#copyright {
        text-align:center;
    }
    #footer p#social {
        margin-top:-20px;
        margin-bottom:-15px;
    }
}

#banner-wrapper {
    display:table;
    width:100%;
    margin-bottom:5px;
}

#banner {
    height:192px;
    background:url(../img/tao-banner.jpg) top center no-repeat;
    background-size:cover;
    text-align:center;
    color:#FFF;
    font-weight:300;
    font-size:52px;
    line-height:55px;
    text-shadow: 2px 2px 8px #83b441;
    display:table-cell;
    vertical-align:middle;
    white-space:nowrap;
}
#bannershut {
    height:192px;
    background:url(../img/tao-bannershut.jpg) top center no-repeat;
    background-size:cover;
    text-align:center;
    color:#FFF;
    font-weight:300;
    font-size:52px;
    line-height:55px;
    text-shadow: 2px 2px 8px #83b441;
    display:table-cell;
    vertical-align:middle;
    white-space:nowrap;
}

#banner a, a.prez-more, #mainslide a, #knokkeslide a {
    display:inline-block;
    background:#FFF url(../img/banner_arrow.png) right 15px no-repeat;
    border-radius:6px;
    text-transform:uppercase;
    text-shadow:none;
    color:#83b441;
    padding:10px 23px 10px 13px;
    font-size:16px;
    line-height:20px;
    font-weight:400;
    box-shadow: 1px 1px 12px #555;
    text-decoration:none;
}

@media (max-width: 768px) {
    #banner a, #mainslide a, #knokkeslide a {
        font-size:12px;
        white-space:nowrap;
    }
}

a.prez-more {
    box-shadow: 1px 1px 6px #9F9F9F;
}

#banner a:hover, a.prez-more:hover, #mainslide a:hover, #knokkeslide a:hover {
    box-shadow: 1px 1px 6px #555;
    text-decoration:underline;
}

#content {
    background:url(../img/content_bg.jpg) top left no-repeat;
    min-height:250px;
    font-weight:300;
}

#content-inside {
    padding-top:20px;
    padding-bottom:0px;
    min-height:210px;
    padding-left:30px;
    padding-right:30px;
}

.container {
    max-width:900px
}


#accroche {
    text-align:center;
    color:#83B341;
    font-size:18px;
    text-transform:uppercase;
    margin-top:20px;
    line-height: 25px;
    font-weight: 300;
}

@media (max-width: 768px) {
    #accroche {
        font-size:16px;
    }
}

#contact #accroche {
    text-align:left;
    white-space:nowrap;
}

#accroche span {
    background:url(../img/guillemets.png) 0 0 no-repeat;
    padding-top:20px;
}

#accroche.pink {
    color:#C60B46;
}

#accroche.pink span {
    background:url(../img/guillemets_pink.png) 0 0 no-repeat;
}

#accroche.black {
    color:#000;
}

#accroche.black span {
    background:url(../img/guillemets_black.png) 0 0 no-repeat;
}

#philosophie { background:url(../img/fruits-bois-corner.png) top left no-repeat; }
#contact { background:url(../img/fruits-rouges.png) top left no-repeat; }
#contact-wrapper { background:url(../img/assiette.png) bottom right no-repeat; }
@media (max-width: 768px) {
    #philosophie, #contact, #contact-wrapper { background:none;	}
}

#cadrephoto {
    width:356px;
    height:322px;
    background:url(../img/cadrephoto.png) top left no-repeat;
    float:right;
}

@media (max-width: 992px) {
    #cadrephoto {
        float:none;
        margin:25px auto;
    }
}

#cadrephoto-slider {
    width:327px;
    height:264px;
    position:relative;
    top:30px;
    left:14px;
}

.prod-prez {
    text-align:center;
    margin:10px auto 60px auto;
}

.prod-prez img {
    margin:0 auto;
}

p.prez, h2.prez {
    text-transform:uppercase;
    font-size:15px;
    font-weight:300;
    min-height:50px;
    margin-top: 0;
    line-height: 21px;
}

p.prez.fruity ,h2.prez.fruity {
    color:#C60B46;
}

p.prez-img {
    margin:20px 0 5px 0;
}

.subgreen {
    display:inline-block;
    background:#83b441 url(../img/subgreen_arrow.png) right 15px no-repeat;
    border-radius:6px;
    text-transform:uppercase;
    text-shadow:none;
    color:#FFF;
    padding:10px 23px 10px 13px;
    font-size:16px;
    line-height:20px;
    font-weight:400;
    box-shadow: 1px 1px 6px #555;
    cursor:pointer;
    margin:30px 0;
    border:none;
}

.subgreen:hover {
    color:#FFF;
    box-shadow: 1px 1px 10px #555;
}

#code { display:none; }

label {
    font-weight:normal;
    text-transform:uppercase;
    margin-top:20px;
}

input[type=text], input[type=email] {
    height:38px;
    padding:0 10px;
}

input[type=text], input[type=email], textarea {
    box-shadow: 1px 1px 6px #959595 !important;
    border-radius:0 !important;
    margin:5px 0;
    font-family: 'Raleway', sans-serif;
    font-size:14px;
    color:#231F20;
}

textarea {
    height:200px !important;
}

#gamme {
    display:table;
    margin:0 auto 60px auto;
}

#gamme a {
    margin:0 5px;
    position:relative;
    display:inline-block;
}

#gamme a span.filet {
    position:absolute;
    display:block;
    width:37px;
    height:135px;
    background:rgba(255, 255, 255, 0.5) url("../img/plus.png") no-repeat scroll center 57px;
    background-size:26px;
    transition: all 0.3s ease-in-out;
}

#gamme.infusion a span.filet {
    width:38px;
    height:171px;
    background-position:center 113px;
}

#gamme a:hover span.filet {
    background-size: 30px;
    background-color:rgba(255, 255, 255, 0.4);
}

#gamme a.active span.filet {
    display:none;
}

.titleprod {
    font-size:16px;
    text-transform:uppercase;
    font-weight:400;
}

a.showinfos {
    background: url("../img/plus.png") left 0px  no-repeat;
    padding:0 0 0 35px;
    min-height:26px;
    line-height:26px;
    display:block;
    margin:20px 0 0 0;
    text-decoration:none;
    cursor:pointer;
}

a.showinfos.pink {
    background: url("../img/plus_pink.png") left 0px  no-repeat;
}

a.showinfos:hover {
    text-decoration:underline;
}

.infos {
    position:relative;
    display:none;
}

.infos-content {
    border-radius:15px;
    box-shadow: 1px 1px 6px #959595;
    overflow:hidden;

}

.infos-content .padding {
    padding:10px 20px;
}

.infos-content table#compo {
    width:100%;
    font-size:12px;
    font-weight:300;
}

.infos-content table#compo tr {
    border-bottom:1px solid #000;
}

.infos-content table#compo tr.bordergreen {
    border-color:#83b441;
}

.infos-content table#compo tr.borderpink {
    border-color:#C60B46;
}

.infos-content table#compo tr.small {
    font-size:10px;
}

.infos-content table#compo tr.noborder {
    border:none;
}

.infos-content table#compo td {
    padding:5px;
}

.infos-content table#compo td.decalage {
    padding-left:10px;
}

.infos-content table#nutri {
    background:url(../img/nutri.png) top left no-repeat;
    width:191px;
    height:57px;
    margin:0 auto;
}

.infos-content table#nutri.pink {
    background:url(../img/nutri_pink.png) top left no-repeat;
    color:#231F20 !important;
}

.infos-content table#nutri td {
    width:38px;
    text-align:center;
    vertical-align:bottom;
    padding:5px 0;
    font-size:8px;
    line-height:10px;
    white-space:nowrap;
}

.infos-content table#nutri td strong {
    font-size:10px;
    line-height:12px;
}

.closebox {
    position:absolute;
    width:41px;
    height:41px;
    top:-20px;
    right:-17px;
    display:block;
    background: url("../img/close.png") top left  no-repeat;
    cursor:pointer;
}

.closebox.pink {
    background: url("../img/close_pink.png") top left  no-repeat;
}

.infostitle {
    color:#FFF;
    background:#83b441;
    font-size:16px;
    text-align:center;
    padding:10px;
}

.infostitle.pinkk {
    background:#C60B46;
}

#lightbox {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    text-align:center;
    z-index:100000000;

    display:none;
}


#lightbox-bg {
    background:rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:9;
}

#lightbox-content {
    position:relative;
    z-index:10;
    margin:20px auto;
    max-width:70%;
    display:inline-block;
}

#close_lightbox {
    cursor:pointer;
}

.close-knokke {
    margin:0 -25px -25px 0;
}

#lightbox_more {
    margin-top:-90px;
}

@media (max-width: 768px) {
    #lightbox_more {
        margin-top:-65px;
    }

    #lightbox_more a.prez-more {
        font-size:12px;
        padding-top:5px;
        padding-bottom:5px;
        background-position: right 10px;
    }
}

#sliderhome {
    margin-bottom:5px;
}

#mainslide, #banner-wrapper {
    font-size:60px;
    display:table !important;
    background:none;
    text-align:center;
    color:#FFF;
    font-weight:300;
    line-height:60px;
    text-shadow: 2px 2px 8px #83b441
}

#table-cell {
    display:table-cell;
    vertical-align:middle;
    position:absolute;
    width:100%;
    top: 50%;
    transform: translate(0,-50%);
    z-index: 10;
    text-shadow: 0px 0px 10px #666;
}

@media (max-width: 768px) {
    #mainslide {
        font-size:32px;
        line-height:32px;
    }
    #table-cell {
        top:25%;
    }
}

#knokkeslide {
    background:url(../img/tao-knokke.jpg) top center no-repeat;
    background-size:cover;
}

.sliderhome, .sliderpage {
    position:relative;
}

.sliderhome img, .sliderpage img {
    width:100%;
}
.sliderpage {
    margin-bottom: 5px;
}
#knokke-text {
    position:absolute;
    width:30%;
    left:59%;
    top:10%;
    text-align:center;
    font-family: 'Roboto', sans-serif;
}

p#knokke1 {
    color:#2595D2;
    font-size:44px;
    line-height:44px;
    font-weight:bold;
    white-space:nowrap;
}

p#knokke2 {
    color:#6C5F3C;
    font-size:26px;
    line-height:26px;
    margin-top:10px;
}

#knokkeslide a {
    background:#5BC4BE url(../img/arrow_white.png) right 15px no-repeat;
    color:#FFF;
    margin-top:10px;
}




@media (max-width: 768px) {
    p#knokke1 {
        font-size:18px;
        line-height:18px;
    }
}

#knokke-content {
    border:8px solid #FFF;
    background:#FFF;
}

p#prod {
    margin-top:35px;
}

#knokke-content a {
    position:absolute;
    display:block;
}

/* Format big*/
#knokke-content .visible-sm a.android, #knokke-content .visible-md a.android, #knokke-content .visible-lg a.android {
    bottom:3%;
    left:11%;
    width:10%;
    height:7%;
}

#knokke-content .visible-sm a.appstore, #knokke-content .visible-md a.appstore, #knokke-content .visible-lg a.appstore {
    bottom:3%;
    left:21%;
    width:10%;
    height:7%;
}

#knokke-content .visible-sm a.conditions, #knokke-content .visible-md a.conditions, #knokke-content .visible-lg a.conditions {
    bottom:3%;
    left:42%;
    width:20%;
    height:7%;
}

/* Format smartphone*/
#knokke-content .visible-xs a.android {
    bottom:5%;
    left:27%;
    width:20%;
    height:5%;
}

#knokke-content .visible-xs a.appstore {
    bottom:5%;
    left:47%;
    width:19%;
    height:5%;
}

#knokke-content .visible-xs a.conditions {
    bottom:2%;
    left:5%;
    width:37%;
    height:3%;
}
.exepct {

}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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 that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

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

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

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

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

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

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

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