.top .topcontent {visibility: hidden}
#content .topcontent {visibility: hidden}

.landscape {visibility: hidden }
.portrait {visibility: hidden }

.sq img {
    width: 100%;
    height: 100%;
  }

.bq img {
    width: 100%;
    height: 100%;
  }



/* Large desktops and laptops */
@media (min-width: 1200px) and (max-width: 1399px) {
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {
	visibility: visible; padding-left: calc(4vw);}
  #content .topcontent {visibility: hidden; height: 0}

  .sq {
    width: calc(13.5vw);
    height: calc(13.5vw);
    margin-right: calc(4vw - 6px);
    margin-right: calc(24px);
  }
  .truncate-text {
    width: 13.5vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
  .landscape {visibility: hidden}
  .portrait {visibility: visible}
  .top .topcontent {visibility: visible; padding-left: calc(4vw);}
  #content .topcontent {visibility: hidden; height: 0}

  .root-content {}

  .sq {
    width: calc(16vw);
    height: calc(16vw);
    margin-right: calc(4vw - 6px);
    margin-right: 24px;
  }

  .bq {
    width: calc((15vw * 5) + ((4vw - 6px) * 4) + 8px);
    width: calc((15vw * 5) + ((24px) * 4) + 8px);
    height: calc(40vh);

  }

  .bq {
    border: solid 1px #ccc;
    float: left;
    margin-right: calc(4vw - 6px);
    margin-bottom: calc(8vw);
  }

  .truncate-text {
    width: 15vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
   .landscape {visibility: hidden}
   .portrait {visibility: visible}
   .top .topcontent {visibility: visible}
   #content .topcontent {visibility: hidden}



  .sq {
    width: calc(20vw);
    height: calc(20vw);
    margin-right: calc(4vw - 6px);
  }

  .bq {
    border: solid 1px #ccc;
    float: left;
    margin-right: calc(4vw - 6px);
    margin-bottom: calc(8vw);
  }
  .bq {
    width: calc((20vw * 4) + ((4vw - 6px) * 3) + 6px);
    height: calc(100vh - 8vw);

  }
  .truncate-text {
    width: 20vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
   #content .topcontent {visibility: visible}



  .sq {
    width: calc(28vw - 3px);
    height: calc(28vw - 3px);
    margin-right: calc(4vw - 4px);
    margin-bottom: calc(10vw);
  }

  .bq {
    border: solid 1px #ccc;
    float: left;
    margin-right: calc(4vw - 6px);
    margin-bottom: calc(10vw);
  }
/*
  .bq {
    width: calc(((28vw - 3px) * 3) + (2 * (4vw - 4px)) + 4px); 
    height: calc((28vw * 2) + 10vw - 4px);
  }
*/

  .bq {
    width: calc(((28vw - 3px) * 3) + (2 * (4vw - 4px)) + 4px); 
    height: calc(28vw - 3px);
  }

  .truncate-text {
    width: 28vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

} 

/* Landscape phones and smaller */
@media (max-width: 480px) {
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .topcontent {visibility: hidden}
  #content.root-content {margin-top: 170px !important;}
 
  .root-body #logo {position: absolute; top: 0}
  #logo p, #langswitcher a{
    font-size: 25.2pt; 
    padding-top: calc(5vw); 
    font-size: calc(10.7vw);
  }
  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw) */ ;
  }
  .sq, .bq, .tb {
    float: left;
    margin-right: calc(5vw);
    margin-bottom: calc(17vw);
  }
  .sq {
    width: calc(43vw);
    height: calc(43vw);
  }

  .tb {
  width: calc(43vw + 43vw + 5vw );
    height: calc(43vw + 43vw + 5vw);
}



  .bq {
    width: calc(2 * (43vw) + 5vw);
    height: calc(2 * (43vw) + 3vw + 2px);
   }
    .truncate-text {
    width: 40vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}