body {
    background: #fff;
    background: linear-gradient(70deg, rgba(165, 203, 247, 0.137) 0%, rgba(255,255,255,1) 17%, rgb(135, 178, 224) 100%);
    text-align:center;
    font-family: 'trebuc';
}

#header {
    position:absolute;    
    top:0;
    width: 100%;
    height:5vw;
    background-image: url("../img/terrassapanoramicaw.png");
    background-attachment: fixed;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    position: fixed;
    opacity:1; 
    border-bottom: 1px solid #fff;
    z-index:999;

    

} /*background-color:#777;*/

#bannerlayer{
    position:fixed;
    top:0;
    width:100%; 
    z-index:999

}

#includedContent {
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;

}

h1.bannertext {
    color: #fff;
    text-shadow: 2px 2px 4px #fff;
    font-weight: bold; 
    font-style: oblique;
    font-size: 2.5vw;
    
}


#maindisplay{ 
    padding:20px;
    display:flex; 
    max-width:1200px ; 
    margin:30px auto 30px auto;
    text-align:center;
    background-color: #dcdcdc;
    opacity:0.91;
    border:1px solid #fff;
    border-radius:7px;


}

#separatormaindisplay {
    display: none;
    margin-top:150px;
    height:210px;
    width:100%; 
}


#infopanel {
    position:relative;
    padding:20px;
    display: inline-block; 
    max-width:1200px ; 
    margin:130px auto 0px auto;
    height: min-content;
    background:#dcdcdc;
    opacity:0.91;
    border-radius:7px; 
    top:0;
    border:1px solid #fff;  
}

#privatearea {
    text-align:left;
    background:#fff;
    border-radius:4px;
    padding:11px 17px; float:left;
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
    margin-right: 20px;
    height:fit-content; 
}

#divdisplaylogin,#divdisplayregis { margin: 7px}

#messagearea{
    
    text-align:left;
    background:#fff;
    border-radius:4px; 
    padding:0; 
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
    overflow:hidden;
    height:fit-content;
    

}


#divsearchform {
    position:relative;
    width:300px;
    float:left;
    text-align:left;
    background:#999;
    margin:0px auto auto auto;     
    padding:15px;
    background:#fff;
    border-radius:4px;
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
box-shadow: 2px 4px 6px 2px #777;
}


#searchresults { 
    position:relative;
    float:left; 
    width:75%;
    min-width:420px;
    margin:0 0 20px 20px  }

#listcontainer {
	width: 100%;
	text-align:center;
    
    
}


#login-alert {
    min-width:82px;
    font-size:small;
    padding:3px 4px;
}

.itemcontainer {
    position:relative;     
    margin-bottom:25px;
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
box-shadow: 2px 4px 6px 2px #777;
	overflow: hidden;	
	height: auto;
	border-radius: 4px;
	background: #fff;
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
}

.thumbmapcity {
    background-image:url('../mapsthumbterrassa.png');
    background-size: 100% auto;
    width: 100%;
    height: 250px;
    margin:30px 15px 30px 0;
    padding: 15px;
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
box-shadow: 2px 4px 6px 2px #777;
	overflow: hidden;		
	border-radius: 4px;
    color:#3577cc;
    text-shadow: 1px 1px #fff;
    cursor:pointer;

}

.divitemimg {
    overflow: hidden;
	  display:inline;
	  float: right;
	  min-width: 300px;
	height:300px;
    
	}
    
.divoverimg { text-align:left;  }
p.priceitem { color: #6583aa; text-shadow:1px 1px #fff; font-size: large; font-weight: bold; padding: 10px 0  0 12px; }

.diviteminfo {
    float: left;
		text-align: left;
	  display:inline;
	  padding-left:16px;
	  padding-right:10px;
    width:50%;
	  height:300px;
}

img.imgsel {
    height: 300px;
}

p.itemtitle {
    font-size: larger;
    color: #3577cc;
}

p.itemplace {
    font-size: smaller;
    color: #888;
}

p.itemspecs {
    font-size: medium;
    color: #333;
}

p.itemexplain {
    font-size: smaller;
    color: #888;
}

p.itemphone {
    font-size:large;
    font-style: italic;
    font-weight: 300;
    color:#333;
    

}

p.itemupdated {
    font-size: smaller;
    color: #888;
}

sup {
    font-size:xx-small;
    vertical-align: super;
}

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

#adminlinksmall  {float:left;margin:25px auto auto 25px;display:none }

#itemcontainersearch {
   
	width: 100%;
	height: auto;
	margin: 0 auto 30px auto;
    padding: 15px 0 15px 0;
	border-radius: 10px;
    background: rgb(204,204,204);
    background: linear-gradient(298deg, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 35%, rgba(137,184,233,1) 100%);  
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
    text-align: left;
}




.itemcontainersingle {

display:flex
}

.itemlink:active{
position:relative;
top:1px;
left:1px;
}

#divzona, #divsubz, #divselsort {display:block}

#zonaselect, #subzselect, #sortselect {
    -webkit-box-shadow: 2px 4px 6px 2px #777; 
    box-shadow: 2px 4px 6px 2px #777;
} 


@media screen and (max-width: 1440px){

    h1.bannertext { font-size: 30px;  }




}

@media screen and (max-width: 1245px){
    #maindisplay, #infopanel{
        margin-left: 12px;
        margin-right: 12px;
    }



}

@media screen and (max-width: 1050px){
    #header { background-size: 300% auto; height: 12vw; }
    .divitemimg {
        width:100%;
        float:left;
    }
    .diviteminfo{
        width:90%;
        margin:20px;
        float:left;
    }
}

@media screen and (max-width: 750px){
    #searchresults{
         width:60%;
    }

    .itemcontainer{
        width:90%;
    }
    .divitemimg {
        
        float:left;
    }
    .diviteminfo{
        width:82%;
        margin:20px;
        float:left;
    }

   
   }

   @media screen and (max-width: 622px){
    #wrap{width:100%;margin:30px;text-align: center;}
    #header {background-size: 300% auto; height: 12vw;   }
    #divsearchform{width:80%;float:unset;border:none; margin:30px 0 30px 0;}
    

    #searchresults{position:initial;width:100%;float:unset;min-width:fit-content;margin:0}
    #messagearea {width:80%;}
    #infopanel {background: none; margin:130px auto 0px auto; padding: 0; border:none; display:flex; flex-flow: column;}
    #infopanelleft  { order: 1; margin-bottom:20px; }
    #infopanelright { order: 2; width:fit-content} 
    #maindisplay {background: none; padding: 0; margin:30px auto 0px auto;border:none; display:contents;}
    #privatearea {border:none}
    #adminlinksmall   {display:block; padding:0; margin:0 0 0 15px}
   .divitemimg {
       width:80%;
       min-width: 200px;
   }
   .diviteminfo{
       width:50%;
       margin:20px;
   }

   
    .itemcontainer {
        width:80%;    
        }
    p.itemtitle {
        font-size:14px;
        line-height:16px;	
    }

    p.itemplace {
    font-size:12px;
    line-height:14px;	
    }

        p.itemspecs {
                font-size:11px;
                line-height:18px;	
            color:333;
        }

        p.itemexplain {
            font-size:12px;
            line-height:14px;	
        }

        p.itemupdated {
            font-size:11px;
            line-height:11px;	
            color:#333;
        }
        .divitemimg {
            width:100%;
            float:left;
        }
        .diviteminfo{
            width:80%;
            margin:15px;
            float:left;
        }
		footer{
            margin:0;
        }
	}



#widthindicator {  
    /*display:none;*/
    position: absolute;
    width:100%;
    top: 0px;
    left: 0;
    font-size: 20px;
    color: red;
    z-index: 999;
}

#temporary {
    display:block
}
/*
#footer{
    position: absolute;
    bottom: 0;
    width:100%;
    height:70px;
    text-align:center;
    position: fixed;
    opacity: 0.9;
    background-color: #3577cc;
    -webkit-box-shadow: 50px 50px 50px 50px #fff; 
    box-shadow: 50px 50px 50px 50px #fff,50px 50px 50px 50px #fff;    
    color:#fff;
    padding:20px;
  
}*/
#footerlayer {    
    background-color: #3577cc;
    border-top: 1px solid #fff;
    -webkit-box-shadow: 0.2vw 0.2vw 0.2vw 0.2vw #fff; 
    box-shadow: 0.2vw 0.2vw 0.2vw 0.2vw #fff, 0.2vw 0.2vw 0.2vw 0.2vw #fff;
    z-index: 999; 
}
  
 .footerfont {
    color:#fff;

    padding: 20px;

  }