/* ---- reset ---- */

body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
  background-color: #fff;
}

canvas {
  display: block;
  vertical-align: bottom;
}

body {
  background-color: #fff;
  -moz-background-size: 100% auto; 
  -webkit-background-size: 100% auto;
  -o-background-size: 100% auto; 
  background-size: 100% auto;
}


@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Black.ttf') format('truetype');
}


#logo {
  width: auto;
  height: auto;
}

#logo a {
  text-decoration: none;
}
                     


#logo p, #langswitcher{
   font-family: 'Roboto', sans-serif;
   font-size: 31pt; 
   font-weight: 1800;
   color: #000;
   position: relative;
   padding-left: calc(4vw);  
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   /* ---- reset ---- */

/*
body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
  background-color: #fff;
}

canvas {
  display: block;
  vertical-align: bottom;
}

body {
  background-color: #fff;
  -moz-background-size: 100% auto; 
  -webkit-background-size: 100% auto;
  -o-background-size: 100% auto; 
  background-size: 100% auto;
}


@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto.ttf') format('truetype');
}


#logo {
  width: auto;
  height: auto;
}

#logo a {
  text-decoration: none;
}
                     


#logo p, #langswitcher{
   font-family: 'Roboto', sans-serif;
   font-size: 27pt; font-weight: 900;
   color: #000;
   position: relative;
   padding-left: calc(4vw);
   margin-top: 56px; 
}


*/

#langswitcher{padding: 0; padding-left: calc(1vw), color: #000;}

#langswitcher a{color: #000; text-decoration: none}

#VA {
   /*letter-spacing: -3px;*/
   letter-spacing: -3pt;
}


#L {
   /*letter-spacing: -4px; */
   letter-spacing: -3pt;
}
#LY {
   /*letter-spacing: -5px;*/
   letter-spacing: -3.75pt; 
}



#mainmenu {
  padding-left: 4%;
  padding-left: calc(4vw);
  padding-top: 16px;
  font-size: large;
  white-space:nowrap;
  position: relative;
  z-index: 10000;
}


#mainmenu ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  padding-left: 0px; /*убираем левый отступ, равный 40px*/
}


#mainmenu li {
  display: inline;
  margin-right: 0px;
  margin-left: 0px;
  padding: 0;
  color: #fff; 
  background-color: none;
  line-height: 60px;
}
  

     

#mainmenu li a {
  color: #000;
  padding: 7.5pt;
  background-color: #ccc;
  border: dotted 1px #000;
}

#mainmenu li{
  margin-right: 22.7pt;
}

#mainmenu li.q {
  background-color: #000;
  color: #fff;
  padding: 7.5pt;
  border: dotted 1px #000;
}

#mainmenu li.q a {
  color: #fff;
  
}

#mainmenu #portfolio-menu-item a { background-color: #000; color: #fff}

 /*   
#mainmenu li.l {
  border: solid 1px #999;
  color: #000;
  
}

#mainmenu li.g {
  border: solid 1px #000;
  background-color: #000;
  color: #fff;
}

#mainmenu a li.g {
  color: #fff; text-decoration: underline;}

*/

#copyright {
  margin: calc(4vw);
  color: #000;
  font: bold 10pt Arial;
}

.topcontent1 {
  margin:0; padding: 0; padding-top: 20px;
  padding-left: calc(4vw);
  color: #000;
  font: normal 12pt Arial;
}



#content, .top .topcontent, .ctnt {
  position: inherit;
  margin-top: 30pt;
  padding-left: calc(4vw);
  padding-right: calc(4vw); 
  color: #000;
  font: Normal 12pt Arial;
  background-color: none;
}


#logo a {
  text-decoration: none;
}

#logo p, #langswitcher a{
    font-size: 25.2pt; 
    padding-top: calc(5vw); 
  }

#logo p {
  margin-top: 0px; 
  padding-top: 56px
}

.sq {
  
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 20px;
  margin-bottom: 60px;
}
.sq img {width: 200px; height: 200px; border: solid 1px #ccc;}

#vz-content {
  position: absolute;
  z-index: 10002;
  top: 250px;
  left: 4%;
  left: calc(4vw);
  height: 50px;
  color: #000;
  font: Normal 16px Arial
}

.bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc(1em + 4vw);
     }

#stars-content {
  position: absolute;
  z-index: 10002;
  top: 30%;
  left: 4%;
  left: calc(4vw);
  height: 50px;
  color: #000;
  font: Normal 16px Arial
}

.phone-1 {font: Normal 16px Arial}
.phone-2 {font: Normal 16px Arial; float: right;}


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

#mainmenu { top: -30px}


#content p{max-width: 900px; line-height: 1.3;}

@media (min-width: 1200px) {
.top .topcontent {visibility: visible}
   #content .topcontent {visibility: hidden}


}

@media (min-width: 992px) and (max-width: 1199px) {
.top .topcontent {visibility: visible}
   #content .topcontent {visibility: hidden}
   .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
   #content .topcontent {visibility: visible}
#logo p, #langswitcher a{
    padding-top: calc(5vh); 
  }
  
  #mainmenu {
    /* position: absolute; */
    left: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw) */ 
  }
    /*
  .sq, .bq {
    border: solid 1px #ccc;
    width: calc(28vw - 4px);
    height: calc(28vw - 4px);
    margin-right: 20px;
    margin-bottom: calc(10vw);
  }

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

  .sq img, bq img {
    width: 100%;
    height: 100%;
  }
   */

  

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

 #stars-content{
    top: 45%
 }

 .bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc((1em + 4vw) * 0.8);
     }

}


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

#logo p, #langswitcher a{
    padding-top: calc(5vh); 
  }
  

  #mainmenu {
    /* position: absolute; */
    left: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw) */ 
  }

  /*.sq, .bq {
    border: solid 1px #ccc;
    width: calc(28vw - 4px);
    height: calc(28vw - 4px);
    margin-right: 20px;
    margin-bottom: calc(10vw);
  }

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

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


  

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

 #stars-content{
    top: 45%
 }

 .bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc((1em + 4vw) * 0.8);
     }

 #copyright {
  margin: calc(4vw);
  margin-bottom: calc(2vw);
  color: #000;
  /*font: bold 8pt Arial; */
}

}


@media (min-width: 481px) and (max-width: 767px) {
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
   #content .topcontent {visibility: visible}
  
  #logo p, #langswitcher a{
    padding-top: calc(5vh); 
  }

  #mainmenu {
   /* position: absolute; */
    left: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw); */ 
  }


  /*
  .sq, .bq {
    border: solid 1px #ccc;
    width: calc(28vw - 4px);
    height: calc(28vw - 4px);
    margin-right: 20px;
    margin-bottom: calc(10vw);
  }

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

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

  */
  

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

 #stars-content{
    top: 45%
 }

 .bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc((1em + 4vw) * 0.8);
     }
  #copyright {
  margin: calc(4vw);
  margin-bottom: calc(2vw);
  color: #000;
  /*
  font: bold 8pt Arial;
  */
}

} 

@media (max-width: 480px) {
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
  #content .topcontent {visibility: visible}

  #content.root-content {margin-top: 200px !important;}
 
  .root-body #logo {position: absolute; top: 0}
  #logo p, #langswitcher a{
    font-size: 25.2pt; 
    padding-top: calc(5vw); 
    font-size: calc(9.25vw);
  }
                        
  #mainmenu {width: calc(50vw)}
  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw); */ 
  }

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

  .reds {

   position: absolute;
   top: 100px;
   left: 20px;
   width: 100px;
   height: 33px;
   opacity: 70%;
  }
  
}



.alt {
  margin-top: 10px;
}

.dbl {
  width: 420px;
}

.bq img,.sq img, #mainmenu ul li, #mainmenu ul li a , img.qq, .bq, .sq{

-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;

}

.bq, .sq {border: none}




#langswitcher{padding: 0; padding-left: calc(1vw), color: #000;}

#langswitcher a{color: #000; text-decoration: none}



#mainmenu {
  padding-left: 4%;
  padding-left: calc(4vw);
  padding-top: 0px;
  font-size: large;
  white-space:nowrap;
  position: relative;
  z-index: 10000;
}


#mainmenu ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  padding-left: 0px; /*убираем левый отступ, равный 40px*/
}


#mainmenu li {
  display: inline;
  margin-right: 0px;
  margin-left: 0px;
  padding: 0;
  color: #fff; 
  background-color: none;
  line-height: 60px;
}
  

     

#mainmenu li a {
  color: #000;
  padding: 7.5pt;
  background-color: #ccc;
  border: dotted 1px #000;
}

#mainmenu li{
  margin-right: 22.7pt;
}

#mainmenu li.q {
  background-color: #000;
  color: #fff;
  padding: 7.5pt;
  border: dotted 1px #000;
}

#mainmenu li.q a {
  color: #fff;
  
}

#mainmenu #portfolio-menu-item a { background-color: #000; color: #fff}

 /*   
#mainmenu li.l {
  border: solid 1px #999;
  color: #000;
  
}

#mainmenu li.g {
  border: solid 1px #000;
  background-color: #000;
  color: #fff;
}

#mainmenu a li.g {
  color: #fff; text-decoration: underline;}

*/

#copyright {
  margin: calc(4vw);
  color: #000;
  font: bold 10pt Arial;
}




#content, .top .topcontent, .ctnt {
  position: inherit;
  margin-top: 30pt;
  padding-left: calc(4vw);
  padding-right: calc(4vw); 
  color: #000;
  font: Normal 12pt Arial;
  background-color: none;
}


#logo a {
  text-decoration: none;
}

#logo p, #langswitcher a{
    font-size: 25.2pt; 
    padding-top: calc(5vw); 
  }

#logo p {margin-top: 0px; padding-top: 56px}

.sq {
  
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 20px;
  margin-bottom: 60px;
}
.sq img {width: 200px; height: 200px; border: solid 1px #ccc;}

#vz-content {
  position: absolute;
  z-index: 10002;
  top: 250px;
  left: 4%;
  left: calc(4vw);
  height: 50px;
  color: #000;
  font: Normal 16px Arial
}

.bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc(1em + 4vw);
     }

#stars-content {
  position: absolute;
  z-index: 10002;
  top: 30%;
  left: 4%;
  left: calc(4vw);
  height: 50px;
  color: #000;
  font: Normal 16px Arial
}

.phone-1 {font: Normal 16px Arial}
.phone-2 {font: Normal 16px Arial; float: right; margin-left: 20px; float: none}
 
/*
.top .topcontent {visibility: hidden}
   #content .topcontent {visibility: hidden}
*/
#mainmenu { top: -30px}


#content p{max-width: 900px; line-height: 1.3;}

@media (min-width: 1200px) {
/*
.top .topcontent {visibility: visible}
   #content .topcontent {visibility: hidden}
*/

}

@media (min-width: 992px) and (max-width: 1199px) {
/*
.top .topcontent {visibility: visible}
   #content .topcontent {visibility: hidden}
   .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
   #content .topcontent {visibility: visible}
*/
#logo p, #langswitcher a{
    padding-top: calc(5vh); 
  }
  
  #mainmenu {
    /* position: absolute; */
    left: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw) */ 
  }
    /*
  .sq, .bq {
    border: solid 1px #ccc;
    width: calc(28vw - 4px);
    height: calc(28vw - 4px);
    margin-right: 20px;
    margin-bottom: calc(10vw);
  }

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

  .sq img, bq img {
    width: 100%;
    height: 100%;
  }
   */

  

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

 #stars-content{
    top: 45%
 }

 .bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc((1em + 4vw) * 0.8);
     }

}


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

#logo p, #langswitcher a{
    padding-top: calc(5vh); 
  }
  

  #mainmenu {
    /* position: absolute; */
    left: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw) */ 
  }

  /*.sq, .bq {
    border: solid 1px #ccc;
    width: calc(28vw - 4px);
    height: calc(28vw - 4px);
    margin-right: 20px;
    margin-bottom: calc(10vw);
  }

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

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


  

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

 #stars-content{
    top: 45%
 }

 .bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc((1em + 4vw) * 0.8);
     }

 #copyright {
  margin: calc(4vw);
  margin-bottom: calc(2vw);
  color: #000;
  /*font: bold 8pt Arial; */
}

}


@media (min-width: 481px) and (max-width: 767px) {
  /*
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
   #content .topcontent {visibility: visible}
  */
  #logo p, #langswitcher a{
    padding-top: calc(5vh); 
  }

  #mainmenu {
   /* position: absolute; */
    left: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw); */ 
  }


  /*
  .sq, .bq {
    border: solid 1px #ccc;
    width: calc(28vw - 4px);
    height: calc(28vw - 4px);
    margin-right: 20px;
    margin-bottom: calc(10vw);
  }

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

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

  */
  

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

 #stars-content{
    top: 45%
 }

 .bigslogan{
     /* font-size: calc(4vw + 4vh + 2vmin); */
     font-size: calc((1em + 4vw) * 0.8);
     }
  #copyright {
  margin: calc(4vw);
  margin-bottom: calc(2vw);
  color: #000;
  /*
  font: bold 8pt Arial;
  */
}

} 

@media (max-width: 480px) {
  /*
  .landscape {visibility: visible}
  .portrait {visibility: hidden}
  .top .topcontent {visibility: hidden}
  #content .topcontent {visibility: visible}
  */

  #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 {width: calc(50vw)}
  #mainmenu li{
    margin-right: 10.2pt;
    padding-top: 0;
    /* font-size: calc(4.95vw); */ 
  }

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

  .reds {

   position: absolute;
   top: 100px;
   left: 20px;
   width: 100px;
   height: 33px;
   opacity: 70%;
  }
  
}



.alt {
  margin-top: 10px;
}

.dbl {
  width: 420px;
}

.bq img,.sq img, #mainmenu ul li, #mainmenu ul li a , img.qq, .bq, .sq{

-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;

}

.bq, .sq {border: none}