@import "https://fonts.googleapis.com/css?family=Gotu";

* {
  box-sizing: border-box;
}

body {
  color: #fff;
  background-color: #000;
  font-family:'Gotu',sans-serif;
  font-size: 100%;
}

a           {color: #FFFFFF;}
a:link		{color: #CCCCFF;}
a:visited	{color: #CCFFFF;}
a:active	{color: #CCFFCC;}
a:hover     {text-shadow: .05em .05em 0 #FFFFFF; }

span { color: #AAA; }

h1 {
   font-size: 1.5em;
   margin-top: 2em;
}

#heading {
  width: 50%;
  text-align: center;
  font-size: 2em;
  text-shadow: .1em .1em #556677;
}

.linehead {
  font-size: 1.2em;
  color: #FFFFFF;
  padding-right: .5em;
}

#text {
  float: left;
  color: #fff;
  background-color: #333;
  padding: 0em 1em 1em 1em;
  margin: 1em;
  font-size: 1em; 
  line-height: 1.4em;
  word-wrap: break-word; 
  box-shadow: .13vw .13vw #556677;
  width: 50%;
}

#xx {
  position: absolute;
  top: 1em;
  right: 1em;
}

#xx a {
  text-decoration: none;
  font-size: 2em;
}


.cameraBox {
  display: inline-block;
  margin: 0em;
  width: 15%;
  height: auto;
  padding: 0em 1em 0em 1em;
}

.cameraBox img {
  display: block;
  margin: auto;
  width: 80%;
  height: auto;
  /*margin: auto;*/
}

.cameraBox p {
  font-size: .8em;
  text-align: center;
}

.def {
    background-color: #aaaaaa;
    padding: 1vw;
    margin: 1vw;
    color: black;    
    font-family: Arial, sans-serif;
    box-shadow: .2vw .2vw black;
    width: 50%;
    float: right;
}

.lensBox {
  display: inline-block;
  margin: 0em;
  width: 7.5%;
  height: auto;
  padding: 0em 1em 0em 1em;
  /*border: 1px solid white;*/
}

.lensBox img {
  display: block;
  margin: auto;
  width: 80%;
  height: auto;
  /*margin: auto;*/
}

.lensBox p {
  font-size: .8em;
  text-align: center;
}

@media screen and (max-width: 600px) {
  #text {
    width: 100%;
    margin: 0em;
  }
  
  .cameraBox {
    width: 45%;
  }
  
  .lensBox {
    width: 20%;
  }
}