﻿/* * * * */
/*  HOME */
/* * * * */

/* SLIDER */
div.layoutPc{width:980px; height:540px; background:url(../Img/home/layoutMac.png) no-repeat center top; margin:auto; text-align:left; margin-bottom:30px}

    /* SLIDE COLS */
    div.layoutPc div.ColArrow{width:100px; height:203px; padding-top:220px}
    div.layoutPc label.slideLeft{width:50px; height:50px; background:url(../Img/home/screens/arrow.png) no-repeat; display:inline-block;}
    div.layoutPc label.slideRight{width:50px; height:50px; background:url(../Img/home/screens/arrow.png) no-repeat; display:inline-block; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";}
    div.layoutPc label[class^="slide"]:hover{background-position:0 -50px; cursor:pointer}
    div.layoutPc input[name="slide-btn"]{display:none;}
    
    /* SLIDE OPTIONS */

    /* SLIDE 1 */
    #slide1:checked ~ div .screen1{margin-left:0px;}
    #slide1:checked ~ div .screen2{margin-left:676px;}
    #slide1:checked ~ div .screen3{margin-left:676px;}
    #slide1:checked ~ div .screen4{margin-left:676px;}
    #slide1:checked ~ div .screen5{margin-left:676px;}
    #slide1:checked ~ div .screen6{margin-left:676px;}
    
    #slide1:checked ~ div.ColArrow label{display:none}
    #slide1:checked ~ div.ColArrow label.lslide6{display:block}
    #slide1:checked ~ div.ColArrow label.rslide2{display:block}
    
    /* SLIDE 2 */
    #slide2:checked ~ div .screen1{margin-left:-676px;}
    #slide2:checked ~ div .screen2{margin-left:0;}
    #slide2:checked ~ div .screen3{margin-left:676px;}
    #slide2:checked ~ div .screen4{margin-left:676px;}
    #slide2:checked ~ div .screen5{margin-left:676px;}
    #slide2:checked ~ div .screen6{margin-left:676px;}
    
    #slide2:checked ~ div.ColArrow label{display:none}
    #slide2:checked ~ div.ColArrow label.lslide1{display:block}
    #slide2:checked ~ div.ColArrow label.rslide3{display:block}

    /* SLIDE 3 */
    #slide3:checked ~ div .screen1{margin-left:-676px;}
    #slide3:checked ~ div .screen2{margin-left:-676px;}
    #slide3:checked ~ div .screen3{margin-left:0;}
    #slide3:checked ~ div .screen4{margin-left:676px;}
    #slide3:checked ~ div .screen5{margin-left:676px;}
    #slide3:checked ~ div .screen6{margin-left:676px;}

    #slide3:checked ~ div.ColArrow label{display:none}
    #slide3:checked ~ div.ColArrow label.lslide2{display:block}
    #slide3:checked ~ div.ColArrow label.rslide4{display:block}

    /* SLIDE 4 */
    #slide4:checked ~ div .screen1{margin-left:-676px;}
    #slide4:checked ~ div .screen2{margin-left:-676px;}
    #slide4:checked ~ div .screen3{margin-left:-676px;}
    #slide4:checked ~ div .screen4{margin-left:0;}
    #slide4:checked ~ div .screen5{margin-left:676px;}
    #slide4:checked ~ div .screen6{margin-left:676px;}

    #slide4:checked ~ div.ColArrow label{display:none}
    #slide4:checked ~ div.ColArrow label.lslide3{display:block}
    #slide4:checked ~ div.ColArrow label.rslide5{display:block}

    /* SLIDE 5 */
    #slide5:checked ~ div .screen1{margin-left:-676px;}
    #slide5:checked ~ div .screen2{margin-left:-676px;}
    #slide5:checked ~ div .screen3{margin-left:-676px;}
    #slide5:checked ~ div .screen4{margin-left:-676px;}
    #slide5:checked ~ div .screen5{margin-left:0;}
    #slide5:checked ~ div .screen6{margin-left:676px;}

    #slide5:checked ~ div.ColArrow label{display:none}
    #slide5:checked ~ div.ColArrow label.lslide4{display:block}
    #slide5:checked ~ div.ColArrow label.rslide6{display:block}

    /* SLIDE 6 */
    #slide6:checked ~ div .screen1{margin-left:-676px;}
    #slide6:checked ~ div .screen2{margin-left:-676px;}
    #slide6:checked ~ div .screen3{margin-left:-676px;}
    #slide6:checked ~ div .screen4{margin-left:-676px;}
    #slide6:checked ~ div .screen5{margin-left:-676px;}
    #slide6:checked ~ div .screen6{margin-left:0;}

    #slide6:checked ~ div.ColArrow label{display:none}
    #slide6:checked ~ div.ColArrow label.lslide5{display:block}
    #slide6:checked ~ div.ColArrow label.rslide1{display:block}

    /* SCREENS */
    div.layoutPc div.slideScreens{width:727px; padding:30px 0 0 53px;}
    div.layoutPc div[class^="screen"]{width:676px; height:423px; display:inline-block; vertical-align:top; position:absolute; transition:all 1s ease;}
    div.layoutPc div.slidesWrapper{width:676px; height:423px; position:absolute; clip:rect(0px,676px,423px,0px)}

/* FEATURES */
div.home_feature{padding:60px 100px; font-size:18px; color:#c8c8c8; background:#3962ad; border-top:solid 1px #5579b9; border-bottom:solid 1px #5579b9;}
div.home_feature h3{font-size:24px; color:white; margin-bottom:20px; font-family: 'Signika', sans-serif; font-weight:500}
div.home_feature p{width:480px; font-size:18px; line-height:1.6em; font-weight:300}
div.home_feature p.link{color:white; font-size:14px; display:none}
div.home_feature p.link a{text-decoration:underline}
div.home_rightFeature p{float:right}

div#feat_100online{height:350px; text-align:left; background:#3962ad url(../Img/home/home_feat_cloud.png) no-repeat; background-position:right 50px bottom; background-position-x: 93%; background-position-y: 100%;}
div#feat_customizable{text-align:right; background:url(../Img/home/home_feat_customizable.png) no-repeat; background-position:left 100px center; background-position-x: 11%; background-position-y: 50%;}
div#feat_electronic-invoice{text-align:left;}
div#feat_stock{text-align:left; background:url(../Img/home/home_feat_stock.png) no-repeat; background-position:right -100px bottom -80px; background-position-x: 140%; background-position-y: -34%;}
div#feat_ecommerce{text-align:right; background:#3962ad url(../Img/home/home_feat_ecommerce.png) no-repeat; background-position:left 100px center; background-position-x: 11%; background-position-y: 50%;}
div#feat_solution{background:none; text-align:left}
div#feat_scalability{height:300px; text-align:left; background:#3962ad url(../Img/home/home_feat_scalability.png) no-repeat; background-position:right 50px top 20px; background-position-x: 94%; background-position-y:110%;}

div.feat50{width:calc(50%); float:left; background:url(../Img/ico/feat_tick_38.png) no-repeat left top;}
div.feat50 div{margin-left:60px;}
