/* Style the tab */
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  background-color: #C2DBF0;
  text-align: center;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  /*float: left;*/
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: #1A456B;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #85B7E2;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #85B7E2;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  position: relative;
  height: 700px;
}

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.tabcontent p{
  margin: 0px 10px 0px 10px;
  text-align: center;
}

.tabcontent #content_other{
  position: absolute;
  margin:  0 auto;
  left: 0;
  right: 0;
  text-align: center;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

iframe{
    min-height: 500px;
  }

@media(min-width: 1018px) and (max-width: 1370px){
  iframe{
    min-height: 450px;
  }
}

/*Tablet - bigger*/
@media(min-width: 830px) and (max-width: 1017px){
 iframe{
    min-height: 400px;
  }
}


/*Tablet - smaller or phone*/
@media(min-width: 501px) and (max-width: 829px){ /*768px*/
  .tabcontent {
    min-height: 700px;
  }
  iframe{
    min-height: 400px;
  }
}

@media (max-width: 500px) {
  .tabcontent {
    height: 730px;
  }
  iframe{
    min-height: 200px;
  }
}