/* generic styles */
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

body, html {
   font-size: 18px;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
}

body {
   font-family: 'Open Sans', sans-serif;
   line-height: 1.5em;
   color: #404040;
}

a {
   color: #1564b2;
}

a:active, a:hover, a:focus {
   color: #1e90ff;
}

kbd {
   background-color: #f0f0f0;
   border: 1px solid #e0e0e0;
   padding: 0.1em 0.2em;
   margin: 0 0.1em;
   border-radius: 3px;
   color: #606060;
}

/* top page elements */
.page-section,
.page-header,
.page-footer {
   min-width: 325px;
   width: 100%;
}

.page-top {
   background-color: #f8f0e8;
   color: #746a51;
   text-align: center;
   font-size: 0.75em;
   padding: 0.25em;
   line-height: 2em;
}
.page-top > a{
   color: #012e56;
}

.telegram {
   background-image: url('../images/telegram.png');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: auto 1.4em;
   padding-left: 1.6em;
   margin: 0 0.2em;
   font-weight: 500;
}

.page-header {
   height: 130px;
   background-image: url('data:image/svg+xml;utf8,<svg width="2000px" height="130px" viewpoint="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23e8f0f4" points="0,0, 2000,0, 2000,110 1000,130 0,110 0,0"/><polygon fill="%23f6faff" points="0,0, 2000,0, 2000,109 1000,129 0,109 0,0"/></svg>');
   background-position: center center;
   background-repeat: no-repeat;
}

.page-header__title,
.page-header__subtitle {
   max-width: 1024px;
   margin: 0 auto;
   width: auto;
}


.page-header__title {
   height: 100px;
   font-weight: extra-bold;
   font-size: 3em;
   color: #1e90ff;
   padding: 20px 10px 20px 20px;

   background-image: url(../images/logo.svg);
   background-size: 90px 90px;
   background-position: center right;
   background-repeat: no-repeat;
   background-origin: content-box, padding-box;
}

.page-header__title a,
.page-header__title a:hover,
.page-header__title a:focus {
   color: #1e90ff;
   text-decoration: none;
}

.page-header__title span{
   padding-left: 1px;
   color: #1564b2;
 }

.page-header__title > span.page-header__section {
   color: #f94d00;
}

 .page-header__subtitle {
   font-size: 1.5em;
   color: #a0a0a0;
   padding: 0 0 0 22px;
   margin-top: -35px;
}

 .page-section_main {
   display: grid;
   grid-template-areas: "header list"
                        "info list";
   grid-template-columns: 1.1fr 0.9fr;
   grid-template-rows: auto 1fr;
   justify-content: center;
   max-width: 1000px;
   margin: 0 auto;
   padding: 2em 0 1em 0;
}

.page-section_small {
   font-size: 0.9em;
}

.page-section__header {
   display: block;
   grid-area: header;
   padding: 0 10px 0 10px;
   margin: 0;
}

.page-section__header h2{
   font-size: 1.35em;
   padding: 0 0 0.5em 0;
   margin: 0;
}

.page-section__info {
   color: #606060;
   display: block;
   grid-area: info;
   padding: 0 10px 0 10px;
   line-height: 1.65em;
   margin: 0;
}

.page-section__list {
   display: block;
   list-style: none;
   grid-area: list;
   padding: 1em 10px 0 10px;
   margin: 0;
}

.list-item {
   background-repeat: no-repeat;
   background-position: left top;
   background-size: auto 16px;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');

   color: #202020;
   display: block;
   font-size: 0.85em;
   line-height: 1.25em;
   padding: 0 0.5em 1em 24px;
}

.list-item span {
   color: #909090;
   font-size: 0.95em;
}

.list-item_github {
   background-image: url('../images/github-brands.svg');
}

.list-item_release {
   background-image: url('../images/file-archive-solid.svg');
}

.list-item_coming {
   background-image: url('../images/hourglass-start-solid.svg');
}

.list-item_book {
   background-image: url('../images/book-solid.svg');
}

.list-item_video {
   background-image: url('../images/film-solid.svg');
}

.list-item_app {
   background-image: url('../images/browser-solid.svg');
}


.page-section_cards {
   background: #ebf0f4;
   background-color: #f6faff;
   border-top: solid 1px #e8f0f4;
   border-bottom: solid 1px #e8f0f4;
   margin-top: 1em;
}

.page-section_cards > header {
   max-width: 980px;
   margin: 0 auto;
   padding: 0.75em 0 0 0px;
}

.page-section_cards > header > h2 {
   font-size: 1.1em;
   color: #406070;
   margin: 0 auto;
   padding: 0;
}

.cards {
   display: flex;
   list-style: none;
   flex-wrap: wrap;
   padding: 0.75em 20px 2em 0px;

   justify-content: flex-start;
   align-items: flex-start;
   max-width: 980px;
   margin: 0 auto;
}

.card {
   background-color: #fdfeff;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(100, 140, 150, 0.2), 0 -4px 8px 0 rgba(100, 140, 150, 0.19);

   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 40%;
   padding: 1em 1em 1em 60px;
   margin: 0 10px 10px 0;
   min-width: 300px;

   background-repeat: no-repeat;
   background-position: 15px 1em;
   background-size: auto 30px;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
}

.card:hover {
   background-color: #fff;
}

.card_github {
   background-image: url('../images/github-brands-light.svg');
}

.card_app {
   background-size: auto 28px;
   background-image: url('../images/browser-light.svg');
}

.card_graasta {
   background-color: #fff8f0;
   padding: 1em 1em 1em 60px;
   background-size: 36px 36px;
   margin: 10px 10px 10px 0;
   flex-basis: 100%;
   background-image: url('https://graasta.com/img/logo.svg');
   box-shadow: 0 4px 8px 0 rgba(240, 200, 180, 0.4), 0 -4px 8px 0 rgba(240, 200, 180, 0.4);
}

.card_graasta a{
   color: #336688;
}

.card_graasta a:hover{
   color: #5588aa;
}

.card_graasta p{
   color: #554422;
}

.card_graasta:hover {
   background-color: #fff8f0;
}

.card > h3 {
   font-size: 0.85em;
   margin: 0;
   padding: 0.25em 0;
}

.card >  p {
   font-size: 0.75em;
   line-height: 1.5em;
   margin: 0;
   padding: 0;
}


.page-footer {
   height: 60px;
 }

.page-footer > p{
   color: #909090;
   font-size: 0.75em;
   line-height: 1.5em;
   max-width: 980px;
   margin: 0 auto;
   padding: 0 20px;
   height: 100%;

   display: flex;
   align-items: center;

   background-repeat: no-repeat;
   background-position: right center;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="0.8" width="50" height="45" viewbox="0 0 50 50"><path transform="scale(0.02, 0.02)" fill="%23d0d0d0" class="fil0" d="M784.594 1775.93c-5.73898,0 -12.1099,-0.598819 -19.1551,-1.88622l2.87481 -31.6252 28.3902 -0.00590552c4.71378,-1.31457 8.4567,-3.41575 11.3539,-6.03071 4.96181,-4.47992 7.82599,-10.6937 9.00119,-17.1177 0.393307,-2.15197 0.582284,-4.52953 0.582284,-7.03583 0,-17.1697 -0.153543,-33.2055 -0.356693,-54.7264 -0.229134,-24.1677 -0.516142,-54.1961 -0.753544,-88.6217 -258.799,46.9831 -319.217,-134.775 -321.697,-142.595 -41.1803,-104.091 -97.8119,-130.628 -97.9761,-130.707l-2.1248 -1.18819c-130.439,-89.1426 15.228,-87.2942 15.6414,-87.293l1.00039 0c102.02,7.18111 156.354,101.244 159.315,106.5l0.0106299 -0.00590552c31.011,53.1331 69.1654,79.3335 107.076,90.1572 54.9922,15.6992 110.447,-0.18189 143.204,-13.7232 4.5437,-26.8583 12.0284,-50.0811 21.3697,-69.7536 6.2941,-13.2543 13.4528,-24.9425 21.1512,-35.0906 -98.8288,-14.0232 -197.87,-42.6567 -275.24,-107.786 -85.8449,-72.2658 -144.027,-188.348 -144.027,-377.124l0.0625985 0c0.00826772,-52.7882 9.14528,-100.878 25.8189,-144.331 16.526,-43.0689 40.4764,-81.6556 70.3004,-115.817 -5.70591,-16.2142 -13.6299,-44.4721 -16.1315,-81.8812 -3.05906,-45.7512 1.93228,-105.447 29.002,-173.888l0.624804 -1.24961c0.0165354,-0.0330709 11.7685,-10.0417 28.3807,-10.8827 10.9583,-0.553937 27.4973,0.0212599 49.8189,4.53426 43.4717,8.78977 110.06,32.8961 201.989,94.2686 36.3201,-9.76418 73.806,-17.1839 111.829,-22.298 41.1414,-5.53229 83.0327,-8.37048 124.869,-8.55709l0.125197 0c41.7898,0.186614 83.6339,3.02599 124.749,8.55473 38.041,5.11654 75.5623,12.5433 111.95,22.3063 184.793,-123.404 269.951,-96.1867 270.202,-96.1135l7.44449 2.20748 2.86772 7.22953c27.1748,68.5312 32.2134,128.17 29.1815,173.825 -2.48386,37.4008 -10.3772,65.6469 -16.0595,81.8741 29.8063,34.076 53.6823,72.6142 70.1717,115.667 16.7091,43.6276 25.8213,91.7989 25.8213,144.551 0,189.299 -58.2685,305.327 -144.281,377.335 -77.426,64.8213 -176.587,93.0804 -275.626,106.865 11.5807,15.1465 21.991,33.7831 30.1193,55.9725 10.9406,29.8713 17.798,66.2575 17.798,109.27 0,76.7469 -0.56693,156.597 -0.941339,209.467 -0.137008,19.4008 -0.240945,33.8929 -0.240945,53.0469l-0.0625985 0c0.0011811,2.39292 0.246851,4.95945 0.761812,7.62993 1.23307,6.39449 4.06418,12.5102 8.90079,16.8461 2.6504,2.37638 6.01418,4.31457 10.1882,5.60434l30.0059 -0.00590552 3 31.6252c-7.10906,1.37008 -13.8307,2.00669 -20.1626,2.01024 -6.13229,0.00354331 -11.7803,-0.611811 -16.9677,-1.75276l-538.689 0.102756c-5.05512,1.06536 -10.5343,1.64173 -16.461,1.64173z"/></svg>');
 }

.page-footer > p > img{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   margin: 0 20px 0 0;
}

.page-footer > p > span{
   font-weight: bold;
}

.page-footer > p > span > a{
   font-weight: normal;
}

@media(max-width: 1020px) {

   .page-header__title {
      padding-right: 20px;
   }

   .page-section__info,
   .page-section__list,
   .page-section_cards > header,
   .page-section__header {
      padding-left: 20px;
      padding-right: 20px;
   }

   .cards {
      padding-left: 20px;
      padding-right: 10px;
   }

}

@media(max-width: 800px) {
   html, body {
      font-size: 16px;
   }

   .page-header__title {
      background-size: auto 80px;
   }
}

@media(max-width: 640px) {
   html, body {
      font-size: 18px;
   }

   .page-section_main {
      grid-template-areas: "header"
                           "info"
                           "list";
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      justify-content: center;

      padding: 2em 0;
   }

    .page-section__header {
      padding: 0 20px 0 20px;
   }

   .page-section__info {
      padding: 0 20px 0.5em 20px;
   }

   .page-section__list {
      padding: 1em 20px 0 20px;
   }

    .cards {
      margin: 0;
      padding: 10px 1em 20px 1em;
      display: block;
    }

    .card {
      display: block;
      box-sizing: border-box;
      margin: 10px 0 auto;
      width: 100%;
      min-width: 300px;

   }

}

@media(max-width: 500px) {

   html, body {
      font-size: 16px;
   }


   .page-header {
      height: 100px;
      background-size: auto 100px;
   }

   .page-header__title {
      height: 90px;
      background-size: auto 60px;
   }

   .page-header__subtitle {
      margin-top: -35px;
   }

   .page-section__header {
      padding: 0 10px 0 10px;
   }

   .page-section__info {
      padding: 0 10px 0.5em 10px;
   }

   .page-section__list {
      padding: 1em 10px 0 10px;
   }

   .page-section_cards > header {
      padding: 0.75em 10px 0 10px;
   }

    .cards {
      padding: 0 10px 1em 10px;
    }

    .card {
      margin: 10px 0 auto;
   }

   .page-footer > p{
      padding: 0 10px;
   }
}

@media(max-width: 415px) {

   html, body {
      font-size: 16px;
   }

   .page-header {
      height: 100px;
      background-size: auto 100px;
   }

   .page-header__subtitle {
      margin-top: -35px;
      font-size: 1.35em;
   }

   .page-header__title {
      height: 90px;
      font-weight: extra-bold;
      font-size: 2.25em;
      color: #1e90ff;
      padding: 20px 10px 20px 20px;
   }

   .page-header__subtitle {
      padding: 0 0 0 22px;
      margin-top: -35px;
   }
}