@charset "utf-8";
/* CSS Document */
 *{
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  body{
   
    width: 100%;
    height: 100%;
  }

  h1{
    padding: 2% 2% 1% 2%;
    font-size: 100%;
  }
  p{
    padding: 1%;
    font-size: 100%;
  }

  input{     
    border-radius: 5px 5px 5px 5px;
    margin: 1% auto;
    display: block;
    border: 1px solid #1cabe2;

  }

  .input-short{ 
    padding: 1%;       
    width: 50%;
    height: auto;
    text-align: left;
    font-size: 90%;
  }
  .input-button{
    padding: 1% 2%;
    font-size: 90%;
    font-weight: bold;
    text-align: center;
    background-color: #1cabe2;
    color: #FFFFFF;
  }
  .input-button:hover{
    background-color: #FFFFFF;
    color: #1cabe2;
  }
  #bg-popad{
    width: 100%;
    height: 100%;
    
    position: fixed;
    top: 0.1em;

    display: flex; /*means that what to do with contents inside the panel bg-popad, we used it for centering popad-content that is nested in bg-popad*/
    justify-content: center; /*horizentally center in case of display=flex otherwise this won't work*/
    align-items: center; /*vertically center in case of display=flex otherwise this won't work*/
    
    visibility: hidden;
  }
.exit{
    position: absolute;
    top: -80px;
    right: -25px;
    font-size: 62px;
    transform: rotate(90deg);
    cursor: pointer;
	color: #FA0B0B;
	z-index: 99;
  }



  .popad-content{
    width: 436px;
    height: 291px;
    border-radius: 5px 5px 5px 5px;
    border: 0px solid #FFFFFF;
    background-image:   url( "../../images/Contact-Oracle-01.png");
	background-repeat: no-repeat;
    text-align: center;
    position: relative;
	z-index: 9;
	/* we have given this relative to show his child i.e. exit that you can position relative
    to me and will give exit class absolute position so position absolute to me your closest parent class or div i.e. popup-content
    in absense of this relative position the cross in exit will go all way up on the webpage and not up in container
    popad-content*/


  }
  

  .hpanel {
    width: 100%;
    display: inline-grid;
    align-items: center;
    height: 10%;
    border-radius: 5px 5px 0 0;
    background-color: #0D6CC0;
	
  }
  .fpanel {
    width: 100%;
    display: inline-grid;
    align-items: center;
    height: 20%;
    border-radius: 0 0 5px 5px;
    background-color: #0D6CC0;
  }
  .bpanel{
    width: 100%;
    display: inline-grid;
    align-items: center;
    height: 60%;
    
  }

  @media screen and (max-width: 768px) {
    input{     
      margin: 2% auto;
    }
    .input-short{
      width: 80%;      
      padding: 2%; 
    }
    .input-button{
      padding: 2% 4%;
    }
  
  }