/*
Theme Name: Pepito Rinaldi
Author: Agence Rinaldi
Version: 1.0
License: none
Text Domain: pepito-rinaldi
Requires at least: 4.6
Tested up to: 6.0
Requires PHP: 5.6
*/

:root {
    --white:#FFFFFF;
	--navy:#071C3F;
	--yellow:#FFB92D;
	--red:#CF1F15;
	--pink:#E53471;
	--teal:#6DC7B9;
	--grey:#ECEFF4;
}

* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

html {
	width:100vw;
	/* scroll-snap-type: y proximity;
	*/
}

body {
	width:100vw;
	padding:0;
	margin:0;
    font-family:'Lato',serif;
    font-weight:400;
	font-size:18px;
	line-height:22px;
	scrollbar-gutter: stable both-edges !important;
	overflow:scroll;
	overflow-x:hidden;
}

section {
    display:block;
    position:relative;
}

.content-general {
	width:1280px;
	max-width:90%;
	text-align:left;
	padding:100px 0;
	margin:auto;
}

.content-general h1,
.content-general h2,
.content-general h3, 
.content-general h4 {
	margin:50px 0 25px 0;
}

.content-general p {
	margin:10px 0;
}

.content-general ol {
	margin:25px 0 25px 50px;
}

.content-general li {
	margin:10px 0 10px 50px;
}

a {
    color:inherit;
    text-decoration:none;
}

a:hover {
    color:inherit;
    text-decoration:underline;
}

section a:hover {
    color:inherit;
    text-decoration:none;
}

.button {
    display:block;
    position:relative;
    font-size:18px;
    color:var(--white);
    background-color:var(--red);
    margin:auto;
    padding:25px 100px;
    text-transform:uppercase;
    font-weight:700;
    width:fit-content;
    max-width: 90%;
}

.button:hover {
	text-decoration:none;
	background-color:#aF0F05;
}

/*        */
/*        */
/* header */
/*        */
/*        */

#header {
    position:relative;
    height:190px;
    background-color:var(--white);
}

#header nav {
    display:flex;
    flex-direction: row;
    justify-content: center;
	align-items: center;
    height:100%;
    margin:auto;
    font-size:22px;
    font-weight:700;
    text-transform:uppercase;
}

#header nav div {
    display: flex;
    padding:0 25px;
	align-items: center;
    height:100%;
}

#header .logo-pepito {
    height:125px;
    width:auto;
}

#header .socials {
    display: flex;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
}

#header .social-logo {
    height:53px;
    width:auto;
    padding:0 5px;
}

#header .language-switcher {
    margin:0 0 0 15px;
}

.instagram-flux-header {
    color:var(--white);
    background-color:var(--red);
    padding:30px 0;
    text-align:center;
    font-size:35px;
}
.instagram-flux-container {
    display:flex;
    align-items:center;
    overflow:hidden;
}

#sb_instagram {
    height:auto !important;
}

/*        */
/*        */
/* footer */
/*        */
/*        */

footer {
    background-color:var(--teal);
    padding:75px 0 25px 0;
}

.footer-container {
    display: flex;
    position: relative;
    margin: auto;
    max-width: 1050px;
    flex-direction: row;
    align-content: flex-start;
    align-items: stretch;
}

.footer-info {
    width:450px;
    max-width:90%;
    padding:0 50px;
}

.footer-left {
    display:inline-block;
    text-align:center;
    margin:auto;
}

footer .logo-pepito {
    height:auto;
    width:260px;
    margin-bottom:25px;
}

.footer-right {
    display:inline-block;
    text-align:left;
    margin:auto;
    border-right:2px solid var(--navy);
    border-left:2px solid var(--navy);
}

.footer-right a {
    font-weight:700;
    line-height:30px;
    text-decoration:underline;
    color:var(--navy);
}

.footer-right a:hover {
    color:var(--white);
}

footer .social-logo {
    height:53px;
    width:auto;
    margin:25px 10px 0 0;
}


/*          */
/*          */
/* sections */
/*          */
/*          */

#page-2-1,
#page-3-1,
#page-4-1,
#page-5-1 {
    height: 400px;
    margin:0;
}

/*          */
/*   home   */
/*          */

#page-1-1 {
    text-align: right;
    background-color:var(--navy);
}

#page-1-1 .home-header-bg {
    display:inline-block;
    position: relative;
    height: 100%;
    width: auto;
    max-width:93vw;
    vertical-align: bottom;
}

#page-1-1 .text {
    position:absolute;
    top:0;
    width:100%;
}

#page-2-1 .text div,
#page-3-1 .text div,
#page-4-1 .text div,
#page-5-1 .text div {
    color: var(--white);
}

#page-1-1 h1 {
    font-weight:400;
    font-size:112px;
    line-height:112px;
    color:var(--white);
    text-align:center;
    margin:65px auto 25px auto;
}

#page-1-1 .tagline {
    font-weight:700;
    font-size:40px;
    line-height:53px;
    color:var(--teal);
    text-align:center;
}

#page-1-2 {
    text-align: center;
    background-color:var(--yellow);
    padding:100px 0;
}

#page-1-2 .bigtext {
    font-size:35px;
    line-height:45px;
    text-transform:uppercase;
    font-weight:900;
    width:900px;
    height:auto;
    max-width:90%;
    margin: 15px auto;
}

#page-1-2 .smalltext {
    font-size:22px;
    line-height:30px;
    width:800px;
    height:auto;
    max-width:90%;
    margin: 15px auto;
}

#page-1-2 .button {
    display:inline-block;
}

#page-1-3 {
    text-align: center;
    background-color:var(--navy);
    padding:100px 0;
}

#page-1-3 #video-1,
#page-3-2 #video-1 {
    width:1024px;
    height:576px;
    max-width:90%;
    margin:50px auto;
}

/*          */
/* products */
/*          */

#page-2-1 {
    text-align: right;
    background-color:var(--red);
}

#page-2-1 .title-image {
    display:block;
    height:100px;
    max-width:90%;
    margin:75px auto 15px auto;
}

#page-2-1 .title-image,
#page-3-1 .title-image,
#page-4-1 .title-image,
#page-5-1 .title-image {
    display:block;
    height:100px;
    max-width:90%;
    margin:75px auto 15px auto;
}

#page-2-1 .text {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;
}
    
#page-2-1 .text div {
    width:812px;
    max-width:90%;
    margin:auto;
    font-size:22px;
    line-height:30px;
    color:var(--white);
}

#page-2-2 {
    padding:75px 0 75px 0;
    text-align: center;
}

#page-2-2 .title {
    font-size:30px;
    margin:auto;
    font-weight:700;
}

#page-2-2 .title {
    width:1088px;
    max-width:90%;
    margin:35px auto;
    font-size:22px;
    line-height:30px;
    color:var(--black);
}

#page-2-3 {
    background-color:var(--navy);
}

#page-2-4 {
    background-color:var(--pink);
}

#page-2-5 {
    background-color:var(--navy);
}

#page-2-6 {
    background-image:url("/wp-content/uploads/2024/04/Flamingo_Pamplemousse-v2.webp");
    background-position:center center;
    background-size:cover;
}

#page-2-3,
#page-2-4,
#page-2-5 {
    text-align:center;
    padding:75px 0 125px 0;
}

#page-2-6 {
    text-align:center;
    padding:200px 0 125px 0;
}

#page-2-3 .product-shot,
#page-2-4 .product-shot,
#page-2-5 .product-shot,
#page-2-6 .product-shot {
    font-size:30px;
    font-weight:700;
    margin:25px auto;
    color:var(--white);
}

#page-2-3 .bigtext,
#page-2-4 .bigtext,
#page-2-5 .bigtext,
#page-2-6 .bigtext {
    font-size:30px;
    font-weight:700;
    margin:25px auto;
    color:var(--white);
}

#page-2-3 .smalltext,
#page-2-4 .smalltext,
#page-2-5 .smalltext,
#page-2-6 .smalltext {
    font-size:22px;
    line-height:30px;
    font-weight:400;
    margin:25px auto;
    color:var(--white);
    width:1100px;
    max-width:90%;
}

#page-2-6 .bigtext,
#page-2-6 .smalltext {
    color:var(--black);
}

.tealbox {
    background-color:var(--teal);
    color:var(--white);
    font-size:20px;
    width:490px;
    max-width:90%;
    padding:10px 20px;
    margin:auto;
}

.tealbox + .tealbox {
    border-top:1px solid var(--white);
}


/*            */
/* publicites */
/*            */


#page-3-1 {
    text-align: right;
    background-color:var(--red);
}

#page-3-1 .text {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;
}

#page-3-2 {
    text-align: center;
    background-color:var(--navy);
    padding:100px 0;
}


/*                 */
/* points de vente */
/*                 */


#page-4-1 {
    text-align: right;
    background-color:var(--red);
}

#page-4-1 .text {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;
}

#page-4-2 {
	padding-top: 75px;
}
#page-4-2 .content {
    width:812px;
    max-width:90%;
    padding:75px 0 75px 0;
    margin:auto;
	text-align:center;
}

#page-4-2 .map-container {
    width:1280px;
    max-width:90%;
    margin:auto;
}

.wpsl-search {
    margin-bottom:15px !important;
    padding: 30px 15px;
}

#wpsl-search-wrap .wpsl-input label {
	width:100%;
}

#wpsl-search-wrap div label {
	width:60%;
	text-align: right;
}

.wpsl-input,
.wpsl-select-wrap {
	margin:0 !important;
}

.wpsl-select-wrap {
	width:50%;
}

#wpsl-radius,
#wpsl-results {
	width:45%;
}

#wpsl-search-btn {
    display:block;
    position:relative;
	font-family:'Lato', sans-serif;
    font-size:18px;
	line-height:18px;
    color:var(--white);
    background-color:var(--red);
    margin:auto;
    padding:10px 50px;
    text-transform:uppercase !important;
    font-weight:700;
    width:fit-content;
	margin:0 40px;

	border-radius:0 !important;
	border:none !important;
	background-image:none;
}

#wpsl-search-btn:hover {
	text-decoration:none;
	background-color:#aF0F05;
}


/*         */
/* contact */
/*         */


#page-5-1 {
    text-align: right;
    background-color:var(--red);
}

#page-5-1 .text {
    position:absolute;
    top:0;
    width:100%;
    text-align:center;
}

#page-5-2 {
    background-color:var(--navy);
    padding: 87px 0 125px 0;
}

#wpcf7-f24519-o1,
#wpcf7-f24435-o1 {
    margin: auto;
    width: 1000px;
    max-width: 100%;
}

#wpcf7-f24519-o1 label,
#wpcf7-f24435-o1 label {
    display:block;
    width:100%;
}


#wpcf7-f24519-o1 p,
#wpcf7-f24519-o1 span,
#wpcf7-f24519-o1 input,
#wpcf7-f24519-o1 textarea,
#wpcf7-f24435-o1 p,
#wpcf7-f24435-o1 span,
#wpcf7-f24435-o1 input,
#wpcf7-f24435-o1 textarea {
    display:block;
    width:100%;
    border:none;
    font-family:'Lato',serif;
    font-size:22px;
}

#wpcf7-f24519-o1 input,
#wpcf7-f24519-o1 textarea,
#wpcf7-f24435-o1 input,
#wpcf7-f24435-o1 textarea {
    font-size:22px;
    padding:20px;
}

#wpcf7-f24519-o1 input[type="submit"],
#wpcf7-f24435-o1 input[type="submit"]  {
    display:block;
    position:relative;
    font-size:18px;
    color:var(--white);
    background-color:var(--red);
    padding:20px 100px;
    text-transform:uppercase;
    font-weight:700;
    width:fit-content;
}

#wpcf7-f24519-o1 input[type="submit"]:hover
#wpcf7-f24435-o1 input[type="submit"]:hover  {
	text-decoration:none;
	background-color:#aF0F05;
}

#page-5-2 .content {
    width:1000px;
    max-width:90%;
    margin:auto;
}

#page-5-2 .tinytext {
    font-size:14px;
    line-height:18px;
    margin-bottom:50px;
}

#page-5-2 p {
    color:var(--white);
    font-size:18px;
}

#page-5-2 .tel {
    font-size:25px;
    font-weight:bold;
}






.desktop-only {
    display:block;
}

.mobile-only {
    display:none !important;
}