* {
  box-sizing: border-box;
}
html,body {
  font-family:"sans-serif,Arial,Verdana,Helvetica";
  font-size:1em;
  margin: 0;
  background-color:white;
}
h1{
  padding:0px;
  font-size:1.5em;
  font-weight:bold;
  font-variant:small-caps;
  text-align:center;
  color:#444;
  margin-bottom:30px;
  line-height:20px;
}
h2{
  font-size:1.2em;
  color:#3C6D95;
  padding:0px;
  margin-bottom:0px;
  background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%);
  border-radius:8px;
  border:1px solid #e5e5e5;
  padding:4px;
}
h5{display:block;padding:0px;}
h5.footer{
  margin:0;
  line-height:32px;
}
p.flexb{
  margin-top:0px;
}
p.cen{text-align:center;width:100vw;}
a.etech{font-weight:bold;text-decoration:none;outline:none;}
a.etech:link{color:#012;}
a.etech:visited{color:#036;}
a.etech:hover{color:#114E86;}
a.etech:active{color:#036;}
a.video{
  display:block;
  position:relative;
  margin-left:auto;margin-right:auto;
  outline:none;
  border: 1px solid #ccc;
  border-radius:52px;
  width:104px;
  height:52px;
  background:url(/images/vid.png) center no-repeat,linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
a.video:hover{
  color:blue;
  border-color:#777;
  box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.35);
}
pre.etech{
  padding:0px;margin:0px;
  font-family:"sans-serif,Arial,Verdana,Helvetica";
  font-size:1em;
  overflow: auto;
  white-space: pre-line;
}

/* Barre de navigation */
.navbar {
  display: flex;
  flex-wrap: wrap;
  position:fixed;
  z-index:9;
  width:100%;
  height:48px;
  top:0px;
  left:0px;
  border-top:4px solid #3C6D95;
  border-bottom:4px solid #3C6D95;
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.35);
  font-variant:small-caps;
}
/* Logo à gauche dans la barre de navigation */
div.logo{
  position:relative;
  width:165px;
  height:18px;
  margin-left:8px;
  margin-right:8px;
  margin-top:10px;
  background:url(/images/etech_logo_22_165.png) center center no-repeat;
}
.navbar a {
  color: #333;
  padding: 6px 10px;
  text-decoration: none;
  text-align: center;
  margin-top:4px;
  margin-bottom:4px;
  margin-left:4px;
}
.navbar a:hover {
  background-color:#eee;
  color: #000;
  border:1px solid #333;
  border-radius:8px;
  margin-top:4px;
  margin-bottom:4px;
  padding: 5px 9px;
}
.menu_selected{
  color: #000;
  text-decoration: none;
  text-align: center;
  border:1px solid #333;
  border-radius:8px;
  background-color:#FFF;
  margin-top:4px;
  margin-bottom:4px;
  margin-left:4px;
  box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
  font-variant:small-caps;
  padding: 5px 9px;
}
/* Conteneur */
.row {  
  display: flex;
  flex-wrap: wrap;
  margin-top:30px;
  margin-bottom:30px;
}
.subrow{
  display: flex;
  flex-wrap: wrap;
}
.subside{
  display:flex;
  flex: 30%;
  align-items: center;
  justify-content: center;
}
.submainl{
  flex: 70%;
  background-color: white;
  padding-right: 10px;
}
.submainr{
  flex: 70%;
  background-color: white;
  padding-left: 10px;
}
/* Menu accessible */
.dropdown{
  position:fixed;
  bottom:0vh;
  width:40px;
  height:64px;
  margin-left:-1px;
  margin-bottom:40px;
  z-index:9;
}
.dropbtn{
  position:absolute;
  left:0px;top:0px;
  width:40px;
  height:64px;
  cursor:pointer;
  background:url(/images/menu.png) center no-repeat,linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  border-top:1px solid #777;
  border-right:1px solid #777;
  border-bottom:1px solid #777;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  padding:0px;
  box-shadow:4px 4px 8px 0px rgba(0,0,0,0.25);
}
.dropdown-content{
  position:absolute;text-align:center;
  background-color:#f1da36;
  background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%);
  box-shadow:5px 5px 10px 0px rgba(0,0,0,0.25);
  left:-300px;
  bottom:52px;
  width:200px;
  font-variant:small-caps;
  border-top:1px solid #777;
  border-right:1px solid #777;
  border-bottom:1px solid #777;
  border-radius:8px;
  opacity:0;
}
.dropdown-content a{
  color:#000;
  padding:12px 8px;
  text-decoration:none;
  border:1px solid transparent;
  display:block;
  outline:none;
   }
.dropdown-content a:hover{
  background-color:#FFF;
  border:1px solid #777;
  border-radius:8px;
  box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content{
  display:block;
  width:200px;
  background-color:#f1da36;
  transition:opacity 1s,left 0.5s;
  opacity:1.0;
  left:-1px;
}
.dropbtn:hover{
  width:40px;
  box-shadow:none;
}

/* Colonne principale */
.main {
  flex: 100%;
  background-color: white;
  padding: 40px;
}

/* Pied de page */
.footer {
  border-top:1px solid #777;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  color:#000;
  position:fixed;
  bottom:0vh;
  width:100%;
  height:32px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.10);
}
img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
img.sh{
  box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.25);
}
img.etech {
  border:1px solid #ccc;
  border-radius:8px;
}
video {
  height: auto;
  vertical-align: middle;
  width: 100%;
  z-index:0;
}

/* Formulaire de contact */
.subrow_form{
  display: flex;
  flex-wrap: wrap;
  margin-bottom:10px;
}
.subside_form{
  flex: 35%;
  text-align:right;
}
.submainr_form{
  flex: 65%;
  text-align:left;
  padding-left: 20px;
}
form{
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:40px;
  max-width:700px;
  height:auto;
  border:1px solid #333;
  border-radius:8px;
  text-align:center;
  padding:20px;
  background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%);
  box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.12);
}
input[type=text]{height:30px;width:70%;}
input[type=email]{height:30px;width:70%;}
input[type=tel]{height:30px;width:70%;}
textarea{width:70%;}
label{height:30px;line-height:30px;}
input[type=submit],button[type=submit]{
  margin-left:auto;margin-right:auto;margin-top:10px;padding:10px;border-radius:8px;color:#000;
  background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
  border:1px solid #333;
}
input[type=submit]:hover,button[type=submit]:hover{
  cursor:pointer;color:blue;
}

p.subfirst{font-weight:bold;margin-bottom:4px;text-decoration:underline;font-variant:small-caps;}
p.sub{font-weight:bold;margin-top:10px;margin-bottom:4px;text-decoration:underline;font-variant:small-caps;}
hr.etech{border:0;height:1px;background-image:linear-gradient(to right,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.30),rgba(0, 0, 0, 0));margin-top:10px;}
span.boldi{font-weight:bold;font-style:italic;}
span.val_html{display:inline-block;position:relative;width:88px;height:31px;top:9px;background-image:url(/images/w3c_html.png);}
span.val_css{display:inline-block;position:relative;width:88px;height:31px;top:9px;background-image:url(/images/w3c_css.png);}

/********************************************************************************************************************/
@media screen and (max-width: 740px) {
  .row, .subrow, .subrow_form {   
    flex-direction: column;
  }
  h1{margin-bottom:20px;margin-top:30px;}
  h2{text-align:center;}
  .main {
  padding: 10px;
}
  .navbar a {display:none;}
  .menu_selected{display:none;}
  div.logo{
  position:relative;
  margin-left:auto;margin-right:auto;
  background:url(/images/etech_logo_22_165.png) no-repeat center;
}
  .dropdown{
	top:0px;
	left:0px;
	width:100vw;
	height:48px;
  }
  .dropbtn{
  position:absolute;
  left:4px;top:6px;
  width:36px;
  height:36px;
  border:1px solid #777;
  border-radius:8px;
  box-shadow:none;
}
  .dropdown-content{
    display:none;
    top:47px;
    left:1px;
    border-left:1px solid #777;
    position:relative;
    height:auto;
    border-radius:0px 0px 8px 8px;
    box-shadow:0px 8px 8px 0px rgba(0,0,0,0.45);
  }
.dropdown:hover .dropdown-content{
  width:100vw;
}
.dropbtn:hover {
  width:36px;
  box-shadow:3px 3px 6px 0px rgba(0,0,0,0.25);
}
  .submainl{
    padding-right: 0px;
    padding-bottom: 10px;
  }
  .submainr{
    padding-left: 0px;
    padding-top:10px;
  }
  video {
    width: 100%;
  }

  /* Formulaire */
  label{margin-top:20px;text-align:center;}
  .subside_form{
    text-align:center;
  }
  .submainr_form{
    padding-left: 0px;
  }
  input[type=text]{width:100%;}
  input[type=email]{width:100%;}
  input[type=tel]{width:100%;}
  textarea{width:100%;}
}