@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700");
*{
margin:0;
padding:0;
font-family: 'Lato', sans-serif;
}
html,
body{
width:100%;
height:100%;
}
html.noscroll, 
body.noscroll{
overflow: hidden;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5{
text-transform: uppercase;
font-weight: 300;
color:#363636;
}
#content h1:after,
#content h2:after,
#content h3:after,
#content h4:after,
#content h5:after,
#footer h1:after,
#footer h2:after,
#footer h3:after,
#footer h4:after,
#footer h5:after{
display: block;
width:50px;
background:#363636;
content:'_';
font-size:0;
height:2px;
margin:5px 0 10px 0;
}
#content h1,
#footer h1{
font-size:26px;
}
#content h2,
#footer h2{
font-size:22px;
}
#content h3,
#footer h3{
font-size:18px;
}
#content h4,
#footer h4{
font-size:14px;
}
#content p,
#footer p,
#content ul li{
font-size:15px;
line-height:22px;
letter-spacing: 0.2px;
font-weight: 400;
color:#363636;
}
#content p,
#footer p{
margin-bottom:10px;
}
#content ul{
display: block;
margin:0;
padding:0;
}
#content ul li{
display: block; }
#content ul li:before{
font-family: FontAwesome;
display: inline;
content:'\f101';
margin-right:5px;
}
#content a.button,
#footer a.button{
display: block;
font-size:13px;
color:white;
text-transform: uppercase;
font-weight: 500;
padding:8px 10px;
background:#7caa74;
width:80px;
text-align: center;
cursor: pointer;
transition: background .3s;
font-style: normal;
text-decoration: none;
box-sizing: border-box;
}
#content a.button:hover,
#footer a.button:hover{
background:#507c49;
}
#content a.button.more,
#footer a.button.more{
margin:40px auto;
font-size:15px;
width:180px;
padding:12px 12px;
}
#content a.button.full,
#footer a.button.full{
width:100%;
padding:12px 12px;
}
#content a.button.full_size,
#footer a.button.full_size{
width:100%;
padding:15px;
font-size:25px;
}
a{
color:inherit;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
a[href^="tel:"]:before,
a[href^="mailto:"]:before{
display: inline-block;
margin-right:5px;
font-size:inherit;
font-weight:inherit;
font-family: FontAwesome;
content:'\f095'; 
}
#content a:not(.noicon)[href^="http:"]:before,
#content a:not(.noicon)[href^="https:"]:before{
display: inline-block;
margin-right:5px;
font-size:inherit;
font-weight:inherit;
font-family: FontAwesome;
content:'\f0ac'; 
}
#nav_wrapper li a:before,
a.button:before,
#content a.button:before{
display: none;
}
a:hover:before{
text-decoration: none !important;
}
a[href^="mailto:"]:before{
content:'\f003';   
}
img.alignright{
float:right;
margin:0 0 10px 10px;
}
#maps{
display: block;
width:100%;
height:500px;
}
html,
body{
width:100%;
height:100%;
}
#header{
display: block;
width:100%;
height:800px;
max-height: 75%;
position: relative;
z-index:1;
} #header #slider{
display: block;
position: absolute;
top:0;
width:100%;
height:100%;
overflow: hidden;
}
#header #slider #slide{
display: block;
position: fixed;
width:100%;
height:100%;
overflow: hidden;
}
#header #slider #slide img{
display: block;
position: absolute;
width:auto;
min-width:100%;
min-height:100%;
height:auto;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#header #overlay{
display: block;
position: absolute;
bottom:30px;
right:30px;
overflow: hidden;
}
#header #overlay #prev,
#header #overlay #details,
#header #overlay #next{
display: inline-block;
box-sizing: border-box;
vertical-align: top;
width:50px;
height:50px;
background:rgba(0, 0, 0, 0.63);
color:white;
transition: background .2s;
cursor: pointer;
}
#header #overlay #prev:hover,
#header #overlay #details:hover,
#header #overlay #next:hover{
background:rgba(0, 0, 0, 0.73);
}
#header #overlay #details{
width:200px;
padding:4px 8px;
text-align: left;
}
#header #overlay #details h1{
width:100%;
display: block;
font-size:18px;
font-weight:400;
}
#header #overlay #details .stars{
display: block;
width:100%;
height:23px;
line-height:23px;
font-size:14px;
}
#header #overlay #prev:before,
#header #overlay #next:before{
font-family: FontAwesome;
display: block;
content:'\f100';
line-height:50px;
font-size:40px;
text-align: center;
}
#header #overlay #next:before{
content:'\f101';
}  #nav_wrapper{
display: block;
position: absolute;
width:100%;
height:110px;
line-height:110px;
background: white;
top:50px;
text-align: center;
z-index:3;
}
#nav_wrapper #nav_left,
#nav_wrapper #logo,
#nav_wrapper #nav_right{
display: inline-block;
position: relative;
vertical-align: top;
}
#nav_wrapper #nav_left,
#nav_wrapper #nav_right{
list-style-type: none;
height:inherit;
line-height:inherit;
width:auto;
width: calc((100% - 400px) / 2);
}
#nav_wrapper #nav_left{
text-align: right;
}
#nav_wrapper #nav_right{
text-align: left;
}
#nav_wrapper #nav_left li,
#nav_wrapper #nav_right li{
display: inline-block;
height:inherit;
line-height:inherit;
}
#nav_wrapper #nav_left li a,
#nav_wrapper #nav_right li a{
font-size:16px;
text-transform: uppercase;
font-weight:300;
color:#585858;
padding:0 15px;
text-decoration: none;
height:inherit;
line-height:inherit;
display: block;
box-sizing: border-box;
border-bottom:8px solid transparent;
transition:all .3s;
}
#nav_wrapper #nav_left li a:hover{
border-color:#5f98b6;
}
#nav_wrapper #nav_right li a:hover{
border-color:#7caa74;
}
#nav_wrapper #logo{
height:auto;
margin:-42px 0 0 0;
width:387px;
}
#nav_wrapper .mobile_nav {
display: none;
position: absolute;
left:10px;
top:10px;
height:50px;
width:50px;
transition: all .3s ease;
border:1px solid #e8e8e8;
box-sizing: border-box;
cursor: pointer;
}
#nav_wrapper .mobile_nav:before {
display: block;
position: absolute;
top:-10px;
font-size:25px;
left:0;
right:0;
margin:auto;
content:'\f0c9';
font-family: FontAwesome;
color:#7caa74
}
#nav_wrapper ul.language_picker {
background-color: white;
display: block;
position: absolute;
right:50px;
top:30px;
padding: 0;
height:auto;
max-height: 50px;
overflow: hidden;
transition: all .3s ease;
border:1px solid #e8e8e8;
box-sizing: border-box;
cursor: pointer;
}
#nav_wrapper ul.language_picker:hover {
max-height: 200px;
}
#nav_wrapper ul.language_picker:hover li,
#nav_wrapper ul.language_picker li.active {
height:50px;
border-bottom:1px solid #e8e8e8;
}
#nav_wrapper ul.language_picker:hover li.active {
background:  #e8e8e8;
}
#nav_wrapper ul.language_picker li {
display: block;
position: relative;
vertical-align: top;
height:0px;
width:50px;
line-height: 50px;
box-sizing: border-box;
overflow: hidden;
}
#nav_wrapper ul.language_picker li a{
display: block;
height:50px;
width:50px;
}
#nav_wrapper ul.language_picker li:hover {
background:  #e8e8e8;
}
#nav_wrapper ul.language_picker li img{
height: 20px;
display: block;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}  #content{
display: block;
position: relative;
z-index:2;
width:100%;
background:#f5f5f5;
box-sizing: border-box;
}
#content.no_z{
z-index:inherit;
}
#content #intro{
display: block;
width:100%;
height:auto;
width:95%;
max-width:700px;
position: relative;
margin:0 auto;
padding:100px 0;
text-align: center;
}
#content #intro .fa{
font-size:70px;
color:#363636;
}
#content #intro h1{
margin:25px auto;
}
#content #intro h1:after{
margin-left:auto;
margin-right:auto;
}
#grid{
display: block;
position: relative;
width:100%;
font-size:0;
}
#grid #block{
display: inline-block;
vertical-align: top;
box-sizing: border-box;
min-height:200px;
padding:20px;
position: relative;
}
#grid #block.no_min_height{
min-height:0;
}
#grid #block #header_img{
display: block;
position: relative;
overflow: hidden;
width:100%;
height:200px;
margin-bottom:20px;
}
#grid #block #header_img img{
display: block;
position: absolute;
width:100%;
height:auto;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
#grid #block.nopad{
padding:0;
}
#grid #block.notoppad{
padding-top:0;
}
#grid #block.nobottompad{
padding-bottom:0;
}
#grid #block.topmargin{
margin-top:20px;
}
#grid #block.doublebottommargin{
margin-bottom:40px;
}
#grid #block.shadow{
box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.57);
}
#grid .full{
width:100%;
}
#grid .half{
width:50%;
}
#grid .third{
width:33%;
width: calc(100% / 3);
}
#grid .two_third{
width:66%;
width: calc(100% / 3 * 2);
}
#grid .fourth{
width:25%;
}
#grid .three_fourth{
width:75%;
}
#grid .fifth{
width:20%;
}
#grid .two_fifth{
width:40%;
}
#grid .three_fifth{
width:60%;
}
.blue{
background:#5f98b6;
}
.green{
background:#7caa74;
}
.white{
background:white;
}
.blue h1,
.green h1,
.blue p,
.green p,
.blue ul li,
.green  ul li{
color:white !important
}
.blue h1:after,
.green h1:after{
background:white !important
}
.blue p,
.green p,
.blue ul li,
.green  ul li{
font-weight: 300 !important
}
#content ul#appartment_list{
display: block;
width:100%;
height:auto;
list-style-type: none;
font-size: 0;
}
#content ul#appartment_list #img{
display: inline-block;
position: relative;
width:50%;
height:0;
padding-bottom:50%;
overflow: hidden;
}
#content ul#appartment_list #img:hover img{
height:106%;
top:-3%;
left:-3%;
}
#content ul#appartment_list #img img{
display: block;
position: absolute;
width:auto;
height:100%;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
transition: all .3s;
}
#content  a.button.more{
margin:20px auto 0 auto;
width:100%;
}
#content ul#review_list{
display: block;
width:100%;
height:auto;
list-style-type: none;
}
#content ul#review_list li{
display: block;
width:100%;
height:110px;
clear:both;
padding:20px 0;
}
#content ul#review_list li:before{
display: none;
}
#content ul#review_list li #img{
display: inline-block;
float:left;
width:110px;
height:110px;
margin-right:30px;
border-radius:60px;
}
#content ul#review_list li #img img{
display: block;
position: absolute;
min-width:100%;
width:auto;
min-height:100%;
height:auto;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
transition: all .3s;
}
#content ul#review_list li #review{
display: inline-block;
float:left;
width:auto;
width:calc(100% - 140px);
height:100%;
}
#content ul#review_list li #review .stars{
display: block;
width:100%;
height:40px;
line-height:40px;
font-size:18px;
}
.stars:before,
.stars.zero:before{
color:#ddcc02;
display: inline;
font-family: FontAwesome;
font-size:inherit;
letter-spacing:6px;
content:'\f006\f006\f006\f006\f006';
}
.stars.half:before{
content:'\f123\f006\f006\f006\f006';
}
.stars.one:before{
content:'\f005\f006\f006\f006\f006';
}
.stars.one_half:before{
content:'\f005\f123\f006\f006\f006';
}
.stars.two:before{
content:'\f005\f005\f006\f006\f006';
}
.stars.two_half:before{
content:'\f005\f005\f123\f006\f006';
}
.stars.three:before{
content:'\f005\f005\f005\f006\f006';
}
.stars.three_half:before{
content:'\f005\f005\f005\f123\f006';
}
.stars.four:before{
content:'\f005\f005\f005\f005\f006';
}
.stars.four_half:before{
content:'\f005\f005\f005\f005\f123';
}
.stars.five:before{
content:'\f005\f005\f005\f005\f005';
}
#content ul#review_list li #review .quote{
display: block;
width:100%;
height:70px;
font-size:18px;
font-weight: 100;
font-style: italic;
color:white;
}
#full_appartment_list{
width:1400px;
max-width:95%;
margin:0 auto;
font-size:0;
padding-bottom:100px;
}
#full_appartment_list li{
display: inline-block;
vertical-align: top;
white-space: normal;
width: 22%;
height: auto;
overflow: hidden;
margin: 2% 4% 2% 0;
box-sizing: border-box;
list-style-type: none;
font-size: 0;
box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.57);
background: white;
}
#full_appartment_list li:nth-child(4n){
margin-right:0;
}
#full_appartment_list li a.img{
border:none;
}
#full_appartment_list li #img{
display: block;
width:100%;
height:0;
padding-bottom:60%;
overflow: hidden;
position: relative;
}
#full_appartment_list li #img img{
display: block;
position: absolute;
width:100%;
height:auto;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
transition: all .3s;
}
#full_appartment_list li:hover #img img{
width:106%;
left:-3%;
}
#full_appartment_list li a.button{
display: inline-block;
box-sizing: border-box;
padding:15px 0;
font-size:14px;
}
#full_appartment_list li a.button.info{
width:100%; 
background:#5f98b6;
float:left;
}
#full_appartment_list li a.button.info:hover{
background:#3c84aa;
}
#full_appartment_list li a.button.order{
width:40%;
background:#7caa74;
float:right;
}
#full_appartment_list li a.button.order:hover{
background:#507c49;
}
#full_appartment_list li #details{
display: block;
height:180px;
box-sizing: border-box;
padding:10px;
position: relative;
text-align: center;
}
#full_appartment_list li #details:before{
width: 0px;
height: 0px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -16px;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 20px solid #fff;
content:'-';
font-size:0;
z-index:2;
}
#full_appartment_list li #details span.title{
display: block;
font-size:17px;
line-height:20px;
margin:10px 0 15px 0;
text-transform: uppercase;
color:black;
}
#full_appartment_list li #details span.specifics{
display: block;
font-size:14px;
color:#676767;
font-style: italic;
}
#full_appartment_list li #details span.price{
display: block;
position: absolute;
text-align: center;
width:100%;
bottom:30px;
line-height:27px;
}
#full_appartment_list li #details span.price .amount{
font-size:23px;
color:#7caa74;
font-weight: 600;
}
#full_appartment_list li #details span.price .amount:before{
display: inline;
font-family: FontAwesome;
font-size:inherit;
letter-spacing:6px;
content:'\f153';
}
#full_appartment_list li #details span.price .text{
display: inline;
font-size:12px;
color:#8d8d8d;
font-style: italic;
margin:0 8px;
}
#single_appartement,
#wrapper{
display: block;
width:1500px;
max-width:100%;
margin: 0 auto;
height:auto;
padding:100px 0;
}
#wrapper{
padding:50px 0 100px 0;
}
#single_appartement #appartement_slider{
display: block;
width:100%;
height:auto;
margin-bottom:25px;
}
#single_appartement #appartement_slider.fullscreen{
position: fixed;
display: none;
width:90%;
max-width:130vh;
height:90%;
max-height:80vw;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
z-index:5;
}
#single_appartement #appartement_slider #main_img_wrap{
display: block;
position: relative;
width:100%;
height:0;
padding-bottom:80%;
overflow:hidden;
}
#single_appartement #appartement_slider #main_img_wrap .title{    
display: block;
background: #7caa74;
color: white;
position: absolute;
top: 0;
left: 0;
padding: 0.2em 0.5em;
z-index: 3;
font-size: 1.2rem;
font-weight: 500;
}
#single_appartement #appartement_slider.fullscreen #main_img_wrap{
height:80%;
padding-bottom:0;
}
#single_appartement #appartement_slider #main_img_wrap.fullscreen img{
min-height:0px;
}
#single_appartement #appartement_slider #main_img_wrap img{
display: block;
position: absolute;
width:100%;
height:auto;
min-height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
cursor:pointer;
}
#single_appartement #appartement_slider #thumbs{
display: block;
position: relative;
width:100%;
height:140px;
overflow: hidden;
margin-top:10px;
white-space: nowrap;
font-size: 0;
overflow-x: scroll;
}
#single_appartement #appartement_slider #thumbs::-webkit-scrollbar {
height:0px; 
background: transparent; 
}
#single_appartement #appartement_slider #thumbs #img_wrap{
display: inline-block;
position: relative;
width:140px;
height:140px;
margin-right:10px;
cursor:pointer;
overflow: hidden;
}
#single_appartement #appartement_slider #thumbs #img_wrap img{
display: block;
position: absolute;
width:100%;
height:auto;
min-height:100%;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#single_appartement #appartement_slider #thumbs #img_wrap:last-child{
margin-right:0px;
}
#single_appartement ul.accommodation_prices li:before{
display: none;
}
#single_appartement ul.accommodation_prices li .title{
display:inline-block;
vertical-align: bottom;
width:170px;
}
#single_appartement ul.accommodation_prices li .price{
display:inline-block;
vertical-align: bottom;
width:auto;
font-style: italic;
}
#single_appartement ul.accommodation_prices li .price:before{
display: inline;
font-size:inherit;
letter-spacing:6px;
content:'\20AC';
}
#fullscreen_overlay{
display: none;
width:100%;
height:100%;
position: fixed;
left:0;
top:0;
right:0;
bottom:0;
background:rgba(0, 0, 0, 0.92);
z-index:4;
pointer-events: none;
}
#fullscreen_overlay #close{
display: block;
position: absolute;
width:50px;
height:50px;
line-height:50px;
top:10px;
right:10px;
font-family: FontAwesome;
font-size:30px;
text-align: center;
background:#7caa74;
cursor: pointer;
pointer-events:all;
}  #footer{
display: block;
position: relative;
z-index:2;
width:100%;
height:auto;
overflow: hidden;
background:white;
}
#footer #grid #block{
min-height:1px;
}
#footer a.button{
margin:10px 0;
padding:15px 10px;
font-size:16px;
box-sizing: border-box;
width:100%;
}
#footer img.logo_invert{
display: block;
margin:50px auto;
width:300px;
}
#footer p.adress_line{
display: block;
margin:10px auto;
text-align: center;
font-size: 0;
}
#footer p.adress_line .adress_item{
display: inline-block;
vertical-align: top;
font-size:16px;
font-weight: 300;
text-transform: uppercase;
}
#footer p.adress_line .adress_item:not(:last-child):after{
display: inline-block;
vertical-align: top;
margin:0 10px;
content:'-';
}  #activities_list{
width:1400px;
max-width:95%;
margin:0 auto;
font-size:0;
padding-bottom:100px;
}
#activities_list li{
display: inline-block;
vertical-align: top;
white-space: normal;
width: 47%;
height: auto;
overflow: hidden;
margin: 1% 3% 2% 0;
box-sizing: border-box;
list-style-type: none;
font-size: 0;
box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.57);
background: white;
}
#activities_list li:nth-child(2n){
margin-right:0;
}
#activities_list li a.img{
border:none;
}
#activities_list li #img{
display: block;
width:100%;
height:0;
padding-bottom:40%;
overflow: hidden;
position: relative;
}
#activities_list li #img img{
display: block;
position: absolute;
width:100%;
height:auto;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
transition: all .3s;
}
#activities_list li:hover #img img{
width:106%;
left:-3%;
}
#activities_list li a.button{
display: inline-block;
box-sizing: border-box;
padding:15px 0;
font-size:14px;
}
#activities_list li a.button.info{
width:200px; 
background:#5f98b6;
float:right;
}
#activities_list li a.button.info:hover{
background:#3c84aa;
}
#activities_list li #details{
display: block;
height:180px;
box-sizing: border-box;
padding:10px;
position: relative;
text-align: center;
}
#activities_list li #details:before{
width: 0px;
height: 0px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -16px;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 20px solid #fff;
content:'-';
font-size:0;
z-index:2;
}
#activities_list li #details span.title{
display: block;
font-size:17px;
line-height:20px;
margin:10px 0 15px 0;
text-transform: uppercase;
color:black;
}
#activities_list li #details span.excerpt{
display: block;
font-size:14px;
color:#676767;
font-style: italic;
} @media only screen and (max-width: 1300px) {
#nav_wrapper #nav_left li a,
#nav_wrapper #nav_right li a{
font-size:14px;
padding:0 10px;
}
}
@media only screen and (max-width: 1150px) {
#full_appartment_list li,
#full_appartment_list li:nth-child(4n){
width: 32%;
margin: 2% 2% 2% 0;
}
#full_appartment_list li:nth-child(3n){
margin-right:0;
}
#nav_wrapper{
height:90px;
line-height:90px;
}
#nav_wrapper ul.language_picker {
top:20px;
}
#nav_wrapper #nav_left,
#nav_wrapper #nav_right{
width: calc((100% - 350px) / 2);
}
#nav_wrapper #logo{
width:335px;
}
}
@media only screen and (max-width: 1100px) {   
#nav_wrapper{
height:70px;
line-height:70px;
}
#nav_wrapper ul.language_picker {
top:10px;
right:10px;
}
#nav_wrapper #nav_left,
#nav_wrapper #nav_right{
width: calc((100% - 280px) / 2);
}
#nav_wrapper #logo{
width:270px;
}
}
@media only screen and (max-width: 1040px) {
#nav_wrapper #logo{
top: 0px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
display: block;
position: absolute;
}
#nav_wrapper .mobile_nav {
display: block;
}
#nav_wrapper #nav_left,
#nav_wrapper #nav_right{
float:none;
clear: both;
background:white;
height:auto;
width:100%;
text-align: center;
display: none;
}
#nav_wrapper #nav_left.open,
#nav_wrapper #nav_right.open{
display: block;
}
#nav_wrapper #nav_left li,
#nav_wrapper #nav_right li{
display: block;
float:none;
clear: both;
width:100%;
padding:0;
height:auto;
}
#nav_wrapper #nav_left{
margin-top:70px;
}
}
@media only screen and (max-width: 950px) {   
#nav_wrapper #logo{
}
}
@media only screen and (max-width: 900px) {
#full_appartment_list li,
#full_appartment_list li:nth-child(4n),
#full_appartment_list li:nth-child(3n){
width: 48%;
margin: 2% 2% 2% 0;
}
#full_appartment_list li:nth-child(2n){
margin-right:0;
}
}
@media only screen and (max-width: 850px) {
#grid .full,
#grid .half,
#grid .third,
#grid .two_third,
#grid .fourth,
#grid .three_fourth,
#grid .fifth,
#grid .two_fifth,
#grid .three_fifth{
width:100%;
}
#grid #block{
min-height:0;
}
#header #overlay{
left:0;
right:0;
text-align: center;
}
}
@media only screen and (max-width: 800px) {
#activities_list li,
#activities_list li:nth-child(2n){
display: block;
width: 100%;
margin-right:0;
margin-bottom:20px;
}
#activities_list li #img{
padding-bottom:60%;
}
#activities_list li #details{
height:auto;
padding-bottom:40px;
}
}
@media only screen and (max-width: 700px) {
#full_appartment_list li,
#full_appartment_list li:nth-child(4n),
#full_appartment_list li:nth-child(3n),
#full_appartment_list li:nth-child(2n){
width: 100%;
margin: 2% 0 2% 0;
}
}
@media only screen and (max-width: 420px) {
#nav_wrapper #logo{
width:220px;
margin-top:-20px;
}
}
@media only screen and (max-width: 350px) {
#nav_wrapper #logo{
width:150px;
margin-top:0;
}
}