/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
.infiframe{
  width: 100%;
  height: 400px;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}


/* Create two columns that float next to eachother */
.column {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}



/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


  .card{position:relative;
    display:-ms-flexbox;
    display:flex;
    text-align: center;
    -ms-flex-direction:column;
    flex-direction:column;min-width:0;
    word-wrap:break-word;background-color:#b3ecff;
    background-clip:border-box;
    border:1px solid rgba(0,0,0,.125);
    border-radius:.25rem}

.card-img-top{
  width:20%;
  text-align: center;
  
  border-top-left-radius:calc(.25rem - 1px);
  border-top-right-radius:calc(.25rem - 1px) 
}
  .card-img-bottom{
    width:100%;
    border-bottom-right-radius:calc(.25rem - 1px);
    border-bottom-left-radius:calc(.25rem - 1px)}
    .card-deck{
      display:-ms-flexbox;
      display:flex;
      -ms-flex-direction:column;
      flex-direction:column}
      .card-deck .card{margin-bottom:15px}
      @media (min-width:576px){
        .card-deck{-ms-flex-flow:row wrap;
          flex-flow:row wrap;
          margin-right:-15px;
          margin-left:-15px}
          .card-deck .card{display:-ms-flexbox;
            display:flex;-ms-flex:1 0 0%;
            flex:1 0 0%;-ms-flex-direction:column;
            flex-direction:column;margin-right:15px;
            margin-bottom:0;margin-left:15px}}