/*
To change this template, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25.06.2015, 15:49:05
    Author     : Den
*/

.phone_foot {
    text-decoration: none;
    color: inherit;
}

@media screen and (max-width: 1800px){
    
    div.role-main section p img,
    div.role-main section header img{
        max-width: 100%;
    }
}
@media screen and (max-width: 1600px){
    .menu ul > li{
        margin: 15px 0;
    }
    
    .logo{
        margin-top: 10px;
        height: 240px;
    }
}

@media screen and (max-width: 1440px) {
    #arh-frame4,
    #arh-frame2{
        background-size: cover;
    }
}

@media screen and (max-width: 1366px){
    
    .pallx .layer-last{
        background-position: right center;
        background-size: 91% auto;
    }
    
    .content-figure-block.line-three > figure{
        height: 219px;
    }
    
    #arh-frame4,
    #arh-frame2{
        /*background-size: auto 100%;*/
        background-size: cover;
    }
    
    
    [data-page="infrastructure"] div.role-main section p img,
    [data-page="infrastructure"] div.role-main section header img{
        margin-bottom: 0;
    }
    
    [data-page="infrastructure"] .content-figure-block.line-three > figure{
        height: 199px;
    }

    
}

/*установил эффект параллаксной страницы только для экранов от 1025пх, чтоб убрать размытие на айпадах и айфонах*/
@media screen and (min-width: 1025px){
	.pallx .layer-last,
	#history-frame1,
	#history-frame2,
	#history-frame3,
	#history-frame4,
	#arh-frame2,
	#arh-frame4{
		background-attachment: fixed;
	}
}


@media screen and (max-width: 1366px) and (max-height: 768px),
       screen and (max-width: 1280px) and (max-height: 600px){ 
           
    .logo{
        height: 220px;
        margin-top: 0;
    }    
    .logo img{
        max-width: 50%;
    }
    .menu ul > li{
        margin: 20px 0;
    }
    .menu ul > li > a{
        font-size: 1.4em;
    }
}
@media screen and (max-width: 1280px) and (max-height: 600px){
    .menu ul > li{
        margin: 10px 0;
    }
    .menu ul > li > a{
        font-size: 1.2em;
    }
}

@media screen and (max-width: 1280px){
    [data-page="contacts"] div.role-main .column p{
        font-size: 0.8em;
    }
    [data-page="contacts"] div.role-main p.h1{
        font-size: 1.5em;
    }
    
    
    .images-list-block .imge-object img{
        max-height: 100%;
    }
    
    div.role-main section{
        width: 95%;
        padding: 40px 0 0 0;
    }
    
    
    footer[role="contentinfo"],
    aside[role="complementary"]{
        width: 18%;
    }
    div[role="main"]{
        width: 80%;
        left: 20%;
    }
    
    .pallx .layer-last{
        background-size: auto 100% !important;
    }
    #about-frame2{
        background-size: 80% auto;
    }    
    
    
    .content-figure-block.line-three > figure{
        height: 209px;
    }
    
    [data-page="infrastructure"] .content-figure-block.line-three > figure{
        height: 192px;
    }    
    
}

@media screen and (max-width: 1024px){
    .images-list-block .imge-object{
        width: 49%;
    }
    
    footer[role="contentinfo"],
    aside[role="complementary"]{
        width: 20%;
    }
    div[role="main"]{
        width: 78%;
        left: 22%;
    }
    .layer-info p{
        font-size: 1.8em;
    }
    
    .content-figure-block.line-three > figure{
        height: 163px;
    }    
    
    .tooltip p{
        font-size: 0.6em; 
   }
   
   
   #contacts .aside{
       width: 45%;
   }
   
   
   .pallx .layer-last{
       background-size: contain !important;
   }
}

@media screen and (max-width: 800px){
    .menu ul > li > a   {
        font-size: 1.1em;
    }
    .columns3 .column{
        width: 48%;
    }
}


@media screen and (max-width: 960px){
    .content-figure-block.line-three > figure{
        height: 153px;
    }
    
    [data-page="infrastructure"] .content-figure-block.line-three > figure,
    [data-slidename="arh-2"].content-figure-block.line-three > figure{
        height: 140px;
    } 
    
    .logo{ height: 150px;}
}


@media screen and (max-width: 640px){
    
	/*.pallx .layer-last{
        background-size: 100% auto !important;
    }*/
		
    .menu ul > li {
        margin: 0;
    }
    .menu ul > li > a{
        font-size: 0.7em;
		line-height: 0.7em;
    }
    .logo{
        height: 90px;
    }
    
    .phone{
        font-size: 0.7em;
        padding: 0;
        margin: 5px 0;
    }
    footer[role="contentinfo"]{
        margin-top: -60px;
    }
    footer[role="contentinfo"] p{
        padding: 0;
        margin: 5px 0
    }
    footer[role="contentinfo"] img{
        max-width: 70%;
    }
    
    
    .column p{
        font-size: 0.8em;
    }
    p.h1{
        font-size: 1.9em;
    }
    
    .content-figure-block.line-three > figure{
        height: 153px;
        width: 48%;
    }
    
    #contacts .aside{
        width: 40%;
    }
    #contacts .aside .aside-content{
        top: 10px;
        width: 95%;
    }
    #contacts .aside .aside-content p:not(.h1){
        font-size: 0.9em;
    }
    #contacts .aside .aside-content .cmap{
        display: none;
    }
    
    
    #history-frame1{
        background-size: 83% auto !important;
    }
    .layer-info p{
        font-size: 1.1em;
    }
    
    .button-wrap{
        left: 40%;
    }
    .button{
        padding: 5px;
        font-size: 1.2em;
    }
    
    a#gotop::after{
        font-size: 1em;
        margin-top: -14px;
    }
    a#gotop{
        border-radius: 100%;
        width: 35px;
        height: 35px;
    }    
}


@media screen and (max-width: 480px){
    
    footer{
        display: none;
    }
    
    aside[role="complementary"]{
        position: absolute;
        width: 100%;
       // height: 40px;
        height: auto;
        min-height: 0;
    }
    
    div[role="main"]{
        left: 0;
        width: 100%;
        /*top: 64px;*/
    }
    [data-page=""] div[role="main"]{
        top: 90px;
    }
    
    aside[role="complementary"] .logo{
        display: none;
    }
    
    .menu ul{
        //position: absolute;
        //left: 0;
        padding: 10px 0;
        background: none;
        background-color: #15263a;
        width: 100%;
    }
    
    .menu ul li:not(.media-view){
        display: none;
    }
    .menu ul.active li:not(.media-view){
        display: block;
    }
    
    
    .menu ul li.media-view a{
        color: #9e8a6b;   
        text-decoration: none;
    }
    .menu ul li.media-view{
        display: block;
       //height: 40px;
        border-bottom: 1px solid #9e8a6b;
        color: #9e8a6b;
        font-family: "BodoniCondC";
        font-size: 1.2em;
        line-height: 1em;
        padding-bottom: 7px;
    }
    .menu ul li.media-view .sep{
        width: 40px;
        height: 1px;
        background-color: #9e8a6b;
        display: block;
        margin: 4px auto 0 auto;
    }
    .menu ul li.media-view .addr{
        font-size: 0.7em;
    }
    
    .menu ul li.media-view div{
        display: inline-block;
        vertical-align: middle;
    }
    
    .menu ul li.media-view div:first-child{
        margin-left: -80px;
        margin-right: 30px;
        border: 1px solid #9e8a6b;
    }
    .menu ul li.media-view div:first-child a{
        display: inline-block;
        vertical-align: middle;
        width: 43px;
        height: 43px;        
        background-color: transparent;
        background-image: url('../img/mobile-menu-icon.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    .menu ul.active li.media-view div:first-child a,
    .menu ul li.media-view div:first-child a:hover{
        background-position: center -47px;
        background-color: #9e8a6b;
    }
    
    
    .menu ul li{
        line-height: 1.5em;
        width: 98%;
    }
    
    .menu ul li:hover:not(:first-child){
        background: rgba( 0, 40, 68, 1 );
    }
    
    
    #history-frame1{
        background-size: 100% auto !important;
    }
}


@media screen and (max-height: 560px){
    .logo{
        height: 150px
    }
    .menu ul > li{
        margin: 5px 0;
    }
    
    .tlf{
        /*padding: 10px;*/
        font-size: 24px;
    }
    
    .wrapp-img img{
        width: 130px;
    }
    .info-left p{
        font-size: 14px;
        line-height: 1.5;
    }
}
@media screen and (max-height: 420px){
    .logo{
        height: 120px
    }
    .phone{
        font-size: 1em;
    }
    .menu ul > li > a {
        font-size: 0.9em;
    }
    .menu ul > li{
        margin: 0;
    }
	footer[role="contentinfo"]{
		background-color: transparent;
	}
	footer[role="contentinfo"] > p:first-child{
		margin: 40% 0 0 0;
	}

}


/*=============Andrey============*/
@media only screen and (max-width : 768px) {
    .tlf {
        top: 44px;
        right: -20px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
    }
}

@media screen and (max-width: 768px) {
    .apple > div.tlf a {
        padding: 5px;
    }
}
/*============The end============*/

@media (max-width: 768px) {
    .menu { margin-top: 50px;}
}

@media (min-height: 480px) and  (max-height: 768px) {
    .menu { margin-top: 0;}
}


/*============= Andrey ============*/

#etag-block .convas-block canvas,
#etag-block .convas-block img,
#room-block .convas-block canvas,
#room-block .convas-block img{
    max-width: 100%;
}


@media (max-width: 768px) {
    #contacts .aside .aside-content {top: 10%;}
    #contacts .aside .aside-content p:not(.h1) { margin: 8% 0;}
    #contacts .aside .aside-content .cmap { margin-top: 5%;}
    [data-page="kvartirografiya"] div.role-main#fasad-block { background-color: #efe5d1; }
    [data-page="kvartirografiya"] div.role-main { background-image: none;}

    #etag-block p.street { margin-top: 10px;}
    #etag-block a.next-frame { top: 121%;}

    [data-page="kvartirografiya"] .wrapp-list { margin-top: 5px;}

    
}
/*============ The end ============*/


@media screen and (max-width: 1366px) {
    .logo { height: 190px;}

}

@media screen and (max-width: 1024px) {
    [data-page="kvartirografiya"] div.role-main > section.page-content.first {width: 109%; top: 0;}
    a.next-frame {left: 58%; width: 50px; height: 50px;}

    #etag-block .convas-block {margin-top: 100px;}
    #room-block .convas-block {margin-top: 100px;}
    [data-page="home"] div[role="main"] {height: 100vh;}

}


@media (max-width: 1024px) and (min-width: 541px) {
    [data-page="kvartirografiya"] .tlf a {display: none;}

}


@media screen and (max-width: 768px) {
    #room-block .convas-block {width: 95%;}

}


@media (max-width: 768px) and (min-width: 540px) {
    .menu {margin-top: 115px;}
    .menu ul > li > a {display: inline-block; padding: 10px 0;}
    .phone {font-size: 1.1em;}
    aside[role="complementary"] {height: 100vh;}
}


@media screen and (max-width: 540px) {
    div[role="main"] {top: 17px;}
    [data-page="kvartirografiya"] div.role-main > section.page-content.first {top: 50px; left: -144%; width: 132%;}

    #etag-block .convas-block {margin-top: 50px;}
    #room-block .convas-block {margin-top: 50px; width: 85%;}

}