@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 700;
  src: url(6815a83836095e412dac08245d447b27.eot);
  src: url(6815a83836095e412dac08245d447b27.eot?#iefix)
      format('embedded-opentype'),
    url(763fe6b6f5b14950dc63b7c58b5b25ad.woff) format('woff'),
    url(dfd0570eb11c279c56773a065d53c0b5.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 100;
  src: url(f9b128590a182642865123eff09e48d2.eot);
  src: url(f9b128590a182642865123eff09e48d2.eot?#iefix)
      format('embedded-opentype'),
    url(f78b74c5aeaf5b2d5d4d71362f46d546.woff) format('woff'),
    url(11627467f810c4e95309a2a717e74d4b.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 300;
  src: url(4d7909486ac3de1e20be22e1c9a1d84e.eot);
  src: url(4d7909486ac3de1e20be22e1c9a1d84e.eot?#iefix)
      format('embedded-opentype'),
    url(99801f969addddd2d2594e4ad63520b7.woff) format('woff'),
    url(010869d8178f2bc62d816f7e30bdf903.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 400;
  src: url(d4be13b9984ed551c710cc9ae0d1d18b.eot);
  src: url(d4be13b9984ed551c710cc9ae0d1d18b.eot?#iefix)
      format('embedded-opentype'),
    url(fcb37b924ab46591341b215432235feb.woff) format('woff'),
    url(bbc8b3fa847e85e289ca64cda079e603.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 500;
  src: url(6a51276de7a745c01c6c64f4d9144d60.eot);
  src: url(6a51276de7a745c01c6c64f4d9144d60.eot?#iefix)
      format('embedded-opentype'),
    url(492984b84b9f05835f9c5e7edfb9db12.woff) format('woff'),
    url(6387a14a1aed237d83628c65d9fe3f84.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 800;
  src: url(cea3492e38fed9fa7ef0d508e2e4bf78.eot);
  src: url(cea3492e38fed9fa7ef0d508e2e4bf78.eot?#iefix)
      format('embedded-opentype'),
    url(1d9f58702be07984638a11a9574d3172.woff) format('woff'),
    url(f2ab2738b2d421b93911fbe170c3f204.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 900;
  src: url(5b8cfc1c219d58c1f5ca36008bdb0e98.eot);
  src: url(5b8cfc1c219d58c1f5ca36008bdb0e98.eot?#iefix)
      format('embedded-opentype'),
    url(76ccefece305bf6bab426f04f07f870b.woff) format('woff'),
    url(44b6abc1931bdca0b4eab6a18c2c8b07.ttf) format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 950;
  src: url(e2d75f96bfc206ee18f57b87c58606e7.eot);
  src: url(e2d75f96bfc206ee18f57b87c58606e7.eot?#iefix)
      format('embedded-opentype'),
    url(b5c0daaf707218e404ab24c92b56398e.woff) format('woff'),
    url(5f9896803d589650696afe6ea704a2fe.ttf) format('truetype');
}

@font-face {
  font-family: roboto;
  font-style: normal;
  font-weight: 700;
  src: url(ee7b96fa85d8fdb8c126409326ac2d2b.ttf) format('truetype');
}

@font-face {
  font-family: roboto;
  font-style: normal;
  font-weight: 300;
  src: url(fc84e998bc29b297ea20321e4c90b6ed.ttf) format('truetype');
}

@font-face {
  font-family: roboto;
  font-style: normal;
  font-weight: 400;
  src: url(3e1af3ef546b9e6ecef9f3ba197bf7d2.ttf) format('truetype');
}

body {
  margin: 0;
  height: 100%;
  direction: rtl;
  color: #666;
  font-family: roboto, iranyekan;
}

a {
  color: #2196f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

pre {
  direction: ltr;
}

.light-text {
  font-weight: 100;
}

.full-width {
  width: 100%;
}

.site-header {
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #cc3433;
  box-shadow: 0px 3px 4px 0px #cc343354;
  overflow: hidden;
}

.site-header-logo {
  background-size: 35px;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 12px;
  width: 40px;
  height: 50px;
  background-image: url(white-logo.png);
  display: flex;
  box-shadow: -20px 0px 20px 0px #e84444;
}

.site-header-logo a {
  height: 100%;
  width: 100%;
}

.site-header-title {
  font-size: 19px;
  font-weight: 600;
  color: #cb3332;
  display: none;
}

.site-header-menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 10px 0;
}

.site-header-menu li:nth-child(n + 1) {
  margin-right: 20px;
}

.site-header-menu a {
  font-weight: bold;
  color: inherit;
  text-decoration: none;
}

.site-header-menu a:hover {
  color: #ffd7d7;
}

.header {
  background: #f7f7f729;
  padding: 30px 0 15px 0;
  text-align: center;
  border-bottom: 1px solid #e0e5e6;
}

.header-title {
  margin: 5px 0 10px 0;
}

.header-sup-title {
  color: #9c9c9c;
}

.header-sub-title {
  display: inline;
  margin-right: 10px;
  color: #6d6d6d;
}

.description {
  margin-bottom: 20px;
  text-align: justify;
  font-size: 13px;
}

.wrapper {
  max-width: 860px;
  margin: 30px auto;
  padding-left: 40px;
  padding-right: 40px;
}

.full-wrapper {
  margin: 30px auto;
}

.markdown h2 {
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 8px;
}

.markdown h3 {
  margin-top: 1.75em;
}

.markdown p {
  text-align: justify;
}

.alt-text {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}

.list {
  padding: 0;
  list-style: none;
}

.list li {
  padding: 5px;
}

.flex-list-item {
  display: flex;
  align-items: center;
}

.list-changelog {
  margin-right: 5px;
  font-size: 12px;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li {
  padding: 15px;
  margin: 8px 0;
  background: #fff;
  border: 1px solid #dadada;
}

.link-list li:hover,
.link-list li:focus {
  background: #f9f9f9;
}

.link-list li a {
  color: inherit;
  text-decoration: none;
}

.link-list-title {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding-bottom: 5px;
}

.link-list-description {
  font-size: 13px;
  text-align: justify;
  overflow: hidden;
}

.attribution {
  position: absolute;
  font-size: 8px;
  bottom: 20px;
  left: 20px;
  margin-top: -10px;
}

.ltr {
  direction: ltr;
}

.hy-lng {
  font-family: arial;
  text-align: left;
}

.demo-map-container {
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  margin: 40px 0;
}

.demo-map-container #map {
  height: 500px;
  width: 80%;
}

.style-list {
  padding: 0;
}

.style-list li {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 5px;
  border-bottom: 1px dotted #e0e0e0;
  align-items: center;
  text-align: right;
}

.style-list .language-js {
  word-break: break-all;
}

.style-list .raster-url .language-js {
  font-size: 14px;
}

.style-description {
  font-weight: 700;
  font-size: 13px;
  margin-left: auto;
}

.style-description a {
  margin-left: 10px;
}

.page-col-2-4,
.page-col-3,
.page-col-6 {
  float: right;
  margin: 0 10px;
}

.page-col-title {
  text-align: center;
}

.warning-box {
  color: red;
  background: #fafafa;
  padding: 20px;
  font-size: 13px;
  text-align: justify;
}

.site-footer {
  border: 0;
  background: #cc3433;
  left: 0px;
  right: 0px;
  bottom: 0px;
  align-items: center;
  vertical-align: middle;
  align-content: center;
  color: #fff;
  box-shadow: 0px -3px 4px 0px #cc343354;
  overflow: hidden;
  display: flex;
  height: 250px;
}

.wrapper::after,
#examples_col::after,
.site-footer:after {
  content: '.';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.site-footer:not(:nth-child(1)) {
  justify-content: center;
}

.site-footer-right {
  width: 20%;
  text-align: center;
  box-shadow: -20px 0px 20px 0px #e84444;
  height: 100%;
}

.site-footer-logo {
  background-size: 80%;
  background-repeat: no-repeat;
  background-image: url(white-logo.png);
  height: 80%;
  background-position: center;
}

.site-footer-logo--text {
  font-weight: 100;
  margin-top: 5%;
}

.site-footer-center {
  text-align: center;
  width: 100%;
}

.site-footer-center .alt-text {
  color: #f2f2ffab;
  margin-top: -13px;
}

.site-footer-center a {
  color: white;
}

.site-footer-center--item {
  padding: 5px;
}

@media screen and (min-width: 1399px) {
  /** 
    5 col
    2.4 * 5 = 12 
  */
  .page-col-2-4 {
    width: calc(20% - 20px);
  }

  /** 4 col */
  .page-col-3 {
    width: calc(25% - 20px);
  }

  /** 2 col */
  .page-col-6 {
    width: calc(50% - 20px);
  }

  /** 1 col */
  .page-col-12 {
    width: calc(100% - 20px);
  }
}

@media screen and (max-width: 1398px) {
  .page-col-2-4,
  .page-col-3 {
    width: calc(33.33333% - 20px);
  }

  .page-col-6 {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 989px) {
  .page-col-2-4,
  .page-col-3,
  .page-col-6 {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 700px) {
  .page-col-2-4,
  .page-col-3,
  .page-col-6 {
    width: calc(100% - 20px);
  }

  body {
    font-size: 14px;
  }

  .wrapper {
    padding: 0 10px;
  }

  .style-description {
    max-width: 50%;
    font-size: 12px;
  }

  .demo-map-container #map {
    width: 100%;
  }
}