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

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


strong   {font-family: work_sanssemibold;}

/**************************************************************************** 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 ******************************************************************/

/* @keyframes diapo{
    0%{background-image: url(images/test3.jpg);}
    11.11%{background-image: url(images/test1.jpeg);}
    33.33%{background-image: url(images/test1.jpeg);}
    44.44%{background-image: url(images/test1.jpg);}
    66.67%{background-image: url(images/test1.jpg);}
    77.78%{background-image: url(images/test3.jpg);}
    100%{background-image: url(images/test3.jpg);}
}

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

@keyframes diapo3{
    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);}
}

@keyframes defile{
    0%{background-image: url(images/test1.jpg);}
    11.11%{background-image: url(images/test3.jpg);}
    33.33%{background-image: url(images/test3.jpg);}
    44.44%{background-image: url(images/test2.jpg);}
    66.67%{background-image: url(images/test2.jpg);}
    77.78%{background-image: url(images/test1.jpg);}
    100%{background-image: url(images/test1.jpg);}
} */


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

div#main
	{background:#015;                                                                            /*background dark blue*/
	 width: auto;
     margin-right:auto;
     margin-left:auto;
     text-align:left;
     border:0px solid #F00;                                                                              /*border red*/
     }

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

a  {text-decoration:none; font-family:poppins; color:#FFF}     /* #33D = bleu  */
mark {background:transparent;  font-weight: bold; color:#DDD}                                                            /*   */

/*****************************************************  header  *******************************************************/
div#header {  width: auto; border: 0px solid #F00}                                                            /*border rouge*/

/******************************************************************  div#haut  *******************************************************************/
div#haut {position:absolute; top:0; width:100%; min-width:600px; padding:0; height:120px; z-index:100}

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


/***************************************  div#hdroit  ****************************************/
@media screen and (min-width: 1210px) {
	div#hdroit {display:inline-block; position:relative; float:right; top:10px; right:70px; padding-left:50px; width:800px; vertical-align: middle}

	/*************  div#contacto  **************/
	div#contact {float:right; margin:0px 20px 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:#FFF; font: 0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif}
	
	#hdroit input {display:none}
	/*************   div.nav1  ****************/
	div.nav1 {float:right; margin-top:5px; margin-right:20px; width:100%; height:58px}
	div.nav1 a {color:#FFF; font: 0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif}
	/* 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#ctctx {display:none}
	
	li.menu1:hover {/* background:#FFF; color:#017; box-shadow: 2px 2px 0px rgba(0,0,0,0.2); */}
	li.menu1:hover .level2{display:block}
	
	li.menu1 a {display: block; text-decoration: none; height:80%; text-align: center; vertical-align:middle}
	li.menu1 a:hover {letter-spacing: 1px}
	
	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(0,17,85,0.95); padding: 0.1em 0 0.3em; font-size: 0.8em; font-family: work_sansregular,verdana, arial, sans-serif; color:#FFF}
	ul.level2 a:hover {color:#FFF; letter-spacing: 1px; box-shadow: 5px rgba(0,0,0,0.5)}
}

/*******************************************  div#hdroit responsive ************************************************/
@media screen and (max-width: 1209.999px) {
	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}
	
	#hdroit span {display:block; width:33px; height:4px; margin-bottom:5px; position:relative; background:#FFF; border-radius:3px;
		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.5s ease
	}
	#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:#FFF}
	#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(0,17,85,0.95); list-style-type:none; -webkit-font-smoothing: antialiased; display:none}
	div.nav1 a {color:#FFF; font:0.5em; font-family:work_sanssemibold,verdana, arial, sans-serif}
	
	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; color:#FFF*/}
	li.menu1:hover .level2{display:block}
	
	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}
	
	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(0,17,85,0.95); padding: 0.3em 1em 0.3em; font-size: 0.8em; font-family: work_sansregular,verdana, arial, sans-serif; color:#FFF}
	ul.level2 a:hover {/*background:#016; color:#FFF; */letter-spacing: 1px; box-shadow: 5px rgba(0,0,0,0.5)}
}

/****************************************************************   section page    **************************************************************/
/********************** responsive ***********************/
@media screen and (min-width: 1210px) {
	section.page {padding:120px 120px 50px}
}
@media screen and (min-width: 1150px) and (max-width: 1209.999px) {
	section.page {padding:120px 110px 50px}
}
@media screen and (min-width: 1090px) and (max-width: 1149.999px) {
	section.page {padding:120px 100px 50px}
}
@media screen and (min-width: 1020px) and (max-width: 1089.999px) {
	section.page {padding:120px 90px 50px}
}
@media screen and (min-width: 960px) and (max-width: 1019.999px) {
	section.page {padding:120px 80px 50px}
}
@media screen and (min-width: 900px) and (max-width: 959.999px) {
	section.page {padding:120px 70px 50px}
}
@media screen and (max-width: 899.999px) {
	section.page {padding:120px 60px 50px}
}

section.page {min-width:600px; color:#FFF}

div.main {display:block; color:#FFF; padding-bottom:70px}

div.main h1 {font-family: 'Poppins', sans-serif; font-size:2.5em}

div#contitlel {width:60%}
div#contitler {width:60%; margin-left:39.5%; margin-right:0.5%}
div#contitler h1 {text-align:right}
div#maintxt1 {display:inline-block; width:60%}
div#maintxt2 {display:inline-block; width:60%; margin-left:9%}

div#img1 {position:relative; display:inline-block; vertical-align:top; width:30%; height:450px; top:-17.5px; left:10%; background-repeat: no-repeat; background-size:cover}
div#img2 {position:relative; display:inline-block; vertical-align:top; width:30%; height:450px; top:-17.5px; background-repeat: no-repeat; background-size:cover}

div#img1 h3 {margin-top:470px; text-align:center; padding:0 10px}
div#img2 h3 {margin-top:470px; text-align:center}

/****************************************************************   page contact    **************************************************************/
div.mailc {margin-top:50px; padding: 0 5%}
div.mailc a {font-family:work_sanssemibold,verdana, arial, sans-serif}
div.mailc a:hover{text-decoration:underline}
div.contact {display:inline-block; vertical-align:top; width: 38%; margin:0 5%; color:white}
div.contact h1 {font-family: 'Poppins', sans-serif; font-size:2em}
div.contact a {font-family: work_sansregular,verdana, arial, sans-serif; font-size:1em}
div.contact a:hover {text-decoration:underline}
div.contact p {font-family: work_sansregular,verdana, arial, sans-serif; font-size:1em; text-align:left}
div.contact mark {font-weight:normal; color:#BBB}

/****************************************************************   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}
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}
}

 /******************************************************************  page nosotros  ******************************************************************/


div.boximage {
            display:inline-block;
            border: 0px solid #0F0;
            margin:10px 10px 10px 75px;
            text-align:center;
            color:#222;
           }