@import url(https://fonts.googleapis.com/css?family=Quando);
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}
html, body {
  background:  white;
  font-family: Avenir-block, Arial, Helvetica, sans-serif;
  font-weight: 300;
  width: 100%;
/* style="margin:0px;padding:0px;overflow:hidden"*/
  height: 100%; 
  margin: 0; 
  padding: 0;
}
/*  body, html {width: 100%; height: 100%; margin: 0; padding: 0} */
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

/*
iframe */


/*
.iframe-container {
  overflow: hidden; 
  padding-top: 56.25%;
  position: relative;
}

*/

.iframe-container  {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
  height: 0;
/*  background-color: yellow; */
}



.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
  height: 100%;
  display: block;
}

/*
* { line-height: 0; }

iframe { display: block; }

*/
/*
* { margin:0 padding:0 } 


body { margin:0; padding:0; text-align:center; overflow-y: hidden; }  

#hold_my_iframe { padding:0px; margin:0 auto; width:100%; height:100% }

*/

/*
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

*/

/*
#frameIt{
    width:100%;
    */
/*  height:500px; */
/*
    position: relative;
    height: 100%;
}
*/

/*
@media screen and (max-width: 667px) {
  body {
      overflow-x: hidden !important;
  }
  .row-container {
      max-width: 100% !important;
      overflow-x: hidden !important;
  }

  .iframe-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
}
*/


h2, h3 {
  background: #0D757D;
  width: 100%;
  min-height:  2rem; /*200px; */
  line-height: 2rem; /* 200px; */
  font-size: 1rem; /* 3rem;*/
  font-weight: normal;
  text-align: center;
  color:  rgba(0,0,0,.6);; /* rgba(0,0,0,.4);*/
  margin: 3rem auto 0;
  font-family: Avenir-book, Arial, Helvetica, sans-serif;
}
.uno {background: #ff5e33;}
.dos.bis {background: #85144B;}
.dos {background: #FADD40;}
h3 {background: #b8e1dd; /* #2B5B89; */}


h4 {
    text-decoration: none;
    color:red;
    z-index: 1;
    font-size: 1.3rem;
  }


  
h6 {
    text-decoration: none;
    color:red;
    z-index: 1;
    font-size: 1rem;
  }

h2 > a, h3 > a {
  text-decoration: none;
  color: rgba(0,0,0,.4);
  z-index: 1;
}

h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}
h2 > a:hover:before,
h2 > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
.uno a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #ffdb00;  
}
.dos > a:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  border: 1px solid #000;
  bottom: -2px;
  left: 0;
  background: #fff;
  border-radius: 5px;
  opacity: 0;
  transform: scalex(0);
  transition: .5s;
}
.dos.bis > a:after {
  opacity: .05;
  transform: scalex(1);
}
.dos:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}
.dos.bis > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FADD40;
}
.dos > a:before {
  background: rgba(0,0,0,0);
  box-shadow: 0 0 10px 2px #FF5E33;
}

h3 > a:before {
  content: "";
  background: #7FDBFF;
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  border-radius: 5px;
  transform: scaleX(0);
  animation: 1.4s forwards no-hover-v linear;
  animation-fill-mode: forwards;
  z-index: -1;
}
h3 > a:hover:before,
h3 > a:focus:before {
  animation: .5s forwards hover-v linear;
  animation-fill-mode: forwards;
}
@keyframes hover-v {
  0% {
      transform: scaleX(0);
      height: 5px;
     }
  45% {   
      transform: scaleX(1.05);
      height: 5px;
     }
  55% {height: 5px;}
  100% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
}
@keyframes no-hover-v {
  0% {
      transform: scaleX(1.05);
      height: 3.8rem;
     }
  45% {height: 5px;}
  55% {   
      transform: scaleX(1.05);
      height: 5px;
      opacity: 1;
     }
  
  100% {
      transform: scaleX(0);
      height: 5px;
      opacity: .02;
     }
}

p {padding: .5rem;}
p a {color: rgba(255,255,255,.5)}