@import url(https://fonts.googleapis.com/css?family=Cabin:400,600);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic);

/* For Mobile / Default */

#fblogo{
  float: left;
  margin-left: 20px;
  margin-top: 10px;
}

.productImage{
  width: 95%;
  height: 95%;
}

.productImage-port{
  width: 95%;
  height: 95%;
}

#toptext{
  float: left;
  margin-left: 5px;
  margin-top: 20px;
  font-weight: normal;
  letter-spacing: 0.2em;
  color: #fff;
  font-size: 0.6em;
}

h3 {
  color:#2DA9D5;
  text-transform: uppercase;
  letter-spacing: 1px;
}

header {
  color: #fff;
  position: relative;
  width: 100vw;
  height: 100vw;
  background-image: url(../images/header_comp.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  padding-top: 20px;
}
header img{
  padding-bottom: 0px;
  height: 150px;
  width: 150px;
  margin-top: 140px
}
header * {
  font-weight: normal;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0;
  padding: 1em 0;
}
main {
  background-color: #fff;
  line-height: 1.7;
  max-width: 100%;
  padding: 5%;
  position: relative;
  z-index: 2;
}

.main_content{
 /* font-size: 2.2em;*/
}

body {
  margin:0;
  padding:0;
  /*-webkit-perspective: 1px;*/
  /*perspective: 1px;*/
  /*-webkit-transform-style: preserve-3d;*/
  /*transform-style: preserve-3d;*/
  /*height: 100%;*/
  /*overflow-y: scroll;*/
  /*overflow-x: hidden;*/
  font-family: 'Open Sans', sans-serif;
  /*font-size: 1em;*/
  color: #333333;
}

header h1{
 /* font-size: 4em;*/
  margin-top: -50px
}

header p{
  /*font-size: 2em;*/
  margin-top: -50px
}

#imageSpace{
  display: none;

}

@media only screen and (min-device-width: 768px) {
/* For Desktop */
html {
  height: 100%;
  overflow: hidden;
}

#imageSpace{
  display: block;

}

.productImage{
  width: 450px;
  height: 300px;
}

.productImage-port{
  width: 450px;
  height: 675px;
}


body {
  color: #333333;
  margin:0;
  padding:0;
  /*-webkit-perspective: 1px;
  perspective: 1px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;*/
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: 16px;
}
header {
  box-sizing: border-box;
  min-height: 50vw;
  height: 60vw;
  padding: 28vw 0 5vw;
  position: relative;
  -webkit-transform-style: inherit;
  transform-style: inherit;
  width: 100vw;
}
header img{
  height: 300px;
  width: 300px;
  margin-top: 0px;

}
header, header:before {
  /*background: 50% 50% / cover;*/
}
header::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  background-color: #8a8;
  background-image: url(../images/header_comp.jpg);
  background-size: cover;
  -webkit-transform-origin: center center 0;
  -webkit-transform: translateZ(-1px) scale(2);
  transform-origin: center center 0;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  min-height: 100vh;
}
header * {
  font-weight: normal;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0;
  padding: 1em 0;
}

main {
  line-height: 1.7;
  max-width: 100%;
  padding: 5%;
  position: relative;
  z-index: 2;
}
.main_content{
  font-size: 1em;
}
header h1{
  font-size: 4em;
  margin-top: -80px;
}
header p{
  font-size: 1em;
  margin-top: -170px;
}

#toptext{
  font-size: 1em;
  margin-top: 15px;
  margin-left: 20px;
}


  }