p.navi {color: black; font-family: arial;}
p.newsbox {font-size: 18px; font-family: arial;}
h1 {font-family: arial;}
h2 {font-family: arial;}
h3 {font-family: arial;}
a {font-family: arial}
a:visited.navi {color: gold;}
a:link.navi {color: gold;}
a:active.navi {color: gold;}
a:visited.headnav {color: gold; font-size: 24pt;}
a:link.headnav {color: gold font-size: 24pt;}
a:active.headnav {color: gold; font-size: 24pt;}
div {font-family: arial; vertical-align: middle;}
body {background-color: red; background-image: url("background-xmas-tree_cut.jpg");}


header {background-color: green; color: white; width: 100%; border-radius: 3px; box-shadow: 5px  5px  5px red;}
div.sonnet {color: white; background-color: transparent; margin: auto; border: 1px; padding: 1px; color: black; width: 100px; height: 100px; font-family: Arial; font-size: 9pt; vertical-align: middle;}
div.headdiv {background-color: green; color: white;}
div.navdiv {height: 40px; color: red; position: fixed; top: 100px;}
div.newsbox {max-width: 400px;}
div.headnav {visibility: hidden; position: fixed; top: 40px; font-size: 48pt;}
div.infobox {width: 50%; background-color: white; float: left; position: relative; height: 200px; overflow: scroll; border-style: solid; border-color: black; border-width: 1px;}
div.locate_box {width:100px; border-style: solid; border-size: 2px; background-color: white; font-size: 10pt;}
span.confirmonphone {display: none;}

p.headpara {font-family:arial; color: white;}

//
/* FOR ALL SCREENS EXCEPT HOME SCREEN INCLUDE THE FOLLOWING */
@media only screen and (min-device-width: 320px) and (max-device-width: 800px)
and (-webkit-min-device-pixel-ratio: 2)
 {
 nav {display: hidden;}
  article {width: 100%}
}


/* FOR HOME SCREEN INCLUDE THE FOLLOWING */
 /*@media only screen and (min-device-width: 320px) and (max-device-width: 800px)
and (-webkit-min-device-pixel-ratio: 2)
 {
 
nav {font-size: 9pt; width: 100%; text-align: center; height: 100%;}
 article {width: 0%;}
  p.navi {width: 100%; font-size: 48pt; }
  div.navdiv {width: 100%; height: 100px; -webkit-animation-name: slideIn; -webkit-animation-duration: 3s; -webkit-animation-direction: reverse;}
  div.headdiv {color:black; font-size: 48pt;}

}
/* --------------------------- WEBKIT FIX TO MAKE SCROLL BARS SHOW IN OVERFLOW DIVS -----------*/
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}








/*      --------------------   ANIMATIONS ------------------------------------- */


@-webkit-keyframes makeBig {
    /*from {-webkit-transform: scale(1,1);}
    to {-webkit-transform: scale(1,1);}*/
    /*from {height: 10px;}
    to {height:20px;}*/
    0% {height: 20px;}
    50% {height: 40px;}
    100% {height: 20px;}
}

/* Standard syntax */
@keyframes makeBig2 {
    from {transform: scale(1,1);}
    to {transform: scale(2,2);}
}