@font-face {
font-family: "Centauri";
src: url("Centauri.eot");
src: url("Centauri.woff") format("woff"),
url("Centauri.otf") format("opentype"),
url("Centauri.svg#filename") format("svg");
}

@font-face {
font-family: "MinionPro-Regular";
src: url("MinionPro-Regular.eot");
src: url("MinionPro-Regular.woff") format("woff"),
url("MinionPro-Regular.otf") format("opentype"),
url("MinionPro-Regular.svg#filename") format("svg");
}

body{
color:#cccccc !important;
/*cursor: url('https://louismarietteperfume.com/gfx/cursor.png')50 50, auto ;	*/
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b02618" width="15px" height="15px" viewBox="0 0 7.5 7.5"><circle cx="3.5" cy="3.5" r="3.0"/></svg>') 7.5 7.5, auto;
font-family: Arial;
font-size: 16px;
color:#ffffff;


}

h1, h2{
	font-family: MinionPro-Regular;
	text-transform:uppercase;
	color: #fff;
	
	text-align: center;
	-webkit-background-clip: text;
	-moz-background-clip: text;	
}
h1{
	font-size:28px;
}
h2{
	font-size:20px;
}
h3{
	font-size:24px;
	color: #fff;
}
h1.normal{
	font-family: Arial;
	text-align: left;
	text-shadow:0px 0px 0px #000;
}
.title{
	
	color: #fff;
	background:#000000;
	transition: 0.5s;
	display: inline-block;
  position: relative;
  padding-right:80px;
  padding-left: 80px;
  margin-top:5px;
}

a{ 
	color:#999999;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b02618"  width="30px" height="30px" viewBox="0 0 15 15"><circle cx="7.5" cy="7.5" r="7"/></svg>') 15 15, auto;

}

 .popup {
            position:absolute;
            top: 40%;
            /*background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid gray;
            border-radius: 5px;*/
            text-align: center;
            z-index: 9999;
            width: 100%;
            
        }
        
 #acceptButton{
 	background-image: url('https://louismarietteperfume.com/gfx/discovermorebutton.png');
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0);
    width: 234px; 
    height: 45px; 
    border: 0px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b02618"  width="30px" height="30px" viewBox="0 0 15 15"><circle cx="7.5" cy="7.5" r="7"/></svg>') 15 15, auto;

 }
 
  #acceptButton.homepage{
 	background-image: url('https://louismarietteperfume.com/gfx/startyourjourneybutton.png') !important;
 	}

.bgr{
	background-image: url('https://louismarietteperfume.com/gfx/bgr.jpg');
	background-size: cover;
	background-position:center center;
	margin:0px !important; 
	padding:0px !important;
	
}
.sublist{
	margin-left:30px;
}

.contenttext{
	text-align:left;
	padding-left:5%;
	padding-right:5%;
	padding-top:0px;
}

.contenttextwhite{
	text-align: center
	background: #ffffff;
	padding-top:0px;
}
.contactme{
	/*cursor: url('https://louismarietteperfume.com/gfx/cursoremail.png')50 50, auto;	*/
	cursor: url('https://louismarietteperfume.com/gfx/cursor.png')50 50, auto ;
}
.contactme2{
	cursor: url('https://louismarietteperfume.com/gfx/cursoremail2.png')50 50, auto;	
}
.emailmebtn{
	display: none;
	color: #666666 !important;
	
}
td{
	border:1px solid #ffffff;
	padding:5px;
}

.titleanimated{
	max-height:45px;
	max-width:100%;
	height:auto;
	width:auto;
	display: block;
  margin-left: auto;
  margin-right: auto;
	border:0px;
}

.footermenu a{
	
	padding-left:10px;
	padding-right:10px;
	font-weight: bold;
	font-size:10px;
	text-decoration:none;
	color: #666666;
	text-align: center;

}

#menuword{
	display:inline-block;
}

.mainmenu a{
	
	font-size:24px;
	font-family: MinionPro-Regular;
	text-decoration:none;
	text-transform:uppercase;
	color: #666666;
	text-shadow: 1px 1px 1px #999;
	text-align: left !important;

}


.mainmenu a:hover, .mainmenu a.active, .footermenu a:hover, .footermenu a.active{
	
	color: #b02618;
}
.mainmenu {
	margin-bottom:15px;
}


.footermenu {
	margin-top:25px;
	margin-bottom:15px;
}
.playbutton{
	width:235px;
	height:25px;
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b02618"  width="30px" height="30px" viewBox="0 0 15 15"><circle cx="7.5" cy="7.5" r="7"/></svg>') 15 15, auto;
}

.contactform{
	width:90%;
	text-align:left;
	padding-top:20px;
}



#video1{
  /*background: black url('https://louismarietteperfume.com/gfx/loader.gif') center center no-repeat ;
	background: center 4% / 4% 8% no-repeat black url("https://louismarietteperfume.com/gfx/loader.gif");*/
}

label{
	display:inline-block;
	width: 40%;
	padding:10px 0px;
	font-family: MinionPro-Regular;
	font-size:20px;
	text-transform: uppercase;
	vertical-align: middle
}

input[type=text], select, textarea{
	width:50%;
	padding:10px;
	background: rgba(0, 0, 0, 0);
	color: #ffffff;
	font-family: Arial;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid #989797;
  box-sizing:border-box;
}
input[type=checkbox]{
	margin-left:40%;
	
}
select:focus{
	background:#000000;
}

#tandc{
	margin-left:0px;
}

#ferror{
	color: #b02618;
	font-style:italic;
}

.submitbtn, .g-recaptcha{
	background-image: url('https://louismarietteperfume.com/gfx/submitbutton2.png');
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0);
    width: 200px; 
    height: 45px; 
    border: 0px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999; /* Sit on top */
  padding-top: 60px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  margin: auto;
  border: 0px ;
  width: 720px;
  height:500px;
  color: #ffffff;
}

.formtitle{
	font-family: MinionPro-Regular;
	font-weight:bold;
	font-size: 36px;
	padding-top: 20px;
	letter-spacing: 1px;
	margin-left:10px;
}
.formsubtitle{
	font-family: MinionPro-Regular;
	font-weight:bold;
	font-size: 28px;
	letter-spacing: 1px;
}

.form{
	background-image: url('https://louismarietteperfume.com/gfx/formbgr.png');
    background-size:cover;
    background-position: center;
}


/* The Close Button */
.close {
  color: #ffffff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #ccc;
  text-decoration: none;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b02618"  width="30px" height="30px" viewBox="0 0 15 15"><circle cx="7.5" cy="7.5" r="7"/></svg>') 15 15, auto;
}

 /* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
/*.dropdown:hover .dropdown-content {display: block;}*/

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;} 

#myDropdown1 {
	margin-left: -20px;
}


.show {display: block;}

.ecogreen{
	border:1px solid green;
	padding:4%;
	width:95%;
	text-align:center;
}

.ecogreen h3{
	color: green;
}

.imgcontainer{
	position: relative;
	width:30%;
	display: inline-block;
	margin:1%;

}
#partners .imgcontainer{
	width:12%;
}

#partners .imgcontainer{
	color: #b02618;
}

.tvappearances{
	width:35% !important;
	padding:5%;
	opacity: 0.7;
}

.mklbItem {
            width: 100%;
            display:block;
        }
.imgtitle {
            background-color: rgb(0, 0, 0, 0.5);
        /*positioned relative to parent div (container) */
            position: absolute;    
/* bottom margin is 0 so that it
    coincides with container's bottom margin*/
            bottom: 0;            
            color: white;
            width: 100%;
            font-size: 15px;
       		padding-top:10px;
       		padding-bottom:10px;
            text-align: center;
            /*invisible because opacity is 0*/
            opacity: 0;            
            transition: 0.6s;
            font-family: "MinionPro-Regular";
            font-weight:normal;
        }
 
.imgcontainer:hover .imgtitle, .imgcontainer:focus .imgtitle {
   /*becomes visible on hover*/
           opacity: 1;        
}

.swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-left  {
  background-image: none !important;
}

.swiper-slide{
	opacity:1;
}
.swiper-slide-active{
	opacity:1;
}

.swiper-slide .content{
	text-shadow: 1px 1px 2px #000000;
}

#overlay {
	background: rgba(0,0,0,1) !important;
}

/* ------------------ left menu ------------ start --------------------- */
.sidepanel {
  height: 100%; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 9999999; /* Stay on top */
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,1); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
 font-family: MinionPro-Regular;
 text-transform: uppercase;

  transition: transform 250ms;
  color: #b02618;
  transition: 0.5s;

}

/* The sidepanel links */
.sidepanel a {
  padding: 5px 5px 5px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
   display: inline-block;
  position: relative;
   transition: 0.5s;
}

/* When you mouse over the navigation links, change their color */

a.effect-shine:hover, .title {
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  transform: translateX(10px);
  animation: shine 2s infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style the button that is used to open the sidepanel */
.openbtn {
	font-family: "MinionPro-Regular";
	position: fixed; /* Stay in place */
  font-size: 20px;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23b02618"  width="30px" height="30px" viewBox="0 0 15 15"><circle cx="7.5" cy="7.5" r="7"/></svg>') 15 15, auto;
  background-color: rgba(0,0,0,0);
  color: #b02618;
  padding: 10px 15px;
  border: none;
  margin-bottom:-40px;
  z-index:9999;
}

.closebtn{
	margin-top:-60px;
}

.thejourney{
	width:50%;
}

.sidepanel video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* Just styling the content of the div, the *magic* in the previous rules */
.sidepanel .caption {
  z-index: 1;
  position: relative;
margin-bottom:80px;
}


.article{
	width:21%;
	float: left;
	padding:2%;
}
.article img{
	width: 100%;
	margin-bottom:20px; 
	margin-top:20px; 
}
.articletitle{
	font-family: MinionPro-Regular;
	font-size:20px;
	padding-bottom:10px;
}
a .articletitle {
	text-decoration:none;
}
.articleimg{
width:35%;
padding-right:20px;
float:left;
}
a .articleshort {
	color:#ffffff;
	text-decoration: none;
}

a:hover .article img{
	border:1px solid #ffffff !important;
}

.readmore{
	text-align:right;
	font-weight:bold;
}

.backpress{
	padding-top:20px;
	padding bottom:20px
	font-family: MinionPro-Regular;
	font-size:20px;
	font-weight:bold;
}
.backpress a{
	text-decoration: none;
	font-family: MinionPro-Regular;
	color:#ffffff;
}


/* ------------------ cookie notice ------------ start --------------------- */  

#cookie-notice {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	max-width: 450px;
	margin: auto;
	padding: 0.5rem;
	border: 1px solid #eee;
	background-color: #fefefe;
	box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 22px;
	font-size: 15px;
	text-align: center;
	color: #555;
}
.cookie-notice-more {
	margin: 0 0.25rem;
	color: inherit;
}
.cookie-notice-close {
	padding: 0 0.5rem;
	border: 1px solid #ddd;
	border-radius: 0.125rem;
	line-height: 20px;
	text-decoration: none;
	color: #888;
}


#partner1info, #partner2info, #partner3info, #partner4info, #partner5info, #partner6info {
   opacity: 0.0;
   position:absolute;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background: #ffffff;
    color: #000000;
    padding-left:5%;
	padding-right:5%;
	width: 90%;
}
#partners h2{
	color: #000000;
}

@media only screen and (max-width: 1250px) {
	#video22, #video33{
		clear:both;
		width: 46% !important;
	}
}


@media only screen and (min-width: 768px) {
	#cookie-notice {
		bottom: 1rem;
		border-radius: 0.25rem;
	}
	.cookie-notice-close {
		float: right;
	}
}

/* ------------------ cookie notice ------------ end --------------------- */   


/* ------------------ left menu ------------ end --------------------- */        
@media (min-width: 891px){
#articles div:nth-child(4n of .clearme){
	clear:both;
	
}
}
@media (max-width: 800px){
	.contactform{
		padding-top:15px;
	}
	.modal-content {
	  width: 95%;
	  height:auto;
	  background-position:top;
	}
	label{
		font-size:16px;
	}
	
	input[type=text], select, textarea{
		padding:7px;
		font-size:14px;
	}

}

@media only screen and (hover: none) and (pointer: coarse){
	.emailmebtn{
		display:block;
	}
}

@media (max-width: 890px){

        .thejourney {
	width:85%;
}
 #acceptButton, .submitbtn, .g-recaptcha{
    width: 182px; 
    height: 35px; 

 }	
 	.article{
	width:29%;
	padding:2%;
}
#articles div:nth-child(3n of .clearme){
	color:#007AFF !important;
	clear:both;
	
}
}

@media (max-width: 650px){
        .sidepanel a {
  padding: 3px 3px 3px 22px;
  font-size: 20px;
  }
  	.article{
	width:45%;
	padding:2%;
}
#articles div:nth-child(2n of .clearme){
	clear:both;
}
#articles div:nth-child(3n of .clearme){
	clear:none;
}
.articleimg{
width:100%;
padding-right:0px;
float:none;
}
#video22, #video33{
		
		width: 100% !important;
	}

}

@media (max-width: 600px){
	.title{
		padding-left:50px;
		padding-right: 50px;
		 margin-top:15px;
	}
	
	.contactform{
		width:95%;
		text-align:left;
	}
	.ecogreen{
		padding:2%;
		width:80%;
	}
	.imgcontainer{
	width:55% ;
	padding:0%;
	}
	
	#partners .imgcontainer{
	width:20%;
}
	
	.tvappearances{
		width:80% !important;
	}
	
	.imgtitle {
		font-size:14px;
		opacity: 1; 
		padding-top:5px;
       		padding-bottom:5px;
	}
	
	 .popup {
            top: 30%;
            left: 10%;          
            padding: 0px;     
            width: 80%;
            
        }

.sidepanel video {
  min-width: 150%;
  min-height: 150%;
  position: absolute;
  top: 75%;
  left: 70%;
  
}
.thejourney {
	width:95%;
}


#menuword{
	display:block;
	font-size:12px;
}
.openbtn{
		font-size: 22px;
	}
	
.formtitle{
	font-size: 30px;

}
.formsubtitle{
	font-size: 24px;

}
	
}





@media (max-width: 529px){
	.title{
		font-size: 22px;
		
	}
	.article{
	width:90%;
	padding:3%;
	clear:both;
}
#partners .imgcontainer{
	width:30%;
}

}

@media (orientation: portrait) {
.soundcontrols{
	position: absolute;
    bottom: 0;
     left: 0;
  width: 100%;
  text-align: center;
}

.videocontainer{
	display: flex; 
	height: calc(100vh - 190px); 
}

}