* {
  box-sizing: border-box;
}

/*------------------------------------------------------------------
    Layout
-------------------------------------------------------------------*/

/* Set a specific color for each brand */
.inside {
	padding: 20px;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/*------------------------------------------------------------------
    Social
-------------------------------------------------------------------*/


.fa {
	width: 30px;
	height: 30px;	
  padding: 8px;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
	color: white;
}

.fa-facebook {
  background: #2C63D6;
  color: white;
}

.fa-youtube-play {
  background: #EA3B3B;
  color: white;
}

.fa-instagram {
  background: #fdf497;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  color: white;
}

.fa-whatsapp {
  background: #37E578;
  color: white;
}

.location {
  position: relative;
  margin: 0 auto; /* Center it */
}

/* Circle */
.hover15 figure {
	position: relative;
}
.hover15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
h2 span {
	margin-left: 1em;
	color: #aaa;
	font-size: 85%;
}
.column {
	margin: 15px 15px 0;
	padding: 0;
}
.column:last-child {
	padding-bottom: 60px;
}
.column::after {
	content: '';
	clear: both;
	display: block;
}
.column div {
	position: relative;
	float: left;
	width: 300px;
	height: 300px;
	margin: 0 0 0 5px;
	padding: 0;
}
.column div:first-child {
	margin-left: 0;
}
.column div span {
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: -1;
	display: block;
	width: 300px;
	margin: 0;
	padding: 0;
	color: #444;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
}
figure {
	width: 300px;
	height: 300px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
figure:hover+span {
	bottom: -36px;
	opacity: 0.8;
}

/*------------------------------------------------------------------
    Location
-------------------------------------------------------------------*/

*{box-sizing: border-box}

img{max-width: 100%}

input[type=radio]{

position: absolute;
left: -999px

}/*on cache tous les input*/
	
.cadre-demo1 label{
	
cursor:pointer/*on pointe tous les labels*/
	
}

.cadre-demo1{

overflow: hidden;
position: relative;
max-width: 900px;
margin: 2rem auto
	
	}

.testing {

	 background: green;
}


.rowloca {
	width: auto;
    padding: 62px 280px;
	background: white;
	display: block;
	float: left;
}
	
.annonce {
 
  position: relative;
  background-color: #f9f9f9 0,7;
  width: 250px;
  box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.1);
  z-index: 1;
  margin-bottom: 35px;
  margin-right: 10px;
}

.annonce:hover {
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0.6;
}

.desc {
  text-align: center;
}


.locashowcase {
	margin: 0 0 0;
	padding: 0 0 0;
}
.locashowcase:last-child {
	padding-bottom: 0 0 0;
}
.locashowcase::after {
	content: '';
	clear: both;
	display: block;
}

.locashowcase div {
	position: relative;
	float: left;
	width: 250px;
	height: 280px;
	margin: 0 0 35px 13px;
	padding: 0 0 0;
}
.locashowcase div:first-child {
	margin-left: 0 0;
}
	
.vertical-menu {

  position: absolute; /* Position them relative to the browser window */
  width: 230px; /* Set a width if you like */
  padding-top: 62px;
  padding-left: 50px;
  
}

.vertical-menu a {
  font-size: 13px;
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 7px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  box-shadow: 0px 6px 9px 0px rgba(0,0,0,0.1);
}

.vertical-menu a:hover {
  background-color: #F5F5F5; /* Dark grey background on mouse-over */
  color: #ECC336;
}

.vertical-menu a.active {
  background-color: #EFC676; /* Add a green color to the "active/current" link */
  color: white;
}	

.vertical-menu a.title {
  background-color: #EFC676; /* Add a green color to the "active/current" link */
  color: white;
}

.vertical-menu a.selected {
  background-color: #F5F5F5; /* Dark grey background on mouse-over */
  color: #ECC336;
}	

.overlay {
	position: relative;
}

:root {
  --width: 100%;
  --height: 90px;
  --top-color: transparent;
  --bottom-color: #F6CF60;
}

.separator {
  position: absolute;
  width: var(--width);
  height: var(--height);
  z-index: 2;
  bottom: 0;
}

.separator::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 0 0, 0 100%);
}

.separator::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--bottom-color);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.separator.reverse {
  transform: rotateY(180deg);
}

.overlay-header {
  margin-top: 315px;
  position: absolute; /* Sit on top of the page content */
  z-index: 2;
}	

.social-links a {
	font-size: 14px;
    padding: .25rem 1rem;
    -webkit-transition: .2s;
    transition: .2s;
    color: #e4b649;
    position: center;
}

.social-links a:hover {
	    color: #272727;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 6px 0px 7px;
  text-decoration: none;
  font-size: 14px;
  display: block;
  border: none;
  background: #eee;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  padding-left: 0px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.pres {
	padding-top: 100px;
	padding-bottom: 60px;
}

.presalt {
	padding-top: 100px;
	padding-bottom: 60px;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	display: block;
	background-image: url(https://neweventsanddesign.com/images/bgpresalt.jpg) !important;
}

.presalter {
	padding-top: 100px;
	padding-bottom: 60px;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	display: block;
	background-image: url(https://neweventsanddesign.com/images/bgpreaslter.jpg) !important;
}

.precolor {
	padding-top: 100px;
	padding-bottom: 60px;
	background-repeat: no-repeat;
	background-position: right;
	height:100%;
	background-size: auto 100%;
	background-image: url(https://neweventsanddesign.com/images/formule01.jpg) !important;
}

.precolors {
	padding-top: 100px;
	padding-bottom: 60px;
	background-repeat: no-repeat;
	background-position: left;
	height:100%;
	background-size: auto 100%;
	background-image: url(https://neweventsanddesign.com/images/formule02.jpg) !important;
}

.precoloring {
	padding-top: 100px;
	padding-bottom: 60px;
	background-repeat: no-repeat;
	background-position: left;
	height:100%;
	background-size: auto 100%;
	background-image: url(https://neweventsanddesign.com/images/formule03.jpg) !important;
}

.info {
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	display: block;
	background-color: #FFF39F;
	font-size: 12px;
}

hr {
  border:none;
  height: 20px;
 	width: 90%;
	height: 50px;
	margin-top: 0;
	border-bottom: 0px solid #1f1209;
	box-shadow: 0 10px 30px -20px #444;
  margin: -50px auto 5px; 
}

#demotext {
 text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

button {
		margin-top: -10px;
}
button a:hover {
	    color: #F9BE3E;
}