/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGCD5K6T8I4oZ1X3Xvlj_UeP3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGDOFnJNygIkrHciC8BWzbCz3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGCP2LEk6lMzYsRqr3dHFImA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlCxe5Tewm2_XWfbGchcXw4g.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlIa1YDtoarzwSXxTHggEXMw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMZXFz2iDKd7GJNSaxRYiSj3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGKyGJhAh-RE0BxGcd_izyev3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMzFoXZ-Kj537nB_-9jJhlA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMms7UHsIbjUxEJqIwog-i_3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGO4s1Ux4PuImWPk5fSr6HPL3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGJkF8H8ye47wsfpWywda8og.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@keyframes stroke {
  0% {
    stroke-dasharray: 0, 125;
    fill: transparent;
  }
  60% {
    stroke-dasharray: 125;
    fill: transparent;
  }
  100% {
    fill: #23abef;
  }
}
@keyframes grow {
  0% {
    fill: transparent;
  }
  60% {
    fill: transparent;
    transform: scale(1.2) translate(-4px, -4px);
  }
  100% {
    fill: #1A90CC;
    transform: scale(1);
  }
}
.c1, .ani1 {
  animation: grow 1.1s normal 1;
}
.c2, .ani2 {
  animation: stroke 1.1s normal 1;
  fill: #23abef;
  stroke: #23abef;
}
html, body {
  background: #f5f5f5;
  font-family: "source sans pro", sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background: #fafafa;
  background: rgba(255, 255, 255, 0.97);
  padding: 15px 20px;
  position: fixed;
  top: 0px;
  width: calc(100vw - 40px);
  z-index: 100;
}
header > a, header svg {
  float: left;
}
header h1, header h2 {
  margin: 0;
  padding: 0;
}
header h1 {
  line-height: 0.9;
}

header a {
  text-decoration: none;
  color: #222;
  white-space: nowrap;
}
header li {
  display: inline;
}
header nav a {
  display: inline-block;
}
header nav {
  text-align: right;
}

nav a {

  display:inline-block;
  border-right: 1px solid;
  padding:0px 14px 0;
  margin:-5px 0 0 0;
  word-spacing:0;
  font-size:1.1em;
}
nav li:last-child a{
  border-right:0 none;
}
#content {
  clear: both;
  z-index: 10;
  margin-top: 95px;
  padding-left: 70px;
  padding-bottom:70px;
  padding-right:10px;
  min-height:calc(100vh - 165px);
}
#content p, #content li {
  max-width: 560px;
}
#content ul {
  margin: 0 auto;
  padding: 0;
}

svg {
  width: 48px;
  height: 48px;
  margin-top:3px;
}
footer {
  text-align: center;
  margin-top:75px;
  width:100vw;
  margin-top:-50px;
}
footer h1 {
  font-size:1.1em;
  font-weight: 400;
  font-style:italic;
}

@media (min-width: 564px) and (max-width: 800px) {}
@media (min-width: 0px) and (max-width: 564px), (max-width: 700px) and (orientation: landscape)  {
  html, body {
    background: #fefefe;
  }
  header {
    background: #1A90CC;
    background: rgba(26, 144, 204, 0.97);
    padding: 15px 10px 10px 5px;
    width: calc(100vw - 15px);
  }
  header h1 {
    font-size:1.1em;
    font-weight: 500;
    margin-right:0;
    padding-right:0;
  }
  header a {
    text-decoration: none;
    color: #fefefe;

  }
  nav ul {
    margin-top:5px;
    margin-left:0;
    padding-left:0;
    white-space: nowrap;
  }
  nav a {
    display:inline-block;
    border-right: 1px solid;
    padding:0px 8px 0;
    margin:0 0 0 -5px;
    word-spacing:0;
    font-weight:normal;
    font-size:0.9em
  }
  nav li:last-child a{
    border-right:0 none;
  }
  svg {
    width: 32px;
    height: 32px;
    margin-top:0;
  }
  #content {
    padding-left: 10px;
    padding-right: 10px;
  }
  #content ul {
    padding-left: 17px;
  }
  #content p, #content li {
    max-width: none;
  }
  @keyframes stroke {
    0% {
      stroke-dasharray: 0, 125;
      fill: transparent;
    }
    60% {
      stroke-dasharray: 125;
      fill: transparent;
    }
    100% {
      fill: #ffffff;
    }
  }
  @keyframes grow {
    0% {
      fill: transparent;
    }
    60% {
      fill: transparent;
      transform: scale(1.2) translate(-4px, -4px);
    }
    100% {
      fill: #fafafa;
      transform: scale(1);
    }
  }
  .c1, .ani1 {
    animation: grow 1.1s normal 1;
  }
  .c2, .ani2 {
    animation: stroke 1.1s normal 1;
    fill: #fafafa;
    stroke: #fafafa;
  }
}