/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .bg {background-image: url(bg2.png) !important}
    .logo{zoom: 70%! important}
    
}
       
 /* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    .bg {background-image: url(bg3.png) !important}
    .logo{zoom: 70%! important}
    .text{top:35%! important}
    }
      
       

@font-face {
    font-family: "Harmonia Sans Pro Cyr";
    src: url(HarmoniaSansProCyr-SemiBd.woff) format("woff");
    font-weight: 600;
}
@font-face {
    font-family: "Harmonia Sans Pro Cyr";
    src: url(HarmoniaSansProCyr-Regular.woff) format("woff");
    font-style: normal;
}

body {
  color: rgba(240,240,240, 0.8);
  margin: 0;
  text-align: center;
  background-color: black;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
p {
  color: rgba(240,240,240, 0.8)
}
.header {
  top: 45%;
}
.footer {
  bottom:3%;
}
.description {
  color: gray;
  padding-top: 50px;
}
a, a:hover, a:visited {
  color: white;
  text-decoration: none;
} 
.disable-selection {
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
h1::after {
  content: ' Three JS';
  font-size: 12px;
  position:absolute;
  top: 3px;
  padding-left: 5px;
  font-weight: 400;
}
h2::after {
  content: '2';
  font-size: 12px;
  position:absolute;
  top: 14px;
  padding-left: 5px;
}
.dg {display:none;}
.bg {
    position: fixed; 
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height:100vh;  /* responsive height */
}
.logo {
    position: absolute;
    z-index:3;
    top: 40px;
	left: 7.71%;
    margin:0 10px 0 0; 
    zoom:80%;
  
}
    
.text
{position: absolute;
z-index:3;
left: 7.71%;
right: 62.99%;
top: 39.28%;
bottom: 39.17%;

font-family: Harmonia Sans Pro Cyr;
text-align:left;
font-style: normal;
font-weight: 600;
font-size: 58px;
line-height: 60px;
/* or 117% */
color: #FFFFFF;}
.btn {zoom:25%;
    left:0;
}

.sub {font-family: Harmonia Sans Pro Cyr;

font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 18px;
left:0;
padding-top: 80px;
/* identical to box height, or 138% */

text-align: center;

color: #FFFFFF;}

.cr{
    z-index:3;
position: absolute;
left: 7.71%;
bottom:20px;

font-family: Harmonia Sans Pro Cyr;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 18px;
/* identical to box height, or 138% */

text-align: center;

color: #FFFFFF;

opacity: 0.3;    
}