html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    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:before,blockquote:after,q:before,q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
body {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16pt;
    line-height: 26px;
    position: relative;
    padding: 0
}
h1,h2,h3,h5 {
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
h4,h6 {
    color: #FFF;
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    font-weight: inherit
}
h1 {
    font-size: 66px;
    line-height: 70px;
    margin-bottom: 20px
}
h2 {
    font-size: 35px;
    line-height: 40px;
    letter-spacing: 2px;
    margin-top: 30px;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #F84E3D
}
h3 {
    font-size: 35px;
    line-height: 40px;
    margin-bottom: 10px
}
h4 {
    font-size: 32px;
    line-height: 46px;
    margin-bottom: 20px
}
h5 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px
}
h6 {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 20px
}
p {
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 10px 0
}
p img {
    margin: 0
}
p.lead {
    font-size: 21px;
    line-height: 35px;
    color: #000
}
em {
    font-style: italic
}
strong {
    font-weight: bold
}
small {
    font-size: 80%
}
blockquote,blockquote p {
    font-family: 'Archer SSm A', 'Archer SSm B';
    font-weight: 500;
    font-style: italic;
    font-size: 36px;
    line-height: 45px
}
blockquote {
    margin: 0 0 0
}
blockquote cite {
    display: block;
    font-size: 12px;
    color: #555
}
blockquote cite:before {
    content: "\2014 \0020"
}
blockquote cite a,blockquote cite a:visited,blockquote cite a:visited {
    color: #555
}
hr {
    border: solid #ddd;
    border-width: 0 0 1px;
    clear: both;
    margin: 0px 0 30px;
    height: 0
}
a,a:visited {
    color: #333;
    text-decoration: underline;
    outline: 0
}
a:hover,a:focus {
    color: #000
}
p a,p a:visited {
    line-height: inherit
}
ul,ol {
    margin-bottom: 20px
}
ul {
    list-style: none outside
}
ol {
    list-style: decimal
}
ol,ul.square,ul.circle,ul.disc {
    margin-left: 30px
}
ul.square {
    list-style: square outside
}
ul.circle {
    list-style: circle outside
}
ul.disc {
    list-style: disc outside
}
ul ul,ul ol,ol ol,ol ul {
    margin: 4px 0 5px 30px;
    font-size: 90%
}
ul ul li,ul ol li,ol ol li,ol ul li {
    margin-bottom: 6px
}
li {
    line-height: 18px;
    margin-bottom: 12px
}
ul.large li {
    line-height: 21px
}
li p {
    line-height: 21px
}
img.scale-with-grid {
    max-width: 100%;
    height: auto
}
.button,button,input[type="submit"],input[type="reset"],input[type="button"] {
    background: #b11f24;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 24px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    padding-top: 1px
}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover {
    background: #911c14
}
.button.full-width,button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center
}
button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}
form {
    margin-bottom: 20px
}
fieldset {
    margin-bottom: 20px
}
input[type="text"],input[type="password"],input[type="email"],textarea,select {
    border: 1px solid #ccc;
    padding: 6px 4px;
    outline: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    margin: 0;
    width: 210px;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    background: #fff
}
select {
    padding: 0
}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus {
    border: 1px solid #aaa;
    color: #444;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    box-shadow: 0 0 3px rgba(0,0,0,0.2)
}
textarea {
    min-height: 60px
}
label,legend {
    display: block;
    font-weight: bold;
    font-size: 13px
}
select {
    width: 220px
}
input[type="checkbox"] {
    display: inline
}
label span,legend span {
    font-weight: normal;
    font-size: 13px;
    color: #444
}
@media (min-width: 768px) {
    body {
        padding: 0;
        font-size: 20pt;
        line-height: 52px
    }
    h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
        font-weight: inherit
    }
    h1 {
        font-size: 100px;
        line-height: 100px;
        margin-top: 30px;
        margin-bottom: 20px
    }
    h2 {
        font-size: 70px;
        line-height: 76px;
        margin-bottom: 20px
    }
    h3 {
        font-size: 42px;
        line-height: 40px;
        margin-bottom: 10px
    }

}
.container {
    position: relative;
    width: 280px;
    margin: 0 auto;
    padding: 0
}
.container .column,.container .columns {
    float: left;
    display: inline;
    margin: 0
}
.row {
    margin-bottom: 20px
}
@media (max-width: 479px) {
    .container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .one-third.column,.container .two-thirds.column {
        width: 280px
    }

}
@media (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 420px
    }
    .container .one.column,.container .one.columns,.container .two.columns,.container .three.columns,.container .four.columns,.container .five.columns,.container .six.columns,.container .seven.columns,.container .eight.columns,.container .nine.columns,.container .ten.columns,.container .eleven.columns,.container .twelve.columns,.container .one-third.column,.container .two-thirds.column {
        width: 420px
    }

}
@media (min-width: 768px) and (max-width: 1079px) {
    .container {
        width: 744px
    }
    .container .column,.container .columns {
        margin-left: 12px;
        margin-right: 11px
    }
    .column.alpha,.columns.alpha {
        margin-left: 0;
        margin-right: 11px
    }
    .column.omega,.columns.omega {
        margin-right: 0;
        margin-left: 12px
    }
    .alpha.omega {
        margin-left: 0;
        margin-right: 0
    }
    .container .one.column,.container .one.columns {
        width: 39px
    }
    .container .two.columns {
        width: 101px
    }
    .container .three.columns {
        width: 163px
    }
    .container .four.columns {
        width: 225px
    }
    .container .five.columns {
        width: 287px
    }
    .container .six.columns {
        width: 349px
    }
    .container .seven.columns {
        width: 411px
    }
    .container .eight.columns {
        width: 473px
    }
    .container .nine.columns {
        width: 535px
    }
    .container .ten.columns {
        width: 597px
    }
    .container .eleven.columns {
        width: 659px
    }
    .container .twelve.columns {
        width: 721px
    }
    .container .one-third.column {
        width: 2225px
    }
    .container .two-thirds.column {
        width: 473px
    }
    .container .offset-by-one {
        padding-left: 62px
    }
    .container .offset-by-two {
        padding-left: 124px
    }
    .container .offset-by-three {
        padding-left: 186px
    }
    .container .offset-by-four {
        padding-left: 248px
    }
    .container .offset-by-five {
        padding-left: 310px
    }
    .container .offset-by-six {
        padding-left: 372px
    }
    .container .offset-by-seven {
        padding-left: 434px
    }
    .container .offset-by-eight {
        padding-left: 496px
    }
    .container .offset-by-nine {
        padding-left: 558px
    }
    .container .offset-by-ten {
        padding-left: 620px
    }
    .container .offset-by-eleven {
        padding-left: 682px
    }

}
@media (min-width: 1080px) {
    .container {
        width: 1032px
    }
    .container .column,.container .columns {
        margin-left: 16px;
        margin-right: 16px
    }
    .column.alpha,.columns.alpha {
        margin-left: 0
    }
    .column.omega,.columns.omega {
        margin-right: 0
    }
    .container .one.column,.container .one.columns {
        width: 54px
    }
    .container .two.columns {
        width: 140px
    }
    .container .three.columns {
        width: 226px
    }
    .container .four.columns {
        width: 312px
    }
    .container .five.columns {
        width: 398px
    }
    .container .six.columns {
        width: 484px
    }
    .container .seven.columns {
        width: 570px
    }
    .container .eight.columns {
        width: 656px
    }
    .container .nine.columns {
        width: 742px
    }
    .container .ten.columns {
        width: 828px
    }
    .container .eleven.columns {
        width: 914px
    }
    .container .twelve.columns {
        width: 1000px
    }
    .container .one-third.column {
        width: 312px
    }
    .container .two-thirds.column {
        width: 656px
    }
    .container .offset-by-one {
        margin-left: 86px
    }
    .container .offset-by-two {
        margin-left: 172px
    }
    .container .offset-by-three {
        margin-left: 258px
    }
    .container .offset-by-four {
        margin-left: 344px
    }
    .container .offset-by-five {
        margin-left: 430px
    }
    .container .offset-by-six {
        margin-left: 516px
    }
    .container .offset-by-seven {
        margin-left: 602px
    }
    .container .offset-by-eight {
        margin-left: 688px
    }
    .container .offset-by-nine {
        margin-left: 774px
    }
    .container .offset-by-ten {
        margin-left: 860px
    }
    .container .offset-by-eleven {
        margin-left: 946px
    }

}
.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
.clearfix:before,.clearfix:after,.row:before,.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}
.row:after,.clearfix:after {
    clear: both
}
.row,.clearfix {
    zoom: 1
}
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}
.highlight .c {
    color: #94936D;
    font-style: italic
}
.highlight .err {
    color: #B11F24;
    background-color: #e3d2d2
}
.highlight .k {
    font-weight: bold
}
.highlight .o {
    font-weight: bold
}
.highlight .cm {
    color: #94936D;
    font-style: italic
}
.highlight .cp {
    color: #989791;
    font-weight: bold
}
.highlight .c1 {
    color: #94936D;
    font-style: italic
}
.highlight .cs {
    color: #989791;
    font-weight: bold;
    font-style: italic
}
.highlight .gd {
    color: #000000;
    background-color: #fdd
}
.highlight .gd .x {
    color: #000000;
    background-color: #faa
}
.highlight .ge {
    font-style: italic
}
.highlight .gr {
    color: #a00
}
.highlight .gh {
    color: #989791
}
.highlight .gi {
    color: #000000;
    background-color: #dfd
}
.highlight .gi .x {
    color: #000000;
    background-color: #afa
}
.highlight .go {
    color: #87877A
}
.highlight .gp {
    color: #5A594C
}
.highlight .gs {
    font-weight: bold
}
.highlight .gu {
    color: #A6A599
}
.highlight .gt {
    color: #a00
}
.highlight .kc {
    font-weight: bold
}
.highlight .kd {
    font-weight: bold
}
.highlight .kp {
    font-weight: bold
}
.highlight .kr {
    font-weight: bold
}
.highlight .kt {
    color: #599CC6;
    font-weight: bold
}
.highlight .m {
    color: #375789
}
.highlight .s {
    color: #e45d50
}
.highlight .na {
    color: #67B5C1
}
.highlight .nb {
    color: #0086B3
}
.highlight .nc {
    color: #599CC6;
    font-weight: bold
}
.highlight .no {
    color: #67B5C1
}
.highlight .ni {
    color: #4F1E61
}
.highlight .ne {
    color: #C77023;
    font-weight: bold
}
.highlight .nf {
    color: #C77023;
    font-weight: bold
}
.highlight .nn {
    color: #5A594C
}
.highlight .nt {
    color: #6756A0
}
.highlight .nv {
    color: #67B5C1
}
.highlight .ow {
    font-weight: bold
}
.highlight .w {
    color: #B5B4A8
}
.highlight .mf {
    color: #375789
}
.highlight .mh {
    color: #375789
}
.highlight .mi {
    color: #375789
}
.highlight .mo {
    color: #375789
}
.highlight .sb {
    color: #e45d50
}
.highlight .sc {
    color: #e45d50
}
.highlight .sd {
    color: #e45d50
}
.highlight .s2 {
    color: #e45d50
}
.highlight .se {
    color: #e45d50
}
.highlight .sh {
    color: #e45d50
}
.highlight .si {
    color: #e45d50
}
.highlight .sx {
    color: #e45d50
}
.highlight .sr {
    color: #459A6F
}
.highlight .s1 {
    color: #e45d50
}
.highlight .ss {
    color: #BF2F61
}
.highlight .bp {
    color: #989791
}
.highlight .vc {
    color: #67B5C1
}
.highlight .vg {
    color: #67B5C1
}
.highlight .vi {
    color: #67B5C1
}
.highlight .il {
    color: #375789
}
.highlight .gc {
    color: #999;
    background-color: #EAF2F5
}
body {
    padding-bottom: 170px
}
i {
    font-style: italic
}
a:hover,a:focus {
    color: #fff;
    border-bottom: 1px solid #fff
}
a.button:hover {
    border: 0;
    cursor: pointer
}
a,a:visited {
    color: #fff;
    text-decoration: none;
    font-weight: 500
}
p.last {
    margin-bottom: 36px
}
p.pull.last {
    margin-bottom: 30px
}
span.amp {
    font-family: "Baskerville", "Times", "Times New Roman", serif;
    font-style: italic;
    font-size: 16pt
}
span.apos {
    font-size: 200%;
    color: #97cadf;
    display: block;
    position: absolute;
    margin-left: -35px
}
.footer {
    position: absolute;
    bottom: 0;
    height: 170px;
    width: 100%
}
.footer .container {
    position: absolute;
    bottom: 0;
    padding-left: 50%;
    margin-left: -140px;
    text-align: center
}
.footer a {
    color: #F84E3D;
    border: none
}
.footer .email {
    display: block;
    font-size: 22px;
    padding-bottom: 18px
}
.footer #phone-icon {
    position: relative
}
.footer .social {
    margin-bottom: 0;
    text-align: center
}
.footer .social li {
    display: inline;
    margin-right: 33px
}
.footer .social li:last-child {
    margin-right: 0px
}
.footer .social li a:hover {
    border: none
}
.footer .social svg {
    vertical-align: middle
}
.footer .social .icon {
    fill: #F84E3D
}
.footer .copyright {
    color: #F84E3D;
    font-size: 14px;
    letter-spacing: .5px;
    padding: 10px 0 18px 0;
    margin: 0;
    clear: both;
    text-align: center
}
span#dingusburger {
    display: block;
    width: 40px;
    height: 52px;
    background: url("../img/hamburger.png") no-repeat 50% 50%;
    z-index: 9000;
    position: absolute;
    top: 0px;
    left: 0px
}
div.navigation {
    opacity: 1;
    background: rgba(106, 157, 193, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    -webkit-transform: translate(0, 0);
    -webkit-transition: -webkit-transform .2s
}
div.navigation.hidden {
    opacity: 0;
    -webkit-transform: translate(0, -68px);
    -webkit-transition: -webkit-transform .2s, opacity 0 .3s
}
div.navigation p {
    text-indent: -9999px;
    font-size: 14px;
    line-height: 32px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 0 10px;
    padding: 10px 48px;
    z-index: 2000
}
div.navigation ul {
    position: absolute;
    margin: 0;
    top: 52px;
    right: 0px;
    background: rgba(106, 157, 193, 0.9);
    width: 100%;
    padding-bottom: 10px;
    padding-top: 8px;
    display: none
}
div.navigation ul li {
    margin: 0 18px 0 0;
    display: block;
    padding: 10px 20px
}
div.navigation ul li a,div.navigation ul li a:visited {
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase
}
div.navigation ul li.selected a,div.navigation ul li.selected a:hover,div.navigation ul li.selected a:visited {
    xcolor: #97cadf;
    border-bottom: 2px solid #fff;
}
div.navigation ul li a:hover {
    border-bottom-width: 2px
}
.solid-btn {
    display: block;
    font-size: 24px;
    line-height: 58px;
    font-weight: 300;
    border-radius: 3px;
    width: 258px;
    height: 54px;
    background-color: #323132;
    margin: 20px auto;
    text-align: center
}
.solid-btn:hover {
    border: none;
    cursor: pointer
}
.transparent-btn {
    display: block;
    font-size: 24px;
    line-height: 46px;
    font-weight: 300;
    border: 2px solid #fff;
    border-radius: 3px;
    width: 258px;
    height: 42px;
    margin: 22px auto;
    text-align: center
}
.transparent-btn:hover {
    border: 2px solid #fff
}
.modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s ease-in
}
.modal-dialog.active {
    visibility: visible;
    opacity: 1
}
.modal-dialog .modal-content {
    position: relative;
    width: 280px;
    height: 166px;
    margin: 68px auto 0 auto;
    background: #000
}
.modal-dialog .modal-content .close {
    position: absolute;
    right: -14px;
    top: -14px;
    background-color: #000;
    border-radius: 20px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
    height: 25px;
    width: 25px;
    text-decoration: none;
    text-align: center;
    z-index: 500;
    cursor: pointer
}
.modal-dialog .modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.show-on-lg-screen,.show-on-largest-screen {
    display: none !important
}

@media (min-width: 480px) {
    .modal-dialog .modal-content {
        width: 420px;
        height: 237px
    }
    .footer .container {
        margin-left: -210px
    }
}
@media (min-width: 768px) {
    body {
        letter-spacing: 0.12px;
        padding-bottom: 120px
    }
    p.last {
        margin-bottom: 52px
    }
    .modal-dialog .modal-content {
        width: 720px;
        height: 400px
    }
    .show-on-sm-screen {
        display: none !important
    }
    .show-on-lg-screen {
        display: block !important
    }
    span.amp {
        font-size: 130%
    }
    .footer {
        height: 120px
    }
    .footer .container {
        margin-left: -372px
    }
    .footer .email {
        display: inline;
        font-size: 27px;
        padding-top: 8px;
        margin-right: 33px
    }
    .footer .social {
        display: inline
    }
    .footer .copyright {
        padding-top: 0
    }
    span#dingusburger {
        display: none
    }
    div.navigation p {
        text-indent: 0;
        margin-left: 32px;
        padding: 18px 48px;
        background-position: 0 12px
    }
    div.navigation ul {
        display: block;
        top: 8px;
        padding: 0;
        width: auto;
        background: transparent
    }
    div.navigation ul li {
        display: inline-block;
        padding: 0
    }
    div.navigation ul li a,div.navigation ul li a:visited {
        font-size: 18px
    }
    .solid-btn {
        width: 282px;
        margin-top: 10px
    }
}
@media (min-width: 1080px) {
    .modal-dialog .modal-content {
        width: 920px;
        height: 520px
    }
    .show-on-largest-screen {
        display: block !important
    }
    .container .lg-five.columns {
        width: 398px
    }
    .container .lg-seven.columns {
        width: 570px
    }
    .footer .container {
        margin-left: -516px
    }
    .transparent-btn {
        width: 310px;
        height: 60px;
        line-height: 64px;
        margin-bottom: 12px
    }
}
.product {
    background-color: #fff
}
section.product h1 {
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 62px;
    line-height: 62px;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 2px
}
section.product h2 {
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 36px;
    color: #323132;
    text-transform: uppercase;
    margin-bottom: 20px
}
section.product h3 {
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 28px;
    color: #323132;
    margin-top: 10px;
    margin-bottom: 16px
}
section.product h4 {
    font-size: 24px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: .5px;
    color: #fff;
    text-align: center;
    margin-bottom: 40px
}
section.product h5 {
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    margin: 0
}
section.product p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: #fff
}
.product strong {
    font-weight: 500
}
.product .available {
    padding-bottom: 30px;
    width: 280px;
    margin: 0 auto
}
.product .available span {
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    line-height: 27px;
    letter-spacing: .4px
}
.product .available a {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    font-weight: normal;
    color: rgba(255,255,255,0.5)
}
.product .available a:hover {
    color: #fff;
    border-color: #fff
}
.product.header {
    color: #fff;
    background-color: #000;
    padding-top: 90px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: 0 0
}
.product.header h1 {
    padding-top: 134px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 110px auto
}
.product.header p {
    letter-spacing: .5px;
    line-height: 21px
}
.product#details {
    background: #fff;
    padding-top: 60px
}
.product#details p {
    color: #a8a8a8;
    line-height: 24px;
    margin-bottom: 50px
}
.product#features {
    background: #3293e2;
    padding: 90px 0 44px 0
}
.product .feature {
    background-repeat: no-repeat;
    background-position: 0 3px
}
.product .feature p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 40px
}
.product#purchase {
    background-size: cover;
    text-align: center;
    padding-top: 50px
}
.product#purchase h2 {
    padding-top: 116px;
    margin: 0
}
.product#purchase p {
    color: #323132;
    padding-bottom: 70px;
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 0
}
.product#purchase .available {
    padding-bottom: 80px
}
.product#purchase .available span {
    color: #323132
}
.product#purchase #apple .icon {
    fill: #323132
}
.product a.release-notes {
    color: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.5);
    font-size: 14px
}
@media (min-width: 480px) {
    .product.header {
        padding-top: 70px
    }
    .product.header h1 {
        padding: 23px 0 21px 138px;
        margin-left: 25px;
        letter-spacing: 1px;
        text-align: left;
        background-position: left center;
        background-size: 128px auto
    }
    .product.header p {
        padding-top: 2px
    }
    .product.header .transparent-btn {
        margin-top: 20px;
        margin-bottom: 12px
    }
    .product.header .available {
        padding-bottom: 50px
    }
    .product#details {
        padding-top: 30px
    }
    .product#features {
        padding-top: 74px
    }
    .product .feature p {
        margin-bottom: 20px
    }
}
@media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) {
    .product.header h1 {
        background-position: left center;
        background-size: 128px auto
    }

}
@media (min-width: 768px) {
    section.product h3 {
        font-size: 28px;
        line-height: 40px;
        margin-top: 10px
    }
    section.product h4 {
        font-size: 42px;
        line-height: 52px;
        padding-top: 90px
    }
    section.product h5 {
        font-size: 21px;
        line-height: 24px
    }
    section.product p {
        font-size: 18px
    }
    .product.header {
        padding-top: 115px
    }
    .product.header h1 {
        padding: 166px 0 0 0;
        margin-left: 0;
        text-align: center;
        background-position: center top
    }
    .product.header p {
        padding-top: 4px;
        padding-bottom: 28px
    }
    .product.header .available {
        margin-top: 12px;
        padding-bottom: 70px
    }
    .product#features {
        padding-top: 70px;
        padding-bottom: 60px
    }
    .product#features p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 48px
    }
    .product .feature {
        width: 480px;
        margin: 0 auto;
        padding-left: 115px
    }
    .product#purchase {
        padding-top: 76px
    }
    .product#purchase h2 {
        font-size: 46px;
        line-height: 52px;
        letter-spacing: 0
    }
}
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) {
    .product.header h1 {
        background-position: center top
    }
}
@media (min-width: 1080px) {
    section.product h1 {
        font-size: 100px;
        line-height: 100px
    }
    section.product h3 {
        font-size: 42px;
        line-height: 52px
    }
    section.product h4 {
        padding-top: 64px
    }
    section.product p {
        font-size: 24px;
        line-height: 24px
    }
    .product.header {
        z-index: 500;
        padding-top: 85px
    }
    .product.header h1 {
        background-size: 184px 153px;
        padding-top: 180px
    }
    .product.header .available {
        padding-bottom: 60px
    }
    .product#details p {
        font-size: 18px
    }
    .product#features {
        padding-top: 100px
    }
    .product#features ul {
        float: left;
        padding-left: 74px
    }
    .product .feature {
        width: 330px
    }
    .product#purchase {
        padding-top: 96px
    }
    .product#purchase .available {
        margin-bottom: 55px
    }
    .product.screenshot .hotspot {
        position: absolute;
        width: 22px;
        height: 22px;
        cursor: pointer;
        opacity: 1;
        transition: opacity .5s ease;
        z-index: 100
    }
    .product.screenshot .hotspot:before {
        content: '';
        position: absolute;
        top: 5px;
        left: 5px;
        width: 12px;
        height: 12px;
        background-color: #fdea20;
        border-radius: 50%;
        box-shadow: 0px 2px 4px #666
    }
    .product.screenshot .hotspot:after {
        content: '';
        position: absolute;
        top: -9px;
        left: -9px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 5px solid #fdea20;
        opacity: 0;
        animation: blip 2s ease-in-out infinite;
        -webkit-animation: blip 2s ease-in-out infinite
    }
    .product.screenshot .hotspot.visited:before {
        background-color: #BCAF15
    }
    .product.screenshot .hotspot.visited:after {
        border-color: transparent
    }
    @-webkit-keyframes blip {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.1)
        }
        1% {
            opacity: .6;
            -webkit-transform: scale(0.1)
        }
        60% {
            opacity: 0;
            -webkit-transform: scale(1)
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1)
        }

    }
    @keyframes blip {
        0% {
            opacity: 0;
            transform: scale(0.1)
        }
        1% {
            opacity: .6;
            transform: scale(0.1)
        }
        60% {
            opacity: 0;
            transform: scale(1)
        }
        100% {
            opacity: 0;
            transform: scale(1)
        }

    }
    .product.screenshot .hotspot.delay1:after {
        -webkit-animation-delay: .1s;
        animation-delay: .1s
    }
    .product.screenshot .hotspot.delay2:after {
        -webkit-animation-delay: .2s;
        animation-delay: .2s
    }
    .product.screenshot .hotspot.delay3:after {
        -webkit-animation-delay: .3s;
        animation-delay: .3s
    }
    .product.screenshot .hotspot.delay4:after {
        -webkit-animation-delay: .4s;
        animation-delay: .4s
    }
    @-webkit-keyframes glow {
        0% {
            opacity: 1
        }
        100% {
            opacity: .4
        }

    }
    @keyframes glow {
        0% {
            opacity: 1
        }
        100% {
            opacity: .4
        }

    }
    .product.screenshot .hotbutton {
        position: absolute;
        width: 35px;
        height: 17px;
        cursor: pointer;
        border: 1px solid #fdea20;
        box-shadow: 0px 0px 10px #fdea20, 0px 0px 10px #fdea20;
        -webkit-animation: glow 2s ease-in-out 0 infinite alternate;
        animation: glow 2s ease-in-out 0 infinite alternate
    }
    .product.screenshot .features-popup {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        color: white;
        background-color: #000;
        width: 250px;
        border-radius: 5px;
        border: 1px solid #3293e2;
        transition: opacity .5s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.5)
    }
    .product.screenshot .features-popup .title {
        margin: 7px 10px 2px 10px;
        font-size: 14px;
        line-height: 28px;
        font-weight: 500;
        color: white;
        text-align: left;
        display: block
    }
    .product.screenshot .features-popup .desc {
        width: 230px;
        text-align: left;
        margin-left: 10px;
        margin-bottom: 14px;
        font-size: 14px;
        line-height: 18px;
        display: block
    }
    .product.screenshot .features-popup.popped {
        opacity: 1
    }
    .product.screenshot .features-popup .arrow {
        position: absolute;
        top: -13px;
        left: 113px;
        width: 22px;
        height: 14px;
        z-index: 800;
        background: url("../img/features-popup-arrow-below.png") no-repeat center 0;
        background-size: 22px 14px
    }
    .product.screenshot .features-popup.above .arrow {
        background: url("../img/features-popup-arrow-above.png") no-repeat center 0;
        background-size: 22px 14px
    }
    .product.screenshot .features-popup.popped:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        border-radius: 6px;
        border-top: 1px solid rgba(255,255,255,0.25)
    }

}
@media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) {
    .product.screenshot .features-popup .arrow {
        background: url("../img/features-popup-arrow-below@2x.png") no-repeat center 0;
        background-size: 22px 14px
    }
    .product.screenshot .features-popup.above .arrow {
        background: url("../img/features-popup-arrow-above@2x.png") no-repeat center 0;
        background-size: 22px 14px
    }

}
#download-buy .header {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 440px;
    padding-top: 112px
}
#download-buy .header h1 {
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 62px;
    line-height: 62px;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 2px;
    padding-top: 126px;
    background-size: 90px 90px;
    background-repeat: no-repeat;
    background-position: center top
}
#download-buy .header h5 {
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    margin: 26px 0 0 0
}
#download-buy .header p.terms {
    color: rgba(255,255,255,0.8);
    font-size: 17px;
    letter-spacing: .5px;
    text-align: center;
    margin-top: 10px;
}
#download-buy .header .solid-btn {
    background-color: #fff;
    color: #6a9dc1;
    margin-bottom: 2px
}
#download-buy #changes-rel .header {
    background-color: #6a9dc1
}
#download-buy #changes-rel .header h1 {
    background-image: url("../img/icon-changes.png")
}
#download-buy .contents {
    color: rgba(32,31,32,0.65)
}
#download-buy .contents h4 {
    color: #323132;
    font-size: 24px;
    line-height: 28px;
    margin-top: 45px;
    margin-bottom: 13px
}
#download-buy .contents p {
    font-size: 16px;
    line-height: 25px;
    margin: 0
}
#download-buy .contents ul {
    list-style: disc;
    margin-left: 18px
}
#download-buy .contents li {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 4px
}
#download-buy .footer a,#download-buy .footer .copyright {
    color: #323132
}
#download-buy .footer .icon {
    fill: #323132
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) {
    #download-buy .header h1 {
        background-size: 90px 90px
    }
    #download-buy #changes-rel .header h1 {
        background-image: url("../img/icon-changes@2x.png")
    }
}
@media (min-width: 480px) {
    #download-buy .header {
        padding-top: 86px;
        height: 310px
    }
    #download-buy .header h1 {
        padding: 26px 0 12px 128px;
        letter-spacing: 1px;
        text-align: left;
        background-position: left center
    }
    #download-buy .header h5 {
        margin-top: 20px
    }
    #download-buy #changes-rel .header h1 {
        margin-left: 10px;
        padding-left: 118px
    }
}
@media (min-width: 768px) {
    #download-buy {
        padding-bottom: 141px
    }
    #download-buy .header {
        padding-top: 120px;
        height: 525px
    }
    #download-buy .header h1 {
        padding-top: 172px;
        padding-left: 0 !important;
        margin-top: 0px;
        margin-left: 0 !important;
        text-align: center;
        font-size: 100px;
        line-height: 100px;
        background-size: 120px 120px;
        background-position: center top
    }
    #download-buy .header h5 {
        font-size: 24px;
        line-height: 24px;
        margin-top: 20px;
    }
    #download-buy .contents {
        width: 484px
    }
    #download-buy .contents h4 {
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 15px
    }
    #download-buy .contents p,#download-buy .contents li {
        font-size: 18px;
        line-height: 28px
    }

}
#changes .footer a,#changes .footer .copyright {
    color: #000
}
#changes .footer .icon {
    fill: #000
}
#changes {
    background-color: #fff
}
#changes section h3 {
    color: #6a9dc1
}
#changes .header {
    padding-bottom: 6px;
    background-color: #6a9dc1;
    background-image: url("../img/BG_480.png");
    background-size: cover;
    background-position: center 0
}
#changes .header .transparent-btn {
    margin-bottom: 0
}
#changes .header h1 {
    background-image: url("../img/AppIcon.png");
    background-size: 100px 100px
}
#changes .download a {
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    letter-spacing: .5px;
    width: 260px;
    margin: 0 auto;
    text-align: center
}
#changes .download a:hover {
    color: #FFFFFF
}
#changes #details {
    padding-top: 20px
}
#changes #details p {
    margin-bottom: 50px
}
#changes #details #compare {
    padding-top: 130px;
    margin-top: 40px;
    background: url("../img/CompareDirectories-Small.png") no-repeat center top;
    background-size: 170px 115px
}
#changes #details #search {
    padding-top: 146px;
    background: url("../img/NarrowSearch-Small.png") no-repeat center top;
    background-size: 170px 128px
}
#changes #details #inspect {
    padding-top: 190px;
    background: url("../img/Inspect-Small.png") no-repeat center top;
    background-size: 170px 172px
}
#changes #details #merge {
    padding-top: 159px;
    padding-bottom: 80px;
    background: url("../img/Merge-Small.png") no-repeat center top;
    background-size: 170px 144px
}
#changes #purchase {
    background-color: #6a9dc1
}
#changes #purchase #changes-app {
    background: url("../img/ChangesFooterLogo.png") no-repeat center top;
    background-size: 150px 150px
}
#changes #changes-app h2 {
    color: #fff;
    padding-top: 175px;
    font-size: 46px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase
}
#changes #purchase .solid-btn {
    background-color: #fff;
    color: #6a9dc1;
    margin-bottom: 2px
}
#changes #purchase .download {
    margin-bottom: 4px
}
#changes #purchase form {
    margin-bottom: 0px
}
#changes #purchase .available {
    color: rgba(255,255,255,0.5)
}
#changes .release-notes {
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5)
}
#changes .release-notes:hover {
    color: #fff;
    border-bottom: 1px solid #fff
}
#download-buy .release-notes {
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5)
}
#download-buy .release-notes:hover {
    color: #fff;
    border-bottom: 1px solid #fff
}
#changes #features {
    background-color: #6a9dc1;
    padding-top: 24px
}
#changes #features ul {
    padding-left: 6px
}
#changes .feature {
    background-position: 0 4px;
    padding-left: 85px
}
#changes .feature#compare,#changes .feature#filter {
    background-image: url("../img/FeatureIcon_Compare.png");
    background-size: 37px 37px;
    background-position: 5px 4px
}
#changes .feature#integrate {
    background-image: url("../img/FeatureIcon_Integrates.png");
    background-size: 44px 46px
}
#changes .feature#scm {
    background-image: url("../img/FeatureIcon_FavoriteSCM.png");
    background-size: 46px 32px
}
#changes .feature#automate {
    background-image: url("../img/FeatureIcon_Automate.png");
    background-size: 38px 47px;
    background-position: 2px 4px
}
#changes .feature#scripting {
    background-image: url("../img/FeatureIcon_Scripting.png");
    background-size: 34px 47px;
    background-position: 5px 4px
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) {
    #changes .header {
        background-image: url("../img/BG_480@2x.png")
    }
    #changes .header h1 {
        background-image: url("../img/AppIcon@2x.png");
        background-size: 100px 100px
    }
    #changes .header .available,#changes #purchase .available {
        background-image: url("../img/Icon_Apple@2x.png");
        background-size: 16px 19px
    }
    #changes #details #compare {
        background: url("../img/CompareDirectories-Small@2x.png") no-repeat center top;
        background-size: 170px 115px
    }
    #changes #details #search {
        background: url("../img/NarrowSearch-Small@2x.png") no-repeat center top;
        background-size: 170px 128px
    }
    #changes #details #inspect {
        background: url("../img/Inspect-Small@2x.png") no-repeat center top;
        background-size: 170px 172px
    }
    #changes #details #merge {
        background: url("../img/Merge-Small@2x.png") no-repeat center top;
        background-size: 170px 144px
    }
    #changes #purchase #changes-app {
        background: url("../img/ChangesFooterLogo@2x.png") no-repeat center top;
        background-size: 150px 150px
    }
    #changes .feature#compare,#changes .feature#filter {
        background-image: url("../img/FeatureIcon_Compare@2x.png");
        background-size: 37px 37px
    }
    #changes .feature#integrate {
        background-image: url("../img/FeatureIcon_Integrates@2x.png");
        background-size: 44px 46px
    }
    #changes .feature#scm {
        background-image: url("../img/FeatureIcon_FavoriteSCM@2x.png");
        background-size: 46px 32px
    }
    #changes .feature#automate {
        background-image: url("../img/FeatureIcon_Automate@2x.png");
        background-size: 38px 47px
    }
    #changes .feature#scripting {
        background-image: url("../img/FeatureIcon_Scripting@2x.png");
        background-size: 34px 47px
    }

}
@media (min-width: 480px) {
    #changes .header h1 {
        margin-left: 12px;
        padding-left: 110px
    }
    #changes .header {
        background-image: url("../img/BG_1024.png")
    }
    #changes #details #compare,#changes #details #search,#changes #details #inspect,#changes #details #merge {
        padding-top: 0;
        padding-left: 195px;
        background-position: left top
    }
    #changes #first-screenshot,#changes #second-screenshot {
        height: 260px;
        margin: -10px -30px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 480px auto
    }
    #changes #first-screenshot {
        background-image: url("../img/Screenshot-01-Small.png");
        padding-bottom: 50px
    }
    #changes #second-screenshot {
        background-image: url("../img/Screenshot-02-Small.png");
        padding-bottom: 50px
    }
    #changes #features ul {
        padding-left: 30px;
        margin-bottom: 0
    }
    #changes .feature p {
        margin-bottom: 30px
    }
    #changes .feature#integrate {
        padding-top: 7px;
        padding-bottom: 1px
    }
    #changes .feature#scm {
        padding-bottom: 3px
    }
    #changes .feature#scripting {
        padding-top: 7px;
        padding-bottom: 1px
    }

}
@media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-device-pixel-ratio: 1.5), (min-width: 480px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 480px) and (min-resolution: 2dppx) {
    #changes .header {
        background-image: url("../img/BG_1024@2x.png")
    }
    #changes #details #compare,#changes #details #search,#changes #details #inspect,#changes #details #merge {
        background-position: left top
    }
    #changes #first-screenshot,#changes #second-screenshot {
        background-position: 0 0;
        background-size: 480px auto
    }
    #changes #first-screenshot {
        background-image: url("../img/Screenshot-01-Small@2x.png")
    }
    #changes #second-screenshot {
        background-image: url("../img/Screenshot-02-Small@2x.png")
    }

}
@media (min-width: 768px) {
    #changes .header {
        background-image: url("../img/BG_1800.png")
    }
    #changes .header p {
        line-height: 28px
    }
    #changes .header h1 {
        background-size: 145px 145px;
        padding-top: 172px;
        padding-left: 0
    }
    #changes #details {
        padding-top: 70px
    }
    #changes #details #investigate {
        font-size: 35px;
        line-height: 40px
    }
    #changes #details #compare,#changes #details #inspect,#changes #details #merge {
        padding-top: 0;
        padding-left: 310px;
        background-size: 270px auto;
        background-position: 0 -10px;
        height: 260px
    }
    #changes #details #compare {
        background-image: url("../img/CompareDirectories-Large.png");
        background-position: 0 10px
    }
    #changes #details #search {
        background-image: url("../img/NarrowSearch-Large.png");
        padding-right: 310px;
        padding-left: 0;
        padding-top: 30px;
        background-size: 270px auto;
        background-position: right -10px;
        height: 260px
    }
    #changes #details #inspect {
        background-image: url("../img/Inspect-Large.png");
        padding-top: 50px;
        padding-bottom: 20px
    }
    #changes #details #merge {
        background-image: url("../img/Merge-Large.png");
        padding-top: 22px
    }
    #changes .arrow {
        position: absolute;
        -webkit-transform: scale(0.8, 0.8)
    }
    #changes #arrow1 {
        top: 145px;
        left: 250px
    }
    #changes #arrow2 {
        top: 427px;
        left: 420px
    }
    #changes #arrow3 {
        top: 950px;
        left: 300px
    }
    #changes #arrow4 {
        top: 1228px;
        left: 420px
    }
    #changes #arrow5 {
        top: 1754px;
        left: 243px
    }
    #changes #arrow6 {
        top: 1990px;
        left: 471px
    }
    #changes #first-screenshot,#changes #second-screenshot {
        background-size: 763px auto;
        height: 410px;
        width: 763px;
        padding-bottom: 65px;
        margin: 0 auto
    }
    #changes #first-screenshot {
        background-image: url("../img/Screenshot-01-Large.png")
    }
    #changes #second-screenshot {
        background-image: url("../img/Screenshot-02-Large.png")
    }
    #changes #purchase {
        background-color: transparent;
        position: absolute;
        top: 2751px;
        left: 50%;
        margin-left: -372px
    }
    #changes #purchase .download {
        line-height: 20px;
        margin-top: 14px;
        margin-bottom: 0
    }
    #changes #purchase .download a {
        line-height: 15px
    }
    #changes #purchase #changes-app {
        background-size: 200px 200px
    }
    #changes #changes-app h2 {
        padding-top: 225px
    }
    #changes #features {
        padding-top: 420px
    }
    #changes #features ul {
        margin-bottom: 4px;
        padding-left: 60px
    }
    #changes .feature {
        padding-left: 75px
    }
    #changes #features .feature p {
        margin-bottom: 20px
    }
    #changes .feature#compare {
        padding-bottom: 8px
    }
    #changes .feature#integrate {
        padding-top: 3px;
        padding-bottom: 16px
    }
    #changes .feature#automate {
        padding-top: 4px;
        padding-bottom: 10px
    }
    #changes .feature#scripting {
        padding-top: 4px;
        padding-bottom: 14px
    }
    #changes #cross-promotion #slender-app {
        display: none
    }

}
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-resolution: 2dppx) {
    #changes .header {
        background-image: url("../img/BG_1800@2x.png")
    }
    #changes .header h1 {
        background-size: 145px 145px
    }
    #changes #details #merge,#changes #details #inspect {
        background-size: 270px auto;
        background-position: 0 -10px
    }
    #changes #details #compare {
        background-image: url("../img/CompareDirectories-Large@2x.png");
        background-size: 270px auto;
        background-position: 0 10px
    }
    #changes #details #search {
        background-image: url("../img/NarrowSearch-Large@2x.png");
        background-size: 270px auto;
        background-position: right -10px
    }
    #changes #details #inspect {
        background-image: url("../img/Inspect-Large@2x.png")
    }
    #changes #details #merge {
        background-image: url("../img/Merge-Large@2x.png")
    }
    #changes #first-screenshot {
        background-image: url("../img/Screenshot-01-Large@2x.png");
        background-size: 763px auto
    }
    #changes #second-screenshot {
        background-image: url("../img/Screenshot-02-Large@2x.png");
        background-size: 763px auto
    }
    #changes #purchase #changes-app {
        background-size: 200px 200px
    }

}
@media (min-width: 1080px) {
    #changes #details {
        padding-bottom: 30px
    }
    #changes #details h3,#changes #details #investigate {
        font-size: 52px;
        font-weight: 300;
        letter-spacing: -1px
    }
    #changes #details #search {
        padding-top: 80px;
        padding-right: 440px;
        background-size: 340px auto;
        background-position: right 20px;
        height: 300px
    }
    #changes #details #compare,#changes #details #inspect,#changes #details #merge {
        padding-left: 440px;
        background-size: 340px auto;
        background-position: -7px 3px;
        height: 300px
    }
    #changes #details #inspect {
        padding-top: 90px;
        padding-bottom: 30px
    }
    #changes #details #merge {
        padding-top: 50px;
        background-position: -7px -17px
    }
    #changes .arrow {
        -webkit-transform: scale(1, 1)
    }
    #changes #arrow1 {
        top: 205px;
        left: 380px
    }
    #changes #arrow2 {
        top: 543px;
        left: 612px
    }
    #changes #arrow3 {
        top: 1251px;
        left: 400px
    }
    #changes #arrow4 {
        top: 1590px;
        left: 580px
    }
    #changes #arrow5 {
        top: 2307px;
        left: 440px
    }
    #changes #arrow6 {
        top: 2580px;
        left: 600px
    }
    #changes #first-screenshot,#changes #second-screenshot {
        background-size: 1032px auto;
        width: 1032px;
        height: 580px
    }
    #changes #purchase {
        top: 3376px;
        margin-left: -516px
    }
    #changes #purchase #changes-app {
        background-size: 249px 247px
    }
    #changes #changes-app h2 {
        padding-top: 264px
    }
    #changes #features .feature p {
        margin-bottom: 36px
    }
    #changes .feature#automate {
        padding-top: 0;
        padding-bottom: 8px
    }
    #changes .feature#integrate {
        padding-top: 0;
        padding-bottom: 12px
    }
    #changes .feature#scripting {
        padding-top: 0;
        padding-bottom: 36px
    }
    #changes #hotspot-single-and-changed {
        left: 90px;
        top: 40px
    }
    #changes #hotspot-changed {
        left: 187px;
        top: 40px
    }
    #changes #hotspot-single {
        left: 263px;
        top: 40px
    }
    #changes #hotspot-unchanged {
        left: 346px;
        top: 40px
    }
    #changes #hotspot-everything {
        left: 445px;
        top: 40px
    }
    #changes #hotspot-no-merge {
        left: 663px;
        top: 40px
    }
    #changes #hotspot-commit {
        left: 742px;
        top: 40px
    }
    #changes #hotspot-refresh {
        left: 812px;
        top: 40px
    }
    #changes #hotspot-merge1 {
        left: 526px;
        top: 208px
    }
    #changes #hotspot-merge2 {
        left: 526px;
        top: 228px
    }
    #changes #hotspot-merge3 {
        left: 526px;
        top: 283px
    }
    #changes #hotspot-full {
        left: 54px;
        top: 40px
    }
    #changes #hotspot-diffs {
        left: 121px;
        top: 40px
    }
    #changes #hotspot-prev {
        left: 206px;
        top: 40px
    }
    #changes #hotspot-copy-right {
        left: 342px;
        top: 40px
    }
    #changes #hotspot-left-scroll {
        left: 495px;
        top: 160px
    }
    #changes #hotspot-right-scroll {
        left: 992px;
        top: 160px
    }
    #changes #cross-promotion #slender-app {
        display: block
    }

}
@media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-device-pixel-ratio: 1.5), (min-width: 1080px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 1080px) and (min-resolution: 2dppx) {
    #changes #details #search {
        background-size: 340px auto;
        background-position: right 20px
    }
    #changes #details #compare,#changes #details #inspect,#changes #details #merge {
        background-size: 340px auto;
        background-position: -7px 3px
    }
    #changes #details #merge {
        background-position: -7px -17px
    }
    #changes #first-screenshot,#changes #second-screenshot {
        background-size: 1032px auto
    }
    #changes #purchase #changes-app {
        background-size: 249px 247px
    }

}

html {
    font-family: 'sm-screen'
}
body:after {
    display: none
}
@media (min-width: 768px) {
    html {
        font-family: 'lg-screen'
    }
    body:after {
        content: 'lg-screen'
    }

}

x {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
ul {
    list-style: none
}
.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}
.clearfix:after {
    clear: both
}
.clearfix {
    zoom: 1
}
.ticker-container {
    position: relative;
    width: 485px;
    height: 80px;
    -webkit-user-select: none;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box
}
ul.flip {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin: 1px;
    width: 42px;
    height: 76px;
    font-family: -apple-system, BlinkMacSystemFont, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 58px;
    font-weight: bold
}
ul.flip li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 88px;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}
ul.flip li:first-child {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 2
}
ul.flip li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: block;
    height: 100%;
    -webkit-perspective: 200px;
    perspective: 200px
}
ul.flip li div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden
}
ul.flip li div .shadow {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2
}
ul.flip li div.up {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    top: 0
}
ul.flip li div.up:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    content: "";
    position: absolute;
    top: 37px;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 3px;
    background-color: white
}
ul.flip li div.down {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    bottom: 0
}
ul.flip li div div.inn {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: white;
    text-align: center;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #80B6D5), color-stop(100%, #4C8BB5));
    background: -o-linear-gradient(top, #80B6D5 0%, #4C8BB5 100%);
    background: linear-gradient(to bottom, #80B6D5 0%, #4C8BB5 100%);
    border-radius: 3px
}
ul.flip li div.up div.inn {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    top: 0
}
ul.flip li div.down div.inn {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    bottom: 0
}
body.play ul li.before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 3
}
body.play ul li.active {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-animation: asd .25s .25s linear both;
    animation: asd .25s .25s linear both;
    z-index: 2
}
@-webkit-keyframes asd {
    0% {
        z-index: 2
    }
    5% {
        z-index: 4
    }
    100% {
        z-index: 4
    }

}
@keyframes asd {
    0% {
        z-index: 2
    }
    5% {
        z-index: 4
    }
    100% {
        z-index: 4
    }

}
body.play ul li.active .down {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
    -webkit-animation: turn .25s .25s linear both;
    animation: turn .25s .25s linear both
}
@-webkit-keyframes turn {
    0% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg)
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

}
@keyframes turn {
    0% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg)
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

}
body.play ul li.before .up {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
    -webkit-animation: turn2 .25s linear both;
    animation: turn2 .25s linear both
}
@-webkit-keyframes turn2 {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
    100% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }

}
@keyframes turn2 {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
    100% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }

}
body.play ul li.before .up .shadow {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(0,0,0,0.3)));
    background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    -webkit-animation: show .25s linear both;
    animation: show .25s linear both
}
body.play ul li.active .up .shadow {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.1)), color-stop(100%, rgba(0,0,0,0.3)));
    background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
    -webkit-animation: hide .25s .3s linear both;
    animation: hide .25s .3s linear both
}
body.play ul li.before .down .shadow {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.3)), color-stop(100%, rgba(0,0,0,0.1)));
    background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    -webkit-animation: show .25s linear both;
    animation: show .25s linear both
}
body.play ul li.active .down .shadow {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0.3)), color-stop(100%, rgba(0,0,0,0.1)));
    background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    -webkit-animation: hide .25s .3s linear both;
    animation: hide .25s .3s linear both
}
@-webkit-keyframes show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }

}
@keyframes show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }

}
@-webkit-keyframes hide {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }

}
@keyframes hide {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }

}
@media (min-width: 1080px) {
    .ticker-container {
        width: 838px;
        height: 150px
    }
    ul.flip {
        width: 74px;
        height: 150px;
        font-size: 110px
    }
    ul.flip li {
        line-height: 170px
    }
    ul.flip li div.up:after {
        top: 72px
    }
    ul.flip li div div.inn {
        border-radius: 5px
    }

}
footer {
    color: #fff;
    background-color: #fffaf3
}