html, body{width:100%; height: 100%; font-family: 'Ubuntu', sans-serif; color: whitesmoke;}
a{text-decoration: underline;}
.mySlides {display:block; position: absolute;}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px; width:13px; padding:0}

/*Parallax*/
    .parallax{
        height:110%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -5;
    }

 /*Moon Text*/
    #moontext {
        position: absolute;
        top:200px;
        text-transform:uppercase;
        background-color:#282E34;
        width:100%;
        letter-spacing: 5px;
        padding: 20px;
    }
    
    #quote{
        text-align: center;
        width:40%; white-space:pre-line;
        margin: 0 auto; 
        font-size: 20px; 
        color: #777
    }

/*Navbar*/
    .topnav {
        position: absolute;
        overflow: hidden;
        }

        .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 22px 21px;
        text-decoration: none;
        text-shadow: 0px 0px 10px black;
        font-size: 20px;
        }


        .topnav a:hover {
        background-color: #ddd;
        color: black;
        text-shadow: none;
        }

        .topnav .icon {
        display: none;
        color: white;
        }

        #welcome{
            text-align: center;
            position: absolute;
            left:0;
            width:100%; 
            top:40%;
        }
	
	#welcometext{
	    opacity: 1;
	    position: absolute;
	    left: 0;
	    right: 0;
	    text-transform: uppercase;
	    background-color: #282E34;
	    width: 250px;
	    text-align: center;
	    font-size: 20px;
	    letter-spacing: 10px;
	    padding: 20px;
	    margin: 0 auto;
	}

/*Footer*/
    footer{
        width:100%;
        background-color: #111;
        text-align: center;
        padding-bottom: 50px;
    }

    p.footer{
        padding-top: 50px;
        color: white;
        font-weight: bold;
    }

    ul.footer{
        display: inline;
        list-style: none;
        padding-right: 50px;
    }
    a.footer{
        text-decoration: none;
    }
    #mobile{
        display: none;
    }
    li.footer{
	    display: inline-block;
    }
    #desktop{
        padding-right: 100px;
        padding-top:50px;
        float: right;
    }
    table.footer{
        width: 100%; table-layout: fixed
    }

/*SkypeBot iframe*/
iframe{
    background-color: #111 !important;
    width: inherit !important;
    height: 2em;
    margin: 0 !important;
}

/*Mobile Media Query*/
    @media screen and (max-width:770px){
    html{overflow-x: hidden}
    /*Change Parallax to use smaller images*/
    .parallax{background-attachment: scroll;}
    #parallax1{background-image: url(../img/mosaic_small.jpg) !important;}
    #parallax2{background-image: url(../img/moon4_small2.jpg) !important; }
    #parallax3{background-image: url(../img/blur_small.jpg) !important;}
    
    /*Change Navbar to become hamburger menu*/
    .topnav a:not(:last-child) {
        display: none;
    }

    .topnav{
        min-height:100px;
        position: relative;
    }
    .topnav a.icon {
        position: absolute;
        right: 0;
        display: block;
        
    }
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    /*Change the slide show to fit the screen*/
    .mySlides{
        margin-left:-150px;
    }

    /*Change footer to mobile friendly variant*/
    .footer{
        padding: 0;
    }
    ul.footer{
        padding-right:0px;
    }
    
    td.footer{
        padding-right:0;    
    }

    #desktop{
        display:none;
    }
    #mobile{
        display:block;
    }

    table{
        width:100%;
    }

    /*Positioning fixes for mobile*/
    #moontext{
        font-size: 12px;
        top:30px;
    }

    #quote{
        width:100% !important;
    }
}
@media screen and(max-width: 1090px){
    #quote{
        width:100% !important;
    }
}