/* ---
Fryderyk Dachowski
created 30.06.2020
Style pour la page assuré/avantages PA pour Grand Publique
--- */

/* --- Overload --- */
#content {
	margin: 0;
	padding: 0;
}
#content-wrap {
	padding-bottom: 9em;
}
#page {
	padding: 0;
	background: white;
}
.btn.mustard {
	background:#EBD11A;
	/*text-shadow: 1px 1px gray;*/
}
.btn.small {
	padding:1em;
	margin:0;
}
.btn.mustard:hover, .btn.mustard:focus, .btn.mustard:active{
	background: #19929f;
	text-shadow: none;
}

/* --- */

/* --- General --- */
.bold{
	font-family:'Roboto-Bold';
}

/* --- Unique --- */
.status_result_ajax{
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
}
#loading_ajax{
	position: relative;
    top: -6em;
    float: left;
    right: 3em;
}

/* --- */

.navbar_mobile {display: none;}

/* --- Page Content --- */

.grid {
    width: 100%;
    display: flex;
	padding: 1em 0em;
	flex-direction: column;
}
	.grid:nth-child(odd) { 
		background: #f0f3f5;
	}
	.grid h1{
		color: #333;
		font-family: "RobotoSlab-Bold";
		font-size: 2.5em;
	}
	.grid h2{
		font-family: "Roboto-Light";
		font-size: 2em;
	} 
	.grid h1+h2{
		margin-top: -.5em;
	}
	.grid h3 {
		font-family: "RobotoSlab-Bold";
	}

.grid .row {
	padding: 1em 15em;
    margin: auto;
}
	.grid .row.split-3>div {
		width: 33.3%;
	}

.grid .description {
    padding: 1em 3em;
	color: black;
	text-align: center;
}
	.grid .description>h1{
		/*background: #f0f3f5;
		border-radius: 100%;
		display: inline-grid;
		padding: 1em;
		*/
		color:#AB2C71;
	}	
	.grid .description h2{
		font-size: 1.6em;
	}
	.grid .description .bold {
	    font-family: "Roboto-Bold";
	}
	.grid .description .fa-heart {
		color: #AB2C71;
	}

	
.div_table {
	display: table;
}
	.div_table .table_row {
		display: table-row;
	}
	.div_table .table_row div{
		display: table-cell;
		padding: 0 1em 1em 0;
	}
	.div_table .table_row strike{
		font-size: 1.1em;
		color: #444;
	}

.grid .lama_meditation {
	    background: url(../img/lama-meditation.svg) right;
	    background-size: inherit;
	    background-repeat: no-repeat;
	    -webkit-animation: levitate 1.5s infinite alternate;
		animation: levitate 1.5s infinite alternate;
		width: 17em;
	}
	@-webkit-keyframes levitate {
		0% { transform: translateY(0); }
		100% { transform: translateY(1em); }
	}
	@keyframes levitate {
	    0% { transform: translateY(0); }
	    100% { transform: translateY(1em); }
	}
.grid .lama_screen, .grid .lama_blinking, .grid .lama_laying {
	height: 20em;
	display: flex;
    margin: 1em auto;
}
.grid .lama_laying{
	height: 17em;
	margin-top: 4em;
}

/* Special attributs for alps div */
.grid.bg_alps {
	background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.4) 100%), url(../img/bg_alps.svg), url(../img/bg_sky.svg);
	background-position: center top, center -29em, center top;
	background-size: cover,cover,cover;
	background-attachment: fixed,scroll,fixed;
	padding: 14em 0;
}

.bg_alps h1{
	color: #AB2C71;
	/* hack overflow content moving div */
	text-align: left;
	white-space: nowrap;
	width: 1em;
	margin-left:-1em;
}
.bg_alps h2{
	font-family: "RobotoSlab-Bold";
}
.bg_alps .accroche .txt-rotate {
	border-bottom: 1px dashed;
}
.bg_alps .row {
	padding: 1em 14em 1em 1em;
}

/*   Label PA   */
/* ------------ */
.label_pa_logo {
    height: 35em;
}
.grid.label {
    padding: 3em 0;
    background: rgb(0,142,158);
    background: linear-gradient(90deg, rgba(0,142,158,1) 0%, rgba(0,117,150,1) 27%, rgba(66,186,196,1) 61%, rgba(0,151,150,1) 84%, rgba(0,145,122,1) 100%); 
}
.grid.label div{
	margin: auto;
}
.grid.label>div{
	background: linear-gradient(102deg, rgba(255,255,255,1) 40%, rgba(240,243,245,1) 40%);
	width: 100%;
}
.grid.label .description{
	margin-left: 10em;
}

.grid.label .description,
.grid.label h1, .grid.label h2 {
	text-align: left;
}

/* --- Avantages --- */
/* ------------------- */
#wrapper_avantagespa{
	/*position: fixed;*/
	position: absolute;
	top: 0;
	box-sizing: border-box;
	width: 90%;
	padding:0;
	margin: 5%;
	z-index: 10002;
	background:white;
	box-shadow: 0 8px 18px 2px rgba(0, 0, 0, 0.4);
}
#wrapper_avantagespa .fa-times { 
	float: right;
	margin: .5em;
	cursor:pointer;
}

#searchbox {
	display: flex;
	background: #fff;
	padding: .4em 1em .3em 1em;
	color: #333;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
	border: 1px solid #AAA;
	border-radius: 2em;
	width: 47em;
	margin: auto;
}
#searchbox input {
	border:0;
	background: none;
	box-shadow: none;
	margin: 0;
	width: 100%;
	font-size: 1.1em;
	padding: 0.6em 1em;
}
#searchbox svg {
	position: relative;
	color: #9AA0A6;
	top: 7px;
	font-size: 1.5em;
}
#searchbox #filter_reset {
	display: none;
	cursor: pointer;
}

#filterlistbox {
	margin:1em auto;
	text-align: center;
	
}
	#filterlistbox select {
		background: none;
		font-family:"Roboto-Bold";
		font-size:1em;
		border:none;
		box-shadow: none;
		width: auto;
		transition: all 0.2s ease;
	}
	#filterlistbox select:hover {
		box-shadow:0 3px #AB2C71;
		cursor:pointer;
	}

/* --- intro_avantages --- */
.page_intro {
	margin: 2em 0;
}
.page_intro h1 {
	text-align: center;
	font-size: 3em;
}
.page_intro .title_colorful {
	text-align: center;
	font-size: 4em;
	letter-spacing: 3px;
	font-family: 'Roboto-Bold';
}
.page_intro .title_colorful p{ margin:0;}

	.page_intro .title_colorful span:first-child  {color: #00929f;}/*a*/ 
	.page_intro .title_colorful span:nth-child(2) {color: #5C9245;}/*v*/
	.page_intro .title_colorful span:nth-child(3) {color: #F36E21;}/*a*/
	.page_intro .title_colorful span:nth-child(4) {color: #d11582;}/*n*/
	.page_intro .title_colorful span:nth-child(5) {color: #EBD11A;}/*t*/
	.page_intro .title_colorful span:nth-child(6) {color: #5C9245;}/*a*/
	.page_intro .title_colorful span:nth-child(7) {color: #d11582;}/*g*/
	.page_intro .title_colorful span:nth-child(8) {color: #5193ff;}/*e*/
	.page_intro .title_colorful span:nth-child(9) {color: #F36E21;}/*s*/
	/* PA */
	.page_intro .title_colorful span:nth-child(10),.page_intro .title_colorful span:nth-child(11){ 
		color: #00929f;
		font-family: 'RobotoSlab-Bold';
	}

.page_intro .slogan {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 3em;
}
.page_intro .slogan p{
	padding-left: 10px;
}
.page_intro .slogan ul {
	font-family: 'Roboto-Bold';
	display:flex;
	justify-content: center;
	list-style: none;
	font-size: 1.2em;
	padding-left: 0;
}
.page_intro .slogan ul li {
    border-right: 2px solid;
    padding-right: .5em;
    margin-right: .5em;
}
.page_intro .slogan ul li:last-child {
    border-right:0;
    padding-right:0;
    margin-right:0;
}
.page_intro .help {
	text-align: center;
}
.page_intro .help p:first-child {
	display: inherit;
}
.page_intro .help p:nth-child(2) {
	display: none;
}

.wrapper {
	display: flex;
	background: white;
}
.wrapper_products {
	flex-basis: 100%;
	width: 100%;
}


/* --- Product --- */
.product {
    margin: 2em;
    display: flex;
    flex-direction: column;
    background: #ECF0F1;
    border:0;
    border-left:1em solid #00929f;

    border-top-right-radius:1em; 
    border-bottom-right-radius:1em;
    box-shadow: 0px 1px 2px 0px #888;
}
.product h2 {
	padding: 1em 0;
	margin:0;
	color: #00929f;
	font-family:'Roboto-Bold';
	font-size: 1.5em;
	text-align:left;
}
	.product .prod_header {
	    margin: 1em 1em 0 0;
	    padding: 1em 2em;
	    border-top-right-radius:1em; 
	    border-bottom-right-radius:1em;
	    background:#fff;
	}
	.product .prod_content {
	    padding: 1em 2em;
	}
	.product .descbox {
	    margin-top:.5em;
	}
	
	
.product.current {
    box-shadow: #AB2C71 0px 0px 0px 3px;
	border-left: 1em solid #AB2C71;
    color: black;
}
.product.current h2{
	color: #AB2C71;
}

.soustitre {
	font-size: 1.1em;
}
.soustitre p {
	margin-top: 0;
}
.soustitre div:first-child {
	display: none;
	color: #0979B5;
	padding-right: 1em;
}

.meta {
	display: flex;
    color: black;
    justify-content: space-between;
}
.meta h3 {
	font-family: 'Roboto-Bold';
	text-transform: uppercase;
	font-size: .9em;
}
.meta > div {
	padding: .5em 0;
	background: #fff;
	width: 25%;
}
.meta > div:first-child {
	width: 30%;
}
.meta > div:nth-child(2) {
	width: 10%;
}
.meta > div:last-child {
	white-space: nowrap; 
	width:10%;
}

.meta .wrapper_avantages{
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	border: 0;
	padding: 0;
}
.meta .avantage {
	display: flex;
	flex-direction: column;
}
.meta .avantage p:first-child {
	display: flex;
    white-space: nowrap;
}
.meta .avantage p:first-child:before {
	content: "\2022";
	margin-right:5px;
}
.meta .avantage p:nth-child(2) {
	padding: 0;
	margin: 0;
}

#contenu .descbox h1,
#contenu .descbox h2,
#contenu .descbox h3,
#contenu .descbox h4,
#contenu .descbox h5,
#contenu .descbox h6 {
	color: inherit;
	text-transform: inherit;
	padding: .5em 0 ;
	margin: 0;
}
#contenu .descbox h1 { font-size: 1.6em; }
#contenu .descbox h2 { font-size: 1.4em; }
#contenu .descbox h3 { font-size: 1.2em; }
#contenu .descbox h4 { font-size: 1em; }
#contenu .descbox h5 { font-size: .85em; }
#contenu .descbox h6 { font-size: .7em; }


/* ------------------------------- */
/* --- 		Responsive 		--- */
/* ------------------------------- */

@media only screen and (max-width: 1350px) { 
	#primary_nav_wrap ul {
		margin: 0 0 0 auto;
	}
}

@media only screen and (max-width: 768px) { 
	body {
		font-size: 1.2em;
	}
	#contenu{
		overflow: hidden;
	}
	#texte p {
		line-height: inherit;
	}

	#BackToTop{
		bottom: 1em;
		right: 1em;
		padding: .6em;
	}

	#mobile_menu_toggle{
		display: none;
	}

	#primary_nav_wrap {
		display: none;
	}
	#primary_nav_wrap ul {
		display: inline-grid;
	}

	.navbar_mobile {
		display: flex;
		justify-content: space-between;
		align-items:center;
		padding: 1em;
		border-bottom: 1px solid gray;
	}
	.navbar_mobile img {
		height: 2.5em;
	}

	.sidemenu {
		padding: 0;
		width: 0;
		overflow: hidden;
	}
	.sidemenu.active {
		padding: 1em 0 1em 1em;
		width: inherit;
		overflow: inherit;
	}
	.sidemenu h2 {
		font-weight: bold;
	}
	.sidemenu a {
		padding: .7em 2em .7em .7em;
	}
	.sidemenu .logo_pa {
		display: none;
	}

	#searchbox {
		width: inherit;
	}

	.page_intro {
		margin:0 0 4em 0; 
	}
	.page_intro ul {
		flex-direction: column;
		list-style-position: inside;
		list-style: inherit;
	}
	.page_intro .slogan ul li {
	    border-right:0;
	    margin: 0;
	    padding: 0;
	}
	.page_intro .help p:first-child {
		display: none;
	}
	.page_intro .help p:nth-child(2) {
		display: inherit;
		font-size: .9em;
	}

	.page_intro .title_colorful{
		font-size: 3em;
		padding: 0;
	}

	.wrapper_products>div {
		padding:1em .5em;
	}
	.product {
		padding: 0.5em;
		margin: 2em 0;
		border-left-width: .5em;
	}
	
	.product .soustitre{
		padding:1em;
	}

	.meta {
		flex-direction: column;
	}
	.meta > div {
		padding: .5em;
		border-left:0;
		border-top: 2px solid #cbcbcb;
		width: inherit;
	}
	.meta > div:first-child, .meta > div:nth-child(2){
		width: inherit;
	}
	.meta > div:last-child {
		border-right:0;
		width: inherit;
		border-bottom: 2px solid #cbcbcb;
	}
	.meta .avantages div {
		border:0;
		flex-direction: inherit;
	}

}