/*==============================================================================
// File:        radisson-blu-jeddah-gflow-style.css
// Package:     Guest Flow
// Synopsis:    Radisson Blu Jeddah Guest Flow Styles
//============================================================================*/

/* Repeat IE8 small background */
.ie8 .gflow-wrapper-bg {
   background-repeat: repeat
}
/* Set IE8 background colour */
.ie8 .gflow-widgets-inner.default {
    background: none
}
/* Manage IE8 logo */
.ie8 .hotel-logo {
    background: transparent url(../img/ie8-jeddah-logo.png) no-repeat top
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/opensans-regular.eot");
    src: url("../fonts/opensans-regular.eot?#iefix") format("embedded-opentype"),
         url("../fonts/opensans-regular.woff") format("woff"),
         url("../fonts/opensans-regular.ttf") format("truetype"),
         url("../fonts/opensans-regular.svg#opensans-regular") format("svg");
    font-style: normal;
    font-weight: 200
}

body {
    background: #143A80;
    color: #FFF
}

h1, h2 {
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    margin: 0 0 5px;
    font-size: 22px;
    color: #FFF
}

h2 {
   font-size: 20px
}

h1 {
    padding-bottom: 10px
}

.gflow-wrapper {
    margin: 0 auto
}

.gflow-wrapper-bg {
    background: transparent url(../img/background.jpg) no-repeat fixed center top;
    background-size: cover;
    position: absolute;
    min-height: 100%;
    width: 100%;
    opacity: 1
}

.hotel-logo {
    background: transparent url(../img/jeddah-logo.png) no-repeat top;
    background-size: 300px;
    margin: 10px auto 10px;
    display: block;
    height: 107px;
    width: 300px
}

/*------------------------------------------------------------------------------
// Radisson Blu Jeddah Overrides
//----------------------------------------------------------------------------*/

.gflow-widgets-inner {
    padding: 10px 25px 15px;
    margin: 35px auto 30px;
    border-radius: 10px;
    max-width: 715px;
    min-width: 310px
}

.gflow-main-form {
    background: transparent;
    max-width: 100%;
    color: #FFF
}

.gflow-flavor-text p {
    color: #FFF
}

.gflow-main-form p.p1 {
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    color: #FFF
}

.gflow-content .gflow-widgets {
    color: #FFF
}

.gflow-content .gflow-widgets a {
    color: #E6B52E
}

.gflow-content .gflow-widgets a:hover,
.gflow-content .gflow-widgets a:focus {
    color: #E6B52E
}

.gflow-content .gflow-widgets img.img-responsive {
     margin: 0 auto 15px
}

.gflow-content .welcome-option.clickable {
    float: none;
    width: auto
}

.gflow-main-form button[type="submit"],
.gflow-main-form .welcome-option a,
.gflow-form button[type="submit"],
input.btn-default {
    font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
    background: #E6B52E;
    border-radius: 10px;
    max-width: 210px;
    color: #000
}

.gflow-main-form button[type="submit"]:hover,
.gflow-main-form button[type="submit"]:focus,
.gflow-main-form .welcome-option a:hover,
.gflow-main-form .welcome-option a:focus,
.gflow-form button[type="submit"]:hover,
.gflow-form button[type="submit"]:focus,
input.btn-default:hover,
input.btn-default:focus {
    text-decoration: none;
    background: #F1C242;
    outline: none;
    color: #000;
    opacity: 1
}

.gflow-main-form .welcome-option a {
    margin: 10px auto 8px
}

.gflow-content .option-descr {
    font-size: 16px
}

.back-to-options * {
    display: none
}

.gflow-content .gflow-main-form p.title {
    font-size: 22px
}

@media screen and (min-width: 100px) and (max-width: 645px) {

    .gflow-main-form {
        margin: 35px 0 30px;
        padding: 15px 5px
    }

} /* End Custom 645px to 100px */

@media screen and (min-width: 421px) and (max-width: 645px) {

    .gflow-main-form p.p1,
    h1 {
        font-size: 20px
    }

    h2 {
        font-size: 18px
    }

    .gflow-main-form button[type="submit"],
    .gflow-main-form .welcome-option a,
    .gflow-form button[type="submit"],
    input.btn-default {
        font-size: 16px
    }

} /* End Custom 645px to 421px */

@media screen and (min-width: 100px) and (max-width: 420px) {

    .gflow-main-form p.p1,
    h1 {
        font-size: 18px
    }

    h2 {
        font-size: 16px
    }

    .hotel-logo {
        background-size: contain;
        width: 100%
    }

    .ie8 .hotel-logo {
        background: transparent url(../img/ie8-jeddah-logo-mobile.png) no-repeat top;
        height: 93px;
        width: 260px
    }

    .gflow-main-form button[type="submit"],
    .gflow-main-form .welcome-option a,
    .gflow-form button[type="submit"],
    input.btn-default {
        padding: 7px 5px;
        font-size: 14px
    }

} /* End Custom 420px to 100px */