:root{--primary:#eb2f64;--primary-light:#FF3366;--primary-dark:#BA265D;--Grey-light-1:#faf9f9;--Grey-light-2:#f4f2f2;--Grey-light-3:#f0eeee;--Grey-light-4:#ccc;--Grey-dark-1:#333;--Grey-dark-2:#777;--Grey-dark-3:#999;--white:#fff;--black:#000;--shadow-dark:0 2rem 5rem rgba(#000, .3);--shadow-light:0 2rem 3rem rgba(#000, .3);--border-btm:1px solid var(--Grey-light-2)}
*{margin:0;padding:0}
*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}
html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%}
@media only screen and (max-width:68.75em){
html{font-size:50%}
}
body{font-family:'Open Sans',sans-serif;font-weight:400;line-height:1.6;background-image:-webkit-gradient(linear,left top,right bottom,from(var(--primary)),to(var(--primary-dark)));background-image:linear-gradient(to right bottom,var(--primary),var(--primary-dark));background-size:cover;background-repeat:no-repeat;min-height:100vh;color:var(--Grey-dark-2)}
.container{max-width:120rem;margin:8rem auto;background-color:var(--Grey-light-2);-webkit-box-shadow:0 2rem 6rem rgba(var(--black),.3);box-shadow:0 2rem 6rem rgba(var(--black),.3);min-height:50rem}
@media only screen and (max-width:75em){
.container{margin:0;max-width:100%;width:100%}
}
.header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.4rem;height:7rem;background-color:var(--Grey-light-1);border-bottom:var(--border-btm)}
@media only screen and (max-width:31.25em){
.header{-ms-flex-wrap:wrap;flex-wrap:wrap;height:10rem;-ms-flex-line-pack:distribute;align-content:space-around}
}
.content{display:-webkit-box;display:-ms-flexbox;display:flex}
@media only screen and (max-width:56.25em){
.content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
}
.sidebar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--Grey-dark-1);-webkit-box-flex:0;-ms-flex:0 0 18%;flex:0 0 18%}
.hotel-view{background-color:var(--white)}
.detail{font-size:1.4rem;display:-webkit-box;display:-ms-flexbox;display:flex;padding:4.5rem;background-color:var(--Grey-light-1);border-bottom:1px solid var(--Grey-light-2)}
@media only screen and (max-width:56.25em){
.detail{padding:3rem}
}
@media only screen and (max-width:37.5em){
.detail{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
}
.description{background-color:var(--white);-webkit-box-shadow:0 2rem 3rem rgba(0,0,0,.1);box-shadow:0 2rem 3rem rgba(0,0,0,.1);padding:3rem;-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;margin-right:4.5rem}
@media only screen and (max-width:56.25em){
.description{padding:2rem;margin-right:3rem}
}
@media only screen and (max-width:37.5em){
.description{margin:0 0 3rem 0}
}
.user-reviews{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.logo{height:3.25rem;margin-left:2rem}
.search{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%}
@media only screen and (max-width:31.25em){
.search{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;background-color:var(--Grey-light-2)}
}
.search__input{font-family:inherit;font-size:inherit;background-color:var(--Grey-light-2);border:none;color:inherit;padding:.7rem 2rem;border-radius:10rem;width:85%;-webkit-transition:all .3s ease-in;transition:all .3s ease-in;margin-right:-3.5rem}
.search__input:focus{outline:0;width:100%;background-color:var(--Grey-light-3)}
.search__input::-webkit-input-placeholder{font-weight:100;color:var(--Grey-light-4)}
.search__input:focus+.search__button{background-color:var(--Grey-light-3)}
.search__button{border:none;background-color:var(--Grey-light-2)}
.search__button:focus{outline:0}
.search__button:active{-webkit-transform:translateY(2px);transform:translateY(2px)}
.search__icon{height:2rem;width:2rem;fill:var(--Grey-dark-3)}
.user-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}
.user-nav>*{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 2rem;cursor:pointer;height:100%}
.user-nav>:hover{background-color:var(--Grey-light-2)}
.user-nav__icon-box{position:relative}
.user-nav__icon{width:2.25rem;height:2.25rem;fill:var(--Grey-dark-2)}
.user-nav__notification{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:1.5rem;right:1.1rem;font-size:.8rem;height:1.75rem;width:1.75rem;border-radius:50%;background-color:var(--primary);color:var(--white)}
.user-nav__user-photo{height:3.75rem;border-radius:50%;margin-right:1rem}
.side-nav{font-size:1.4rem;list-style:none;margin-top:3.5rem}
@media only screen and (max-width:56.25em){
.side-nav{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0}
}
.side-nav__item{position:relative}
.side-nav__item:not(:last-child){margin-bottom:.5rem}
@media only screen and (max-width:56.25em){
.side-nav__item:not(:last-child){margin:0;-webkit-box-flex:1;-ms-flex:1;flex:1}
}
.side-nav__item::before{content:'';position:absolute;top:0;left:0;height:100%;width:3px;background-color:var(--primary);-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transition:width .4s cubic-bezier(1,0,0,1) .2s,background-color .1s,-webkit-transform .2s;transition:width .4s cubic-bezier(1,0,0,1) .2s,background-color .1s,-webkit-transform .2s;transition:transform .2s,width .4s cubic-bezier(1,0,0,1) .2s,background-color .1s;transition:transform .2s,width .4s cubic-bezier(1,0,0,1) .2s,background-color .1s,-webkit-transform .2s}
.side-nav__item--active::before,.side-nav__item:hover::before{-webkit-transform:scaleY(1);transform:scaleY(1);width:100%}
.side-nav__item:active::before{background-color:var(--primary-light)}
.side-nav__link:link,.side-nav__link:visited{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-decoration:none;color:var(--Grey-light-1);text-transform:uppercase;padding:1.5rem 3rem;position:relative;z-index:10}
@media only screen and (max-width:56.25em){
.side-nav__link:link,.side-nav__link:visited{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:2rem}
}
@media only screen and (max-width:37.5em){
.side-nav__link:link,.side-nav__link:visited{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem .5rem}
}
.side-nav__icon{width:1.75rem;height:1.75rem;margin-right:2rem;fill:currentColor}
@media only screen and (max-width:37.5em){
.side-nav__icon{margin:0 0 .7rem 0;width:1.5rem;height:1.5rem}
}
.legal{font-size:1.2rem;color:var(--Grey-light-4);text-align:center;padding:2.5rem}
@media only screen and (max-width:56.25em){
.legal{display:none}
}
.gallery{display:-webkit-box;display:-ms-flexbox;display:flex}
.gallery__photo{width:100%;display:block}
.overview{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:var(--border-btm)}
.overview__heading{font-size:2.25rem;font-weight:300;text-transform:uppercase;letter-spacing:1px;padding:1.5rem 3rem}
@media only screen and (max-width:37.5em){
.overview__heading{font-size:1.5rem;padding:1.25rem 3rem}
}
.overview__stars{margin-right:auto;display:-webkit-box;display:-ms-flexbox;display:flex}
.overview__icon-location,.overview__icon-star{width:1.75rem;height:1.75rem;fill:var(--primary)}
.overview__location{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.2rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.overview__icon-location{margin-right:.5rem}
.overview__rating{background-color:var(--primary);margin-left:3rem;color:var(--white);-ms-flex-item-align:stretch;align-self:stretch;padding:0 2.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
@media only screen and (max-width:37.5em){
.overview__rating{padding:0 1.5rem}
}
.overview__rating-average{font-size:2.25rem;font-weight:300;margin-bottom:-5px}
@media only screen and (max-width:37.5em){
.overview__rating-average{font-size:1.8rem}
}
.overview__rating-count{font-size:1.2rem;text-transform:uppercase}
@media only screen and (max-width:37.5em){
.overview__rating-count{font-size:.5rem}
}
.btn-inline{border:none;outline:0;color:var(--primary);font-size:inherit;background-color:transparent;border-bottom:1px solid currentColor;padding:2px;display:inline-block;cursor:pointer;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.btn-inline span{margin-left:3px;-webkit-transition:margin-left .2s ease-out;transition:margin-left .2s ease-out}
.btn-inline:hover{color:var(--Grey-dark-1)}
.btn-inline:hover span{margin-left:8px}
.btn-inline:focus{outline:0;border:none;-webkit-animation:pulsate 1s infinite;animation:pulsate 1s infinite}
@-webkit-keyframes pulsate{
0%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}
50%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.1);color:var(--primary)}
100%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}
}
@keyframes pulsate{
0%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}
50%{-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.1);color:var(--primary)}
100%{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:none;box-shadow:none}
}
.paragraph:not(:last-of-type){margin-bottom:2rem}
.list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:3rem 0;padding:3rem 0;border-top:var(--border-btm);border-bottom:var(--border-btm)}
.list__item{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;margin-bottom:.7rem}
.list__item::before{display:inline-block;height:1rem;width:1rem;margin-right:.7rem;content:''}
@supports ((-webkit-mask-image:url()) or (mask-image:url())){
.list__item::before{background-color:var(--primary);-webkit-mask-image:url(../img/chevron-thin-right.svg);mask-image:url(../img/chevron-thin-right.svg);-webkit-mask-size:cover;mask-size:cover;background-image:none}
}
.recommend{font-size:1.3rem;color:var(--Grey-dark-3);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.recommend__count{margin-right:auto}
.recommend__friends{display:-webkit-box;display:-ms-flexbox;display:flex}
.recommend__photo{-webkit-box-sizing:content-box;box-sizing:content-box;width:4rem;height:4rem;border-radius:50%;border:3px solid #fff}
.recommend__photo:not(:last-child){margin-right:-2rem}
.review{background-color:var(--white);-webkit-box-shadow:0 2rem 3rem rgba(0,0,0,.1);box-shadow:0 2rem 3rem rgba(0,0,0,.1);padding:3rem;margin-bottom:3.5rem;position:relative}
@media only screen and (max-width:56.25em){
.review{padding:2rem;margin-bottom:3rem}
}
.review__text{z-index:100;position:relative;margin-bottom:2rem}
.review__user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.review__photo{height:4.5rem;width:4.5rem;border-radius:50%;margin-right:1.5rem}
.review__userbox{text-align:center;margin-right:auto}
.review__user-name{color:var(--Grey-dark-2);font-weight:700;font-size:1.4rem;text-transform:uppercase;margin-bottom:.4rem}
.review__user-date{font-weight:300;font-size:1.2rem;color:var(--Grey-dark-3)}
.review__rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:2.25rem;font-weight:300;color:var(--primary)}
.review::before{content:'\201C';position:absolute;left:0rem;top:-2rem;font-size:20rem;color:var(--Grey-light-2);font-family:sans-serif;line-height:1}
.cta{padding:3.5rem 0;text-align:center}
@media only screen and (max-width:56.25em){
.cta{padding:2.5rem 0}
}
.cta__book-now{text-transform:uppercase;font-size:2rem;font-weight:300;margin-bottom:2.25rem}
.btn{font-size:1.5rem;font-weight:300;text-transform:uppercase;border-radius:100px;border:none;background-image:-webkit-gradient(linear,left top,right top,from(var(--primary-light)),to(var(--primary-dark)));background-image:linear-gradient(to right,var(--primary-light),var(--primary-dark));color:var(--white);position:relative;overflow:hidden;cursor:pointer}
.btn>*{height:100%;width:100%;display:inline-block;-webkit-transition:all .3s ease;transition:all .3s ease}
.btn__visible{padding:2rem 7.5rem}
.btn__invisible{position:absolute;padding:2rem 0;left:0;top:-100%}
.btn:hover{background-image:-webkit-gradient(linear,right top,left top,from(var(--primary-light)),to(var(--primary-dark)));background-image:linear-gradient(to left,var(--primary-light),var(--primary-dark))}
.btn:hover .btn__visible{-webkit-transform:translateY(100%);transform:translateY(100%)}
.btn:hover .btn__invisible{top:0}
.btn:focus{outline:0;-webkit-animation:pulsate 1s infinite;animation:pulsate 1s infinite}