/*
Theme Name: GCLOUDVN
Theme URI: https://gcloudvn.com
Description: Gimasys - Đối tác ủy quyền Google tại Việt Nam
Author: WAM.VN
Author URI: https://wam.vn
Template: Total
Version: 1.0
*/
.section-gcp-5 {
  background: #ffffff;
  color: #000000;
  padding: 0 0 20px;
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
.section-gcp-5 {
    margin-bottom: 30px;
  }
}
.section-gcp-5 .section-gcp-5-content {
  max-width: 550px;
  margin: 0 auto;
}
.section-gcp-5 h2 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
}
.section-gcp-5 p {
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  text-align: center;
}
.section-gcp-5 .list-item-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
.section-gcp-5 .list-item-row {
    display: block;
  }
}
.section-gcp-5 .list-item-row .list-item-col {
  width: 21%;
  color: #ffffff;
  padding: 0 5px;
}
@media only screen and (max-width: 767px) {
.section-gcp-5 .list-item-row .list-item-col {
    width: 100%;
    margin-bottom: 20px;
  }
}
.section-gcp-5 .list-item-row .list-item-col .col-item-wrapper {
  height: 100%;
  background-color: #deefef;
  position: relative;
}
.section-gcp-5 .list-item-row .list-item-col .item-image {
  padding: 10px;
  margin-bottom: 20px;
  min-height: 200px;
}
.section-gcp-5 .list-item-row .list-item-col .item-image img {
  width: 100%;
  height: auto;
}
.section-gcp-5 .list-item-row .list-item-col .item-top {
  font-size: 16px;
  background-color: #5271ff;
  color: #ffffff;
}
.section-gcp-5 .list-item-row .list-item-col .item-top {
  width: 100%;
  height: 80px;
  padding: 10px 10px 10px 50px;
  position: relative;
  background: #5271ff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.section-gcp-5 .list-item-row .list-item-col .item-top:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 30px solid white;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
}
.section-gcp-5 .list-item-row .list-item-col .item-top:before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 30px solid #5271ff;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  z-index: 9;
}
.section-gcp-5 .list-item-row .list-item-col .item-content {
  color: #333333;
  background-color: #deefef;
  padding: 20px 10px;
}
.section-gcp-5 .list-item-row .list-item-col.col1 {
  width: 16%;
}
@media only screen and (max-width: 767px) {
.section-gcp-5 .list-item-row .list-item-col.col1 {
    width: 100%;
  }
}
.section-gcp-5 .list-item-row .list-item-col.col1 .col-item-wrapper {
  height: 100%;
  background-color: #7b7979;
}
.section-gcp-5 .list-item-row .list-item-col.col1 .col-item-wrapper:after {
  content: "";
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 50px solid #ffffff;
}
.section-gcp-5 .list-item-row .list-item-col.col1 .item-top {
  background-color: #2d3137;
}
.section-gcp-5 .list-item-row .list-item-col.col1 .item-top:before {
  border-left-color: #2d3137;
}
.section-gcp-5 .list-item-row .list-item-col.col1 .item-content {
  color: #ffffff;
  background-color: #7b7979;
}
.section-gcp-5 .list-item-row .list-item-col.col4 .item-top {
  background-color: #ffbd59;
}
.section-gcp-5 .list-item-row .list-item-col.col4 .item-top:before {
  border-left-color: #ffbd59;
}
.section-gcp-5 .list-item-row .list-item-col.col5 .item-top {
  background-color: #008037;
}
.section-gcp-5 .list-item-row .list-item-col.col5 .item-top:before {
  border-left-color: #008037;
}
.section-gcp-5 .section-gcp-5-button {
  margin-top: 60px;
  text-align: center;
}
.section-gcp-5 .section-gcp-5-button a {
  color: #ffffff;
  background: #4386f6;
  padding: 15px 30px;
  font-size: 16px;
  border-radius: 25px;
  font-weight: 700;
  text-transform: uppercase;
}
.section-gcp-5 .section-gcp-5-button a:hover {
  background: #0984e3;
}

/* FORM STYLE - WAM.VN */
/* FOR THE ICONS */
.wpcf7 .fa, .wpcf7 .ticon {
    color: #08b7fc !important;
    border: 1px solid !important;
    padding: 5px !important;
    height: 30px !Important;
    width: 30px !important;
    min-width: 30px !important;
    text-align: center !Important;
    border-radius: 50% !important;
    margin-right: 2.7% !Important;
    margin-top: 5px !important;
    vertical-align: middle !Important;
    display: flex !Important;
    align-items: center !important;
    justify-content: center !important;
}
/* For dropshadow */
.sign-up-box {
    box-shadow: 0px 35px 120px rgba(0,0,0,0.4) !important;
}
/* FORM STYLING */
span.wpcf7-form-control-wrap input, span.wpcf7-form-control-wrap select {
    height: 35px !important;
    padding: 0px !Important;
    padding-left: 10px !important;
}
.wpcf7 .input-row, .wpcf7 .input-row-single {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 0px !important;
}
.input-item {
    display: flex !important;
}
.input-column:last-child {
    margin-top: 0px !important;
    margin-left: 10% !important;
}
p.field {
    margin-bottom: 15px !Important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 80% !important;
}
p.sign-up input {
    background-color: #08b7fc !important;
    border: 1px solid #08b7fc !important;
    border-radius:  4px !important;
    text-transform: none !important;
    font-weight: 600 !important;
	font-size: 16px;
}
p.sign-up input:hover {
    background-color: #62d0fc !important;
    border-color: #62d0fc !important;
}
form .input-row:last-child {
    justify-content: space-between !important;
    padding-right: 0px !important;
}
form .input-row:last-child .input-column:first-child {
    padding-left: 0px !important;
    margin-top: -30px !important;
}
form .input-row:first-child {
    margin-bottom: 0px !Important;
}
form .input-column {
    margin-bottom: 0px !important;
}
.background-row { 
    display: flex !important;
    justify-content: center !important
}
@media only screen and (min-width: 690px) {
.full-width-content.vc_row-fluid .vc_span12 {
    min-width: 1050px !important;
    width: 75vw !important;
    max-width: 60vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
}
.input-item {
    justify-content: space-between !important;
}
.input-column {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
}
.input-row:last-child .input-column:first-child .input-item {
    display: flex !important;
    justify-content: flex-start !important;
}
.g-recaptcha {
    transform-origin: left top !important;
  -webkit-transform-origin: left top !important;
}
.input-row:last-child .input-column:last-child p.sign-up {
    margin-bottom: 0px !important;
    width: 100% !important;
}
.input-row:last-child .input-column:last-child p.sign-up input {
    width: 100% !important;
}
.input-row:last-child {
    align-items: flex-end !important;
}
.input-row:last-child {
    margin-top: 0px !important;
}
.sign-up-box {
    display: flex !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
}
.image-column {
    margin-right: -5px !important;
}
/* RESPONSIVENESS OF FORM */
@media only screen and (max-width: 800px) { 
    .input-row .input-column {
        width: 100% !important;
        flex-basis: 100% !Important;
        margin-left: 0px !important;
    }
    .input-row {
        flex-wrap: wrap !important;
    } 
    .input-column:last-child {
        margin-top: 15px !Important;
    } 
    form .input-row:last-child>.input-column:first-child {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }  
    form .input-row:last-child .input-column:first-child .wpcf7-form-control-wrap {
        margin-top: 0px !important;
    }   
    form .input-row {
        padding-left: 15% !important;
        padding-right: 15% !important;
    } 
    form .input-row:last-child {
        padding-right: 15% !important;
    }    
    form .input-row:last-child .input-column:first-child .input-item {
        justify-content: center !important;
    }   
}
@media only screen and (max-width: 767px) {
    .full-width-content.vc_row-fluid.background-row .vc_span12 {
        min-width: 90vw !important;
        max-width: 90vw !important;
    } 
    form .input-row {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}
/* STYLING SUCCESS SCREEN */
.success-column {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.success-column .wpb_text_column p {
    margin-bottom: 5px !important;
}
.input-row:last-child .input-column:last-child {
    margin-left: 4% !important;
}
.input-row:last-child .input-column:last-child {
    margin-left: 10% !important;
}
.wpcf7-form label.error, span.wpcf7-not-valid-tip {
    white-space: nowrap !important;
}
/* MOBILE AND TABLET VIEW AMENDS */
@media only screen and (max-width: 800px) {
    .sign-up-box {
        height: auto !Important;
    }
    form .input-row:last-child .input-column:first-child .input-item {
        justify-content: normal !Important
    }
    .input-row:last-child .input-column:last-child {
        margin-left: 0px !important;
    }
    .input-row:last-child .input-column:last-child p.sign-up {
        margin-bottom: 10% !important;
        margin-top: 5% !important;
    }
    .sign-up-box-column>.vc_column-inner>.wpb_wrapper>.wpb_text_column {
        padding-left: 4% !important;
        padding-right: 4% !important;
        padding-top: 5% important;
    }
    .success-column {
        height: 80vh !important;
    }
    .sign-up-box-column>.vc_column-inner>.wpb_wrapper>h2 {
        margin-bottom: 3% !important;
    }
    .sign-up-box-column>.vc_column-inner>.wpb_wrapper>.sc_line {
        margin-bottom: 2% !important;
    }
    form .input-row:last-child {
        padding-right: 5% !important;
    }
    .row-two .input-column:last-child .input-item .fa-users,
    .captcha-item .fa-users {
        display: none !important;
    }
    .captcha-item .wpcf7-form-control-wrap {
        width: 304px !important;
        max-width: 304px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .input-row:last-child .input-column:last-child p.sign-up {
        margin-top: 0px !important;
    }
    .captcha-item .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
        margin-top: 8px !important;
        text-align: center !Important;
    }
}
@media only screen and (max-width: 443px) {
    .form-heading br {
        display: inline !important;
    }
}
@media only screen and (min-width: 767px) and (max-width: 800px) {
    form .input-row:last-child {
        padding-right: 15% !important;
    }
}
.wpcf7 .fa.fa-tags, .wpcf7 .fa.fa-briefcase, .wpcf7 .fa.fa-users  {
    padding-top: 2% !important;
    padding-left: 1.75% !important;
}
@media only screen and (max-width: 600px) {  
    .success-image>.wpb_wrapper>.vc_single_image-wrapper>img {
        width: 80% !important;
    }
}
@media only screen and (max-width: 410px) {
    .success-message-text>.wpb_wrapper>p>span {
        font-size: 18px !important;
        line-height: 18px !important;
    }
}
/* PLACEHOLDER TEXT COLOR */
::placeholder {
    color: #8c8c8c !important;
}
:-ms-input-placeholder {
    color: #8c8c8c !important;
}
::-ms-input-placeholder {
    color: #8c8c8c !important;
}
::-moz-placeholder {
    color: #8c8c8c !important;
    opacity: 1 !important;
}
:-moz-placeholder {
    color: #8c8c8c !important;
    opacity: 1 !important;
}
p.sign-up {
    width: 100% !Important;
}
p.sign-up>input {
    width: 100% !important;
}
.wpcf7 select {
	color: #8c8c8c;
	margin-top: 3px;
}
.wpcf7 form .wpcf7-response-output {
	position: relative;
    padding: 20px !important;
	border: 1px solid #ffb900 !important;
    border-radius: 8px;
}
.spin-form {
    margin-top: 13px !important;
}
.wpcf7 .ajax-loader {
    font-size: 18px !important;
    color: #fff !important;
    opacity: 1 !important;
	margin-left: -40px !important;
}