home.css

/*guess we need to clean up after we done and observe our tabulations and code comments for ease of understanding */
/*pop up*/
.popup{
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 10;
 background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.popup > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10px 15px 0;
  padding-bottom: 15px;
  max-width: 500px;
  background: #F6F2E7;
  border-radius: 10px;
  align-content: center;
/*   position: absolute; */
/*   top:50%;
  left:50%; */
  box-shadow: 0 2px 4px #C1C1C1;
/*   transform: translate(-50%,-50%); */
/*   text-align: cennter; */
  padding:0 30px 30px;
  
}
.open-popup{
  visibility: visible;
/*   top:50%;
  transform: translate(-50%, -50%) scale(1); */
}
.popup img{
  width:200px;
}
.popup p{
  text-align: center;
  font-size: 15px;
}
.inner{
  display: flex;
  flex-direction: row;
  padding: 20px 20px 0 20px;
}
.texting{
  display: flex;
  padding-left: 20px;

  flex-direction: column;
  justify-content: center;
}
.popup .close{
  /*padding: 325px;*/
  align-self: flex-end;
  font-size: 30px;
  color:  #CAA369;;
  margin-top: 10px;
  cursor: pointer;
}
.popup input{
  display: none;
}
.popup .detail{
  font-size: 15px;
  color:#222;

}
.popup .force{
  font-size: 15px;
  color:#604844;
}

.form {
  width: 62%;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.form-title{
    font-size: 2.8rem;
    font-weight: 600;  
    margin-top: 1rem;
    padding-left: 40%;
    margin-bottom: 1.5rem;
}

.fields{
/*     margin-top: 40px; */
    width: 100%;
/*     display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
   
}

.input-fields{
  
    display: flex;
    flex-direction: column;
    
/*     width: calc(100% / 2 - 30px);
    margin-bottom: 20px;
    margin-right: 20px; */
}
input:required {
  border: #9a5318;
}/*does your over ride or negate the initial input required property ann*/


.required-label {
  color: #d64d22;
}

.network{
  grid-column: 1/-1;
}

.network .network-provider{
    display: flex;
    flex-direction: row;
  flex-wrap: wrap;
   width: 60%;
    justify-content: space-between;
  align-items: center;
}

/* input[disabled] {pointer-events:none} */


.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.phone{
  width: 40%;
  margin-top: 20px;
}

.input-fields label{
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px; 
}
.drop:required:invalid {
   
  color: #8E8E8D;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
option{
  color: CAA369;
}

.input-fields input, .input-fields select{
    height: 40px;
    border-radius: 5px;
    font-size: 15px;
    outline: none;
    font-weight: 400;
    color:black ;
    border: 1px solid #8E8E8D;
    padding: 0 20px;
  background: #FFFFFF;
}

select {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.drop {
  background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg,  white 50%, transparent 50%),
    radial-gradient( #CAA369 70%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}

select.drop:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    radial-gradient( #CAA369 70%, transparent 72%);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - .5em) .5em;
  background-size:
    5px 5px,
    5px 5px,
    1.5em 1.5em;
  background-repeat: no-repeat;
  border-color: #CAA369;
  outline: 0;
}

.input-fields input:focus {
    border: 1px solid #CAA369;
}

.input-fields input::placeholder{
    text-align: center;
    font-weight: 400;
}

input{
    accent-color: #CAA369 ;
    
}

.network .radio {
    display: flex;
    align-items: center;

    font-size: 15px;
    font-weight: 400;
}

.spacing {
  padding-right: 1rem;
}

.radio label{
    margin-left: 10px;
    margin-bottom: 0;
}

.submit-btn{
  align-self: flex-end;
  margin-top: 2rem;
}

.home-btn.btn{
    width: 200px;
    padding: 8px 16px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
   background: linear-gradient(90deg, rgba(202,163,105,1) 0%, rgba(186,148,96,1) 47%, rgba(170,133,86,1) 100%);
    border: none;
    border-radius: 5px;
}

.home-btn.btn:hover {
  position: relative;
  top: -1px;
  cursor: pointer;
}

.home-btn.btn:active {
  opacity: 0.9;
}

.tel-logo{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 40px;
    width: 100%;
}

.tel-logo span {
  display: inline-block;
  border: 1px solid #aaa;
  background-color: #fff;
  border-radius: 5px;
  height: 100%;
  position: relative;
  left: 10px;
  z-index: 1;
}

.tel-logo input {
  height: 100%;
  width: 100%;
}

.altschool > img {
  border-radius: 5px;
  height: 40px;
  width: auto;
  position: relative;
  z-index: -1;
}

#validate-process {
  font-size: 10px;
  padding-left: 10px
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

@media (max-width: 1024px) {
  .form {
    width: 85%;
    
  }
}

@media (max-width:768px){
  .form {
  width: 100%;
}

  .network .network-provider{
   width: 70%;
}

   
}

/*Mobile styling*/
@media (max-width: 568px) {
  .popup > div {
    max-width: 400px;
  }

  .popup img {
    width: 150px;
  }

  .inner {
    padding: 1rem 0;
  }
  
  .fields {
    grid-template-columns: 1fr;
  }

   .network .network-provider{
   width: 90%;
}
  .phone {
        width: 100%;
    }

}

@media (max-width:480px){
      .popup > div{
        
  /*   width: 100vw; */
  /*   background: #F6F2E7;
    border-radius: 10px; */
  /*   align-content: center;
    position: absolute;
    top:50%;
    left:50%;
    box-shadow: 0 2px 4px #C1C1C1;
    transform: translate(-50%,-50%) scale(0.1); */
/*     text-align: center; */
  /*   padding:0 30px 30px; */
  /*   visibility: hidden; */
    
  }
  .open-popup{
    visibility: visible;
/*     top:50%;
    transform: translate(-50%, -50%) scale(1); */
  }
  .popup img{
/*     width:100px;
    margin-left: 100px; */
    margin-bottom: 20px;
    
    
  }
  .popup p{
    text-align: center;
    font-size: 15px;
  }
  .inner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 30px;
    padding: 20px 20px 0 20px;
  }

  .texting{
    display: flex;
    padding-left: 20px;
  
    flex-direction: column;
  }
  .popup .close{
    font-size: 30px;
    align-self: flex-end;
/*     margin-top: 10px; */
  }
  .popup button{
/*     width: 100px; */
    margin-top: 50px;
    margin: 0 auto;
    display: block;
    background: #CAA369;
    color:fff;
    border: 0;
    
    outline: none;
    font-size: 20px;
    font-weight: 500;
  }
  .popup .detail{
    font-size: 15px;
    color:#222;
  
  }
  .popup .force{
    font-size: 15px;
    color:604844
    
  } 
    .input-fields{
        width: 100%;
    }

  .input-fields input {
    width: 100%;
  }

  .input-fields input[type="radio"] {
    width: auto;
  }

/*      .network {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        flex-wrap: wrap;
    } */
  .submit-btn {
/*         position: absolute;
        bottom: -40px;
        left: 0; */
     align-self: center;
     width: 100%;
    }

  .submit-btn #submit-form {
    width: 100%;
  }

    .network .radio {
        display: flex;
        align-items: center;
    
        font-size: 15px;
        font-weight: 400;
    }

    
    .radio label {
        margin-left: 5px;
      
    }
  #radio input[type=radio]:checked + label:after {
 
  background: CAA369;
  }

   
    
/*     .submit-btn {
        position: absolute;
        bottom: -40px;
        left: 0;
        
        
    } */
}