/* Demo site CSS. Not mobile first, not semantic, not optimized, made for 20 minutes, mess */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0; 
}

.spacer {
  margin: 30px auto;
  padding: 2;
}

.row img {
  margin: 3px;
  padding: 0;
  float: left;
}

.row {
  margin: 0px 20px;
  padding: 0px;
  -webkit-overflow-scrolling: touch;
}

.body{
    width:90%; /* or you can also set 900px*/

}

a {
  color: #3169B3;
  text-decoration:none;
}
a:hover {
  color: #C00;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}




@media screen and (max-width: 1080px) {

 

  .row--wide {
    max-width: 800px;
  }
  .row--wide img {
    float: none;
  }
  .img-desc {
    margin-left: 0;
  }
  .section {
    margin-top: 132px;
  }

  .row--docs {
    max-width: 800px;
    padding-left: 30px;

  }
  
  .section--head {
    margin-top:0;
    padding: 30px 0;
  }

  .docs {
    margin-top: 48px;
  }

  .docs-menu {
    position: relative;
    margin: 15px 0;
    left:0;
    top:0;
  }
  .docs-menu  ul {
    position: relative;
  }
  .docs-menu__ad {
    display: none;
  }

  .row--nav {
    font-size: 24px;
    line-height: 1.1; 
  }

}



@media screen and (max-width: 650px) {
   h1 {
    font-size: 40px;
  }
  .block__ui-separated .col-50 {
    position: relative;
    top: 0;
  }
  .block__ui-separated img {
    max-width: 100%;
    width: 100%;
    float: left;
  }
}

@media screen and (max-width: 450px) {
  

  .col-50:nth-child(1) {
    margin-right: 0;
  }
  .row--wide img {
    margin-bottom: 6px;
  }
  .col-50 {
    width: 100%;
    margin-bottom: 12px;
  }
  .row {
    padding: 0 18px;
  }
  .docs .highlight,
  .codepen-embed {
    padding-left: 18px;
    padding-right: 18px;
    margin-left: -18px;
  }
  .section {
    margin-top: 88px;
  }
  .docs {
    margin-top: 32px;
  }
  .section--head {
    margin-top:0;
    padding: 24px 0;
  }
  .row--nav {
    font-size: 18px;
    line-height: 26px; 
  }


}

@media screen and (max-width: 700px) {

  .row--nav {
    font-size: 18px;
    line-height: 26px; 
  }

  .gallery {
    max-width: 500px;
  }
  .gallery a {
    width: 120px;
    margin: 0 4px 4px 0;
  }
  a.gallery__img--main {
    width: 164px;
  }
  .section--head p {
    font-size: 18px;
    line-height: 24px;
  }
}

/*@media screen and (max-width: 490px) {
  .gallery a {
    width: 100px;
    margin: 0 4px 4px 0;
  }
  a.gallery__img--main {
    width: 137px;
  }
}
*/


@media screen and (max-width: 450px) {
  .gallery a {
    width: 95px;
    margin: 0 1px 1px 0;
  }
  a.gallery__img--main {
    width: 127px;
  }
}


@media screen and (max-width: 350px) {
  .gallery a {
    width: 81px;
margin: 0 1px 1px 0;
  }
  a.gallery__img--main {
    width: 109px;
  }
}