/*************************General*************************/
*{
margin: 0;
padding: 0;
text-decoration: none;
color: black;
font-family:'Open Sans',sans-serif;
}


/*************************Body*************************/
body{
background-color: rgb(250, 250, 250);
}

/*************************Header*************************/
.header ul{
position: fixed;
height: 52px;
width: 100%;
z-index: 2;
top: 0;
left: 0;
background: linear-gradient(to right, rgb(0,135,255), 55%, white);
}


.header li{
display: inline-block;
height: 52px;
}

.header a{
position: relative;
top: -19px;
left: 57px;
color: white;
font-size: larger;
font-weight: 300;
}

.header img{
height: 42px;
width: 42px;
margin: 5px 0 5px 20px;
border-radius: 50px;
}

/*************************Choice*************************/
.choice{
width: 120px;
position: relative;
margin: 150px auto 0 auto;
}

.choice:before{
content:'Mois';
position: absolute;
top: 8px;
left: -37px;
font-size: 12px;
font-weight: bold;
}

#originalVersion .choice:before{
content:'Month';
left: -46px;
}

.choice:after{
content:'Année';
position: absolute;
top: 8px;
left: 130px;
font-size: 12px;
font-weight: bold;
}

#originalVersion .choice:after{
content:'Year';
}

.choice input[type="checkbox"]{
height: 35px;
width: 120px;
-webkit-appearance: none;
background: #fafafa;
border-radius: 50px;
outline: none;
border: 1px solid rgb(150, 150, 150);
}

.choice input[type="checkbox"]:before{
content: '';
position: absolute;
height: 33px;
width: 63px;
border-radius: 50px;
top: 1px;
left: 1px;
background: rgb(0,130,250);
transition: .5s;
}

.choice input:checked[type="checkbox"]:before{
left: 56px;
}

/*************************Offers*************************/
.offers{
height: 502px;
width: 969px;
position: relative;
margin: 75px auto 0 auto;
}

.offers article{
display: inline-block;
position: relative;
height: 500px;
width: 280px;
border-radius: 5px;
background: white;
-moz-box-shadow: 0px 10px 5px #b5b5b5;
-webkit-box-shadow: 0px 10px 5px #b5b5b5;
-o-box-shadow: 0px 10px 5px #b5b5b5;
box-shadow: 0px 4px 5px #b5b5b5;
margin: 0 20px;
text-align: center;
vertical-align: top;
}

.offers .free .fade{
background: linear-gradient(45deg, rgb(0,180,255), 55%, rgb(190, 0, 190));
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.offers .start .fade{
background: linear-gradient(45deg, rgb(0, 195, 255), 55%, rgb(0, 225, 135));
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.offers .premium .fade{
background: linear-gradient(45deg, rgb(255, 75, 150), 55%, rgb(255, 185, 0));
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.offers h1{
padding: 40px 0;
font-size: 54px;
font-weight: 400;
color: white;
}

.offers h2{
margin: 0 auto;
padding: 5px 0 30px 5px;
background: url("../img/border.svg");
font-size: 26px;
font-weight: 300;
color: white;
}

.offers .start h2, .offers .premium h2{
font-size: 32px;
}

.offers .price:before{
content: '€';
font-size: 17px;
margin: 1px 0 0 -11px;
position: absolute;
}

.offers ul{
width: 80%;
margin: 25px auto 0 auto;
list-style-position: inside;
text-align: left;
font-size: 15px;
}

.offers li{
color: rgb(100, 100, 100);
}

.offers a{
position: absolute;
background: rgb(0, 175, 240);
border-radius: 50px;
padding: 10px;
bottom: 50px;
left: 68px;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
color: white;
}

#originalVersion .offers a{
padding: 10px 36px;
}

/*************************Link*************************/
.link{
width: 100%;
position: absolute;
bottom: 50px;
text-align: center;
font-size: 13px;
}

/*************************Responsive*************************/
@media only screen and (max-width: 970px){
    .offers{
    height: 100%;
    width: 280px;
    position: relative;
    margin: 75px auto 0 auto;
    }

    .offers article{
    display: block;
    position: relative;
    margin: 0 auto 50px auto;
    }

    .offers article:last-child{
    margin: 0 auto 0 auto;
    }

    .link{
    position: relative;
    margin: 25px auto;
    bottom: 0;
    }
}

@media only screen and (max-height: 850px){
    .link{
    position: relative;
    margin: 25px auto;
    bottom: 0;
    }
}