@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/encode-sans-v15-latin-100.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-100.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-100.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-100.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-100.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-100.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/encode-sans-v15-latin-200.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-200.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-200.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-200.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-200.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-200.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/encode-sans-v15-latin-300.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-300.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-300.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-300.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-300.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/encode-sans-v15-latin-regular.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-regular.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-regular.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-regular.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-regular.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/encode-sans-v15-latin-500.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-500.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-500.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-500.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-500.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-500.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/encode-sans-v15-latin-600.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-600.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-600.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-600.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-600.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/encode-sans-v15-latin-700.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-700.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-700.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-700.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-700.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/encode-sans-v15-latin-800.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-800.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-800.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-800.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-800.svg#EncodeSans') format('svg'); 
}

@font-face {
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/encode-sans-v15-latin-900.eot'); 
  src: local(''),
       url('../fonts/encode-sans-v15-latin-900.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/encode-sans-v15-latin-900.woff2') format('woff2'), 
       url('../fonts/encode-sans-v15-latin-900.woff') format('woff'), 
       url('../fonts/encode-sans-v15-latin-900.ttf') format('truetype'), 
       url('../fonts/encode-sans-v15-latin-900.svg#EncodeSans') format('svg'); 
}

*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  margin:0px;
  padding:0px;
}

body {
  font-size: 1.6rem;
font-family: 'Encode Sans', sans-serif;
  color: #444444;
  background-color: #ffffff;
  margin:0px;
  padding:0px;
  background-image: url(../images/bg-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: 50% 50%;
}

a {
  color: #444444;
  text-decoration: none;
}
a:hover {
  color: #000000;
  text-decoration: none;
}

.clear {clear:both;}

.outer {
  height: 100vh;
  width:100%;
  text-align:center;
  position: relative;
}

.inner {
position: absolute;
width:300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.8);
}

.logo {max-width:250px;}

.button-green {background-color:#4dbd47;border-color: #4dbd47;color:#fff;border-radius:50px;padding: 8px 25px;transition: background-color .15s ease-in, border-color .15s ease-in, color .15s ease-in;}
.button-green:hover {background-color:#2e742a;border-color: #2e742a;color:#fff;transition: background-color .15s ease-in, border-color .15s ease-in, color .15s ease-in;}
h2 {font-size:20px;font-weight:400;margin-bottom:40px;margin-top:40px;}

.hotels-outer {
  margin-top:100px;
}
.hotels {
  float:left;
  width:14.66%;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
  margin-left:1%;
  margin-right:1%;
}

.hotels img {
  max-width:100%;
  filter: grayscale(1);
  transition: 0.7s;
}


.hotels img:hover {
  filter: grayscale(0);
  transition: 0.7s;
}


@media (max-width: 579px) {
.inner {
position: relative;
width:100%;
  top: 0%;
  left: 0%;
  transform: translate(0%, 0%);
  padding:20px 0px 20px 0px;
}
}
@media (max-width: 399px) {
.hotels {
  float:left;
  width:97%;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;
}
.logo {max-width:280px;}
}

@media (max-width: 299px) {
.logo {max-width:200px;}
}