/* site evolution html 5 */

/**************************************************************************** body ******************************************************************/

body	{font:1em work_sanslight, verdana, arial, sans-serif;
         color:#000;	/* black text */
         margin-right:auto;
         margin-left:auto;
         margin-top:0px;
         padding:0px;
         text-align:center;
}


strong   {font-family: work_sansbold;}

/**************************************************************************** font ******************************************************************/

@font-face {
    font-family: 'work_sansextralight';
    src: url('webfontkit_work-sans/worksans-extralight-webfont.eot');
    src: url('webfontkit_work-sans/worksans-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_work-sans/worksans-extralight-webfont.woff2') format('woff2'),
         url('webfontkit_work-sans/worksans-extralight-webfont.woff') format('woff'),
         url('webfontkit_work-sans/worksans-extralight-webfont.ttf') format('truetype'),
         url('webfontkit_work-sans/worksans-extralight-webfont.svg#work_sansextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'work_sanslight';
    src: url('webfontkit_work-sans/worksans-light-webfont.eot');
    src: url('webfontkit_work-sans/worksans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_work-sans/worksans-light-webfont.woff2') format('woff2'),
         url('webfontkit_work-sans/worksans-light-webfont.woff') format('woff'),
         url('webfontkit_work-sans/worksans-light-webfont.ttf') format('truetype'),
         url('webfontkit_work-sans/worksans-light-webfont.svg#work_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'work_sansregular';
    src: url('webfontkit_work-sans/worksans-regular-webfont.eot');
    src: url('webfontkit_work-sans/worksans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_work-sans/worksans-regular-webfont.woff2') format('woff2'),
         url('webfontkit_work-sans/worksans-regular-webfont.woff') format('woff'),
         url('webfontkit_work-sans/worksans-regular-webfont.ttf') format('truetype'),
         url('webfontkit_work-sans/worksans-regular-webfont.svg#work_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'work_sanssemibold';
    src: url('webfontkit_work-sans/worksans-semibold-webfont.eot');
    src: url('webfontkit_work-sans/worksans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_work-sans/worksans-semibold-webfont.woff2') format('woff2'),
         url('webfontkit_work-sans/worksans-semibold-webfont.woff') format('woff'),
         url('webfontkit_work-sans/worksans-semibold-webfont.ttf') format('truetype'),
         url('webfontkit_work-sans/worksans-semibold-webfont.svg#work_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'work_sansbold';
    src: url('webfontkit_work-sans/worksans-bold-webfont.eot');
    src: url('webfontkit_work-sans/worksans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_work-sans/worksans-bold-webfont.woff2') format('woff2'),
         url('webfontkit_work-sans/worksans-bold-webfont.woff') format('woff'),
         url('webfontkit_work-sans/worksans-bold-webfont.ttf') format('truetype'),
         url('webfontkit_work-sans/worksans-bold-webfont.svg#work_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
	font-family: 'work_sansextrabold';
    src: url('webfontkit_work-sans/worksans-extrabold-webfont.eot');
    src: url('webfontkit_work-sans/worksans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit_work-sans/worksans-extrabold-webfont.woff2') format('woff2'),
         url('webfontkit_work-sans/worksans-extrabold-webfont.woff') format('woff'),
         url('webfontkit_work-sans/worksans-extrabold-webfont.ttf') format('truetype'),
         url('webfontkit_work-sans/worksans-extrabold-webfont.svg#work_sansextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

/* @font-face {
	font-family: 'Poppins';
    src: url('https://fonts.googleapis.com/css2?family=Poppins:Poppins:wght@700&display=swap');
    font-weight: normal;
    font-style: normal;
} */

/**************************************************************************** keyframes images de fond ******************************************************************/

/* % for 3 images */
/* 0% : 1, 11.11% : 2, 33.33% : 2, 44.44% : 3, 66.67% : 3, 77.78% : 1, 100% : 1 */
/* % for 4 images */
/* 0% : 1, 8.33% : 2, 25% : 2, 33.33% : 3, 50% : 3, 58.33% : 4, 75% : 4, 83.33% : 1, 100% : 1 */
/* % for 5 images */
/* 0% : 1, 6.66% : 2, 20% : 2, 26.66% : 3, 40% : 3, 46.66% : 4, 60% : 4, 66.66% : 5, 80% : 5, 86.66% : 1, 100% : 1 */

@keyframes diapo{					/* Conocenos */
    0%{background-image: url(images/test1.jpeg);}
    10%{background-image: url(images/cono4.jpg);}
    25%{background-image: url(images/cono4.jpg);}
    35%{background-image: url(images/cono1.jpg);}
    50%{background-image: url(images/cono1.jpg);}
    60%{background-image: url(images/cono3.jpg);}
    75%{background-image: url(images/cono3.jpg);}
    85%{background-image: url(images/test1.jpeg);}
    100%{background-image: url(images/test1.jpeg);}
}

@keyframes diapo2{					/* Industria */
    0%{background-image: url(images/indus1.jpg);}
    11.11%{background-image: url(images/indus3.jpg);}
    33.33%{background-image: url(images/indus3.jpg);}
    44.44%{background-image: url(images/indus71.jpg);}
    66.67%{background-image: url(images/indus71.jpg);}
    77.78%{background-image: url(images/indus1.jpg);}
    100%{background-image: url(images/indus1.jpg);}
}

@keyframes diapo3{					/* Residencias y comercios */
    0%{background-image: url(images/ryc1.jpg);}
    8.33%{background-image: url(images/ryc2.jpg);}
    25%{background-image: url(images/ryc2.jpg);}
    33.33%{background-image: url(images/ryc3.jpg);}
    50%{background-image: url(images/ryc3.jpg);}
    58.33%{background-image: url(images/ryc4.jpg);}
    75%{background-image: url(images/ryc4.jpg);}
    83.33%{background-image: url(images/ryc1.jpg);}
    100%{background-image: url(images/ryc1.jpg);}
}

@keyframes diapo4{					/* A Solar Depot */
    0%{background-image: url(images/test1.jpeg);}
    11.11%{background-image: url(images/test1.jpg);}
    33.33%{background-image: url(images/test1.jpg);}
    44.44%{background-image: url(images/test4.png);}
    66.67%{background-image: url(images/test4.png);}
    77.78%{background-image: url(images/test1.jpeg);}
    100%{background-image: url(images/test1.jpeg);}
}

/*****************************************************************************  main  ***************************************************************/

div#main
	{background-color:#FFF;                                                                            /*fond blanc*/
	 width:auto;
     margin-right:auto;
     margin-left:auto;
     text-align:left
     }

p  {text-align:justify}
h1 {font-size: 1.8em; font-family:work_sansextrabold,verdana, arial ; text-align:left; margin-top:1.5em; margin-bottom:0em}
h1.hdp {font-size: 2em;}
h2 {font: 1.4em; font-family:work_sanssemibold,verdana, arial, sans-serif; color: #000080}                      /*  navy blue */
h3 {font: 1.2em; font-family:work_sanssemibold,verdana, arial, sans-serif;color: #000080}                          /*  navy blue */
h4 {font-size: 0.8em; font-family: work_sansregular,verdana, arial, sans-serif; color: #0FB}                          /* turquoise */
h5 {font: 0.7em verdana, arial, sans-serif; font-style: italic; color: #DDD; text-align:right}

a  {text-decoration:none; font-family:poppins}
mark {background:transparent; font-weight:bold}

/*****************************************************  header  *******************************************************/
div#header {width:auto}
/*****************************************************  loader  *******************************************************/
div#loader-wrapper {position:fixed; top:0; left:0; width:100%; height:100%; background:#FFF; z-index:1000}
div#loader {display:block; position:relative; left:50%; top:35%; width:40%; height:11.77%; margin-left:-238px; z-index:1001}

.loaded {animation: fadeOut; animation-duration: 2s; animation-delay: 1s}
.loaded2 {z-index:-1000; display:none}
/******************************************************************  div#haut  *******************************************************************/
div#haut {background:rgba(255,255,255,0.95); position:fixed; min-width:600px; /* max-width:2000px;  */top:0; width:100%; padding:0; height:120px; z-index:100}

/**********************  div#logo  ************************/
div#logo { display:inline-block; position:relative; top:30px; left:120px ; margin-right: 100px; vertical-align:middle}
/*div#logo img.scaled{width: 100%; }    */

/********************************************* div#hdroit ******************************************/
@media screen and (min-width: 1210px) { 		/* bigger screen menu */
	div#hdroit {display:inline-block; position:relative; float:right; top:10px; right:70px; padding-left:50px; width:800px; vertical-align: middle; transition: 0.6s ease}
	
	/*************  div#contacto  **************/
	div#contact {float:right; margin:0px 10px 15px 0px}
	div#contact p {font-size:small; margin:0; padding-top: 0px; padding-right: 8px}
	div#contact a  {position:relative; top:7px; right:18px; color:#000080; font: 0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif;	 	/* navy blue text */
	transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease}
	
	#hdroit input {display:none}
	/*************   div.nav1  ****************/
	div.nav1 {float:right; margin-top:5px; margin-right:25px; width:100%; height:58px}
	div.nav1 a {color:#000080; font: 0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif} 		/* navy blue text */
	/* background-color:rgba(255,255,255,0.5); fond blanc semi transparent */
	
	ul.level1 {margin: 5px 5px; list-style-type:none; vertical-align:middle; text-align:center; float:right}
	
	li.menu1 {position:relative; float:left; height:2.75em; width:126px; padding: 0px 2.5px; border-radius:3px}
	
	li.menu1:hover {background:#000080} 		/* navy blue */
	li.menu1:hover .level2 {display:block} 			/* display level 2 when hover */
	li#ctctx {display:none}
	
	li.menu1 a {display: block; text-decoration: none; height:80%; text-align: center; vertical-align:middle}
	li.menu1 a:hover {color:#FFF; letter-spacing: 1px} 			/* white text */
	
	ul.level2 {display:none; list-style-type:none; width:100%; position:absolute; text-align:center; float:none; right:0px; margin-top:7.5px; border-radius:3px}
	ul.level2 a {background:rgba(255,255,255,0.95); padding: 0.1em 0 0.3em; font-size: 0.8em; font-family: work_sansregular,verdana, arial, sans-serif; color:#000080} 		/* white background, navy blue text */
	ul.level2 a:hover {background:#000080; color:#FFF; letter-spacing: 1px} 		/* navy blue background, white text */
}

/***************************************** div#hdroit responsive ************************************/
@media screen and (max-width: 1209.999px) { 	/* smaller screen menu */
	div#hdroit {display:block; position:relative; float:right; top:70px; right:110px; width:200px; vertical-align:middle}
	
	/*************   input & span ****************/
	#hdroit input {display:block; width:45px; height:30px; position:absolute; float:right; top:-5px; right:-9px; cursor:pointer; opacity:0; z-index:101} 		/* invisible menu button */
	
	#hdroit span {display:block; width:33px; height:4px; margin-bottom:5px; position:relative; background:#000080; border-radius:3px; 		/* navy blue toggle menu */
		transform-origin:4px 0px; transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease
	}
	/***** toggle menu click animation *****/
	#hdroit span:first-child {transform-origin: 0% 0%}
	#hdroit span:nth-last-child(2) {transform-origin: 0% 100%}
	#hdroit input:checked ~ span {opacity:1; transform:rotate(45deg) translate(-2px, -1px); background:#000080}
	#hdroit input:checked ~ span:nth-last-child(3) {opacity: 0; transform: rotate(0deg) scale(0.2, 0.2)}
	#hdroit input:checked ~ span:nth-last-child(2) {transform: rotate(-45deg) translate(0, -1px)}
	#hdroit input:checked ~ .nav1 {display:block}
	
	/*************  div#contacto  **************/
	div#contact {display:none}
	
	/*************   div.nav1  ****************/
	div.nav1 {position:relative; float:left; top:23px; right:-130px; width:180px; background:rgba(255,255,255,0.95); list-style-type:none; -webkit-font-smoothing: antialiased; display:none} 		/* white background, not visible until click */
	div.nav1 a {color:#000080; font:0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif} 		/* navy blue text */
	
	ul.level1 {list-style-type:none; float:right; margin:0}
	
	li.menu1 {position:relative; display:block; height:3em; width:180px; border-radius:3px}
	
	li.menu1:hover {background:#000080} 		/* navy blue background */
	li.menu1:hover .level2 {display:block} 			/* display level 2 when hover */
	
	li.menu1 a {display: block; text-decoration: none; padding:0.3em 1em; height:80%}
	li.menu1 a {text-align:left; vertical-align:middle}
	li.menu1 a:hover {color:#FFF; letter-spacing: 1px} 		/* white text */
	
	ul.level2 {display:none; list-style-type:none; width:100%; position:absolute; float:none; right:0px; padding-top:3px; border-radius:3px; z-index:101}
	ul.level2 a {background:rgba(255,255,255,0.95); padding: 0.3em 1em 0.3em; font-size: 0.8em; font-family: work_sansregular,verdana, arial, sans-serif; color:#000080} 		/* white background, navy blue text */
	ul.level2 a:hover {background:#000080; color:#FFF; letter-spacing: 1px} 		/* navy blue background, white text */
}

/***************************************************************  section index  ****************************************************************/

section.indexA {min-width:720px; /* max-width:2000px;  */}
section.indexB {min-width:720px; /* max-width:2000px;  */}
section.indexC {min-width:720px; /* max-width:2000px;  */}

/**************************************************** INDEX A & B ****************************************************/
                           
div.img1 {position:relative; background-repeat: no-repeat; background-size:cover; width:100%; height:800px; animation: diapo 30s ease-in-out infinite both; animation-delay:2s} 		/* Nosotros */          
div.img2 {position:relative; background-repeat: no-repeat; background-size:cover; width:100%; height:800px; animation: diapo2 15s ease-in-out infinite both; animation-delay:3.7s}      /* Industrial */                     
div.img3 {position:relative; background-repeat: no-repeat; background-size:cover; width:100%; height:800px; animation: diapo3 15s ease-in-out infinite both; animation-delay:0.4s}        /* Residencias & Comercios */

div.imgtxt1 {background:rgba(0,17,120,0.7); position:absolute; top:180px; min-width:530px; min-height:350px; border-radius:15px; color:#FFF}
div.imgtxt2 {background:rgba(0,17,85,0.7); position:absolute; top:180px; min-width:530px; min-height:350px; border-radius:15px; color:#FFF}

div#imgtitle {position:relative; top:-35px; padding:0 7.5%; font-size:2em}
div#imgtitle h2 {color:#FFF; font-family: 'Poppins', sans-serif; margin-bottom:0}
div#imgtitle a {color:#FFF; font-family: 'Poppins', sans-serif}

div#imgtitle a:hover {color:#CCC; letter-spacing:1px} 		/* gray text */

div#maintxt {position:relative; top:0px; padding:0 7.5% 5%; font-size:1.35em; text-align:justify; text-indent:25px}

/**************************************************** INDEX C ****************************************************/

div.img4 {position:relative; background-repeat:no-repeat; background-size:cover; width:100%; height:800px}     /* Referencias */

div.sidebox {background:rgba(0,17,85,0.9); position:absolute; display:inline-block; width:70px; height:100%; top:0; left:0; color:#FFF}
div.imgtxt3 {background:rgba(0,17,85,0.9); position:absolute; top:400px; width:350px; min-height:150px; border-radius:10px; color:#FFF}

div.projectname {position:relative; top:400px; right:240px; width:550px; float:left; transform: rotate(-90deg)}
div.projectname a {color:#FFF; font-family: work_sanssemibold,verdana, arial, sans-serif; letter-spacing: 1px}
div.projectname a:hover {color:#CCC; letter-spacing: 1.5px}

div#boxtitle {position:relative; padding-left:7.5%; font-size:1.35em}
div#boxtitle a {color:#FFF; font-family: 'Poppins', sans-serif}
div#boxtitle a:hover {color:#CCC; letter-spacing:1px}

div#boxtxt {position:relative; top:-10px; padding:0 7.5%; font-size:1.3em; text-align:justify} 		/* client citation */
div#boxtxtr {position:relative; padding:0 7.5%; font-size:1.3em; text-align:right} 		/* client */
div.buttons {position:relative; bottom:-30px; width:100%; height:25px}

div.buttons div {cursor:pointer; display:inline-block; color:#015; font-size:1.5em; font-weight:bold; text-shadow:-1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF; margin:0; padding:0}
div#gallery {position:relative; display:inline-block; width:21%; top:12px}
div#gallery img {cursor:pointer; display:inline-block; width:65px; height:40px; margin:0 5px; border:1px solid #015; border-radius:5px}

div.buttons div:hover{color:#FFF}
div#gallery img:hover{border:2px}
div#gallery img:active{border:1px solid #FFF}

/******************************  section formato  *******************************/

div.formato {width:100%; background-color:#FFF; text-align:center}
div.formato h2 {color:#000080; font-family:Poppins}
div#counterid {height:250px}
div#formid {height:310px}

div.counter {position:relative; display:inline-block; vertical-align:top; width:30%; margin:0 9.5%; padding-top:10px;
box-shadow:5px 5px 5px #017; border-radius:30px; font-family:Poppins; font-weight:bold; font-size:3em; color:#000080}
div.counter h3 {color:#000080; font-size:25px; margin:0 5px 10px}

div.form {position:relative; display:inline-block; vertical-align:top; width:65%; margin:0 2%; color:#000080; text-align:left}
div.form h2 {text-align:center}
div.formside {position:relative; display:inline-block; text-align:right; vertical-align:middle; width:30%; height:80%; margin:2% 0; padding:0; border-radius:10px 0 0 10px;
background-image:url(images_ref/ags286_glopez20.jpg); background-repeat:no-repeat; background-size:cover}		/* image formato à changer? */

div.img5 {position:relative; background:rgba(0,17,85); width:100%; height:400px; margin-bottom:50px; border-radius:15px}
div.imgarticle {position:absolute; display:inline-block; background-image:url(images/test4.png); background-repeat:no-repeat; background-size:cover; width:45%; height:80%; left:5%; top:10%; border:3px solid #FFF; border-radius:7px}
div.imgdepot {background:rgba(0,17,85,0.9); position:absolute; width:35%; height:80%; right:10%; top:10%; border-radius:7px}
div#depottitle {position:relative; display:inline-block; padding:0 7.5%; font-size:1.5em}
div#depottitle h2 {color:#FFF; font-family:'Poppins', sans-serif; font-weight:extrabold}
div#depottxt {position:relative; display:block; padding:2.5% 7.5%; font-size:1.2em; color:#FFF; text-align:justify}
div#depotprice {position:relative; display:block; padding:2.5% 7.5%; font-size:1.25em; color:#FFF; text-align:right; font-weight:bold}

/**************************** body responsive ****************************/
@media screen and (min-width: 1000px) {
	div.imgtxt1 {right:100px; width:50%}
	div.imgtxt2 {left:100px; width:50%}
	div.imgtxt3 {right:90px}
}
@media screen and (min-width: 940px) and (max-width: 999.999px) {
	div.imgtxt1 {right:90px; width:57%}
	div.imgtxt2 {left:90px; width:57%}
	div.imgtxt3 {right:80px}
	
	div.counter {font-size:2.5em}
}
@media screen and (min-width: 870px) and (max-width: 939.999px) {
	div.imgtxt1 {right:80px; width:63%}
	div.imgtxt2 {left:80px; width:63%}
	div.imgtxt3 {right:70px}
	
	div.counter {width:35%; margin:0 7%; font-size:2.5em}
	div.formside {width:25%}
}
@media screen and (min-width: 810px) and (max-width: 869.999px) {
	div.imgtxt1 {right:70px; width:69%}
	div.imgtxt2 {left:70px; width:69%}
	div.imgtxt3 {right:60px}
	
	div.counter {width:40%; margin:0 4.5%; font-size:2.5em}
	div.formside {width:25%}
	div#depottitle {font-size:1.2em}
}
@media screen and (max-width: 809.999px) {
	div.imgtxt1 {right:60px; width:75%}
	div.imgtxt2 {left:60px; width:75%}
	div.imgtxt3 {right:50px}
	
	div.counter {width:40%; margin:0 4.5%; font-size:2.25em}
	div.counter h3 {font-size:22.5px}
	div.form {width:90%}
	div#depottitle {font-size:1.2em}
}
/***** form responsive *****/
@media screen and (min-width: 1160px) and (max-width: 1239.999px) {
	div.form {width:70%}
	div.formside {width:25%}
}
@media screen and (min-width: 1075px) and (max-width: 1159.999px) {
	div.form {width:75%}
	div.formside {width:20%}
}
@media screen and (min-width: 980px) and (max-width: 1074.999px) {
	div.form {width:90%}
	div#formid {height:290px}
}
@media screen and (min-width: 900px) and (max-width: 979.999px) {
	div.form {width:90%}
	div#formid {height:305px}
}
@media screen and (min-width: 750px) and (max-width: 899.999px) {
	div.form {width:90%}
	div#formid {height:320px}
}
@media screen and (max-width:749.999px) {
	div.form {width:95%}
	div#formid {height:320px}
}

/******************************  Solar Depot  *******************************/
div.img6 {position:relative; background-repeat: no-repeat; background-size:cover; width:100%; height:750px; animation: diapo4 15s ease-in-out infinite both; animation-delay:2s}
div.imgart {position:absolute; display:inline-block; background-repeat:no-repeat; background-size:cover; width:40%; height:65%; left:12%; top:20%; border:3px solid #FFF; border-radius:7px}
div.imgshop {background:rgba(0,17,85,0.9); position:absolute; width:33%; height:55%; right:12%; top:30%; border-radius:7px}
div#shoptitle {position:relative; display:inline-block; padding:0 7.5%; font-size:1.5em}
div#shoptitle h1 {color:#FFF; font-family:'Poppins', sans-serif; font-weight:extrabold}
div#shoptxt {position:relative; display:block; padding:2.5% 7.5%; font-size:1.5em; color:#FFF; text-align:justify}
div#shopprice {position:relative; display:block; padding:0 7.5%; font-size:1.25em; color:#FFF; text-align:right; font-weight:bold}

div.buttonsshop {position:absolute; top:85%; width:85%; height:25px; left:7.5%}
div.buttonsshop div {cursor:pointer; display:inline-block; color:#015; font-size:1.5em; font-weight:bold; text-shadow:-1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF; margin:0; padding:0}
div#galleryshop {position:relative; display:inline-block; width:17%; top:12px}											/* Change width to add more articles */
div#galleryshop img {cursor:pointer; display:inline-block; width:65px; height:40px; margin:0 15%; border:1px solid #015; border-radius:5px}

div.buttonsshop div:hover{color:#FFF}
div#galleryshop img:hover{border:2px}
div#galleryshop img:active{border:1px solid #FFF}

/********************** asd responsive ***********************/
@media screen and (min-width: 1060px) and (max-width: 1249.999px) {
	div.buttonsshop {width:90%; left:5%}
	div#shoptitle {margin-top:-15px}
	div#shoptxt {font-size:1.3em}
	div#galleryshop {width:17%}
	div#galleryshop img {width:60px; margin:0 10%}
}
@media screen and (min-width: 960px) and (max-width: 1059.999px) {
	div.imgart {width:42%; left:10%}
	div.imgshop {width:35%; right:10%}
	div.buttonsshop {width:95%; left:2.5%}
	div#shoptitle {margin-top:-20px}
	div#shoptxt {font-size:1.2em}
	div#galleryshop {width:17%}
	div#galleryshop img {width:60px; margin:0 10%}
}
@media screen and (min-width: 800px) and (max-width: 959.999px) {
	div.imgart {width:47%; left:5%}
	div.imgshop {width:40%; right:5%}
	div.buttonsshop {top:100%; width:150%; left:25%}
	div#shoptitle {margin-top:-20px; font-size:1.4em}
	div#shoptxt {font-size:1.2em}
	div#galleryshop {width:15%}
	div#galleryshop img {margin:0 10%}
}
@media screen and (max-width:799.999px) {
	div.imgart {width:50%; left:2%}
	div.imgshop {width:43%; right:2%}
	div.buttonsshop {top:100%; width:150%; left:25%}
	div#shoptitle {margin-top:-20px; font-size:1.3em}
	div#shoptxt {font-size:1.1em}
	div#galleryshop {width:15%}
	div#galleryshop img {margin:0 10%}
}

/****************************************************************   pied de page    **************************************************************/

footer {padding:0px; width:100%; height:100px; background-color:#020236; min-width:720px}
div#footl  {display:inline-block; width:17%; margin-left:5px; text-align:left}
div#footl a {display:block; height:32%; padding: 9px 0 12px}
div#footl mark {color:#FFF; font-size:0.6em; font-weight:normal}
div#footc  {display:inline-block; vertical-align:top;}
div#logoftr {display:inline-block; position:relative; top:35px; right:1%}

footer p {font-size:75%; color: #FFF; }
footer a {font-size:75%; color: #FFF; font: 0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif} 
footer a:visited  {color:#0FB} 		/* turquoise */
footer a:hover  {color:#0DF} 		/* light blue */

/******************************* nav ***********************************/

nav {display:inline-block; margin:0; vertical-align:middle}
nav {width:100%; height:85px}

nav ul {font-size: 100%; margin:0; padding:0}
nav ul.sublevel1 {vertical-align:middle; float:none; text-align:center}
nav ul.levelsub {vertical-align:middle;font-size:80%}

nav li {list-style:none; }
nav li.submenu1 { width: 13%; display:inline-block; vertical-align:top; margin-top:0px}
nav li.submenu1 a { font-family:work_sanssemibold; display:block; height:34px}
nav ul.levelsub li {width:100%;  height:17px}
nav ul.levelsub li a {font-family:work_sanslight}

nav li a {padding:0}

nav li a:hover{letter-spacing: 1px}    

/********************** footer responsive ***********************/
@media screen and (min-width: 1111px) {
	div#footl {vertical-align:top}
	div#footc {width:70%}
}
@media screen and (min-width: 980px) and (max-width: 1110.999px) {
	div#footl {vertical-align:top}
	div #footl a {padding:8px 0}
	div #footl mark {padding:8px 0}
	div#footc {width:70%}
}
@media screen and (min-width: 900px) and (max-width: 979.999px) {
	div#footl {width:14%; vertical-align:top}
	div #footl a {padding:4px 0}
	div #footl mark {padding:4px 0}
	div#footc {width:72%}
}
@media screen and (max-width: 899.999px) {
	footer {display:flex; flex-direction:column; position:relative; height:110px}
	div#footl {order:3; width:85%; vertical-align:bottom; margin-left:10%}
	div#footl a {display:inline-block; padding:0 2.5% 10px}
	div#footl mark {padding:0 2.5%}
	div#footc {width:92%}
	div#logoftr {position:absolute; right:2%}
}
@media screen and (max-width: 1552px) {
	nav ul.levelsub li {height:30px}
} 
           
/******************************************************************  pages references  ******************************************************************/

section.page {margin:150px 5% 0}
section.page h1 {color: #000080}
section.page h3 {color: #000080}

div.figref  {
             width: 97%;
             margin: 20px 2.5% 20px;
             padding: 0;
             height: 180px;
             }
             
div.refimage {
            display:inline-block;
            width: 12%;
            border: 0px solid #F00;
            vertical-align:middle;
            margin-left: 10px;
            padding:0;
            }

div.refcapt {
            display:inline-block;
            width: 15%;
            vertical-align:middle;
            background:#FAFAFF; box-shadow: 3px 2px 0px rgba(0,0,0,0.2);
      /*      background: linear-gradient(rgba(50,50,50,0.6), rgba(50,50,50,1) 60%,  rgba(50,50,50,0.1));               */
            border: 0px solid #F0F;
            text-align: center;
            font-size: smaller;
            text-indent: 0;
            height:80px;
            margin:0px 30px 5px 10px;
            padding:0;
            }

div.refcapt p {
            border: 0px solid #0F0;
            margin:10px;
            text-align:center;
            color:#222;
            }

/******************************************************************  page fotovoltaico  ******************************************************************/

div.centre {
            display:inline-block;
            text-align:center;
            width: 80%;
            border: 0px solid #F00;
            margin: 10px 40px 10px 80px;
            padding:0;
            }