/* CSS Document for Screens */
@import url('https://fonts.googleapis.com/css?family=Poppins');

body { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0; }

#page { width: 100%; position: relative;}


/* Text */
h1 { margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700; color: #1e1e1e;}
h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }

p { margin: 0 0 1em 0; }
a { color: #fff; }
a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; border-radius: 6px; padding: 4px 15px; transition: background-color .5s;}
a.btn:hover { background-color: rgba(0,0,0,.3); }

a.btn_login { font-size: 1.0em; font-weight: bold; background:rgba(255,255,255, 0.8); border-radius: 6px; text-decoration: none; color: #6DA550; border: 2px solid #6DA550; padding: 4px 15px; transition: background-color .5s;}
a.btn_login:hover { background-color: rgba(30, 130, 76, 1); color: #fff; }

a.btn_logout { font-size: 1.2em; font-weight: bold; background:rgba(255,255,255, 0.8); border-radius: 6px; text-decoration: none; color: #F72200; border: 2px solid #F72200; padding: 4px 15px; transition: background-color .5s;}
a.btn_logout:hover { background-color: rgba(207,0,15,1); color: #fff;}

/* Header */
s
/* Section - All */
section { padding: 20px; margin: 0 auto;}
section::after { content: ''; display: block; clear: both; }

/* Section - Main */
section.main {
  width: 100%;
  max-width: none;
  margin: 15px auto 30px;
  padding: 16px;
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  section.main {
    padding-left: 48px;
    padding-right: 48px;
  }
}section.main aside { width: 33%; float: left; text-align: center; }
section.main a:link, a:visited {
  color: #007eff;
}
section.main a:hover, a:active {
  color: #008D6F;
}
section.main aside h3 a { color: #008d6f; text-decoration: none; }
section.main aside h3 a:hover { text-decoration: underline; }



/* Media Queries */

  /* Width 1000px */

    @media screen and (max-width: 1000px) {
      h1 { font-size: 2.4em; }
      /* Header */
      header div.hero { left: 56%; }
      header div.hero h1 { margin-bottom: 20px; }
      /* Section - Atmosphere */
      section.main { margin-top: 5px; }

    }

  /* Width 825px */

    @media screen and (max-width: 825px) {
      h1 { font-size: 2.2em; }
      /* Header */
      header {
        display: none;
      }
      header div.hero { top: 120px; left: 48%; }
      section.main { margin-top: 5px; }

  /* Width 760px */

    @media screen and (max-width: 760px) {
      h1 { font-size: 1.8em; }
      h2 { font-size: 1.4em; }
      h3 { font-size: 1.1em; }
      a.btn { font-size: 1em; }
      /* Header */
      header div.hero { top: 140px; left: 48%; }
      /* Section - Main */
      section.main { margin-top: 5px; margin-bottom: 10px; }
      section.main aside div.content { background-size: 55px 55px; padding-top: 60px; }
    }

  /* Width 625px */

    @media screen and (max-width: 625px) {
      h1 { font-size: 1em; }
      h3 {margin-bottom: 0px; }
      a.btn { font-size: .9em; }

      /* Header */
      header {
        display: none;
        height: 220px;
        min-height: 160px;
        background-image: url(../img/site/header_763.png);
        background-image: none;
        background-size: 800px; }
      header a.logo {
        width: 400px; height: 125px;
        left: 1px; top: 5px;
      }

      header div.hero { width: 300px; top: 85px; left: 130px; }
      header div.hero h1 { margin-bottom: 10px; }

      /* Section - Main */
      section.main aside { width: 100%; float: none; text-align: left; }
      section.main aside div.content {
        margin: 8px 20px 8px 0;
        padding: 5px 0px 10px 85px;
        background-size: 50px 50px;
        background-position: 20px 5px;
      }

      /* Footer */
      footer div.content { display: block; margin-top: 15px; }
      footer div.content a { margin: 0 20px 0 0; }
    }

@media
  screen and (max-width: 1000px) and (min-device-pixel-ratio: 2),
  screen and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2)
  {
    /*  header { background-image: url(../img/banner_1200_@2x.jpg); }
    section.atmosphere article { background-image: url(../img/site/photo_lounge_@2x.jpg); }*/
  }
@media
  screen and (max-width: 825px) and (min-device-pixel-ratio: 2),
  screen and (max-width: 825px) and (-webkit-min-device-pixel-ratio: 2)
  {
    /* header { background-image: url(../img/banner_825_@2x.jpg); } */
  }
@media
  screen and (max-width: 625px) and (min-device-pixel-ratio: 2),
  screen and (max-width: 625px) and (-webkit-min-device-pixel-ratio: 2)
  {
    /*  header { background-image: url(../img/banner_625_@2x.jpg); }*/
  }
@media
  screen and (max-width: 425px) and (min-device-pixel-ratio: 2),
  screen and (max-width: 425px) and (-webkit-min-device-pixel-ratio: 2)
  {
    /*  header { background-image: url(../img/site/banner_425_@2x.jpg); }*/
  }