/******************GLOBAL**************************/
@-ms-viewport {
    width: device-width;
}

html { 
	width:100%; height:100%;
	overflow-x:hidden;
	font-family:Helvetica, Arial, sans-serif; 
	-webkit-text-size-adjust:100%; 
}

* { 
	margin:0; padding:0; 
	-webkit-box-sizing:border-box; box-sizing:border-box;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-select:none;
    -moz-user-select:none;
        -ms-touch-action:none;
}

img { border:none; }

body {
	width:100%;	height:100%;
    overflow:hidden;
    -webkit-user-select:none;
}

input,textarea
{
    -webkit-user-select:text;
    -moz-user-select:text;
}

::selection { 
	background:#aaa; 
	color:#fff; 
}

a:focus, a:active, a:hover { outline:0; }

.clear { clear:both; }
.wrapper { float:left; }



/******************* SMARTPHONE [DEFAULT STYLES] **************************/
.masthead {
	background-color:lightcoral;
   /* height:50px; */
    height: 10%;
    
} 

#brder {
    border-radius: 25px;
    border: 2px solid #darkred;
    padding: 5px; 
    width: 12px;
    height: 15px;}

ul {list-style-type: disc;}
a:link    {color:black; background-color:transparent; text-decoration:none}
a:visited {color:black; background-color:transparent; text-decoration:none}



#text {
        background-color:lightcoral;
         position: absolute;  
        width: 100%; 
         top: 20%;
    /*width: 100%;
    height: 40%; 
    text-align: center;*/
}
             
        
/*.logo {
    background-color:lightcoral;
    content:url("../images/logo.png"); 
    float:left;
    margin:10px; 
} */

.content {
   /* width: 100%;
    height: 40%*/
    display:block;
    width:100%; height:100%;
	background-color:lightcoral; 
    background-position:bottom center;
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    background-size:cover;
}

.navbar {
    width: 100%;
        
}

.button, #buttonone {
    
   background-color:gainsboro;
    background-image:-moz-linear-gradient(top, #fff 0%, #a6a8aB 85%);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,0)));
    background-image:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 85%);
    background-image:-ms-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 85%);
    background-image:linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0)85%);*/
	width:270px; height:62px;
	border:1px solid lightcoral;
	-moz-border-radius:8px;	
    -webkit-border-radius:8px; 
    border-radius:8px;
	-moz-box-shadow:0px 1px 8px rgba(0,0,0,0.65); 
    -webkit-box-shadow:0px 1px 8px rgba(0,0,0,0.65); 
    box-shadow:0px 1px 8px rgba(0,0,0,0.65);
	font-family:inherit;
    font-size:36px;
	line-height:62px;
    text-align:center;
	color:lightcoral;
	cursor:pointer;
	text-shadow:0 1px 0 white;
    -moz-transition:all 0.2s ease; 
    -webkit-transition:background-color 0.2s ease; 
    transition:background-color 0.2s ease; 
}

#buttonone {
    width: 10%; height: 10%;
        position: bottom center;
        background-image: url(http://museprintables.com/images/silhouettes/question-mark-silhouette.png);
   /* position: absolute;
    top: 60%;
    left: 50%;
    margin-top: 95px;
    margin-left: -130px; */
}


#buttonone.pressed {background-color:rgb(116, 117, 117); color:white; font-size: 50px; }

-


/************************ TABLET **************************/

@media handheld, screen and (min-width: 600px) and (min-height:640px), 
only screen and (min-height: 440px) and (min-width:900px) {

    .masthead { height:10%; }
    
    #text {
         background:transparent;
         position:absolute;
        width: 100%; 
         top: 20%;
       
        
    }
    

    .content { 
        background-color: lightcoral;
        background-position:bottom center;
        -webkit-background-size:cover; -moz-background-size:cover; background-size:cover;
    }

    .button, #buttonone {
        
        width:270px; height:62px;
        border-width:2px;
        -moz-box-shadow:0px 1px 12px rgba(0,0,0,0.65);
        -webkit-box-shadow:0px 1px 12px rgba(0,0,0,0.65);
        box-shadow:0px 1px 12px rgba(0,0,0,0.65);
        font-size:84px;
        line-height:140px;
        -moz-border-radius:16px; -webkit-border-radius:16px; border-radius:16px;
        text-shadow:0 2px 0px rgb(255,255,255); 
    }
    
    #buttonone {
        position: absolute;
        top: 70%;
        left: 50%;
        margin-top: 95px;
        margin-left: -130px;
    }

    
    #buttonone.pressed {background-color:rgb(116, 117, 117); color:white; font-size: 120px; }
   
}

.navbar {
    position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 10%;
  background-color: #ccc;
    
}

.fixed-nav img {
  vertical-align:middle;
}

main {
  margin-bottom:50px;
}