html { height:100%; }
body
{
  background-color:rgb(2,116,199);
  color:white;
  margin:0px;
  height:100%;
  width:100%; 
}
/* header */
div#top 
{ text-align:center; background-image:url('nurse-notes.png'), 
  url('blue-nurse-wheelchair.png'); background-repeat:no-repeat; background-position: left, right;  background-size:50%, 50%;  height:180px; }
img#logo { display:inline-block; width:5%; }
h1 { font-family:'Monotype Corsiva', cursive; font-size:3vw; display:inline; text-shadow:3px 3px 3px black; }
img#logo, h1 { vertical-align:middle; }
h1 span { background-color:transparent; }
 /* slogan*/
h2#slogan 
{ text-indent:60px; transform:translateY(-40px); font-family:'Monotype Corsiva', cursive;
  text-shadow:10px 10px 8px white; color:rgb(174,28,40); }

/* Full Width images */
div#full-width { height:460px; text-align:center; padding:20px; background-image: radial-gradient(white, rgb(31,181,58)); margin-top:-21px;}
#changeImg { height:330px; border-radius:40%; }
#full-width h2 { font-size:25pt; text-shadow:6px 6px 6px rgb(2,116,199); } 
#changeImg, #full-width #info { display:inline-block; } 
#full-width #info { transform:translateY(-20px); margin-left:10%; }
#gallery-area {  margin:auto; width:95%; margin-top:30px;  }

/* ---------- Navigation menu ----------- */
 #nav { text-align:center; margin:auto; transform:translateY(-30px); margin-top:-10px; }
 #nav-mode { display:none; background-color:rgb(2,116,199); opacity:0.7; height:105%; width:100%; position:fixed; z-index:1; }
 #nav span { border:solid 1px black; padding:5px;  cursor:pointer; font-size:20pt; font-weight:bold; text-shadow:6px 6px 6px black; }
 #nav #menu-icon, #nav #closeNav { width:40px; cursor:pointer; margin:auto; display:none; }
 #list-menu { display:none; }
 #home::before { content: url(home-icon.png) " "; vertical-align:top; }
 span.space { border:none !important; padding:0px !important; margin-left:30px; margin-right:30px; display:inline-block;} 
 /* ------------ Content or Middle area ------------- */
 div#content { margin:auto; text-align:center;  }
.section-heading { text-decoration:underline; }
 #home-page h1 { font-size:50pt; }
 #home-page p { font-size:14pt; width:60%; }
 #home-page ul { list-style-type:none; width:400px; padding:0px; }
 #bg-quickForms, #quickForms, #home-page iframe#a, #home-page iframe#b, #home-page iframe#c { display: none;}
 #home-page iframe::-webkit-scrollbar { display:none; }  /* Hide scrollbar for Chrome, Safari and Opera */
 #home-page iframe { -ms-overflow-style: none; }  /* Hide scrollbar for IE and Edge */
 #bg-quickForms { opacity:0.92; z-index:2; background-color:white; width:100%; height:100%; position:fixed;  top:0%;}
 #quickForms 
 { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; 
   width:550px; border-radius:10px; border-style:solid;
 }
#form-logo { width:100%; border-top-left-radius: 10px; border-top-right-radius:10px; }
 /* closeX */
 #home-page img#CloseX{ position:absolute; right:0%; bottom:3%; z-index:1; width:50px; cursor:pointer; transform:translateY(90px); }
 

  #about
  { 
    text-align:center;
  }
 p { margin:auto; margin-top:10px; }
 p.about-info { text-align:left; text-indent:60px; }

 #about, #services, #careers, #employee-center { width:100%; display:none; transform:translateY(60px); }
  p.about-info { width:60%; font-size:14pt; }
  #services, #careers { font-size:14pt; }
  #services h3, #careers h3 { text-align:left; }
   p.s1 { width:40%; } 
   #filled-app { width:60%; }
   #lists, #apply, #employee, #home-page ul { margin:auto; }
   #lists, #apply { width:315px; }
   ul { list-style-type: circle; text-align:left; }
   #employee { width:500px; }
   #employee h2 { text-align:left; font-size:40pt; }
   #employee-center li, #home-page li { padding:10px; background-color:rgb(31,181,58); cursor:pointer; font-weight:bold; font-size:25pt; }
   #employee-center li:hover, #home-page li:hover { border:solid 3px white; }
 
 button.fill-app 
 { 
   width:160px; height:60px; display:block; margin:auto; background-color:rgb(31,181,58); cursor:pointer;
   color:white; font-weight:bold; font-size:16pt;
 }
   .inputform input { font-size: 15pt;  display:block; margin:auto; }
   .inputform input:focus { background-color:rgb(2,116,199); }
   .fileToUpload { color:white; background-color:rgb(2,116,199); }
   .fileToUpload, .file-Submit { font-weight:bold; font-size:14pt; cursor:pointer; text-align:center; margin:auto; display:block; }
   .file-Submit:hover { background-color:rgb(31,181,58); }


/* ------------ contact us --------------*/
 #contact { margin-top:100px; background-image:url('nurse-notes.png'); background-repeat:no-repeat; background-size:cover; font-size:16pt; }
 #contact h2 { text-shadow: 3px 3px 3px black; font-size:25pt; transform:translateY(90px); }
 #contact form { transform:translateY(130px); }
 input, textarea { border:solid 2px black; color:white; background-color:transparent; font-size:16pt; font-weight:bold; } 
 textarea { font-size:18pt; }
 #contact input:focus, #contact textarea:focus { background-color:rgb(2,116,199) !important; }
 input#message-sent { font-weight:bold; }
 input#message-sent:hover { cursor:pointer; background-color:rgb(2,116,199);}
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:white;
  opacity: 1; /* Firefox */
 }

 :-ms-input-placeholder 
 { /* Internet Explorer 10-11 */
  color: white; 
 }

 ::-ms-input-placeholder { /* Microsoft Edge */
  color:white;
 }
 ::placeholder, :-ms-input-placeholder, ::-ms-input-placeholder { font-weight:bold; text-shadow:6px 6px 6px black; }

/* reCaptcha div style */
 .g-recaptcha { width:300px; margin:auto; }
#captcha1, #captcha2 { display:none; }

 /* ------------ copyright statement ------------ */
 div#last { background-color:rgb(174,28,40); height:90px; font-size:14pt; font-family: 'Ubuntu', sans-serif; margin-top:250px; }
     #last p { transform:translateY(45px); }
 footer { margin:auto; transform:translateY(45px); }
 footer, a { color:white; }
    a { text-decoration:none; } 
    a:hover { color:white; }
/* -------------------------------------------------Responsive Design Layout------------------------------------------------------ */
@media screen and (max-width:1430px)
{
   span.space { margin-left:20px; margin-right:20px; }
}
@media screen and (max-width:1360px)
{
  h2#slogan { font-size:15pt; transform:translateY(-50px); }
  img#logo { width:102px; }
}
@media screen and (max-width:1200px)
{
  p.s1 { width:80%; }
  h1 { font-size: 4vw; }
}
@media screen and (max-width:1155px)
{
  p#filled-app { font-size:12pt; width:85%; }
  .inputform input { font-size:12pt; }
}
@media screen and (max-width:1120px)
{
   span.space { margin-left:5px; margin-right:5px; } 
   #nav span { font-size:18pt; }
   h2#slogan { text-indent:90px; }
   #home-page p { width:75%; }
   #changeImg { height:360px; }
   #gallery-area { margin-top:45px; }
   div#last {font-size:12pt; height:84px; }
}
@media screen and (max-width:1080px)
{
    #changeImg { height:300px; }
    #full-width h2 { font-size:20pt; }
    div#full-width { height:410px; }
}
@media screen and (max-width:1010px)
{
  p#filled-app { width:81% !important; font-size:10pt; }
  .inputform input { font-size:10pt; }
}
@media screen and (max-width:975px)
{
   #gallery-area { width:100%; }
   #full-width #info { margin-left:6%; }
}
@media screen and (max-width:950px)
{
    div#last { font-size:10pt; height:76px; }
}
@media screen and (max-width:925px)
{
  #nav span { font-size:15pt; }
  #gallery-area { margin-top:65px; }
  #changeImg {height:250px; }
}
@media screen and (max-width:870px)
{
   #gallery-area { margin-top:75px; }
}
@media screen and (max-width:860px)
{
  h1 { font-size:5vw; }
  h2#slogan { text-indent:140px; }
}
@media screen and (max-width:820px)
{
   #full-width #info { margin-left:4%; }
}
@media screen and (max-width:800px)
{
  div#full-width { height:580px; }
  #full-width #info { display:block; transform:translateY(5px); } 
  #full-width h2 { text-shadow:6px -2px 7px rgb(2,116,199); }
  #gallery-area { margin-top:30px; }
  span#br {display:block; }
  span#blank1 { display:none; }
  div#last { height:90px; }
  #full-width #info { margin-left:0%; }
}
@media screen and (max-width:770px)
{
   #nav span { font-size:14pt; }
}
@media screen and (max-width:720px)
{
   #nav span { font-size:10pt; }
}
@media screen and (max-width:706px)
{
  span#br1 {display:block; }
  div#last {height:105px; }
}
@media screen and (max-width:650px)
{
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color:white;
      opacity: 1; /* Firefox */
      background-color:rgb(2,116,199);
    }

    :-ms-input-placeholder 
    { /* Internet Explorer 10-11 */
      color: white;
      background-color:rgb(2,116,199);
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
      color:white;
      background-color:rgb(2,116,199);
    }
    #contact input, #contact textarea { background-color:rgb(2,116,199); }
    input#message-sent:hover { background-color:rgb(31,181,58); }
}
@media screen and (max-width:600px)
{
  #quickForms { width:480px; }
  #home-page iframe { width:100%; height:300px; }
  h2#slogan { font-size:12pt; }
}
@media screen and (max-width:560px)
{
  h1 { text-shadow:2px 4px 5px black; }
  p.about-info, #services, #careers { font-size:12pt; }
  /* #employee h2 { font-size:30pt; } /* ? */ 
   #nav span { display:none;  width:65px; }
   #nav { position:fixed; left:0%; transform:translate(0%,-10px); z-index:2; width:60px; height:55px; background-color:rgb(2,116,199); }
   #home::before { vertical-align:baseline; }
   span#home { margin-top:10px; }
   #nav #menu-icon, #list-menu { display:block; }
   #list-menu { font-weight:bold; }
   #home-page p { width:60%; }
   #home-page ul { width:350px; }
   #quickForms { width:90%; }
   p#filled-app { width:40% !important; }
   #employee { width:380px; }
   #employee-center li, #home-page li { font-size:15pt; }
   input#message-sent{ text-shadow:3px 3px 3px black; }
}
@media screen and (max-width:540px)
{
  img#logo, h1 { display:block; margin:auto; }
  h2#slogan { transform:translateY(-22px); }
  h1 { font-size:7vw; }
  div#full-width { margin-top: 0px; }
  #nav { margin-top:32px; }
}
@media screen and (max-width:530px)
{
  div#top { height:145px; }
  img#logo { width:80px; margin-top:-13px; }
  #contact input, #contact textarea { width:320px; }
  h2#slogan { font-size:12pt; text-indent:50px; }
  #quickForms { transform:translate(-50%, -60%); }
  #gallery-area { width:100%;}
}
@media screen and (max-width:440px)
{
  div#top { height:100px; }
  img#logo { width:60px; }
  h2#slogan { font-size:10pt; }
  #nav { margin-top:32px; }
  div#full-width { margin-top:0px; }
  #home-page h1 { font-size:40pt; }
  #home-page ul, #employee, #contact input, #contact textarea { width:260px; }
  #contact input, textarea { font-size:12pt; }
  p.s1 { width:70%; }
  .inputform input { font-size:8pt; }
}
@media screen and (max-width:390px)
{
  h2#slogan { text-indent:0px; transform:translateY(-18px); }
  #changeImg { height:200px; }
  #full-width h2 { font-size:18pt; }
  #full-width #info { transform:translateY(32px); }
  div#full-width { height:550px; }
  div#last { font-size:8pt; height:95px; }
}
@media screen and (max-width:360px)
{
  #full-width h2 { font-size:16pt; }   
}
@media screen and (max-width:340px)
{
  #changeImg { height:180px; }
  div#last { height:107px; }
}
@media screen and (max-width:330px)
{
   #CurrentYear { display:block; }
   div#last { height:125px; }
}
/* Screen Height */
@media screen and (max-height:500px)
{
   iframe { height:240px; }
   #quickForms { transform:translate(-50%, -70%); }
}