/*main section styles*/


/*colors*/

main {
    color: white;
    position: relative;
}

[-data-article-main] {
    background: rgba(30, 144, 255, 0.71);
    box-shadow: 0 .5em 1em -.3em rgba(0,0,0,0.5);
}

/*article widget*/

/*main*/
[-data-article-main] {
    overflow: hidden;
    position: relative;
    height: 15em;
}

[-data-article-main] section {
    position: absolute;
    top: 1em;
    left: 4000px;
    transition: left 300ms ease-in-out;
    height: 85%;
    max-width: 90%;
    overflow: hidden;
}

[for="radio-a"]:before {
    content: "1";
    display: inline-block;
    padding: 0 .5em;
    color: #7a7a7a;
}

[for="radio-b"]:before {
    content: "2";
    display: inline-block;
    padding: 0 .5em;
    color: #7a7a7a;
}

[for="radio-c"]:before {
    content: "3";
    display: inline-block;
    padding: 0 .5em;
    color: #7a7a7a;
}

[for="radio-d"]:before {
    content: "4";
    display: inline-block;
    padding: 0 .5em;
    color: #7a7a7a;
}


input[name="slides"] {
    display: none;
}

#radio-a:checked ~section:nth-of-type(1) {
    left: 1em;
}


#radio-b:checked ~section:nth-of-type(2) {
    left: 1em;
}


#radio-c:checked ~section:nth-of-type(3) {
    left: 1em;
}


#radio-d:checked ~section:nth-of-type(4) {
    left: 1em;
}

/*silder navigator position*/
nav[-data-slider=""] {
    margin: 3em 1em 1em 1em;
}


/*learn more button position*/
[-data-btn="main"] {
    margin: 2em 0 9em 1em;
}
/*learn more button icon*/
[role="main"] button:after {
    content: url('../img/btnArrow.png');
    display: inline-block;
    margin-left: 1em;
    vertical-align: middle;
}


/*floating articles*/
[-data-article-float] {
    border-radius: .5em;
    height: 11em;
    padding: 1em;
    margin: 1em 0;
    position: relative;
}

[-data-article-float]:hover {
    text-decoration: underline;
}

[-data-article-float="pink"]:hover {
    background: #992a5e;
}

[-data-article-float="green"]:hover {
    background: #458b2c;
}

[-data-article-float="orange"]:hover {
    background: #cf7900;
}


[-data-article-float]:after {
    content: url('../img/promotion-item-arrow.png');
    position: absolute;
    top: 50%;
    right: 1em;
}

[role="main"] a{
    color: white;
}

[-data-article-float="green"] {
    background: #69C33C;
    box-shadow: 0 .2em .4em rgba(0,0,0,.5);
}

[-data-article-float="green"] p:before {
    content: url('../img/link-icon-image.png');
    vertical-align: middle;
}

[-data-article-float="pink"] {
    background: #D13A85;
    box-shadow: 0 .2em .4em rgba(0,0,0,.5);
}

[-data-article-float="pink"] p:before {
    content: url('../img/link-icon-image.png');
    vertical-align: middle;
}


[-data-article-float="orange"] {
    background: #FF8C00;
    box-shadow: 0 .2em .4em rgba(0,0,0,.5);
}

[-data-article-float="orange"] p:before {
    content: url('../img/link-icon-image.png');
    vertical-align: middle;
}

[-data-article-float] h2 {
    font-size: 1.5em;
    font-weight: 100;
}

[-data-article-float] p {
    position: absolute;
    bottom: 1em;
    vertical-align: middle;
}