html {
  color: #222;
  font-size: 1em;


  background-color: #fff;
  min-height: 100vh;
}

body {
  font-size: 100%;
  font: 1em 'opensansregular', 'Helvetica Neue',sans-serif, Arial;
  color: #222;

  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-image: url('../img/foto3.jpg');

  margin: 0;
}

header {
  height: 300px;
  /* background-color: rgba(255, 255, 255, 0.5);    */
  background: linear-gradient( 0deg,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0 ) ); 
}
/* header nav {} */
.shadow {
    box-shadow: 6px 6px 12px rgba(64,64,64,0.8);
}
.white {
  background-color: rgba(255, 255, 255, 0.95);
}
.lose {
  margin: 1em auto;
  padding: 1em;
}
/* #topmenu { background-color: #fff; } */
/* #whiteish { } */
/* #blackish {} */

#banner {
  width: auto;
  height: 120px;
  /* tops:180px; */
  /* position: absolute; */
  /* max-width: 1120px; */
  margin-top:180px;
  float: right;
}
.wrapper {
  width: auto;
  margin: 0 auto;
  max-width: 1120px;
}


main {
  /*background-color: #fff;*/
  /* background-color: rgba(255, 255, 255, 0.8); */
  min-height: 40vh;
}
article {
  margin: 1em auto;
  max-width: 720px; 
  /* margin: 0 auto 1em auto; */
  box-sizing: border-box;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 6px 6px 12px rgba(64,64,64,0.6);
}

/* 
.thin { max-width: 720px; }
div.thin { max-width: 720px; margin:0 auto; } */



article.wide {
  max-width: 1120px;
}


/* 
#pagemiddle, #pagetop,#pagebottom {
}

#pagetop {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 6px 7px rgba(64,64,64,0.8);
}

 */
 footer {
/*background-color: #fff;*/
/*background-color: #eee;*/
/* background: linear-gradient( 0deg,rgba(0, 0, 0,0.75),rgba(0, 0, 0, 1) ); */
/* border:none; */
/* border-top: solid 1px #bbb; */
background: linear-gradient( 0deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.8 ) ); 
/* background-color: rgba(255, 255, 255, 0.8); */
/* background-color: rgba(255, 255, 255, 0.8); */
/* background-color:rgba(52, 61, 50, 0.877);  */
/* color:#eee; */
color: #444;
padding:0;
}

a  {
  /*color:  #df9116;  */   
  color: #a83c10;
  text-decoration: none;
  font-family: 'opensanssemibold';
  /* font-size: 1em; */
  /* font-family: "opensansbold",sans-serif; */
  }

button.link, summary  {
  /*color:  #df9116;  */   
  color: #a83c10;

  font-family: 'opensanssemibold';
  /* font-size: 1em; */
  /* font-family: "opensansbold",sans-serif; */
  }
a:hover, summary:hover {
  text-decoration: underline;
  cursor: pointer;
}



footer ul , footer p { padding: 0.5em;  }
footer a { 
  color: #444;
  font-family: 'opensanssemibold'  !important;
  text-decoration: underline !important;
}


form { max-width: 720px; margin:0 auto; }
textarea { width: 100%; }

address { font-style:  normal; }
input[type=text],input[type=radio],input[type=checkbox],select,textarea,input[type=file],input[type=email],input[type=password] {
border: solid 1px #e0e0e0;
background-color: #eee;
font-size: 0.825em;
max-width: 100%;  
margin-top: 4px;
}
input.error , select.error, textarea.error {
border: solid 1px #f00;
}

/* summary/details */
details {
  display: block;  /* Add the correct display in Edge, IE, and Firefox. */
}
summary {
  display: list-item; /* Add the correct display in all browsers. */
  font-weight: bold;
}
summary:hover { cursor: pointer; }
/* remove default arrow */
/* summary { list-style-type: none; }  */
/* summary::-webkit-details-marker { display: none; }  */
/* orange outline in chrome */
/* summary { outline: none; }  */
summary:active { background-color: transparent; } /* chrome FIX: mixes blue */

details[open] summary::after { 
  /* content:  " -";  */
  /* content:"\u25ba"; */
} 
/* there is no closed attr */
details:not([open]) summary::after { 
  /* content:  " +"; */
}

label ,  caption {
color: #444; font-weight: 600;  display: block; clear: both;

margin-top: 0.5em;
}
label.error { color: darkred; }
/* label  input:required { color:red; } */
input[type=radio] { display: inline; }
input[type=radio] ~ span { display: inline; }

/* :invalid { outline-color: orangered; shadow:none; } */

button { display: block; clear: both;}
a.button, button, input[type=submit]  {
background-color: #f7941d; border: solid 1px #e3881b;
min-width: 10em; padding: 0.5em; text-align: center;
color: #fff;   font-weight: 600;
margin: 1em 0 1em 0;
/*margin: 0 auto;*/
}
button:disabled , input[type=submit]:disabled  ,  input[type=reset] {
background-color: #ccc; border: solid 1px #bbb;
color: #444;
}
input.link, button.link { background: transparent; border:none ; min-width: auto; padding: 0;}
input.inline, button.inline { display: inline-block; clear:none }

form.span { font-size: 0.825em; color:#ccc; }





table { min-width: 480px; margin:0 0;  }


div.ebox , div.box {
padding: 1em;  margin: 0 auto; width: 50%; text-align: center;
}
div.ebox.success {  border: solid 2px #b3dcaf; }
div.ebox.error { border: solid 2px #e7a846; }
/* table {  border: solid 2px #888; } */

/*label ~ :invalid { color: red; }*/


h1,h2,h3,h4 {
font-family: "opensanssemibold", sans-serif;

/* font-weight: 700; */
margin:0;
}

h1 {
font-size: 1.5em;
color: #888;
}
h2 {
font-size: 1.25em;
color: #444;
/* padding:2em 0 0.5em 0; */
}
h3 {
color: #666;
font-size: 1.125em;
padding:1.5em 0 0.5em 0;
}
h4 {
color: #666;
font-size: 1em;
padding:1.5em 0 0.5em 0;
}
p { padding: 0.5em 0 0 0; margin:0; }

ul {
 list-style: none;
 line-height: 120%;
 margin-left: 0; margin-bottom: 0; padding: 0;
}



footer img.logo {
height: 60px; width: auto; padding: 0.5em;
display: inline-block;
}


figure,video {
margin: 0 auto;

}

p.center {
text-align: center;
}
p.center figure {
margin: 0 auto;
display: block;
}
hr.clear { height:1px; margin: 0; }

th{ text-align: left;}


/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

/* div.cookies { position: fixed; bottom: 0; margin: 0 auto;} */

@media only screen and (max-width: 480px) {
body {
        min-width: 320px;
}
  header {
    height: auto;

  }
  #banner {
     margin: 0;  
      height: auto; width: 100%;max-width: 400px;
     /*height: auto; width: 120vw;*/
   }
  article {
    min-width: 320px; padding: 0.5em;
  }
  footer img.logo {
    height: 36px; width: auto;
    display: block;
  }
  figure, video { max-width: 340px; }

  .right { float: none; }
}

@media only screen and (max-width: 768px) {
  header {
    height: 160px;
  }
  #banner {
    margin-top: 40px;
 }
 article {
   padding: 1em;
 }
 
}