css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif
}
body{
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 1.7;
}
.img-round {
    border-radius: 10px;
    overflow: hidden;
}
.responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
}
.btn, .btn:link, .btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-transition: all 1s;
    transition: all 1s;
    position: relative;
    font-size: 10px;
    cursor: pointer;
}
.btn-blue {
    
    color: #009de5;
    margin-top: 25px;
    border:1px solid #009de5;
}
.btn-blue:hover {
    background-color:#009de5;
    color: #ffffff;
    margin-top: 25px;
    -webkit-transition: all 1s;
    transition: all 1s;
}


/*--------------------------Mene Start--------------------*/

.main_navigation {
    background-color: #1e1c27;
    width: 100%;
    height: 60px
}

.logo {
    float: left;
    background-color: #fff;
    height: 80px;
    padding: 8px 0px 0px 14px;
}

.topnav {
    float: right;
    background-color: #1e1c27
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 15px 15px; 
    text-decoration: none;
    font-size: 18px;
    font-family: 'Roboto', sans-serif
}

.active {
    background-color: #23202e;
    color: white
}

a.icon {
    display: none
}

.dropdown {
    float: left;
    overflow: hidden
}

.dropdown .dropbtn {
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    padding: 19px 16px;
    background-color: inherit;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color: #1e1c27
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 1
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left
}

.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: #23202e;
    color: white
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black
}

.dropdown:hover .dropdown-content {
    display: block
}


@media (min-width:320px) and (max-width:640px) {
  .logo_menu {
        position: relative
    }
    .topnav a,
    .dropdown .dropbtn {
        display: none
    }
    a.icon {
        float: right;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 21px 16px;
        text-decoration: none;
        font-size: 18px
    }
    .topnav.responsive {
        position: absolute;
        width: 100%;
        top: 60px;
        z-index: 2
    }
    .icon {
        position: absolute;
        right: 0;
        top: 0
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left
    }
    .topnav.responsive .dropdown {
        float: none
    }
    .topnav.responsive .dropdown-content {
        position: relative
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left
    }
  
}



/*-----------------------Menu End-------------------*/





.ml10{margin-left: 10px;}
.main-header{
    background-image: url('img/hero.jpg');
    background-position: top;
    background-size: cover;
    height: 90vh;
    position: relative;
}
.snapshot {
    border-left: 3px solid #fff;
    margin-top: 5px;
}
.snapshot__title{
    font-size: 24px;
    font-weight: bold;
}
.snapshot span{color:rgb(4, 50, 66);font-weight: bold;}
.snapshot__subtitle{font-size: 20px;}
.main-container
{
    width: 68%;
    display: inline-block;
    padding: 0px 20px;
}
.form-section
{
    width: 28%;
    display: inline-block;
    position: relative;
}
.main-container-section{
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    border: solid 1px #eaeaea;
    margin: 20px 0px;
    padding: 25px;
}
.section-title > h2{
    font-size: 32px;
    font-family: 'Lato', sans-serif;
    color: #999999;
}
.section-content{
    margin-top: 25px;
}
.abt-img{
    display: inline-block;
    width: 38%;
    text-align: center;
}
.abt-content{
    display: inline-block;
    width: 56%;
    padding: 0px 20px;
    vertical-align: top;
}
.responsive {
    width: 100%;
    max-width: 400px;
    height: auto;
}
/**Table**/
.floor-plan .divTable{
  display: table;
  width: 100%;
  font-family:arial;
  border-collapse:collapse;
  font-size:13px;
  background:#f5f5f5;
  text-align:left;
  box-sizing:border-box;
}

.floor-plan .divTableRow {
  display: table-row;
}

.floor-plan .divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.floor-plan .divTableCell {
  border: 1px solid #fff;
  display: table-cell;
  padding: 10px 10px;
}

.floor-plan .divTableHead {
  border: 1px solid #fff;
  display: table-cell;
  padding: 10px 10px;
  font-weight:bold;
  font-size:13px;
  background:#009de5;
  color:#fff;
}

.floor-plan .divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.floor-plan .divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.floor-plan .divTableBody {
  display: table-row-group;
}

.floor-plan .divTableRow:nth-of-type(odd) { 
  background: #e0e0e0; 
}

.floor-plan a.clickToView{ 
  text-decoration:none;
  font-weight:normal;
  color:#fff !important;
  background:#464646;
  border:1px solid #464646;
  padding:3px 5px;
  border-radius:3px;
  font-size:11px;
  display:inline-block;
  margin-top:3px;
  line-height:normal;
}

.floor-plan a.clickToView:first-child{ 
  margin-top:0px;
}

.floor-plan a.clickToView:hover{ 
  background:#3c3c3c;
  border:1px solid #3c3c3c;
  text-decoration:none;
}
/**location**/
#container input {
  height: 2.5em;
  visibility: hidden;
}

#container label {
  background: #f9f9f9;  /* Fondo de las pestañas */
  border-radius: .25em .25em 0 0;
  color: #888;  /* Color del texto de las pestañas */
  cursor: pointer;
  display: block;
  float: left;
  font-size: 1em;  /* Tamaño del texto de las pestañas */
  height: 2.5em;
  line-height: 2.5em;
  margin-right: .25em;
  padding: 0 1.5em;
  text-align: center;
}

#container input:hover + label {
  background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
  color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#container input:checked + label {
  background: #f1f1f1;  /* Fondo de las pestañas al presionar */
  color: #444; /* Color de las pestañas al presionar */
  position: relative;
  z-index: 6;
  /*
  -webkit-transition: .1s;
  -moz-transition: .1s;
  -o-transition: .1s;
  -ms-transition: .1s;
  */
}

#content {
  background: #f1f1f1;  /* Fondo del contenido */
  border-radius: 0 .25em .25em .25em;
  min-height: 20em;  /* Alto del contenido */
  position: relative;
  width: 100%;
  z-index: 5;
}

#content div {
  opacity: 0;
  padding: 1.5em;
  position: absolute;
  z-index: -100;
  /*
  transition: all linear 0.1s;
  */
}

#content-1 p {
  clear: both;
  margin-bottom: 1em;
}
#content-1 p.left img {
  float: left;
  margin-right: 1em;
}
#content-1 p.last {
  margin-bottom: 0;
}

#content-2 p {
  float: left;
  width: 48.5%;
}
#content-2 p.column-right {
  margin-left: 3%;
}
#content-2 p img {
  display: block;
  margin: 0 auto 1em auto;
}
#content-3 p,
#content-3 ul {
  margin-bottom: 1em;
}
#content-3 ul {
  margin-left: 2em;
}

#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
    opacity: 1;
    z-index: 100;
    width: 95%;
}

input.visible {
  visibility: visible !important;
}
.contact-section{
    margin-top: 15px;
}
.contact-section li {
    display: inline-block;
    width: 206px;
    border-left: 1px solid rgba(102, 102, 102, 0.562);
    padding-left: 15px;
    vertical-align: top
}
.contact-section li span{
    display: block;
    font-weight: bold;
}
.contact-section li:first-child {
    padding-left: 0px;
    border-left: 0px;
}


.specifications .box {
    width: 43%;
    margin-right: 5%;
    display: inline-block;
}

.specifications .box ul .box_head {
    background: none;
    width: 100%;
    padding: 0;
    margin-bottom: 5px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}
.specifications .box ul li {
    list-style-type: none;
    margin-bottom: 10px;
    background: url(img/icon.png) no-repeat 0 5px;
    padding-left: 12px;
    display: block;
    color: #333;
    text-align: left;
}
.amenities .box {
    display: inline-block;
    font-size: 15px;
    height: 150px;
    line-height: 18px;
    margin-left: 2px;
    margin-top: 2px;
    padding: 15px 10px 10px;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 120px;
}
.amenities .box span {
    display: block;
    margin-top: 3px;
    color: #000000;
}

.amenitiesTxt {
    width: 100%;
    text-align: justify;
    color: #000;
}

.amenitiesTxt ul {
    list-style-type: disc !important;
    padding-left: 18px;
}
/**Contact Form**/
form.cstm_frm {
    width: 400px; 
    float:right; 
    background:rgba(0,182,249,1); 
    position: fixed;; 
    box-sizing: border-box; 
    padding: 10px 24px;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3); 
    top: 124px;
    right: 12px;
}
form.cstm_frm h2 {
    color:#fff; font-size:2rem; font-weight:600;
    }
    .cstm_table select {
        border: 0px solid;
        margin: 2% 5% 1% 0;
        padding: 10px 15px;
    }
.cstm_table textarea {
width: 100%;
padding: 10px 10px;
box-sizing: border-box;
}
.cstm_table button {
width: 100%;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
}
.cstm_table input[type="checkbox"] {
width: auto !important;
 margin:4px 4px !important;
}
.cstm_table {
color: #fff;
 line-height: 24px;
font-size: 16px;
}
form.cstm_frm .cstm_table {
    width:100%; float:left; margin:4px 0;
}
form.cstm_frm .cstm_table input {
width: 100%;
border: 1px solid #ccc;
padding: 10px 15px;
box-sizing: border-box;
margin: 1% 5% 1% 0;
}
form.cstm_frm .w30 {
    width:30%;
    float:left
    }	
form.cstm_frm .w70 {
    width: 70%;
    float:left
    }
    .container { width:1170px;}
    
    .p20 { padding:20px 0}


    /*Gallery css*/


.column {
    width: 31%;
    float: left;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    box-sizing: border-box;
   margin:1%;
   transition: all ease-in 0.5s;
}

.column figcaption {
    position: relative;
    left: 20px;
    z-index: 99;
    font-size: 22px;
    padding: 30px 0px;
}
.column:hover {
    transform: scale(0.9);
    transition: all ease-in 0.5s;
}
* {
  box-sizing: border-box;
}
.column img, .column {
    border-radius: 0px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 22%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}
@media screen and (max-width:768px) {
  .column {
  display:inline-block;
    width: 100%;
}
    }
    .footer {
        background-color: #6bb4b5;
        color: #000;
        float: left;
        font: 16px arial height: auto;
        margin: 20px 0 0;
        padding: 15px 0;
        text-align: center;
        width: 100%;
    }

 

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>