@charset "utf-8";
/* CSS Document */
html {
    height:100%;
    width:100%;
}
body {
    position:fixed;
	margin:0;
	width:100%;
    height:100%;
    color:#000000;
    text-align: center;
	transition:ease 1s;
}
#bottle {
    width:auto;
    height:100%;
}
.bottle {
    height:100%;
    position:fixed;
    left:0;
    z-index:9;
}
header {
    position:fixed;
    z-index:2;
    top:0;
    width:100%;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
	transition:ease 1s;
}

.logo {
	width:100%;
    position:fixed;
    z-index:2;
	transition:ease 1s;
}

.logo img {
	width:100px;
	text-align: center;
	display:block;
	margin-left:auto;
	margin-right:auto;
	float:none;
	box-shadow:0 2px 2px 0 rgba(0,0,0,0.7);
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	transition:ease 1s;
}
.logo img:hover {
	filter:brightness(110%);
	-webkit-filter:brightness(110%);
	transition:ease 1s;
}
#water {
    position:fixed;
    background:#000;
    top:0;
    width:100%;
    height:100%;
    z-index:1;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
	transition:ease 2s;
}
.watertog:checked ~ .but1 { 
    color:#000;
	transition:ease 2s;
}
.watertog:checked ~ #water {
    top:90%;
	transition:ease 2s;
}
.hidden {
  opacity:0;
  /*  OR   */
  position:absolute;
  left:-999px;
}
.but1 {
    color:#fff;
    font-size:30px;
    display:block;
    position: absolute;
    top:100px;
    z-index:2;
    width:100%;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
	transition:ease 1s;
}
.drop {
    cursor:pointer;
}
#title {
    width:100%;
    height:100px;
    font-size:60px;
    font-family:"Alternate Gothic"
    line-height:150px;
    cursor:pointer;-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#test2 {
    position:fixed;
    top:150px;
    text-align:center;
	transition:ease 1s;
}
#test2 p {
    margin:0 auto;
    margin-bottom:10px;
    margin-top:230px;
    width:80%;
    text-align:center;
	transition:ease 1s;
}
footer {
    position:fixed;
    z-index: 2;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    color:#fff;
    background-color:#000;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
	transition:ease 1s;
}
#right {
    position:fixed;
    right:0;
    width:100%;
    font-size:16px;
    bottom:40px;
}
#right2 {
    position:fixed;
    right:0;
    width:100%;
    font-size:16px;
    bottom:20px;
}
#back {
    position:fixed;
    z-index:9;
    height:100%;
}
#back img {
    height:100%;
}
.clickhere {
    color:white;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.waves {
    width:100%;
    position:relative;
    bottom:250px;
	transition:ease .2s;
}
@media (max-width:1587px) {
    .waves {
        width:100%;
        position:relative;
        bottom:100px;
	   transition:ease .2s;
    }
}
@media (max-width:1586px) {
    .waves {
        width:100%;
        position:relative;
        bottom:200px;
	   transition:ease .2s;
    }
}
@media (max-width:1271px) {
    .waves {
        width:100%;
        position:relative;
        bottom:130px;
	   transition:ease .2s;
    }
}
@media (max-width: 831px) {
    .waves {
        width:100%;
        position:relative;
        bottom:100px;
	   transition:ease .2s;
    }
}
@media (max-width: 637px) {
    .waves {
        width:100%;
        position:relative;
        bottom:70px;
	   transition:ease .2s;
    }
}
@media (max-width: 444px) {
    .waves {
        width:100%;
        position:relative;
        bottom:50px;
	   transition:ease .2s;
    }
}
.get {
    margin-top:20px;
    text-decoration: none;
    color:#000000;
    font-size: 30px;
    padding:10px;
    border-radius:20px;
    background-color:#000000;
    -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
	transition:ease .2s;
}
.get:hover {
    text-decoration: none;
    color:#ffffff;
    padding:15px;
	transition:ease .2s;
}
#materialcard {
    background-origin: content-box;
    transform-origin: center;
    border-radius:100%;
    margin:0 auto;
    height:5px;
    width:5px;
    background-color:#424242;
    border-top:1px solid #616161;
    border-bottom:1px solid #212121;
	transition:ease 2s;
}
#materialcard:hover {
    margin:-50px auto;
    border-radius:100%;
    height:100px;
    width:100px;
    background-color:#424242;
	transition:ease 2s;
}