/**/
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/*===========================================================================================================================================================
This stylesheet is specific to the redesigned Hotel11 landing page. It is used in Hotel/HotelAPIs11.
===========================================================================================================================================================*/
/*==Home Page General Styles==*/
:root
{
--Brand: #4E6659;
--contrastColor100: #0A121A;
--brandColor80: #00A3AD;
--brandColor20: #FDFAF5;
--ContrastColor90: #464648;
--contrastColor70: #6F6F71;
--primary200: #F7E4CB;
--promoColor-90: #FF5E6F;
--link: #296BBE;
--linkHover: #1F589D;
--brandSand40: #FCF4EA;
--primary50: #FDF8F2;
}
body
{
font-family: Arial;
line-height: 1.5em;
margin: 0px;
}
h1.hotelhome
{
font-weight: 400;
color: #000000;
font-family: Impact, Arial, sans-serif;
text-transform: uppercase;
font-size: 2.75em;
border-bottom: none;
margin-bottom: 15px;
line-height: 1.1;
margin-top: 20px;
}
h2.hotelhome
{
font-size: 2.5em;
color: var(--primary200);
text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7);
/* Horizontal offset, vertical offset, blur radius, color with opacity */
}
p.hotelhome
{
color: var(--ContrastColor90);
line-height: 1.2em;
margin-bottom: 8px;
margin-top: 8px;
}
/* body
{
font-family: Arial;
line-height: 1.5em;
background-color: #ffffff;
}
h1
{
font-size: 2.75em;
color: var(--contrastColor100);
line-height: 1em;
}
h2
{
font-size: 1.6785em;
color: var(--contrastColor100);
}
p
{
margin-bottom: 8px;
margin-top: 8px;
color: var(--contrastColor100);
} */
.center
{
position: relative;
margin-right: auto;
margin-left: auto;
float: none !important;
text-align: center;
}
.off-canvas-content .main-section > .outer-row
{
max-width: 100%;
padding: 0;
}
/*==Mad Cap proxy/editor assigned styles==*/
MadCap|searchBarProxy
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
float: none;
width: 50%;
}
MadCap|topicToolbarProxy
{
float: none;
}
MadCap|menuProxy.menu1
{
mc-toc-depth: 1;
mc-context-sensitive: True;
}
MadCap|menuProxy.menu2
{
mc-toc-depth: 1;
mc-context-sensitive: True;
}
html.home-page
{
mc-community-features: disabled;
}
/*==Responsive Header Styles==*/
#contentBody > .responsive-header
{
background-color: transparent;
}
/*==Home Page Hero Section==*/
div.topic-hero /*This is the first Hero/Banner on the Home Page - To replace the banner image with your own, change background-image property*/
{
height: 500px;
padding-bottom: 150px;
padding-top: 15px;
background-color: #fff;
background-size: cover;
background-repeat: no-repeat;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center 0;
background-image: url('../Images/heroes/GettyImages-chairs4.jpeg');
}
div.bodyText
{
margin: 0px 50px;
}
div.cta /*Call to action button on the Home Page*/
{
color: var(--brandSand40);
background-color: #fff;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 14px 20px;
width: 200px;
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
margin-top: 50px;
}
div.cta:hover /*When hovering over the CTA button the following properties apply*/
{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transform: scale(1.01);
}
a.cta:link
{
color: var(--brandSand40);
text-decoration: none;
}
a.cta:visited
{
color: var(--brandSand40);
text-decoration: none;
}
/*==Search bar elements==*/
.search-field /*The box-shadow property is applied to style to provide shadow on the search bar*/
{
box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
div.search-container
{
margin-top: -36px;
margin-bottom: 100px;
}
/*== Home tile section copied from APILandingStyles.css */
div.home-tiles-container
{
padding-top: 20px;
padding-bottom: 60px;
}
div.home-tiles /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
mc-grid-row: true;
margin-right: auto;
margin-top: 20px;
}
div.home-tiles::before
{
content: ' ';
display: table;
}
div.home-tiles::after
{
content: ' ';
display: table;
clear: both;
}
div.home-tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--primary50);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
/*Adds transition animation when switching between screen sizes*/
padding-top: 20px;
padding-bottom: 20px;
overflow: hidden;
padding-left: 15px;
padding-right: 15px;
height: 300px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
div.home-tiles > div:hover /*When hovering over a home-tile, these properties apply*/
{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
div.home-tiles > div:nth-child(1)
{
width: 20%;
}
div.home-tiles > div:nth-child(2)
{
width: 20%;
margin-left: 2%;
}
div.home-tiles > div:nth-child(3)
{
width: 20%;
margin-left: 2%;
}
div.home-tiles > div:nth-child(4)
{
width: 20%;
margin-left: 2%;
}
/*=Elements for text contained within each home-tile=*/
p.tile-title
{
text-align: center;
font-size: 18px;
font-weight: bold;
color: #c0c0c0;
}
p.tile-subtitle
{
text-align: center;
color: #ffffff;
}
p.tile-content
{
color: var(--TPBlack);
font-size: 0.9em;
text-align: left;
}
div.home-tiles a /*Complex Selector: Links within the home tiles will have the following properties*/
{
text-decoration: none;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
color: var(--link);
}
div.home-tiles a:hover /*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
color: var(--linkHover);
font-weight: bold;
}
/*==Home Tiles section - Original to Balboa==*/
/*
div.home-tiles
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
margin-top: 1%;
margin-bottom: 1%;
}
div.home-tiles::before
{
content: ' ';
display: table;
}
div.home-tiles::after
{
content: ' ';
display: table;
clear: both;
}
div.home-tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 60px 10px;
overflow: hidden;
border: 1px solid var(--brandSand40);
}
div.home-tiles > div:hover
{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
div.home-tiles > div:nth-child(1)
{
width: 16.667%;
margin-left: 24%;
}
div.home-tiles > div:nth-child(2)
{
width: 16.667%;
margin-left: 1%;
}
div.home-tiles > div:nth-child(3)
{
width: 16.667%;
margin-left: 1%;
}
p.tile-title
{
text-align: center;
color: var(--Brand);
font-size: 1.4em;
}
p.tile-content
{
text-align: center;
color: var(--Brand);
font-size: 0.8em;
}
p.tile-items
{
color: var(--Brand);
font-size: 0.7em;
text-align: center;
}
div.home-tiles a
{
text-decoration: none;
color: var(--contrastColor100);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
div.home-tiles a:hover
{
color: var(--Brand);
}
*/
div.info-container
{
margin-left: auto;
margin-top: 100px;
margin-right: auto;
padding-bottom: 75px;
padding-top: 100px;
box-shadow: inset -1px 1px 17px 0px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
color: var(--Brand);
background-color: var(--contrastColor100);
background-attachment: fixed;
background-position: center 0;
background-image: url('../Images/Assets/HeroImages/HeroImage-2.jpg');
background-size: cover;
background-repeat: no-repeat;
}
div.info-section
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
}
div.info-section::before
{
content: ' ';
display: table;
}
div.info-section::after
{
content: ' ';
display: table;
clear: both;
}
div.info-section > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.info-section > div:nth-child(1)
{
width: 16.667%;
margin-left: 16.667%;
}
div.info-section > div:nth-child(2)
{
width: 16.667%;
margin-left: 6%;
}
div.info-section > div:nth-child(3) /*Div that contains "Tips"*/
{
width: 33.333%;
margin-left: 5%;
}
div.info-container p /*Complex Selector: Any that is contained within div.info-container will have the following properties*/
{
color: var(--Brand);
}
/*=Elements for content contained within each info section=*/
p.info-title
{
font-size: 2em;
line-height: 1em;
}
p.info-content
{
font-size: 0.8em;
}
p.tip /*Paragraph style used for the Tips */
{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: url('../Images/Assets/Icons/MainIcons/Tips-white.png');
background-position: 15px center;
background-repeat: no-repeat;
border: solid 1px var(--Brand);
border-radius: 6px;
line-height: 1em;
overflow: hidden;
padding: 15px 0px 15px 60px;
text-align: left;
margin: 5px 30px;
}
/*==Home Page Footer Section==*/
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
div.footer a /*Complex Selector: Any anchor (links) tags that are within div.footer will have the following properties */
{
text-decoration: none;
color: var(--Light);
}
div.footer > div.outer-row
{
line-height: 30px;
padding: 0;
}
div.home-master-page-footer /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
width: 55%;
}
div.home-master-page-footer::before
{
content: ' ';
display: table;
}
div.home-master-page-footer::after
{
content: ' ';
display: table;
clear: both;
}
div.home-master-page-footer > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 33.333%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 33.333%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 33.333%;
margin-left: 0%;
}
div.footer p /*Complex Selector: Any
that is contained within div.footer will have the following properties*/
{
color: var(--contrastColor100);
font-size: 0.8em;
}
/*div.logo-company-name
{
background-repeat: no-repeat;
background-image: var(--LogoImage);
padding-top: 70px;
background-position: 50% 15%;
} */
/*This is used as a fix for an issue in Chrome regarding the parallax effect and foundation*/
.off-canvas-content,
.off-canvas-wrapper
{
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/
@media only screen and (max-device-width: 1279px)
{
#content-section .right-section,
#content-section .left-section
{
padding: 0;
}
p.info-title
{
font-size: 2em;
}
p.info-content
{
font-size: 1em;
}
div.footer
{
padding-top: 20px;
padding-bottom: 20px;
}
div.home-master-page-footer > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
}
div.home-tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
/*Adds transition animation when switching between screen sizes*/
-moz-border-radius: 20x;
-webkit-border-radius: 20px;
border-radius: 20px;
border: 1px solid var(--Light);
padding: 60px 10px;
}
div.home-tiles > div:nth-child(1)
{
width: 32%;
margin-left: 1%;
}
div.home-tiles > div:nth-child(2)
{
width: 32%;
margin-left: 1%;
}
div.home-tiles > div:nth-child(3)
{
width: 32%;
margin-left: 1%;
}
div.info-section > div
{
text-align: center;
}
div.info-section > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-bottom: 10%;
margin-top: 5%;
}
div.info-section > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-bottom: 5%;
}
div.info-section > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
}
@media only screen and (max-device-width: 767px)
{
#content-section
{
padding-top: 30px;
padding-bottom: 30px;
}
div.search-container
{
margin-bottom: 50px;
}
p.tile-title
{
font-size: 1.2em;
}
p.info-title
{
font-size: 2em;
}
p.info-content
{
font-size: 1em;
}
div.home-tiles > div
{
margin-top: 2%;
}
div.home-tiles > div:nth-child(1)
{
width: 90%;
margin-left: 5%;
}
div.home-tiles > div:nth-child(2)
{
width: 90%;
margin-left: 5%;
}
div.home-tiles > div:nth-child(3)
{
width: 90%;
margin-left: 5%;
}
div.info-section > div
{
text-align: center;
padding: 0 20px;
}
div.info-section > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-bottom: 10%;
margin-top: 5%;
}
div.info-section > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-bottom: 5%;
}
div.info-section > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
div.home-master-page-footer > div /* Adds separators to the footer items when in mobile layout */
{
border-bottom: 1px solid var(--Light);
}
div.home-master-page-footer > div:nth-child(1)
{
width: 100%;
}
div.home-master-page-footer > div:nth-child(2)
{
width: 100%;
}
div.home-master-page-footer > div:nth-child(3)
{
width: 100%;
}
}