@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400i,700,700i|Ubuntu:300,400,500,700|Roboto');

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}



html,body {
  margin      : 0;
  padding     : 0;
  font-family : 'Ubuntu', Arial, sans-serif;
  font-weight : 300;
  color       : #141414;
  height      : 100%;
}

ul, li { list-style-type: none; margin: 0; padding: 0; }

strong { font-weight: 600; }

h1 { font-weight: 300; color: #185452; font-size: 30px; }

h1 .subtitle {
  display: block;
  font-size: 0.7em;
  margin-top: 15px;
  font-style: italic;
}
  h1 .subtitle strong {
      font-weight:500;
  }

h2 { font-weight: 300; color: #185452; font-size: 20px; }


body {
  background : linear-gradient(to right, rgba(206, 207, 209, 0.6) 0%,rgba(227, 227, 229, 0.6) 100%) #FFFFFF;
}

body.contentpage {
    display:flex;
    flex-direction: column;
}

body.contentpage #content_spacer {
    flex:1 0 auto;
}

body.contentpage #content_wrapper {
    margin      : 90px auto;
    width       : 70%;
    max-width   : 1050px;
}

body.contentpage #content p {
    line-height:26px;
}


#content {
    margin:auto;
    padding: 0px 30px 30px 30px;
}
#content_skew {
    transform      : skew(0.5deg, -0.5deg);
    box-shadow          : 5px 5px 0px #3fbdb9;;
    border:2px solid #185452;
    background     : #F5F5F5;
}

#content_unskew {
  transform      : skew(-0.5deg, 0.5deg);
}

body.contentpage #content a {
    color:#3EB7B3;
    font-weight:normal;
    text-decoration:none;
}

body.contentpage #content a:hover {
    text-decoration:underline;
}

body.contentpage h2 {
    font-weight:500;
    border-bottom: 2px solid #185452;
    margin: 35px 10px 20px 0px;
    display:inline-block;
    padding-bottom:8px;
}

body.contentpage h3 {
    font-weight:500;
    margin: 25px 10px 10px 0px;
    color:#185452;
}

body.contentpage .btn {
    display:inline-block;
    width:auto;
    height:auto;
    padding:10px 15px;
    transition        : 0.1s ease-out;
    color:#FFF !important;
    font-weight:normal;
    margin-top:20px!important;
    transform:none;
    position:relative;
    background-color:#e4862a;
    left:0px;
    top:0px;
    margin-left:0;
}

body.contentpage .btn i {
    font-size:20px;
}

body.contentpage .btn:hover {
    text-decoration:none !important;
    left:3px;
    top:3px;
}

body.contentpage .btn:after {
    transition        : 0.1s ease-out;
    position:absolute;
    background-color:#925a23;
    width:100%;
    height:100%;
    left:4px;
    top:4px;
}

body.contentpage .btn:hover::after {
    left:2px;
    top:2px;
}

#communitypage .colwrap {
    text-align:center;
}

#communitypage .colwrap p{
    max-width: 250px;
    margin:auto;
    margin-top : 10px;
    font-size:14px;
}

.downloadItem .downloadTitle {
    flex:2;
    
}
.downloadItem .downloadLink {
    flex:1;
}

.downloadItem .githubLink {
    font-size:11px;
    padding-left:10px;
    color:#999 !important;
    font-style  : italic;
}
.downloadItem {
    border-bottom: 1px solid #e6e6e6;
    align-items:baseline;
    padding:8px 0;
}

body.contentpage .downloadItem .btn {
    background-color:#EEE !important;
    font-size:11px !important;
    color: #141414 !important;
    text-transform:none;
    margin:0 !important;
}
.downloadItem .btn:after {
    display:none;
}


/*
body.contentpage h2:before {
    position:absolute;
    background: #3fbdb9;
    width:100%;
    height:100%;
    left:-4px;
    top:0;
    content:"";
    transform: skew(0.5deg, 1.3deg);
    z-index:-1;
}

body.contentpage h2:after{
    position:absolute;
    background-color:#185452;
    width:100%;
    height:100%;
    left:-7px;
    top:1px;
    content:"";
    transform: skew(-0.5deg, -1.3deg);
    z-index:-1;
}
body.contentpage h2 {
    position:relative;
    display:inline-block;
    padding:10px 22px 10px 10px;
    font-weight:normal;
    color:#FFF;
    margin: 10px 0 15px 0;
}
*/

.colwrapcontainer {
    display:flex;
    justify-content : space-around;
    flex-flow       : row wrap;
}

.colwrap {
    flex:1 1 250px;
    min-width:250px;
    margin-right: 20px;
}

.wrapper {
  display       : flex;
  max-width     : 1050px;
  margin        : auto; 
}

#topbar {
  background      : linear-gradient(122deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 28%, rgba(0, 0, 0, 0.11) 28%, rgba(0, 0, 0, 0.11));
  height          : 70px;
  z-index         : 2;
}

  nav {
    display         : flex;
    max-width       : 1050px;
    justify-content : space-between;
    margin          : auto;
  }

    #logo {
      height            : 100px;
      background-image  : url('../images/logo.png');
      background-repeat : no-repeat;
      background-size   : 100px 100px;
      font-weight       : 400;
      color             : #185452;
      cursor            : pointer;
      user-select       : none;
      font-size         : 36px;
      margin-top        : 2px;
      padding-left      : 120px;
      padding-top       : 13px;
      text-decoration   : none;
      display           : block;
    }

    nav ul {
      display     : flex;
      height      : 70px;
      align-items : center;
    }

      nav ul li {
        margin-left   : 35px;
        font-size     : 18px;
        cursor        : pointer;
        user-select   : none;
        height        : 25px;
        line-height   : 25px;
        transition    : 0.2s ease-in-out;
      }

        nav ul li a {
          display         : block;
          text-decoration : none;
          color           : #185452;
          transition      : 0.2s ease-in-out;
          border-bottom   : 2px solid transparent;
        }

          nav ul li a:hover {
            color         : #0f817d;
          }

        nav ul li.selected a {
          color         : #0f817d;
          font-weight   : 400;
          border-bottom : 2px solid #0f817d;
        }

        nav ul li:hover a {
          color         : #0f817d;
          border-bottom : 2px solid #0f817d;          
        }

          nav ul li.selected::after {
            width        : 0;
            height       : 0;
            border-style : solid;
            border-width : 5px 4px 0 4px;
            border-color : #0f817d transparent transparent transparent;
            content      : "";
            top          : 3px;
            position     : relative;
            left         : 50%;
            margin-left  : -4px;
          }

          nav ul li.selected a::after {
            width        : 0;
            height       : 0;
            border-style : solid;
            border-width : 6px 4px 0 4px;
            border-color : #cacacc transparent transparent transparent;
            content      : "";
            position     : relative;
            top          : 28px;
            right        : 50%;
            margin-right : -4px;
            z-index      : 3;
          }

        nav ul li.highlight {
          background-color  : #e4862a;
          font-weight       : 400;
          transform         : skew(-2.6deg, -2.6deg);
          padding-left      : 14px;
          padding-right     : 14px;
          transition        : 0.1s ease-out;
          height            : 35px;
          line-height       : 35px;  
        }

          nav ul li.highlight:hover {
            transform      : skew(2.6deg, 2.6deg);
            padding-top    : 9px;
            padding-bottom : 9px;
            padding-left   : 19px;
            padding-right  : 19px;
            margin-left    : 25px;
          }

          nav ul li.highlight a {
            color           : #FFF;
            transform       : skew(2.6deg, 2.6deg);
            transition      : 0.1s ease-out;
            text-decoration : none;
            border          : none;
          }

            nav ul li.highlight:hover a {
              transform : skew(-2.6deg, -2.6deg);
              text-decoration : none;
              border          : none;
            }

  #navstrike {
    position   : absolute;
    width      : 80%;
    height     : 250px;
    background : linear-gradient(to right, rgba(0, 0, 0, 0.03) 0%,rgba(255, 255, 255, 0) 100%);
    transform  : rotate(6deg);
    top        : -150px;
    z-index    : -1;
  }

header {
  background        : radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.56) 44%, rgba(255, 255, 255, 0) 100%) no-repeat;
  z-index           : 0;
  top               : -70px;
  padding-top       : 70px;
  padding-bottom: 5px;
  margin-bottom     : 80px;
  background-size   : 100% 470px;
}

  header h1 {
    text-align : center;
    padding-left  : 20px;
    padding-right : 20px;
  }

  header h2 {
    line-height : 26px;
    flex-shrink : 1;
  }

    header h2 strong {
      font-weight : 400;
    }

      header h2 small {
        display     : block;
        color       : #4f7a79;
        font-weight : 300;
        font-size   : 18px;
      }

      header h2 small i {
        font-size    : 17px;
        color        : #929394;
        margin-right : 12px;
      }

  .code {
    margin-top      : 80px;
    margin-bottom   : 60px;
    flex-direction  : row;
    justify-content : space-around;
  }

  .code_flex {
    flex           : 1;
    order          : 1;
    margin-left    : 20px;
    margin-right   : 20px;      
  }

    .code_skew {
      background     : #3fbdb9;
      transform      : skew(0.5deg, 1.3deg);
      padding-bottom : 30px;
    }

      .code_unskew {
        background     : #185452;
        transform      : skew(0.5deg, -1.6deg);
        position       : relative;
        top            : 20px;
        left           : -7px;
        padding-bottom : 25px;
      }

      .code_unskew a {
        position: absolute;
        bottom: 15px;
        display: block;
        width: 100%;
        text-align: center;
        color: #fff;
      }

        .code_content {
          padding    : 15px;
          min-height : 200px;
          background : #272822;
          transform  : skew(-1deg, 0.3deg);
          position   : relative;
          top        : 12px;
          left       : 12px;
          color      : #FFFFFF;
          font-family: 'Ubuntu Mono', monospace;
          overflow: hidden;
        }

        .code_content span {
          left: 0;
          transition: left 200ms cubic-bezier(0.99,-0.1, 0, 1.04);
          white-space: pre;
        }

        .code_content span::selection {
          background: #fff;
          color: #000;
        }


  #phones {
    order               : 2;
    flex                : 1;
    margin-top          : -40px;
    position            : relative;
  }
    #phonesframe {
        background-image    : url('../images/phones.png');
        background-size     : contain;
        background-repeat   : no-repeat;
        background-position : center;
        height              : 500px;
        position            : absolute;
        z-index             : 3;
        width               : 100%;
    }

    #phonecontent_container {
        max-width:442px;
        height:471px;
        margin:auto;
        position:relative;
        left:-32px;
    }

    #phonecontent_left,
    #phonecontent_right {
        position : absolute;
        transform-origin: 0px 0px 0px;
        width:160px;
        height:257px;
        background-size     : contain;
        background-repeat   : no-repeat;
        background-position : center;
        background-image    : url('../images/phone_content.png');
    }

    #phonecontent_left {
        z-index : 2;
        transform: matrix3d(0.865179, -0.258535, 0, 0.000615417, 0.756748, 0.970902, 0, -2.34042e-05, 0, 0, 1, 0, 56, 160, 0, 1);
    }

    #phonecontent_right {
        z-index : 1;
        transform: matrix3d(1.00881, 0.0734036, 0, -2.12858e-05, -0.0772174, 1.03449, 0, -2.50996e-05, 0, 0, 1, 0, 304, 63, 0, 1);
    }

  #arrow {
    background-image  : url('../images/arrow.png');
    background-size   : contain;
    background-repeat : no-repeat;
    width             : 164px;
    margin-left       : 24px;
    margin-top        : -14px;
    position          : absolute;
    height            : 50px;
  }

#features {
  background     : #0f817d;
  margin-top     : 40px;
  color          : #FFFFFF;
  position       : relative;
  transform      : skewY(2deg);
  padding-top    : 40px;
  padding-bottom : 40px;
  margin-bottom  : 40px;
}

  #features_content {
    transform       : skewY(-2deg);
    /*justify-content : space-around;*/
    flex-flow       : row wrap;
  }

  #features_left {
    flex    : 2;
    order   : 1;
    margin  : auto;
  }
    #features_content h2 {
        transform           : skewY(2deg);
        background-color    : #3fbdb9;
        box-shadow          : 5px 5px 0px #185452;
        line-height         : 40px;
        width               : 50%;
        margin-top          : -65px;
        margin-left         : 2%;
        color               : #FFF;
        font-size           : 20px;
        text-align          : center;
        padding             : 0 10px;
        position            : absolute;
        font-weight         : normal;
    }

    #features_content h2 strong {
      font-weight : 600;
    }

  #isofeatures {
    background-image    : url('../images/isofeatures.png');
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    height              : 288px;
  }

  #featureslist {
    flex         : 1.5;
    order        : 2;
    margin-right : 10px;
  }
    #featureslist_intro {
        text-align      : right;
        line-height     : 24px;
        margin-top      : 30px;
        margin-bottom   : 30px;
        font-size       : 18px;
        font-weight     : normal;
    }

    #featureslist ul {
      list-style-type : none;
      margin-top      : 40px;
      margin-bottom   : 60px;
      margin-left     : 15px;
      text-align      : right;
    }

    #featureslist li {
      line-height : 26px;
      font-size   : 15px;
      color       : #cddedd;
      font-weight : normal;
    }

#dxcontainer {
    margin:60px auto;
}

#dx {
  padding-bottom  : 40px;
  flex-flow       : row wrap;
  justify-content : space-around;  
}

  #dxvisual_container {
    flex : 1;
    height : 298px;
    margin-left : 20px;
    position:relative;
  }

  #dxvisual,
  #dxvisual_content {
    background-repeat : no-repeat;
    background-position : center;
    background-size   : contain;
    position:absolute;
    width:100%;
    height:100%;
  }

  #dxvisual {
    background-image  : url('../images/dx.png');
    z-index:2;
  }

  #dxvisual_content {
    background-image  : url('../images/dx_content.png');
    z-index:1;
  }


  .itemlist {
    list-style-type : none;
    color           : #185452;
    font-size       : 15px;
    font-weight     : 400;
    position        : relative;
    margin-left     : 20px;
    /*margin-top      : 45px;*/
    flex            : 1;
    margin-right    : 20px;
  }

    .itemlist li {
      margin-bottom : 20px;
      clear         : both;
   }

    .itemlist small {
      color       : #0f817d;
      font-size   : 95%;
      font-weight : 300;
      line-height:25px;
    }

    .itemlist i {
      font-size    : 30px;
      line-height  : 40px;
      width        : 60px;
      text-align   : center;
      float        : left;
    }

    .itemlist div {
      font-size : 16px;
    }

#community {
  transform  : skewY(2deg);
  margin-top : -60px;
  justify-content : center;
}

  #community h3 {
    font-weight : 300;
    text-align  : center;
  }
    #community h3 strong { font-weight : 400; }

  #projects {
    display   : flex;
    flex-flow : column;
  }

  .project {
    text-decoration : none;
    height          : 42px;
    color           : #d1dddc;
    font-size       : 14px;
    line-height     : 42px;
  }

  #proj {
    display         : flex;
    flex-direction  : row;
    margin-top      : 10px;
    justify-content : space-between;
  }

    .spidermonkey {
      background-image    : url('../images/mozilla.png');
      background-size     : 36px 36px;
      background-repeat   : no-repeat;
      background-position : left center;
      padding-left        : 42px;
    }
    .skia {
      background-image    : url('../images/skia.png');
      background-size     : 64px 36px;
      background-repeat   : no-repeat;
      background-position : 50px center;
      padding-right       : 70px;
    }
    .yoga {
      background-image    : url('../images/facebook.png');
      background-size     : 36px 36px;
      background-repeat   : no-repeat;
      background-position : left center;
      padding-left        : 42px;
    }

.block {
  padding-top    : 40px;
  padding-bottom : 40px;
  margin-top     : 45px;
  background     : #FFFFFF;
}
  .block.nobg { background: none; padding:0; margin:0;}

  .block h2 {
    max-width : 1050px;
    margin    : 25px auto;
    padding-left : 25px;
    font-size : 29px;

  }

.top_unskew {
  background    : #185452;
  color         : #FFFFFF; 
  height: 70px;
  padding-top: 40px;
}

#skew_left {
  background : #185452;
  transform  : skewY(-2deg);
  color      : #FFFFFF;
  padding-bottom: 57px;
  margin-top : 70px;
  height     : 60px;
}

#tagline {
}

#intro {
  justify-content : space-between;
  align-items     : center;
  margin          : 60px auto;
}

  #intro p {
    font-size   : 14px;
    line-height : 24px;
    text-align  : justify;
    flex        : 1;
    order       : 1;
    padding-left : 20px;
    padding-right : 20px;

  }

  #more_features {
      flex : 1;
  }
    #more_features h2 {
        margin-top : 0px;
    }

  #video {
    margin-left : 50px;
    background  : #3fbdb9;
    transform   : skew(0deg, 1deg);
    flex        : 1;
    order       : 2;
    padding-bottom: 10px;
    padding-right: 5px;
    margin-right : 20px;
  }
    #video_unskew {
      background  : #185452;   
      transform   : skew(0.5deg, -0.5deg);
      margin-top: 10px;
      margin-left: -7px;
      padding-bottom: 10px;
    }
      #video iframe {
        transform   : skew(-0.5deg, -0.5deg);      
        margin-top  : 15px;
        margin-left : 10px;
        width       : 100%;
        height      : 280px;
      }

.btn {
  display         : block;
  width           : 150px;
  height          : 45px;
  background      : #925a23;
  transform       : skew(-3.2deg, -3.2deg);
  margin-left     : 50px;
  color           : #FFFFFF;
  text-transform  : uppercase;
  text-decoration : none;
  font-weight     : 400;
  font-size       : 15px;
  user-select     : none;
  flex-shrink     : 0;
}
  .btn p {
    transition        : 0.1s ease-out;
  }
  .btn:hover p {
    padding-left:5px;
    padding-top:2px;
  }
  .btn::after {
    width      : 150px;
    height     : 45px;
    background : #e4862a;
    position   : absolute;
    top        : -5px;
    left       : -8px;
    content    : "";
    z-index    : -1;
    transition        : 0.1s ease-out;
  }

  .btn:hover::after {
    top        : -2px;
    left       : -4px;
  }

    .btn.reverse::after {
      background : #3fbdb9;
    }

  .btn p {
    transform  : skew(3.2deg, 3.2deg);
    margin-top : 6px;
  }
    .btn.reverse p {
      transform  : skew(-3.2deg, -3.2deg);
    }

  .btn small {
    font-size   : 15px;
    height      : 30px;
    position    : relative;
    margin-top  : -26px;
    display     : block;
    margin-left : 36px;
  }
  .btn i {
    font-size   : 30px;
    margin-right : 5px;
  }

  .btn.reverse {
    background : #092a29;
    transform  : skew(3.2deg, 3.2deg);    
  }

  .btn.discover {
    text-transform : none;
    width          : 190px;
    height         : 60px;
    line-height    : 20px;
    float:right;
  }

  .btn.discover::after {
    width          : 190px;
    height         : 60px;
  }
    .btn.discover i {
        line-height:33px;
    }

    .btn.discover small {
      text-align   : center;
      margin-left  : 12px;
      margin-top   : -34px;
      margin-right : 2px;
    }

#eye {
  width             : 166px;
  height            : 55px;
  background-image  : url('../images/eye.png');
  background-size   : 166px 55px;
  background-repeat : no-repeat;
  position          : absolute;
  right             : 100px;
  top               : -50px;
}
  #pupil {
    width             : 21px;
    height            : 15px;
    background-image  : url('../images/pupil.png');
    background-size   : 21px 15px;
    background-repeat : no-repeat;
    position          : relative;
    left              : 81px;
    top               : 27px;
  }

#forkus {
  transform   : rotate(-45deg);
  margin-top  : 4px;
}

#fork {
  width      : 262px;
  height     : 50px;
  background : #e4862a;
  transform  : skew(45deg);
  font-size  : 16px;
  color      : #FFFFFF;
}

  #forkbefore { 
    position   : absolute;
    background : #925a23;
    width      : 30px;
    height     : 9px;
    transform  : skew(-45deg, 45deg);
    top        : 5px;
    left       : -20px;
    z-index    : -1;
  }

  #forkafter { 
    position   : absolute;
    background : #925a23;
    width      : 20px;
    height     : 9px;
    transform  : skew(-45deg, 45deg);
    right      : -19px;
    top        : 40px;
    z-index    : -1;
  }

  #github {
    padding-left    : 42px;
    display         : block;
    height          : 40px;
    transform       : skew(-45deg);
    line-height     : 40px;
    color           : #FFFFFF;
    text-decoration : none;
    padding-top     : 4px;
  }

  #github i {
    font-size: 39px;
  }

  #github small {
    position: absolute;
    margin-left : 10px;
    margin-top : 1px;
    font-size: 16px;
  }

footer {
  margin-top  : 100px;
  padding-top : 30px;
  background  : #FFFFFF;
  min-height  : 250px;
}

  #tentacle {
    background-image  : url('../images/tentacle.png');
    background-size   : 198px 354px;
    background-repeat : no-repeat;
    width             : 198px;
    height            : 354px;
    position          : absolute;
    margin-top        : -104px;
    margin-left       : 15%;
  }

  body.contentpage footer {
      border-top : 3px solid #3fbdb9;
  }

  body.contentpage #tentacle {
      display : none;
  }

  #footer {
      display           : flex;
      justify-content   : center;
      margin-top        : 25px;
  }

  .footer {
    display         : flex;
    flex-flow       : column wrap;
    list-style-type : none;
    align-items     : baseline;
    justify-content : space-between; 
    max-width       : 530px;
    /*padding         : 0 20px;*/
  }

    .footer li {
      font-size       : 18px;
      color           : #4c4c4c;
      text-decoration : none;
      width           : 150px;
      text-align      : center;
    }


      #footer li a {
        text-decoration : none;
        color           : #4c4c4c;
      }

      #footer small {
        font-size   : 12px;
        line-height : 12px;
      }

  #logowhite {
    display           : block;
    background-image  : url('../images/logowhite.png');
    background-size   : 80px;
    background-repeat : no-repeat;
    background-position : center 36px;
    color               : #185452;
    font-size           : 25px;
    font-weight         : 500;
    text-align          : center;
    text-decoration     : none;
  }

    #logowhite small {
        font-size   :50%;
        display:block;
        margin-top:105px;
        font-style  : italic;
        color       : #AAA;
        font-weight :normal;
    }

  #copy {
    font-size  : 11px;
    margin-top : 40px;
    text-align : center;
  }
    #copy a { color : #0f817d; }

#mobilenav {
  display : none;
  font-size: 30px;
  height: 70px;
  line-height: 70px;
  margin-right: 20px;
  color: #185452;
  cursor: pointer;
}

/* 4k/retina images */
@media (min-resolution: 1.5dppx) {

  #logo {
    background-image : url('../images/logo@2x.png');
  }

  #phonesframe {
    background-image : url('../images/phones@2x.png?foo');
  }

  #phones_tentacles {
    background-image : url('../images/phones_tentacles@2x.png');
  }

  #arrow {
    background-image : url('../images/arrow@2x.png');
  } 

  #eye {
    background-image : url('../images/eye@2x.png');
  }

  #pupil {
    background-image : url('../images/pupil@2x.png');
  }

  #isofeatures {
    background-image : url('../images/isofeatures@2x.png');
  }

  #dxvisual {
    background-image : url('../images/dx@2x.png');
  }

  .yoga {
    background-image : url('../images/facebook@2x.png');
  }

  .spidermonkey {
    background-image : url('../images/mozilla@2x.png');
  }

  .skia {
    background-image : url('../images/skia@2x.png');
  } 

  #tentacle {
    background-image : url('../images/tentacle@2x.png');
  } 

  #logowhite {
    background-image : url('../images/logowhite@2x.png');
  } 

  /*
  #phonecontent_left,
  #phonecontent_right {
      width:321px;
      height:514px;
      background-size     : contain;
      background-repeat   : no-repeat;
      background-position : center;
      background-image    : url('../images/phone_content@2x.png');
  }
  */


  #dxvisual_content {
    background-image  : url('../images/dx_content@2x.png');
  }
}


/* Small resolutions */
@media (max-width: 992px) {

 body.contentpage #content_wrapper {
    margin      : 30px auto 0 auto;
    width       : 95%;
 }

 .footer li {
    font-size:14px;
 }
 #logo {
    height          : 70px;
    background-size : 60px 60px;
    margin-top      : 4px;
    padding-left    : 70px;
    margin-left     : 16px;
  }

  header { 
    background-size   : 100% 300px;
    padding-top       : 30px;
  }

  #mobilenav { display : block; }

    nav ul {
      display      : none;
      position     : absolute;
      height       : auto;
      background   : #0f817d;
      right        : 60px;
      top          : 20px;
      padding      : 20px 30px 20px 30px;
      text-align   : center;
      z-index      : 1;
      box-shadow   : 0px 0px 6px 3px rgba(0,0,0,0.10);
    }

      nav ul li {
        display       : block;
        margin-left   : 0;
        font-size     : 20px;
        cursor        : pointer;
        user-select   : none;
        height        : 60px;
        line-height   : 60px;
        transition    : none;
        font-weight   : 300;
      }

        nav ul li a {
          display         : block;
          text-decoration : none;
          color           : #FFFFFF;
          transition      : none;
          border-bottom   : none;
        }

          nav ul li a:hover {
            color           : #FFFFFF;
            text-decoration : underline;
          }

        nav ul li.selected a {
          color         : #141414;
          font-weight   : 400;
          border-bottom : none;
        }

        nav ul li:hover a {
          color         : #FFFFFF;
          border-bottom : none;          
          text-decoration : underline;
        }

          nav ul li.selected::after {
            display : none;
          }

          nav ul li.selected a::after {
            display : none;
          }

        nav ul li.highlight {
          border        : none;
          font-weight   : 600;
          text-decoration:underline;
          transform     : none;
          padding-left  : 0;
          padding-right : 0;
          transition    : none;
          height        : 60px;
          background-color : transparent;
          line-height   : 60px;  
        }

          nav ul li.highlight:hover {
            transform      : none;
            padding-top    : 0;
            padding-bottom : 0;
            padding-left   : 0;
            padding-right  : 0;
            margin-left    : 0;
            border         : none;
          }
            nav ul li.highlight:hover a {
              transform : none;
              border    : none;
              color     : #FFFFFF;
            }

          nav ul li.highlight a {
            color      : #e4862a;
            transform  : none;
            transition : none;
          }

            nav ul li.highlight a:hover {
              transform : none;
            }

  .code_content { font-size : 12px; }

  .code {
    flex-flow  : column wrap;
    margin-top : 20px;
  }

  .code_flex {
    order : 2;
  }

  #phones {
    order  : 1;
    margin : 0 40px 10px 20px;
  }

  #arrow {
    display : none;
  }

  #tagline {
    flex-flow : column wrap;
    margin    : 40px 25px 40px 25px;
  }

    #tagline .btn { margin : 25px auto; }

    #tagline h2 { text-align : center; }

  #features {
    padding-left  : 20px;
    padding-right : 20px;
  }

    #features_left {
        margin : 50px 0;
    }

  #features_content {
    flex-flow : column wrap;
  }

  #features_content h2 {
      line-height         : 30px;
      width               : 50%;
      font-size           : 18px;
      text-align          : center;
  }

  #featureslist_intro {
      text-align : center;
      width:70%;
      margin:20px auto 20px auto;
  }

  .btn.discover {
      margin    : 0 auto;
      float     : none;
  }
    .btn.discover i {
        line-height : 40px;
    }

  #featureslist ul {
    display   : flex; 
    flex-flow : row wrap;
    margin-left : 10%;
  }

  #featureslist li {
    width         : 45%;
    text-align    : center;
    margin-bottom : 25px;
    margin-right  : 2%;
  }
    #featureslist li:before {
        content: "";
    }

  #intro {
    flex-flow   : column wrap;
    align-items : stretch;
  }

    #intro p {
      order      : 2;
      margin-top : 30px;
      text-align : center;
    }
    
    #video {
      order       : 1;
      margin-left : 20px;
    }

    #video iframe {
      height : 480px;
    }

    #dx {
      flex-flow : column wrap;
    }

  .block h2 { text-align : center; }

  .itemlist {
      width     : 100%;
      margin    : 25px auto;
      display   : flex;
      flex-flow : row wrap;
      justify-content:  space-between; 
  }

  .itemlist li {
    text-align : center;
    width      : 50%;
  }

  .itemlist i {
    font-size    : 25px;
    float        : none;
  }

  .itemlist li small {
    display    : block;
    margin-top : 6px;
  }

  #forkus { display: none; }

  #tentacle { margin-left : 5px; }

}

@media (max-width: 672px) {
  #video iframe { height: 360px; }
}
@media (max-width: 492px) {
  #video iframe { height: 260px; }

  #proj a {
      background-size:30px;
  }

  .skia {
      padding-right : 35px;
  }

  #proj  {
      margin-left : 10px;
      margin-right : 10px;
  }

  #features_content h2 {
      margin-left   : auto;
      margin-right  : auto;
      width         : 95%;
      text-align    : center;
      margin-bottom : 10px;
  }

  #features_left {
    margin              :20px 0 0 0;
  }

  header {
      margin-bottom : 0px;
  }

  #featureslist ul {
      margin-bottom : 20px;
  }

  #eye {
      display : none;
  }
}
@media (max-width: 360px) {
  #video iframe { height: 180px; }
  #features_left h2 {
      font-size     : 15px;
      line-height   : 24px;
      margin-bottom : 0px;
  }
}

/* Mobile */
@media (max-width: 709px) {

  .itemlist li {
    width         : 100%;
    text-align    : center;
    margin-bottom : 30px;
  }

  #tentacle { display : none; }

  #footer {
  }

}

/* Oldschool */
@media (max-width: 375px) {

  h1 { font-size : 20px; }

  #footer #logowhite {
      display:none;
  }

  #footer li {
      line-height:25px;
  }
  #copy {
      width:80%;
      margin:20px auto;
      display:block;
  }

  #phones {
    height : 250px;
    margin : 0 20px 0 0;
  }

}