#header .container #Logo {width:320px !important; margin:0px auto !important;} #header .container #Logo img {width:100% !important; height: auto !important; margin:0px auto !important;} #header .social, #header .social-mobile { width:82px; position: absolute; top:10px; right:40px} #header .social .fb, #header .social-mobile .fb { float: left;} #header .social > a, #header .social-mobile > a { } div.section {width:100% !important; height:auto !important; overflow: hidden;} .section .visuel-section img {max-height:100% !important;} /**NOISETTA**/ #section2.Noisetta .left-anglet {background: url(../images/personnages/Bg_Noisetta.png) no-repeat center; background-size: auto; height: 100% !important; width: auto;} #section2.Noisetta .left-anglet img {width: 650px ; max-width: 650px; height: auto; position: absolute; left: 0; bottom: 0;} #section2.Noisetta .right-anglet {background: url(../images/personnages/Bg_Noisetta_2.png) no-repeat right; background-size: auto; } #section2.Noisetta .right-anglet img {width: 650px; height: auto; position: absolute; left: 0; bottom: 0;} #section2.Noisetta .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right; margin:10px 0px; padding: 2px; line-height:1.1;} #section2.Noisetta .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #1a6e4c;} #section2.Noisetta .noisette-content-anglet-right {width:90%; margin: 0 ; font-family: "Farah" !important; text-align: right; height: 100%; display:table; vertical-align:middle; padding: 400px 200px 0px 0px; font-size: 2.6rem;} /**CHKILITA**/ #section3.Chkilita .right-anglet {background: url(../images/personnages/Bg_Chkilita_2.png) no-repeat center; background-size: auto; height: 100% !important; vertical-align: middle;} #section3.Chkilita .right-anglet img {max-width: 650px; height: auto; position: absolute; right: 0; bottom: 0;} #section3.Chkilita .left-anglet {background: url(../images/personnages/Bg_Chkilita.png) no-repeat top right; background-size: contain; height: 100% !important;} #section3.Chkilita .left-anglet img {width: 650px !important; height: auto; position: absolute; right: 0; bottom: 0;} #section3.Chkilita .left-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right !important; margin:10px 0px !important; padding: 2px !important; line-height:1.1;} #section3.Chkilita .left-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #88512b;} #section3.Chkilita .chkilita-content-anglet-left {width:80% !important; margin: 50% 20% 0 0; font-family: "Farah" !important; text-align: right !important; height: 100%; display:table; vertical-align:middle; padding: 0px; font-size: 2.6rem;} /**CARAMELO**/ #section4.Caramelo .left-anglet {background: url(../images/personnages/Bg_Caramelo.png) no-repeat center; background-size: auto; height: 100% !important; } #section4.Caramelo .left-anglet img {width: 650px ; max-width: 650px; height: auto; position: absolute; left: 0; bottom: 0;} #section4.Caramelo .right-anglet {background: url(../images/personnages/Bg_Caramelo_2.png) no-repeat top right; background-size: contain; height: 100% !important; } #section4.Caramelo .right-anglet img {width: 650px !important; height: auto; position: absolute; left: 0; bottom: 0;} #section4.Caramelo .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right !important; margin:10px 0px !important; padding: 2px !important; line-height:1.1;} #section4.Caramelo .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #ffdfa1;} #section4.Caramelo .caramelo-content-anglet-right {width:80% !important; margin: 50% 20% 0 0; font-family: "Farah" !important; text-align: right !important; height: 100%; display:table; vertical-align:middle; padding: 0px; font-size: 2.6rem;} /**TOUTA**/ #section5.Touta .right-anglet {background: url(../images/personnages/Bg_Touta.png) no-repeat center; background-size: auto; height: 100% !important; } #section5.Touta .right-anglet img {width: 650px ; max-width: 650px; height: auto; position: absolute; right: 0; bottom: 0;} #section5.Touta .left-anglet {background: url(../images/personnages/Bg_Touta_2.png) no-repeat top right; background-size: contain; height: 100% !important; } #section5.Touta .left-anglet img {width: 650px !important; height: auto; position: absolute; right: 0; bottom: 0;} #section5.Touta .left-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right !important; margin:10px 0px !important; padding: 2px !important; line-height:1.1;} #section5.Touta .left-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #a50316;} #section5.Touta .touta-content-anglet-left {width:80% !important; margin: 50% 20% 0 0; font-family: "Farah" !important; text-align: right !important; height: 100%; display:table; vertical-align:middle; padding: 0px; font-size: 2.6rem;} /**MRI3IDA**/ #section6.Mri3ida .left-anglet {background: url(../images/personnages/Bg_Mri3ida.png) no-repeat center bottom; background-size: contain; height: 100% !important; } #section6.Mri3ida .left-anglet img {width: 650px ; max-width: 650px; height: auto; position: absolute; left: 0; bottom: 0;} #section6.Mri3ida .right-anglet {background: url(../images/personnages/Bg_Mri3ida_2.png) no-repeat top right; background-size: auto; height: 100% !important; } #section6.Mri3ida .right-anglet img {width: 650px !important; height: auto; position: absolute; left: 0; bottom: 0;} #section6.Mri3ida .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right !important; margin:10px 0px !important; padding: 2px !important; line-height:1.1;} #section6.Mri3ida .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #b55741;} #section6.Mri3ida .mri3ida-content-anglet-right {width:80% !important; margin: 50% 20% 0 0; font-family: "Farah" !important; text-align: right !important; height: 100%; display:table; vertical-align:middle; padding: 0px; font-size: 2.6rem;} /**QUIZ**/ #section7.Quiz .left-anglet {background: url(../images/personnages/Bg_Quiz.png) no-repeat center bottom; background-size: contain; } #section7.Quiz .left-anglet img {width: 650px !important; max-width: 100% !important; min-width: 800px !important; height: auto; position: absolute; left: 0; bottom: 0;} #section7.Quiz .right-anglet {background: url(../images/personnages/Bg_Quiz_2.png) no-repeat right bottom; background-size: auto; } #section7.Quiz .right-anglet img {width: 650px !important; height: auto; position: absolute; left: 0; bottom: 0;} #section7.Quiz .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right !important; margin:10px 0px !important; padding: 2px !important; line-height:1.1;} #section7.Quiz .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #b55741;} #section7.Quiz .Quiz-content-anglet-right {width:90% !important; margin: 0 !important ; font-family: "Farah" !important; text-align: right !important; height: 100%; display:table; vertical-align:middle; padding: 350px 200px 0px 0px; font-size: 2.6rem;} #section7.Quiz .Quiz-main { position: absolute; width: 100%; height: 100%; margin:200px auto 0 auto !important ; text-align: center !important; display:table-cell; vertical-align:middle; padding: 0px; } #section7.Quiz .Quiz-main img {margin: 0 auto !important ; text-align: center !important; display:table-cell; vertical-align:middle; padding: 0px; } #section7.Quiz .Quiz-main.hidden {visibility:hidden;} #section7.Quiz .Quiz-main.visible {visibility:visible;} /**S7AB**/ #section1.S7ab #S7ab { width: 100%; height: auto; margin:0 auto !important ; text-align: center !important; padding: 0px; } #section1.S7ab #S7ab_Title { width: 100%; height: auto; margin:150px auto -20px auto !important ; text-align: center !important; padding: 0px; } #section1.S7ab .S7ab_All img {margin: 0 auto !important; max-width : 90%; text-align: center !important; display:table-cell; vertical-align:top; padding: 0px; } #section1.S7ab .S7ab_All.hidden {visibility:hidden;} #section1.S7ab .S7ab_All.visible {visibility:visible;} .ImageContentDesktop {display: block; visibility:visible;} .ImageContentMobile {display: none !important; visibility:hidden;} #fp-nav ul li a span, .fp-slidesNav ul li a span { width: 15px; height: 15px; border: 3px solid #0076c4; background: #FFF; border-radius: 10; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {border: 3px solid #FFF; background: #0076c4; -webkit-border-radius: 10; -moz-border-radius: 10; border-radius: 10; } .slideInRight { position: absolute; } /* AR */ /* MOBILE */ @media only screen and (max-width: 767px) { #section1.S7ab {table-layout: auto !important;} #section2.Noisetta {table-layout: auto !important;} #section3.Chkilita {table-layout: auto !important;} #section4.Caramelo {table-layout: auto !important;} #section5.Touta { table-layout: auto !important;} #section6.Mri3ida { table-layout: auto !important;} #section7.Quiz { table-layout: auto !important;} #header .container #Logo {width:50% !important; margin:0px auto 0 0px !important;} #header .container #Logo img {width:50% !important; height: auto !important; margin : 0 auto !important;} #header .social, #header .social-mobile { width:auto !important; position: absolute; top:10px; right:20px} #header .social .fb, #header .social-mobile .fb {float: left;} #header .social > a, #header .social-mobile > a { } /**S7AB**/ #section1.S7ab {width: 100% !important; height: auto !important; display: block !important;} #section1.S7ab #S7ab { width: 100% !important; margin:0 auto !important ; text-align: center !important; padding: 0px; } #section1.S7ab #S7ab_Title { width: 60% !important; margin:100px auto 0 auto !important ; text-align: center !important; vertical-align:middle; padding: 0px; } #section1.S7ab #S7ab img {width: 100% !important; height: auto !important; margin: 30px auto 0 auto !important ; text-align: center !important;} #section1.S7ab #S7ab_Title img {width: 100% !important; height: auto !important; margin: 0 auto !important ; text-align: center !important;} #section1.S7ab .S7ab_All.hidden {visibility:hidden;} #section1.S7ab .S7ab_All.visible {visibility:visible;} .ImageContentDesktop {display: none !important; visibility:hidden;} .ImageContentMobile {display: block !important; visibility:visible } #fp-nav ul li a span, .fp-slidesNav ul li a span { width: 15px; height: 15px; border: 3px solid #0076c4; background: #FFF; border-radius: 10; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {border: 3px solid #FFF; background: #0076c4; -webkit-border-radius: 10; -moz-border-radius: 10; border-radius: 10; } /**NOISETTA**/ #section2.Noisetta {width: auto !important; height: auto !important; display: block !important;} #section2.Noisetta .left-anglet {background: url(../images/personnages/Bg_Noisetta.png) no-repeat bottom; background-size: contain; width: 100% !important; height: auto !important;} #section2.Noisetta .left-anglet img {width: 100% !important; max-width: 100% !important; min-width: 100% !important; position:inherit;} #section2.Noisetta .right-anglet {background: url(../images/personnages/Bg_Noisetta_2.png) no-repeat center right; background-size: 95%; width: 100% !important; height: auto !important; margin-top:30px !important;} #section2.Noisetta .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: center !important; margin:10px auto !important; padding: 2px !important; line-height:0.7;} #section2.Noisetta .noisette-content-anglet-right {width:auto !important; margin: 140px auto 0 auto !important ; font-family: "Farah" !important; text-align: center !important; padding: 0 !important; font-size: 2rem;} #section2.Noisetta .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #1a6e4c;} /**CHKILITA**/ #section3.Chkilita {width: auto !important; height: auto !important; display: block !important;} #section3.Chkilita .right-anglet {background: url(../images/personnages/Bg_Chkilita_2.png) no-repeat top right; background-size: contain; width: 105% !important; height: auto !important;} #section3.Chkilita .right-anglet img {width: 100% !important; max-width: 100% !important; min-width: 100% !important; position:inherit;} #section3.Chkilita .left-anglet {background: url(../images/personnages/Bg_Chkilita.png) no-repeat top center; background-size: contain; width: 100% !important; height: auto !important; margin-top:10px !important;} #section3.Chkilita .left-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: center !important; margin:10px auto !important; padding: 2px !important; line-height:0.7;} #section3.Chkilita .left-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #88512b;} #section3.Chkilita .chkilita-content-anglet-left {width:auto !important; margin: 140px auto 0 auto !important ; font-family: "Farah" !important; text-align: center !important; padding: 0 !important; font-size: 2rem;} /**CARAMELO**/ #section4.Caramelo {width: auto !important; height: auto !important; display: block !important;} #section4.Caramelo .left-anglet {background: url(../images/personnages/Bg_Caramelo.png) no-repeat bottom; background-size: contain; width: 100% !important; height: auto !important;margin-top:5px;} #section4.Caramelo .left-anglet img {width: 100% !important; max-width: 100% !important; min-width: 100% !important; position:inherit;} #section4.Caramelo .right-anglet {background: url(../images/personnages/Bg_Caramelo_2.png) no-repeat center right; background-size: 95%; width: 100% !important; height: auto !important; margin-top:0px !important;} #section4.Caramelo .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: center !important; margin:10px auto !important; padding: 2px !important; line-height:0.7;} #section4.Caramelo .caramelo-content-anglet-right {width:auto !important; margin: 185px auto 0 auto !important ; font-family: "Farah" !important; text-align: center !important; padding: 0 !important; font-size: 2rem;} #section4.Caramelo .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #ffdfa1;} /**TOUTA**/ #section5.Touta {width: auto !important; height: auto !important; display: block !important;} #section5.Touta .right-anglet {background: url(../images/personnages/Bg_Touta.png) no-repeat top right; background-size: contain; width: 100% !important; height: auto !important;} #section5.Touta .right-anglet img {width: 100% !important; max-width: 100% !important; min-width: 100% !important; position:inherit; margin-top: -15px;} #section5.Touta .left-anglet {background: url(../images/personnages/Bg_Touta_2.png) no-repeat top center; background-size: contain; width: 100% !important; height: auto !important; margin-top:10px !important;} #section5.Touta .left-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: center !important; margin:10px auto !important; padding: 2px !important; line-height:0.7;} #section5.Touta .left-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #a50316;} #section5.Touta .touta-content-anglet-left {width:auto !important; margin: 185px auto 0 auto !important ; font-family: "Farah" !important; text-align: center !important; padding: 0 !important; font-size: 2rem;} /**MRI3IDA**/ #section6.Mri3ida {width: auto !important; height: auto !important; display: block !important;} #section6.Mri3ida .left-anglet {background: url(../images/personnages/Bg_Mri3ida.png) no-repeat bottom; background-size: cover; width: 100% !important; height: auto !important;} #section6.Mri3ida .left-anglet img {width: 100% !important; max-width: 100% !important; min-width: 100% !important; position:inherit;} #section6.Mri3ida .right-anglet {background: url(../images/personnages/Bg_Mri3ida_2.png) no-repeat center right; background-size: cover; width: 100% !important; height: auto !important; margin-top:0px !important;} #section6.Mri3ida .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: center !important; margin:10px auto !important; padding: 2px !important; line-height:0.7;} #section6.Mri3ida .mri3ida-content-anglet-right {width:auto !important; margin: 140px auto 0 auto !important ; font-family: "Farah" !important; text-align: center !important; padding: 0 !important; font-size: 2rem;} #section6.Mri3ida .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #b55741;} /**QUIZ**/ #section7.Quiz .left-anglet {width: 100% !important; background: url(../images/personnages/Bg_Quiz.png) no-repeat left bottom; background-size: contain; display: none;} #section7.Quiz .left-anglet img {width: 900px !important; max-width: 100% !important; min-width: 800px !important; height: auto; position: absolute; left: 0; bottom: 0;} #section7.Quiz .right-anglet {width: 80% !important; background: url(../images/personnages/Bg_Quiz_2.png) no-repeat right bottom; background-size: cover; margin-top: 40px;} #section7.Quiz .right-anglet img {width: 900px !important; height: auto; position: absolute; left: 0; bottom: 0;} #section7.Quiz .right-anglet p {font-family: "Farah" !important; font-weight: 600; color: #FFF; text-align: right !important; margin:10px 0px !important; padding: 2px !important; line-height:1.1;} #section7.Quiz .right-anglet p span {font-family: "Farah" !important; font-weight: 900; color: #b55741;} #section7.Quiz .Quiz-content-anglet-right {width:90% !important; margin: 0 !important ; font-family: "Farah" !important; text-align: right !important; height: 100%; display:table; vertical-align:middle; padding: 350px 200px 0px 0px; font-size: 2.6rem;} #section7.Quiz .Quiz-main { position: absolute; width: 100%; height: 100%; margin:200px auto 0 auto !important ; text-align: center !important; display:table-cell; vertical-align:middle; padding: 0px; } #section7.Quiz .Quiz-main img {width:90% !important; margin: 0 auto !important ; text-align: center !important; display:table-cell; vertical-align:middle; padding: 0px; } #section7.Quiz .Quiz-main.hidden {visibility:hidden;} #section7.Quiz .Quiz-main.visible {visibility:visible;} .slideInRight { position: static; } } @media only screen and (max-width: 1400px) { } @media only screen and (max-width: 1030px) and (min-width: 767px) { }