/*--------------------------------------------------------
Responsive elements
--------------------------------------------------------*/
/* 0 -> 767  MOBILE PORTRAIT + LANDSCAPE ****************/
@media only screen and (max-width: 767px) {

    /* media detection  */
    body.admin .media-detect:after {
        content: "width: 480 - 767 / No Grid container 420";
    }

    .invisible {
        display: none !important;
    }

    /*--------------------------------------------------------
	Typography
	--------------------------------------------------------*/
    h1 {
        font-size: 40px;
        line-height: 40px;
    }

    h2 {
        font-size: 30px;
        line-height: 30px;
    }

    /*--------------------------------------------------------
	Navigation
	--------------------------------------------------------*/
    nav {
        height: 30px;
    }

    .links {
        display: none;
    }

    .dropmenu {
        display: block;
        margin-top: 5px;
    }

    /*--------------------------------------------------------
	Parallax
	--------------------------------------------------------*/
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax1 .pattern,
    #parallax2 .pattern,
    #parallax3 .pattern,
    #parallax4 .pattern {
        height: 300px;
        /* à définir en fonction de la hauteur du device,
			ici pour mobile landscape, car Portrait est overridé ci-dessous */
    }

    .bg1,
    .bg2,
    .bg3,
    .bg4 {
        background-repeat: no-repeat;
        background-attachment: scroll;
        /* pour landscape, on peut laisser b-size à 100%,
		la hauteur de 660px sera plus haute que les 300px ci-dessus */
    }

    /*--------------------------------------------------------
	Content
	--------------------------------------------------------*/
    #definitive,
    #electrique,
    #laser,
    #equipe,
    #contact {
        padding-top: 32px;
        padding-bottom: 40px;
    }

    /*Homepage------------------------------------------*/
    #homepage {
        margin-bottom: -30px;
    }

    .logo {
        /* width: 180px; */
		width: 90px;
        height: auto;
        margin-top: 10px;
    }

    .announce {
        font-size: 30px;
        line-height: 30px;
        margin-top: 10px;
    }

    .slider-text {
        bottom: 10px;
        min-height: 80px;
    }


    /* ! boutons slider Next / Prev */
    #prevslide,
    #nextslide {
        position: absolute;
        height: 15px;
        width: 15px;
        top: 50px;
        margin-top: -21px;
        opacity: .6;
    }

    #prevslide {
        right: 55px;
        background: url(../images/back-15.png);
    }

    #nextslide {
        right: 30px;
        background: url(../images/forward-15.png);
    }

    /*About------------------------------------------*/
    .column .img-wrp {
        margin: 40px 0 14px;
    }

    /*Culture------------------------------------------*/
    #culture h4 {
        padding-top: 27px;
    }

    /*Portfolio------------------------------------------*/
    .project-title {
        font-size: 14px;
    }

    .project-description {
        font-size: 11px;
    }

    /*Contact------------------------------------------*/
    #contact-site-form input#edit-name,
    #contact-site-form input#edit-mail,
    #contact-site-form input#edit-subject,
    #edit-captcha-response {
        width: 240px;
    }

    #contact-site-form textarea {
        width: 260px;
    }

}

/* END @media only screen and (max-width: 767px) */




/* 0 -> 479  MOBILE PORTRAIT *********************************/
@media only screen and (max-width: 479px) {

    /* media detection  */
    body.admin .media-detect:after {
        content: "width: 0 - 479 / No Grid container 300";
    }

    /*--------------------------------------------------------
Parallax
--------------------------------------------------------*/
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax1 .pattern,
    #parallax2 .pattern,
    #parallax3 .pattern #parallax4 .pattern {
        height: 400px;
    }

    .bg1,
    .bg2,
    .bg3,
    .bg4 {
        /* on calcul une largeur par raport au 440 px de haut c-dessus
		1000*660 => 666*440, on arrondi à 670 */
        background-size: 670px;
        background-position: center top;
    }

    /*--------------------------------------------------------
	Content
	--------------------------------------------------------*/
    /*Homepage------------------------------------------*/
    .logo {
        top: 20px;
    }

    .slider-text {
        bottom: 50px;
        min-height: 100px;
    }

    /* ! boutons slider Next / Prev */
    #prevslide,
    #nextslide {
        position: absolute;
        height: 15px;
        width: 15px;
        top: 100px;
        opacity: .6;
    }

    #prevslide {
        left: 0;
    }

    #nextslide {
        left: 25px;
    }

    /*Contact------------------------------------------*/

}

/* END @media only screen and (max-width: 479px) */




/*--------------------------------------------------------
GRID BEGIN HERE !!! TABLETTE 
--------------------------------------------------------*/
/* 768 -> 959 NARROW Grid 16 colonnes / .container = 768px *****************/
@media only screen and (min-width: 768px) and (max-width: 959px) {

    /* media detection  */
    body.admin .media-detect:after {
        content: "width: 768 -> 959";
    }

    /*--------------------------------------------------------
	Parallax
	--------------------------------------------------------*/
    .bg1,
    .bg2,
    .bg3,
    .bg4 {
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    /*--------------------------------------------------------
	Typography
	--------------------------------------------------------*/
    h1 {
        font-size: 50px;
        line-height: 50px;
    }

    h2 {
        font-size: 35px;
        line-height: 35px;
    }

    /*--------------------------------------------------------
	Content
	--------------------------------------------------------*/
    /*Homepage------------------------------------------*/
    .slider-text {
        bottom: 30px;
    }

    /*Contact------------------------------------------*/
    /* ! formulaire de contact */
    #contact-site-form input#edit-name,
    #contact-site-form input#edit-mail,
    #contact-site-form input#edit-subject,
    #edit-captcha-response {
        width: 300px;
    }

    #contact-site-form textarea {
        width: 300px;
    }


}

/* END @media only screen and (min-width: 768px) and (max-width: 959px) */




/***************************************************************/
/* 960 -> 1384 DESKTOP  GRID NORMAL **********************************/
@media only screen and (min-width: 960px) and (max-width: 1384px) {

    /* media detection  */
    body.admin .media-detect:after {
        content: "width: 960 - 1384";
    }


}

/* END  */




/***************************************************************/
/* 1024 DESKTOP + iPAD landscape *******************************/
@media only screen and (width: 1024px) {

    /* media detection  */
    body.admin .media-detect:after {
        content: "width: 1024";
    }

    /*--------------------------------------------------------
		Parallax
	--------------------------------------------------------*/
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax1 .pattern,
    #parallax2 .pattern,
    #parallax3 .pattern,
    #parallax4 .pattern {
        height: 500px;
    }

    .bg1,
    .bg2,
    .bg3,
    .bg4 {
        background-size: 1200px;
    }

    /*--------------------------------------------------------
	Content
	--------------------------------------------------------*/
    /*Contact------------------------------------------*/
    #contact {
        background-size: 1210px;
    }

    .card {
        margin: 60px 0 0;
    }

    .ib-text {
        padding-right: 26%;
    }

}

/* END @media only screen and (width: 1024px) */




/***pour 1024px de large : on target uniquement les iPad en landscape pour la desactivation des parallax *****/
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    /* media detection  */
    body.admin .media-detect:after {
        content: "iPad landscape";
    }

    /*--------------------------------------------------------
Parallax
--------------------------------------------------------*/
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax1 .pattern,
    #parallax2 .pattern,
    #parallax3 .pattern,
    #parallax4 .pattern {
        height: 660px;
        /* on pousse au maxi, sinon l'image est écrasée en hauteur avec -webkit-background-size: 100%;
		image originale = 1000*660
		vieux simlateur ipad xcode */
    }

    .bg1,
    .bg2,
    .bg3,
    .bg4 {
        background-repeat: no-repeat;
        background-attachment: scroll;
        -webkit-background-size: 100%;
    }

    /* bug, ici on est dans le cas :
- visu dans device
- largeur du device plus grande que l'image originale
il semble que b-size dans iOS ne fonctionne pas
=> http://stackoverflow.com/questions/12599234/why-does-css-background-size-cover-not-work-in-portrait-mode-on-ios

b-size: 100% ou Cover = ok dans iOS 6 !! => bug dans mon vieux simulateur xcode ?

*/

}




/***************************************************************/
/* 1400 -> +++ *************************************************/
@media only screen and (min-width: 1385px) {

    /* normalement min-width: 1400px, mais Chrome et Safari le prend pas en compte !!!! */
    /* media detection  */
    body.admin .media-detect:after {
        content: "width: 1400 - ++";
    }

    /*--------------------------------------------------------
	Parallax
	--------------------------------------------------------*/
    #parallax1,
    #parallax2,
    #parallax3,
    #parallax4,
    #parallax1 .pattern,
    #parallax2 .pattern,
    #parallax3 .pattern,
    #parallax4 .pattern {
        height: 600px;
        /* on augmente par rapport à la valeur par défaut de 440px
		l'image de fond est étirée en largeur */
    }

    /*--------------------------------------------------------
	Content
	--------------------------------------------------------*/
    /* HOMEPAGE container + NAV container */
    nav .container,
    #homepage .container,
    #homepage .container .sixteen.columns {
        width: 96%;
    }

    nav .four.columns {
        float: right;
    }

    /*Homepage------------------------------------------*/
    .slider-text {
        width: 100%;
    }

    .line {
        width: 180px;
    }

    #prevslide,
    #nextslide {
        position: absolute;
        height: 30px;
        width: 30px;
        top: 210px;
        margin-top: -21px;
        opacity: .6;
    }


    /* ! formulaire de contact */
    #contact-site-form input#edit-name,
    #contact-site-form input#edit-mail,
    #contact-site-form input#edit-subject,
    #edit-captcha-response {
        background-color: white;
        width: 390px;
        outline: none;
        border: 2px solid #f2f2f2;
    }

    #contact-site-form textarea {
        width: 390px;
        border: 2px solid #f2f2f2;
    }

    #contact-site-form #edit-submit {
        border: none;
        font-family: 'QuicksandBook';
        font-size: 16px;
        padding: 10px;
        color: white;
        text-transform: uppercase;
        background-color: #999999;
        line-height: 16px;
        outline: none;
        cursor: pointer;
        text-align: center;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

}

/* END @media only screen and (min-width: 1400px) */