header {
    padding-top : 33px;
}

section.cross-functions {
    position         : fixed;
    z-index          : 100;
    top              : 0;
    width            : 100%;
    background-color : #ffffff;
    border-bottom    : 1px solid #f0edf0;
    padding-top      : 6px;
}

section.title {
    background        : url('/bundles/tamtamfpwebsite/img/home-header-bg.jpg') top center no-repeat;
    background-repeat : repeat-x;
    padding-top       : 20px;
    padding-bottom    : 20px;
}

section.title > div.container {
    max-width : 900px;
    height    : 155px;
}

.row-horizon {
    overflow-x                 : scroll;
    overflow-y                 : hidden;
    white-space                : nowrap;
    -webkit-overflow-scrolling : touch;
    -ms-overflow-style         : none;
}

.row-horizon.slick-initialized {
    overflow-x                 : initial;
    overflow-y                 : initial;
    white-space                : normal;
    -webkit-overflow-scrolling : initial;
    margin                     : 0;
}

.row-horizon > [class*=col-lg], .row-horizon > [class*=col-md], .row-horizon > [class*=col-sm], .row-horizon > [class*=col-xs] {
    float          : none;
    display        : inline-block;
    white-space    : normal;
    vertical-align : top;
}

.row-horizon > .col-xs-12,
.row-horizon h1,
.row-horizon h2 {
    width          : 100%;
    height         : 100%;
    flex-direction : column;
}

.slick-initialized,
.slick-list,
.slick-track,
.slick-slide {
    height : 100%;
}

/* IE10 and IE11 Fix */
@media screen and (-ms-high-contrast : active), (-ms-high-contrast : none) {
    /*.slider-wrapper .slick-initialized .slick-list .slick-slide{*/
    /*position: absolute !important;*/
    /*top: 0 !important;*/
    /*left: 50% !important;*/
    /*transform: translateX(-50%);*/
    /*}*/
}

/*Fix background display issue with translate3D in chrome*/
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-filter : blur(0);
}

h1,
h2 {
    margin : 0;
    height : 100%;
}

h1 span,
h2 span {
    font-size   : 32px;
    font-family : "Arial Black", "Arial Bold", Gadget, sans-serif;
    max-width   : 100%;
}

h1 span:first-child,
h2 span:first-child {
    font-size : 50px;
}

body.de h1 span,
body.de h2 span {
    font-size : 28px;
}

body.de h1 span:first-child,
body.de h2 span:first-child {
    font-size : 40px;
}

section.main {
    position : relative;
}

div.slider-wrapper {
    background-color : #f4f3f3;
    width            : 100%;
    display          : inline-block;
}

div.subscribe-wrapper {
    position   : absolute;
    width      : 100%;
    margin-top : -100px;
}

div.signup-wrapper {
    position : absolute;
    width    : 100%;
    top      : 0;
}

div.signup-wrapper > div.container {
    width     : 100%;
    max-width : 900px;
}

#signup-container {
    margin-top : 35px;
    z-index    : 50;
}

.signup-form-container {
    background-color : rgba(255, 255, 255, 0.8);
    padding-top      : 5px !important;
}

ul.slider-nav {
    position         : absolute;
    bottom           : 15px;
    left             : 50%;
    transform        : translateX(-50%);
    width            : auto;
    height           : auto;
    background-color : rgba(255, 255, 255, 0.8);
    margin           : 0;
    text-align       : center;
    padding          : 10px 13px;
    line-height      : 0;
    border-radius    : 4px;
    z-index          : 1;
}

ul.slider-nav li {
    margin  : 0 6px;
    width   : 15px;
    height  : 15px;
    display : inline-block;
    zoom    : 1;
}

ul.slider-nav li button {
    display               : inline-block;
    width                 : 15px;
    height                : 15px;
    padding               : 0;
    background            : #93bced;
    font-size             : 0;
    border                : 1px solid transparent;
    outline               : 0;
    -webkit-box-shadow    : none;
    -moz-box-shadow       : none;
    box-shadow            : none;
    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    border-radius         : 50%;
    -webkit-transition    : background-color .25s, border-color .25s;
    -moz-transition       : background-color .25s, border-color .25s;
    transition            : background-color .25s, border-color .25s;
}

ul.slider-nav li.slick-active button {
    background-color : #e54069;
}

.sign-up-title {
    background-color : rgba(255, 255, 255, 0.9);
    border-bottom    : 1px solid #f5f5f5;
    padding          : 10px 0;
    font-weight      : bold;
    font-size        : 26px;
    line-height      : 28px;
}

.btn-signup {
    margin-top : -10px;
}

#facebook-connector {
    background-color : rgba(255, 255, 255, 0.8);
    margin-top       : 10px;
    padding          : 5px;
}

#facebook-connector button.facebook {
    margin-bottom : 5px;
}

#signup-container #facebook-connector .form-info {
    margin : 0;
}

.btn.btn-subscribe {
    font-family                : Arial, sans-serif;
    font-weight                : bold;
    font-size                  : 18px;
    height                     : auto;
    line-height                : initial;
    padding                    : 8px 10px;
    background-color           : rgba(229, 64, 105, 0.7);
    border-radius              : 4px;
    border-top-left-radius     : 15px;
    border-bottom-right-radius : 15px;
}

.btn.btn-subscribe:hover {
    background-color : rgba(229, 64, 105, 0.8);
}

#signup-container form .form-error {
    position   : absolute;
    z-index    : 1;
    margin-top : -70px;
}

#signup-container form .form-error .alert {
    margin-top : 0;
}

.family-pact-in-four-steps {
    font-size        : 22px;
    background-color : #ffffff;
    padding-bottom   : 34px;
}

.family-pact-in-four-steps h3 {
    font-family   : "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size     : 50px;
    margin-bottom : 0;
}

.family-pact-in-four-steps h4 {
    font-family : "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size   : 30px;
}

.family-pact-rules-container {
    margin-top : 30px;
    max-width  : 900px;
}

.family-pact-rules-container > div {
    padding-top    : 10px;
    padding-bottom : 10px;
}

.family-pact-rules {
    background-color : #f3f3f3;
    border-radius    : 10px;
    display          : inline-block;
    padding-top      : 30px;
    padding-bottom   : 30px;
    min-height       : 260px;
}

.family-pact-rules > div {
    padding-left  : 30px;
    padding-right : 30px;
}

.family-pact-rules.family-pact-rule-animation-undisplayed {
    opacity   : 0;
    transform : translateY(-120px) scale(0);
}

.family-pact-rules.family-pact-rule-animation-displayed {
    transition : transform ease 0.4s, opacity linear 0.5s;
    opacity    : 1;
    transform  : translateY(0) scale(1);
}

.family-pact-rules .family-pact-rule-title {
    margin-bottom : 25px;
}

.family-pact-rules .family-pact-rule-title .family-pact-rule-title-number,
.family-pact-rules .family-pact-rule-title .family-pact-rule-title-label {
    height : 71px;
}

.family-pact-rules .family-pact-rule-title .family-pact-rule-title-number {
    font-family   : "Paytone One", "Arial Bold", Gadget, sans-serif;
    font-size     : 105px;
    padding-right : 10px;
    line-height   : 71px;
    margin-top    : -16px;
}

#family-pact-rule-1 .family-pact-rule-title .family-pact-rule-title-number {
    width : 57px;
}

#family-pact-rule-2 .family-pact-rule-title .family-pact-rule-title-number {
    width : 64px;
}

#family-pact-rule-3 .family-pact-rule-title .family-pact-rule-title-number {
    width : 65px;
}

#family-pact-rule-4 .family-pact-rule-title.family-pact-rule-title-number {
    width : 77px;
}

.family-pact-rules .family-pact-rule-title .family-pact-rule-title-label {
    font-family : "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size   : 30px;
    line-height : 35px;
}

.family-pact-rules .family-pact-rule-title .family-pact-rule-title-label {
    border-left  : 5px solid #f4f3f3;
    padding-left : 10px;
}

.family-pact-rules .family-pact-rule-title.text-blue .family-pact-rule-title-label {
    border-color : #3e7ac1;
}

.family-pact-rules .family-pact-rule-title.text-green .family-pact-rule-title-label {
    border-color : #3ba933;
}

.family-pact-rules .family-pact-rule-title.text-pink .family-pact-rule-title-label {
    border-color : #e54069;
}

.family-pact-rules .family-pact-rule-title.text-yellow .family-pact-rule-title-label {
    border-color : #fbb500;
}

.family-pact-rules .family-pact-rule-text {
    font-size : 18px;
}

#family-pact-rule-1 .family-pact-rule-text {
    padding-left : 87px;
}

#family-pact-rule-2 .family-pact-rule-text {
    padding-left : 94px;
}

#family-pact-rule-3 .family-pact-rule-text {
    padding-left : 95px;
}

#family-pact-rule-4 .family-pact-rule-text {
    padding-left : 107px;
}

.tips-slider-wrapper {
    margin-bottom : 60px;
}

.tips-slider-wrapper {
    background-color : #f4f3f3;
}

.tips-slider-wrapper.bg-transition {
    transition : background-color 1s linear;
}

.tips-slider-wrapper.bg-pink {
    background-color : #fdf1f4;
}

.tips-slider-wrapper.bg-green {
    background-color : #ebf7eb;
}

.tips-slider-wrapper.bg-blue {
    background-color : #eef6ff;
}

.family-pact-tips-title h3,
.family-pact-objectives h3 {
    font-family : "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-size   : 34px;
    margin      : 30px 0 40px 0;
}

.family-pact-tips-title h3 {
    margin : 50px 0;
}

.tips-slider-wrapper .family-pact-tips-image,
.tips-slider-wrapper .family-pact-tips-text {
    width         : 545px;
    height        : 379px;
    float         : left;
    border-radius : 10px;
    margin-left   : 5px;
    margin-right  : 5px;
}

.tips-slider-wrapper .family-pact-tips-image {
    border   : 1px solid #ccd2d9;
    overflow : hidden;
}

.tips-slider-wrapper .family-pact-tips-text {
    position : relative;
    padding  : 30px;
}

.tips-slider-wrapper .family-pact-tips-text:after {
    content       : '';
    position      : absolute;
    right         : 0;
    margin-right  : -28px;
    width         : 0;
    height        : 0;
    border-top    : 20px solid transparent;
    border-bottom : 20px solid transparent;
    border-left   : 30px solid gray;
    top           : 50%;
    transform     : translateY(-50%);
}

.tips-slider-wrapper .family-pact-tips-text {
    background-color : #6c727c;
}

.tips-slider-wrapper .family-pact-tips-text:after {
    border-left-color : #6c727c;
}

.tips-slider-wrapper .family-pact-tips-text.bg-pink {
    background-color : #e54069;
}

.tips-slider-wrapper .family-pact-tips-text.bg-pink:after {
    border-left-color : #e54069;
}

.tips-slider-wrapper .family-pact-tips-text.bg-green {
    background-color : #3ba933;
}

.tips-slider-wrapper .family-pact-tips-text.bg-green:after {
    border-left-color : #3ba933;
}

.tips-slider-wrapper .family-pact-tips-text.bg-blue {
    background-color : #3e7ac1;
}

.tips-slider-wrapper .family-pact-tips-text.bg-blue:after {
    border-left-color : #3e7ac1;
}

.tips-slider-wrapper .family-pact-tips-text > div {
    font-size  : 24px;
    color      : #fff;
    font-style : italic;
}

.tips-slider-wrapper .family-pact-tips-text > div h4 {
    margin-top     : 0;
    margin-bottom  : 35px;
    font-size      : 30px;
    font-weight    : bold;
    font-style     : normal;
    text-transform : uppercase;
}

.tips-slider-wrapper .family-pact-tips-text p {
    margin-bottom : 0;
}

.tips-slider-wrapper .family-pact-tips-text p > span {
    display : inline-block;
    width   : 100%;
}

.tips-slider-wrapper .slick-initialized .family-pact-tips-content {
    padding-right : 0;
    padding-left  : 0;
}

.tips-slider-wrapper ul.slider-nav {
    display   : inline-block !important;
    position  : relative;
    bottom    : initial;
    left      : initial;
    transform : initial;
    margin    : 10px auto 15px auto;
}

.family-pact-objectives {
    background-color : #f4f3f3;
    padding-bottom   : 30px;
}

.family-pact-objectives .family-pact-objectives-content > div:first-child {
    padding-left : 0;
}

.family-pact-objectives .family-pact-objectives-content > div:last-child {
    padding-right : 0;
}

.family-pact-objectives .family-pact-objectives-content .family-pact-objectives-image img {
    border-radius : 5px;
    overflow      : hidden;
}

.family-pact-objectives .family-pact-objectives-content .family-pact-objectives-text {
    font-size   : 15px;
    line-height : normal;
}

.family-pact-objectives .family-pact-objectives-content .family-pact-objectives-text h5 {
    margin      : 20px 0 10px 0;
    font-weight : bold;
}

@media (min-width : 992px) {
    .cross-functions > .container > .row > .col-xs-12 {
        padding-left  : 0;
        padding-right : 0;
    }

    .family-pact-objectives .family-pact-objectives-content .family-pact-objectives-text p {
        margin-bottom : 15px;
    }

    .family-pact-objectives .family-pact-objectives-content .family-pact-objectives-text p:last-child {
        margin-bottom : 0;
    }

    .family-pact-objectives .family-pact-objectives-content .family-pact-objectives-text h5 {
        font-size  : 16px;
        margin-top : 0;
    }
}

@media (max-width : 1199px) {
    #signup-container {
        margin-top : 15px;
    }

    .family-pact-tips-title h3,
    .family-pact-objectives h3 {
        font-size : 28px;
    }

    .tips-slider-wrapper .family-pact-tips-image,
    .tips-slider-wrapper .family-pact-tips-text {
        width  : 352px;
        height : 245px;
    }

    .tips-slider-wrapper .family-pact-tips-image {
        margin-right : 0;
    }

    .tips-slider-wrapper .family-pact-tips-text {
        margin-left : 0;
        padding     : 15px;
    }

    .tips-slider-wrapper .family-pact-tips-text > div {
        font-size : 18px;
    }

    .tips-slider-wrapper .family-pact-tips-text > div h4 {
        font-size     : 24px;
        margin-bottom : 15px;
    }
}

@media (max-width : 991px) {
    h1 span,
    h2 span {
        font-size   : 25px;
        white-space : normal;
    }

    h1 span:first-child,
    h2 span:first-child {
        font-size : 38px;
    }

    section.main {
        /*background-color: #f4f3f3;*/
    }

    div.signup-wrapper > div.container > div.row {
        margin : 0;
    }

    div.signup-wrapper {
        position       : initial;
        padding-bottom : 15px;
    }

    #facebook-connector {
        padding : 15px;
    }

    #signup-container form .form-error {
        position   : relative;
        margin-top : 0;
    }

    .family-pact-rules {
        min-height : 285px;
    }

    .family-pact-rules .family-pact-rule-title .family-pact-rule-title-label {
        font-size   : 25px;
        line-height : 30px;
    }

    .tips-slider-wrapper {
        margin-bottom : 55px;
    }

    .family-pact-tips-title h3,
    .family-pact-objectives h3 {
        font-size : 22px;
    }

    .family-pact-objectives .family-pact-objectives-content > div:first-child {
        padding-left : 15px;
    }

    .family-pact-objectives .family-pact-objectives-content > div:last-child {
        padding-right : 15px;
    }

    .family-pact-objectives .family-pact-objectives-content .family-pact-objectives-text {
        padding-top : 20px;
    }
}

@media (max-width : 767px) {
    section.title > div.container {
        height : auto;
    }

    section.title .container .row > div {
        padding-bottom : 12px;
    }

    section.title .container .row > div:first-child {
        padding-left  : 0;
        padding-right : 0;
    }

    section.title .container .row > div:last-child {
        padding-bottom : 0;
    }

    h1 span,
    h2 span {
        font-size   : 18px;
        white-space : normal;
    }

    h1 span:first-child,
    h2 span:first-child {
        font-size : 26px;
    }

    body.de h1 span,
    body.de h2 span,
    body.de h1 span:first-child,
    body.de h2 span:first-child {
        font-size : 30px;
    }

    ul.slider-nav {
        display : none !important;
    }

    div.sign-up-title > span {
        display : none;
    }

    div.sign-up-title > span:first-child {
        display : inline;
    }

    .family-pact-in-four-steps {
        font-size : 16px;
    }

    .family-pact-in-four-steps h3 {
        font-size : 28px;
    }

    .family-pact-in-four-steps h4 {
        font-size : 18px;
    }

    .family-pact-rules {
        min-height : 240px;
    }

    .family-pact-rules > div {
        padding-right : 10px;
    }

    .family-pact-rules > div.family-pact-rule-title {
        padding-left : 20px;
    }

    .family-pact-rules .family-pact-rule-title .family-pact-rule-title-label {
        font-size : 22px;
    }

    .family-pact-rules .family-pact-rule-text {
        font-size   : 15px;
        font-weight : bold;
    }

    #family-pact-rule-1 .family-pact-rule-text {
        padding-left : 77px;
    }

    #family-pact-rule-2 .family-pact-rule-text {
        padding-left : 84px;
    }

    #family-pact-rule-3 .family-pact-rule-text {
        padding-left : 85px;
    }

    #family-pact-rule-4 .family-pact-rule-text {
        padding-left : 97px;
    }

    .tips-slider-wrapper .family-pact-tips-content > div {
        max-width : 352px;
    }

    .tips-slider-wrapper .family-pact-tips-image,
    .tips-slider-wrapper .family-pact-tips-text {
        margin : 0;
    }

    .tips-slider-wrapper .family-pact-tips-text {
        margin-top : 255px;
    }

    .tips-slider-wrapper .family-pact-tips-image {
        position : absolute;
    }

    .tips-slider-wrapper .family-pact-tips-text:after {
        right         : 50%;
        margin-right  : 0;
        top           : 0;
        margin-top    : -28px;
        border-left   : 20px solid transparent;
        border-right  : 20px solid transparent;
        border-top    : none;
        border-bottom : 32px solid gray;
        z-index       : 1;
        transform     : translateX(50%);
    }

    .tips-slider-wrapper .family-pact-tips-text:after {
        border-left-color   : transparent;
        border-bottom-color : #6c727c;
    }

    .tips-slider-wrapper .family-pact-tips-text.bg-pink:after {
        border-left-color   : transparent;
        border-bottom-color : #e54069;
    }

    .tips-slider-wrapper .family-pact-tips-text.bg-green:after {
        border-left-color   : transparent;
        border-bottom-color : #3ba933;
    }

    .tips-slider-wrapper .family-pact-tips-text.bg-blue:after {
        border-left-color   : transparent;
        border-bottom-color : #3e7ac1;
    }
}

@media (max-width : 400px) {
    .tips-slider-wrapper .container .row > div.col-xs-12 {
        padding-left  : 5px;
        padding-right : 5px;
    }

    .tips-slider-wrapper .family-pact-tips-content > div,
    .tips-slider-wrapper .family-pact-tips-text,
    .tips-slider-wrapper .family-pact-tips-image {
        max-width : 100%;
        height    : auto;
    }

    .tips-slider-wrapper .family-pact-tips-text {
        min-height : 280px;
    }
}

@media (max-width : 360px) {
    .tips-slider-wrapper .family-pact-tips-text {
        margin-top : 250px;
    }
}

@media (max-width : 330px) {
    .tips-slider-wrapper .family-pact-tips-content > div,
    .tips-slider-wrapper .family-pact-tips-text,
    .tips-slider-wrapper .family-pact-tips-image {
        max-width : 98%;
    }

    .tips-slider-wrapper .family-pact-tips-text {
        margin-top : 230px;
    }
}

/* IE hacks */
@media all and (-ms-high-contrast : none), screen and (-ms-high-contrast : active), screen and (-ms-high-contrast : none) {
    #signup-container {
        margin-top : 15px;
    }

    .tips-slider-wrapper ul.slider-nav {
        position  : absolute;
        left      : 50%;
        transform : translateX(-50%);
        bottom    : 0;
    }

    .tips-slider-wrapper .row-horizon.slick-initialized {
        padding-bottom : 60px;
    }

    .valign-wrapper.margin-lr-auto,
    .valign-wrapper .margin-lr-auto,
    .valign-wrapper-md.margin-lr-auto,
    .valign-wrapper-md .margin-lr-auto {
        margin-left  : 0 !important;
        margin-right : 0 !important;
    }
}

@media all and (-ms-high-contrast : none) and (max-width : 991px), screen and (-ms-high-contrast : active) and (max-width : 991px), screen and (-ms-high-contrast : none) and (max-width : 991px) {
    div.signup-wrapper {
        position : relative;
    }
}

@media all and (-ms-high-contrast : none) and (min-width : 991px), screen and (-ms-high-contrast : active) and (min-width : 991px), screen and (-ms-high-contrast : none) and (min-width : 991px) {
    .family-pact-rules {
        min-height : 285px;
    }

    .family-pact-rules .family-pact-rule-title .family-pact-rule-title-label {
        font-size   : 25px;
        line-height : 30px;
    }

    div.family-pact-objectives-image picture {
        display : none;
    }

    div.family-pact-objectives-image {
        height            : 527px;
        background-image  : url('/bundles/tamtamfpwebsite/img/home/family_pact-home-objectives-517x527.jpg');
        background-repeat : no-repeat;
        border-radius     : 5px;
        background-size   : contain;
    }
}
