@import 'variables';
@import 'mixins';

body.controller-pages.action-index footer {
    margin-top:0;
}
#teams-landing-page {
    .welcome-section {
        .lhs {
            display:none;
            @include width-medium() {
                display: block;
            }
            @include width-medium() {
                padding-bottom:50px; 
            }
            z-index: -1;
        }
        .rhs {
            padding-top:50px;
            margin-bottom:50px;
            @include width-medium() {
                padding-top:80px;
                margin-bottom:130px;
            }
            h1 {
                @include header-font;
                font-weight:$bold;
                @include font-size(30,24);
                color:$color-2;
                margin-bottom:10px;
                position:relative;
                img {
                    height:25px;
                    background:white;
                    position:absolute;
                    top:0;
                    left:0;
                }
                span {
                    width:145px;
                    display:inline-block;
                }
            }
            h2 {
                @include header-font;
                font-weight:600;
                @include font-size(26, 26);
                max-width:400px;
                margin-bottom:10px;
            }
            p {
                font-weight:$regular;
                color:#333;
                @include font-size(16, 22);
                max-width:450px;
                margin-bottom:20px;
            }
            .pure-button {
                @include font-size(16, 16);
                font-weight:$regular;
                border-radius:2px;
                width:100%;
                margin-bottom:15px;
                @include width-small() {
                    width:auto;
                    margin-bottom:0;
                }
                &.sign-up-button {
                    background:$color-3;
                    color:#fff;
                    margin-right:5px;
                    padding:15px 70px;
                }
                &.languages-button {
                    border:1px solid $color-2;
                    color:$color-2;
                    background:#fff;
                    padding:15px 30px;
                }
            }
        }
    }
    .tracks-section,
    .how-section {
        padding:80px 0;
        .title-block {
            h2 {
                @include header-font;
                font-weight:600;
                @include width-small() {
                    text-align:center;
                }
                @include font-size(30, 30);
                margin-bottom:15px;
            }
            p {
                @include width-small() {
                    text-align:center;
                    margin: 0px auto 40px auto;
                }
                @include font-size(17, 22);
                max-width: 600px;
                a {
                    text-decoration:none;
                    color:#333;
                    &:hover {
                        text-decoration:underline;
                    }
                }
                &+p {
                    margin-top:-30px;
                }
            }
        }
    }
    .tracks-section {
        background:#fafefe;
        padding:70px 0;
        border:solid #eee;
        border-width:1px 0;

        .title-block {
            h2 {
                @include font-size(30, 30);
                margin-bottom:15px;
            }
            p {
                @include font-size(16, 21);
                color:#666;
                max-width:400px;
                margin-bottom:20px;
                a {
                    color:#666;
                }
            }
        }
        .tracks {
            display:none;
            width: 1100px;
            @media screen and (min-width: 1200px) {
                display:block;
            }
            margin:0 auto;
            padding:20px 20px 0 20px;
            border-radius:10px;
            //background:rgba(#fff, 0.5);
            .row {
                overflow:hidden;
                margin-top:-10px;
                &.short {
                    padding-left:50px;
                }
                &:first-child {
                    margin-top:0;
                }
                .track {
                    display:block;
                    position:relative;
                    text-decoration:none;
                    width:93px;
                    height:101px;
                    float:left;
                    margin-right:10px;
                    background-size:93px;
                    background-repeat: no-repeat;
                    background-position:center center;
                    &:last-child {
                        margin-right:0;
                    }

                    img {
                        display:none;
                        width:100%;
                    }
                    .title {
                        @include font-size(14, 101);
                        font-weight:$regular;
                        text-align:center;
                        display:none;
                        color:#fff;
                    }
                    &:hover {
                        background-image:image-url("turquoise-hex.png") !important;
                        .title {
                            display:block;
                        }
                        .left-eye,
                        .right-eye {
                            display:none;
                        }
                    }
                    .left-eye,
                    .right-eye {
                        position:absolute;
                        background:white;
                        border-radius:100%;
                        .pupil {
                            width:3px;
                            height:3px;
                            background:#000;
                            left:5px;
                            top:5px;
                            border-radius:100%;
                            position:relative;
                        }
                    }
                    .left-eye {
                        top: 35px;
                        left: 32px;
                        width:12px;
                        height:11px;

                    }
                    .right-eye {
                        top: 34px;
                        left: 49px;
                        width: 11px;
                        height: 11px;
                    }
                }
            }
        }
        .tracks-mini {
            display:flex;
            @media screen and (min-width: 1200px) {
                display:none;
            }
            flex-wrap:wrap;
            align-items: center;
            justify-content: center;
            a {
                color: #333;
                text-decoration:none;
                .track-mini {   
                    display:flex;
                    border-radius:5px;
                    border: 2px solid $color-2;
                    margin:10px 5px;
                    @include width-small() {
                        margin:10px;
                    }
                    .logo, .title {
                        height:36px;
                        display:inline-block;
                    }
                    .logo {
                        background-color: $color-2;
                        color: $color-2;
                        &, img {
                            height:36px;
                            width:36px;
                        }
                    }
                    .title {
                        background-color:#fff;
                        padding:0 10px;
                        border-radius:0 5px 5px 0;
                        vertical-align: middle;
                        line-height:36px;
                        font-size:12px;
                        overflow:hidden;
                        text-overflow:ellipsis;
                    }
                }
                &:hover .track-mini, &:hover .track-mini .title {
                    background-color: $color-2 !important;
                    color: #fff;
                }
            }
        }
    }
    .how-section {
        .divider {
            text-align:center;
            margin-bottom:15px;
            margin:10px 0 20px;
            width:80px;
            border-bottom:1px solid #ddd;
            @include width-small() {
                width:0;
                border-bottom:1px solid #eee;
            }
            @include width-medium() {
                margin:0 400px 30px;
            }
        }
        .step.step-small {
            margin-top:15px;
            img {
                margin:0 auto;
            }
            @include width-small() {
                display:none;
            }
        }
        .step .step-image {
            display:none;
            @include width-small() {
                display:block;
            }
        }
        .step {
            overflow:hidden;
            margin:0 auto 15px;
            @include width-medium() {
               margin:0 auto 30px; 
            }
            max-width:700px;
            img {
                display:block;
                width:80%;
                max-width:230px;
                @include width-small() {
                    width:100%;
                }
            }
            h3 {
                margin-top:15px;
                font-weight:$regular;
                @include font-size(18, 21);
                margin-bottom:10px;
                @include width-medium() {
                    margin-top:30px;
                }
            }
            p {
                @include font-size(16, 22);
            }
            &.step-4 {
              position:relative;
              img {
                  position:relative;
              }
              .waterfall {
                  position:absolute;
                  width:235px;
                  height:145px;
                  top:0px;
                  left:0px;
                  background-image:image-url("how-step-4-exercises.png");
                  background-size:100%;
                  z-index:-1;
              }
            }
        }
    }
    .pr-section {
        background:#f9f9f9;
        border-top:1px solid #f0f0f0;
        padding:30px 0;
        h2 {
            font-weight:$regular;
            text-align:center;
            @include font-size(14, 14);
            color:#ccc;
            margin-bottom:20px;
        }
        .logos {
            text-align:center;
            a {
                display:inline-block;
                text-decoration:none;
                margin:0 20px;
                img {
                    display:block;
                    height:30px;
                }
            }
        }
    }
    .cta-section {
        background:$color-2;
        padding:60px 0;
        h2 {
            color:#fff;
            @include width-small() {
                text-align:center;
            }
            @include font-size(17, 17);
            font-weight:$fw-regular;
            margin-bottom:20px;
        }
        .pure-button {
            border:1px solid #fff;
            font-weight:$regular;
            border-radius:2px;
            background:#00bac9;
            padding:12px 35px;
            @include font-size(16, 16);
            margin:0 auto;
            display:block;
            width:100%;
            @include width-small() {
                width:280px;
            }
            color:#fff;
        }
    }

}

#modal.announcement {
    padding:50px 15px;
    @include width-small() {
        padding:50px;
    }
    @include width-medium() {
        margin:40px auto !important;
        max-height:85% !important;
    }
    img {
        width:50px;
        display:block;
        width:100px;
        margin: 0 auto 15px auto;
    }
    h2 {
        @include font-size(20, 20);
        font-weight:$regular;
        color:#555;
        margin-bottom:30px;
        text-align:center;
    }
    p {
        text-align:center;
        color:#555;
        @include font-size(14, 20);
        margin-bottom:10px;
        a {
            color:#555;
        }
    }
    .pure-button {
        background:$color-1;
        display:block;
        max-width:280px;
        width:100%;
        padding:11px 10px;
        text-align:center;
        margin: 30px auto 30px auto;
    }
}

