@import "layout.css";

/*pic credits*/
i.credits {
  display: block;
  position: absolute;
  color: #000;
  font-size: 10px;
  margin-left: 60px;
  }

* {box-sizing: border-box;}

body {
background-image: url("../images/bio/bioback.jpg");
background-repeat: no-repeat;
background-blend-mode: luminosity;
text-align: center;
overflow: auto;
}

/*DROP STYLE*/
a {color: #000}
li.dropdown{color: #000;}
ul.drop.submenu{text-align: left;}

div#main {
  width: 960px;
  min-height: 100%;
  display: inline-block;
  overflow:hidden;
  margin-top: 10px;
  margin-bottom: 40px;
}

h5 {
  position: relative;
  right: 170px;
  font-style: italic;
}

#bio {float: right;}
  
p {
  text-align: left;
  font-size: 16px;
  line-height: 1.5em;
  color: #000;
  font-style: italic;
  width: 580px;
  margin: 20px 0px 10px 10px;
  padding: 10px;
  border-top: 1px solid #665544;
  border-bottom: 1px solid #665544;

}

img {
  margin-top: 150px;
   width: 300px;
   border: 2px solid #000000;
}

/*svg icons*/
.a,.b {
  fill:#000;
  stroke:#000;
  stroke-width: 5px;
  }
 
/*web grande*/
@media (min-width: 2000px) {body {overflow-x: auto;} #main {margin-top: 50px;}}

@media (min-width: 2500px) {#main {margin-top: 120px;}}


footer {position: relative;}


@media only screen and (max-width: 1366px) {

  h5 {
    position: relative;
    right: 115px;
    font-style: italic;
  }
  
  #bio {
    float: right;
    position: relative;
    right: 160px;
    }
    
p {
  text-align: left;
  font-size: 14px;
  line-height: 1.5em;
  color: #000;
  font-style: italic;
  width: 460px;
  margin: 20px 0px 10px 10px;
  padding: 10px;
  border-top: 1px solid #665544;
  border-bottom: 1px solid #665544;

}

img {
  position: relative;
  right: 70px;
  margin-top: 150px;
   width: 250px;
   border: 2px solid #000000;
}
}

/*tablet*/

@media only screen and (max-width: 930px) {

  i.credits {display: none;}

  body{background: #fff;}

  #main {
    width:930px;
    overflow:hidden;
    display:inline-block;
  }

  h5 {
    position: relative;
    right: 80px;
    font-style: italic;
  }
  
  #bio {
    float: right;
    position: relative;
    right: 260px;
    }
    
p {
  text-align: left;
  font-size: 14px;
  line-height: 1.5em;
  color: #000;
  font-style: italic;
  width: 400px;
  margin: 20px 0px 10px 10px;
  padding: 10px;
  border-top: 1px solid #665544;
  border-bottom: 1px solid #665544;

}

img {
  position: relative;
  right: 120px;
  margin-top: 150px;
   width: 220px;
   border: 2px solid #000000;
}

}


@media only screen and (max-width: 840px) {

  i.credits {
    position: static;
    margin-top: 5px;
   margin-left: 0px;
   font-size: 8.5px;
    }


  #main {
    display: block;
    position: relative;
    left: -10px;
    max-width: 400px;
    height: auto;
    overflow:hidden;
    margin-top: 0px;
    margin: auto;
    padding: 10px;
    
  }

img { 
  display: block;
  position: relative;
  right: 0px;
  left: 0px;
  margin-top: 0px;
  width: 180px;
  margin: auto;
   
}


#bio { 
  display: block;
  position: relative;
  right: 0px;
  float: none;
 
}

h5 {
  position: relative;
  right: 0px;
  font-style: italic;
  margin-left: auto;
    margin-right: auto
}

p {
  text-align: left;
  font-size: 14px;
  line-height: 1.5em;
  color: #000;
  font-style: italic;
  width: 300px;
  margin: 20px 0px 10px 10px;
  padding: 10px;
  border-top: 1px solid #665544;
  border-bottom: 1px solid #665544;
  margin-left: auto;
    margin-right: auto
  
}


}

@media only screen and (max-width: 450px) {

  div#main {
    display: block;
    position: relative;
    left: -10px;
    width: auto;
    height: auto;
    overflow:hidden;
    margin: auto;
    padding: 10px;
    
  }

img { 
  display: block;
  position: relative;
  margin-top: 0px;
  width: 140px;
  border: 2px solid #000000;
   
}


#bio { 
  display: block;
  position: relative;
}

h5 {
  position: relative;
  right: 0px;
  font-style: italic;
  font-size: 11px;
  margin-left: auto;
    margin-right: auto
}

p {
  text-align: left;
  font-size: 12px;
  line-height: 1.5em;
  color: #000;
  font-style: italic;
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  border-top: 1px solid #665544;
  border-bottom: 1px solid #665544;
  
}
}

@media only screen and (max-width: 321px) {
  #main {
    display: block;
    position: relative;
    left: 45px;
    width: 320px;
    height: auto;
    overflow:hidden;
    margin: auto;
    padding: 10px;
    
  }
}