@charset "utf-8";
/* CSS Document */

#myBtn {
  outline: none;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  padding-bottom: 50px;
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  overflow: visible;
    width: 80% !important;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
/* The Close Button */
.close {
      color: #b9b9b9;
    float: right;
    font-size: 60px;
  line-height: 4px;
  transition: all 0.25s ease-out 0s;
  position: absolute;
    top: 15px !important;
    right: 15px !important; 

}
.close:hover,
.close:focus {
  color: #a4bde4;
  text-decoration: none;
  cursor: pointer;
}
.modal-body { 
  width: 100%;
  float: left;
  text-align: center;
  margin: 0 0 0;
  padding: 45px 8% 30px;
  background: #fff;
}
.modal-body p {
    float: none;
    font-size: 15px;
    color: #0c0c0c;
    line-height: 29px;
    letter-spacing: 0;
    margin: 0 0 12px;
}
.modal-body h2 {
    float: none;
    font-size: 44px;
    color: #0c0c0c;
    letter-spacing: -0.2px;
    line-height: 62px;
    margin: 0 0 12px;
}
.modal-body .success-col1 .caldera-grid .form-control {
  width: 100%;
  float: left; 
  font-size: 15px;
  padding: 6px 12px; 
  margin: 0 0 0; 
  text-align: left;
  font-weight: 400;
  color: #0c0c0c;
  letter-spacing: 0.4px;
  background: #ffffff;
  border-color: #8d8d8d;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.25s ease-out 0s;
  display: inline-block;
  position: relative;
  box-shadow: none;
  vertical-align: baseline;
  outline: none;
  font-family: 'Poppins', sans-serif; font-weight: 400;
}
.modal-body .success-col1 .caldera-grid textarea.form-control {
  width: 100% !important;
  height: 137px;
  min-height: 39px;
  max-height: 160px;
  float: left;
  margin: 0 0 23px;
  padding: 16px 2% 0;
}
.modal-body .success-col1 .caldera-grid .col-sm-4 input::placeholder,
.modal-body .success-col1 .caldera-grid .col-sm-12 textarea::placeholder {
  color: #0c0c0c;
}
.modal-body .success-col1 .caldera-grid .col-sm-12 {
  padding: 0;
}
.modal-body .success-col1 .caldera-grid .col-sm-4 {
  width: 33%;
  margin: 0 0.5% 16px 0;
  padding: 0;
  float: left;
}
.modal-body .success-col1 .caldera-grid .col-sm-4:nth-last-child(1) {
  margin-right: 0;
}
.modal-body .success-col1 .caldera-grid .checkbox {
  width: 100%;
  float: left;
  margin: 0 0 2px;
  font-size: 13.06px;
  color: #3c3c3c;
  letter-spacing: 0.25px;
  line-height: 26px;
  vertical-align: baseline;
  outline: none;
  font-family: 'Poppins', sans-serif; font-weight: 400;
}
.modal-body .success-col1 .caldera-grid .checkbox input[type=checkbox] {
  background-image: url(../images/checkbox-thumb1.svg);
  user-select: none;
  overflow: hidden;
  height: 16px;
  width: 17px;
  margin: 0px !important;
  padding: 0;
  border: 0;
  position: relative;
  left: 0px;
  top: 3px;
  -webkit-appearance: none;
  outline: none !important;
  cursor: pointer;
  margin-right: 5px !important;
  background-size: 100%;
  background-repeat: no-repeat;
}
.modal-body .success-col1 .caldera-grid .checkbox input[type=checkbox]:checked {
    background-position: 0 -19px;
}
.modal-body .success-col1 .caldera-grid a {
  color: #ffd600;
  font-family: 'Poppins', sans-serif; font-weight: 700;
}
.modal-body .success-col1 .caldera-grid a:hover {
  text-decoration: underline;
}
.modal-body .success-col1 .caldera-grid .btn-default {
  float: none;
  color: #0c0c0c;
  border-color: rgba(0,0,0,0.0);
  cursor: pointer;
  margin: 15px 0 0;
  padding: 3px 35px 8px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.25s ease-out 0s;
  display: inline-block;
  position: relative;
  box-shadow: none;
  background: url(../images/right2-black-arrow.svg) no-repeat center / 17%;
  background-position: 100% 50%;
  transition: all 0.25s ease-out 0s;
  vertical-align: baseline;
  outline: none;
}
.modal-body .success-col1 .caldera-grid .btn-default:hover {
  color: #ffd600;
  background: url(../images/right3-yellow-arrow.svg) no-repeat center / 17%;
  background-position: 100% 50%;
  padding: 3px 40px 8px 0;
}
.modal-body .success-col1 .caldera-grid .checkbox label,
.modal-body .success-col1 .caldera-grid .radio label{
  padding-left: 0;
}



/*Smartphone css*/
@media screen and (max-width: 480px) {
.close { top: 3%; right: 5%;}
.modal-content { width: 90% !important;}
.modal-body p { margin: 0 0 14px;}
.modal-body h2 { font-size: 20px; line-height: 29px; margin: 0 0 16px;}
.modal-body { padding: 45px 5% 45px;}
.modal-body p { font-size: 12px; line-height: 15px;}
.modal-body h2 { font-size: 20px; line-height: 25px;}
.modal-body .success-col1 .caldera-grid .form-control {font-size: 12px; text-align: center;}
.modal-body .success-col1 .caldera-grid .col-sm-4 {width: 100%;}
.modal-body .success-col1 .caldera-grid .btn-default {font-size: 13px; background-position: 90% 50%;}
.modal-body .success-col1 .caldera-grid .checkbox {font-size: 12px;}
.modal-body .success-col1 .caldera-grid textarea.form-control {height: 100px;}
.modal { padding-top: 25px; padding-bottom: 10px; z-index: 99999999;}
}

@media screen and (min-width:481px) and (max-width:600px) {
.close { top: 3%; right: 5%;}
.modal-content { width: 90% !important;}
.modal-body p { margin: 0 0 14px;}
.modal-body h2 { font-size: 20px; line-height: 29px; margin: 0 0 16px;}
.modal-body { padding: 45px 5% 30px;}
.modal-body p { font-size: 12px; line-height: 18px;}
.modal-body h2 { font-size: 22px; line-height: 30px;}
.modal-body .success-col1 .caldera-grid .form-control {font-size: 12px; text-align: center;}
.modal-body .success-col1 .caldera-grid .col-sm-4 {width: 100%;}
.modal-body .success-col1 .caldera-grid textarea.form-control {height: 120px;}
.modal { padding-top: 25px; padding-bottom: 10px; z-index: 99999999; }

}

@media screen and (min-width:601px) and (max-width:767px) {
.close { top: 3%; right: 5%;}
.modal-content { width: 90%;}
.modal-body p { font-size: 13px; line-height: 20px;}
.modal-body h2 { font-size: 24px; line-height: 35px;}
.modal-body .success-col1 .caldera-grid .form-control {font-size: 13px; text-align: center;}
.modal-body { padding: 25px 5% 25px;}
.modal-body .success-col1 .caldera-grid .col-sm-4 {width: 100%;}
.modal { padding-top: 25px; padding-bottom: 10px; z-index: 99999999; }
}

@media screen and (min-width:768px) and (max-width:900px) {
.modal-content { width:60%;}
.modal-body p { font-size: 13px; line-height: 20px;}
.modal-body h2 { font-size:24px; line-height:40px;}
.modal-body .success-col1 .caldera-grid .form-control {font-size: 13px;}
.modal { padding-top: 35px; }
}

@media screen and (min-width:901px) and (max-width:1024px) {
.modal-content { width:55%;}
.modal-body p { font-size: 14px; line-height: 22px;}
.modal-body h2 { font-size:34px;line-height: 44px; }
.modal-body .success-col1 .caldera-grid .form-control {font-size: 14px;}
.modal { padding-top: 35px; }
}

@media screen and (min-width:1025px) and (max-width:1240px) {
.modal { padding-top: 40px; }
}