@import "layout.css";
/*pic credits*/
p.credits {
  font-style: italic;
  display: block;
   position: absolute;
   margin-top: 20px;
    top: 60px;
    font-size: 10px;
    color: #bbb;
  }

body {
background: url("../images/home/black.jpg"); 
background-repeat: no-repeat;
background-position: 0% 15%;
background-size: cover;
background-attachment: fixed;
}

a {color: #bbbbbb}
li.dropdown{color: #bbbbbb;}


div#logo{
display: flex;
justify-content: center;
align-items: center;
 width: 1000px;
 height: 100px;
 position: absolute;
 margin-top: -100px;
 margin-left: -500px;
 top: 50%;
 left: 50%;
}
img {
 margin: 0 auto;
width: 580px;
height: 108px;
}
.a,.b {
  fill:#bbb;
  stroke:#bbb;
  stroke-width: 5px;
  }

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

  div#logo{
    width: 1396px; 
    margin-left: -680px;
    margin-top: -70px;
    
  }
  img { width: 420px; height: 108px;}

  p.credits {top: 50px;}
}

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

  body {background: #000;}
  p.credits {display: none;}
}
/*tablet*/

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

div#logo {width: 865px; margin-left: -412.5px;}

  img {width: 360px; height: 108px;}
}

/*small tablet*/
@media only screen and (max-width: 672px) {

div#logo {width: 672px; margin-left: -326px;}

img {width: 250px;height: 108px;}

}

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

  div#logo{ width: 300px; margin-left: -145px;}
 
  img {width: 220px; height: 108px; }
}
/*small mobile*/
@media only screen and (max-width: 321px) {

  div#logo{width: 176px; margin-left: -85px;}

  img {width: 180px; height: 108px; }
 

}