:root  {
    --picheight: 200px;
    --picwidth: 305px;

--dblue: #113684; 
 --blue: #39C;
--lblue: #2BF;
--gblue: #4977AD;
--dgreen: #389;
--ldgreen:#40AABF;
--lgreen: #EAFCFF;
--llgreen: #F7FFFF;
--dred: #C00;
--bougen: #A48;
--upsticky: #5D98AA;

--pn1: #78B4C0; 
--pn2: #8FC2CC; 
--pn3: #BDDFE6; 
--pn4: #D4EEF3;  

--l1: #FCF7EB;
--l2: #EDDCAA;

--ch: #3c87a4;
}


* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  text-decoration: none; 
  }

ul {list-style: none; }


html, body {
    width:  100%;
    height: 100%;
min-height: 100%;
 min-width: 360px;
}


body {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
            font: normal 13px Verdana,Arial,Helvetica,sans-serif;
}

a, a:hover { color: var(--dblue); }
 a:visited { color: var(--gblue); }
 

h1, .subtitle {  color: var(--dblue);
            text-align: center;       }         


h1 {  font-size : 21px;
      text-shadow: 0 1px 2px rgba(0,0,0,.3); }



.subtitle {
font-size: 14px; 
font-weight: bold;
margin-top: 12px;
margin-bottom: 30px;
}





/*** HEADER-FOOTER ***/

.meander {  height:24px;
            background: repeat-x url(https://hellas-songs.ru/pics/mea.gif); }


.header_langs {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
	position: absolute;
	top: 0;
	right: 10px;
       height: var(--picheight);
    text-align: center;
    color: #FFF;
    font-size: 12px;
}
 
.flag	 { margin: 5px auto 0 auto; }
.flag img{ border-radius: 3px; 	    }  


.header_firstline{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	height: var(--picheight);
	background-image: url(https://hellas-songs.ru/pics/abgl.gif);
}           


.header_left {	min-width: var(--picwidth);  }	


.hatb  { top: 30px;
	 font-size: 40px; 
  left: 200px; 
 width: calc(100% - 210px); 
 }

.hatsm { top: 140px;
         font-size : 20px;
              width: calc(100% - 370px); 
}

.hatb, .hatsm { 
  position: absolute;


   text-align: center;
   color: #FFF;
   text-shadow: 0 2px 5px rgba(0,0,0,.5);
   text-decoration: none;
}
            
.hatb a, .hatb a:visited, .hatb a:hover, #footer a {
    color: #FFF;
    text-decoration: none;
}

            
#footer {
min-height: 100px;
   color: #FFF;
   background-image: url(https://hellas-songs.ru/pics/abgl.gif);
}

.footer_text{
position: relative;
top: 10px;
   text-align: center;
   font-size: 12px; 
   color: #FFF;
 }



/*** BURGER ***/

.burger span {
    text-align: center;
    font-size: 9px;
    font-weight: bold;
background: transparent; 
color: #FFF;
 }


/*** UP STICKY ***/
.menubg {
visibility:hidden;
height: 0;
text-align: center;
padding: 0;
 }

.menubg a
{
margin-left: 55px;
color: #FFF;
text-decoration:none;
font-weight: bold;
 text-shadow: 0 2px 5px rgba(0,0,0,.6) ;
}

.menubg.sticky{  
position: fixed;
padding-top: 16px;
height: 40px;
background: var(--upsticky);

top: 0;
width: 100%;
z-index: 10;
visibility:visible;
font-size: 18px;
-webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.7) ;
   -moz-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.7) ;
        box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.7) ;
}



/*** NAVIGATION MENU ***/

.nav {
  position: absolute;
  top: calc(var(--picheight) + 24px);
  left: 0;
  z-index: 11; 
   margin:0;
   width: 100%;
     display: flex;
     flex-direction: row;
     background: #FFF;
     border-bottom: 1px solid var(--dblue);
    -webkit-box-shadow: 0 3px 4px 2px rgba(0, 0, 0, 0.4) ;
       -moz-box-shadow: 0 3px 4px 2px rgba(0, 0, 0, 0.4) ;
            box-shadow: 0 3px 4px 2px rgba(0, 0, 0, 0.4) ;
   visibility: visible;
}


.nav.sticky{
 position: fixed;
 top: 57px;
 z-index: 11;
-webkit-box-shadow: 0 2px 3px 5px rgba(0, 0, 0, 0.4) ;
   -moz-box-shadow: 0 2px 3px 5px rgba(0, 0, 0, 0.4) ;
        box-shadow: 0 2px 3px 5px rgba(0, 0, 0, 0.4) ;
}


ul.nav {   padding: 0;  }


ul.nav > li  {
  display: block;
  flex-grow:1;
  height: 35px;
  padding: 8px 1% 12px 1%;
    background: #FFF;
    text-align: center;
width: 14%;
}


.nav li > a, span.simple {
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 height: 37px;
    color: var(--dblue);
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}


.nav li li a {
 color: var(--dgreen);
    font-size: 15px;
    font-weight: normal;
}

.nav li li a:hover { font-weight: bold; }
           
ul.nav li ul {
 position: relative;
 top: 11px;
 display: block;
 padding: 6px 15px; 
     background: #FFF;
     border: 1px solid var(--dblue);
     border-radius: 8px;  
-webkit-box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.4) ;
   -moz-box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.4) ;
        box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.4) ;
visibility: hidden;
}

ul.nav li:nth-child(4) ul   { width: 200px;  right: 50px;  }
ul.nav li:nth-child(5) ul   { width: 350px;  right: 140px; }
ul.nav li:nth-child(6) ul   { width: 325px;  right: 160px; }
ul.nav li:nth-child(7) ul   { width: 160px;  right: 130px; }

ul.nav li:hover ul { visibility: visible; }

.nav li:hover ul::before {
  display: inline-block;
  position: absolute;
  top: -6px;
  left: 160px;
   content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--dblue);
}

.nav li:hover ul::after {
  position: absolute;
  display: inline-block;
  top: -5px;
  left: 161px;
   content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #FFF;
}


ul.nav li li {  padding: 3px 0;    border: 0;  }

.nav li li a {
display: list-item;
height: unset;
list-style: circle inside;
text-align: left;  
}



/*** back to top ***/
.back_to_top {
  display: none;

  position: fixed;
  bottom: 110px;
  left: 10px;
  z-index: 6;
  width: 35px;
  height: 35px;
  line-height: 30px;
  background: var(--llgreen);
  color: var(--dblue);
  text-align: center;
border-radius: 7px;
border: 2px dotted var(--lblue);
  cursor: pointer;
  opacity: 0.8;
}

.back_to_top:hover { background: var(--lgreen); }

.back_to_top-show { display: block; }



/*** central part ***/

.middle {
margin: 70px 0 0 0;
padding: 0 2%;
width: 96%;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.aside { 
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; 
 } 


.fbo { 
border: solid 2px var(--dblue);
border-radius: 7px;
}


#fbhs, #vk_groups, #vk_comments  {
padding: 0;                
margin: 0 0 28px 0;
    border: solid 2px var(--dblue);
    border-radius: 7px;
}


/* basic for N */ 
 #content { width: 100%;  margin: 0; }
.aside { width: 100%; }

 #vk_comments { width: calc(55% - 4px); }
 #vk_groups   { width: calc(43% - 4px); } 
 




/** tables ***/
.plaka {
margin: 0 0 28px 0;
padding: 10px;
text-align: justify;
border: solid 2px var(--dblue); 
border-radius: 7px;
    overflow: hidden;
}

.plakah {
display: block;
height: 25px;
padding-bottom: 10px;
color: var(--dblue);
vertical-align: top;
text-align: left;
font-size : 14px; 
font-weight: bold;
}

.plaka1 {
display: block;
padding-bottom: 10px;
color: var(--dblue);
vertical-align: top;
text-align: left;
font-size : 14px; 
font-weight: bold;
}






 .row{
width: 100%;
display: flex;
justify-content: space-between;
}


.row:hover{background: var(--lgreen); }






.photol img, .photor img {
border: solid 1px #000; 
border-radius: 6px; 
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
                    }


.photol {
display: block;
border: 0;
padding: 0 20px 3px 0; 
text-align: left;
float: left;
}


.photor {
display: block;
border: 0;
padding: 0 0 3px 20px; 
text-align: right;
float: right;
}


.shareline {
position: absolute;
top: 290px;
right: 0;
bottom: unset;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
z-index: 9; 

width: 28px;
margin: 0;
padding: 0 0 8px 0 ;
background: #FFF;
border-radius: 4px;
}

.shareline.sticky{  display: flex; }
.shareline.fixedsticky{  position: fixed;  top: 126px;  }




.bshare {  
 padding: 0 4px;
font-size: 13px;
color: var(--pn1);
font-weight: bold; 
writing-mode: vertical-rl;
transform: rotate(-180deg); 

 }


.cntbutton {
margin: auto 1px 0 0; 
padding: 4px 4px;  
border-radius: 4px;
border: 1px solid #adbdcc; 
color: #55677d; 
background: #FFF; 
text-align: center;
writing-mode: vertical-rl;
   transform: rotate(-180deg); 


}







.vkbutton    { background: no-repeat center/17px var(--pn1) url("https://hellas-songs.ru/pics/vkb.png"); }
.fbbutton    { background: no-repeat center/16px var(--pn1) url("https://hellas-songs.ru/pics/fb.png");   }
.odnklbutton { background: no-repeat center/18px var(--pn1) url("https://hellas-songs.ru/pics/odnklb.png"); }
.chain       { background: no-repeat center/14px var(--pn1) url("https://hellas-songs.ru/pics/chain.png");}

.vkbutton, .fbbutton, .odnklbutton, .chain  {
display: block;
margin: 2px 0 10px 1px; 
border-radius: 4px;
border: 1px solid #adbdcc;
min-width: 20px;
width: 24px;
height: 24px;
  transform:  rotate(-90deg); 
}

.vkbutton:hover , .fbbutton:hover , .odnklbutton:hover , .chain:hover { border: 1px solid var(--dgreen); }







.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
margin: 0; 
}


 .gallery_el {
text-align:center;
vertical-align: top;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
display: inline-block;
width: 110px;
margin: 15px 0 0 0;
}

.gallery_el img{
box-shadow: 3px 3px 3px rgba(25, 72, 77,.3);
width: 100px;
height: 100px;
border-radius: 5px;
margin: 3px 0 3px 0;
padding:0;
}


.gallery_sm {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #4D5567;
}

.images:after {
  content: "";
  display: inline-block;
  width: 100%;
}


.text-me {  
margin: -30px 0 40px 0; 
text-align: justify; 
 font-size: 15px; 
 color: var(--dblue); 
}


.req:nth-child(1) {width: 10px;                                text-align: right; }
.req:nth-child(2) {width: 27%;              margin-left: 10px; text-align: center;}
.req:nth-child(3) {width: calc(45% - 30px); margin-left: 10px; text-align: center;}  
.req:nth-child(4) {width: 27%;            margin-bottom: 20px; text-align: center;}










@media (max-width: 800px) {

.hatb {
 left: 160px; 
 width: calc(100% - 220px); 
 min-width: 435px;
 font-size: 37px;
}
	
.hatsm {
 left: 280px; 
 width: calc(100% - 345px);
    font-size: 20px; 
  line-height: 0.9; 
	}


/*** BURGER <= 800 ***/
.burger{
  display: block;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 14;
  width: 30px;
 height: 16px; 

    background: transparent;
    border-top: 4px solid #FFF;
 border-bottom: 4px solid #FFF;
        cursor: pointer;

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
 transition: 0.2s;   
}


.burger.open { height: 28px;     border: transparent;  }


.burger span {
  display: block;
 position:absolute;
      top: 20px;
 width: 30px;
    transition: 1s;
}


.burger.open span { color: transparent;      transition: 0.1s;  }


.burger span.safe {
position:absolute;
top: -19px;
left: -10px;
 width: 100px;
height: 100px;
background: transparent;
}

.burger.open span.safe {  width: 50px;    height: 60px;  }



.burger::before, .burger::after {
  position: absolute;
  top: 8px;
  left: 15px;
   display: block;
   content: '';
    width: 30px;
    height: 4px;
     background: #FFF;
     transform: translate(-50%, -50%);
     transition: 0.5s;
  } 



.burger.open::before, .burger.open::after {
    width: 24px;
    background: var(--dgreen);
    transition: 0.5s;
  }

.burger.open::before {    transform: translate(-12px, 3px)  rotate(45deg); } 
.burger.open::after  {    transform: translate(-12px, 3px) rotate(-45deg); }



/*** UP SITCKY <=800 ***/
.menubg.sticky{ 
font-size: 20px;
-webkit-box-shadow: 0 5px 8px 4px rgba(0, 0, 0, 0.6) ;
   -moz-box-shadow: 0 5px 8px 4px rgba(0, 0, 0, 0.6) ;
        box-shadow: 0 5px 8px 4px rgba(0, 0, 0, 0.6) ;
}




/******** NAVIGATION MENU <=800 *******************/

.nav {
  position: fixed;
  top: -380px;
  left: 10px;
    width: 340px;
  display: flex;
  justify-content:  space-evenly;
 flex-direction: column;
   border-radius: 10px;
   background: #FFF;
   
-webkit-box-shadow: 0 5px 8px 3px rgba(0, 0, 0, 0.7) ;
   -moz-box-shadow: 0 5px 8px 3px rgba(0, 0, 0, 0.7) ;
        box-shadow: 0 5px 8px 3px rgba(0, 0, 0, 0.7) ;

  visibility:hidden;

    transition: all 0.3s;
}


.nav.open {
  top: 8px;
 background: transparent;
   visibility: visible;
   transition: all 0.4s;
}



.nav li > a, span.simple {
    font-size: 17px;
padding-right: 20px;
height: unset;
}

ul.nav li li a  {  padding: 0 10px 0 20px;            font-size: 14px;    }


ul.nav > li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

ul.nav > li:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

ul.nav { 
background: #FFF;
 }



ul.nav > li  {
flex-grow: 1;
padding-top: 10px;
padding-bottom: 15px;
border: 1px solid var(--dblue);
transition: 1ms; 
}


ul.nav > li:nth-child(n)   { height: unset ; }



ul.nav li ul {
display: none;
margin-top: 10px;
text-align:left;
}

ul.nav li:hover ul {
display: block;
position: relative;
top: 0;
left: 0;
z-index: 12;
width: 100%;
padding: 3px 0;
border: 0;
-webkit-box-shadow: none ;
   -moz-box-shadow: none ;
        box-shadow: none ;
}


.nav li:hover ul::before, .nav li:hover ul::after {   display: none; }


ul.nav li:hover ul li{
display: block;
padding: 0;
height: unset;
}

ul.nav li li {  border: 0;  }



.middle {margin: 25px 0 0 0; }






.shareline {
position: fixed;
top: unset;
right: unset;
bottom: 0;


flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
margin: 0;
width: calc(100% - 20px);
height: 25px;

z-index: 14; 
margin-left: -2%;
/*background: #BDDFE6E8; */
background: var(--lgreen);
opacity: 0.95;
padding:  7px 10px 5px 10px;
border-radius: unset;


-webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.3) ;
   -moz-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.3) ;
        box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.3) ;

display: none;

  }


.shareline.sticky{  display: flex;}
.shareline.fixedsticky{  top: unset; }


.cntbutton { text-shadow: none; }

.vkbutton, .fbbutton, .odnklbutton, .chain, .bshare, .cntbutton  { transform: none;}

.vkbutton, .fbbutton, .odnklbutton, .chain  {  margin: 0 0 0 10px ;  }

.cntbutton { margin: 0 0 0 2px;  writing-mode: horizontal-tb; }
.bshare {writing-mode: horizontal-tb; padding: 4px;}





 }







@media (max-width: 650px) {

.hatb {
top: 40px;
min-width: 200px;
max-width: 300px;

 left:calc(155px + (100% - 480px) * 0.6  );

	font-size: 35px;
	line-height:0.8; 
     }
 


.hatsm {
 top: 140px;
 left: calc(300px + (100% - 650px)); 
 width: 280px; 
    font-size: 18px; 
    line-height:0.9; 
	text-shadow: 0 2px 5px rgba(0,0,0,.8);

}

.nav.open li { padding:  7px 0; }




#content, .aside {width: 100%; }
.aside { flex-direction: column; }
#vk_comments, #vk_groups { width: calc(100% - 4px); }


}











@media (max-width: 480px) {


.hatb {
top: 30px;
 left: calc(120px + (100% - 360px) * 0.8  );
 width: 200px;
   font-size: 33px;
   line-height:0.9; 

}
 
.hatsm {
top: 155px;
 left: 30px;
	line-height:0.7; 
}


.photol img, .photor img {width:100% !important; } 

.photol, .photor { 
text-align: center !important ;
float: none; 
width: 100% !important;
margin:10px auto;
padding-left:0;
padding-right:0;
}




}









/*************
less than 360
**************/
@media (max-width: 360px) {

.hatb {
top:  40px;
 left: 170px;
 width: 130px;
 min-width: auto;
	font-size: 26px;
	line-height:0.8; 
     }
 
.hatsm {
top:  140px;
 left:   20px;
 width: 200px;
 min-width: auto;

}


.nav { transition: none; }
.nav.open li { padding:  5px 0; }
   ul.nav li ul { margin: 3px 0;  }




.req:nth-child(2) {width: 25%; text-align: left; margin-left: 10px;}
.req:nth-child(3) {width: calc(50% - 30px); margin-left: 10px;}  
.req:nth-child(4) {width: 25%; margin-bottom: 30px} 



     }



@media (min-width: 1101px) {

#content { margin: 0 2% 28px 0; }
#content { width: 68%; }

.aside  { 
width: 30%;  
margin: 0 0 28px 0;
flex-wrap: nowrap;
flex-direction: column;
justify-content: start;
}


 #vk_comments { width: calc(100% - 4px); }
 #vk_groups   { width: calc(100% - 4px); }

.shareline{
position: relative;
top: unset;
right: unset;
flex-direction: row;
margin: 0 0 28px 0;
width: 100%;
margin: 0 0 28px 0;

}

.shareline.fixedsticky{  position: relative; top: 0; }


.vkbutton, .fbbutton, .odnklbutton, .chain, .bshare, .cntbutton  { transform: none;}
.vkbutton, .fbbutton, .odnklbutton, .chain  { margin: 0 0 0 10px ;  }
.cntbutton { margin: 0 0 0 2px;   writing-mode: horizontal-tb; }
.bshare    { margin: 5px 0 0 0 ;  writing-mode: horizontal-tb; }





}











@media (min-width: 1400px) {

ul.nav > li  {  padding: 15px 0 0 0; }

.nav li a, span.simple {  height: 20px; font-size: 16px; }

ul.nav li ul {  top: 18px; }

ul.nav li:nth-child(4) ul { width: 200px;  right: 0px; }
ul.nav li:nth-child(5) ul { width: 350px; right: 80px; }
ul.nav li:nth-child(6) ul { width: 325px; right: 80px; }
ul.nav li:nth-child(7) ul { width: 160px; right: 90px; }

}