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

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

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

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

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

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

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300italic.eot'); 
  src: local(''),
       url('../fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/open-sans-v34-latin-300italic.woff2') format('woff2'),
       url('../fonts/open-sans-v34-latin-300italic.woff') format('woff'), 
       url('../fonts/open-sans-v34-latin-300italic.ttf') format('truetype'),
       url('../fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); 
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-italic.eot'); 
  src: local(''),
       url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'),
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), 
       url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), 
       url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500italic.eot'); 
  src: local(''),
       url('../fonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/open-sans-v34-latin-500italic.woff2') format('woff2'), 
       url('../fonts/open-sans-v34-latin-500italic.woff') format('woff'), 
       url('../fonts/open-sans-v34-latin-500italic.ttf') format('truetype'), 
       url('../fonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); 
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600italic.eot'); 
  src: local(''),
       url('../fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), 
       url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'), 
       url('../fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), 
       url('../fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); 
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700italic.eot'); 
  src: local(''),
       url('../fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), 
       url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), 
       url('../fonts/open-sans-v34-latin-700italic.woff') format('woff'), 
       url('../fonts/open-sans-v34-latin-700italic.ttf') format('truetype'),
       url('../fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); 
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v34-latin-800italic.eot'); 
  src: local(''),
       url('../fonts/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/open-sans-v34-latin-800italic.woff2') format('woff2'), 
       url('../fonts/open-sans-v34-latin-800italic.woff') format('woff'), 
       url('../fonts/open-sans-v34-latin-800italic.ttf') format('truetype'), 
       url('../fonts/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); 
}

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

html {
  margin:0px;
  padding:0px;
  height:100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size:15px;
	line-height: 24px;
	color: #444444;
	height:100%;
	  margin:0px;
  padding:0px;
}

a {
  color: #267481;
  text-decoration: none;
}

.clear {clear:both;}

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

.inner {
position: absolute;
width:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo {max-width:250px;margin-bottom:10px;}

h1 {font-size:24px;font-weight:400;}
h2 {font-size:20px;font-weight:400;}

.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: 899px) {
.hotels {
  float:left;
  width:31.3%;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
  margin-left:1%;
  margin-right:1%;
  margin-bottom:20px;
}
}

@media (max-width: 579px) {
.hotels {
  float:left;
  width:48%;
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.3);
  margin-left:1%;
  margin-right:1%;
  margin-bottom:10px;
}
.inner {
position: relative;
width:100%;
  top: 0%;
  left: 0%;
  transform: translate(0%, 0%);
}
}
@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;}
}