/*=============================================================
                    Fonts
=============================================================*/

@font-face {
	font-family: "MyriadPro-Regular";
	src: url("../fonts/MyriadPro-Regular.eot");
	src: url("../fonts/MyriadPro-Regular.eot?#iefix") format("embedded-opentype"),
		 url("../fonts/MyriadPro-Regular.woff") format("woff"),
		 url("../fonts/MyriadPro-Regular.ttf") format("truetype"),
		 url("../fonts/MyriadPro-Regular.svg#Lobster") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "MyriadPro-Bold";
	src: url("../fonts/MyriadPro-Bold.eot");
	src: url("../fonts/MyriadPro-Bold.eot?#iefix") format("embedded-opentype"),
		 url("../fonts/MyriadPro-Bold.woff") format("woff"),
		 url("../fonts/MyriadPro-Bold.ttf") format("truetype"),
		 url("../fonts/MyriadPro-Bold.svg#Lobster") format("svg");
	font-weight: normal;
	font-style: normal;
}

/*=============================================================
                    Structure
=============================================================*/

    body{
        width: 100%;
        height: 100%;
        display: block;
/*        background-color: #fbfbfb;*/
    }

    #page{
        margin-bottom: 50px;   
    }

    #page .page-wrapper{
        display: block;
        width: 100%;
        max-width: 1200px;
        height: auto;
        margin: 0 auto;
    }

/*=============================================================
                    Introduction
=============================================================*/
    .introduction{
        margin-bottom: 40px;   
    }
    .introduction .bloc_title{
        margin: 50px 0 0 0;   
        font-family: 'MyriadPro-Bold';
        font-size: 2em;
    }
    .introduction .chapeau{
        font-family: 'MyriadPro-Bold' !important;
        color: #000;
        font-weight: bold;
    }
    .introduction p{
        font-family: 'MyriadPro-Regular' !important;
        color: #6c6c6c;
        font-size: 1.1em !important;
    }

/*=============================================================
                    Box des naviguateurs
=============================================================*/
    #page .page-wrapper:after{
        content: '.';
        height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }

    #page .page-wrapper .box{
        display: block;
        width: 23%;
        height: auto;
        min-height: 560px;
        background-color: #f1f1f1;
        margin: 0;
        padding: 0;
        padding-top: 200px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
           -moz-border-radius: 8px;
            -ms-border-radius: 8px;
             -o-border-radius: 8px;
        box-shadow: 2px 4px 0px #f3f3f3;
        -webkit-box-shadow: 2px 4px 0px #f3f3f3;
           -moz-box-shadow: 2px 4px 0px #f3f3f3;
            -ms-box-shadow: 2px 4px 0px #f3f3f3;
             -o-box-shadow: 2px 4px 0px #f3f3f3;
        float: left;                                                                                                        
    }
    #page .page-wrapper .box hr{
        border: 1px solid #f3f3f3;
        width: 80%;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #page .page-wrapper .box.ie{
        background-image: url('../img/ie.png');
        background-repeat: no-repeat;
        background-position: center 30px;
    }
    #page .page-wrapper .box.chrome{
        background-image: url('../img/chrome.png');
        background-repeat: no-repeat;
        background-position: center 30px;
    }
    #page .page-wrapper .box.firefox{
        background-image: url('../img/firefox.png');
        background-repeat: no-repeat;
        background-position: center 30px;
    }
    #page .page-wrapper .box.safari{
        background-image: url('../img/safari.png');
        background-repeat: no-repeat;
        background-position: center 30px;
    }
    #page .page-wrapper .box.ie,
    #page .page-wrapper .box.chrome,
    #page .page-wrapper .box.firefox{
        margin-right: 30px;
    }
    #page .page-wrapper .box .title{
        display: block;
        width: 100%;
        height: auto;
        font-size: 1.7em;
        font-family: 'MyriadPro-Bold';
        text-align: center;
    }
    #page .page-wrapper .box p{
        display: block;
        width: 80%;
        margin: 0 auto;
        padding-left: 30px;
        box-sizing: border-box;
        font-family: 'MyriadPro-Regular' !important;
        position: relative;
        color: #6c6c6c;
        font-size: 1.1em !important;
    }
    #page .page-wrapper .box p strong{
         color: #000;   
    }

    #page .page-wrapper .box p .check{
        display: block; 
        width: 20px;
        height: 20px;
        margin-left: 10px;
        background-image: url('../img/check.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
        position: absolute;
        left: -10px;
        top: -1px;
    }


/*=============================================================
                    Version responsive
=============================================================*/

@media only screen and (max-width: 1425px){
    #page .page-wrapper .box.ie,
    #page .page-wrapper .box.chrome,
    #page .page-wrapper .box.firefox{
        margin-right: 20px;
    }
}

@media only screen and (max-width: 1024px){
    #page .page-wrapper{
        width: 90% !important;   
    }
    #page .page-wrapper .box{
        width: 45%;   
        margin-bottom: 30px;
        min-height: 400px;
    }
    #page .page-wrapper .box.ie,
    #page .page-wrapper .box.firefox{
        margin-left:10px;   
    }
    #page .page-wrapper .box.chrome{
        margin-right: 0px !important;
    }
}

@media only screen and (max-width:720px){
    #page .page-wrapper .box{
        width: 100%;   
        margin-bottom: 30px;
        min-height: 0px;
        height: auto !important;
        margin-left:0px !important; 
        margin-right: 0px !important;
        padding-bottom: 30px;
    }
}