body { background-color: #fff; padding: 0; margin: 0; font-family: 'Raleway', sans-serif; color: #000; }
#go-go { color: #49C2F1; border-color: #49C2F1; margin-left: 5px; padding: 16px; vertical-align: middle; }
#go-go:hover, #go-go:focus { color: #fff; background: #21BBEF; }

/*** Build the Background **/
.wpdevs_home_bg { position: relative; height: 100vh; width: 100vw; overflow: hidden; text-align: center; }
.wpdevs_bg_subject { width: 900px; position: relative; }
.wpdevs_bg_logo { position: absolute; top: 60px; left: 60px; width: 300px; }
.wpdevs_bg_snow { position: absolute; }
.wpdevs_bg_snow-1 { left: -5px; top: 390px; }
.wpdevs_bg_snow-2 { left: 100px; bottom: 110px; width: 280px }
.wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 280px }
.wpdevs_bg_snow-4 { right: -80px; top: 400px; }
.wpdevs_bg_snow-5 { right: 130px; top: 250px; }
.wpdevs_bg_snow-6 { right: 100px; bottom: 80px; width: 280px }
#wpdevs-home-footer { border-top: 1px solid #b6d7f2; background-color: #f1f7fd; height: 60px; width: 100%; position: absolute; bottom: 0; left: 0; color: #84919A; font-weight: 600; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.wpdevs_footer_copyright, .wpdevs_footer_website { width: 50%; }
.wpdevs_footer_copyright { text-align: left; }
.wpdevs_footer_website { text-align: right; }
.wpdevs_footer_copyright span { padding-left: 150px; }
.wpdevs_footer_website .footer_nav_items { padding-right: 150px; }
.footer_nav_items .footer_nav_item { display: inline-block; margin-right: 20px; }
.footer_nav_items .footer_nav_item .footer_nav_item_link { color: #84919A; }
.wpdevs_passwort_form { color: #6A7B84; }
h2.wpdevs_home_title { font-size: 3.2em; font-weight: 600; color: #6A7B84; }
label.passwortlabel { font-size: 2em; font-weight: 600; color: #6A7B84; }
input#wpdevs-passwort { padding: 15px; width: 300px; border: 2px solid #6A7B84; vertical-align: middle; }
.portrait_only { display: none; visibility: hidden; opacity: 0; }

@media only screen and (max-device-width:912px) and (orientation:landscape) {
  .wpdevs_home_bg, #wpdevs-home-footer, .wpdevs_passwort_form { display: none; }
  .portrait_only { display: flex; visibility: visible; opacity: 1; text-align: center; flex-direction: column; align-items: center; vertical-align: middle; }
  html, body { background: black; height: 100%; width: 100%; }
  body { display: flex; justify-content: center; align-items: center; flex-direction: column; }
  .phone { height: 50px; width: 100px; border: 3px solid white; border-radius: 10px; animation: rotate 3s ease-in-out infinite alternate;    /* display: none; */ }
  .message { color: white; font-size: 1em; margin-top: 40px;    /* display: none; */ }
  @keyframes rotate {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(-90deg) }
    100% { transform: rotate(-90deg) }
  }
}

@media only screen and (min-width:320px) and (max-width:480px) {
  .wpdevs_footer_copyright span { padding-left: 40px; }
}

/** small screen phone **/
@media only screen and (min-width:320px) {
  .wpdevs_bg_subject { width: 500px; }
  .wpdevs_bg_logo { top: 30px; left: 30px; width: 200px; }
  .wpdevs_bg_snow-1 { left: -5px; top: 250px; width: 120px; }
  .wpdevs_bg_snow-2 { left: 80px; bottom: 140px; width: 180px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 180px }
  .wpdevs_bg_snow-4 { right: -80px; top: 350px; width: 150px; }
  .wpdevs_bg_snow-5 { right: 60px; top: 180px; width: 130px; }
  .wpdevs_bg_snow-6 { right: 80px; bottom: 100px; width: 180px }
  .wpdevs_passwort_form { z-index: 2; position: relative; }
  h2.wpdevs_home_title { font-size: 2.5em; font-weight: 600; }
  label.passwortlabel { font-size: 2em; font-weight: 600; }
  input#wpdevs-passwort { padding: 15px; width: 200px; }
}

/** medium screen phone **/
@media only screen and (min-width:480px) {
  .wpdevs_bg_subject { width: 500px; }
  .wpdevs_bg_logo { top: 30px; left: 30px; width: 200px; }
  .wpdevs_bg_snow-1 { left: -5px; top: 250px; width: 120px; }
  .wpdevs_bg_snow-2 { left: 80px; bottom: 140px; width: 180px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 180px }
  .wpdevs_bg_snow-4 { right: -80px; top: 350px; width: 150px; }
  .wpdevs_bg_snow-5 { right: 60px; top: 180px; width: 130px; }
  .wpdevs_bg_snow-6 { right: 80px; bottom: 100px; width: 180px }
  .wpdevs_passwort_form { z-index: 2; position: relative; }
  h2.wpdevs_home_title { font-size: 2.5em; font-weight: 600; }
  label.passwortlabel { font-size: 2em; font-weight: 600; }
  input#wpdevs-passwort { padding: 15px; width: 200px; }
}

/* laptops, and tablets */
@media only screen and (min-width:768px) and (max-width:991px) {
  .wpdevs_bg_subject { width: 500px; }
  .wpdevs_bg_logo { top: 30px; left: 30px; width: 200px; }
  .wpdevs_bg_snow-1 { left: -5px; top: 250px; width: 120px; }
  .wpdevs_bg_snow-2 { left: 80px; bottom: 140px; width: 180px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 180px }
  .wpdevs_bg_snow-4 { right: -80px; top: 350px; width: 150px; }
  .wpdevs_bg_snow-5 { right: 60px; top: 180px; width: 130px; }
  .wpdevs_bg_snow-6 { right: 80px; bottom: 100px; width: 180px }
  .wpdevs_passwort_form { z-index: 2; position: relative; }
  h2.wpdevs_home_title { font-size: 2.5em; font-weight: 600; }
  label.passwortlabel { font-size: 2em; font-weight: 600; }
  input#wpdevs-passwort { padding: 15px; width: 200px; }
}

/** medium laptop/desktop */
@media only screen and (min-width:992px) and (max-width:1199px) {
  .wpdevs_bg_subject { width: 500px; }
  .wpdevs_bg_logo { top: 30px; left: 30px; width: 200px; }
  .wpdevs_bg_snow-1 { left: -5px; top: 250px; width: 120px; }
  .wpdevs_bg_snow-2 { left: 80px; bottom: 140px; width: 180px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 180px }
  .wpdevs_bg_snow-4 { right: -80px; top: 350px; width: 150px; }
  .wpdevs_bg_snow-5 { right: 60px; top: 180px; width: 130px; }
  .wpdevs_bg_snow-6 { right: 80px; bottom: 100px; width: 180px }
  h2.wpdevs_home_title { font-size: 2.5em; font-weight: 600; }
  label.passwortlabel { font-size: 2em; font-weight: 600; }
  input#wpdevs-passwort { padding: 15px; width: 200px; }
}

/*** laptops and small monitors **/
@media only screen and (min-width:1200px) {
  .wpdevs_bg_subject { width: 600px; position: relative; }
  .wpdevs_bg_logo { position: absolute; top: 30px; left: 60px; width: 200px; }
  .wpdevs_bg_snow { position: absolute; }
  .wpdevs_bg_snow-1 { left: -5px; top: 250px; width: 150px; }
  .wpdevs_bg_snow-2 { left: 100px; bottom: 110px; width: 200px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 200px }
  .wpdevs_bg_snow-4 { right: -80px; top: 350px; width: 150px; }
  .wpdevs_bg_snow-5 { right: 100px; top: 200px; width: 150px; }
  .wpdevs_bg_snow-6 { right: 100px; bottom: 80px; width: 200px }
  #wpdevs-home-footer { border-top: 1px solid #b6d7f2; background-color: #f1f7fd; height: 60px; width: 100%; position: absolute; bottom: 0; left: 0; color: #84919A; font-weight: 600; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wpdevs_footer_copyright, .wpdevs_footer_website { width: 50%; }
  .wpdevs_footer_copyright { text-align: left; }
  .wpdevs_footer_website { text-align: right; }
  .wpdevs_footer_copyright span { padding-left: 150px; }
  .wpdevs_footer_website .footer_nav_items { padding-right: 150px; }
  .wpdevs_passwort_form { color: #6A7B84; position: relative; z-index: 2; }
  h2.wpdevs_home_title { font-size: 2.5em; font-weight: 600; color: #6A7B84; }
  label.passwortlabel { font-size: 2em; font-weight: 600; color: #6A7B84; }
  input#wpdevs-passwort { padding: 15px; width: 200px; border: 2px solid #6A7B84; vertical-align: middle; }
}

/** large desktop **/
@media only screen and (min-width:1700px) {
  .wpdevs_bg_subject { width: 700px; position: relative; }
  .wpdevs_bg_logo { position: absolute; top: 40px; left: 60px; width: 250px; }
  .wpdevs_bg_snow { position: absolute; }
  .wpdevs_bg_snow-1 { left: -5px; top: 340px; }
  .wpdevs_bg_snow-2 { left: 100px; bottom: 110px; width: 220px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 220px }
  .wpdevs_bg_snow-4 { right: -80px; top: 400px; }
  .wpdevs_bg_snow-5 { right: 130px; top: 250px; }
  .wpdevs_bg_snow-6 { right: 100px; bottom: 80px; width: 220px }
  h2.wpdevs_home_title { font-size: 3.2em; font-weight: 600; color: #6A7B84; }
  label.passwortlabel { font-size: 2em; font-weight: 600; color: #6A7B84; }
  input#wpdevs-passwort { padding: 15px; width: 300px; border: 2px solid #6A7B84; vertical-align: middle; }
}

/** very large above 1080p res screen */
@media only screen and (min-width:1920px) {
  .wpdevs_bg_subject { width: 900px; position: relative; }
  .wpdevs_bg_logo { position: absolute; top: 60px; left: 60px; width: 300px; }
  .wpdevs_bg_snow { position: absolute; }
  .wpdevs_bg_snow-1 { left: -5px; top: 390px; }
  .wpdevs_bg_snow-2 { left: 100px; bottom: 110px; width: 280px }
  .wpdevs_bg_snow-3 { right: -30px; top: -20px; width: 280px }
  .wpdevs_bg_snow-4 { right: -80px; top: 400px; }
  .wpdevs_bg_snow-5 { right: 130px; top: 250px; }
  .wpdevs_bg_snow-6 { right: 100px; bottom: 80px; width: 280px }
  h2.wpdevs_home_title { font-size: 3.2em; font-weight: 600; color: #6A7B84; }
  label.passwortlabel { font-size: 2em; font-weight: 600; color: #6A7B84; }
  input#wpdevs-passwort { padding: 15px; width: 300px; border: 2px solid #6A7B84; vertical-align: middle; }
}