/*===============*/
/* GENERAL RULES */
body {
  color: #031c4e;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 20px 0;
}

ul {
  list-style: none;
  padding: 0;
}

footer {
  background-color: #031c4e;
  color:#fff;
}

.ms_light-blue {
  color: #006aff; /* special light blue color*/
}

.ms_btn-100 {
  width: 100%;
  margin-bottom: 15px;
  padding: 8px;
  font-weight: 600;
  border: none;
  background-color: #579aff;
  color: #fff;;
  border-radius: 5px;
}

.ms_btn-100.ms_btn-google {
  background-color: #fff;
  background-image: url('../img/g+logo.png');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 2% 50%;
  color: #333;
  box-shadow: 2px 2px 5px #55555585;
}

/*=========*/
/* SECTION */
.ms_section {
  padding: 50px 0;
}

.ms_section.ms_section-grey {
  background-color: #f3f5f9;
}

.ms_section.ms_section-grad-blue {
  color: #fff;
  background: linear-gradient(#0047c5, #001e9a);
}

.ms_section a {
  font-size: 1.2em;
  color: #579aff;
}

.ms_section h2 {
  font-size: 1.7em;
}

.ms_section p {
  font-size: 1.2em;
  line-height: 1.5em;
  opacity: .7;
}

.ms_section .ms_intro {
  text-align: center;
  margin-bottom: 50px;
}

.ms_section .ms_desc-box {
  padding-bottom: 40px;
}

.ms_opacity-70 {
  opacity: .7;
}

/*==============*/
/* BEGIN HEADER */
.ms_navbar {
  background-color: #fff;
  line-height: 70px;
  text-transform: capitalize;
  margin: 0;
}

.ms_navbar img.logo {
  height: 30px;
}

.ms_navbar ul {
  margin: 0;
}

.ms_navbar a {
  font-size: 15px;
  font-weight: 600;
  color: #073494;
}

.ms_navbar a.ms_sign-btn {
  text-transform: capitalize;
  font-size: 15px;
  padding: 10px;
  color: #579aff;
  border: 1px solid #579aff;
  border-radius: 5px;
  transition: all .3s ease-in-out;
}

.ms_navbar a.ms_sign-btn:hover {
  text-decoration: none;
  background-color: #579aff;
  color: #fff;
}
.ms_burger-menu {
  font-size: 20px;
  color: #2485fd;
}

/* jumbotron */
.ms_jumbo {
  margin-top: 70px;
  background-image: url(../img/ms-jumbo.jpg);
  background-size: cover;
  background-position: center;
}

/* jumbo teaser*/
.ms_jumbo .ms_teaser {
  color: #fff;
}

.ms_jumbo .ms_teaser h1 {
  font-size: 2em;
  color: inherit;
}

.ms_jumbo .ms_teaser p {
  font-size: 1.2em;
}

/* jumbo deploy app form */
.ms_deploy-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.ms_deploy-form h3 {
  font-size: 2em;
}

.ms_deploy-form input[type="email"],
.ms_deploy-form input[type="password"] {
  padding: 10px 5px;
  height: auto;
}

.ms_deploy-form p.ms_small {
  font-size: 0.9em;
  color:#031c4e;
}
/* END HEADER */
/*============*/

/*===================*/
/* BEGIN BURGER MENU */

/* Burger button */
.burger-menu {
  line-height: 70px; /* height of header line*/
  text-align: right;
  position: relative;
}
#burger-menu  {
  background: none;
  border:none;
  outline: none;
  cursor: pointer;
  height: 23px;
}

#burger-menu span {
  display: inline-block;
  width: 35px;
  height: 3px;
  background-color: #2485fd;
  position: relative;
  vertical-align: middle;
  transition: .2s;
}

#burger-menu span::before {
  content: '';
  width: 35px;
  height: 3px;
  background-color: #2485fd;
  position: absolute;
  top: -8px;
  left:0;
  transition: .2s;
}

#burger-menu span::after {
  content: '';
  width: 35px;
  height: 3px;
  background-color: #2485fd;
  position: absolute;
  top: 8px;
  left:0;
  transition: .2s;
}

#burger-menu.active span {
  height: 0;
}

#burger-menu.active span::before {
  top: 0;
  transform: rotate(45deg);
}

#burger-menu.active span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Burger menu*/
#overlay {
  position: fixed;
  width: 100%;
  height: calc(0% - 70px);
  top: 70px;
  left: 0;
  background-color:#fff;
  z-index: 100;
  overflow-x: hidden;
  transition: all .5s ease;
}

.vertical-menu {
  text-align: center;
  line-height: 60px;
}

.vertical-menu li {
  display: block;
  text-transform: uppercase;
}

.vertical-menu a {
  font-size: 22px;
  font-weight: 300;
}

a.ms_vmenu-btn {
  display: inline-block;
  margin: 0 10px;
  padding: 8px 12px;
  color: #fff;
  background-color: #2485fd;
  border-radius: 5px;
  line-height: normal;
}

.height-0 {
  height: 0%;
}

.height-100 {
  height: calc(100% - 70px)!important;
}
/* END BURGER MENU */
/*=================*/

/*============*/
/* BEGIN MAIN */

/* Customers section */
.ms_customers h2 {
  font-size: 1.3em;
  text-transform: uppercase;
}

.ms_customers ul {
  margin: 0;
  padding: 0;
}

.ms_customers li {
  display: inline-block;
  width: 45%;
  padding: 0 10px;
}

.customers-logo img {
  width: 100%;
  vertical-align: middle;
}

/* Deploy app section */
.ms_deploy-app ul {
  margin-bottom: 40px;
}

.ms_deploy-app li {
  border-left: 1px solid #ccc;
  padding: 10px;
}

.ms_deploy-app li a {
  color: #031c4e;
  font-size: 1.4em;
  opacity: .7;
}

/* Casrousel section */
.ms_carousel {
  width: 90%;
  max-width: 992px;
  margin: 0 auto;
}

.ms_carousel .ms_slider {
  position: relative;
}

.ms_carousel .ms_slider .ms_slider-main {
  width: 100%;
  margin: 0 auto;
}

.ms_slider-main img {
  width: 100%;
}

.ms_slider-arrow {
  font-size: 4em;
  margin: 0 20px;
  color: #031c4e4f;
  position: absolute;
  top: 35%
}

.ms_slider-arrow.ms_left-arrow {
  left:0;
}

.ms_slider-arrow.ms_right-arrow {
  right:0;
}

.ms_slider-arrow.ms_active {
  color: #031c4e;;
}

.ms_carousel p.ms_slider-desc {
  margin: 30px 0;
  font-size: 1em;
  font-weight: 600;
}

/* carousel - slider count box */
.ms_carousel .ms_slider-count-box {
  margin: 10px 0;
}

.ms_slider-count {
  display: inline-block;
  border: 1px solid #579aff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 1px;
}

.ms_slider-count.ms_active {
  background-color: #579aff;
}

/* data centers section */
.ms_data-centers table {
  width: 100%;
  font-size: 0.9em;
  margin-bottom: 30px;
}

.ms_data-centers table a {
  color: #00d7d2;
}

.ms_data-centers tbody tr {
  border-bottom: 1px solid #fff;
}

.ms_data-centers tbody tr:last-child {
  border-bottom: none;
}

.ms_data-centers tbody td {
  padding: 10px;
}

.ms_data-centers tbody td:nth-child(1) {
  font-weight: 600;
}

.ms_data-centers tbody td:nth-child(2) {
  opacity: .5;
}

.ms_data-centers tbody td:nth-child(3) {
  text-align: right;
}

/* Dev-team opinion Section */
.ms_dev-team-opinion .ms_opinion-box {
  width: 80%;
  margin: 0 auto;
  padding: 5% 0;
  background-color: #fff;
}

.ms_dev-team-opinion .ms_opinion-box img {
  margin-bottom: 20px;
  width: 50%;
}

.ms_dev-team-opinion .ms_opinion-box p {
  font-size: 1.4em;
}

.ms_dev-team-opinion .ms_opinion-box h4 {
  margin-bottom: 5px;
}

.ms_dev-team-opinion .ms_opinion-box h5 {
  margin-top: 5px;
}

/* Create account section */
.ms_create-acc-btn {
  font-size: 1.2em;
  font-weight: 600;
  padding: 10px 15px;
  background-color: #fff;
  color: #006aff;
  border: none;
  border-radius: 5px;
}
/* END MAIN */
/*==========*/

/*=============*/
/* BEGIN FOOTER*/
.ms_footer .ms_credits img.ms_small-logo {
  width: 50px;
  margin-bottom: 10px;
}

.ms_footer .ms_credits p {
  font-size: 1em;
}

.ms_footer .ms_credits span.small {
  opacity: .5;
}

.ms_footer .ms_socials a {
  color: #fff;
  font-size: 1.5em;
}

.ms_footer-link-list {
  margin-bottom: 30px;
}

.ms_footer-link-list ul>li {
  font-size: 1.1em;
  padding: 5px 0;
}

.ms_footer-link-list ul>li a {
  color: #fff;
  opacity: .7;
}
/* END FOOTER */
/*==========*/

/*===============*/
/* BONUS CHATBOT */
.ms_chat-bot-box {
  position: fixed;
  width: 100%;
  bottom: 20px;
  text-align: left;
}

.ms_chatbot {
  position: relative;
  bottom: 90px;
  display: inline-block;
  box-shadow: 2px 3px 20px #0000005e;
}

.ms_chatbot-icon {
  display: inline-block;
  position: relative;
  padding: 5px;
  background-color: #006aff;
  border-radius: 5px;
}

.ms_chatbot-icon img {
  height: 50px;
}

.ms_chat-message-count {
  position: absolute;
  top: -15px;
  right: -10px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
  text-align: center;
  background-color: red;
  border: 5px solid #fff;
  border-radius: 50%;
}

.ms_chatbot-msg {
  position: relative;
  bottom: -60px;
  display: inline-block;
  padding: 10px;
  max-width: 300px;
  min-width: 250px;
  color: #031c4e;
  font-size: 1.1em;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 2px 3px 20px #0000005e;
  margin-bottom: 10px;
}

.ms_chatbot-msg p {
  margin: 0;
}

.ms_chatbot-msg i {
  position: absolute;
  bottom: 2px;
  right: -12px;
  color: #fff;
  font-size: 2.5em;

}
/* END BONUS CHATBOT*/
/*==================*/

/*==== SM =====*/
/* MEDIA QUERY */
@media all and (min-width:768px) {

  /* SM ms_section */
  .ms_section a { color: #579aff; }
  .ms_section h2 { font-size: 2em; }
  .ms_section p { font-size: 1.7em; }
  .ms_section .ms_desc-box p { font-size: 1.3em; }

  /* SM jumbo teaser*/
  .ms_jumbo .ms_teaser h1 { font-size: 2.5em; }
  .ms_jumbo .ms_teaser p { font-size: 1.6em; }

  /* SM Customers section */
  .ms_customers h2 { font-size: 1.4em; }
  .ms_customers li { width: calc((100%/6) - 5px); }

  /* SM Deploy app section */
  .ms_section .ms_desc-box  h3 { font-size: 1.5em; }
  .ms_deploy-app li a { font-size: 1.5em; }

  /* SM Casrousel section */
  .ms_carousel .ms_slider .ms_slider-main {
    width: 80%;
  }

  /* SM data centers section */
  .ms_data-centers table { font-size: 1.2em; }

  /* SM footer */
  .ms_footer-link-list ul>li { font-size: 1.1em; }
}

/*==== MD =====*/
/* MEDIA QUERY */
@media all and (min-width:992px) {


  /* SM ms_section */
  .ms_section a { color: #579aff; }
  .ms_section h2 { font-size: 2.2em; }
  .ms_section p { font-size: 1.6em; }
  .ms_section .ms_desc-box p { font-size: 1.3em; }

  /* MD jumbo teaser*/
  .ms_jumbo .ms_teaser h1 { font-size: 4.5em; }
  .ms_jumbo .ms_teaser p { font-size: 1.7em; }

  /* MD Customers section */
  .ms_customers h2 { font-size: 1.5em; }
  .ms_customers li { width: calc((100%/6) - 5px); }

  /* MD Deploy app section */
  .ms_section .ms_desc-box  h3 { font-size: 1.5em; }
  .ms_deploy-app li a { font-size: 1.5em; }

  /* SM data centers section */
  .ms_data-centers table { font-size: 1em; }

  /* SM footer */
  .ms_footer-link-list ul>li { font-size: 1em; }

  /* BONUS CHATBOT */
  .ms_chat-bot-box {
    text-align: right;
  }

  .ms_chatbot {
    position: relative;
    bottom: 0px;
    right: 15px;
    display: inline-block;
    box-shadow: 2px 3px 20px #0000005e;
  }

  .ms_chatbot-msg {
    text-align: left;
    bottom: 0;
  }
  /* MD END BONUS CHATBOT*/
}