@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,500i,700,700i|Montserrat:400,400i,700,700i,900,900i');


/*
----Colours----
	#022640
	#20458B
	#b22f41
	#827E7C

*/


/* Animations */

@keyframes arrow {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 280px;
    }
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move {
    0% {
        transform: translateY(30%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes logo {
    0% {
        transform: translateX(-5%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes phone {
    0% {
        transform: translateX(5%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoom {
    0% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

body {
    animation: fade 0.75s;
}

.top-content p,
.inner-content p {
    animation: move 1s;
}

.logo-header {
    animation: logo 1s;
}

.call-us-header {
    animation: phone 1s;
}

.sitemap {
    animation: phone 1s;
}

.header-image h1 {
    animation: logo 1s;
}

.header-image {
    animation: zoom 1s;
}

.logo-mobile {
    position: absolute;
    top: 10px;
    left: 5px;
}

.logo-mobile img {
    width: 90px;
}

.gdpr label {
    color: #FFF;
    font-size: 0.8em;
    padding-bottom: 0;
    display: inline-block;
    font-weight: 500;
}

.gdpr label a {
    color: inherit;
    text-decoration: underline;
}


/* Animations End */


/* Global */

body {
    margin: 0;
    background: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    color: #20458B;
    font-weight: 500;
    padding: 0;
}

.call-to-action iframe,
.contact-form iframe {
    opacity: 0.92;
}

strong {
    color: #b22f41;
}

h1 strong {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

a {
    color: #20458B;
    transition: color;
    transition-duration: 0.3s;
}

a:hover {
    color: #3294D1;
}

a strong {
    color: inherit !important;
}

hr {
    border: none;
    border-top: 4px solid #D3D8E5;
    margin: 30px -30px 40px;
}

label {
    color: #20458B;
}

.form-control {
    border-radius: 3px;
    border: none;
    box-shadow: none;
    color: #1f458b;
}

.mcspb-1 {
    overflow: hidden;
    margin-bottom: 0;
    position: absolute;
    left: -10000px
}

.help-block {
    color: #ffc6e8 !important;
    font-size: 0.85em;
}

input::placeholder {
    color: #999 !important;
}

.important {
    font-size: 1.3em;
}


/** Header **/

.header-top {
    padding: 20px 0 15px;
    background: linear-gradient(to right, rgb(31, 69, 139) -40%, rgb(20, 43, 93) 100%);
}

.logo-header img {
    width: 240px;
    margin-left: 15px;
    transition: all 0.1s;
}

.logo-header img:hover {
    transform: scale(1.05);
    transition: all 0.1s;
}

.uk-map-header img {
    height: 94px;
    width: auto;
}

.call-us-header {
    color: #20458B;
    font-weight: 500;
    text-align: center;
    font-size: 1em;
    letter-spacing: -0.01em;
    overflow: hidden;
}

.call-us-header p {
    margin: 0;
    color: #FFF;
}

.tel-number {
    font-size: 2.3em;
    line-height: 1em;
}

.tel-number a {
    text-decoration: none;
    color: #ffffff;
}

.opening-hours {
    font-size: 0.9em;
    color: #CCC;
    font-weight: 400;
}

.office-map {
    border: none;
    margin-bottom: 30px;
}


/** Navbar **/

.navbar {
    margin: 0;
    border-radius: 0;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.navbar-inverse {
    background: #FFF;
    /* border-top: 3px solid #20458B; */
    /* border-bottom: 3px solid #20458B; */
}

.navbar-nav>li>a {
    padding: 15px 8px;
    text-transform: uppercase;
    font-size: 0.9em;
    /* text-shadow: 0 3px black; */
    letter-spacing: -0.05em;
}

.navbar-inverse .navbar-nav>li>a {
    color: #1f458b;
}

.navbar-inverse .navbar-nav>li>a:hover {
    color: #1f458b;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    color: #b22f41;
    /* color: #ffffff; */
    background: transparent;
    position: relative;
}

.navbar-inverse .navbar-nav>.active>a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;
    background: rgb(255, 255, 255, 0.9);
    height: 6px;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
    color: #ffc7e8;
    background-color: transparent;
}

.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
    background-color: rgba(0, 38, 63, 0.161);
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color: #b23573;
}

.navbar .container {
    padding: 0;
}

.navbar-nav .dropdown-menu {
    border: none;
    border-radius: 0;
    background: #FFF;
    background-size: cover;
    padding: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* border: 3px solid #20458B; */
    /* border-top: 3px solid #FFF; */
    box-shadow: 0 10px 12px rgba(0, 0, 0, .175);
}

.navbar-nav .dropdown-menu a {
    color: #1f458b;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 600;
}

.navbar-nav .dropdown-menu a:hover {
    background-color: rgba(0, 38, 63, 0.161);
    /*color: #ffc7e8;*/
    /*color: #FFFFFF;*/
    color: #1f458b !important;
}

.navbar-header {
    background: linear-gradient(to right, rgb(31, 69, 139) -40%, rgb(20, 43, 93) 100%);
}
}

/** Headers **/

.header-image {
    background: url(../img/home-pic.jpg) center -30px no-repeat;
    background-size: cover;
    height: 250px;
    border-bottom: 2px solid #ececec;
}

.header-image .col-xs-12 {
    position: relative;
    height: 250px;
}

.header-image h1 {
    color: #FFF;
    background: rgba(84, 61, 115, 0.93);
    font-size: 2.6em;
    font-weight: 400;
    letter-spacing: -0.02em;
    position: absolute;
    bottom: 20px;
    padding: 10px 30px;
}

.header-image h1 .sub {
    font-size: 85%;
    /* color: #104c89; */
}

.calculator .header-image {
    background-image: url(../img/fondo-calculator.jpg);
    background-position: center top;
}

.free-assessment .header-image {
    background-image: url(../img/fondo-free-assessment.jpg);
    background-position: center top;
}

.contact-us .header-image {
    background-image: url(../img/fondo-contact.jpg);
    background-position: center top;
}

.legal .header-image {
    background-image: url(../img/fondo-legal.jpg);
    background-position: center bottom;
}

.website-terms-of-use .header-image {
    background-image: url(../img/fondo-legal.jpg);
    background-position: center bottom;
}

.privacy-policy .header-image {
    background-image: url(../img/fondo-legal.jpg);
    background-position: center bottom;
}

.cookie-policy .header-image {
    background-image: url(../img/fondo-legal.jpg);
    background-position: center bottom;
}

.accessibility-policy .header-image {
    background-image: url(../img/fondo-legal.jpg);
    background-position: center bottom;
}

.site-map .header-image {
    background-image: url(../img/fondo-legal.jpg);
    background-position: center bottom;
}

.resorts .header-image {
    background-image: url(../img/fondo-resorts.jpg);
    background-position: center top;
}

.resorts .header-image h1 {
    background: rgba(159, 0, 80, 0.7);
    padding: 20px 30px;
}

.timeshare-claims .header-image {
    background-image: url(../img/fondo-timeshare-claims.jpg);
    background-position: center -30px;
}

.timeshare-exit .header-image {
    background-image: url(../img/fondo-timeshare-exit.jpg);
    background-position: center top;
}

.timeshare-fees .header-image {
    background-image: url(../img/fondo-timeshare-fees.jpg);
    background-position: center center;
}

.our-office .header-image {
    background-image: url(../img/fondo-our-office.jpg);
    background-position: center center;
}

.faq .header-image {
    background-image: url(../img/fondo-faq.jpg);
    background-position: center center;
}

.about-us .header-image {
    background-image: url(../img/fondo-about-us.jpg);
    background-position: center center;
}

.your-stories .header-image {
    background-image: url(../img/fondo-your-stories.jpg);
    background-position: center top;
}

.reviews .header-image {
    background-image: url(../img/fondo-reviews.jpg);
    background-position: center center;
}

.club-la-costa .header-image,
.club-la-costa-claim .header-image,
.clc-customer-comments .header-image,
.clc-customer-comments-recent .header-image {
    background-image: url(../img/resorts/clc.jpg);
    background-position: center center;
}

.resorts .header-image h1,
.resorts .header-image h1 .sub,
.resorts .header-image a {
    color: #FFF;
}

.resorts .header-image h1 strong {
    color: #ffc6e8;
    font-weight: 400;
}

.resorts .header-image a {
    text-decoration: underline;
}

.resorts .header-image a:hover {
    color: #ffc7e8;
}

.resorts .header-image h1 {
    background: rgba(20, 46, 99, 0.81);
    padding: 20px 30px;
}

.anfi .header-image {
    background-image: url(../img/resorts/anfi.jpg);
    background-position: center center;
}

.diamond-resorts .header-image {
    background-image: url(../img/resorts/diamond.jpg);
    background-position: center center;
}

.marriott .header-image {
    background-image: url(../img/resorts/marriott.jpg);
    background-position: center center;
}

.mgmpetcheyinfiniti .header-image {
    background-image: url(../img/resorts/mgm.jpg);
    background-position: center center;
}

.silverpoint .header-image {
    background-image: url(../img/resorts/silverpoint.jpg);
    background-position: center center;
}

.rci .header-image {
    background-image: url(../img/resorts/rci.jpg);
    background-position: center center;
}

.wimpen-resorts .header-image {
    background-image: url(../img/resorts/wimpen.jpg);
    background-position: center center;
}

.your-stories .header-image h1 {
    width: 44%;
}

.club-la-costa .header-image h1,
.mgmpetcheyinfiniti .header-image h1 {
    width: 52%;
}

.diamond-resorts .header-image h1 {
    width: 60%;
}

.timeshare-exit .header-image h1,
.faq .header-image h1,
.contact-us .header-image h1,
.our-office .header-image h1 {
    color: #FFF;
}


/** home call to action **/

.call-to-action {
    padding: 6rem 0;
    background: url(../img/home-pic-4.jpg) center center;
    background-size: cover;
    min-height: 442px;
    position: relative;
    overflow: hidden;
}

.call-to-action h1 {
    font-size: 2.2em;
    font-weight: 500;
    letter-spacing: -0.02em;
    width: 78%;
    margin-top: 3rem;
    line-height: 1.1em;
    animation: move 1s;
    background: #384181c9;
    color: #FFF;
    padding: 3rem 4.5rem 3rem 3rem;
    position: relative;
    text-wrap: balance;
}

.call-to-action h1 strong {
    color: #bdd5ed;
}

.call-to-action h1::after {
    content: "\f0da";
    font-family: 'FontAwesome';
    position: absolute;
    right: 4%;
    top: 39%;
    font-size: 2em;
}

.form-disclaimer {
    padding: 0 5px 10px;
    font-size: 0.8em;
    text-align: center;
}

.sidebar-resorts {
    padding: 20px;
    font-size: 0.80em;
    background: #630e49;
    color: #FFF;
    border-radius: 8px;
    margin-top: 2rem;
}

.sidebar-resorts h3 {
    margin: 0 0 15px;
    color: #ffc7e8;
    font-size: 1.6em;
}

.sidebar-resorts a {
    color: #ffc7e8 !important;
}

.info {
    padding: 24px 24px 1px;
    font-size: 0.80em;
    background: #630d49;
    color: #FFF;
    margin-bottom: 30px;
    border-radius: 8px;
}

.reviews-iframe {
    margin: 0 0 10px 10px;
}

.top-content {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 40%);
    border-top: 4px solid #ff200f;
    text-align: justify;
    padding: 50px 0 20px;
}

.top-content p {
    margin: 0 0 24px;
    line-height: 1.3em;
}

.top-content a {
    font-weight: 700;
    color: #b22f41;
}

.inner-content {
    text-align: justify;
    padding: 65px 0 60px;
}

.inner-content p {
    margin: 0 0 24px;
    line-height: 1.3em;
}

.inner-content p.text-center {
    text-align: center !important;
}

.inner-content a {
    font-weight: 700;
    color: #b22f41;
    text-decoration: underline;
}

.inner-content a:hover {
    color: #20458B;
}

.inner-content a[href^="tel:"]::before,
.top-content a[href^="tel:"]::before {
    font-family: 'FontAwesome';
    content: "\f098 \20";
}

.inner-content a[href^="tel:"] {
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    white-space: preserve nowrap;
}

.inner-content h2 {
    margin: 0 0 20px;
    font-size: 1.6em;
    color: #b22f41;
}

.inner-content h3:first-child {
    margin-top: 0;
}

.inner-content ul {
    margin-bottom: 20px;
}

.inner-content img {
    max-width: 100%;
}

h2.bigger {
    font-size: 1.6em;
    margin-bottom: 30px;
}

p.bigger {
    font-size: 1.2em;
}

.inner.contact-form {
    min-height: 387px;
}

.contact-form h2 {
    font-size: 1.3em;
    text-align: center;
    margin: 0 0 20px;
    border-bottom: 2px solid #FFF;
    padding: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: #FFF;
}

.facebook-iframe {
    margin-bottom: 30px;
}

.questions {
    font-size: 1.2em;
    letter-spacing: -0.02em;
    padding-bottom: 1em;
}

.questions p {
    margin: 0 0 18px;
}

.questions em {
    font-style: normal;
    font-weight: 700;
}

.yt-header {
    margin: 0 0 10px;
    text-align: center;
    color: #b22f41;
}

.yt-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    margin-bottom: 30px;
}

.yt-video-embed iframe {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
}

.here-to-help {
    background: #20458B;
    background-size: cover;
    color: #FFF;
    padding: 30px 30px 15px;
    font-weight: 200;
    font-size: 1.1em;
    border-radius: 8px;
}

.here-to-help h2 {
    color: #ffc7e8;
    margin: 0 0 20px;
    font-size: 1.5em;
    font-weight: 700;
}

.here-to-help img {
    margin-top: 15px;
}

.here-to-help a {
    color: #ffc7e8;
    text-decoration: none;
}

.here-to-help a:hover {
    color: #FECA23 !important;
}

div.your-stories {
    /* border-top: 6px solid #20458B; */
    background: linear-gradient(to bottom, rgb(31, 69, 139) 0%, rgb(178, 47, 65) 115%);
    background-size: cover;
    color: #FFF;
    font-weight: 400;
    padding: 35px 0;
}

div.your-stories.inner {
    background: none;
    color: inherit;
    border-top: 4px solid #EEE;
    padding-top: 25px;
}

div.your-stories h2 {
    font-size: 1.4em;
    margin: 0 0 20px;
}

div.your-stories .story {
    background: rgba(255, 255, 255, 0.2);
    padding: 1.5em;
    margin-bottom: 50px;
    border-radius: 8px;
    position: relative;
}

div.your-stories .story::after {
    font-family: Fontawesome;
    font-size: 32px;
    content: '\f04b';
    color: rgba(255, 255, 255, 0.2);
    position: absolute;
    bottom: -35px;
    right: 35px;
    transform: rotate(90deg) skewY(-45deg);
}

div.your-stories.inner .story {
    background: rgba(0, 0, 0, 0.05) url(../img/ico-client.png) no-repeat left 10px;
    margin-bottom: 20px;
    padding-left: 100px;
}

div.your-stories h3 {
    font-size: 1em;
    color: #ffc7e8;
    margin: 0 0 15px;
}

div.your-stories.inner h3 {
    color: #b22f41;
}

div.your-stories p {
    line-height: 1.3em;
    text-align: justify;
}

p.link-recent-comments {
    text-align: center !important;
}

div.your-stories .link-recent-comments strong {
    color: #FFF;
}

div.your-stories .link-recent-comments a {
    color: #ffc7e8;
}

div.your-stories .read-more {
    display: block;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    padding: 10px;
    background-color: #573d72a1 !important;
    border-radius: 10px;
    margin-left: auto;
    padding: 10px;
}

.exit-claims-advice {
    background-size: contain;
    padding: 50px 0 60px;
}

.banner {
    background: rgb(36, 68, 137);
    color: #FFF;
    padding: 30px;
    font-size: 0.95em;
    font-weight: 400;
    position: relative;
    padding-bottom: 75px;
    border-radius: 8px;
}

.banner.claims {
    background: rgb(84, 61, 115);
}

.banner.advice {
    background: rgb(123, 55, 96);
}

.banner.claims h3 {
    background-image: url(../img/ico-claims.png)
}

.banner.advice h3 {
    background-image: url(../img/ico-advice.png)
}

.banner h3 {
    margin: 0;
    padding: 0 70% 35px 0;
    color: #ffc7e8;
    font-size: 2em;
    line-height: 1.2em;
    background: url(../img/ico-exit.png) top right no-repeat;
    font-weight: 400;
}

.banner strong {
    color: #FFF;
}

a.banner-button {
    display: block;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    padding: 10px;
    background-color: #b22f41d1 !important;
    border-radius: 10px;
    border: none;
    width: 70%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -35%;
    box-sizing: border-box;
    text-decoration: none;
}

a.banner-button:hover {
    color: #ffc7e8;
    background-color: rgba(0, 38, 63, 0.6) !important;
}

ul.sitemap {
    font-weight: bold;
    list-style: none;
    padding: 0;
    width: 50%;
}

ul.sitemap li {
    margin-bottom: 5px;
    padding: 10px;
    background: rgba(19, 35, 91, 0.05);
}

ul.sitemap li li {
    background: none;
    padding: 5px 10px;
}

ul.sitemap ul {
    padding: 10px 0 0 20px;
    margin: 5px 0 0;
    list-style: none;
    border-top: 2px solid rgba(36, 61, 127, 0.35);
}

ul.sitemap a {
    color: #2c357e;
    text-decoration: none;
}

ul.sitemap a:hover {
    color: #b22f41;
    text-decoration: underline;
}

.footer {
    border-top: 6px solid #b22f41;
}

.footer-top {
    padding: 44px 0 38px;
}

.footer-bottom {
    font-size: 15px;
    padding: 15px 0 30px;
    text-align: center;
}

.footer-bottom strong {
    color: #20458B
}

.footer-bottom img {
    margin: 10px 0;
}

.copyright {
    margin-top: 5px !important;
    font-weight: 400;
}


/** NEWS **/

.content-header h1 {
    font-weight: 700;
    color: #20458B;
    font-size: 2em;
    margin-top: 50px;
    margin-bottom: 10px;
}

.news-item h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.news-item h3 {
    font-weight: 500;
    font-size: 1em;
    margin-top: 10px;
    color: #999;
}

.news-item img {
    margin-bottom: 20px;
}

.news-item .btn {
    background: url(../img/boton-amarillo.svg) left center;
    font-size: 1em;
    font-weight: bold;
    border: none;
    color: #333;
    text-decoration: none;
}

.news .inner-content {
    padding: 20px 15px 60px;
}

.news .inner-content .row {
    border-bottom: 1px solid #DDD;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.news .inner-content .row:first-of-type {
    border-bottom: none;
}

.news .inner-content .contact-form-cot .row {
    border: none;
    padding: 0;
    margin: 0;
}


/* Contact Form OA */

.contact-form-cot .step-1,
.contact-form-cot .step-2,
.contact-form-cot .step-3 {
    display: none;
}

.contact-form-cot .current {
    display: block;
}

.contact-form-cot {
    background-color: #384181c9;
    color: #FFF;
    padding: 15px;
    box-sizing: border-box;
    /* margin-bottom: 40px; */
    border-radius: 8px;
    /* border: 3px solid #ffffff; */
    /* color: #20458B; */
}

.contact-form-cot h2 {
    font-size: 1em;
    margin: -5px -15px 15px;
    padding: 7px 0 13px;
    border-bottom: 2px solid #ffffff9e;
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
}

.contact-form-cot label {
    color: #ffffffa6;
}

.checkboxes {
    margin-bottom: 10px;
}

.checkboxes label {
    font-weight: normal;
}

.checkboxes .form-group {
    margin: 0;
}

.contact-form-cot .btn-primary {
    display: block;
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    padding: 5px 0;
    background-color: #FFF;
    border-radius: 10px;
    width: 100%;
    margin: 15px auto 0;
    box-sizing: border-box;
    /* text-decoration: none; */
    /* border: 2px solid #073282; */
    transition: all 0.15s;
    color: #b22f41;
}

.contact-form-cot .btn-primary:hover {
    color: #FFFFFF;
    background-color: #b22f41;
    transition: all 0.15s;
}

label.form-check-label {
    color: #FFF;
}

.home .contact-form-disclaimer {
    display: none;
}

.contact-form-disclaimer {
    margin-top: 20px !important;
    font-size: 0.8em;
    color: #ffc7e8;
}

.contact-form-disclaimer a {
    color: #ffc7e8;
}

.contact-form-cot a:hover {
    color: #FFF;
}


/* Fixed Contact form */

.contact-form-cot.affix {
    top: 20px;
    z-index: 2;
    width: 360px;
    position: fixed !important;
}

/* Home video */

.home-video {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 1;
    transform: translateY(-50%);
}

.call-to-action .container {
    z-index: 2;
    position: relative;
}

@media only screen and (max-width: 767px) {

    .call-to-action {
        padding: 2rem 1rem;
    }

    .call-to-action h1 {
        margin: 0 0 2rem;
        font-size: 1.4em;
        width: 100%;
        padding: 1rem;
    }

    .call-to-action h1::after {
        display: none;
    }
}