@media only screen and (max-width: 1200px) {
    header {
        width: 80% !important;
    }
    .main {
        width: 80% !important;
    }
    table.sum td.title {
        width: 100% !important;
        display: block;
    }
    table.sum td.cta {
        width: 50% !important;
        display: block !important;
        margin: auto;
        padding-top: 2%;
    }
    .title {
        text-align: center;
    }
    li.menu {
        display: block !important;
        width: 100% !important;
    }
}
@media only screen and (max-width: 800px) {
    header {
        width: 100% !important;
    }
    .main {
        width: 100%!important;
    }
    table {
        width: 100%!important;
      }
    table.table td {
        margin: 0%!important;
        width: 100%!important;
        display: block
    }
    table.table td:first-child:before {
        content: "Produits : ";
        font-weight: bolder;
    }
    table.table td:nth-child(2):before {
        content: "Prix public incl. TVA : ";
        font-weight: bolder;
    }
    table.table td:last-child:before {
        content: "RCP : ";
        font-weight: bolder;
    }
    table.table tr:nth-child(odd) {
        display: none;
    }
    div.detail {
        display: block;
        padding-left: 3%;
    }
    .tdetail {
        display: none;
    }
    .dekstop {
        display: none;
    }
    img.mobile {
       display: block;
    }
    table.sum td.title {
        width: 100% !important;
        display: block;
    }
    table.sum td.cta {
        width: 80% !important;
        display: block;
        margin: 5%!important;
    }
}
html {
    background: #00b1eb;
    background: -moz-linear-gradient(left, #00b1eb 0%, #0060a8 100%);
    background: -webkit-linear-gradient(left, #00b1eb 0%,#0060a8 100%);
    background: linear-gradient(to right, #00b1eb 0%,#0060a8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b1eb', endColorstr='#0060a8',GradientType=1 );
}
body {
    font-family: sans-serif;
    font-size: 14pt;
}
header#top {
    margin: auto;
    width: 80%;
    padding: 0;
}
.main {
    padding-top: 5%;
    width: 60%;
    margin: auto;
}
.title {
    color: #fefefe;
    font-weight: normal;
    font-size: 1.2em;
}
table.table {
    background-color: #fefefe;
    border: 3pt solid #0060a8;
    border-radius: 10pt;
    padding: 2%;
    color: #0060a8;
    font-size: 14pt;
    text-align: left;
    width: 100%;
    border-spacing: 1em;
}
table.table td:first-child {
    width: 40%;
}
table.table td:nth-child(2) {
    width: 20%;
}
table.table td:last-child {
    width: 40%;
}
th {
    font-size: 1.5em;
}
.cap {
    text-transform: uppercase;
}
.detail_in {
    padding-left: 5%;
}
a {
    color: #0060a8;
    text-decoration: inherit;
}
.tdetail {
    font-size: 0.8em;
}
.text {
    text-align: center;
    padding-top: 2%;
    padding-bottom: 5%;
    color: #fefefe;
    font-size: 1.8em;
}
.detail {
    display: none;
}
.mobile {
    display: none;
}
td.table {
    background-color: #fefefe;
    border: 3pt solid #0060a8;
    border-radius: 10pt;
    padding: 2%;
    color: #0060a8;
    font-size: 14pt;
    text-align: left; 
}
.main_sum {
    width: 60%;
    margin: auto;
    padding-top: 1%;
}
table.sum {
    width: 100%;
    border-spacing: 1em;
}
td.title {
    width: 50%;
}
td.cta {
    width: 50%;
}
td.cta div {
    width: 300px;
    margin: auto;
    background-color: #59a6d3;
    padding: 2%;
    border-radius: 10px;
    text-align: center;
}
td.cta a {
    text-align: center;
    color: #fff;
    text-decoration: inherit;
}
li.menu {
    display: inline-flex;
    width: 48%;
    height: 30px;
    line-height: 30px;
    font-size: 1.3em;
}
li.menu:before {
    content: url(../img/icone_canada.png);
    padding-right: 6%;
    align-content: center;
}