* { margin: 0; padding: 0;}

body, html {width:100%; height:100%; overflow:hidden;}

h1{
    color:white;
    margin:0 auto;
    font-size:50px;
}

#custom-bootstrap-menu.navbar-default {
    font-size: 14px;
    background-color: #171a45;
    border-width: 0px;
    border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: white;
    font-family: 'Roboto', sans-serif;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
canvas {
    position:absolute;
    width:100%;
    height:100%;    
    transition: 5s all;
}
.underlay{
    -webkit-mask-image: url(../assets/bg.svg);
    mask-image: url(../assets/bg.svg);
    opacity: .4;
}
.underlay2{
    -webkit-mask-image: url(../assets/bg2.svg);
    mask-image: url(../assets/bg2.svg);
    opacity: .4;
}
.underunderlay{
    background-color: #00032e
}

.toolbar{
visibility: hidden;
}

.well{
    width:95%;
    height:90%;
    margin:2.5%;
    background-color: rgba(255,255,255,.1);
    font-family: 'Roboto', sans-serif;
}
.contents{
margin: 0 auto;
padding-top:50px;
text-align: center;

}
div{
    color:white;
    font-family: 'Roboto', sans-serif;
}
.control{
    text-align: left;
    margin-left: 40%;
    padding-top:20px;
    font-size:20px;
}
.blur{
    -webkit-filter: blur(10px); /* Safari */
    filter: blur(10px);
}
.link{
    color:white;
}

.animate{
    
        -webkit-animation: anim 5s infinite; /* Safari 4.0 - 8.0 */
        animation: anim 5s infinite;
    }
    
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes anim {
        0%   {opacity: .4;}
        50%  {opacity: .1;}
        100% {opacity: .4;}
    }
    
    /* Standard syntax */
    @keyframes anim {
        0%   {opacity: .4;}
        50%  {opacity: .1;}
        100% {opacity: .4;}
    }
    
    .animate2{
        -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
        animation-delay: 2s;
    }


@media screen and (max-width: 768px) {
    
       
    .toolbar{
        z-index:2;
        position:absolute;
        right:30px;
        top:30%;
        width:40px;
        height:40%;
        /* background-color: rgba(255,255,255,.2); */
        visibility: visible;
        pointer-events: none;
        opacity: 0;
    }
    .toolbarItem{
        position: absolute;
        left:0px;
        top:0px;
        width:100%;
        height:25%
    }
    .toolbarIcon{
        position: absolute;
        left:0px;
        top:0px;
        padding:15px;
        background-color:white;
        border-radius: 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
    }
    .minus{
        top:70px;
    }
    .rotateright{
        top:140px;
    }
    .rotateleft{
        top:210px;
    }
    #controls{
        visibility: hidden;
        display: none;
    }
}