/******************************************************************************************/



/* BASIC                                                                                  */



/******************************************************************************************/

* {

   margin: 0;

   padding: 0;

   box-sizing: border-box;

}



body {

   height: 100%;

   min-height: 100vh;

   background: url(img/background.jpg) no-repeat;

   background-size: cover;

   background-position: 50% 50%;

   font-family: 'Roboto', sans-serif;

   display: flex;

   flex-direction: column;

}



a {

   text-decoration: none;

   transition: .2s linear;

}



a:hover, a:focus {

   outline: none;

}



main {

   flex: auto;

   display: flex;

   flex-direction: column;

   justify-content: center;

}



/******************************************************************************************/



/* HEADER                                                                                 */



/******************************************************************************************/

header {

   margin: 0 auto;

   position: relative;

}



header:after {

   content: "";

   position: absolute;

   left: 0;

   right: 0;

   bottom: -5px;

}



.logo {

   display: flex;

   justify-content: space-between;

   color: white;

}



.logo span {

   display: block;

   text-transform: uppercase;

   font-weight: 500;

   white-space: nowrap;

}



.logo b {

   color: #fff857;

   font-weight: 500;

   letter-spacing: 0;

}



header img {

   display: block;

   width: 100%;

   height: auto;

}



/******************************************************************************************/



/* HOME PAGE                                                                              */



/******************************************************************************************/

.home-wrapper {

   display: flex;

   width: 100%;

   max-width: 1170px;

   margin: 0 auto;

}



.language {

   font-size: 37px;

   font-weight: 500;

   color: white;

   display: table;

   margin-left: auto;

   margin-right: auto;

   position: relative;

}



.language:after {

   content: "";

   position: absolute;

   left: -15px;

   right: -15px;

   bottom: 0;

}



.home-wrapper a {

   position: relative;

   display: block;

   text-align: center;

   font-weight: bold;

   color: white;

}



.home-wrapper a:hover {

   color: #fff857;

}



.image img {

   display: block;

   height: auto;

}



/******************************************************************************************/



/* FOOTER                                                                                 */



/******************************************************************************************/

footer {

   margin-top: 40px;

}



.footer-home {

   width: 100%;

   max-width: 1170px;

   margin: 0 auto;

   flex-shrink: 0;

}



.footer-home figure {

   display: table;

}



.footer-home img {

   display: block;

   width: auto;

   margin-bottom: 10px;

}



footer figcaption {

   color: white;

   font-size: 8px;

   text-align: center;

   font-weight: 300;

}



.footer-logo {

   padding-bottom: 10px;

}



.footer-logo img {

   display: block;

   width: auto;

   margin: 0 auto 10px;

}



/******************************************************************************************/



/* PAGES                                                                                  */



/******************************************************************************************/

h1 {

   text-align: center;

   color: white;

   margin-top: 40px;

}



.invitation-block {

   display: flex;

   flex-direction: column;

   justify-content: space-between;

   margin: 0 auto;

}



.invitation-block__text span {

   display: block;

   text-align: center;

   color: white;

   text-transform: uppercase;

   font-weight: bold;

}



.invitation-block__button {

   display: block;

   margin: 0 auto;

   text-align: center;

   text-transform: uppercase;

   color: black;

   font-weight: 500;

   cursor: pointer;

}



.login-button {

   display: block;

   margin: 0 auto;

   text-align: center;

   text-transform: uppercase;

   color: black;

   font-weight: 500;

   cursor: pointer;

}



.links-group {

   display: flex;

   justify-content: center;

   align-items: center;

}



.links-group__item {

   letter-spacing: 1px;

   font-weight: 500;

   text-align: center;

   color: #fff857;

   cursor: pointer;

}



/******************************************************************************************/



/* MEDIA                                                                                  */



/******************************************************************************************/

@media(max-width:767px) {

   header {

      padding-top: 20px;

      width: 100%;

      max-width: 292px;

   }



   header:after {

      height: 4px;

      background: url(img/mobile/header.png) no-repeat;

      background-size: cover;

   }



   .logo span {

      font-size: 11px;

   }



   .logo b {

      font-size: 18px;

   }



   .home-wrapper a {

      margin-left: auto;

      margin-right: auto;

      font-size: 14px;

      height: 42px;

      line-height: 42px;

   }



   .image img {

      width: 108px;

      margin: 10px auto;

   }



   .home-wrapper a:not(:last-child) {

      margin-bottom: 10px;

   }



   .violet-box {

      width: 140px;

      background: url(img/mobile/purple.png) no-repeat;

      background-size: cover;

   }



   .pink-box {

      width: 140px;

      background: url(img/mobile/pink.png) no-repeat;

      background-size: cover;

   }



   .blue-box {

      width: 150px;

      background: url(img/mobile/blue.png) no-repeat;

      background-size: cover;

   }



   .orange-box {

      width: 175px;

      background: url(img/mobile/orange.png) no-repeat;

      background-size: cover;

   }



   .green-box {

      width: 175px;

      background: url(img/mobile/green.png) no-repeat;

      background-size: cover;

   }



   .language {

      font-size: 20px;

   }



   .language:after {

      height: 3px;

      background: url(img/mobile/language.png) no-repeat;

      background-size: cover;

   }



   .english-links .language {

      margin-top: 20px;

      margin-bottom: 10px;

   }



   .spanish-links .language {

      margin-bottom: 10px;

      margin-top: 10px;

   }



   .english-links a {

      margin-bottom: 10px;

   }



   .footer-home {

      padding-bottom: 10px;

      padding-top: 20px;

   }



   .footer-home img, .footer-logo img {

      height: 40px;

      margin-bottom: 5px;

   }



   h1 {

      font-size: 18px;

      margin-bottom: 60px;

   }



   .links-divider {

      height: 39px;

      width: 25px;

      background: url(img/mobile/links-divider.png) no-repeat;

      background-size: cover;

   }



   .invitation-block {

      width: 198px;

      height: 142px;

      background: url(img/mobile/frame.png) no-repeat;

      background-size: cover;

      padding: 14px 24px;

      margin-bottom: 10px;

   }



   .invitation-block__text span {

      font-size: 20px;

      letter-spacing: 4px;

   }



   .invitation-block__button {

      width: 148px;

      height: 34px;

      line-height: 34px;

      font-size: 14px;

      background: url(img/mobile/signup.png) no-repeat;

      background-size: cover;

   }



   .login-button {

      width: 199px;

      height: 35px;

      line-height: 35px;

      font-size: 14px;

      background: url(img/mobile/login.png) no-repeat;

   }



   .links-group__item {

      font-size: 14px;

   }



   label.field--filled {

      display: none;

   }



}



@media(min-width:768px) and (max-width:1279px) {

   header {

      padding-top: 40px;

      width: 697px;

   }



   header:after {

      height: 7px;

      background: url(img/tablet/header.png) no-repeat;

      background-size: cover;

   }



   .logo b {

      font-size: 36px;

      margin-right: 4px;

   }



   .logo span {

      font-size: 18px;

      letter-spacing: 3px;

   }



   .footer-home img, .footer-logo img {

      height: 40px;

      margin-bottom: 5px;

   }



   .footer-home {

      padding-bottom: 15px;

   }



   .links-divider {

      height: 87px;

      width: 42px;

      background: url(img/tablet/links-divider.png) no-repeat;

      background-size: cover;

   }



   h1 {

      font-size: 30px;

      margin-bottom: 80px;

   }



   .invitation-block {

      width: 439px;

      height: 314px;

      background: url(img/tablet/frame.png) no-repeat;

      background-size: cover;

      padding: 28px 32px 24px;

      margin-bottom: 30px;

   }



   .invitation-block__text span {

      font-size: 42px;

      letter-spacing: 6px;

   }



   .invitation-block__button {

      width: 325px;

      height: 70px;

      line-height: 70px;

      font-size: 30px;

      letter-spacing: 1px;

      background: url(img/tablet/signup.png) no-repeat;

      background-size: cover;

   }



   .login-button {

      width: 438px;

      height: 70px;

      line-height: 70px;

      font-size: 30px;

      letter-spacing: 1px;

      background: url(img/tablet/login.png) no-repeat;

   }



   .links-group__item {

      font-size: 30px;

   }



   .home-wrapper a {

      height: 50px;

      line-height: 50px;

      font-size: 16px;

      margin: 0 auto 20px;

   }



   .language {

      margin-top: 20px;

      margin-bottom: 20px;

   }



   .english-links .language {

      margin-top: 40px;

   }



   .language:after {

      height: 6px;

      background: url(img/tablet/language.png) no-repeat;

      background-size: cover;

   }



   .violet-box {

      width: 167px;

      background: url(img/tablet/purple.png) no-repeat;

      background-size: cover;

   }



   .pink-box {

      width: 167px;

      background: url(img/tablet/pink.png) no-repeat;

      background-size: cover;

   }



   .blue-box {

      width: 179px;

      background: url(img/tablet/blue.png) no-repeat;

      background-size: cover;

   }



   .orange-box {

      width: 205px;

      background: url(img/tablet/orange.png) no-repeat;

      background-size: cover;

   }



   .green-box {

      width: 209px;

      background: url(img/tablet/green.png) no-repeat;

      background-size: cover;

   }



   .image img {

      width: 200px;

      margin: 20px auto 20px;

   }

}



@media(max-width:1279px) {

   .home-wrapper {

      flex-direction: column;

   }



   footer figure {

      margin: 0 auto;

   }

}



@media(min-width:1280px) {

   header {

      padding-top: 80px;

      width: 851px;

   }



   header:after {

      height: 8px;

      background: url(img/desktop/header.png) no-repeat;

      background-size: cover;

   }



   .logo {

      padding: 0 10px;

   }



   .logo span {

      font-size: 22px;

      letter-spacing: 3px;

   }



   .logo b {

      font-size: 48px;

      margin-right: 7px;

   }



   .language:after {

      height: 6px;

      background: url(img/desktop/language.png) no-repeat;

      background-size: cover;

   }



   .english-links .language {

      margin-bottom: 97px;

   }



   .english-links {

      width: 302px;

   }



   .image {

      padding-top: 92px;

      padding-left: 20px;

   }



   .image img {

      width: 330px;

      height: auto;

   }



   .spanish-links {

      width: 368px;

   }



   .spanish-links .language {

      margin-bottom: 48px;

   }



   .home-wrapper {

      justify-content: space-between;

   }



   .home-wrapper a {

      margin-left: auto;

      margin-right: auto;

      font-size: 26px;

      height: 88px;

      line-height: 88px;

   }



   .violet-box {

      width: 302px;

      margin-bottom: 70px;

      background: url(img/desktop/purple.png) no-repeat;

      background-size: cover;

   }



   .violet-box:after {

      content: "";

      position: absolute;

      right: -93px;

      top: 62px;

      width: 69px;

      height: 28px;

      background: url(img/desktop/purple-line.png) no-repeat;

      background-size: cover;

   }



   .pink-box {

      width: 301px;

      background: url(img/desktop/pink.png) no-repeat;

      background-size: cover;

   }



   .pink-box:after {

      content: "";

      position: absolute;

      right: -86px;

      top: 10px;

      width: 72px;

      height: 18px;

      background: url(img/desktop/pink-line.png) no-repeat;

      background-size: cover;

   }



   .blue-box {

      width: 317px;

      margin-bottom: 55px;

      background: url(img/desktop/blue.png) no-repeat;

      background-size: cover;

   }



   .blue-box:before {

      content: "";

      position: absolute;

      left: -79px;

      top: 56px;

      width: 64px;

      height: 37px;

      background: url(img/desktop/blue-line.png) no-repeat;

      background-size: cover;

   }



   .orange-box {

      width: 364px;

      margin-bottom: 55px;

      background: url(img/desktop/orange.png) no-repeat;

      background-size: cover;

   }



   .orange-box:before {

      content: "";

      position: absolute;

      left: -70px;

      top: 40px;

      width: 59px;

      height: 8px;

      background: url(img/desktop/orange-line.png) no-repeat;

      background-size: cover;

   }



   .green-box {

      width: 368px;

      background: url(img/desktop/green.png) no-repeat;

      background-size: cover;

   }



   .green-box:before {

      content: "";

      position: absolute;

      left: -59px;

      top: -26px;

      width: 51px;

      height: 43px;

      background: url(img/desktop/green-line.png) no-repeat;

      background-size: cover;

   }



   .footer-home {

      padding-bottom: 30px;

   }



   h1 {

      font-size: 28px;

      margin-bottom: 70px;

   }



   .invitation-block {

      width: 301px;

      height: 216px;

      background: url(img/desktop/frame.png) no-repeat;

      background-size: cover;

      padding: 18px 24px;

      margin-bottom: 30px;

   }



   .invitation-block__text span {

      font-size: 30px;

      letter-spacing: 5px;

   }



   .invitation-block__button {

      width: 223px;

      height: 50px;

      line-height: 50px;

      font-size: 20px;

      letter-spacing: 1px;

      background: url(img/desktop/signup.png) no-repeat;

      background-size: cover;

   }



   .login-button {

      width: 301px;

      height: 50px;

      line-height: 50px;

      font-size: 20px;

      letter-spacing: 1px;

      background: url(img/desktop/login.png) no-repeat;

      background-size: cover;

   }



   .footer-home img, .footer-logo img {

      height: 57px;

   }



   .links-divider {

      height: 63px;

      width: 38px;

      background: url(img/desktop/links-divider.png) no-repeat;

      background-size: cover;

   }



   .links-group__item {

      font-size: 20px;

   }

}