/*----------------------------------------*\
    $ICONS
    ------------------------------------
    ^button
    ^link
    ^icon
    ^icon-small
    ^icon-normal
    ^color
    ^icon-social
\*----------------------------------------*/

/*----------------------------------------*\
    ^button
\*----------------------------------------*/

.button {
    position: relative;
    display: inline-block;
    overflow: visible;

    margin: 0;
    padding: 0.15em 1em;
    border: 0;
    outline: medium none;

    color: #fff;
    cursor: pointer;
    font-size:14px;
    font-size:1rem;
    text-decoration: none;
    white-space: nowrap;
}

.button.small {
    padding: 0.6em 1em;
    font-size:10px;
    text-transform: uppercase;
}

.button.big {
    padding: 1em 1.5em;
    font-size: 1.4285rem;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
}

.button.link,
.button.mid {
    font-size:14px;
    font-size:1rem;
}

.button-container { /* Block pour contenir plusieurs groupes */

}

.button-container .button,
.button-container .button-group {
    vertical-align: top;
}

.button-group{ /* Block pour contenir un groupe */
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.button + .button,
.button + .button-group,
.button-group + .button,
.button-group + .button-group {
    margin-left: 10px;
}

.button-group .button {
    float: left;
    margin-left: -1px;
}

.button-group > .button:first-child,
.button-group li:first-child .button {
    margin-left: 0;
}

.button-group > .button:last-child,
.button-group li:last-child > .button {

}

.button-group > .button:not(:first-child):not(:last-child),
.button-group li:not(:first-child):not(:last-child) .button {

}

.round-corner {
    border-radius: 6px;
}

.round-corner.first {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.round-corner.last {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}




/*----------------------------------------*\
    ^link
\*----------------------------------------*/


.link {
    border: 1px solid #ccdbf6;
    color: #5182cf;
}
.link:hover {
    color: white;
    background: #5284d0;
}

.button.link.icon:before {
    float: left;
    margin: 0.2em 0 0 -0.9em;
    height: 16px;
    width: 16px;
    background: url(images/button-icon-link.png) no-repeat 0 0 transparent;
}

.button.link:hover.icon:before {
    background-position: 0 -16px;
}





/*----------------------------------------*\
    ^icon
\*----------------------------------------*/

.button.icon:before {
    position: relative;
    background-position: 0 -36px;
    float: right;
    margin: 0 -0.25em 0 0.5em;
    width: 24px;
    height: 24px;
    content: "";
}

.button.icon.icon-only:before{/* Affichage que l'icone */
    margin:0;
}

.button.button-left.icon:before { /* icone à gauche */
    float: left;
    margin: 0 0.25em 0 -0.25em;
}

/*--- ^icon-small ---*/

.button.small.icon:before {
    margin-top: -0.2em;
    width: 16px;
    height: 16px;
    background: url(images/button-icon-16.png) no-repeat 0 99px transparent;
}

.button.small.arrowleft.icon:before {
    background-position: 0 -16px;
}

.button.small.arrowright.icon:before {
    background-position: 0 -32px;
}

.button.small.arrowup.icon:before {
    background-position: 0 -48px;
}

.button.arrowup.icon:before {
    background-position: 0 -72px;
}

.button.small.basket.icon:before {
    background-position: 0 -62px;
}

.button.small.download.icon:before {
    background-position: 0 -78px;
}

.button.small.home.icon:before {
    background-position: 0 -94px;
}

.button.small.info.icon:before {
    background-position: 0 -110px;
}

.button.small.remove.icon:before {
    background-position: 0 -126px;
}

.button.small.validate.icon:before {
    background-position: 0 -142px;
}

/*--- ^icon-normal ---*/

.button.add.icon:before {
    background-position: 0 0;
}

.button.arrowleft.icon:before {
    background-position: 0 -24px;
}

.button.arrowright.icon:before {
    background-position: 0 -48px;
}

.button.basket.icon:before {
    background-position: 0 -96px;
}

.button.compass.icon:before {
    background-position: 0 -120px;
}

.button.download.icon:before {

    background-position: 0 -144px;
}

.button.home.icon:before {
    background-position: 0 -168px;
}

.button.info.icon:before {
    background-position: 0 -192px;
}

.button.remove.icon:before {
    background-position: 0 -216px;
}

.button.validate.icon:before {
    background-position: 0 -240px;
}

.button.user.icon:before {
    background-position: 0 -264px;
}

.button.user-press.icon:before {
    background-position: 0 -288px;
}

.button.date-news.icon:before {
    background-position: 0 -302px;
}

.button.date-press.icon:before {
    background-position: 0 -326px;
}

.button.tag.icon:before {
    background-position: 0 -350px;
}

.button.tag-dop.icon:before {
    background-position: 0 -374px;
}

.button.tag-fp.icon:before {
    background-position: 0 -398px;
}


/*--- ^icon-grey ---*/

.button.small.grey.icon:before {
    width: 16px;
    height: 16px;
    background: url(images/button-icon-16-grey.png) no-repeat 0 99px transparent;
}

.button.small.grey.arrowleft.icon:before {
    background-position: 0 -16px;
}

.button.small.grey.arrowright.icon:before {
    background-position: 0 -32px;
}

.button.small.grey.arrowup.icon:before {
    background-position: 0 -48px;
}

.button.grey.arrowup.icon:before {
    background-position: 0 -72px;
}

.button.small.grey.basket.icon:before {
    background-position: 0 -62px;
}

.button.small.grey.download.icon:before {
    background-position: 0 -78px;
}

.button.small.grey.home.icon:before {
    background-position: 0 -94px;
}

.button.small.grey.info.icon:before {
    background-position: 0 -110px;
}

.button.small.grey.remove.icon:before {
    background-position: 0 -126px;
}

.button.small.grey.validate.icon:before {
    background-position: 0 -142px;
}





/*----------------------------------------*\
    ^color
\*----------------------------------------*/

.button.blue{
    background-color: #5182cf;
}

.button.red{
    background: #ee0000;
}

.button.green{
    background: #7aad3c;
}

.button.grey{
    color: #535353;
    background: #efefef;
}

.button.grey-light {
    color: #363636;
    background: #f3f5f6;
    border: 1px solid #dcdcdc;
}





/*--- ^tags ---*/
.button.tag.icon:before {
    background-position: 0 0;
}




/*--- ^icon-social ---*/

.button.social{
    background: none;
    border: none;
    padding:0 0.2em;
    margin-left: 0;
}
.button.social > span{
    position: absolute;
    left: -9999px;
}
.button.social.icon:before {
    margin: 0;
    width: 32px;
    height: 32px;
    background: url(images/button-icon-social-32.png) 0 1000px no-repeat transparent;
}
.button.social-footer{
    margin-left: 0;
    padding: 0;
}
.button.newsletter.icon:before {
    background-position: 0 0;
}
.button.fb.icon:before {
    background-position: 0 -32px;
}
.button.twitter.icon:before {
    background-position: 0 -64px;
}
.button.gplus.icon:before {
    background-position: 0 -96px;
}
.button.youtube.icon:before {
    background-position: 0 -128px;
}

.button.linkedin.icon:before {
    background-position: 0 -150px;
}

/*--
Layout
--*/

/*-- product home --*/
.button-container.product-home{
    margin-top: -55px;
    margin-right: 40px
}

/*-- product bottom --*/
.button-container.product-bottom{
    margin-top: 9px;
}


/* ------------------------------------- */
/* modif BUD - header & footer */
/* ------------------------------------- */


/*----------------------------------------*\
    ^button
\*----------------------------------------*/
.btn {
    position: relative;
    display: inline-block;
    overflow: visible;
    margin: 0;
    padding: 8px 20px;
    padding: 0.5rem 1.5rem;
    outline: medium none;
    cursor: pointer;
    font-family: 'Maven Pro', arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn--default {
    background-color: transparent;
    border: 2px solid #7ed6dc;
    color: #7ed6dc;
}
.btn--default:hover,
.btn--default:hover.btn--download,
.btn--cta:hover {
    background-color: #10B0BB;
    border-color: #10B0BB;
    color: #fff;
}
.btn--download,
.btn--cta {
    color: #fff;
    background-color: #7ed6dc;
}

.btn--rounded {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.btn--small {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.6;
}

.btn--big {
    font-size: 20px;
    font-size: 1.25rem;
}

.btn--nav {/*bouton pour le menu principal/secondaire */
    padding: 0.25rem 1.25rem;
    border: 2px solid #444;
    font-size: 0.875rem;
    color: #444;
    background-color: transparent;

    -webkit-transition-property: border-color, color, background-color;
    -o-transition-property: border-color, color, background-color;
    transition-property: border-color, color, background-color;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}
.btn--nav:hover {
    border-color: #0055b8;
    color: #fff;
    background-color: #0055b8;
}
.btn--nav--main {/*bouton menu principal*/
    margin-top: 27px;
    width: 108px;
    text-align: center;
}

.btn--container{ /* Block pour contenir plusieurs groupes */

}

.btn--container .btn,
.btn--container .btn-group {
    vertical-align: top;
}

.btn--group{ /* Block pour contenir un groupe */
    display: inline-block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
    margin-left: 15px;
}

.btn--group .btn {
    float: left;
    margin-left: -1px;
    border: 1px solid #dcdcdc;

    border-radius: 4px;
}

.btn--group > .btn:first-child,
.btn-group li:first-child .btn {
    margin-left: 0;

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn--group > .btn:last-child,
.btn-group li:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn--group > .btn:not(:first-child):not(:last-child),
.btn--group li:not(:first-child):not(:last-child) .btn {
    border-radius: 0;
}



/*----------------------------------------*\
    ^icon
\*----------------------------------------*/

.icon:before {
    position: relative;
    background-position: 0 0;
    float: left;
    margin: 0 5px 0 0;
    width: 20px;
    height: 20px;
    content: "";
    background: url(../../images/icon-20.png) no-repeat 0 0 transparent;
}

.icon {
    display: inline-block;
}
.icon--win:before {
    background-position: 0 0;
}
.icon--mac:before {
    background-position: 0 -20px;
}
.icon--win.blue:before {
    background-position: 0 -40px;
}
.icon--mac.blue:before {
    background-position: 0 -60px;
}
#productlist .icon:before {
    margin-top: 15px;
}


/*----------------------------------------*\
    ^color
\*----------------------------------------*/
.btn--border-white {
    border: 2px solid #fff;
    color: #fff;
}
.btn--border-white:hover {
    border-color: #fff;
    color: #0055b8;
    background-color: #fff;
}
.btn--border-dark {
    border: 2px solid #363636;
    color: #363636;
}
.btn--border-dark:hover {
    border-color: #363636;
    color: white;
    background-color: #363636;
}
.btn--border-gray {
    border: 2px solid #535353;
    color: #535353;
}
.btn--border-gray:hover {
    border-color: #535353;
    color: white;
    background-color: #535353;
}
.btn--border-red {
    border: 2px solid #db3424;
    color: #db3424;
}
.btn--border-red:hover {
    border-color: #c92919;
    color: white;
    background-color: #c92919;
}
.btn--cta-red {
    background-color: #db3424;
}
.btn--cta-red:hover {
    background-color: #c92919;
}