/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

/* ----------- FONTS ------------ */
@font-face {
    font-family: 'BandaRegularRegular';
    src: url('fonts/Banda_regular-webfont.eot');
    src: url('fonts/Banda_regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/Banda_regular-webfont.woff') format('woff'),
        url('fonts/Banda_regular-webfont.ttf') format('truetype'),
        url('fonts/Banda_regular-webfont.svg#BandaRegularRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BariolRegularRegular';
    src: url('fonts/bariol-regular.eot');
    src: url('fonts/bariol-regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/bariol-regular.woff') format('woff'),
        url('fonts/bariol-regular.ttf') format('truetype'),
        url('fonts/bariol-regular.svg#BariolRegularRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bariol_boldbold';
    src: url('fonts/bariol_bold-webfont.eot');
    src: url('fonts/bariol_bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/bariol_bold-webfont.woff') format('woff'),
        url('fonts/bariol_bold-webfont.ttf') format('truetype'),
        url('fonts/bariol_bold-webfont.svg#bariol_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bariol_lightlight';
    src: url('fonts/bariol_light-webfont.eot');
    src: url('fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/bariol_light-webfont.woff') format('woff'),
        url('fonts/bariol_light-webfont.ttf') format('truetype'),
        url('fonts/bariol_light-webfont.svg#bariol_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bariolregular_italic';
    src: url('fonts/bariol_regular_italic-webfont.eot');
    src: url('fonts/bariol_regular_italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/bariol_regular_italic-webfont.woff') format('woff'),
        url('fonts/bariol_regular_italic-webfont.ttf') format('truetype'),
        url('fonts/bariol_regular_italic-webfont.svg#bariolregular_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'blanchcaps';
    src: url('fonts/blanch_caps-webfont.eot');
    src: url('fonts/blanch_caps-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/blanch_caps-webfont.woff') format('woff'),
        url('fonts/blanch_caps-webfont.ttf') format('truetype'),
        url('fonts/blanch_caps-webfont.svg#blanchcaps') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ----------- PRINCIPAL ------------ */
body {
    font-family: BariolRegularRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align:center;
    background:#F7F7F7;
    color:#9a5554;
    -webkit-font-smoothing: antialiased;
}
#bigborder { background:#eeeded;margin:20px; }
a { text-decoration:none; }
.italic {font-style:italic;}
.container {  background:#eeeded;}

.someleft { padding-left:60px; }

.backButton {  margin-top:2.5em; }
.backButton a {
    display:block;
    padding:0.3em 1em;
    background:#d3665d;
    color:#EEE;
    font-family: "Courier New", Courier, monospace;
    font-weight:normal;
    text-transform:uppercase;
    float:right;
}
.backButton a:hover { background:#DFAAA6;}


p { font-size:1.1em;font-weight:normal; }
p.bigger { font-size:1.25em;line-height:1.2;margin-top:0.5em; }
p.smaller { font-size:0.9em; }

.bigtitle { font-family: 'bariol_boldbold';font-weight:normal;color:#36a5b8;margin-top:0.4em;font-size:4.5em;}
.bigtitle span { color:#d3665d; }
.bigtitle.smaller { font-size:3em; }

.txtlightblue,a.txtlightblue { color:#9ccdd6;font-size:0.93em; }
.txtblue,a.txtblue { color:#36a5b8;font-size:1.1em; }
.txtlightred,a.txtlightred { color:#e6bcb9;font-size:0.93em; }
.txtred,a.txtred { color:#d3665d;font-size:1.1em; }
.txtred1,a.txtred1 { color:#d3665d; }
.txtred2,a.txtred2 { color:#9a5554; }
.txtred3,a.txtred3 { color:#660033; }  

/* ----------- NAVIGATION ------------ */
nav { margin-top:1.1em; }
nav p { display:inline;margin:0 1.3em;}
nav p a { 
    font-family: 'BandaRegularRegular', Helvetica, Arial, sans-serif;
    color:#000;
    font-size:1.05em;
    -webkit-transition:color 250ms ease-out;
    -moz-transition:color 250ms ease-out;
    -o-transition:color 250ms ease-out;
    transition:color 250ms ease-out;

}
nav p a:hover,
nav p.current a { color:#9a5554; }
nav h1 { display:inline-block;vertical-align:middle;padding:0 0.3em;margin-top:0; }
nav h1 a { display:inline-block;height:108px;width:110px;background:url(../img/sugarfull-logo.gif) 0 0 no-repeat;text-indent:-5000px; }
nav h1 a:hover { background-position:0 -108px; }


/* ----------- CONTENU PAGE ACUEIL ------------ */
/* Hello */
.pageaccueil .hello {  }
.pageaccueil .hello h2 { font-family: 'bariol_boldbold';font-weight:normal;color:#36a5b8;margin-top:0.3em;font-size:6.4em;line-height:1.2}
.pageaccueil .hello h2 span { color:#d3665d; }
.pageaccueil .hello h3 { font-weight:normal;font-family: 'BariolRegularRegular';color:#36a5b8;font-size:1.5em;}
.pageaccueil .hello h3.txtbig { color:#d3665d;font-size:1.88em;font-family: 'bariol_boldbold';line-height:1.2;}
.pageaccueil .hello h3.txtitalic { font-family: 'bariolregular_italic'; font-size:1.25em;margin-top:0.1em;}
/* Caroussel*/
.pageaccueil .caroussel { margin-top:4.8em; }
.pageaccueil .bgcaroussel {
    background:url(../img/sugarfull-caroussel-accueil.jpg) top center no-repeat;
    background-size: cover;background-position: 50% 50%;
}
/* Infos*/
.pageaccueil .moreinfos {    
    height:980px;
    background:url(../img/sugarfull-home-bg.jpg) top center no-repeat;
    padding-left:35px;
}
.pageaccueil .moreinfos .moreleft {margin-top:165px;}
.pageaccueil .moreinfos .moreleft h3 {
    font-family: 'BandaRegularRegular';
    font-size:1.9em;
    font-weight:normal;
    color: #f7f7f7;
    text-shadow:
        0px 0px 0 rgb(227,227,227), 
        0px 1px 0 rgb(217,217,217),
        0px 2px 1px rgba(0,0,0,0.1),
        0px 2px 1px rgba(0,0,0,0.5),
        0px 0px 1px rgba(0,0,0,.2);
}
.pageaccueil .moreinfos .moreleft ul {  margin-top:3.5em;list-style:none;}
.pageaccueil .moreinfos .moreleft li{
    text-transform: uppercase;
    font-family: "Courier New", Courier, monospace;
    font-weight:normal;
    color:#F7F7F7;
    line-height:1.2;
}
.pageaccueil .moreinfos .moreleft p {
    font-family: 'bariol_lightlight';
    font-weight:normal;
    font-size:2.3em;
    line-height: 1.2;
    text-transform:uppercase;
    color:#333;
    padding:0 100px;
    margin-top:20px;
}
.pageaccueil .moreinfos .moreright {margin-top:130px;}
.pageaccueil .moreinfos .moreright h3 {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-style:italic;
    font-weight:normal;
    font-size:2.2em;
    color:#333;
    text-shadow:
        0px 0px 0 rgb(227,227,227), 
        0px 1px 0 rgb(217,217,217),
        0px 2px 1px rgba(0,0,0,0.1),
        0px 2px 1px rgba(0,0,0,0.2),
        0px 0px 1px rgba(0,0,0,.2);
}
.pageaccueil .moreinfos .moreright img { margin-top:0.5em;}
.pageaccueil .moreinfos .moreright p.firstline { margin-top:0.3em;font-family: 'BariolRegularRegular';font-size:1.9em;color:#333;line-height:1.1; }
.pageaccueil .moreinfos .moreright p.secondline { margin-top:0;font-family: 'bariolregular_italic';font-size:1.35em;color:#333;line-height:1.1; }
.pageaccueil .moreinfos .bigred { font-family: 'bariol_boldbold';color:#d3665d;font-size:1.3em;font-weight:normal; }
.pageaccueil .moreinfos .bigblue { font-family: 'bariol_boldbold';color:#36a5b8;font-size:1.3em;font-weight:normal; }
.pageaccueil .projects { margin-top:2em;display:none; }
.pageaccueil .projects a { padding:0 13px;display:inline-block; }
.pageaccueil .projects img { margin-top:25px }


/* ----------- PAGE ABOUT ------------ */
.pageabout h3.bigtitle { margin-top:0.25em;}
.pageabout .caroussel { margin-top: 2em; }
.pageabout .infos { background:url(../img/sugarfull-about-bg.jpg) top center no-repeat;min-height:988px;padding-top:60px; }
.pageabout .infos h3 {
    font-family: 'BandaRegularRegular';
    font-size:1.9em;
    font-weight:normal;
    color: #f7f7f7;
    line-height:0.8;
    margin-bottom:2.6em;
}
.pageabout .infos p {    
    font-family: "Courier New", Courier, monospace;
    color:#F7F7F7;
    line-height:1.2;
    padding:0 5em;
    margin-left:1em;
    font-size:1.15em;
    margin-top:1em;
}
.pageabout .services p span { color:#d3665d; }
.pageabout .services h4 {
    font-family: "Courier New", Courier, monospace;
    color:#36a5b8;
    font-size:1.2em;
    margin-top:1em;
    text-transform:uppercase;
    font-weight:normal;
}
.pageabout .services h4 span { color:#d3665d; }
.pageabout .services .vignettes {margin-top: 2em;padding-bottom:1.5em;border-bottom:1px solid #cbadad;}
.pageabout .services p.content { margin-top:1.9em; }
.pageabout .principes {margin-top:3em;}
.pageabout .principes h5 {
    font-family: 'BandaRegularRegular';
    font-size:1.1em;
    font-weight:normal;
    border-bottom:1px solid #36a5b8;
    text-transform:uppercase;
    display:inline;
    padding-bottom:0.1em;
}
.pageabout .principes p {   margin-top:1em;    margin-bottom:1.8em;}
.pageabout .commentcamarche .vignettes {  margin-top:4em;}
.pageabout .commentcamarche .vignettes img {    margin-bottom:1em;}
.pageabout .commentcamarche .vignettes p {   font-family: 'bariol_boldbold';    color:#d3665d;font-weight:normal;font-size:1em;}
.pageabout footer {margin-top:10em;}
.pageabout .vignette { cursor:pointer; }
.pageabout .vignette a p { color: #9A5554;font-family: 'bariolregular_italic';font-size:0.9em; }
.pageabout .vignette div {
    position:relative;
    height:118px;
    width:118px;
    left:50%;
    margin-left:-59px;
}
.pageabout .vignette div img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}
.pageabout .vignette div img.ontop:hover {
    opacity:0;
}
.lightbox .content.contentweb { min-height:800px;background:#FFF url(../img/sugarfull-lightbox-bg-web.png) bottom right no-repeat; }
.lightbox .content.contentprint { min-height:800px;background:#FFF url(../img/sugarfull-lightbox-bg-print.png) bottom right no-repeat; }
.lightbox .content.contentlogos { min-height:500px;background:#FFF url(../img/sugarfull-lightbox-bg-logos.png) bottom right no-repeat; }

/* ----------- PAGE PORTFOLIO ------------ */
.pageportfolio .catmenu { margin-top:7em; }
.pageportfolio .catmenu p,
.pageportfolio .catmenu a { font-family: "Courier New", Courier, monospace;text-transform:uppercase;font-size:1.05em; }
.pageportfolio .catmenu a:hover,
.pageportfolio .catmenu a.current { text-decoration:line-through;text-decoration-color:#d3665d; }

.pageportfolio .projects ul { padding-top:3em;padding-left:55px;list-style:none;min-height:240px;}


.pageportfolio .projects li { position:relative;float:left;margin-top:25px;margin-right:25px; }
.pageportfolio .projects a { display:block;width:240px;height:240px;background:#FFF;color:#FFF; }



.pageportfolio .projects span { display:none;position:absolute;top:0;left:0;width:240px;height:240px;background:#CC6859; }
.pageportfolio .projects strong { padding-bottom:10px;width:200px;position:absolute;bottom:120px;left:20px;font-family:blanchcaps;font-weight:normal;font-size:2.8em;line-height:0.7; }
.pageportfolio .projects em {padding-top:10px;width:160px;position:absolute;top:120px;left:40px;border-top:1px solid #FFF;font-family: Georgia, Times, "Times New Roman", serif;font-style:italic;font-size:1em; }
.pageportfolio .caroussel { margin-top:3em;}
.pageportfolio .bgcaroussel {
    background:url(../img/sugarfull-caroussel-portfolio.png) top center no-repeat;
    background-size: cover;background-position: 50% 50%;
}
.pageportfolio .title h3 { font-family: 'BariolRegularRegular';font-weight:normal;color:#36a5b8;font-size:1.5em; }
.pageportfolio .project { margin-top:3em; }
.pageportfolio .project h3 { 
    margin-top:0.5em;
    color:#d3665d;
    font-family: 'BandaRegularRegular';
    font-weight:normal;
    text-align:left;
    font-size:1.1em;
    display:block;
}
.pageportfolio .project h3 span { border-bottom:1px solid #e9d2d0;padding-bottom:1em; }
.pageportfolio .project p { font-family:'BandaRegularRegular';font-weight:normal;text-align:left;font-size:0.82em;letter-spacing:0.05em;line-height:1.7}
.pageportfolio .project p.first { margin-top:3.5em;}
.pageportfolio .project .images img {
    margin-top:20px;
    margin-bottom:50px;
}
/* ----------- PAGE PORTFOLIO ------------ */
.pagecontact h2.bigtitle { color:#9a5554; }
.pagecontact h2.bigtitle span { color:#660033; }
.pagecontact .caroussel { margin-top:1.75em; }
.pagecontact .contact { background:url(../img/sugarfull-contact-bg.jpg) top center no-repeat;min-height:989px;padding-top:50px;color:#FFF; }
.pagecontact .contact h3 {
    font-family: 'BandaRegularRegular';
    font-size:1.9em;
    font-weight:normal;
    line-height:0.8;
    margin-bottom:2em;
}
.pagecontact .contact p {    
    font-family: 'BariolRegularRegular';
    line-height:1.2;
    font-size:1.1em;
    margin-top:1em;
    font-weight:normal;
}
.pagecontact .contact form { margin-top:2em; }
.pagecontact .contact form div { margin-top:0.5em; }
.pagecontact input,
.pagecontact textarea {
    width:95%;
    background:#660033;
    color:#9a5554;
    border:none;
    padding:0 10px;
    font-family: 'bariolregular_italic';
    font-size:1.2em;
}
::-webkit-input-placeholder	{color:#9a5554;}
.pagecontact input.error,
.pagecontact textarea.error {
    background:#D3665D;
}
.pagecontact input { height:50px;}
.pagecontact textarea { padding:10px;min-height:230px; }
.pagecontact button {    
    background:none;
    color:#660033;
    border:none; 
    font-family: "Courier New", Courier, monospace;
    font-size:1.1em;
    -webkit-transition:color 250ms ease-out;
    -moz-transition:color 250ms ease-out;
    -o-transition:color 250ms ease-out;
    transition:color 250ms ease-out;
}
.pagecontact button:hover { cursor:pointer;color:#1cd5f0; }
.pagecontact .backButton a { display:inline;line-height:1.5;float:none; }
.pagecontact .returnmsg { display:none;margin-top:80px;text-align:center;font-size:1.2em; }

/* ----------- FOOTER ------------ */
footer { background:url(../img/sugarfull-footer.png) top center no-repeat;margin-top:5em;padding-top:150px; }
footer p.georgia { font-family: Georgia, Times, "Times New Roman", serif;font-style:italic; }
footer p.courier { font-family: "Courier New", Courier, monospace;font-style: oblique; }
footer a.courier { font-family: "Courier New", Courier, monospace;font-style: oblique; }
footer p.line1 {}
footer p.line2 { margin-top:0.5em; }
footer p.line3 {}
footer p.line4 { margin-top:0.2em; }
footer p.line5 {}
footer img { margin-top:2.1em; }
footer p.line6 { margin-top:1em }
footer p.line7 { line-height: 1.3;}
footer p.line8 { margin-top:0.2em;font-size:0.91em; }
footer p.line9 { margin-top:2em;font-size:0.75em; }
footer p.line10 { font-size:0.75em; }
footer p.line11 { margin:3em 0 0.5em 0;font-size:0.75em; }
footer p.line11 a { color:#9ccdd6; }
footer p.line11 a:hover { color:#e6bcb9; }
footer p.line12 {margin-top:2em }

.bgcaroussel {  position:relative; width:1140px; height:676px;}
.bgcaroussel img {  position:absolute; top:0; left:0;}

.lightbox {text-align:left;}
.lightbox .simplemodal-close {
    display:block;
    float:right;
    margin:1em;
    width:68px;
    height:67px;
    background:url(../img/sugarfull-lightbox-close.png) top center no-repeat;
    text-indent:-5000px;
}
.lightbox .simplemodal-close:hover {background-position:0 -67px;}

.lightbox .head {background:#9a5554;}
.lightbox .title {padding-bottom:0.8em;text-align:center;}
.lightbox .content {
    padding-top:3em;
    background:#FFF;
}
.lightbox .content p {margin-bottom:2em;margin-left:60px;font-size:1em;}
.lightbox .content h5 {
    margin-top:0.8em;
    margin-bottom:0.2em;
    color:#36a4b8;
    font-size:1.8em;
    font-weight:normal;
    margin-left:60px;
}
.lightbox .content ul {list-style:none;margin-top:2em;margin-left:1em;}
.lightbox .content li {
    color:#36a4b8;
    font-family: 'bariolregular_italic';
    font-weight:normal;
    font-size:0.85em;
    margin-top:0.25em;
}
.lightbox .title h4 {
    font-family: "Courier New", Courier, monospace;
    color:#36a5b8;
    font-size:1.2em;
    margin-top:1em;
    text-transform:uppercase;
    font-weight:normal;
}
.lightbox .title h4 span { color:#d3665d; }
.ligthbox .bgImg {  display:block;float:right;}



#slides { display: none }
.slidesjs-previous {
    display:block;
    width:22px;
    height:42px;
    background:url(../img/sugarfull-arrowleft.png) top center no-repeat;
    text-indent:-5000px;
    z-index:120;
    position:absolute;
    left:0;
    top:50%;
    margin-top:-24px;
}
.slidesjs-next {
    display:block;
    width:22px;
    height:42px;
    background:url(../img/sugarfull-arrowright.png) top center no-repeat;
    text-indent:-5000px;
    z-index:120;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-24px;
}
.slidesjs-previous:hover,
.slidesjs-next:hover {  background-position:0 -42px;}

/**** Isotope Filtering ****/
.isotope-item { z-index: 2;}
.isotope-hidden.isotope-item { pointer-events: none;z-index: 1;}
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:      -o-transform, opacity;
    transition-property:         transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}






/* FENETRES PLUS PETITES QUE 1140PX */
@media only screen and (max-width: 1139px) {

    .pageabout .infos p { margin-left:0; }


    .someleft { padding-left:0; }

    .caroussel { display:none; }

    .pageaccueil .hello h2 { font-size:5.5em;}
    .pageaccueil .moreinfos { background:none;min-height:auto;height:auto;padding:0; }
    .pageaccueil .moreinfos .moreleft,
    .pageaccueil .moreinfos .moreright{ margin-top:4em; }
    .pageaccueil .moreinfos .moreleft ul {  margin-top:1.5em;}
    .pageaccueil .moreinfos .moreleft p { padding:0; }
    .pageaccueil .moreinfos .moreleft h3, 
    .pageaccueil .moreinfos .moreleft li { color:#9A5554;padding:0; }
    .pageaccueil .projects { display:block; }

    .pageabout .infos { background:none;min-height:0;padding:0; }
    .pageabout .infos h3,
    .pageabout .infos p { color:#9A5554;padding:0; }

    .pagecontact .contact { background:none;min-height:0;padding:0; }
    .pagecontact .contact h3,
    .pagecontact .contact p { color:#9A5554;padding:0 3.5em; }


    /*h2,h3 { line-height:0.8 }*/

    .bigtitle { font-size:3em;line-height:0.8; }

    .pageabout .infos h3,
    .pageabout h3.bigtitle {margin-top: 1.5em;    }
    .pageabout .vignette div {        margin-top:15px;    }
    .pageabout .commentcamarche .vignettes {        margin-top: 2em;    }

    .pagecontact .contact h3 {margin-top:2em;margin-bottom:1.5em;}



    .pageabout .infos h3 {margin-bottom:1em;}


    .pageabout .commentcamarche .vignettes img { margin-top:1.5em;}

    nav {margin-bottom:2em;}

    #bigborder { margin:0; }


    .pageportfolio .catmenu { margin-top:4em;}

    .pagecontact .contact h3, .pagecontact .contact p { padding:0;}

    .lightbox .content.contentweb,
    .lightbox .content.contentprint,
    .lightbox .content.contentlogos { background:#FFF; }

    .lightbox .content p {
        margin-left: 20px;
    }

    .lightbox .content ul {
        margin-left: 20px;
    }
    .lightbox .content h5 {
        margin-left: 20px;
    }
    
    
    .pageportfolio .projects ul { padding-left:105px; }
    
}


@media only screen and (max-width: 767px) {

    .pageaccueil .projects a {
        padding: 0;
    }
}

@media only screen and (max-width: 460px) {

            .pageportfolio .projects ul { padding-left:20px; }
        
}


@media only screen and (max-width: 319px) {

        .pageportfolio .projects ul { padding-left:0; }
    
    .lightbox {overflow:hidden;}

    .lightbox .content ul {
        margin-left: 4.5em;}
    body{        font-size:0.8em;    }
}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {
    nav p { display:block;}
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

    /*	.logo {
                    background: url(logo2x.jpg) no-repeat;
                    background-size: 212px 303px;
            }*/

}