/*Main*/
*{margin:0;padding:0;border:0;user-select: none;box-sizing: border-box;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;}
html,body{height: 100%;}
body{background-color:#edecf4;color:#333;}
p{border:0;margin:0;padding:0;}
div{border:0;margin:0;padding:0;}
.clear{clear:both;}

div.mainwindow{
    border:1px solid #c8c8c8;
    border-radius:10px;
    box-shadow:2px 4px 5px #3131318c;
    width:1000px;
    min-height:500px;
    margin:50px auto;
    padding:25px 50px;
    background-color:white;
    background-position:right bottom;
    background-repeat:no-repeat;
}

div.infobox{
    background-color:#dfffde;
    border:2px solid #5ba66766;
    border-radius:8px;
    box-shadow:2px 4px 5px #3131318c;
    margin:50px 0px;
    padding:30px 40px;
}

div.infobox span.title{
    font-weight:bold;
    border-bottom:1px solid #329138;
}

div.infobox p.instruction img{
    height:220px;
    width:auto;
    padding:3px;
    background:linear-gradient(to right,
        rgba(100,200,200,1),
        rgba(100,200,200,1)
    ),linear-gradient(to right,
        rgba(255,0,0,1),
        rgba(255,0,180,1),
        rgba(0,100,200,1)
    );
    background-size:100% 100%, 0 2px;
    background-position:100% 100%, 0 100%;
    background-repeat:no-repeat;
    transition:background-size 400ms;
}
div.infobox p.instruction:hover img{
    background-size:0 100%, 100% 100%;
}
div.infobox p.instruction{
    display:block;
    text-align:center;
}

div.form fieldset{
    padding:16px;
    margin:30px 0;
    background-color:#e2f7d952;
    border:1px solid #ccc;
    border-radius:6px;
}

div.form fieldset legend{
    font-style:italic;
    padding:0 16px;
    margin-left:30px;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    background-color:#fff;
}

div.form fieldset div{
    margin:18px 0;
}

div.form fieldset div label{
    font-size:16px;
    display:block;
    float:left;
    text-align:right;
    padding-right:14px;
    width:300px;
    height:30px;
    line-height:30px;
}

div.form fieldset div label span{
    font-size:16px;
    color:red;
}
div.form fieldset div label span::before{
    content:'*';
}

div.form fieldset div input[type=text]{
    font-size:14px;
    color:#444;
    text-align:center;
    padding:0;
    margin:0;
    width:200px;
    height:30px;
    line-height:30px;
    background-color:#fff;
    border:2px solid #ccc;
    border-radius:3px;
    transition-duration:0.5s;
}
div.form fieldset div input[type=text]:hover{
    border:2px solid #777;
}
div.form fieldset div input[type=text]:focus{
    color:#222;
    border:0px solid #fff;
}

div.form fieldset div input[type=submit]{
    font-size:16px;
    letter-spacing:1px;
    color:#444;
    text-align:center;
    margin:30px 0 0px 150px;
    width:300px;
    height:30px;
    line-height:30px;
    background-color:#fff;
    border:0;
    border-radius:15px;
    box-shadow:0px 4px 6px #373737bd;
    transition-duration:0.5s;
    background:url(img/pfote.png) 10px 4px no-repeat;
    background-size:auto 24px;
    background-color:white;
}
div.form fieldset div input[type=submit]:hover{
    color:#fff;
    letter-spacing:2px;
    margin:21px 0 6px 160px;
    width:290px;
    height:32px;
    line-height:32px;
    background-color:#117ddd;
    border-radius:17px;
    box-shadow:0px 4px 8px #342e80e3;
}

/*Priceplan*/

span.popular{
    background-color:#199fef;
    color:#fff;
    margin:5px 20px;
    padding:5px 10px;
    border:1px solid #1289de;
    font-weight:bold;
    font-size:12px;
}

div.priceplan{
 margin:30px 0px;
 padding:20px 30px;
 background-color:#e8e8e8;
 color:#020202;
 border-radius:10px;
}

div.priceplan a.offer{
    display:block;
    width:300px;
    margin:10px 45px;
    padding:0;
    background-color:#fff;
    color:#222;
    text-decoration:none;
    border-radius:6px;
    box-shadow:2px 4px 9px #2f2f2fe6;
    transition-duration:0.1s;
}

div.priceplan a.offer div.title{
    padding:20px 30px;
    color:#555;
    font-weight:bold;
    font-size:16px;
    text-align:center;
    transition-duration:0.1s;
}

div.priceplan a.offer img.product{
    display:block;
    width:260px;
    height:260px;
    margin:0px auto;
    transition-duration:0.1s;
}

div.priceplan a.offer div.desc{
    padding:0px 30px;
    color:#222;
    font-size:16px;
}

div.priceplan a.offer div.desc hr{
    border:1px solid #b5b5b5b5;
    margin:20px 0;
    padding:0;
}

div.priceplan a.offer div.info{
    background-color:#efefef;
    padding:30px 0px;
    transition-duration:0.1s;
}

div.priceplan a.offer div.info div.info_content{
    width:300px;
    margin:0px auto;
    padding:0;
}

div.priceplan a.offer div.info div.rating{
    background-color:#444;
    margin-top:20px;
    border-bottom:3px solid #222;
}

div.priceplan a.offer div.desc,div.priceplan div.offer div.procon{
    color:#333;
}

div.priceplan a.offer div.procon ul{
    margin:0;
    padding:0px 40px;
    list-style-position:outside;
    list-style-type:square;
    list-style-image:url('img/ul.png');
}

div.priceplan a.offer div.procon li{
    margin:30px 10px;
    height:10px;
    line-height:10px;
    font-size:12px;
}

div.priceplan a.offer:hover{
    width:340px;
    margin:0 30px;
    box-shadow:4px 8px 15px #5757574f;
}
div.priceplan a.offer:hover div.title{
    font-size:20px;
    padding:18px 30px;
    color:#222;
}
div.priceplan a.offer:hover img.product{
    width:280px;
    height:280px;
}
div.priceplan a.offer:hover div.info{
    padding:50px 0px;
}
div.priceplan a.offer img.productView{
    min-height:260px;
    width:100%;
}