/*----------------------------------------*\
    $CTA
    	^download
    		^packshot
\*----------------------------------------*/

.cta {
    position: relative;
}
.content--cta--dark {/*section : dark version*/
    background: #1d1d1d url(../images/cta-download-bg.png) 0 0 repeat;
    padding-top: 116px;
    padding-bottom: 116px;
}
.cta__download {
    padding: 30px 40px;
    font-family: 'Maven Pro';
}
.cta__download--light {
    border: 1px solid #dcdcdc;
    margin-top: 30px;
}
.cta__download--dark {
    border: 1px solid #fff;
}
.cta__download--light .content--text,
.cta__download--light .content--action,
.cta__download--dark .content--text,
.cta__download--dark .content--action {
    float: left;
}
.cta__download--light .content--action,
.cta__download--dark .content--action {
    text-align: right;
}

.cta__download--light .content--text,
.cta__download--dark .content--text {
    padding-right: 40px;
    width: 65%;
    font-size: 20px;
    line-height: 42px;
    font-weight: 500;
    text-transform: uppercase;
}

.cta__download--light .content--action,
.cta__download--dark .content--action {
    width: 35%;
}
.cta__download--light .content--text {
    color: #8e9298;
}

.cta__download--dark .content--text {
    padding-left: 140px;
    color: #fff;
}



/*--- $Packshot---*/
.packshot--sprite {
    background: url(/sites/dump.dxo.com/files/dxoimages/photo/commun/packshot-sprite.png) 0 0 no-repeat;
}
.content--packshot {
    position: absolute;
    display: block;
    left: 40px;
    top: -40px;
    width: 110px;
    height: 187px;
    background: url(../images/cta-download-packshot.png) 0 0 no-repeat;
}
.content--packshot.packshot--dop {
    background-position: -110px 0;
}
.content--packshot.packshot--dfp {
    background-position: -110px -187px;
}
.content--packshot.packshot--dvp {
    background-position: 0 -374px;
}


/*----------------------------------------*\
    $IMAGES
        ^figure
    	^colorbox
    	^before/after
        ^photo before/after
\*----------------------------------------*/
figure.last {
    margin-bottom: 0;
}

.content--colorbox {
    position: relative;
    margin-top: 5px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.border--white {
    border: 1px solid white;
}
.colorbox--beforeafter{}
.colorbox--beforeafter:hover{
    margin-left: -100%;
}

.colorbox--beforeafter > a {
    position: relative;
    display: block;
}
.colorbox--beforeafter > a:before,
.colorbox--beforeafter > a:after {
    position: absolute;
    bottom: 0;
    width: 120px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    content: "";
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}
.colorbox--beforeafter > a:before {
    display: block;
    left: 0;
}

.colorbox--beforeafter > a:after {
    left: 50%;
    display: none;
}

.colorbox--beforeafter:hover > a:after {
    display: block;
}

.colorbox--beforeafter.op > a:before {
    content: "DxO OpticsPro";
}
.colorbox--beforeafter.fp > a:before {
    content: "DxO FilmPack";
}
.colorbox--beforeafter.vp > a:before {
    content: "DxO ViewPoint";
}
.colorbox--beforeafter.legende > a:after {
    content: "Original";
}
.colorbox--beforeafter.legende--jp > a:after {
    content: "元画像";
}

.colorbox--icon {
    position: absolute;
    display:none;
    top: 50%;
    left: 75%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    background: transparent url(../images/icon-colorbox-loupe.png) 0 0 no-repeat;
    -webkit-transition: all 1s ease-out ;
    -o-transition: all 1s ease-out ;
    transition: all 1s ease-out ;
}

.colorbox--beforeafter:hover .colorbox--icon {
    display:block;
}


/*--- ^photo before/after ---*/
.photo--beforeafter {
    position: relative;
}
.photo--beforeafter img {
    display: block;
}
.photo--beforeafter .before {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.photo--beforeafter .after:hover + .before,
.before:hover,
.photo--beforeafter .before:hover:before {
    display: block;
}

.after--dop:before,
.before:hover:before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 20px;
    font-size: 12px;
    color: white;
    text-align: center;
    background: rgba(0,0,0,0.8);
}

.after--dop:before {
    display: block;
    content: "DxO OpticsPro";
}

.before:hover:before {
    content: "Original";
}

.before.jp:hover:before {
    content: "元画像";
}

/*----------------------------------------*\
    $BLOC
    	Commun
    		^section
    	Homepage
    		^home-mp
    	Presentation
    		^temoignage
    	Fonctionnalites
    		^slider
    		^nouveau
\*----------------------------------------*/

/*--- ^Homepage---*/

.home--vp {
    height: 730px;
    background: black url(../files/homepage/vp.jpg) 50% 50% no-repeat;
}
.home--fp {
    height: 730px;
    background: black url(../files/homepage/fp.jpg) 50% 50% no-repeat;
}
.seealllinks {
    display: block;
    margin: 10px 0;
}

.btn--continue { /* bouton arrow bottom*/
    display: block;
    position: absolute;
    left: 50%;
    bottom: 120px;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    height: 64px;
    text-align: center;
}
.btn--continue-white {
    color: white
}
.btn--continue-dark {
    color: #363636;
}
.btn--continue > p {
    margin-bottom: 8px;
}
.mp--secondary--links {
    display: inline-block;
}
.mp--secondary--links > a {
    display: block;
    float: left;
    padding: 0 10px;
    height: 14px;
    border-left: 1px solid white;
    line-height: 14px;
}
.mp--secondary--links > a:first-child {
    border-left: 0;
}

/*--- ^temoignage---*/
.content__hero {
    min-height: 700px;
    overflow: hidden;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-color: #000;
}
.content__hero blockquote {
    padding: 40px 80px;
    font-family: 'Maven Pro';
    font-size: 18px;
    font-size: 1.125rem;
    color: #fff;
}
.content__hero blockquote {
    position: relative;
    text-align: center;
}
.content__hero blockquote:before,
.content__hero blockquote:after {
    font: 84px/1.5 'Georgia', serif;
    position: absolute;
}
.content__hero blockquote:before {
    left: 50px;
    top: -20px;
    content: "\201C";
}
.content__hero blockquote:after {
    right: 50px;
    bottom: -60px;
    content: "\201D";
}
.content__hero--light h3,
.content__hero--light p {
    color: white;
}
.temoignage--portrait {
    margin: 0 auto 20px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    border-radius: 60px;
    border: 2px solid #fff;
}


/*--- ^awards ---*/
blockquote.quote--awards {
    padding: 30px 0;
}
.quote--awards:after,
.quote--awards:before {
    font: 84px/1.5 'Georgia', serif;
    position: absolute;
}
.quote--awards:before {
    left: 0;
    top: -30px;
    content: "\201C";
}
.quote--awards:after {
    right: 10px;
    bottom: -20px;
    content: "\201D";
}
.quote--awards + p {
    padding-bottom: 50px;
}

.hero__temoignage--dop {
    background-image: url(/sites/dump.dxo.com/files/dxoimages/photo/products/opticspro/intro/temoignage.jpg);
}
.hero__temoignage--dfp {
    background-image: url(/sites/dump.dxo.com/files/dxoimages/photo/products/filmpack/intro/temoignage.jpg);
}
.hero__temoignage--dvp {
    background-image: url(/sites/dump.dxo.com/files/dxoimages/photo/products/viewpoint/intro/temoignage.jpg);
}


/*--- ^Slider---*/

/*--- ^Slider---*/
.mainpart .slick-slider {
    margin-bottom: 0;
}

.mainpart .slick-slide {
    height: 670px;
}
.slick-single-item > div {
    overflow: hidden;
    min-width: 980px;
}
.slider--image {
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
    /*background-size: cover;*/
    width: 100%;
    height: 100%;
}
.slider--content {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -490px;
}
.slider--content--white {
    color: #fff;
}
.slider--content--dark {
    color: #3636336;
}
.mainpart .slick-dots {
    bottom: 40px;
}
.mainpart .slick-prev {
    left: 20px;
}
.mainpart .slick-next {
    right: 20px;
}


/*--- ^cartouche nouveau---*/

h5.el-new-version {
    font-family: 'Roboto';
    color: #0055b8;
}
.el-new-version {
    display: inline-block;
    height: 26px;
    padding: 0 10px;
    line-height: 24px;
    vertical-align: middle;
    font-size: 14px;
    font-size: 0.875rem;
    color: white;
    background-color: #0055b8;
    font-weight: 300;
    border-radius: 13px;
}


/*--- ^triangle ---*/
.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid #0055b8;
}
.arrow-down.white {
    border-bottom: 5px solid white;
}
.arrow-down.dark {
    border-bottom: 5px solid #363636;
}

/*--- Scroll to top ---*/
.scroll-top-wrapper {
      position: fixed;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      text-align: center;
      z-index: 999;
      background-color: #363636;
      color: #eeeeee;
      width: 58px;
      height: 58px;
      line-height: 58px;
      right: 30px;
      bottom: 30px;
      /* padding-top: 2px; */
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      border-radius: 50%;
}
.scroll-top-wrapper:hover {
    background-color: #fff;

}
.scroll-top-wrapper.show {
    visibility: visible;
    cursor: pointer;
    opacity: 1.0;
}
.icon--top {
    display: block;
    width: 58px;
    height: 58px;
    background: url(../images/icon-scrolltop.png) 0 0 no-repeat;
}

.scroll-top-wrapper:hover .icon--top {
    background-position: 0 -58px;
}