@import url(https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100);
@import url(https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic);
/*for social icons*/

@font-face {
    font-family: 'AnnaFont';
    src: url('../fonts/AnnaFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
 }
*{
  font-weight: normal;
  color:#454545;
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-family: Tahoma;
  box-sizing:border-box;
}
.start-slogan {
    font-family: 'Poiret One', sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}
a{
  outline: 0;
  font-family: Poiret One !important; 
  color: #454545;
  text-decoration: none;
  font-size: 1.6em;
  border-bottom: 1px solid transparent;
}

p{
  font-size: 0.9em;
  padding-top: .2em;
  text-align: center;
}

body{
  background-color: #f1f1ec;

}

main{
  position: relative;
  width: 80%;
  margin: auto;
}


                                                                                                  /*HEADER OPTIONS*/
.my-logo{
  height: 85px;
  background: transparent url("../img/arthousestudio.png") center  no-repeat;
  background-size: contain;
}



.my-navigation{
  margin: auto;

  width: 80%;
}
.my-navigation ul{
  margin: 15px 0 0;
  list-style: none;
  text-align: justify;
}
.my-navigation li{
  display: inline-block;
  margin:auto;
  }
.my-navigation a.active, .my-navigation a:hover{
  border-bottom: 1px solid #6a6a6a;
  transition:.3s;
}
.helper{
          width: 100%;
              height: 0;
              visibility: hidden;

}


                                                                                                  /*SIDERS OPTIONS*/


div[class^="side"]{
  padding: .5em 0
}

main div[class^="side-"]{
  position: absolute;
  opacity: 0;
  z-index: -99;
}
main div[class^="side-"].active{
  width: 100%;
  z-index: 1;
  opacity: 1;
  transition:1.4s;
  transition-property:opacity;
}


                                                                                                  /*SIDE-1*/

                                                                                                  /*
                                                                                                  if the image size is smaller than the frame size,
                                                                                                  gaps may appear. If image sizes are exactly the same,
                                                                                                  the images will fade over one another and not move. 
                                                                                                  */
#kenburns-slideshow {
  box-sizing:border-box;
  overflow: hidden;
  margin:auto;
  position: relative;
  width:100%;
  height: 300px;
  background-color:#292929;
  z-index: 1;
  overflow: hidden;
}
                                                                                                  /*  The plugin wraps the images in div.kb-slide. This
                                                                                                  allows me to run separate animations simultaneously. */
.kb-slide{
  position: absolute;
  z-index: 1;
  opacity: 0;
}
                                                                                                  /* I used position relative here because IE8
                                                                                                  didnt like the opacity when the img was set to absolute*
                                                                                                  translate3d(000) kicks them into HW acceleration, and 
                                                                                                  backface-visibility gives some performance boosts.*/
.kb-slide img{
  position: relative;
  -webkit-transform: translate3d(0,0,0)
  -moz-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;

}
                                                                                                  /* If the script encounters an image that hasnt loaded,
                                                                                                  it pops up a little loading wheel. I used a little CSS3
                                                                                                  but you could also use a gif to better handle ie8*/
.loader {
  width:32px;
  height:32px;
  top:50%;
  left:50%;
  border:5px solid rgba(128,128,128,0.9);
  opacity:.9;
  border-top:5px solid rgba(0,0,0,0);
  border-left:5px dotted rgba(0,0,0,0);
  border-radius:32px;
  -moz-animation:spin .7s infinite linear;
  -webkit-animation:spin .7s infinite linear;
}

@-moz-keyframes spin {
  0% { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
  0% { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
  0% { -webkit-transform:rotate(0deg); }
  100% { -webkit-transform:rotate(-360deg); }
}


.description{
  width: 100%;
  margin: 20px auto 0;
}

.description.russian, .description.ukrainian{
  font-size: .93em;
}
                                                                                                  /*End SIDE-1*/



                                                                                                  /*START PAGE*/

.startpage{
  min-height: 100vh;
}

.parent {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
    }
.parent:before {
    height: 100%;
    width: 0;
    display: inline-block;
    vertical-align: middle;
    content: '';   
}

.block {
    display: inline-block;
    margin: 24px;
    white-space: normal;
    vertical-align: middle;
    text-align: center;
    }

.block img {
    display: block;
    border: none;    
    margin: auto;
    }
.language{
    margin-top: 5em;
}   
.language a{
  margin: auto 1em ;
}



                                                                                                  /*SIDE 2*/

                                                                                                  /*FOTORAMA*/

.fotorama>div{
  margin: auto;
}
.fotorama .fotorama__nav-wrap{
  margin-top: 10px
}

                                                                                                  /*FOTORAMA END*/
                                                                                                  /*End SIDE 2*/



                                                                                                  /* Table side-3*/
table.price{
  border-spacing: 0;
  margin: 0 auto;
}
table.price tr th:nth-child(2){
  text-align: left;
}
table.price tr th:not(:nth-child(2)){
  padding: .1em 1em;
}

.price tr:hover:not(:nth-child(1)){
  background: linear-gradient(to left, #F1F1EC 0%,  #f8f8f5 5%,   #f8f8f5 95%,   #F1F1EC 100%);
  transition-duration:0.2s;
}


.price th{
  border-bottom: 1px solid lightgray;
  padding: 0.1em;
  font-size: .9em;}
.price div.buble{
  background-color: #8b8b86;
  margin: auto;
  width: .5em;
  height: .5em;
  border-radius: 50%;
}
table.price tr th:first-child,table tr th:last-child{
  border: none !important;
  width: 1em;
  padding: 0;
  
}
                                                                                                  /*End Table side-3*/


                                                                                                  /*Contacts SIDE-4*/

.conteiner-contacts{
  margin: auto;
  width: 100%;
}
.conteiner-contacts:after{
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;

}

.contacts{
  float: left;
  width: 45%;
  overflow: hidden;

}
.contacts table{

  width: 100%;
  border-spacing: 10px 0px;
}
.contacts table th:first-child{
  text-align: right;
  min-width: 1em;
  font-weight: bold;
}
.contacts table th:last-child{
  text-align: left;
  min-width: 5em;
  width: 90%;
}
.contacts table th, .contacts div form{
  font-size: .9em
}
.contacts>div{
  margin-top: 1.7em; 
}


.map{
  height: 100%;
  float: right;
  width: 55%;
  overflow: hidden;
  box-sizing:border-box;
 
}


                                                                                                  /* End Contacts SIDE-5*/