/* My full screen is 1920 px/dps;  MotoG = 360px; 180dps */ 
/* Standard font size is 16px */

        @media (min-width: 360px) {body {font-size: 1.0em;}}        
        @media (min-width: 500px) {.seven-day-fc .icon {width: 64px; height: 64px;} }  

        @media (min-width: 768px) {.container {width: 750px;} }
        @media (min-width: 992px) {.container {width: 970px;} }        
        @media (min-width: 1200px) {.container {width: 1170px;} }       
                
        html {min-height: 100%; position: relative; /* Sticky Footer */
              font-size: 62.5%; /* 1rem=10px */
              line-height: 1.25;  /* 1.25=20px  Standard */
              margin: 0; padding: 0;  /* DIF. Main */ 
              }         
            
        body {height: 100%; padding: 0; overflow-x: hidden;
              margin-bottom: 0rem;  /* Sticky Footer (bottom = footer height + margin) */   
              font-family: Verdana;              
              }    
  
        /* Target ÷ Context/Default = Result */               
	    .container {min-height:100%; width:100%; padding-bottom:3rem;}

        .main {text-align: center; margin-left: 30%; width:50%; padding: .5rem 0 0 0;}  /*margin-left: 30%; width:50%; padding: .5rem 0 0 0;   =5px */ /* DIF. */
        .About {margin: 10.05rem 25% 0 25%; font-family: Arial; font-size: 1.7rem; text-align: justify;}
                
/* #footer VS footer */    /* FOOTER: Total Height = 26.0306rem (12rem + 14.0306)   */  
        #footer {clear:both;
                 height:0rem; width:100%;   /* Sticky Footer (Height 300px + 3px + Margin) */ 
                  /*  padding-top: 0rem; margin-bottom: 10rem; */ 
                 /* padding: .5rem 1rem; 5px, 10px */
                 position:absolute; bottom:0; left: 0;  /* Sticky Footer */ 
        } 

        nav a, button {min-width: 48px; min-height: 48px;} /* Min. acceptable button size; Must add min. 40px space between */           
        img, embed, object, video {max-width: 100%;} /* Ensures won't cause overflow & scrolling */                     
        a:link, a:visited, a:hover, a:focus, a:active {text-decoration: none;}  

/* Nav Bar */
        .navbar_left {float: left; margin: 0; width:30%; text-align: left;}
        .navbarlogo { /* DIF. */
            padding: 0; margin: 0rem 4rem 2rem 0rem; /* -20px 40px 0 10px */      
            font-size:6.7rem; 
        }
        .nav_vertical_large {font-size:2.46rem; line-height: 150%;}        
       
    .img-circular{
         width: 20rem;
         height: 20rem;         
         margin: 2rem auto; /* DIF. */
         background-size: cover;
         display: block;   
         border-radius: 50%;
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
    }        
    
      .img_style {
        max-width: 100%; margin: 3rem auto 1rem; 
        padding: .4rem; display: block; text-align: center; cursor: pointer;    
        border: 1px #4F4F4F solid;
    }      

    .fancybox-custom .fancybox-skin {
			box-shadow: 0 0 5em  #222;
		}     
      /* If want to keep arrows always visible
         .fancybox-nav span {visibility: visible;} */  /*/*/*
/*
    style="font-size:2.2em; line-height: 150%;"
    
    
          nav {width: 100%; margin: 0; padding-bottom: 2.5rem; /* 25px   
             overflow: hidden; background-color: white; font-family: Arial;
        }                              
       nav ul {vertical-align:top; padding: 0; margin: 0;}
	   nav ul li {list-style-type: none; float: right; display: inline-block; 
	                font-size: 1.29rem; /* font 12.9px 
	                line-height: 2.8rem; /* 28px 
	                padding-left: 1.4rem; /* 14px 
	   }
       nav > ul > li > a {color: #808080; background-color: white; display: inline;}    
       nav > ul > li > a:hover, nav > ul > li > a:focus {color: black; text-decoration: underline;}    
*/