/**home page global css starts**/

.front .region-content .pane-title {
    display: none;
    /*TODO : Specified class is not defined in flourish_rem themes so we need to add BS class */
}

.front .pane-bean-color-question-block .pane-content,
.front .pane-platform-flex-camp-builder-home-page-multiple-blocks .pane-content {
    padding: 0;
}

.front #hue-selector {
    margin-top: 40px;
}

.pane-bean-picture-it-block .pane-content,
.pane-bean-office-colours-red .pane-content,
.pane-bean-office-colours-yellow .pane-content {
    padding: 10px 20px;
}

.front .panels-ipe-portlet-wrapper,
.front .panel-pane {
    clear: both;
}

.front .pane-content {
    padding: 10px 10px;
}

.panopoly-landing-page .pane-content .image-flip-lyout {
    margin: 20px 0;
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
}

.img-right-block,
.img-left-block {
    background: #fff none repeat scroll 0 0;
}

.image-right,
.image-left {
    padding: 0;
}

.image-right img {
    border-radius: 0 3px 3px 0;
    max-height: 391px;
    width: auto;
    height: auto;
    float: right;
}

.image-left img {
    border-radius: 3px 0 0 3px;
    height: auto;
    max-height: 391px;
    width: auto;
    float: left;
}

.image-flip-lyout .field-name-node-link a,
.btn-grn-br-crvd,
.btn-grn-br-crvd:hover {
    background-color: #fff;
    border: 2px solid #2fc48d;
    border-radius: 0 10px;
    color: #666;
    float: left;
    font-size: 16px;
    font-weight: bold;
    height: 100%;
    margin-bottom: 0;
    min-width: 123px;
    padding: 6px 6px 8px 6px;
    text-align: center;
}

.image-flip-lyout .content-left,
.image-flip-lyout .content-right {
    padding: 30px 35px;
}

.ds-2col img {
    height: auto;
    max-height: 391px;
    width: auto;
    max-width: 100%;
}

.box-c-image {
    background-image: url(../../images/content-box-c-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 390px;
    border-radius: 0 3px 3px 0;
    background-position: 50%;
}

.white-block {
    color: #333;
    padding: 30px 20px 0 25px;
}

.image-flip-lyout .field-name-field-teaser {
    color: #666;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
}

.image-flip-lyout .field-name-title-field {
    color: #333;
    font-size: 28px;
    line-height: 36px;
}

.text-block {
    margin-top: 0;
}

.text-block-right {
    margin-top: 0;
    margin-bottom: 25px;
}

.text-block-right p {
    color: #666;
    text-align: left;
    font-size: 13px;
    margin-top: 10px;
}

.text-block p {
    color: #666;
    text-align: left;
    font-size: 13px;
    margin-top: 10px;
    line-height: 25px;
}

.front .text-block-right p,
.front .text-block p {
    font-size: 16px;
}

.front .panel-panel-inner .panel-pane:not(:first-child) {
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
}

.front .panel-panel-inner .panel-pane.pane-platform-flex-camp-builder-home-page-multiple-blocks {
    max-width: 100%;
}

@media (min-width: 768px) {
    .pane-content .field-name-title-field {
        display: block;
        /*TODO : Specified class is not defined in flourish_rem themes so we need to add BS class */
    }
    .box-c-image {
        background-image: url("../../images/content-box-c.jpg");
    }
    .front .pane-content {
        padding: 10px 20px;
    }
    .text-block-right p,
    .text-block p {
        font-size: 16px;
    }
}


/*Question module css starts*/

.front .container-fluid .field-items > .even > .first-item {
    margin: 0 0 10px 0;
    max-width: 100%;
    padding: 0 10px;
}

.front .container-fluid .field-items > .even > .first-item-slider {
    margin: 0 auto;
    width: 100%;
    max-width: 1360px;
}

.front .container-fluid .field-items .col-lg-12,
.yellow-block .text-block-right {
    padding: 0;
}

.front .color-quest-first-block > li {
    cursor: pointer;
}

.front .color-quest-first-block > li > a {
    display: block;
    min-height: 50px;
    margin-top: -15px;
    min-width: 107px;
    padding-top: 15px;
}

.front .color-quest-first-block > li a:hover {
    background: #2fc48d;
    color: #fff;
    cursor: pointer;
}

.field-name-field-bean-body-text .first-item {
    padding: 0;
}

.first-item {
    display: block;
    height: 505px;
}

.image-flip-lyout .field-name-title-field div,
.image-flip-lyout .field-name-title-field h2 {
    color: #333;
    font-size: 28px;
    line-height: 36px;
}

.color-quest-first-block {
    text-align: center;
    /*TODO : Specified class is not defined in flourish_rem themes so we need to add BS class */
}

.color-quest-first-block > ul {
    display: flex;
    justify-content: center;
}

.color-quest-first-block > ul li {
    margin-top: 26px;
    padding: 9px 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
    justify-content: center;
}

.question-module {
    margin-bottom: 10px;
}

.question-module .fl-question-title {
    margin-top: 0;
    line-height: 54px;
    font-size: 30px;
    padding-top: 62px;
    color: #fff;
    text-align: center;
}

.question-module ul {
    width: 100%;
    text-align: center;
    padding: 0;
}

.question-module li a {
    font-weight: bold;
    text-decoration: none;
    color: #666;
    background: #fff none no-repeat scroll 0 0;
    border-radius: 4px;
    display: inline-block;
    margin: -15px 14px -4px 14px;
    padding: 15px;
}

.fl-cq-btn {
    display: block;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 10px 0 10px 0;
}

.fl-cq-btn:hover {
    color: #333;
    text-decoration: none;
}

.fl-cq-btn-white {
    background: #fff;
    color: #333;
    text-decoration: none;
}

.fl-cq-btn-restart-color {
    margin-top: 30px;
    text-decoration: underline;
    color: #fff;
    display: block;
    font-size: 16px;
}

.fl-cq-btn-restart-color:hover {
    color: #fff;
}

@media (min-width: 768px) {
    .question-module {
        margin-bottom: 0;
    }
    .question-module .fl-question-title {
        margin-top: 0;
        line-height: 54px;
        padding-top: 125px;
        font-size: 38px;
    }
    .color-quest-first-block > ul li {
        margin-top: 0;
        padding: 0;
    }
}

/*question module icons css*/

.color-quest-first-block .scroll-down-icon {
    top: calc(100vh - 400px);
}

.scroll-down-icon {
    position: relative;
    top: 173px;
    display: none;
    visibility: hidden;
}

@media (min-width: 768px) {
    .scroll-down-icon {
        display: block;
    }
}


/*Authorising components css starts*/

.front .second-itemright {
    border-radius: 0 3px 3px 0;
}

.front .second-itemright p {
    padding-top: 0;
}

.second-item {
    height: 390px;
    margin: 20px 7px;
    box-shadow: 1px 0 5px 1px rgba(246, 244, 244, 0.71);
}

.second-item .second-itemright p {
    text-align: justify;
    padding-top: 15px;
}

.second-itemleft {
    background-image: url(../../images/home-img_office.jpg);
    background-position: 28% 0;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    max-width: 100%;
    display: block;
}

.second-itemright {
    background-color: #fee86e;
    padding: 10px 36px;
    height: 100%;
}

.pane-bean .second-itemright {
    height: auto;
}

@media (min-width: 768px) {
    .front .second-itemleft,
    .front .second-itemleft-js {
        border-radius: 3px 0 0 3px;
    }
    .second-itemleft {
        background-position: 0;
    }
}

.front .text-block {
    padding: 5px 15px;
}

.front .third-itemleft {
    min-height: 200px;
    background: #ECE5DF;
}

.front .third-item .third-itemleft {
    padding-bottom: 30px;
}

.front .third-itemright {
    background: none;
    padding: 0;
    height: auto;
    text-indent: 0;
    max-width: 100%;
    overflow: hidden;
}

.front .third-itemright img {
    max-width: 100%;
    visibility: hidden;
}

.node-type-color .third-item,
.front .third-item {
    background: none;
}

.node-type-color .text-block,
.white-block,
.yellow-block,
.text-block-right {
    padding: 5px 15px;
}

.node-type-color .third-item {
    min-height: 350px;
    border: none;
    border-radius: 3px;
    background: none;
    height: auto;
}

.node-type-color .third-itemright img {
    max-width: 100%;
}

.node-type-color .third-itemright,
.front .third-itemright {
    background: url(../../images/home-img-live.jpg);
    background-repeat: no-repeat;
    background-position: 87% -3%;
    background-size: cover;
    border-radius: 0 0 3px 3px;
    max-height: 300px;
    font-size: 0;
    overflow: hidden;
    height: auto;
}

.front .third-item {
    min-height: 350px;
    border: 1px #DDD solid;
    border-radius: 3px;
    background: -webkit-linear-gradient(left, #CEC7C2, #E0D8D3);
    background: -moz-linear-gradient(left, #CEC7C2, #E0D8D3);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left, #CEC7C2, #E0D8D3);
    /* Chrome,Safari4+ */
    background: -o-linear-gradient(left, #CEC7C2, #E0D8D3);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #CEC7C2, #E0D8D3);
    /* IE10+ */
    background-image: url(../../images/home-img-live.jpg);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: cover;
    height: auto;
}

.front .text-block-right h2,
.front .text-block h2 {
    margin-top: 0;
    font-size: 28px;
    line-height: 36px;
}

.node-type-color .third-itemleft {
    min-height: 250px;
    background: transparent;
    border-radius: 3px 3px 0 0;
}

.third-item {
    margin: 20px 7px;
    height: 350px;
    border: 1px #DDD solid;
    border-radius: 3px;
    box-shadow: 1px 0 5px 1px rgba(246, 244, 244, 0.71);
}

.third-itemright {
    background-position: right center;
    display: block;
    max-width: 100%;
}

.third-itemleft {
    background: linear-gradient(left, #CEC7C2, #E0D8D3);
    height: 100%;
    background-position: right center;
    display: block;
    max-width: 100%;
}

.store-links {
    text-align: center;
    display: block;
    /*TODO : Specified class is not defined in flourish_rem themes so we need to add BS class */
}

.store-links img {
    max-width: 46%;
    height: auto;
    display: inline-block;
}

.store-links:nth-child(1) img {
    max-width: 200px;
    height: auto;
    display: inline-block;
}

.store-links a:first-child {
    margin-right: 3%;
}

@media (min-width: 768px) {
    .front .third-item {
        background-size: 100% 84%;
        margin-bottom: -60px;
    }
    .front .third-item .text-block {
        margin-top: 0;
    }
    .front .third-itemright img {
        visibility: hidden;
        /*TODO : Specified class is not defined in flourish_rem themes so we need to add BS class */
    }
    .front .text-block {
        padding: 15px 25px;
    }
    .front .third-itemleft {
        border-radius: 3px 0 0 3px;
        background: transparent;
    }
    .front .third-itemright {
        background-repeat: no-repeat;
        background-position: 87% -3%;
        background-size: cover;
        border-radius: 0 0 3px 3px;
        max-height: 300px;
        text-indent: -99em;
        overflow: hidden;
        height: 0;
    }
    .front .text-block-right h2,
    .front .text-block h2 {
        line-height: 24px;
        margin-top: 5px;
        width: auto;
        font-size: 24px;
    }
    .text-block p {
        margin-left: 0;
        width: auto;
        text-align: justify;
        line-height: 21px;
    }
    .store-links {
        text-align: left;
        padding-top: 0;
    }
    .store-links img:first-child {
        margin-right: 0;
        width: auto;
    }
    .third-itemleft {
        height: auto;
    }
    .front .third-itemright {
        display: block;
        background-position: right center;
        background-repeat: no-repeat;
        background: transparent;
        text-indent: -99em;
    }
    .third-item {
        margin: 0 7px;
    }
    .node-type-color .third-itemright {
        background: none;
        padding: 0;
        height: auto;
        text-indent: 0;
        background-position: right center;
        display: block;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .front .third-item {
        background-size: cover;
        margin-bottom: 0;
    }
    .front .text-block-right h2,
    .front .text-block h2 {
        font-size: 28px;
        line-height: 36px;
        margin-top: 0;
        width: 100%;
    }
    .store-links {
        padding-top: 15px;
    }
    .store-links img:first-child {
        width: auto;
    }
    .front .text-block {
        padding: 15px 40px;
    }
    .text-block p {
        width: 80%;
        text-align: justify;
        line-height: 25px;
    }
}

@media (min-width: 1200px) {
    .text-block p {
        width: 100%;
        text-align: left;
    }
}
/* FR-978 Iphone 6 styles */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
  .color-quest-first-block > ul li {
    margin-top: 2px;
  }
}