* {font-family: inherit, Arial, Helvetica, sans-serif;}


:root {
  /* love */  
 /*
  --colorA: #9F3741;
  --colorB: #DFDDDE;
  --colorC: #548235;
  --colorD: #AFDD65;
  --colorE: #c24e59;
  --colorBCK: #000000;
  
  --Baner1_bck: var(--colorA);
  --Baner1_txt: var(--colorB);
  --Baner2_bck: var(--colorA);
  --Baner2_txt: var(--colorB);
  --Header_bck1: var(--colorC);
  --Header_bck2: var(--colorC);
  --Header_txt: var(--colorD);
  --Burger_bck: var(--colorC);
  --Burger_txt: var(--colorD);
  --Bmenu_bck: var(--colorD);
  --Bmenu_txt: var(--colorA);
  --Selection_bck: var(--colorD);
  --Selection_txt: var(--colorA);
  --sidebars_bck: var(--colorE);
  --sidebars_txt: var(--colorA);
  --meat_bck: var(--colorA);
  --meat_bck2: var(--colorA);
  --meat_txt: var(--colorB);
  --meat_txt2: var(--colorD);
  --meat_txt3: var(--colorD);
  --footer_bck: var(--colorD); 
  --footer_txt: var(--colorB); 
  */
  
/* erotic */  
  
  --colorA: #9F3741;
  --colorB: #DFDDDE;
  --colorC: #548235;
  --colorD: #AFDD65;
  --colorE: #c24e59;
  --colorBCK: #Ffffff; /* цвет фона , редко в*/
  
  --Baner1_bck: var(--colorA);
  --Baner1_txt: var(--colorB);
  --Baner2_bck: var(--colorA);
  --Baner2_txt: var(--colorB);
  --Header_bck1: rgb(46,40,40);/*ЦВЕТ ВСЕЙ ШАПКИ*/
  --Header_bck2: var(--colorC);
  --Header_txt: rgb(255, 0,0) ;/*цвет текста основного информационного блока */
  --Burger_bck: var(--colorC);
  --Burger_txt: var(--colorD);
    
    
  --Burger_span: rgb(255, 0,0) ;  /*цвет полосок в их спокойствии*/
    --Burger_selected: rgb(110, 110,110); /*в наведеном состоянии*/
  --Bmenu_bck: rgb(255, 255,255); /*фон раскрытого меню*/
  --Bmenu_txt: rgb(255, 0,0); /*цвет текста раскрытого меню и крестика над ним*/
  --Selection_bck: var(--colorD);
  --Selection_txt: var(--colorA);
  --sidebars_bck: var(--colorE);
  --sidebars_txt: var(--colorA);
  --meat_bck: #ffffff; /*Цвет фона основных категорий*/
  --meat_bck2:#ffffff; /*фон основных блоков */
  --meat_bck3: #ffffff ; /*фон вспомогательных блоков */
  --meat_txt: rgb(193,63,72); /*цвет основоого содпржимого */
  --meat_txt_h2: rgb(193, 63,72) ;
  --meat_txt_h3: rgb(193, 63,72);
  --meat_txt2: rgb(255, 0,0) ; /* h2 + org */
  --meat_txt3: rgb(92,81,80) ; /*links*/
  --footer_bck: var(--colorD); 
  --footer_txt: var(--colorB); 

  --border1: rgb(30, 30,30) ;
  --border2: rgb(158, 11,98) ;
  --border3: #ffffff; /*обводка второстепенных блоков */

  /* flower */ 
/*
  --colorA: #9F3741;
  --colorB: #DFDDDE;
  --colorC: #D9FDF7;
  --colorD: #AFDD65;
  --colorE: #c24e59;
  --colorBCK: #FFFFFF;

  --Baner1_bck: var(--colorA);
  --Baner1_txt: var(--colorB);
  --Baner2_bck: var(--colorA);
  --Baner2_txt: var(--colorB);
  --Header_bck1: var(--colorC);
  --Header_bck2: var(--colorC);
  --Header_txt: #000000; /*цвет текста основеого иформацилнного блока
  --Burger_bck: var(--colorC);
  --Burger_txt: var(--colorD);
  --Bmenu_bck: var(--colorD);
  --Bmenu_txt: var(--colorA);
  --Selection_bck: var(--colorD);
  --Selection_txt: var(--colorA);
  --sidebars_bck: var(--colorE);
  --sidebars_txt: var(--colorA);
  --meat_bck: #D9FDDC;
  --meat_bck2: lightblue;
  --meat_txt: var(--colorB);
  --meat_txt2: rgb(0, 128, 0);;
  --meat_txt3: #79c100;
  --footer_bck: var(--colorD); 
  --footer_txt: var(--colorB); 
  */
}

/*body, html {
    margin: 0px;
    padding: 0px;
    height: 100vh;
    overflow: hidden;
}*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0px; /* эта установка иногда вызывала скроллер (почему то)*/
    padding: 0px;
    border: 0px;
    font-size: 100%;
    font: inherit;
    vertical-align:baseline;
}

h1 {
    font-style: italic;
    height: 1em; /*подгонка*/

    margin: 0px; /* эта установка иногда вызывала скроллер (почему то)*/
    padding: 0px;
    border: 0px;
    font-size: 100%;
    font: inherit;
    /* vertical-align:baseline; */
    text-align: center;
    vertical-align: bottom;  

    /*color: var(--meat_txt_h2); НЕ СРАБАТЫВАЕТ*/
}


h2 {
    /* !!!! сюда тоже нужна бегущая строка  !!!! */
    display:block;
    font: inherit;
    font-style: italic;
    /*height: 1em; /*подгонка*/

    margin: 0px; /* эта установка иногда вызывала скроллер (почему то)*/
    padding: 20px;
    border: 0px;
    font-size: 3em;
    font-weight: 600;

    line-height: 0.6; /*плохо! Теперь содержимое не помещается в экран*/

    /*vertical-align:middle;*/
    /*line-height: 0.8em;*/
    /*color: var(--meat_txt_h2);  не срабатывает*/
}

h3 {

    display: inline-block;
    font: inherit;
    font-style: italic;
    /*height: 1em; /*подгонка*/
    height:auto;

    margin: 0px; /* эта установка иногда вызывала скроллер (почему то)*/
    padding: 20px;
    border: 0px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    /*vertical-align:middle;*/
    line-height: 0.8em;
    /*color: var(--meat_txt_h2); не срабатывает*/
    text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header,  hgroup, menu, nav, section {
    display:block;
}

/* Other styles */



ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}


table {
  border-collapse: collapse;
  border-spacing: 0;
}


body {
  line-height: 1em;
  overflow-x: hidden;
  overflow-y: hidden;

  /* ## */
  padding: 1rem;

  /* ЦВЕТ ОБЩЕГО ФОНА , ПОЧТИ НИКОГДА НЕ ВИДЕН */
  background: var(--colorBCK); /* если не точно угадать с подгонкой, видно*/
  height:auto;


  
}



header h1 {
  font-style: italic;
  text-align: center;
  white-space: nowrap;
  vertical-align: bottom;
  margin: 0px;
  padding: 0px;
  
     font-size: 30px;
  font-weight: 600;
  /*background-image: linear-gradient(to right, #553c9a, #b393d3);*/
  /*background-image: linear-gradient(to right, #A60053, #b393d3); */
  /* background-image: linear-gradient(to right, #5c2828, #3f3944);

  color:transparent;
  background-clip: text;
  -webkit-background-clip: text;*/

  
}

.marquee {
  display:block;
  width:100%;
  white-space: nowrap;
  overflow: hidden;
  
  
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
 /* -webkit-animation: scroll 10s infinite linear;
  -moz-animation: scroll 10s infinite linear;
  animation: scroll 30s infinite linear;*/
  
}
/*
.marquee{text-align:left; width:100%; overflow:hidden; white-space: nowrap;}
.marquee span { display:inline-block; width: 100%; text-indent:0; animation: marquee 10s linear infinite}
.marquee span: hover{animation-pla-state: paused}
@keyframes marquee { 0% { transform: translate(100%, 0); } 100% {transform: translate(-100%, 0);}}
@media only screen and (max-width^ 440px) { .marquee span{animation^none; padding-left:0}}
*/

/*.up_content {
  position:block;
  height: 30%;
}*/


[class^="box-"] {
  /*background-color:#cfa4d4; */
  /*background-image: linear-gradient(to left, #cfa4d4, #95549d);*/
  /*background-image: linear-gradient(to left, #A60053, #a1366c);*/

/*ЦВЕТ ВСЕЙ ШАПКИ*/
  background: var(--Header_bck1);

  display: grid;
  place-items: center;
}

#head_container {
  position: relative;
  display: grid;
  /* gap: 100%; */
  height: 60px;
  grid-template-areas: "l_menu header header r_menu"
                       "l_menu  date   city  r_menu" ;
  grid-template-columns: 60px auto auto 60px;
  /*grid-template-rows: 60% 40%; */
  /*grid-template-rows: auto 0px; /* на самых маленьких мониторах второй строки нет*/
  grid-template-rows: 45px 15px;

  /*column-gap: 1px;
  row-gap: 1px; 
  overflow: hidden;  чтобы бордюр между блоками не был виден*/
  
  /*justify-items: strerch;
  align-items: center;
  justify-content: stretch;
  align-content: stretch; */
}

.box-1 {
  grid-area: l_menu;
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  justify-self: center;
  align-self: center;
  
}

.box-2 {
  grid-area: header;
  grid-row: 1 / 2;
  grid-column: 2 / 4;
  justify-self: stretch;
  align-self: stretch;
  
  vertical-align:  bottom;
  margin: 0px;
  padding: 0px;
}

.box-3 {
  grid-area: r_menu;
  grid-row: 1 / 3;
  grid-column: 4 / 5;
  justify-self: center;
  align-self: center;
  
  vertical-align:  bottom;
}

.box-4 {
  grid-area: date;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  justify-self: stretch;
  align-self: stretch;
}

.box-5 {
  grid-area: city;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  justify-self: stretch;
  align-self: stretch;
}




#main_title {
  margin: 0px; /*в public версии auto
  width: 100%;
  height: auto;
 /* background: #9cbcc9;*/
  vertical-align:  bottom;
  
}

.city {
  white-space: nowrap;
  padding: 0px;
  color: white;
}

#dt {
  white-space: nowrap;  
/* ЦВЕТ ДАТЫ В ЗАГОЛОВКЕ*/
  color: white;
}



/*на самых маленьких экранах супербанер будет поверх всех */

.up_content2 {
  display: none; /*заглушка */
  background: chartreuse;
 
  width: 80%;  /* размеры не согласуются с .content*/
  height: 0vh;
  position: absolute;
  top: 10%;
  left: 10%;
  overflow: auto;
}

.superbaner2 {
  display: none; /*заглушка */
  width: 250px;
  /*height: 250px;*/
  height: 0vh;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  
  /*img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
      border: none;
  }*/
}


#baner {
  display: none; /*заглушка */
  text-align:center;
  margin: auto;
  width: 1000px;
  height: auto;
  background: #a8a8a8;
} 


#left_sidebar {
  /*position: absolute;*/
  float: left ;
  width: 10%;
  height: 90%;
  background: #6a6a6a;
}

#right_sidebar {
  float: right;
  width: 10%;
  left: 90%;
  margin: auto;
  height: 90%;
  background: #7b7b7b;
} 




main {

  margin: 0;
  width: 100%;

  /* ЭТО ПОЛЕ ТРЕБУЕТ ОБЯЗАТЕЛЬНОГО ВЫЧИСЛЕНИЯ*/
  height: calc(100vh - 60px - 20px - 1em);
  
/* ## del ##   
  height:auto;*/
/* - высота одного из банеров - grid*/
 display: flex; /*чтобы fex-shrink подчиненного контейтера vert не игнорировалось*/
/*  position: relative; *//*почему то задание этого поля приводит к проблемам с отображением меню*/ 
flex-direction: column; /* если не указать column, ширина разбухает до неприличия*/
/* ЦВЕТ ОБВОДКИ ОСНОВНОГО КОНТЕНТА */  
 /* background: var(--border1);*/

 background-image: url("tangoafisha.jpg");
 background-size: contain;
 background-position: bottom center;
 background-repeat: no-repeat;
 /*background-attachment: fiexd;*/
 /*background-size: 50%;*/
 /*opacity: 0.7;*/
 /*background-color: rgba(0, 125, 215, 0.7);*/

  overflow-x: hidden;
  /*overflow-y: hidden; /*пока не разобрался с высотами. лучше отключить*/
  
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;

  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;

  
}

.vert {
  height: calc(100vh - 60px - 20px - 1em); /*вычисление этого поля должно быть эквивалентно main (смотря куда девать futer*/
  display: flex;
  /*justify-content: center; /*тогда будет всё ВЕРТИКАЛЬНО центрировано по середине экрана*/
  align-items: center;
  
  /*почему-то именно это поле определяет размер второго заголовка*/
  font-size: 1rem;
  scroll-snap-align: start;

  color: var(--Header_bck1);

  
  scroll-snap-type: y mandatory; /*не уверен что тут это воообще надо*/
  scroll-snap-stop: always;

  /*переношу с [class^="type-"]*/
  flex-direction: column; /*единственная цель flex - автовысота, но она не работает*/
  min-height: 200px;
  flex-shrink: 0;
}

[class^="type-"] {
  /*padding: 1px; /* добавить тень к карточке*/

/* ЦВЕТ ФОНА ОСНОВНЫХ КАТЕГОРИЙ  */
  /*background-color: var(--meat_bck);*/


/*  display: flex; /* при block немного съезжает, возможно на величину margin, но не точно*/
/*  flex-direction: column; /*единственная цель flex - автовысота, но она не работает*/
/*  flex-wrap: nowrap;

  place-items: center;

/* ***************************************** */    
/*ЦВЕТ ТЕКСТА ОСНОВНОГО ИНФОРМАЦИОННОГО БЛОКА*/
/* ***************************************** */    
  color: var(--meat_txt); /* цвет основного текста*/


  min-width: 100px; /* без min-width размеры flex не уменьшаются при сжатии экрана*/
  /*flex: 1*/
  /*это нужно чтобы они не сжались в строку. простто убери этот параметр, когда захочется увидеть каталог!*/
  /*к сожалению, при этом параметре текст перестаёт переноситься*/
 

}



    .wrapper {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }


.scrolling-wrapper {
  /* не стоит пытаться расширить экран на этом уровне, проваливайся и регулируй на уровне CARD*/
  display: flex;
  gap: 20px;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  scroll-snap-align: center; /*start*/ /*не уверен что тут это воообще надо*/
  scroll-snap-stop: always;


  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  -webkit-overflow-scrolling: touch;
  scroll-padding: 1rem;
  padding: 1rem;
  /*margin: 3rem auto 0;*/
  border-radius: 5px;

  height: calc(100vh - 60px - 20px - 1em);

  /*flex-shrink: 0;*/
  
}

.card {
  display: flex;
  justify-content: center;
  align-items: center; /* если убрать. текст будет форматирован как в WORD, но на сколько это надо*/
  flex: 0 0 100%; /*вот он! параметр, определяющий ширину*/
  /*здесь определяются габариты карочек*/
  width: 100%;
  scroll-snap-align: center; /*start*/
  scroll-snap-stop: always;
  /* background-color: #ccc; /*отладочное, только увидеть границы*/
  font-size: 1.5rem; /*если убрать, поместиться весь текст, но на сколько это надо */
  
  line-height: 1.5;

  display: flex; /*чтобы они отображались в строке*/
  flex-direction: column;
  calc(100vh - 60px - 20px - 1em); /* не вздумай делать auto. схлопнется */ /*ВЫЧИСЛИТЬ!!!!!*/
/*ЖЕЛАТЕЛЬНО ОТКЛЮЧИТЬ ВЕРТИКАЛЬНУЮ ПРОКРУТКУ*/

  
  width: 100%;
  flex-shrink: 0; /* without shrink elements try to compress himself*/
  min-width: 100px;
  text-decoration: none;

/* ******************** */    
/*ЦВЕТ  ФОНА ВСЕГО МЯСА */
/* ******************** */     
 /* background-color: var(--meat_bck2);*/


}


.head1 {
  display: block;
  align-items: center;
  justify-content: center;
  /*width^ 100%;*/
  height: auto;
  font-weight: 700;
  margin: 5px;
  flex-shrink: 0;
  min-width: 100px;
  flex-direction: column; /*чтобы заголовки шли один под другим, дополнительно нужен класс sblock*/
  overflow: hidden;
  
  /*color: var(--meat_txt_h2); НЕ СРАБАТЫВАЕТ*/
}

.head2 {
  display: block; /*из за проблем с переносом текста */
  margin: 5px;
  /* flex-shrink: 0; */
  /*width:100%;*/
  height: auto; /*70vh;*/
  /*max-height:20vh;*/
  text-indent: 5%;
  text-align: center; /*justify;*/
  min-width: 100px;

  overflow-wrap: normal;
  word-wrap: break-word;
  box-sizing: border-box;
  overflow: hidden;

  min-height: 3em;

  /*ЦВЕТ ГЛАВНОГО ОПИСАНИЯ*/
  color: var(--meat_txt_h2); 
}


.styles {
  display: flex;
  align-items: center;
  justify-content: center;

/*ФОН БЛОКА СТИЛЕЙ*/    
 /* background: var(--meat_bck3);*/
  margin: 5px;
  flex-shrink: 0;
  /*width: 100%*/
  height: 1em;
  min-height: 1em;
  min-width: 100px;
}

.sblck {
  width: 100%;
  display: block;
  /*color: var(--meat_txt_h2); НЕ СРАБАТЫВАЕТ*/
}
/*чтобы два заголовка шли друг за другом*/


#s1 { /* заголовочная */
  display: inline-block;
/* ЦВЕТ ГЛАВНОГО ПОДЗАГОЛОВКА И ЯРЛЫКОВ */
  color: var(--meat_txt_h2);
  
}

#s2 { /*все поля с ссылками*/
  display: inline-block;

/*ВСЕ ПОЛЯ СО ССЫЛКАМИ*/    
   color: var(--Header_bck1);
  
  /*text-decoration:underline*/
}

#s3 { /* курсив */
  font-style: italic;
  /* display: inline-block; из за проблем с переносмо трекста
  width: 100%; */
  
}

#s4 { /* курсив */
  font-size: 30px;
  font-style: italic;
  text-align: center;
  font-weight: 100;
  display: block;
/* ЦВЕТ  ПОДЗАГОЛОВКА мастер-класса */
  color: var(--meat_txt2);
  
}

.header3 {
    
  display: inline-block;



/*ВСЕ ПОЛЯ СО ССЫЛКАМИ*/    
  /*color: var(--Header_bck1) ;*НЕ СРАБАТЫВАЕТ*/
  
}


#site_title
{ /* курсив */
    font-style: italic;
    /* display: inline-block; из за проблем с переносом трекста
    width: 100%; */
    vertical-align:  bottom;
/* ****************************  */
/*ЦВЕТ САМОГО ГЛАВНОГО ЗАГОЛОВКА */
/* ****************************  */    
    color: var(--Header_txt);
    
    padding: 0px;
}

#footer {
  margin: 0px;
  width: 100%;
  height: 1em;
  
/*ПРИВЕТ */
  background: var(--Header_bck1);
  color:rgb(255, 255,255);
}




.cities_container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 30px auto;
  grid-gap: 10px;
  display: grid;
}

#pane {
  background: #edf5e1;
  padding: 10px 20px 10px;
  position: absolute;
  top: calc( 100vh / 2 - 200px);
  left: calc( 100% / 2 - 100px);
  height: 400px;
  width: 200px;
  border-top: solid 2px #c4df9b;
  overflow-y: hidden;
}

#panehead {
  display: inline-block;
  width: 100%;
  color: green;
  text-align: center;
  /*vertical-align: middle;*/
  height: 2em;
}

#TangoCanBeAnywhere {
  height: calc( 400px - 2em - 10px - 10px); /* ОТВРАТИТЕЛЬНО что приходится это делать*/
  display: inline-block;
  width: 100%;
  overflow-y: auto;
}

#pane .delete {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* h3 {
  margin: 0;
  padding: 0 0 .3em;
  text-align: center;
}*/


.btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 1px;
	margin: 0 15px 15px 0;
	outline: none;
	border: 1px solid #F18230;
	border-radius: 25px;
	height: 46px;
	line-height: 0;
	/*font-size: 14px;*/
  font-style: italic;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background-color: var(--meat_txt2);
	position: relative;
	overflow: hidden;
	/*vertical-align: top;*/
	cursor: pointer;
	user-select: none;
	appearance: none;
	touch-action: manipulation;
}
.btn span {
	display: block;	
	box-sizing: border-box;
	padding: 0 25px;    
	height: 42px;
	line-height: 38px;    
	border: 1px solid #F18230;
	border-radius: 25px;    
	/*font-size: 14px;*/
	color: #FFFFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), var(--meat_txt2);
	text-align: center;
	font-weight: 600;
}
.btn:focus-visible {
	box-shadow: 0 0 0 3px lightskyblue;
}
.btn:hover span {
	background-color: rgb(240, 135, 135);
}
.btn:active span {
	background-color:  rgb(240, 135, 135) !important;
}
.btn:disabled {
	opacity: 0.65;
	pointer-events: none;
}
@media (min-height: 600px) {
/*  .up_content2 {
      display: none;
  }
  
  .up_content {
      display: block;
      position:relative;
      height: 80px;
  }

  .superbaner {
      display: block;
      position:relative;
      min-height: 100%;
      background: blue;
  }*/
}

@media (min-width: 600px) {
  .cities_container {
      /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    #pane {
      background: #edf5e1;
      padding: 10px 20px 10px;
      position: absolute;
      top: calc( 100vh / 2 - 200px);
      left: calc( 100% / 2 - 250px);
      height: 400px;
      width: 500px;
      border-top: solid 2px #c4df9b;
      overflow-y: hidden;
    }
  #TangoCanBeAnywhere {
      height: calc( 400px - 2em - 10px - 10px);
  }
}




@media (min-width: 900px) {
  .cities_container {
      /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
  #pane {
      background: #edf5e1;
      padding: 10px 20px 10px;
      position: absolute;
      top: calc( 100vh / 2 - 200px);
      left: calc( 100% / 2 - 400px);
      height: 400px;
      width: 800px;
  }
  #TangoCanBeAnywhere {
      height: calc( 400px - 2em - 10px - 10px);
  }
}