/*

=======================================================
 ________                           __  ____  _______  
|   _____|                         \  \/   / /______ \ 
|  |       __  __  ___       _____  \     /     ___/ / 
|  |      |  | | ||   |___  /  _  \  /   /     |__  /  
|  |_____ |  |_| ||  ___  |/  ____/ /     \   ____\  \ 
|________||______||_______|\______/|___/\__\ \_______/ 
=======================================================
2016/07/23 by DKZ https://davidkingzyb.github.io
http://davidkingzyb.github.io/CubeX3
*/

a{text-decoration: none;color:white;}
body{
    background-color: #ddd;
    margin:0px;
    font-family: Helvetica, Arial, SimHei,sans-serif;
}
p{
    margin: 0.5em;
}

.con1{
    width: 100%;
    height: 100%;
}

.bg{
    background:url(img/bg.jpg) center no-repeat;
    width:100%;
    height:100%;
    background-size: cover;
    position: absolute;
}
.logo{
    background:url(img/logo.png) no-repeat;
    background-size: 207px 378px;
    position:absolute;
    z-index: 99999;
    width:207px;
    height:378px;
    left:50%;
    margin-left: -100px;
    top:100px;
}

.info{
    position: absolute;
    margin-top: 50px;
    color:white;
    font-family: KaiTi STKaiti;
    left:60%;
}

@-webkit-keyframes infoFadeOut {
    0% {opacity:0;}
    50%{opacity:0;}
    100%{opacity:1;}
}

@keyframes infoFadeOut {
    0% {opacity:0;}
    50%{opacity:0;}
    100%{opacity:1;}
}

.infoFadeOut {
  -webkit-animation-name: infoFadeOut;
  animation-name: infoFadeOut;
}

@-webkit-keyframes fadeOut {
    0% {opacity:0;}
    50%{opacity:1;left:50%;}
    100%{opacity:1;left:30%;}
}

@keyframes fadeOut {
    0% {opacity:0;}
    50%{opacity:1;left:50%;}
    100%{opacity:1;left:30%;}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes bgBlur {
    0% {}
    50%{-webkit-filter: blur(0px);
            -moz-filter: blur(0px);
            -o-filter: blur(0px);
            -ms-filter: blur(0px);
            filter: blur(0px);}
    100%{-webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);}
}

@keyframes bgBlur {
    0% {}
    50%{-webkit-filter: blur(0px);
            -moz-filter: blur(0px);
            -o-filter: blur(0px);
            -ms-filter: blur(0px);
            filter: blur(0px);}
    100%{-webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);}
}

.bgBlur{
    -webkit-animation-name: bgBlur;
  animation-name: bgBlur;
}

.animated {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.con2{
    width:100%;
    height:350px;
    background-color: #bbd3d3;
}
.con3{
    width:100%;
    height:750px;
    background-color: #222;
}
.con4{
    width:100%;
    height:200px;
    background-color:#ddd;
}
.conend{
    width:100%;
    height:100px;
    background-color:black;
}
.concenter{
    margin:0 auto;
    width:900px;
    overflow: block;
    padding-top:50px; 
}

.con2pane{
    padding-right: 100px; 
    float: left;
}

.con2pane p{
    text-align: center;
    color: white;
    margin:0px;
    padding-top: 0.5em;
}

.con2pane img{
    height:200px; 
}

#game{
    border: 0px;
    margin-top: 40px;
    left:50%;
    position: relative;
    margin-left: -334px; 
}

.con4left{
    color:#222;
    font-size: 40px;
    margin-left: 80px;
    float:left;
    font-family: Impact;
}
a .con4left:hover{
    color:#82dffb;
}
.con4left p{
    margin:0px;
}
.con4mid{
    float:left;
    color:#222;
    margin-left: 130px;
    text-align: center;
}
.con4mid a{
    color:#222;
}
.con4mid a:hover{
    color:#82dffb;
}
.con4right{
    margin-left: 100px;
    margin-top:-20px; 
    float:left;
}
#footer .btn{
    border:1px solid white;
    border-radius: 5px;
    padding:5px 22px;
    margin:5px;
    color:white;
    font-family: Arial,Georgia,sans-serif;
    font-size: 15px;
}
#footerR .btn{
    padding:5px 10px;
}
#footer .btn:hover{
    color:#82dffb;
    border:1px solid #82dffb;
}
#footerR .btn:hover{
    color:#82dffb;
    border:1px solid #82dffb;
}
#footer{
    background-color: #111111;
    padding:0px;
    position:fixed;
    height:20px;
    width:100%;
    bottom:0px;
    z-index: 99;
}


@media only screen and (max-width: 750px){
    /*mobile*/
    #cubehead{
        position:absolute;
        left:50px;
        top:18px;
    }
    #footerL{
        position:absolute;
        left:140px;
        top:20px;
    }
    #footerR{
        position:absolute;
        left:140px;
        top:60px;
    }

    #footerPane{
        position:absolute;
        left:50%;
        margin-left: -200px;
    }
    #footer{
        height:100px;
    }

}

@media only screen and (min-width: 750px){
    /*pc*/
    #cubehead{
    position:absolute;
    left:50%;
    margin:18px 20px 18px -35px  ;
}
    #footerR{
        position:absolute;
        right:15%;
        margin-top:45px;
    }
    #footerL{
        position:absolute;
        left:15%;
        margin-top:45px;
    }

    #footerPane{
        width:80%;
        height: 100px;
        margin:0 auto;
    }
}

#headcube{
    top:70px;
    position:relative;
    left:40px;
    width:150px;
    height:200px;
    float:left;
}
#headmask{
    position:relative;
    top:-200px;
}