/*////////////////////////////////////////////////////
//////           RESPONSIVE VERSION             //////
////////////////////////////////////////////////////*/

/************************************************
******************** SLIDE MENU *****************
************************************************/

nav#slide-menu {position: absolute;top: 0;bottom:0;left:-50%;display: block;float: left;width: 100%;max-width:50%;-moz-transition: all 500ms;-webkit-transition: all 500ms;-o-transition: all 500ms;transition: all 500ms;z-index:999999999;color:#000;-webkit-box-shadow:2px -2px 2px rgba(0,0,0,0.2);-moz-box-shadow:2px -2px 2px rgba(0,0,0,0.2);box-shadow:2px -2px 2px rgba(0,0,0,0.2);}
nav#slide-menu:before {width: 100%;}
nav#slide-menu:before {content: '';position: absolute;top: 0;bottom: 0;z-index: -1;left: 0;background:#eeeeee;}
nav#slide-menu > ul {display: block;margin:0px;padding: 0;list-style: none;opacity: 0.5;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;padding-left:0;}
nav#slide-menu > ul ul.ppqtrans_language_chooser,nav#slide-menu > ul social {display:none;}
nav#slide-menu > ul li ul.children {padding:10px 0 0 0;}

nav#slide-menu > ul li {font:900 14px Lato;text-transform:uppercase;cursor: pointer;margin-bottom:0px;list-style-type:none;border-top:1px solid #ccc;padding:10px 0;}
nav#slide-menu > ul li a {padding:0 0 0 20px;}

nav#slide-menu > ul li li {font:normal 12px Lato;padding:10px 0;}
nav#slide-menu > ul li ul li:last-child {padding:10px 0 0;}
nav#slide-menu > ul li li a {color: #000;padding:0 0 0 40px;}

nav#slide-menu > ul li ul li ul  {font-weight:normal;padding:10px 0;display:none;}
nav#slide-menu > ul li li li a {color: #000;padding:0 0 0 60px;}

nav#slide-menu > ul ul {margin-left:0px;}

body.menu-active nav#slide-menu {left: 0px;}
body.menu-active nav#slide-menu ul {left: 0px;opacity: 1;}

div#main div.menu-trigger {color:#000;cursor: pointer;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;visibility:hidden;z-index:999999;}
div#main div.menu-trigger:before {color: #000;display: inline-block;font-style: normal;font-size:25px;font-weight: normal;font-variant: normal;text-align: center;text-transform: none;padding:5px 25px 0;content:'\f0c9';font-family:fontawesome;}
div#main div.menu-trigger:hover {}
div#main div.menu-trigger:hover:before {color:#a69f96;}

.menu-close {display: block;color:#000;padding:8px;}
.menu-close:hover {color:#ccc;}
.menu-close:before {font-style: normal;font-size: 24px;padding:3px 6px;margin-left:45%;font-weight: normal;font-variant: normal;text-align: center;text-transform: none;background:#fff;border-radius:100%;content:'\f00d';font-family:fontawesome;}
.scrollToMenu {position:fixed;left:-200px;bottom:20px;display:none;color:#000;text-transform:uppercase;font:normal 12px Lato;padding:14px 10px;z-index:99999999999;}

body #main {left:0;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;}
body.menu-active #main {left:50%;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;}
body.menu-active #header-mobile {left:50%;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;}
body.menu-active #menu-fix social {margin-left:50%;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;}
body.menu-active a.scrollToMenu {left:20px;}
body.menu-active #main div.menu-trigger {visibility:hidden;}

/*************************************************************
****************** DIFFERENTES RESOLUTIONS *******************
*************************************************************/

/* NAVIGATION ENTRE PAGES ET ARTICLES */

@media only screen and (max-width:1525px) {
.nav prev span, .nav next span {display:none;}
}	
@media only screen and (max-width:1450px) {
.nav {display:none;}
}

/* MENU >>> SLIDE MENU */

@media only screen and (max-width:1300px) {
div#main div.menu-trigger {visibility:visible;}
#menu-fix li {display:none;}
#menu-fix social li, #menu-fix ul.ppqtrans_language_chooser li {display:inline-block;}
#menu-fix ul.ppqtrans_language_chooser li a {padding-top:10px;}
#header-mobile {display:block;height:auto;padding:0;z-index:999999;height:50px;position:fixed;top:0;left:0;-moz-transition: all 500ms;-o-transition: all 500ms;-webkit-transition: all 500ms;transition: all 500ms;}
}

/* RESPONSIVITE DES LARGEURS DE PAGES ET CONTENUS */

@media only screen and (max-width:1150px) {
.stepcarousel {width:90%;}
#page {width:85%;}
}	

@media only screen and (max-width:990px) {
#content {width:100%;padding:0;}
iframe {width:100%; height: 507px;}
}	
	
/*************************************************************
************* IPAD [PORTRAIT + LANDSCAPE] ********************
*************************************************************/

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

/* CONTENANT */


/* MENU */
#menu-fix {height:90px;}
#menu-fix social {margin:5px 25px 0 125px;}
#menu-fix li a.facebook,#menu-fix li a.twitter,#menu-fix li a.rss,#menu-fix li a.instagram,#menu-fix li a.contact,#menu-fix li a.hellocoton,#menu-fix li a.googleplus,#menu-fix li a.pinterest,#menu-fix li a.youtube {font-size:40px;margin:20px 20px 0;}
#menu-fix li a.contact:before {font-size:40px;}
.search:before {display:none;}
#menu-fix ul.ppqtrans_language_chooser li a {font-size:30px;padding:15px;color:#000;margin-top:0;display:none}
ul.ppqtrans_language_chooser li:nth-child(1):after {font-size:35px;display:none;}


/* SLIDE MENU */
div#main div.menu-trigger:before {padding-top:22px;font-size: 40px;}
.menu-close {padding:20px;}
.menu-close:before {font-size:55px;padding:7px 13px 10px 15px;}
nav#slide-menu > ul li {font-size:35px;padding:30px 0;}
nav#slide-menu > ul li li {font-size:30px;padding:30px 0;}
nav#slide-menu > ul li ul.children {padding:30px 0 0 0;}
nav#slide-menu > ul li ul li:last-child {padding:30px 0 0;}

/* EN-TETE */
#header img.logo {margin:60px auto 10px;}
#header-mobile {display:block;height:auto;padding:5px 1%;height:48px;}

/* TYPOGRAPHIE */
#content p,.comments-template,.comments-template a#show-comments span,ol.commentlist li.comment p,ol.commentlist li.comment ul,ol.commentlist li.comment div.vcard, ol.commentlist li.pingback div.vcard  {font-size:27px;line-height:35px;}
h1,#content h1,label,ol.commentlist li.comment div.comment-meta, ol.commentlist li.pingback div.comment-meta,ol.commentlist li.comment div.reply, ol.commentlist li.pingback div.reply,input[type=submit],input[type=email] {font-size:22px;}
#main h2, #content h2 {font-size:40px;}
h2.post {margin:15px;}


/* DESACTIVATION & STYLISATION DES BOXES */
#sort, .box {margin:0 auto 60px;width:650px;}
.box img {width:650px;height:auto;}
.box h2.iphone {display:block;font-size:60px;}
span.iphone {display:block;font-size:45px;}
.rollover {display:none;}

/* AUTRES ELEMENTS */
.share li a.facebook:before,.share li a.twitter:before,.share li a.pinterest:before {font-size:35px;}
.share li a.googleplus:before,.share li a.mail:before {font-size:30px;}
#content ul.share li {padding-right:20px;}
ul.widget {width:90%;}
.scrollToTop,.scrollToMenu {font-size:30px;}
.scrollToTop span {display:none;}
}

/*************************************************************
************* IPHONE [PORTRAIT + LANDSCAPE] ********************
*************************************************************/

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

/* MENU */
#menu-fix social {margin:10px 0 0 50px;}
#menu-fix li a.facebook,#menu-fix li a.twitter,#menu-fix li a.rss,#menu-fix li a.instagram,#menu-fix li a.contact,#menu-fix li a.hellocoton,#menu-fix li a.googleplus,#menu-fix li a.pinterest,#menu-fix li a.youtube {font-size:25px;margin:5px 10px 0;}
#menu-fix li a.contact:before {font-size:25px;}

.search:before {display:none;}

/* EN-TETE */
#header img.logo {margin:25px auto 0;width:300px;height:auto;}

/* DESACTIVATION & STYLISATION DES BOXES */
#sort, .box {margin:0 auto 60px;width:320px;}
.box img {width:320px;height:auto;}
.box h2.iphone {display:block;font-size:30px;margin-top:0;padding-top:0;}
span.iphone {display:block;font-size:23px;}
.rollover {display:none;}

/* TYPOGRAPHIE */
h2.widget-title {font-size:25px;}

h2.post {margin:15px 0;font-size:25px;}
ul.widget {width:90%;}
.scrollToTop span {display:none;}
#menu-fix ul.ppqtrans_language_chooser li a, ul.ppqtrans_language_chooser li:nth-child(1):after {display:none;}

}