/* -------------------------------------------------------------
  List of CSS3 Sass Mixins File to be @imported and @included as you need

  Mixins available:
    -   css3-prefix             - arguments: Property, Value
    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-horizontal   - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-radial       - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100%
    -   background-size         - arguments: Width: 100%, Height: 100%
    -   background-opacity      - arguments: Color: #000, Opacity: .85
    -   border-radius           - arguments: Radius: 5px
    -   border-radius-separate  - arguments: Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px
    -   box                     - arguments: Orientation: horizontal, Pack: center, Align: center
    -   box-rgba                - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
    -   box-shadow              - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   box-sizing              - arguments: Type: border-box
    -   columns                 - arguments: Count: 3, Gap: 10
    -   double-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
    -   flex                    - arguments: Value: 1
    -   flip                    - arguments: ScaleX: -1
    -   font-face               - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
    -   opacity                 - arguments: Opacity: 0.5
    -   outline radius          - arguments: Radius: 5px
    -   resize                  - arguments: Direction: both
    -   rotate                  - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
    CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
    -   text-shadow             - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   transform               - arguments: Parameters: null
    -   transform-style         - arguments: Style: preserve-3d
    -   transition              - Default arguments: What: all, Length: 1s, Easing: ease-in-out
    -                            - Examples: @include transition (all 2s ease-in-out);
    -                                        @include transition (opacity 1s ease-in 2s, width 2s ease-out);
    -   triple-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0
    -   keyframes               - arguments: Animation name
                                - content:   Animation css
    -   animation               - arguments: name duration timing-function delay iteration-count direction fill-mode play-state
                                             (http://www.w3schools.com/cssref/css3_pr_animation.asp)
    -   abs-pos                 - arguments: top,right,bottom,left -> default all values are on auto

------------------------------------------------------------- */
/* Font */
/* */
/* Color */
/* Margins */
* {
  color: #17273b; }

.backgroundGrey {
  background: #555 !important; }

.backgroundYellow {
  background: #1db9de !important; }

.backgroundBleuNuit {
  background: #122844 !important; }

.backgroundBleuDark {
  background: #132845 !important; }

.backgroundBleuVif {
  background: #59d2ef !important; }

.backgroundBleuInter {
  background: #143f6c !important; }

.backgroundYellowCloud {
  background: #ffcc00 !important; }

.backgroundBeige {
  background: #e9ebe7 !important; }

.backgroundRed {
  background: #d40000 !important; }

.backgroundOrange {
  background: #ff6d00 !important; }

.backgroundBlueGrey {
  background: #405067 !important; }

.backgroundBlueGreyLight {
  background: #596A7E !important; }

.backgroundMarineBlue {
  background: #10406E !important; }

.colorGrey {
  color: #555 !important; }

.colorYellow {
  color: #1db9de !important; }

.colorBleuNuit {
  color: #122844 !important; }

.colorBleuDark {
  color: #132845 !important; }

.colorBleuVif {
  color: #59d2ef !important; }

.colorBleuInter {
  color: #143f6c !important; }

.colorYellowCloud {
  color: #ffcc00 !important; }

.colorBeige {
  color: #e9ebe7 !important; }

.colorRed {
  color: #d40000 !important; }

.colorOrange {
  color: #ff6d00 !important; }

.colorBlueGrey {
  color: #405067 !important; }

.colorBlueGreyLight {
  color: #596A7E !important; }

.colorDidYouKnow {
  color: #8D4238 !important; }

.header {
  background-color: #122844; }
  .header *:not(.newButton16) {
    color: white; }
  .header a.newButton16 {
    margin-left: 10px;
    margin-right: 10px; }
    .header a.newButton16 span {
      color: #17273b; }
  .header #subMenu a.smallButton {
    border-color: #59d2ef;
    color: #17273b; }
    .header #subMenu a.smallButton:hover {
      color: white !important;
      background: transparent !important; }

/* POPUP */
.modal .popup-content .separationBorder {
  margin-top: 25px; }
.modal .popup-content a {
  color: #17273b; }
.modal .popup-content a.newButton {
  margin: 0 10px; }

/* !POPUP */
.didYouKnow {
  color: #8D4238;
  background-color: #FFCC00;
  border: solid 1px #8D4238;
  position: relative;
  height: 30px;
  line-height: 30px;
  display: inline-block; }
  .didYouKnow span {
    display: block;
    width: 58px;
    height: 52px;
    position: absolute;
    background-image: url("../../images/cloud/2016/instances/SaviezVous-bulb.png");
    top: -53px;
    left: 50%;
    margin-left: -28px; }
  .didYouKnow:before {
    content: '';
    background-image: url("../../images/cloud/2016/instances/SaviezVous-cgh.png");
    width: 28px;
    height: 36px;
    display: block;
    position: absolute;
    top: -5px;
    left: -28px; }
  .didYouKnow:after {
    content: '';
    background-image: url("../../images/cloud/2016/instances/SaviezVous-drt.png");
    width: 28px;
    height: 36px;
    display: block;
    position: absolute;
    top: -5px;
    right: -28px; }

ul.listingCheck li {
  list-style-image: url("../../images/cloud/2016/instances/CheckBox-Vert.png");
  color: #828E4C; }

ul.listingCheckWhite li {
  list-style-image: url("../../images/cloud/2016/instances/Check-Box-Blanc.png");
  color: #FFF; }

.moreOVH {
  background-color: #57710E;
  border: 3px solid #DCEAC6;
  color: #DCEAC6;
  position: relative;
  height: 28px;
  display: inline-block;
  padding: 0 15px; }
  .moreOVH:before {
    content: '';
    background-image: url("../../images/cloud/2016/instances/LesPLusOVH-Gauche.png");
    width: 28px;
    height: 36px;
    display: block;
    position: absolute;
    top: -6px;
    left: -17px; }
  .moreOVH:after {
    content: '';
    background-image: url("../../images/cloud/2016/instances/LesPLusOVH-Droit.png");
    width: 28px;
    height: 36px;
    display: block;
    position: absolute;
    top: -6px;
    right: -17px; }

.moreOVHWhite {
  background-color: transparent;
  border: 3px solid #FFF;
  color: #FFF;
  position: relative;
  height: 28px;
  display: inline-block;
  padding: 0 15px; }
  .moreOVHWhite:before {
    content: '';
    background-image: url("../../images/cloud/2016/instances/SaviezVous_Bord-Gch-Blanc.png");
    width: 28px;
    height: 36px;
    display: block;
    position: absolute;
    top: -6px;
    left: -17px; }
  .moreOVHWhite:after {
    content: '';
    background-image: url("../../images/cloud/2016/instances/SaviezVous_Bord-Drt-blanc.png");
    width: 28px;
    height: 36px;
    display: block;
    position: absolute;
    top: -6px;
    right: -17px; }

.features .config .headerConfig {
  height: 240px;
  display: flex; }
  .features .config .headerConfig div {
    margin: auto; }
    .features .config .headerConfig div img {
      max-height: 180px; }
  @media screen and (max-width: 480px) {
    .features .config .headerConfig {
      height: auto; } }
.features .config .desc {
  min-height: 180px; }
  @media screen and (max-width: 480px) {
    .features .config .desc {
      height: auto; } }
.features .config .priceConfig {
  min-height: 220px;
  border-bottom: 0 !important;
  padding-bottom: 0 !important; }
  @media screen and (max-width: 480px) {
    .features .config .priceConfig {
      height: auto; } }

.needStorage ul {
  padding: 0; }
  .needStorage ul li {
    list-style: none; }
.needStorage a {
  color: #FFF;
  text-decoration: none; }
@media screen and (max-width: 780px) {
  .needStorage .row {
    padding: 0; }
  .needStorage .backgroundBlueGreyLight {
    margin: 0;
    width: 100%; } }

.pci-table-offers thead tr th {
  font-size: 14px;
  line-height: 24px;
  color: #596A7E;
  font-weight: 600;
  width: 14%;
  padding: 5px 15px 5px 5px !important;
  position: relative; }
.pci-table-offers tbody tr td:nth-child(odd) {
  background-color: #FEF7DA; }
.pci-table-offers tr {
  border-bottom: solid 1px #F2F2F2;
  /*position: relative;*/
  cursor: pointer; }
  .pci-table-offers tr th, .pci-table-offers tr td {
    color: #000;
    line-height: 24px;
    padding: 10px 5px;
    text-align: left;
    border: none;
    -webkit-transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -o-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear; }
  .pci-table-offers tr:hover td {
    background-color: #F0FAFC !important;
    box-shadow: inset 0px 1px 0px #79DCF7, inset 0px -1px 0px #79DCF7; }
  .pci-table-offers tr.noInstances {
    display: none;
    pointer-events: none; }
    .pci-table-offers tr.noInstances td {
      background-color: transparent !important; }
      .pci-table-offers tr.noInstances td p {
        color: #555 !important; }
.pci-table-offers .top {
  color: #FFF;
  font-size: 13px;
  line-height: 18px;
  /*position: absolute;*/
  top: 0;
  left: 0;
  margin: 5px 0;
  padding: 5px;
  /*-webkit-border-radius: 3px;*/
  /*-webkit-border-top-left-radius: 0;*/
  /*-moz-border-radius: 3px;*/
  /*-moz-border-radius-topleft: 0;*/
  /*border-radius: 3px;*/
  /*border-top-left-radius: 0;*/
  border-radius: 3px;
  font-weight: 100;
  background-color: #00A2BF;
  /*&.ram { background-color: #E8862C; }*/
  /*&.cpu { background-color: #CA2734; }*/
  /*&.classic { background-color: #00A2BF; }*/ }
.pci-table-offers .win {
  display: none; }
@media screen and (max-width: 780px) {
  .pci-table-offers thead {
    display: none; }
  .pci-table-offers tbody {
    display: table;
    width: 100%; }
    .pci-table-offers tbody tr {
      border-color: #AAA; }
      .pci-table-offers tbody tr td {
        display: block;
        background-color: transparent !important;
        text-align: right;
        padding: 1px;
        box-shadow: none !important; }
        .pci-table-offers tbody tr td:first-child {
          padding-top: 15px; }
        .pci-table-offers tbody tr td:last-child {
          padding-bottom: 15px; }
        .pci-table-offers tbody tr td.NAME {
          text-align: left; }
      .pci-table-offers tbody tr .top {
        display: none; } }

/*label {
    input[type="checkbox"] {
        display: none;
    }

    position: relative;
    padding-left: 22px;
    cursor: pointer;

    &:before {
        position: absolute;
        width: 18px;
        height: 18px;
        content: '';
        background: transparent url('../../images/2016wishes/sprite-checkbox2.png') no-repeat 0 0;;
        left: 0;
        top: 1px;
    }

    &:hover {
        &:before {
            background-position: -18px 0;
        }
    }
}*/
/*input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] {
    & + label {
        position: relative;
        padding-left: 22px;
        cursor: pointer;

        &:before {
            position: absolute;
            width: 18px;
            height: 18px;
            content: '';
            background: transparent url('../../images/2016wishes/sprite-checkbox2.png') no-repeat 0 0;;
            left: 0;
            top: 1px;
        }

        &:hover {
            &:before {
                background-position: -18px 0;
            }
        }
    }

    &:checked {
        & + label {
            &:before {
                background-position: -36px 0;
            }
        }
    }
}*/
.pci-table-config {
  border: solid 1px #59d2ef;
  /* SLIDER */ }
  .pci-table-config .flex-wrap {
    padding: 10px 0 20px 0; }
    .pci-table-config .flex-wrap:not(:last-child) {
      border-right: solid 1px #59d2ef; }
    .pci-table-config .flex-wrap h5 {
      margin: 15px 0; }
    .pci-table-config .flex-wrap .inputRow {
      text-align: left; }
    @media screen and (max-width: 600px) {
      .pci-table-config .flex-wrap {
        border-right: none !important; } }
  .pci-table-config input[type="checkbox"]:disabled + label {
    opacity: 0.4; }
  .pci-table-config .slider {
    width: 100%;
    position: relative; }
    .pci-table-config .slider .min-price, .pci-table-config .slider .max-price {
      position: absolute;
      border: solid 1px #CCC;
      background: #FFF;
      height: 27px;
      min-width: 90px;
      padding: 0 5px;
      top: 25px;
      text-align: right;
      cursor: default;
      font-size: 15px; }
    .pci-table-config .slider .min-price {
      left: -10px; }
    .pci-table-config .slider .max-price {
      right: 0; }
  .pci-table-config .ui-slider-horizontal {
    height: 0.2em !important; }
    .pci-table-config .ui-slider-horizontal .ui-slider-range {
      top: -1px; }
    .pci-table-config .ui-slider-horizontal .ui-slider-handle {
      top: -8px !important;
      width: 10px !important;
      height: 20px !important;
      border-radius: 0;
      background-color: #08233E;
      cursor: grab; }
      .pci-table-config .ui-slider-horizontal .ui-slider-handle:nth-child(-n + 2):after {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-left-color: #08233E;
        border-width: 10px;
        margin-top: -10px; }
      .pci-table-config .ui-slider-horizontal .ui-slider-handle:nth-last-child(-n + 1):after {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: #08233E;
        border-width: 10px;
        margin-top: -10px; }
      .pci-table-config .ui-slider-horizontal .ui-slider-handle:focus {
        outline: none; }
  .pci-table-config .ui-widget-header {
    background-color: #5AD1ED !important;
    border-top: solid 1px #00A2BE;
    border-bottom: solid 1px #00A2BE; }
  .pci-table-config .ui-widget-content {
    background-color: #BCBDC1 !important; }
  .pci-table-config .ui-state-default,
  .pci-table-config .ui-widget-content .ui-state-default,
  .pci-table-config .ui-widget-header .ui-state-default {
    border: none !important;
    font-weight: normal !important;
    color: #3967AF !important; }

.sortIcn {
  position: absolute;
  height: 16px;
  right: 12px;
  top: 50%;
  margin-top: -8px; }
  .sortIcn span {
    position: absolute;
    opacity: 0.3;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear; }
    .sortIcn span.active {
      opacity: 1; }
    .sortIcn span.up {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 4px 6.9px 4px;
      border-color: transparent transparent #555 transparent;
      top: 0; }
    .sortIcn span.down {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6.9px 4px 0 4px;
      border-color: #555 transparent transparent transparent;
      bottom: 0; }

img.logo-xeon {
  width: 50%;
  margin: 5px 0; }

#popup-info-instances.modal .separationBorder {
  margin: 10px auto; }
#popup-info-instances.modal br {
  clear: both; }
#popup-info-instances.modal hr {
  width: 100%;
  border-bottom: none;
  border-top: solid 1px #EEE;
  margin: 10px 0; }
#popup-info-instances.modal .selectedStorage {
  /*display: none;*/
  color: #59d2ef;
  font-weight: bold;
  font-size: 15px;
  line-height: 25px; }
#popup-info-instances.modal label {
  display: block;
  text-align: left;
  padding: 0 0 0 25px; }
  #popup-info-instances.modal label input {
    float: left;
    margin: 7px 6px 0px -19px; }
#popup-info-instances.modal .win {
  display: none; }
#popup-info-instances.modal .suffix {
  display: none;
  font-size: inherit;
  line-height: inherit; }
#popup-info-instances.modal .switchToFlex {
  font-size: inherit;
  line-height: inherit;
  color: inherit; }
#popup-info-instances.modal .switchInstance {
  position: absolute;
  font-family: 'lato' !important;
  font-weight: 100 !important;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(212, 238, 255, 0.5);
  color: #59d2ef;
  top: 50%;
  margin-top: -23px;
  font-size: 36px;
  line-height: 46px;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
  display: none; }
  #popup-info-instances.modal .switchInstance:hover {
    background-color: #d4eeff; }
  #popup-info-instances.modal .switchInstance.prev {
    left: 0; }
    #popup-info-instances.modal .switchInstance.prev:after {
      content: '<'; }
  #popup-info-instances.modal .switchInstance.next {
    right: 0; }
    #popup-info-instances.modal .switchInstance.next:after {
      content: '>'; }

.keyword {
  color: #0B2B38;
  background-color: #BDE2EB;
  padding: 10px;
  margin: 5px 10px;
  display: inline-block;
  border-radius: 3px; }

.infos-tooltip {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #EEE;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  border: solid 1px #CCC;
  cursor: default; }
  .infos-tooltip:after {
    content: "?"; }

.usecaseTitle {
  padding: 15px;
  margin: 1px 0;
  background-color: #FFF;
  cursor: pointer;
  text-align: left;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  opacity: 0.8; }
  .usecaseTitle:hover {
    opacity: 1; }
  .usecaseTitle.selected {
    background-color: #122844;
    text-indent: 15px;
    color: #FFF;
    opacity: 1; }

.usecaseContent {
  display: none; }
  .usecaseContent:first-child {
    display: block; }

#winPriceUpdate {
  display: none; }
  #winPriceUpdate .alert {
    padding-right: 45px;
    position: relative; }
    #winPriceUpdate .alert .alert-close {
      position: absolute;
      cursor: pointer;
      top: 15px;
      right: 10px;
      font-size: 12px;
      font-weight: 400;
      text-shadow: 0px 1px 0px #FFF;
      text-decoration: underline; }
      #winPriceUpdate .alert .alert-close:hover {
        text-decoration: none; }

.fakeTerminal {
  display: none; }

.tabNav {
  margin: 0;
  padding: 0;
  border-bottom: solid 1px #59d2ef; }
  .tabNav li {
    list-style: none;
    display: inline-block;
    padding: 20px 15px;
    cursor: pointer; }
    .tabNav li:hover {
      color: #00a2bf; }
    .tabNav li.selected {
      box-shadow: inset 0px -5px 0px 0px #59d2ef; }

@media screen and (max-width: 768px) {
  .included .txtRight {
    text-align: left; } }

.cloudPadProduct.darkBg * {
  color: #FFF !important; }
.cloudPadProduct:not(.darkBg) a.none,
.cloudPadProduct:not(.darkBg) a.none * {
  color: #17273b !important; }
.cloudPadProduct a.none,
.cloudPadProduct a.none * {
  text-decoration: none !important; }
  .cloudPadProduct a.none:hover,
  .cloudPadProduct a.none *:hover {
    text-decoration: none !important; }

.config {
  padding: 20px 16px; }

.hybridCloudBg {
  background: transparent url("../../images/cloud/2016/home/header-cloudhybrid.jpg") no-repeat 50%;
  background-size: cover; }

.cloud-icns {
  display: inline-block;
  width: 120px;
  height: 120px;
  background: transparent url("../../images/cloud/2016/home/sprite-icones-cloud.png") no-repeat 0 0; }
  .cloud-icns.vps-icn {
    background-position: 0 0; }
  .cloud-icns.sd-icn {
    background-position: -120px 0; }
  .cloud-icns.pci-icn {
    background-position: -240px 0; }
  .cloud-icns.pcc-icn {
    background-position: -360px 0; }
  .cloud-icns.cdi-icn {
    background-position: -480px 0; }
  .cloud-icns.data-icn {
    background-position: -600px 0; }
  .cloud-icns.plesk-icn {
    background-position: -720px 0; }
  .cloud-icns.cd-icn {
    background-position: -840px 0; }
  .cloud-icns.ms-icn {
    background-position: -960px 0; }

span.arrow {
  display: inline-block;
  width: 12px;
  height: 12px; }
  span.arrow.up {
    background: transparent url("../../images/2016wishes/topArrow_12px-bkg-dark.png") no-repeat 0 0; }
  span.arrow.down {
    background: transparent url("../../images/2016wishes/downArrow_12px-bkg-dark.png") no-repeat 0 0; }

span.check {
  display: inline-block;
  width: 17px;
  height: 13px;
  background: transparent url("../../images/cloud/2016/home/sprite-icones-check-uncheck.png") no-repeat 0 0; }

span.uncheck {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: transparent url("../../images/cloud/2016/home/sprite-icones-check-uncheck.png") no-repeat 100% 0; }

.newSite-table tr {
  border-color: #e9ebe7; }
  .newSite-table tr td {
    font-weight: normal !important;
    color: #FFF !important; }
    .newSite-table tr td:first-child {
      text-align: left; }
  .newSite-table tr:not(:first-child) td:nth-child(even) {
    background-color: #355C83; }

.div-compare-mobile > div {
  padding: 20px 0;
  /** {
      font-size: 15px;
      line-height: 25px;*/
  /*}*/ }
  .div-compare-mobile > div:nth-child(even) {
    background-color: #355C83; }
  .div-compare-mobile > div .txtLeft {
    color: #C3BFC0; }