/*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:12pt;}
  #filter-count {color:#FFB000;font-weight:bold;;}

/*Titre etc*/
h1 {margin-left:3%;font-size:200%;}


/*Container et card*/
.container {margin:100px auto;}

  /*Disclaimer*/
  .disclaimer {height:150px;}
  
  /*présentation*/
  .presentation {box-shadow:0 1px 2px #aaa;width:95%;background:white;margin:2rem auto;border-radius:3px;box-sizing: border-box}
  .presentation-content {display:table;margin:auto;vertical-align:middle;}
  .presentation-img {display:table-cell;vertical-align:middle;} 
  .presentation-img img {width:200px;border-radius:5px;}
  .presentation-text {display:table-cell;padding:10px;}
  
.card, .card-control, .mini-card {box-shadow:0 1px 2px #aaa;width:100%;background:white;margin:2rem auto;border-radius:3px;box-sizing: border-box}
.card {opacity:0.8;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-img {width:200px;border-radius:3px 0 0 3px;vertical-align:middle;}
.card-img img {width:150px;margin:10px 20px;}
.card-content {padding:10px;box-sizing: border-box;}




.mini-card-table {display:table;width:100%;margin:10px auto; border-collapse: separate; border-spacing: 10px;box-sizing: border-box;}
.mini-card-table-tr {display:table-row;}
.mini-card {display:table-cell;width:20%;}
.mini-card-active {cursor:pointer;}
.mini-card-complet {opacity:0.3;}
.mini-card-status {width:100%;padding:10px;font-weight:bold;background:#00000005;}
.mini-card-status .tarifs {float:right;}
.mini-card-button {background:#828EFF;padding:10px;border-radius:5px;box-shadow:1px 1px 3px #000;font-weight:bold;color:white;text-align:middle;}
.mini-card-button:hover {background:white;color:#828EFF;}
.mini-card-table-tr h1 {font-size:175%;padding-top:10px;color:#00399E90;font-weight:bold;text-align:left;margin-left:0%;border-bottom:1px dotted #00399E90;text-transform:capitalize;;}


/*Module pour les guides d'achats*/
.mini-card-desc {background:#FFFFFFEE;padding:10px;margin-top:200px;}



.card-hidden {}
.card-hidden .card-table {display:none;}

.bnt, .bnt-alpha,.bnt-reset {display:inline-table;padding:5px 10px;border-radius:3px;margin:5px 10px;text-transform:uppercase;position:relative;}
.bnt:hover,.bnt-alpha:hover,.bnt-reset:hover {background:#FFB000;color:white;transition:0.3s ease-in-out;}
.bnt-active {background:#FFB000;font-weight:bold;color:white;transition:0.3s ease-in-out;}
.bnt-active:hover {color:white;}
.bnt-reset {float:right;}



/*Entete de chaque modules + filtre sur le menu*/
.strasbourg 	{background:url('/modules/logosw-formations/affiches/strasbourg.jpg');background-position: 50% 50%;background-size:cover;}
.online 		{background:url('/modules/logosw-formations/affiches/online.jpg');background-position: 50% 50%;background-size:cover;}
.private 		{background:url('/modules/logosw-formations/affiches/private.jpg');background-position: 50% 50%;background-size:cover;}
.replay 		{background:url('/modules/logosw-formations/affiches/replay.jpg');background-position: 50% 50%;background-size:cover;}
.strasbourg 	.section-hero-content, 	.strasbourg 	.formation-menu-title {background:#B7640090;transition: all .5s}
.online 		.section-hero-content, 	.online 		.formation-menu-title {background:#009B0C90;transition: all .5s}
.private		.section-hero-content,	.private 		.formation-menu-title {background:#00399E90;transition: all .5s}
.replay 		.section-hero-content, 	.replay 		.formation-menu-title {background:#A0002A90;transition: all .5s}

.strasbourg:hover 	.section-hero-content, 	.strasbourg:hover 	.formation-menu-title {background:#B76400BB;transition: all .5s}
.online:hover 		.section-hero-content, 	.online:hover 		.formation-menu-title {background:#009B0CBB;transition: all .5s}
.private:hover		.section-hero-content,	.private:hover 		.formation-menu-title {background:#00399EBB;transition: all .5s}
.replay:hover 		.section-hero-content, 	.replay:hover 		.formation-menu-title {background:#A0002ABB;transition: all .5s}


.section-hero {width:100%;min-height:150px;margin:auto;border-radius:5px 5px 0 0;margin-top:70px;text-align:left;vertical-align:middle;box-sizing: border-box;overflow: hidden;filter: contrast(120%);}
.section-hero-content {border-radius:5px 5px 0 0;background:rgba(0,0,0,.5);width:100%;height:100%;min-height:150px;overflow:hidden;vertical-align:middle;padding-top:25px;}
.section-hero-content h1 {font-size:200%;color:white;text-shadow:1px 1px 3px #000;margin:auto 0 0 5%;text-align:left;vertical-align:middle;}
.section-hero-content p {width:80%;color:white;vertical-align:bottom;margin: 10px auto 0 5%;text-shadow:0 0 2px #000}
.card-intro {width:100%;}
.card-intro .card-content {width:100%;}

.intro {width:100%;margin-top:0;border-radius:0 0 5px 5px}
.geo {font-size:100%;width:100%;margin-bottom:0;overflow:hidden;box-sizing:border-box;margin-top:0;}
.geo img {height:20px;margin-right:10px;vertical-align:middle}
.geo tr td:first-child {text-align:center;}


/*Entete du module*/
.hero-header {height:250px;background-position: 50% 50%;background-size:cover;z-index:1}
.hero-header .section-hero-content {font-size:175%;text-align:center;margin:0;text-align:center;background:#0E88ECAA;transition:all .5s;}
.hero-header .section-hero-content h1 {color:#FFFFFF;text-align:center;margin:25px auto;transition:all .5s;}
.hero-header .section-hero-content p {margin:auto auto;}
.hero-header-container:hover .section-hero-content {background:#0E88ECEE;transition:all .5s;}
.hero-header-container:hover .section-hero-img {background-size:contain;background-position: 50% 50%;transition:all .5s;}

.section-hero-img-container {width:100%;height:200px;text-align:center;margin-bottom:-65px;z-index:100;position: relative;}
.section-hero-img {display:none;margin:auto;background:url('/modules/logosw-formations/portrait-tutosw.png');width:200px;height:224px;z-index:100;background-position: 50% 50%;background-size:contain;transition:all .5s}



/*Mini Menu*/
.formation-menu-table {display:table;width:100%;border-collapse: collapse;min-height:90px;margin:auto;text-align:center;margin-top:20px;}
.formation-menu-tr {display:table-row;}
.formation-menu {display:table-cell;width:auto;text-align:center;vertical-align:top;font-weight:bold;font-size:120%;color:white;text-shadow:1px 1px #000;border-radius:5px;box-shadow:0 0 1px #303030}
.formation-menu-separator {width:10px;height:10px;}

.formation-menu-title {height:100px;padding-top:30px;border-radius:5px 5px 0 0;}
.formation-menu h2 {display:block;width:100%;min-height:90px;text-align:center;}
.formation-menu-desc {min-height:125px;margin-bottom:-5px;background:#FFFFFFEE;color:black; padding:5px;box-sizing: border-box;border-radius:0 0 5px 5px;}
.formation-menu-desc p {font-size:11pt;font-weight:normal;text-shadow:0 0 0;}




/*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-insc {padding:20px;text-align:left;background:rgba(0,0,0,.1);}
.card-insc .table {display:table;border-spacing:10px;width:90%}
.card-insc .table-cell {display:table-cell;text-align:center;}
.card-insc .table input, .card-insc .table select, .card-insc .table option, .card-insc-validate input {width:90%;padding:10px; font-size:110%;color:#202020;border-radius:5px;border:0px;background:#F0F0F0;}
.card-insc-modules {margin:20px auto;width:90%;}
.modulecheck {margin:10px;}
.card-insc-validate {text-align:center;}
.card-insc-validate button {width:50%;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%;}
.notePaiement {width:80%;margin:20px auto;background:#a5d6a750;padding:10px;border-radius:5px;}
label { white-space: nowrap;}
.card-res {text-align:center;vertical-align:middle;width:20%;}
.private-res {margin:10px 5px;}
.private-res a.link {height:50px;padding:5px 10px;text-align:center;background:#00000010;border-radius:5px;overflow:hidden;box-sizing: border-box;white-space:nowrap;}
.private-res img {height:20px;vertical-align:middle;margin:5px;}

a.card-replay {width:10%;text-align:center;vertical-align:middle;font-size:80%;padding:0 10px;}
a.card-replay img {width:30px;}

/*Validation d'inscription*/
.insc-table-confirm {margin:10px auto;border-spacing: 10px;vertical-align:top;}
.insc-table-confirm tr td {vertical-align:top;}
.insc-title {text-align:right;}
.insc-right {text-align:right;width:50%;font-size:80%;color:grey}
.insc-validate, .insc-invalidate {width:75%;margin:30px auto;background:rgba(0,125,0,.3);border-radius:5px;padding:15px;}
.insc-invalidate {background:rgba(125,0,0,.3);text-align:center;font-weight:bold;color:white;}

/*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: 100%;font-size:120%;display:block;}
  .classe, .type {color:#AAAAAA;text-transform:capitalize}
  .desc {text-align:justify;font-size:0.9em;margin:5px 0px;}
  .caract-list {font-size:8pt;text-transform:capitalize;}
  .caract-stat {display:none;}
 
 
*,
*: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; }


  





/*Footer*/
.ccam-footer {width:95%;text-align:center;text-align:justify;border-spacing:20px 5px;box-sizing: border-box;margin:1rem auto;}
.ccam-footer-disclaimer {display:block;padding:1.5rem;box-shadow:0 1px 2px #aaa;background:white;margin:1rem auto;border-radius:3px;}
.ccam-table {display:table;border-spacing:20px 5px;box-sizing: border-box;margin:1rem auto;text-align:center;}
.ccam-footer-logos, .ccam-footer-donate {display:table-cell;width:33%;}


/*--------------------------*/
/* 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) {
  .search {width:95%;}
  .card {font-size:1.3em;}
  .card-hidden {display:none;animation:none;}    
  .insc-popup-content {width:90%;}
  .mini-card {display:block;width:100%}
  .formation-menu {display:block;width:100%;}
  }