@charset "utf-8";
header {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-radius: 54px;
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0.88) 0%,rgba(255,255,255,0.78) 25.39%,rgba(255,255,255,0.00) 96.89%);
    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0.88) 0%,rgba(255,255,255,0.78) 25.39%,rgba(255,255,255,0.00) 96.89%);
    background-image: -o-linear-gradient(0deg,rgba(255,255,255,0.88) 0%,rgba(255,255,255,0.78) 25.39%,rgba(255,255,255,0.00) 96.89%);
    background-image: linear-gradient(90deg,rgba(255,255,255,0.88) 0%,rgba(255,255,255,0.78) 25.39%,rgba(255,255,255,0.00) 96.89%);
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    margin-bottom: 10px;
    border: medium solid rgba(45,102,138,1.00);


}
.container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.Logo {
    margin-left: 30px;
}

nav {
    float: right;
}
.mobile-view {
    display: none;
}



.desktop-view {
}
.desktop-view ul li {
    list-style-type: none;
    display: inline-block;
    margin-top: 18px;


}
.desktop-view ul li a {
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 30px;
    padding-right: 30px;
    text-decoration: none;
    color: #FFFFFF;
    margin-right: 9px;
    font-family: balthazar;
    font-style: normal;
    font-weight: 400;
}

.btn-blue {
    background-color: #2D668A;
    border-style: outset;
    border-width: medium;
    border-radius: 17px;
}
.hero-image {
    height: 357px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 0%;
    padding-top: 20px;
    background-image: url(images/Ripple1-3.jpg);
    background-attachment: scroll;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
}
body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;

}
main {
    min-height: 800px;
}
.intro-image-btn {
    float: left;
    clear: left;
    width: 43%;
}

footer {
    min-height: 120px;
    margin-top: 5px;
    clear: both;
}
.social-icon {
    float: left;
    padding-left: 65px;
    padding-top: 35px;
}
footer .social-icon img {
    padding-right: 17px;
}

.copyright {
    float: right;
    margin-top: 53px;
    font-family: playfair-display;
    font-style: normal;
    font-weight: 400;
}
.hero-content {
    background-color: rgba(229,229,227,0.90);
    border-radius: 54px;
    float: right;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 42px;
    margin-left: 8px;
    padding-right: 32px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    padding-left: 32px;
    width: 48%;
}
.video-title {
    background-color: rgba(229,229,227,0.90);
    border-radius: 54px;
    float: left;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 21%;
    padding-right: 32px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    padding-left: 32px;
    width: 48%;
}
.hero-content-info {
    padding-bottom: 13px;
}

.hero-portrait {
    float: left;
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
    border-radius: 54px;
    -webkit-box-shadow: 0 0;
    box-shadow: 0 0;
    width: 100%;
}
.hero-video {
    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
    float: left;
    clear: left;
    width: 100%;

}
h1 {
    text-align: center;
    font-family: cardo;
    font-style: normal;
    font-weight: 400;
    text-shadow: 0 0px;
    color: rgba(45,102,138,1.00);
    text-decoration: none;
}
.responsive-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 54px;
    border: medium solid rgba(45,102,138,1.00);
    margin-top: 280px;
}
h2 {
    text-align: center;
    font-family: cardo;
    font-style: normal;
    font-weight: 400;
}
.btn-book {
    text-align: center;
    float: left;
    margin-top: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #FFFFFF;
    font-size: 25px;
    text-decoration: none;
    padding-right: 0px;
    padding-left: 0px;
    width: 96%;
    clear: both;
}
ul {
    list-style-type: none;

}
.hero-video-home {
}






















/*tablet view*/
@media ( min-width : 401px ) and (max-width : 1000px ){
.mobile-view {
    display: block;
    float: right;
}
header .mobile-view img {
    margin-top: 5px;
}
header .Logo img {
    margin-left: -36px;
}


.desktop-view {
    display: none;
    text-align: right;
}
.expand {
    display: block;
}
.desktop-view ul li  {
    display: block;
    margin-top: 32px;
}
.hero-content {
    float: left;
    width: 92%;
    border-radius: 0px;
    margin-left: 0px;
}
.hero-portrait {
    width: 100%;
    float: none;
    display: none;
}
main .hero-portrait .responsive-image {
    padding-left: 0%;
    float: none;
    margin-top: 44px;

}
.btn-book {
    float: left;
    margin-top: 5px;
    text-align: center;
}
.div-btn-book {
    float: none;
    clear: none;







}
.hero-content-video {
    float: none;
    clear: none;
    display: none;




}


.intro-image-btn {
    float: left;
    clear: left;
    width: 100%;
    margin-bottom: 20px;
}
.mobile-video-home {
    float: left;
    clear: left;
    margin-bottom: 23px;
    margin-top: 27px;
    width: 100%;

}














}
/*phone view*/
@media (max-width: 400px){
.mobile-view {
    display: block;
    float: right;
}

.desktop-view {
    display: none;
    text-align: right;
}
.expand {
    display: block;
}
header a img {
    width: 80%;
    height: 0%;
}
.desktop-view ul li {
    display: block;
    margin-top: 32px;
}
.hero-image {
    height: 200px;
}
.hero-content {
    float: left;
    clear: both;
    width: 92%;
    border-radius: 0px;
    margin-left: -4%;
    margin-right: 4%;
}

.btn-book {
    margin-left: 22%;
}


main .hero-portrait .responsive-image {
    padding-left: 0%;
    margin-left: 62%;

}

.hero-content-info {
    text-align: center;
}
header .Logo img {
    margin-left: -35px;
}









}
.title {
    margin-top: 280px;
}
.hero-content-video {
    width: 52%;
    float: right;
    margin-top: 290px;
    margin-bottom: 50px;
}
@media (min-width:1001px){
.mobile-video-home {
    display: none;
}

}