/* -------------------------------------------------------------
  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;
}

.colorDarkgrey {
  color: #333333 !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: #122844 url("../../images/hosting/HeaderLandingPageWeb.png") no-repeat 50% 50%;
  background-size: cover;
}

ul.listWithCheck li {
  list-style-image: url("../../../images/hosting2020/ok.png");
}

.webTab {
  border: 1px #b6efff solid;
  background-color: #f4feff;
  border-left: 0;
  border-radius: 6px 6px 0 0;
  margin-right: 0;
  line-height: 1em;
  padding: 20px 36px !important;
  cursor: pointer;
  width: calc(100%/3);
}
.webTab.selected {
  background-color: #d4f6fc;
  border: none;
  border-bottom: 1px #d4f6fc solid;
  box-shadow: 0 -6px 3px 3px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

@media only screen and (max-width: 768px) {
  .webTabContent {
    background-color: none;
  }

  .webContent {
    background-color: #d4f6fc;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
  }

  .collapseWeb {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }
  .collapseWeb > .domainChevronDown {
    height: 24px;
  }
  .collapseWeb > .domainChevronUp {
    height: 24px;
    transform: rotate(180deg);
  }
}
@media only screen and (min-width: 768px) {
  .webTabContent {
    background-color: #d4f6fc;
    border-radius: 0 0 6px 6px;
    padding: 30px;
  }
}
.webContent .newButton16 {
  min-width: 130px !important;
  height: 42px !important;
  line-height: 42px !important;
}
.webContent ul li {
  list-style-image: url("../../../images/hosting2020/ok.png");
}

.collaborativeSolutions {
  display: flex;
  align-items: center;
}
.collaborativeSolutions .newButton16 {
  min-width: 130px !important;
  height: 42px !important;
  line-height: 42px !important;
}
.collaborativeSolutions img {
  width: 150px;
  height: 150px;
}

.blueLink {
  color: #00a2bf;
}
.blueLink:hover {
  color: #59d2ef;
}

.backgroundNumber {
  font-size: 200px;
  font-weight: bold;
  line-height: 0.68;
  text-align: center;
  color: #85d9fd;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
  opacity: 0.7;
}

.webTitle {
  position: relative;
  height: 135px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backgroundBleuInter .backgroundNumber {
  z-index: 0;
}
.backgroundBleuInter h2 {
  z-index: 1;
}