/* Reset devsite CSS */
.devsite-top-section {
  display: none;
}
.devsite-main-content {
  margin-top: 0 !important;
  padding: 0 !important;
}

#cloud-site .header {
  background-image: url("/images/getting-started/background.png");
  background-size: contain;
  min-height: 600px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  #cloud-site .header {
    background-image: url("/images/getting-started/background_2x.png");
  }
}

#cloud-site .header img {
  max-width: 230px;
}

#cloud-site .header .border-bottom-white {
  border-bottom: 1px solid #fff;
  margin: 0 auto 0.67em;
  opacity: 0.5;
  width: 25%;
}

#cloud-site .flex-container {
  display: flex;
  flex-flow: row wrap;
}

#cloud-site .flex-1 {
  flex: 1;
}

#cloud-site .flex-2 {
  flex: 2;
}

#cloud-site .flex-3 {
  flex: 3;
}

.flex-c {
  flex-direction: column;
}

#cloud-site .justify-center {
  justify-content: center;
}

#cloud-site .hero-title {
  color: #fff;
  font: lighter 48px/57px Roboto;
}

#cloud-site .hero-subtitle {
  color: #ffffff;
  font: lighter 20px/24px Roboto;
  margin: 40px auto 20px;
  padding: 0 0 56px 0;
}

#cloud-site .bg-grey {
  background-color: #f6f6f6;
}

.flex {
  display: flex;
}

.panel {
  background-color: #fff;
  margin: 0 auto 72px;
  max-width: 1160px;
  min-height: 224px;
  padding: 50px 50px 30px 50px;
}


.title {
  color: #616161;
  font: lighter 40px/47px Roboto;
}

.sub-title {
  color: #616161;
  font: normal 14px/24px Roboto;
  padding-left: 96px;
  padding-right: 96px;
}

.panel .sub-title {
  padding-left: 6px;
  padding-right: 6px;
}

.plus {
  align-items: center;
  color: #00bfa5;
  display: flex;
  font: 300 48px/57px Roboto;
  justify-content: center;
}

.align-items-cener {
  align-items: center;
}

#cloud-site .flex-card {
  border-radius: 2px;
  margin: 0 8px 16px 8px;
  transition: all 0.3s ease-in-out;
}

#cloud-site .med-card {
  background: #fff;
  min-width: 400px;
  min-height: 500px;
}


#cloud-site .med-card .title {
  align-items: center;
  background: #8fa3ad;
  color: #fff;
  font: normal 14px/16px Roboto;
  min-height: 76px;
  padding-left: 32px;
}

#cloud-site .med-card .content {
  color: #616161;
  flex: 1;
  font: normal 14px/36px Roboto;
  padding: 0 32px;
}

#cloud-site .med-card .content p {
  border-bottom: 1px solid #f5f5f5;
  margin: 0;
}

#cloud-site .med-card .content p.text {
  margin-bottom: 26px;
}

#cloud-site .med-card .border-bottom {
  border-bottom: 1px solid #eceff1;
}

.block {
  background: #8fa3ad;
  height: 250px;
  padding: 40px 40px 56px;
}

#cloud-site .med-card .front .title {
  font: normal 14px/16px Roboto;
  padding: 0 0 32px 0;
}

#cloud-site .med-card .front .title img {
  margin-bottom: 12px;
}

#cloud-site .med-card .front .sub-title {
  color: #fff;
  font: normal 20px/28px Roboto;
  min-height: 76px;
  text-align: center;
  padding: 0;
}

.border-right {
  border-right: 1px solid #f5f5f5;
}

#cloud-site .med-card .front .content {
  padding: 48px 40px 32px;
  text-align: center;
}

#cloud-site .med-card .front .content p {
  border-bottom: none;
}

#cloud-site .med-card .front .content .stat {
  color: #36464e;
  font: lighter 40px/48px Roboto;
  padding-bottom: 8px;
}

#cloud-site .med-card .front .content .text {
  color: #9d9d9d;
  font: normal 12px/16px Roboto;
}

#cloud-site .med-card i {
  color: #039be5;
}

.bg-white {
  background: #fff;
}

#cloud-site .view-link {
  display: inline-block;
  font-size: 16px;
  line-height: 30px;
  margin: 0 0 20px;
  padding-right: 30px;
  position: relative;
  text-transform: uppercase;
}

#cloud-site .view-link:after {
  background-color: #039be5;
  background-image: url(//www.gstatic.com/images/icons/material/system/1x/arrow_upward_white_24dp.png);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 20px;
  position: absolute;
  right: 0;
  top: 4px;
  transform: rotateZ(90deg);
  width: 20px;
}

#cloud-site .panel .view-link {
  font-weight: 500;
}


#cloud-site .small {
  color: #616161;
  display: inline-block;
  font: normal 12px/22px Roboto;
  opacity: .87;
  padding-bottom: 24px;
}

.square {
  display: inline-block;
  height: 10px;
  margin-right: 16px;
  width: 10px;
}

.bg-yellow {
  background: #ddb81e;
}

.bg-gothic {
  background: #6d929b;
}

.bg-tean {
  background: #00bfa5;
}

#cloud-site .hr-center {
  display: block;
  margin: 0 auto;
}

.w-500 {
  max-width: 500px;
}

.social img {
  max-width: 88px;
}

.w-pad {
    padding-left: 96px;
    padding-right: 96px;
  }

.border-bottom {
  border-bottom: 1px solid #e4e4e4;
}

.getting-started .sub-title {
  padding: 0;
}

.getting-started img {
  float: right;
  padding-right: 48px;
}

.flt-left {
  float: left;
}

.pricing {
  justify-content: space-around;
}

#cloud-site .banner-bottom {
  align-items: center;
  color: #fff;
  min-height: 174px;
  padding: 20px 5%;
}

#cloud-site .bg-blue {
  background-color: #448aff;
}

#cloud-site .banner-bottom .main {
  color: #fff;
  font: normal 22px/25px Roboto;
  margin-right: 8%;
}

#cloud-site .banner-bottom .body {
  color: #fff;
  flex: 1;
  font: lighter 18px/21px Roboto;
  margin-right: 8%;
}

#cloud-site .banner-bottom .body .small {
  color: #fff;
  display: block;
  padding-bottom: 0;
  padding-top: 24px;
}

/* Slide Up */

.flip-container {
  position: relative;
}

.front, .back {
  background: #fff;
  position: absolute;
  height: 100%;
  transition: height 0.6s ease-in-out;
  overflow: hidden;
  width: 100%;
}

.front {
  z-index: 2;
}

.flip-container:hover .front,
.flip-container.hover .front {
  height: 0;
}

.flip-container:hover .expand,
.flip-container.hover .expand {
  opacity: 0;
}

@media all and (max-width: 1024px) {
  .w-pad {
    padding-left: 40px;
    padding-right: 40px;
  }

  #cloud-site .flex-container {
    justify-content: center;
  }
}

@media all and (max-width: 900px) {
  #cloud-site .getting-started .c6 {
    text-align: center;
  }

  .getting-started img {
    float: none;
    margin: 0 auto 16px auto;
    max-width: 100%;
    padding-right: 0;
  }
}

@media all and (max-width: 767px) {
  .panel > div:first-child {
    flex-direction: column;
  }

  #cloud-site .sub-title {
    padding-left: 10px;
    padding-right: 10px;
  }

  .pricing {
    flex-direction: column;
    padding-left: 40px;
  }

  #cloud-site .banner-bottom {
    align-items: initial;
    flex-direction: column;
    text-align: center;
  }

  #cloud-site .banner-bottom > * {
    margin: 10px 0;
  }
}

@media all and (max-width: 425px) {
  .w-pad {
    padding-left: 10px;
    padding-right: 10px;
  }

  .social img {
    max-width: 100%;
  }

  #cloud-site .flex-card {
    margin: 0 0  16px 0;
  }

  #cloud-site .med-card {
    min-width: 300px;
  }

  .block {
    height: 270px;
  }
}