/*Général*/
html,body {background:linear-gradient(rgba(238,238,238,.8),rgba(238,238,238,.8)),url(rscr/prism.png); background-attachment: fixed; background-position:center top;margin:0px;font-family: 'Electrolize', sans-serif;font-size:10pt;}
a {color:#294545;text-decoration:none;transition:1s;}
a:hover {color:#FFB000;transition:1s;}
h1 {margin:0 auto -30px auto;text-align:center;font-size:45px;color:#97549D;text-shadow:1px 1px 2px #000;font-family: 'Electrolize', sans-serif; z-index:10;background:white;padding:10px;border-radius:5px;width:50%;}
h1 span{font-size:22px;	text-transform:uppercase;}

div.line {height:0px;width:30%;border-top: 1px solid #fefefe;border-bottom: 1px solid #eee;margin:5px auto 10px 0px;}    

.msg {width:95%;text-align:center;vertical-align:middle;min-height:100px;box-sizing: border-box;border-spacing:2px 5px;padding:1.5rem;box-shadow:0 1px 2px #aaa;background:white;margin:1rem auto;border-radius:3px;user-select:none;animation:fly-in-from-left .5s 0s ease both;transform-origin:top left;position: relative;}}

.visible {display:block}
.hidden {display:none;}
.right {text-align:right;}
.clr {clear:both;}

.filterbox {} 
.hidden {display:none;}


.ui-draggable, .ui-droppable {background-position: top;}

/*Fancy-line*/
  hr.fancy-line {border: 0;height: 1px;}
  hr.fancy-line:before {top: -0.5em;height: 1em;}
  hr.fancy-line:after {content:'';height: 0.5em; top:1px;}
  hr.fancy-line:before, hr.fancy-line:after {content: '';position: relative; width: 100%;}
  hr.fancy-line, hr.fancy-line:before {background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);}
  #bottom-line {margin-top:30px;}
  
  hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
  }

/*Menu principal*/
.menu {display:none;transition:all 0.3s ease;width:100%;background:linear-gradient(rgba(123,38,130,.7),rgba(123,38,130,.9)),url(rscr/prism.png); background-position: center top; position:fixed;top:0px;left:0px;margin:0px 0px 10px 0px;box-sizing: border-box;z-index: 10;}
.menuContent {display:table;height:50px;width:70%;border-spacing:10px 0px;margin:10px auto 0px auto;}
.menuCell {display:table-cell;width:50px;vertical-align:middle;}
.logo {color:#FFFFFF;font-size:25pt;color:white;display:block;width:100%;}
.logo img {height:80px;}
.menuItem {font-size:14pt;color:#eeeeee;text-align:center;border-radius:3px 3px 0px 0px;box-sizing: border-box;padding:10px 10px;white-space: nowrap;transition:0.5s;}
.menuItem:hover {color:#294545;background:#cacaca;transition:0.5s;}
.selected {background: #eeeeee;color:#294545;font-weight:bold;}
#about {width:50px;}


/*Contenu*/
.content {width:75%;margin:60px auto 0px auto;}
.card {box-shadow:0 1px 2px #aaa;width:95%;background:white;margin:1rem auto;border-radius:3px;box-sizing: border-box}


/*About*/
.zone {width:75%;margin:30px auto;box-sizing: border-box; padding:20px;border:1px solid grey}
.welcome {border-top:50px solid #294545;background:#F9F9F9;}
.mywork {border-top:50px solid #294545;background:#F9F9F9;}
.contact {border-top:50px solid #294545;background:#F9F9F9;}


/*Paypal*/
.paypalbutton {text-align:center;margin:10px auto;}
.paypalbutton * {z-index: 1;}



/*Champs de recherche*/
.search {width:100%;margin:0px auto;padding-bottom:5px;}
  .searchBackground {margin:30px 1px;display:table;margin:0px auto;width:95%;}
  .search-input {width:70%;display:table-cell;}
    .search-input input {width:100%;height:70px;color:#FFB000;font-size:15pt;font-family:electrolize;text-align:center;border:1px solid #cacaca;border-radius:3px;}
    .search-input input::-webkit-input-placeholder {color: #FFD884;} 
  
  .search-second {display:table;border-spacing:10px;width:100%;margin:5px auto;}
  .search-cell {display:table-cell;text-align:center;}
  .search-reset {}
  .count {color:#000;font-size:10pt;}
  #filter-count {color:#FFB000;font-weight:bold;;}


/*Container et card*/
.container {margin:100px auto;}
.content {position: relative;min-height: 100vh;}
.content p {text-align:center;}

.heroLogo {width:100%;margin-bottom:-50px;text-align:center;}
.heroLogo img {width:200px;}

	/*Image Hero*/
	.hero {width:100%;height:300px;background-size:contain;background-repeat:no-repeat;background-position:50% 50%;}
	
	/*Introduction*/
	.introduction {box-shadow:0 1px 2px #aaa;width:95%;background:white;margin:2rem auto;border-radius:3px;box-sizing: border-box;padding:10px;}
	.introduction .hero {background-image:url(logo.webp);}

	/*présentation*/
	.presentation {box-shadow:0 1px 2px #aaa;width:95%;background:white;margin:2rem auto 70px auto;border-radius:3px;box-sizing: border-box;padding:10px;text-align:center;font-size:12pt;}
	.presentation-content {display:table;margin:20px auto;vertical-align:middle;width:80%;border-spacing:5px;font-size:12pt;}
	.presentation-tr {display:table-row;}
	.presentation-img {display:table-cell;vertical-align:middle;text-align:center;} 
	.presentation-img img {width:200px;border-radius:5px;}
	.presentation-text {display:table-cell;padding:10px;text-align:center;padding:5px;}
	p.intro {font-size:35pt;text-align:center;}
  
.card, .card-control {box-shadow:0 1px 2px #aaa;width:95%;background:white;margin:1rem auto 5rem auto;border-radius:3px;box-sizing: border-box;z-index:0;}
.section {transition: opacity .25s ease-in-out;}
.card-control {padding:10px;text-align:justify;}
.card:hover {opacity:1;}
.card:nth-child(even){}  

.card-table {display:table;width:100%;height:150px;box-sizing: border-box;font-size:1em;}
.card-row {display:table-row;}
.card-cell {display:table-cell;}
.card-content {padding:10px;}


/*Inscription*/
.card-note {width:15%;text-align:center;vertical-align:center;height:30px;padding:5px;border-radius:0 5px 5px 0;text-align:center;color:white;font-weight:bold;vertical-align:middle;}
.card-content {padding:20px;}
.card-content .table {display:table;border-spacing:10px;width:90%;margin:auto;}
.card-content .table-cell {display:table-cell;}
.card-content input, .card-content select, .card-content option,.card-content textarea {width:90%;padding:10px; color:#202020;border-radius:5px;border:0px;background:#F0F0F0;}


.card-insc-validate {text-align:center;font-size:12pt;}
.card-insc-validate button {width:50%;height:50px;font-size:15pt;border:0;background:#3F82F8;border-radius:5px;padding:10px;font-weight:bold;margin:10px auto;color:#FFF;transition: all 0.2s;}
.card-insc-validate button:hover {box-shadow:1px 1px 10px #808080;text-shadow:1px 1px 3px #808080;transition: all 0.2s;cursor:pointer;}
.card-insc-validate input {width:50%;}


/*Bouton inscription*/
.insc-button {width:15%;background:rgba(53,130,248,.1);color:#3F82F8;padding:10px;vertical-align:middle;text-align:center;}
.insc-button:hover {background:#3F82F8;color:white;transition:all 0.2s;color:;cursor:pointer;}
.tarifs {color:#909090;display:block;font-style: italic;font-size:80%;margin:10px 0 0 0;}
.insc-button:hover .tarifs {color:#CCC;}
.insc-complet {background:rgba(0,0,0,.2);}



/*Contenu des cartes*/
  .code,.name {color:#FFB000;font-weight:bold;line-height: 200%;font-size:20pt;display:block;}
  .classe, .type {color:#AAAAAA;text-transform:capitalize}
  .caract-list {font-size:8pt;text-transform:capitalize;}
  .caract-stat {display:none;}
  .geo img {height:20px;margin-right:10px;vertical-align:middle}
  .geo tr td:first-child {text-align:center;}
 
 
 /*CDO*/
	/*Intro*/
	.sponsor {text-align:center;margin:20px auto;}
	.sponsor img {height:100px;margin:5px 10px;}
	
	.formLogin {text-align:center;}
	.formLogin input, .formLogin button {font-size:15pt;color:grey;padding:5px;border:1px solid grey;border-radius:5px;}
	
	/*Questionnaire*/
	.table {}
	.asterix {color:red;}
	.card-desc {width:100%;margin:5px auto;font-size:12pt;text-align:center;}
	.cdo-table {width:90%;margin:5px 5%;display:table;border-spacing:10px;box-sizing: border-box;text-align:center;}
		.cdo-radio {display:table-cell;width:20%;text-align:center;padding:10px;border-radius:5px;box-sizing: border-box;}
		.cdo-radio i {font-size:30pt;margin:10px;}
		.cdo-radio:hover {background:#97549D;color:white;cursor: pointer;transition:all .3s;}		
		input[type=radio] {width:0;height:0;opacity: 0;display:none;}	
		[type="radio"]:checked + label {background: #843989;border-color: green;color: white;}
		
	.card-left {width:20%;text-align:right;font-size:12pt;padding:5px;}
	.card-left .desc {display:block;width:70%;text-align:right;font-size:10pt;margin:10px 0 0 auto;}
	.card-right {width:80%;text-align:center;font-size:12pt;padding:5px;}
	.card-right input, .card-right select, .card-right textarea, .card-right option {font-size:13pt;background:white;border:1px solid #A0A0A0;}
	.card-right:hover input {border:1px solid #843989;}
	
	.submitInfo {text-align:center;font-size:40pt;color:46A020;font-weight:bold;}

/*Footer*/
footer {width:95%;text-align:center;text-align:center;box-sizing: border-box;margin:1rem auto 0 auto;}
footer .disclaimer {display:block;padding:1.5rem;box-shadow:0 1px 2px #aaa;background:white;margin:0 auto;border-radius:3px;}



/*-----Slider-------*/

	/*Style des sliders*/
	.slidecontainer {
	  width: 100%; /* Width of the outside container */
	}

	/* The slider itself */
	.slider {
	  -webkit-appearance: none;  /* Override default CSS styles */
	  appearance: none;
	  width: 100%; /* Full-width */
	  height: 25px; /* Specified height */
	  background: #d3d3d3; /* Grey background */
	  outline: none; /* Remove outline */
	  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
	  transition: opacity .2s;
	}

	/* Mouse-over effects */
	.slider:hover {
	  opacity: 1; /* Fully shown on mouse-over */
	}

	/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
	.slider::-webkit-slider-thumb {
	  -webkit-appearance: none; /* Override default look */
	  appearance: none;
	  width: 25px; /* Set a specific slider handle width */
	  height: 25px; /* Slider handle height */
	  background: #843989; /* Green background */
	  cursor: pointer; /* Cursor on hover */
	}

	.slider::-moz-range-thumb {
	  width: 25px; /* Set a specific slider handle width */
	  height: 25px; /* Slider handle height */
	  background: #843989; /* Green background */
	  cursor: pointer; /* Cursor on hover */
	}

	.slider::-moz-range-track {
	  padding: 0 10px;
	  background: repeating-linear-gradient(to right, 
		#ccc, 
		#ccc 10%, 
		#000 10%, 
		#000 11%, 
		#ccc 11%, 
		#ccc 20%);	
	}


/*---------------------------------------------------------*/
*,
*:before,
*:after {box-sizing: inherit;}
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip { position: relative; cursor: pointer; }
/* Base styles for the entire tooltip */
[data-tooltip]:before,[data-tooltip]:after,.tooltip:before,.tooltip:after { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; }
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after,.tooltip:hover:before,.tooltip:hover:after,
.tooltip:focus:before,.tooltip:focus:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
/* Base styles for the tooltip's directional arrow */
.tooltip:before,[data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; }
/* Base styles for the tooltip's content area */
.tooltip:after,[data-tooltip]:after { z-index: 1000; padding: 8px; width: 160px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; font-weight:normal;content: attr(data-tooltip); font-size: 10px; line-height: 1.2;text-align:center; }

/* Directions */
/* Top (default) */
[data-tooltip]:before,[data-tooltip]:after,.tooltip:before,.tooltip:after,.tooltip-top:before,.tooltip-top:after { bottom: 100%; left: 50%; }
[data-tooltip]:before,.tooltip:before,.tooltip-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 0%, 20%, 0.9); }
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,.tooltip:after,.tooltip-top:after {margin-left: -80px;}
[data-tooltip]:hover:before,[data-tooltip]:hover:after,[data-tooltip]:focus:before,[data-tooltip]:focus:after,.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after,.tooltip-top:hover:before,
.tooltip-top:hover:after,.tooltip-top:focus:before,.tooltip-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); }
/* Left */
.tooltip-left:before,.tooltip-left:after { right: 100%; bottom: 50%; left: auto; }
.tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: hsla(0, 0%, 20%, 0.9); }
.tooltip-left:hover:before,.tooltip-left:hover:after,.tooltip-left:focus:before,.tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); }
/* Bottom */
.tooltip-bottom:before,.tooltip-bottom:after { top: 100%; bottom: auto; left: 50%; }
.tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: hsla(0, 0%, 20%, 0.9); }
.tooltip-bottom:hover:before,.tooltip-bottom:hover:after,.tooltip-bottom:focus:before,.tooltip-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); }
/* Right */
.tooltip-right:before,.tooltip-right:after { bottom: 50%; left: 100%; }
.tooltip-right:before { margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: hsla(0, 0%, 20%, 0.9); }
.tooltip-right:hover:before,.tooltip-right:hover:after,.tooltip-right:focus:before,.tooltip-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); transform: translateX(12px); }
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,.tooltip-right:before {top: 3px;}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,.tooltip-right:after { margin-left: 0; margin-bottom: -16px; }




/*--------------------------*/
/* The Modal (background) */
.insc-popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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/Box */
.insc-popup-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 950px; /* Could be more or less, depending on screen size */
}

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

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*Animations*/
@keyframes shrink {
  from {opacity: 1;height: initial;}
  100% {opacity: 0;height:0px;min-height:0px;overflow:hidden;margin:0px;padding:0px;}
  
}

@keyframes slide {
    100% { left: 100%; }
}


@media screen and (max-width: 1080px) {
   .content {width:95%;}
  .menuContent {width:95%;
  .search {width:95%;}
  .card {font-size:1.3em;}
  .card-hidden {display:none;animation:none;}    
  .insc-popup-content {width:90%;}
  }