@font-face { font-family: 'plex';
              src: url('../font/IBMPlexSans-Regular.otf') format('opentype'); 
}


html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: plex, Helvetica, Arial;
font-size: 14px;
font-size: 1.5vw;
line-height: 150%;
background: #000;
color: #fff;
letter-spacing: 0.02em;
}



#wrap {
	background-image: url("");
				background-position: center;
				background-repeat: no-repeat;
				display: inline-block;
				height: 100%;
				margin: 0px 0px 0px 0;
				vertical-align: bottom;
				width: 100%;
                                background-size: cover; 
			
}


#symbol {
display: block;
width: 30%;  
position: fixed; 
left: 50%; 
top: 50%; 
margin-top: 0px; 
margin-left: 0px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#symbol img {
width: 100%;
padding: 0px;
margin: 0;

}

#full-image {
  position: relative;
  width: 100%;
  opacity: 0.2;
}

#full-image img {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}


h1, h2, h3, h4 {
font-size: 1em;
margin: 0;
padding: 0;
font-weight: normal;
letter-spacing: 0.02em;
}

h1 {
font-size: 2em;
font-weight: normal;
display: inline;
font-family: plex, Helvetica, Arial !important;
}

a {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
padding-bottom: 5px;

}

a:hover {
color: #fff;
border-bottom: 0px solid #fff;
}

input {
margin: 0;
padding: 28px;
padding: 5vw;
outline: none;
font-family: plex, Helvetica, Arial;
font-size: 1em;
background: #000000;
border: 0px solid;
color: #fff;
text-align: center;
}

::-webkit-input-placeholder,
input:-moz-placeholder {
text-align:center !important;
line-height: 28px !important;
height: 28px;
}


.inline {
display: inline;
}

#footer {
margin-top: 80px;
}


#top-left {
position: fixed;
top: 50px;
top: 5vw;
left: 50px;
left: 5vw;
}

#top-left1 {
position: absolute;
top: 50px;
top: 5vw;
left: 50px;
left: 5vw;
margin-right: 80px;

}

#top-center {
position: fixed;
top: 50px;
top: 5vw;
left: 50%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
box-sizing: border-box;
}

#top-right {
position: fixed;
top: 50px;
top: 5vw;
right: 50px;
right: 5vw;
box-sizing: border-box;
text-align: right;
}

#bottom-left {
position: fixed;
bottom: 50px;
bottom: 5vw;
left: 50px;
left: 5vw;
width: 25%;
box-sizing: border-box;
}

#bottom-center {
position: fixed;
bottom: 50px;
bottom: 5vw;
left: 50%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
box-sizing: border-box;
text-align: center;
}

#bottom-right {
position: fixed;
bottom: 50px;
bottom: 5vw;
right: 50px;
right: 5vw;
text-align: right;
}

#middle-left {
  
}

.outer {

}

#middle-left .inner {
  position: fixed;
  top: 50%;
  left: 50px;
  left: 2vw;
  margin-left: 7px;
  margin-left: 0.5vw;
  margin-right: 7px;
  margin-right: 0.5vw;
}

#middle-right .inner {
  position: fixed;
  top: 50%;
  right: 50px;
  right: 2vw;
  margin-right: 7px;
  margin-right: 0.5vw;
  margin-left: 7px;
  margin-left: 0.5vw;
}

#middle-left .rotate {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

#middle-right .rotate {
  -moz-transform: translateX(50%) translateY(50%) rotate(90deg);
  -webkit-transform: translateX(50%) translateY(50%) rotate(90deg);
  transform:  translateX(50%) translateY(50%) rotate(90deg);
}


.left {
float: left;
}

.right {
float: right;
}


.uppercase {
text-transform: uppercase;
}

.small {

}


@media all and (max-width: 1024px) and (min-width: 0px) {
  
  html, body {
    font-size: 20px !important;
    font-size: 4vw !important;
    letter-spacing: 0.02em !important;
    -webkit-text-size-adjust:100% !important;
  }
  
  #bottom-left {
    width: 50%;
  }
  
  #symbol {
    width: 50%;  
  }
}