/* ------------------------------------------------------------------------------------------------------------------
   VARIABLES

   RED   : #A91816;
   GREY  : #1E1E1E;
   BLACK : #0A0A0A;
   ------------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------------
   GRIDS
   ------------------------------------------------------------------------------------------------------------------ */

.pure-g {
    margin: 0 auto;
}
.pure-g .pure-g {
    width: auto;
    margin: auto;
}

/* ------------------------------------------------------------------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------------------------------------------------------------------ */

.hidden  { visibility : hidden; }
.visible { visibility : visible; }

/* ------------------------------------------------------------------------------------------------------------------
   COOKIE CONSENT
   ------------------------------------------------------------------------------------------------------------------ */

section[name=cookie-consent] {
    -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
        -ms-box-shadow: none !important;
         -o-box-shadow: none !important;
            box-shadow: none !important;

    position: fixed;
    bottom: 20px;
    left: 20px;

    width: 200px;
}

section[name=cookie-consent] > i.fa {
    margin-top: 10px;
    color: #a91816;
    cursor: help;
}
section[name=cookie-consent] article {
    display: none;

    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    color: white;

    background-color: rgb(43,43,43);
    padding: 7px 10px;

    -webkit-box-shadow: rgb(0,0,0) 0px 0px 3px 0px, rgb(86,86,86) 0px 1px 0px 0px inset;
       -moz-box-shadow: rgb(0,0,0) 0px 0px 3px 0px, rgb(86,86,86) 0px 1px 0px 0px inset;
        -ms-box-shadow: rgb(0,0,0) 0px 0px 3px 0px, rgb(86,86,86) 0px 1px 0px 0px inset;
         -o-box-shadow: rgb(0,0,0) 0px 0px 3px 0px, rgb(86,86,86) 0px 1px 0px 0px inset;
            box-shadow: rgb(0,0,0) 0px 0px 3px 0px, rgb(86,86,86) 0px 1px 0px 0px inset;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

section[name=cookie-consent] article header {
    position: relative;
}
section[name=cookie-consent] article header a[rel=close] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 16px;
    color: white;
}
section[name=cookie-consent] article header h6 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    font-weight: 700;
    color: white;
}

section[name=cookie-consent] article main {
    font-size: 12px;
    font-weight: 300;
    color: #CCC;
    padding: 10px 0;
}
section[name=cookie-consent] article main p {
    margin: 10px 0 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
}
section[name=cookie-consent] article main a {
    color: #CCC;
    text-decoration: none;
}
section[name=cookie-consent] article main a:hover {
    text-decoration: underline;
}
section[name=cookie-consent] article main div[name=content] {
    display: none;
}

section[name=cookie-consent] article footer button {
    border: 0px none;

    font-size: 12px;
    color: white;
    font-weight: 300;
    text-shadow: 0px 1px 2px rgba(0,0,0, .25);

    margin-bottom: 5px;
    padding: 10px;
    width: 100%;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    background: #88bfe8;
    background: -moz-linear-gradient(top,  #88bfe8 0%, #70b0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bfe8), color-stop(100%,#70b0e0));
    background: -webkit-linear-gradient(top,  #88bfe8 0%,#70b0e0 100%);
    background: -o-linear-gradient(top,  #88bfe8 0%,#70b0e0 100%);
    background: -ms-linear-gradient(top,  #88bfe8 0%,#70b0e0 100%);
    background: linear-gradient(to bottom,  #88bfe8 0%,#70b0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 );
}
section[name=cookie-consent] article footer button[name=allow] {
    display: block;
}
section[name=cookie-consent] article footer button[name=disable] {
    display: none;
}

section[name=cookie-consent] article footer a {
    font-size: 12px;
    font-weight: 300;
    color: white;
    text-decoration: none;
}
section[name=cookie-consent] article footer a:hover {
    text-decoration: underline;
}

section[name=cookie-consent] article footer a[name=readLess] {
    display: none;
}

/* ------------------------------------------------------------------------------------------------------------------
   FORMS
   ------------------------------------------------------------------------------------------------------------------ */

section[name] label.error {
    color: red;
}
section[name] input[type=text].error,
section[name] input[type=email].error,
section[name] textarea.error {
    border: 1px solid red;
}

/* ------------------------------------------------------------------------------------------------------------------
   NOTES
   ------------------------------------------------------------------------------------------------------------------ */

span.note {
    display: inline-block;
    font-weight: 300;
    padding: 2px 10px;
    background-color: #EEE;
    margin-right: 5px;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

span.note.error     { background-color: #F00; color: white; }
span.note.success   { background-color: #0F0; color: white; }
span.note.notice    { background-color: #09F; color: white; }
span.note.warning   { background-color: #F90; color: white; }

/* ------------------------------------------------------------------------------------------------------------------
   LOADING
   ------------------------------------------------------------------------------------------------------------------ */

img[id=loadingThanks] {
    display: none;
    vertical-align: middle;
    margin: -3px 0 0 10px;
}

/* ------------------------------------------------------------------------------------------------------------------
   HRs
   ------------------------------------------------------------------------------------------------------------------ */

hr {
    display: block;
    border: 0px none;
    height: 1px;
    margin: 20px 0 0 0;
    background: #999;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#535353), to(#535353), color-stop(50%, #999));
    background: -moz-gradient(linear, 0 0, 100% 0, from(#535353), to(#535353), color-stop(50%, #999));
    background: -ms-gradient(linear, 0 0, 100% 0, from(#535353), to(#535353), color-stop(50%, #999));
    background: -o-gradient(linear, 0 0, 100% 0, from(#535353), to(#535353), color-stop(50%, #999));
    background: linear-gradient(linear, 0 0, 100% 0, from(#535353), to(#535353), color-stop(50%, #999));
}

/* ------------------------------------------------------------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------------------------------------------------------------ */

section[name] {
    -webkit-box-shadow: inset 0px 10px 25px 0px rgba(0,0,0, .25);
       -moz-box-shadow: inset 0px 10px 25px 0px rgba(0,0,0, .25);
        -ms-box-shadow: inset 0px 10px 25px 0px rgba(0,0,0, .25);
         -o-box-shadow: inset 0px 10px 25px 0px rgba(0,0,0, .25);
            box-shadow: inset 0px 10px 25px 0px rgba(0,0,0, .25);
}

section.red {
    background-color: #A91816;
}

section.grey {
    background-color: #1E1E1E;
}

section.black {
    background-color: #0A0A0A;
}

section.grunge {
    background: #E3E3E3;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZGJkYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #E3E3E3 0%, #FFFFFF 21%, #BDBDBD 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E3E3E3), color-stop(21%,#FFFFFF), color-stop(100%,#BDBDBD));
    background: -webkit-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 21%,#BDBDBD 100%);
    background: -o-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 21%,#BDBDBD 100%);
    background: -ms-linear-gradient(top,  #E3E3E3 0%,#FFFFFF 21%,#BDBDBD 100%);
    background: linear-gradient(to bottom,  #E3E3E3 0%,#FFFFFF 21%,#BDBDBD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E3E3E3', endColorstr='#BDBDBD',GradientType=0 );
}

/* ------------------------------------------------------------------------------------------------------------------
   CSS GREYSCALE
   ------------------------------------------------------------------------------------------------------------------ */

.greyscale {
    -webkit-transition-duration: 0.5s;
       -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;

    -webkit-transition-property: -webkit-filter;
       -moz-transition-property: -moz-filter;
        -ms-transition-property: -ms-filter;
         -o-transition-property: -o-filter;
            transition-property: filter;

    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
}
.greyscale:hover {
    -webkit-filter: grayscale(0%);
       -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
         -o-filter: grayscale(0%);
            filter: grayscale(0%);
}

/* ------------------------------------------------------------------------------------------------------------------
   CSS SPIN
   ------------------------------------------------------------------------------------------------------------------ */

.rotate {
    -webkit-transition-duration: 0.5s;
       -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;

    -webkit-transition-property: -webkit-transform;
       -moz-transition-property: -moz-transform;
        -ms-transition-property: -ms-transform;
         -o-transition-property: -o-transform;
            transition-property: transform;

    overflow:hidden;
}
.rotate:hover {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
}

/* ------------------------------------------------------------------------------------------------------------------
   SOCIAL LINKS
   ------------------------------------------------------------------------------------------------------------------ */

ul.social {
    display: block;
    list-style-type: none;
    margin: 2px 0 0 0;
    padding: 0;
}
ul.social li {
    display: inline-block;
}
ul.social li a {
    display: block;
    width: 41px;
    height: 41px;
    position: relative;
    text-indent: -99999px;
    margin: 0 1px;
}

ul.social li a.facebook         { background-position:    0px 0px; background-image: url(/img/social.png); }
ul.social li a.twitter          { background-position:  -41px 0px; background-image: url(/img/social.png); }
ul.social li a.google           { background-position:  -82px 0px; background-image: url(/img/social.png); }
ul.social li a.instagram        { background-position: -123px 0px; background-image: url(/img/social.png); }
ul.social li a.linkedin         { background-position: -164px 0px; background-image: url(/img/social.png); }
ul.social li a.tumblr           { background-position: -205px 0px; background-image: url(/img/social.png); }

ul.social.red li a.facebook     { background-position:    0px 0px; background-image: url(/img/social.png); }
ul.social.red li a.twitter      { background-position:  -41px 0px; background-image: url(/img/social.png); }
ul.social.red li a.google       { background-position:  -82px 0px; background-image: url(/img/social.png); }
ul.social.red li a.instagram    { background-position: -123px 0px; background-image: url(/img/social.png); }
ul.social.red li a.linkedin     { background-position: -164px 0px; background-image: url(/img/social.png); }
ul.social.red li a.tumblr       { background-position: -205px 0px; background-image: url(/img/social.png); }

/* ------------------------------------------------------------------------------------------------------------------
   GENERAL
   ------------------------------------------------------------------------------------------------------------------ */

*,
html {
    font-family: 'Roboto Condensed', sans-serif;
}

body {
    font-size: normal;
    color: #333;
}

/* ------------------------------------------------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------------------------------------------------ */

body > header {
    padding: 20px 0;
    max-height: 110px;

    -webkit-box-shadow: 0px 5px 10px 5px rgba(0,0,0, .25);
       -moz-box-shadow: 0px 5px 10px 5px rgba(0,0,0, .25);
        -ms-box-shadow: 0px 5px 10px 5px rgba(0,0,0, .25);
         -o-box-shadow: 0px 5px 10px 5px rgba(0,0,0, .25);
            box-shadow: 0px 5px 10px 5px rgba(0,0,0, .25);
}

/* ------------------------------------------------------------------------------------------------------------------ */

body > header fieldset {
    text-align: right;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    border: 0px none;
}
body > header fieldset legend {
    font-size: 20px;
    font-weight: 300;
    color: #A91816;
}

body > header img#logo {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------
   WINDOWSs
   ------------------------------------------------------------------------------------------------------------------ */

section.popup {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0,0,0, .5);

    background-image: url(/img/william-charityantivirus-cofounder-popup.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
}
section.popup article {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 380px;
    height: 200px;

    -webkit-transform: translate(40px, 0%);
       -moz-transform: translate(40px, 0%);
        -ms-transform: translate(40px, 0%);
         -o-transform: translate(40px, 0%);
            transform: translate(40px, 0%);
}
section.popup article {
    text-align: center;
    font-weight: 300;
}
section.popup article header h4 {
    font-size: 20px;
}
section.popup article main {
    font-size: 16px;
    color: #666;
    margin: 20px 0;
}
section.popup article footer a {
    color: #A91816;
    text-decoration: none;
    border-bottom: 1px dotted #1E1E1E;
}
section.popup article footer a:hover {
    color: #1E1E1E;
    border-bottom: 1px dotted #A91816;
}

/* ------------------------------------------------------------------------------------------------------------------
   WINDOWSs
   ------------------------------------------------------------------------------------------------------------------ */

section[name].window {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0,0,0, .25);
}
section[name].window article {
    border: 5px solid #A91816;
    background-color: white;
    width: 560px;
    z-index: 1001;

    position: fixed;
    top: 50%;
    left: 50%;

    box-shadow: 0px 5px 10px rgba(0,0,0, .75);

    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
section[name].window article header {
    padding: 5px 10px;
    background-color: #A91816;
    color: white;
}
section[name].window article header a {
    float: right;
    line-height: 20px;
    color: white;
}
section[name].window article header h6 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 300;
}
section[name].window article main {
    padding: 10px;
    text-align: center;
}

section[name=player].window article {
    width: auto;
    height: auto;
}
section[name=player].window article main {
    background-color: #1B1B1B;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------------------------------------------------------
   PRODUCT
   ------------------------------------------------------------------------------------------------------------------ */

section[name=product] {
    padding: 40px 0;
    position: relative;
}

section[name=product] h1 {
    color: #A91816;
    font-weight: 300;
    margin: 0;
    padding: 0;
}
section[name=product] strong {
    font-weight: 400;
}
section[name=product] p {
    font-weight: 300;
}

section[name=product] a {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    color: white;
    border: 0px none;
    text-decoration: none;

    background: #92c301;
    background: -moz-linear-gradient(top,  #92c301 0%, #5b8713 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92c301), color-stop(100%,#5b8713));
    background: -webkit-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -o-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -ms-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: linear-gradient(to bottom,  #92c301 0%,#5b8713 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c301', endColorstr='#5b8713',GradientType=0 );

    font-size: 28px;
    padding: 10px 20px;
    margin-top: 20px;
}
section[name=product] a i.fa {
    margin-left: 10px;
}

section[name=product] a[id=video-link] {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #666;
    font-weight: 300;
    text-decoration: none;
    border-bottom: 1px dotted #A91816;
}
section[name=product] a[id=video-link]:hover {
    color: #A91816;
    border-bottom: 1px dotted #666;
}

section[name=product] .pure-u-1-2:nth-child(1) img {
    margin: 10px 0 0 0;
    padding: 0;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

section[name=product] .pure-u-md-1-2:nth-child(2) {
    position: relative;
}
section[name=product] .pure-u-md-1-2:nth-child(2):before {
    content: '';
    position: absolute;
    bottom: -40px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url(/img/william-and-daniel-agger.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

/* ------------------------------------------------------------------------------------------------------------------
   AWARDS
   ------------------------------------------------------------------------------------------------------------------ */

section[name=awards] {
    padding: 10px 0;
}

section[name=awards] a.award {
    position: relative;
    font-size: 16px;
    font-weight: 300;
    color: #EFEFEF;
    display: block;
    margin: 10px;
    text-decoration: none;
    height: 130px;
}
section[name=awards] a.award:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
}

section[name=awards] a.award.microsoft:before  { background-image: url(/img/awards/microsoft.png); }
section[name=awards] a.award.avast:before      { background-image: url(/img/awards/avtest.png); }
section[name=awards] a.award.trustpilot:before { background-image: url(/img/awards/trustpilot.png); }

section[name=awards] a.award span {
    display: block;
    margin-left: 130px;
    position: absolute;
    bottom: 0;
}

section[name=awards] a.award i.fa {
    color: #58e604;
}

/* ------------------------------------------------------------------------------------------------------------------
   INFO
   ------------------------------------------------------------------------------------------------------------------ */

section[name=info] {
    padding: 80px 0 40px 0;
    position: relative;
}

section[name=info] article header {
    font-size: 62px;
    color: #a91816;
}
section[name=info] article main {
    font-size: 16px;
    font-weight: 300;
}
section[name=info] article main a {
    color: #73a101;
    text-decoration: underline;
}
section[name=info] ul.info-dots {
    list-style-type: none;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;

    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
}
section[name=info] ul.info-dots li {
    display: inline-block;
    position: relative;
}
section[name=info] ul.info-dots li a {
    font-weight: 300;
    color: #666;
    text-decoration: none;
}
section[name=info] ul.info-dots li a:hover {
    color: #A91816;
    border-bottom: 1px dotted #666;
}
section[name=info] ul.info-dots li.selected a {
    font-weight: 400;
    color: #A91816;
    border-bottom: 1px solid #666;
}
section[name=info] ul.info-dots li:before {
    content: '·';
    display: inline-block;
    margin: 0 10px;
    color: black;
}
section[name=info] ul.info-dots li:first-child:before {
    content: '';
}

/* ------------------------------------------------------------------------------------------------------------------
   CHARITIES WE SUPPORT
   ------------------------------------------------------------------------------------------------------------------ */

section[name=charities] {
    padding: 40px 0;
}
section[name=charities] h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 63px;
    color: #3C3C3C;
    margin: 0 0 40px 0;
    padding: 0;
    font-weight: 300;
}

section[name=charities] article {
    color: #DBDBDB;
    padding-left: 220px;
    position: relative;
    overflow: visible;
}
section[name=charities] article > img {
    position: absolute;
    bottom: -70px;
    left: 0;
    width: 250px;
}
section[name=charities] article a {
    color: red;
    text-decoration: none;
}
section[name=charities] article header {
    font-size: 50px;
    color: #A91816;
    font-weight: 300;
}
section[name=charities] article blockquote {
    font-weight: 300;
    font-size: 18px;
    margin: 10px 0 20px 0;
    padding: 0;
}
section[name=charities] article footer {
    border-top: 1px solid #666;
    font-weight: 300;
    font-size: 14px;
    padding: 10px 40px 10px 0;
    text-align: right;
    position: relative;
}
section[name=charities] article footer:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #666;
}

ul.charities.slick-initialized.slick-slider .slick-list {
    overflow: visible;
}

/* ------------------------------------------------------------------------------------------------------------------
   CHILDRENS
   ------------------------------------------------------------------------------------------------------------------ */

section[name=children] {
    border-top: 5px solid #A91816;
    background-color: #333;
}
section[name=children] ul {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    height: 200px;
    width: 100%;
}
section[name=children] ul li {
    width: calc(100% / 7);
    width: -ms-calc(100% / 7);
    width: 14.28571428571429%;

    width: -webkit-calc(100% / 7);
    width: -moz-calc(100% / 7);
    width: -o-calc(100% / 7);

    height: 100%;
    display: block;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

section[name=children] ul li:nth-child(1) { background-image: url(/img/children/child-1.png); }
section[name=children] ul li:nth-child(2) { background-image: url(/img/children/child-2.png); }
section[name=children] ul li:nth-child(3) { background-image: url(/img/children/child-3.png); }
section[name=children] ul li:nth-child(4) { background-image: url(/img/children/child-4.png); }
section[name=children] ul li:nth-child(5) { background-image: url(/img/children/child-5.png); }
section[name=children] ul li:nth-child(6) { background-image: url(/img/children/child-6.png); }
section[name=children] ul li:nth-child(7) { background-image: url(/img/children/child-7.png); }

/* ------------------------------------------------------------------------------------------------------------------
   IN THE PRESS
   Based on: https://jsfiddle.net/necolas/vhZds/
   Based on: https://codepen.io/P233/pen/lGewF
   ------------------------------------------------------------------------------------------------------------------ */

section[name=press] {
    padding: 40px 0;
}
section[name=press] h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 63px;
    color: #A91816;
    margin: 0 0 40px 0;
    padding: 0;
    font-weight: 300;
}
section[name=press] h4 img {
    width: 70px;
    margin-right: 10px;
    vertical-align: middle;
}

section[name=press] ul.press {
    list-style-type: none;
    margin: 0;
    padding: 20px 0;
    position: relative;
}
section[name=press] ul.press:before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    left: 69px;
    border-left: 2px solid #A91816;
}

section[name=press] ul.press li article {
    padding: 0 0 0 90px;
    margin: 0 0 1em 0;
    padding-bottom: 1em;
    border-bottom: 1px dashed #A91816;
    position: relative;

}
section[name=press] ul.press li article > img {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    padding: 2px;

    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    -webkit-transition-duration: 0.5s;
       -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;

    -webkit-transition-property: -webkit-filter;
       -moz-transition-property: -moz-filter;
        -ms-transition-property: -ms-filter;
         -o-transition-property: -o-filter;
            transition-property: filter;

    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);

}
section[name=press] ul.press li article:hover > img {
    -webkit-filter: grayscale(0%);
       -moz-filter: grayscale(0%);
        -ms-filter: grayscale(0%);
         -o-filter: grayscale(0%);
            filter: grayscale(0%);
}
section[name=press] ul.press li article a {
    color: #6f1316;
    text-decoration: none;
}
section[name=press] ul.press li article a:hover {
    border-bottom: 1px dotted #6f1316;
}
section[name=press] ul.press li article header {
    border: 1px solid #EEE;
    background: white;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    line-height: 22px;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
section[name=press] ul.press li article header:before {
    content: '';
    position: absolute;
    top: 5px;
    left: -29px;
    width: 10px;
    height: 10px;
    border: 3px solid #fff;
    border-radius: 100px;
    box-shadow: 0 1px 1px rgba(0,0,0, .2), inset 0 1px 1px rgba(0,0,0, .1);
    background: #999;
}
section[name=press] ul.press li article header:after {
    content: '';
    position: absolute;
    top: 7px;
    left: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 7px 5px 0;
    border-color: transparent #FFFFFF transparent transparent;
}
section[name=press] ul.press li article header label {
    cursor: pointer;
}
section[name=press] ul.press li article header:hover:before {
    background: #F90;
}

section[name=press] ul.press li article footer {
    margin: 10px 0 0 11px;
    font-size: 14px;
    color: #666;
}
section[name=press] ul.press li article main {
    display: none;
    border: 1px dotted #CCC;
    background: white;
    padding: 10px;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
section[name=press] ul.press li article main p:first-child {
    margin-top: 0;
}
section[name=press] ul.press li article main p:last-child {
    margin-bottom: 0;
}

/* TRICK */

section[name=press] ul.press li input[type=checkbox] {
    display: none;
}
section[name=press] ul.press li input[type=checkbox]:checked ~ article header:before {
    background: #A91816;
}
section[name=press] ul.press li input[type=checkbox]:checked ~ article header {
    color: #A91816;
}
section[name=press] ul.press li input[type=checkbox]:checked ~ article main {
    display: block;
}

/* ------------------------------------------------------------------------------------------------------------------
   PARTNERS
   ------------------------------------------------------------------------------------------------------------------ */

section[name=partners] {
    padding: 40px 0;
}
section[name=partners] h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 63px;
    color: #3C3C3C;
    margin: 0 0 40px 0;
    padding: 0;
    font-weight: 300;
}

section[name=partners] article {
    color: #DBDBDB;
    padding-left: 220px;
    position: relative;
}
section[name=partners] article > div {
    position: absolute;
    left: 0;
    height: 180px;
    width: 180px;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}
section[name=partners] article a {
    color: red;
    text-decoration: none;
}
section[name=partners] article header {
    font-size: 50px;
    color: #A91816;
    font-weight: 300;
}
section[name=partners] article blockquote {
    font-weight: 300;
    font-size: 18px;
    margin: 10px 0 20px 0;
    padding: 0;
}
section[name=partners] article footer {
    border-top: 1px solid #666;
    font-weight: 300;
    font-size: 14px;
    padding: 10px 40px 10px 0;
    text-align: right;
    position: relative;
}
section[name=partners] article footer:after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #666;
}

section[name=partners] ul.partners-dots {
    list-style-type: none;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
section[name=partners] ul.partners-dots li {
    display: inline-block;
    position: relative;
}
section[name=partners] ul.partners-dots li {
    display: inline-block;
    position: relative;
}
section[name=partners] ul.partners-dots li a {
    font-weight: 300;
    color: #666;
}
section[name=partners] ul.partners-dots li.selected a {
    font-weight: 400;
    color: #A91816;
    border-bottom: 1px solid #666;
}

section[name=partners] ul.partners-dots li:before {
    content: '·';
    display: inline-block;
    margin: 0 10px;
    color: white;
}
section[name=partners] ul.partners-dots li:first-child:before {
    content: '';
}
section[name=partners] ul.partners-dots li a {
    font-weight: 300;
    color: #666;
    text-decoration: none;
}
section[name=partners] ul.partners-dots li a:hover {
    border-bottom: 1px solid #666;
}

/* ------------------------------------------------------------------------------------------------------------------
   VIDEOS
   ------------------------------------------------------------------------------------------------------------------ */

section[name=videos] {
    padding: 40px 0;
}
section[name=videos] h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 63px;
    color: #A91816;
    margin: 0 0 40px 0;
    padding: 0;
    font-weight: 300;
}
section[name=videos] h4 img {
    width: 50px;
    margin-right: 10px;
    vertical-align: middle;
}

section[name=videos] article div.media {
    display: block;
    width: 96px;
    height: 20px;

    background: transparent url(/img/sprite-media.png) no-repeat top left;
}
section[name=videos] article div.media.dr-1     { background-position: 0    0px; width: 96px; height: 20px; }
section[name=videos] article div.media.dr-2     { background-position: 0  -20px; width: 96px; height: 20px; }
section[name=videos] article div.media.dr-dk    { background-position: 0  -40px; width: 96px; height: 20px; }
section[name=videos] article div.media.on-side  { background-position: 0  -60px; width: 96px; height: 20px; }
section[name=videos] article div.media.lfc-tv   { background-position: 0  -80px; width: 96px; height: 20px; }
section[name=videos] article div.media.youtube  { background-position: 0 -100px; width: 96px; height: 20px; }
section[name=videos] article div.media.6-eren   { background-position: 0 -120px; width: 96px; height: 20px; }

section[name=videos] article iframe {
    border: 3px solid #333;
    margin: 10px 0 5px 0;
}
section[name=videos] article iframe:hover {
    border: 3px solid #A91717;
}
section[name=videos] article footer {
    font-size: 12px;
}
section[name=videos] button.slick-prev:before,
section[name=videos] button.slick-next:before {
    color: #A91717;
    font-size: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------
   SHARE
   ------------------------------------------------------------------------------------------------------------------ */

section[name=share] {
    padding: 40px 0;
    color: white;
    text-align: center;
}
section[name=share] h4,
section[name=share] h6 {
    margin: 0;
    padding: 0;
    font-weight: 300;
}
section[name=share] h4 { font-size: 43px; line-height: 48px; }
section[name=share] h6 { font-size: 20px; line-height: 40px; }

/* ------------------------------------------------------------------------------------------------------------------ */

section[name=share] ul.social {
    margin-top: 20px;
}

/* ------------------------------------------------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------------------------------------------------ */

body > footer {
    padding: 40px 0;
    background-color: #535353;
    color: #DDD;
    font-weight: 300;
}

/* ------------------------------------------------------------------------------------------------------------------ */

body > footer ul.links {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
}
body > footer ul.links li {
    padding: 2px 0;
    font-size: 16px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

body > footer ul.flags {
    list-style-type: none;
    margin: 20px 0;
    padding: 0;
    display: block;
    text-align: center;
}
body > footer ul.flags li {
    display: inline-block;
    margin: 0px 2px;
}

body > footer ul.flags li a.flags {
    display: block;
    width: 24px;
    height: 24px;
    text-indent: -99999px;
    overflow: hidden;

    background: url(/img/sprite-flags.png) no-repeat top left;
}
body > footer ul.flags li a.flags.ue { background-position:    0px 0; width: 24px; height: 24px; }
body > footer ul.flags li a.flags.us { background-position:  -24px 0; width: 24px; height: 24px; }
body > footer ul.flags li a.flags.de { background-position:  -48px 0; width: 24px; height: 24px; }
body > footer ul.flags li a.flags.fr { background-position:  -72px 0; width: 24px; height: 24px; }
body > footer ul.flags li a.flags.dk { background-position:  -96px 0; width: 24px; height: 24px; }
body > footer ul.flags li a.flags.gb { background-position: -120px 0; width: 24px; height: 24px; }
body > footer ul.flags li a.flags.pt { background-position: -144px 0; width: 24px; height: 24px; }

body > footer ul.flags li a.flags:hover {
    border-bottom: 0 none;
}

/* ------------------------------------------------------------------------------------------------------------------ */

body > footer section#disclaimer {
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
}
body > footer section#disclaimer p {
    margin: 0;
    padding: 0;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */

body > footer a {
    color: #DDD;
    text-decoration: none;

    -webkit-transition: all 0.25s ease-in;
       -moz-transition: all 0.25s ease-in;
         -o-transition: all 0.25s ease-in;
            transition: all 0.25s ease-in;
}
body > footer a:hover {
    color: white;
    border-bottom: 1px dotted white;
}

/* ------------------------------------------------------------------------------------------------------------------ */

body > footer i#scrollUp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: rgba(0,0,0, .25);
    cursor: pointer;
}
body > footer i#scrollUp:hover {
    color: rgba(169,24,22, 1);
}

/* ------------------------------------------------------------------------------------------------------------------
   PAGES
   ------------------------------------------------------------------------------------------------------------------ */

section.page {
    padding: 40px 0;
}

section.page h1,
section.page h2,
section.page h3,
section.page h4,
section.page h5,
section.page h6 {
    color: #A91816;
    margin: 0;
    font-weight: 400;
}

section.page h1.underline ,
section.page h2.underline ,
section.page h3.underline ,
section.page h4.underline ,
section.page h5.underline ,
section.page h6.underline  {
    margin-bottom: 10px;
    border-bottom: 1px solid #A91816;
}

section.page h1 { font-size: 36px; }
section.page h2 { font-size: 32px; }
section.page h3 { font-size: 28px; }
section.page h4 { font-size: 24px; }
section.page h5 { font-size: 20px; }
section.page h6 { font-size: 16px; }

/* ------------------------------------------------------------------------------------------------------------------ */

section.page a,
section.page a:active,
section.page a:link,
section.page a:visited {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dotted #666;
}
section.page a:hover {
    color: #A91816;
    border-bottom: 1px dotted #A91816;
}

/* ------------------------------------------------------------------------------------------------------------------ */

section.page dl,
section.page dl dt,
section.page dl dd {
    margin: 0;
    padding: 0;
}
section.page dl dt {
    margin-top: 20px;
}
section.page dl dd p {
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

span.gold {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fed24a), color-stop(100%, #934a0f));
    background-image: -webkit-linear-gradient(#fed24a,#934a0f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #934a0f;
    text-shadow: 0px 2px 4px rgba(254,210,74, .5);
}

/* ------------------------------------------------------------------------------------------------------------------
   THANKS
   ------------------------------------------------------------------------------------------------------------------ */

section[name=gold-ambassadors] .pure-g .pure-u-1 .pure-g strong {
    text-transform: capitalize;
    color: #A91816;
}
section[name=gold-ambassadors] .pure-g .pure-u-1 .pure-g a {
    font-size: small;
}
section[name=gold-ambassadors] .pure-g .pure-u-1 .pure-g a:before {
    content: '(';
}
section[name=gold-ambassadors] .pure-g .pure-u-1 .pure-g a:after {
    content: ')';
}

section[name=normal-ambassadors] fieldset {
    border: 0px none;
    margin: 20px 0;
    padding: 20px 0 0 0;
}
section[name=normal-ambassadors] fieldset legend select {
    border: 1px solid #A91816;
    padding: 5px 10px;
    color: #1E1E1E;
    font-size: small;
}
section[name=normal-ambassadors] fieldset legend select option {
    color: #1E1E1E;
}

section[name=normal-ambassadors] table {
    border: 1px solid #CCC;
}
section[name=normal-ambassadors] table thead {
    background-color: #EEE;
    border-bottom: 2px solid #999;
}
section[name=normal-ambassadors] table thead th {
    padding: 5px;
}

section[name=normal-ambassadors] table tbody {
    font-size: 14px;
}
section[name=normal-ambassadors] table tbody tr td {
    padding: 5px;
    border-left: 1px dashed #CCC;
    border-right: 1px dashed #CCC;
    border-bottom: 1px solid #999;
}
section[name=normal-ambassadors] table tbody td:nth-child(1) { text-align: left; border-left: 0px none; }
section[name=normal-ambassadors] table tbody td:nth-child(2) { text-align: left; color: #A91816; }
section[name=normal-ambassadors] table tbody td:nth-child(3) { text-align: left; }
section[name=normal-ambassadors] table tbody td:nth-child(4) { text-align: left; }
section[name=normal-ambassadors] table tbody td:nth-child(5) { text-align: right; border-right: 0px none; }

section[name=normal-ambassadors] table tbody td:nth-child(5) small { margin-left: 5px; }

/* ------------------------------------------------------------------------------------------------------------------
   FAQ & SUPPORT
   ------------------------------------------------------------------------------------------------------------------ */

section[name=faq] details {
    border: 0 none;
    outline: none;
    margin: 20px 0;
}
section[name=faq] details summary {
    cursor: pointer;
    outline: none;
    font-weight: 700;
}
section[name=faq] details blockquote {
    display: block;
    margin: 5px 0 0 5px;
    padding: 5px 0 5px 20px;
    border-left: 1px solid #CCC;
}

/* ------------------------------------------------------------------------------------------------------------------
   PRESS PHOTOS
   ------------------------------------------------------------------------------------------------------------------ */

section[name=press-photos] ul.polaroids {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
section[name=press-photos] ul.polaroids li {
    border: 10px solid white;
    text-align: center;
    margin: 20px auto;
    display: inline-block;
    box-shadow: 1px 2px 5px 2px rgba(0,0,0, .25);
    width: 124px;
    height: 190px;

    -webkit-transform: rotate(-2deg);
       -moz-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
         -o-transform: rotate(-2deg);
            transform: rotate(-2deg);
}

section[name=press-photos] ul.polaroids li a {
    border: 0px none !important;
    text-decoration: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
section[name=press-photos] ul.polaroids li a:after {
    content: attr(title);
}
section[name=press-photos] ul.polaroids li a img {
    border: 1px solid #999;
}

section[name=press-photos] ul.polaroids li:nth-child(even) {
    -webkit-transform: rotate(2deg);
       -moz-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
         -o-transform: rotate(2deg);
            transform: rotate(2deg);
}
section[name=press-photos] ul.polaroids li:nth-child(3n) {
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
           -transform: none;
}
section[name=press-photos] ul.polaroids li:nth-child(5n) {
    -webkit-transform: rotate(2deg);
       -moz-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
         -o-transform: rotate(2deg);
            transform: rotate(2deg);
}

section[name=press-photos] ul.polaroids li:hover {
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
}

/* ------------------------------------------------------------------------------------------------------------------
   CONTACT US
   ------------------------------------------------------------------------------------------------------------------ */

section[name=contact-us] legend {
    border-bottom: 1px solid #A91816;
}

section[name=contact-us] button[type=submit] {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: white;
    border: 0px none;
    text-decoration: none;

    background: #92c301;
    background: -moz-linear-gradient(top,  #92c301 0%, #5b8713 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92c301), color-stop(100%,#5b8713));
    background: -webkit-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -o-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -ms-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: linear-gradient(to bottom,  #92c301 0%,#5b8713 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c301', endColorstr='#5b8713',GradientType=0 );

    padding: 10px 20px;
}
section[name=contact-us] button[type=submit] i.fa {
    margin-left: 10px;
}

section[name=contact-us] .pure-form-aligned .pure-controls {
    margin: 10px 0 0 180px;
}

/* ------------------------------------------------------------------------------------------------------------------
   STEPS
   ------------------------------------------------------------------------------------------------------------------ */

ol.steps {
    display: block;
    color: #666;
    text-align: center;

    padding: 35px 0 0 0;

    counter-reset: li;
    list-style: none;
    *list-style: decimal;
}
ol.steps li {
    position: relative;
    display: inline-block;
    font-size: 12pt;
    text-align: center;
    font-weight: 300;
    margin: 0 20px;
    opacity: .5;
}
ol.steps li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    top: 0;
    left: 50%;

    background-color: #666;
    color: white;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;

    -webkit-transform: translate(-50%, -35px);
       -moz-transform: translate(-50%, -35px);
        -ms-transform: translate(-50%, -35px);
         -o-transform: translate(-50%, -35px);
            transform: translate(-50%, -35px);
}
ol.steps li a {
    color: #666;
    text-decoration: none;
}

ol.steps li.selected {
    color: #A91816;
    font-weight: 400;
    opacity: 1;
}
ol.steps li.selected a {
    color: #A91816;
}
ol.steps li.selected:before {
    background-color: #A91816;
}

/* ------------------------------------------------------------------------------------------------------------------
   STEP #1
   ------------------------------------------------------------------------------------------------------------------ */

section[name=step-1] {
    padding: 40px 0;
}
section[name=step-1] .pure-u-1 {
    position: relative;
}
section[name=step-1] .pure-g:nth-child(2) .pure-u-1:before {
    content: '';
    position: absolute;
    bottom: -40px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url(/img/william-charityantivirus-cofounder.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

section[name=step-1] h4 {
    font-size: 48px;
    color: #A91816;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

section[name=step-1] form {
    margin-top: 40px;
}
section[name=step-1] form small {
    margin: 5px 0 10px 180px;
    display: block;
    text-align: left;
    color: red;
    white-space: nowrap;
}
section[name=step-1] form label[for=confirm] {
    font-size: small;
    margin-bottom: 20px;
}
section[name=step-1] form label[for=confirm] a {
    color: #A91816;
    text-decoration: none;
}
section[name=step-1] form label[for=confirm] a:hover {
    border-bottom: 1px dotted #A91816;
}

section[name=step-1] button {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: white;
    border: 0px none;
    text-decoration: none;

    background: #92c301;
    background: -moz-linear-gradient(top,  #92c301 0%, #5b8713 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92c301), color-stop(100%,#5b8713));
    background: -webkit-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -o-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -ms-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: linear-gradient(to bottom,  #92c301 0%,#5b8713 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c301', endColorstr='#5b8713',GradientType=0 );

    padding: 10px 20px;
    margin-top: 20px;
}
section[name=step-1] button i.fa {
    margin-left: 10px;
}

/* ------------------------------------------------------------------------------------------------------------------
   STEP #2
   ------------------------------------------------------------------------------------------------------------------ */

section[name=step-2] {
    padding: 40px 0;
    position: relative;
    height: 475px;
}
section[name=step-2]:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1345px;
    height: 555px;
    background-color: transparent;
    background-image: url(/img/william-charityantivirus-cofounder-says.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;

    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

}

section[name=step-2] h4 {
    font-size: 48px;
    color: #A91816;
    font-weight: 300;
    margin: 0;
    padding: 0;
}
section[name=step-2] h6 {
    font-size: 22px;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

section[name=step-2] .button {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: white;
    border: 0px none;
    text-decoration: none;

    background: #92c301;
    background: -moz-linear-gradient(top,  #92c301 0%, #5b8713 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92c301), color-stop(100%,#5b8713));
    background: -webkit-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -o-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -ms-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: linear-gradient(to bottom,  #92c301 0%,#5b8713 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c301', endColorstr='#5b8713',GradientType=0 );

    padding: 10px 20px;
}
section[name=step-2] .button i.fa {
    margin-left: 10px;
}

section[name=step-2] .button.free {
    font-size: 14px;

    background: #b5bdc8;
    background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b));
    background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%);
    background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%);
    background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%);
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 );

    position: relative;
    margin: 200px 0 0 5px;
}
section[name=step-2] .button.free:before {
    z-index: -1;
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 367px;
    height: 229px;
    background-image: url(/img/chariryantivirus-product-versions.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
}

section[name=step-2] fieldset {
    border: 0px none;
    padding: 10px 0;
    margin: 0;
}
section[name=step-2] fieldset legend {
    font-size: 12px;
}
section[name=step-2] fieldset legend select {
    font-family: 'Roboto Condensed', sans-serif;
    padding: 2px 4px;
}

section[name=step-2] ul {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
}
section[name=step-2] ul li {
    margin: 5px 0;
    padding: 0;
    line-height: 28px;
}
section[name=step-2] ul li span.stroked {
    text-decoration: line-through;
}

/* Based on https://cssdeck.com/labs/css-checkbox-styles */

section[name=step-2] input[type=radio][name=version] {
    visibility: hidden;
}

section[name=step-2] .squaredOne {
    width: 28px;
    height: 28px;

    display: inline-block;
    margin-right: 10px;

    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0, .5);
       -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0, .5);
            box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0, .5);

    position: relative;
}

section[name=step-2] .squaredOne label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, 1);
       -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, 1);
            box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, 1);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

section[name=step-2] .squaredOne label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;

    background: #92c301;
    background: -moz-linear-gradient(top,  #92c301 0%, #5b8713 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#92c301), color-stop(100%,#5b8713));
    background: -webkit-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -o-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: -ms-linear-gradient(top,  #92c301 0%,#5b8713 100%);
    background: linear-gradient(to bottom,  #92c301 0%,#5b8713 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92c301', endColorstr='#5b8713',GradientType=0 );

    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0, .5);
       -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0, .5);
            box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0, .5);
}

section[name=step-2] .squaredOne label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

section[name=step-2] .squaredOne input[type=radio]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

/* ------------------------------------------------------------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------------------------------------------------------------ */

nav {
    margin: 0 0 20px 0;
    padding: 5px 0;

    background-color: #EEE;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
nav ul li {
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 12px;
    font-weight: 300;
}
nav ul li:after {
    content: "\f105";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    color: #666;
}
nav ul li:last-child:after {
    content: "";
    display: none;
}
nav ul li a {
    padding: 5px 10px;
}
nav ul li a i.fa {
    color: #999;
    margin-right: 2px;
}
nav ul li a.selected {
    font-weight: 700;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
