/*  GRID OF FOUR   ============================================================================= */
*:focus {
    outline: 0;
}

.span_1_of_2 {
  position:relative;
  width: 50%;
  height:100%;
}




/*---------------*/
/***** Bubba *****/
/*---------------*/



div.effect-bubba {margin-top:250px; position:relative; height:auto; padding-top:20px; padding-bottom:20px;}

div.effect-bubba div::before,
div.effect-bubba div::after {
  position: absolute;
  top:0px;
  right:10%;
  bottom: 0;
  left: 10%;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  z-index:999;
}

div.effect-bubba div::before {
  border-top: 1px solid #d2b54f;
  border-bottom: 1px solid #d2b54f;
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
}

div.effect-bubba div::after {
  border-right: 1px solid #d2b54f;
  border-left: 1px solid #d2b54f;
  -webkit-transform: scale(1,0);
  transform: scale(1,0);
}

div.effect-bubba:hover div::before,
div.effect-bubba:hover div::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}



/* MEDIA QUERIES*/
@media only screen and (max-width:980px) {

  .mentions_top {display:none;}
  .slogan_en {display:none;}

  .col {width: 50% !important;}

  .span_1_of_2 {
    width: 50% !important;
  }

  .clear {clear:left;}

  .header h1 img { width:150px !important; height:90px;}

  h3 {font-size:1.1em; padding:0; margin:0;}
}



@media only screen
  and (max-width: 670px)
  and (orientation: landscape) {

  .header { display:none;}

  .header-mobile {display:block; position:absolute; z-index:999;}


  div.effect-bubba {margin-top:65px; padding-top:10px; padding-bottom:10px;}

  a { font-size:1em; letter-spacing:0em;}

  .paris { background: url(../img/paris.jpg) no-repeat 0 100%; background-size: 100%;}

  .montreal { background: url(../img/montreal.jpg) no-repeat 0 100%; background-size: 100%;}

  .praha { background: url(../img/praha.jpg) no-repeat 0 100%; background-size: 100%;}

  .seoul { background: url(../img/seoul.jpg) no-repeat 0 100%; background-size: 100%; }

  .mentions {display:block;}

  .clear {clear:none !important;}

  .col {width: 25% !important; height:100% !important;}

  .span_1_of_2 {
    width: 50% !important;
  }

}


@media only screen
  and (max-width: 480px)
  and (orientation: portrait) {

  .header { display:none;}

  .header-mobile {display:block; position:absolute; z-index:999;}


  div.effect-bubba {margin-top:50px; padding-top:10px; padding-bottom:10px;}

  a { font-size:1em; letter-spacing:0em;}

  .paris { background: url(../img/paris.jpg) no-repeat 0 -30px; background-size: 100%;}

  .montreal { background: url(../img/montreal.jpg) no-repeat 0 -30px; background-size: 100%;}

  .praha { background: url(../img/praha.jpg) no-repeat 0 -30px; background-size: 100%;}

  .seoul { background: url(../img/seoul.jpg) no-repeat 0 -30px; background-size: 100%; }

  .mentions {display:block;}

}


@media only screen
  and (max-width: 480px)
  and (orientation: landscape) {


  .paris { background: url(../img/paris.jpg) no-repeat 0 100%; background-size: 100%;}

  .montreal { background: url(../img/montreal.jpg) no-repeat 0 100%; background-size: 100%;}

  .praha { background: url(../img/praha.jpg) no-repeat 0 100%; background-size: 100%;}

  .seoul { background: url(../img/seoul.jpg) no-repeat 0 100%; background-size: 100%; }


}


@media only screen
  and (max-width: 320px)
  and (orientation: portrait) {

  .header { display:none;}

  .header-mobile {display:block; position:absolute; z-index:999;}


  div.effect-bubba {margin-top:50px; padding-top:10px; padding-bottom:10px;}

  a { font-size:1em; letter-spacing:0em;}

  .paris { background: url(../img/paris.jpg) no-repeat 0 -60px; background-size: 100%;}

  .montreal { background: url(../img/montreal.jpg) no-repeat 0 -60px; background-size: 100%;}

  .praha { background: url(../img/praha.jpg) no-repeat 0 -60px; background-size: 100%;}

  .seoul { background: url(../img/seoul.jpg) no-repeat 0 -60px; background-size: 100%; }

  .mentions {display:block;}

}

@media only screen
  and (max-height: 400px)
  and (orientation: landscape) {

  a { font-size:0.8em; letter-spacing:0em;}

  .paris { background: url(../img/paris.jpg) no-repeat 0 100%; background-size: 100%;}

  .montreal { background: url(../img/montreal.jpg) no-repeat 0 100%; background-size: 100%;}

  .praha { background: url(../img/praha.jpg) no-repeat 0 100%; background-size: 100%;}

  .seoul { background: url(../img/seoul.jpg) no-repeat 0 100%; background-size: 100%; }

  .mentions {display:block;}

}