#home * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.homeBtn {
    display:inline-block;
    padding:10px;
    font-family:"Oswald";
    color:white !important;
    text-decoration:none !important;
    margin:auto;
    text-transform:uppercase;
    text-align:center;
    background-color:#506797;
}

#content > div.curved {
    border: 1px solid #ccc;
}

/** introduction **/
#introduction {
    padding:20px 40px 30px 40px;
}

#introduction h1 {
    font-size:22px;
    margin-bottom:15px;
}

@media (min-width: 768px) {
    #introduction > p, #introduction h1 {
        margin-left: 200px;
    }
    .japanese .homeBtn {
        font-size: 17px;    /* but overriden if we change the font dynamically, see home.xsl */
        line-height: 30px;
    }
}

#introduction #productImg {
    float:left;
    margin:4.6% 4.6% 0 0;
    max-width:26%;
    min-width:80px;
}

#introBtnFrame > a {
    margin-top:10px;
    font-size:16px;
}

#introduction::after {
    content:"";
    clear:both;
    display:table;
}

/** guarantees **/
#guarantees {
    float:right;
    margin-right:65px;
    margin-top:-50px;
}

#guarantees ul {
    padding:0;
}

#guarantees li {
    float:left;
    background-size:90px 112px;
    width:90px;
    height:88px; /* 112 - 24 */
    padding-top:24px;
    margin:0;
    text-align:center;
    list-style-type:none;
    font-family:'Asap Condensed', sans-serif;
    font-weight:bold;
    font-size:13.2px;
}

.japanese #guarantees li {
    font-family: 'Yu Gothic UI';
    height:92px; /* 112 - 20 */
    padding-top:20px;
    font-weight: bold;
    font-size: 14.5px;
}

.spanish #guarantees li, .german #guarantees li {
    height:86px; /* 112 - 26 */
    padding-top:26px;
    font-size: 11.6px;
}

/** guarantees **/
#guarantee1 {
    background-image:url("/doc/images/reward1.png");
    color:#b00000;
    margin-right:40px !important;
}

#guarantee2 {
    background-image:url("/doc/images/reward2.png");
    color:#00513f;
}

#licensing {
    padding-left:40px;
    width:382px;
}

#licensing ul {
    padding:0;
}

.spanish #licensing {
    width:388px;
}

#licensing li {
    margin:10px 0;
    padding-left:25px;
    list-style-type:none;
    background:url("/doc/images/arrow.png") no-repeat 0px 1px;
}

/** download **/
#download {
    clear:both;
    background-image:url("/doc/images/download_bkg.png");
    background-size: 100% 100% ;
    height:140px;   /* 180 (height of download_bkg.png) - 40 */
    margin-top:-15px;
    padding:40px 5px 0 5px;
}

#download p {
    color:#34405c;
    font-size:11px;
}

#download-auto p:first-child {
    margin-right:-70px;
}

.spanish #download-auto p:first-child {
    margin-right:-75px;
}

.spanish #download .homeBtn {
    font-size: 18px;
    line-height: 30px;
}

.downloadFrame {
    width:220px;
    text-align:center;
}

.downloadBtn {
    width:200px;
    font-size:22px;
    height:33px;
}

#download .col {
    float:left;
    width:50%;
}

#download .col1 .downloadFrame {
    margin-left:35px;
}

#download .col2 .downloadFrame, #download-all p:first-child {
    width:220px;
    float:right;
    margin-right:30px; /* this is intentionally smaller than the left margin of col1. */
}

#download .col2 .downloadBtn {
    background-color:#34405c;
}

#download .col > div {
    padding:0 30px;
}

.downloadNote a {
    font-size:11px;
    font-style:italic;
    text-decoration:none !important;
    font-weight: bold;
}

.grid::after {
    content:"";
    clear:both;
    display:table;
}

/** features **/
#features {
    padding-top:50px;
    padding-bottom:30px;
    background-color:#ecf3ff;
}

#features > p {
    font-weight:bold;
    font-size:16px;
    margin:auto;
    width:75%;
    color:#34405c;
    margin-bottom:35px;
    text-align:center;
}

.spanish #features > p, .german #features > p, .japanese #features > p {
    width:85%;
}

.german #features > p {
    font-size:15px;
}

#featuresInnerFrame {
    position:relative;
    height:680px;
    max-width:676px;
    margin:auto;
}

.japanese #featuresInnerFrame {
     /* The default is 'Verdana, Arial, etc.' defined in wrapper.css. However some browsers don't have Verdana.
      * The sizes of feature descriptions are quite sensitive and, in Japanese, Verdana would only apply to
      * alphabetic chars anyway. Use sans-serif which is supported everywhere. */
    font-family:sans-serif;
}

#featuresInnerFrame li {
    list-style-type:none;
    position:absolute;
    width:170px;
    text-align:center;
}

#featuresInnerFrame li i {
    font-size:64px;
    color:#34405c;
}

#featuresInnerFrame li h5 {
    font-size:12px;
    margin-top:5px;
    font-weight:bold;
}

#featuresInnerFrame li p {
    font-size:10.5px !important;
}

#feature1 {
    top:25px;
    left:50%;
    margin-left:-85px;
}

.german #feature1 p {
    margin:0 -20px 0 -20px;
}

#feature2 {
    top:175px;
    left:0;
}

#feature3 {
    top:173px;
    right:0;
}

#feature3 i {
    margin-bottom:-3px;
    font-size:69px !important;
}

#feature4 {
    top:487px;
    left:95px;
}

#feature4 i {
    margin-bottom:-7px;
    font-size:74px !important;
}

#feature5 {
    top:490px;
    right:95px;
    width:180px !important;
}

.japanese #feature5 h5, .spanish #feature5 h5 {
    margin:5px -5px 0 -5px;
}

.german #feature5 p {
    margin:0 -15px 0 -15px;
}

#rings {
    position:absolute;
    width:290px;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#circle {
    width: 560px;
    height: 560px;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-image: radial-gradient(white, #ecf3ff, #ecf3ff);
}

.feature-line {
    border-color:#dce0e9;
    border-width:7px;
    border-style:none;
    position:absolute;
}

.line1 {
    width:1px;
    height:60px;
    border-left-style:solid;
    top:170px;
    left:50%;
    margin-left:-4px;
}

.line2, .line3 {
    width:60px;
    height:30px;
    border-bottom-style:solid;
    top:205px;
}

.line2 {
    -webkit-transform:
        translateY(20px)
        translateX(5px)
        rotate(26deg);
    left:171px;
}

.line3 {
    -webkit-transform:
        translateY(20px)
        translateX(5px)
        rotate(-26deg);
    right:180px;
}

.line4, .line5 {
    width:30px;
    height:60px;
    top:395px;
}

.line4 {
    border-right-style:solid;
    -webkit-transform:
        translateY(20px)
        translateX(5px)
        rotate(36deg);
    left:190px;
}

.line5 {
    border-left-style:solid;
    -webkit-transform:
        translateY(20px)
        translateX(5px)
        rotate(-36deg);
    right:200px;
}

/* for mobiles */
@media (max-width: 767.9px) {
    #introduction, #licensing {
        padding:20px 30px;
    }

    #introBtnFrame {
        width:50%;
        text-align:center;
        margin-top: 60px;
    }

    #introBtnFrame > a {
        margin: 0;
    }

    #licensing {
        clear:right;
        width:auto !important; /* important for spanish */
    }

    #licensing li {
        margin-top:20px;
    }

    #guarantees {
        margin-top: -105px;
    }

    #download {
        background-image:url("/doc/images/download_bkg_mobile.png");
        height:160px;
        margin-top:20px;
    }

    #download .col1, #download .col1>div{
        display:none !important;
    }

    #download .col2 {
        width:100%;
    }

    #download .col2 .downloadFrame, #download-all p:first-child {
        float:none;
        margin:auto;
    }

    #download-all {
        margin:auto;
    }

    #download-all p, .downloadNote a {
        font-size:13.75px;
    }

    .japanese #download-all p {
        font-size:12.9px;
    }

    .german #download-all p {
        font-size:11px;
    }

    .spanish #download-all p {
        font-size:12.85px;
    }

    .german .downloadNote a {
        font-size:12px;
    }

    #features {
        padding-top:20px;
    }

    #features > p {
        /* paragraph above the presentation of features. */
        font-size:14px;
    }
    #features > p {
        font-size: 12px;
    }
    #featuresInnerFrame {
        -moz-transform: scale(calc((576 - 30) / 726));
        zoom: calc((576 - 30) / 726);
        padding-bottom:50px;
    }

    #featuresInnerFrame li h5 {
        font-size:14.5px;
    }

    #featuresInnerFrame li p {
        font-size:13.5px !important;
    }
    #rings {
        width:250px;
        top:calc(50% - 50px / 2); /* 50px is the padding bottom of #featuresInnerFrame */
    }
    #feature1 {
        top: 15px;
    }
    .german #feature1 {
        top: -20px;
    }
    #feature1 p {
        margin-left:-20px;
        margin-right:-20px;
    }
    .japanese #feature1 p {
        margin-left:-40px;
        margin-right:-40px;
    }
    #feature2 {
        top:140px;
    }
    #feature3 {
        top:138px;
    }
    .japanese #feature2 p, .japanese #feature2 h5, .japanese #feature3 p, .japanese #feature3 h5 {
        margin-left:-4px;
        margin-right:-4px;
    }
    #feature4 {
        margin-left:-20px;
    }
    #feature4 p {
        margin-left:-30px;
        margin-right:-30px;
    }
    #feature5 {
        margin-right:-20px;
    }
    #feature5 h5 {
        margin-left:-20px;
        margin-right:-20px;
    }
    #feature5 p {
        margin-left:-25px;
        margin-right:-25px;
    }
    .spanish #feature5 p, .spanish #feature5 h5 {
        margin-left:-25px;
        margin-right:-25px;
    }
    .line1 {
        top:180px;
    }
    .line2, .line3 {
        margin-left:10px;
        margin-right:10px;
    }

    @supports (-moz-appearance:none) {
        /* styles for firefox */
        #featuresInnerFrame { 
            width:676px; /* The scale function works differently on firefox. The original width taken before scaling would be the real width of the object, whereas on other browsers it first scales the object and then applies the max-width. This problem can be solved by forcing the width to be larger than its container on Firefox, but the object will then not be centered correctly. It's better to align it to the left and then center it dynamically. Another issue, which should also be fixed dynamically, is that the height of the container doesn't shrink when the object is scaled down. */
            transform-origin:0 0;
        }

        #download-all {
            transform-origin:center top;
        }

        #download-all p {
            font-size:13.25px;
        }
    }
}

@media (max-width: 575.9px) {
    #introduction, #licensing {
        padding:15px 20px;
    }

    #introduction h1 {
        margin-bottom:5px;
    }

    #introBtnFrame {
        margin-top: 50px;
    }

    #download {
        height:120px;
        padding-top:35px;
    }

    #download-all, #guarantees {
        -moz-transform: scale(calc((480 - 30) / 576));
        zoom: calc((480 - 30) / 576);
    }

    @supports (-moz-appearance:none) {
        /* margins are not scaled on firefox. Do it manually. */
        #guarantees {
            transform-origin: bottom right;
            margin-right: calc(65px * (480 - 30) / 576);
        }
        #guarantee1 {
            margin-right: calc(40px * (480 - 30) / 576) !important;
        }
    }

    #featuresInnerFrame {
        -moz-transform: scale(calc((480 - 30) / 726));
        zoom: calc((480 - 30) / 726);
    }

    #featuresInnerFrame li h5 {
        font-size:15.5px;
    }

    #featuresInnerFrame li p {
        font-size:14.5px !important;
    }

    #feature1 {
        top: 0px;
    }
    #feature2 p, #feature2 h5, #feature3 p, #feature3 h5 {
        margin-left:-4px;
        margin-right:-4px;
    }
    .japanese #feature2 p, .japanese #feature2 h5, .japanese #feature3 p, .japanese #feature3 h5 {
        margin-left:-10px;
        margin-right:-10px;
    }
    #feature4 p {
        margin-left:-30px;
        margin-right:-30px;
    }
    #feature5 h5 {
        margin-left:-35px;
        margin-right:-35px;
    }
    #feature5 p {
        margin-left:-45px;
        margin-right:-45px;
    }
}

@media (max-width: 479.9px) {
    #introduction, #licensing {
        padding:10px 15px;
    }

    #introduction {
        padding-top:15px !important; /* don't reduce further */
    }

    #introBtnFrame {
        margin-top: 35px;
    }

    #introBtnFrame > a {
        font-size:15px !important;
    }

    #introduction h1 {
        font-size:18px;
    }

    #download {
        height:100px;
        padding-top:30px;
    }

    #download-all, #guarantees {
        -moz-transform: scale(calc((410 - 30) / 576));
        zoom: calc((410 - 30) / 576);
    }

    @supports (-moz-appearance:none) {
        #guarantees {
            transform-origin: bottom right;
            margin-right: calc(65px * (410 - 30) / 576);
        }
        #guarantee1 {
            margin-right: calc(40px * (410 - 30) / 576) !important;
        }
    }

    #featuresInnerFrame {
        -moz-transform: scale(calc((410 - 30) / 726));
        zoom: calc((410 - 30) / 726);
    }

    #featuresInnerFrame li h5 {
        font-size:16.5px;
    }

    #featuresInnerFrame li p {
        font-size:15.5px !important;
    }

    #feature1 {
        top: -10px;
    }
    .german #feature1 {
        top: -30px;
    }
}

@media (max-width: 409.9px) {
    #introduction h1 {
        font-size:16px;
    }

    #introBtnFrame {
        margin-top: 25px;
    }

    #introBtnFrame > a {
        font-size:13.5px !important;
    }

    #download {
        height:85px;
        padding-top:25px;
    }

    #download-all, #guarantees {
        -moz-transform: scale(calc((360 - 30) / 576));
        zoom: calc((360 - 30) / 576);
    }

    @supports (-moz-appearance:none) {
        #guarantees {
            transform-origin: bottom right;
            margin-right: calc(65px * (360 - 30) / 576);
        }
        #guarantee1 {
            margin-right: calc(40px * (360 - 30) / 576) !important;
        }
    }

    #featuresInnerFrame {
        -moz-transform: scale(calc((360 - 30) / 726));
        zoom: calc((360 - 30) / 726);
    }

    #featuresInnerFrame li h5 {
        font-size:17.5px;
    }

    #featuresInnerFrame li p {
        font-size:16.5px !important;
    }

    #feature1 {
        top: -15px;
    }
    .german #feature1 {
        top: -40px;
    }
    .japanese #feature2 {
        top:100px;
    }
    .japanese #feature3 {
        top:98px;
    }

    #feature2 p, #feature2 h5, #feature3 p, #feature3 h5 {
        margin-left:-9px;
        margin-right:-9px;
    }
    .japanese #feature2 p, .japanese #feature2 h5, .japanese #feature3 p, .japanese #feature3 h5 {
        margin-left:-14px;
        margin-right:-14px;
    }
    .german #feature4 p, .german #feature4 h5, .german #feature5 p, .german #feature5 h5 {
        margin-left:-48px;
        margin-right:-48px;
    }
    .spanish #feature5 p, .spanish #feature5 h5 {
        margin-left:-45px;
        margin-right:-45px;
    }
}

@media (max-width: 359.9px) {
    #introduction, #licensing {
        padding:5px 10px;
    }

    #introBtnFrame > a {
        font-size:12px !important;
    }

    #download {
        height:75px;
        padding-top:20px;
    }

    #download-all, #guarantees {
        -moz-transform: scale(calc((320 - 30) / 576));
        zoom: calc((320 - 30) / 576);
    }

    @supports (-moz-appearance:none) {
        #guarantees {
            transform-origin: bottom right;
            margin-right: calc(65px * (320 - 30) / 576);
        }
        #guarantee1 {
            margin-right: calc(40px * (320 - 30) / 576) !important;
        }
    }

    #featuresInnerFrame {
        -moz-transform: scale(calc((320 - 30) / 726));
        zoom: calc((320 - 30) / 726);
    }

    #featuresInnerFrame li h5 {
        font-size:18.5px;
    }

    #featuresInnerFrame li p {
        font-size:17.5px !important;
    }
    #feature1 {
        top: -20px;
    }
    .japanese #feature1 {
        top: -35px;
    }
}

@media (max-width: 319.9px) {
    #download {
        height:65px;
        padding-top:15px;
    }

    #introBtnFrame > a {
        font-size:10px !important;
    }

    #download-all, #guarantees {
        -moz-transform: scale(calc((280 - 30) / 576));
        zoom: calc((280 - 30) / 576);
    }

    @supports (-moz-appearance:none) {
        #guarantees {
            transform-origin: bottom right;
            margin-right: calc(65px * (280 - 30) / 576);
        }
        #guarantee1 {
            margin-right: 10px !important;
        }
    }

    #featuresInnerFrame {
        -moz-transform: scale(calc((280 - 30) / 726));
        zoom: calc((280 - 30) / 726);
    }

    #featuresInnerFrame li h5 {
        font-size:19.5px;
    }

    .japanese #featuresInnerFrame li h5 {
        font-size:22px;
    }

    #featuresInnerFrame li p {
        font-size:18.5px !important;
    }

    .japanese #featuresInnerFrame li p {
        font-size:21px !important;
    }

    .japanese #feature1 {
        top: -65px;
    }
    .german #feature1 {
        top: -50px;
    }

    #feature2 p, #feature2 h5, #feature3 p, #feature3 h5 {
        margin-left:-20px;
        margin-right:-20px;
    }
    .japanese #feature4 p, .japanese #feature4 h5, .japanese #feature5 p, .japanese #feature5 h5 {
        margin-left:-45px;
        margin-right:-45px;
    }
}