/*------------------------------------------------------------------
[Master Stylesheet]

Project:	 ImpactMap
Version:	 1
Last change: 17/03/14
Assigned to: Alex
Description: Contains general css. 
-------------------------------------------------------------------*/

/*
* Intro Section
*/

#intro,
#second,
#fourth{
    position: relative;
}
#intro{
    background: #23566e;
}
#intro .container-fluid{
    width: 200%;
    max-width: 200%;
    position: relative;
}
#intro .container-fluid .row{
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}
@media (min-width: 1800px) {
    #intro .container-fluid .row{
        max-width: 1700px;
    }
}
#intro .container-fluid .column{
    padding: 0;
}
    #intro .sign-up-container{
        background: #23566e;
        background: rgba(35, 86, 110, 0.85);
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
        #intro .content{
            color: #fff;
            padding: 10px 0 0;
        }
        @media (min-width: 1300px) {
            #intro .content {
                padding: 30px 0;
            }
        }
        @media (min-width: 1470px) {
            #intro .content {
                padding: 9% 0;
            }
        }

            #intro h1,
            #intro h3{
                color: #fff;
            }
            #intro h1{
                padding: 40px 0 10px;
            }
            #intro .description{
                padding: 40px 0 15px;
                font-size: 20px;
            }
            #intro .more{
                padding: 40px 0 0;
            }
                #intro .more a{
                    text-transform: uppercase;
                }

.extend-img{
    min-width: 1200px;
    margin: 0 auto;
}
.second-img{
    display: none;
}
@media (min-width: 1700px) {
    .first-img{
        display: none;
    }
    .second-img{
        display: block;
    }
}



/*
* First Section
*/

#first h2,
#third h2,
#fifth h2{
    text-align: center;
    padding: 40px 0;
}
#first h3.bold,
#first h5,
#third h3.bold,
#third h5{
    text-transform: uppercase;
}
#first h3,
#third h3{
    padding: 0 0 25px;
}
#first h1.big{
    color: #7fb4cf;
}

#first .column-half:last-child .content{
    padding: 0 0 0 15px;
}

    .list{
        margin: 0;
        padding: 0;
        list-style: none;
    }
        .list li{
            padding: 0 0 30px;
            position: relative;
        }
        .list li:first-child{
            padding-top: 30px;
        }
            .list .line{
                position: absolute;
                top: 6px;
                left: -40px;
                width: 30px;
                height: 4px;
                background: #7fb4cf;
            }
            .list li:first-child .line{
                top: 36px;
            }
            #first h5{
                padding: 0 0 10px;
            }

.romb-area{
    padding: 25px 0 130px;
}
.romb-container{
    display: block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    width: 424px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
    .romb-container li{
        width: 212px;
        float: left;
        background: #7FB4CF;
    }
        .romb-content.text{
            display: table-cell;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            vertical-align: middle;
            width: 212px;
            height: 212px;
            text-align: center;
        }
            #first .romb-container h3{
                color: #fff;
                text-transform: none;
            }
            .romb-container a,
            .triangle-content a,
            #fourth .triangle-content a{
                border-color: #a6cbdd;
                text-transform: none;
                border: none;
            }
            .romb-container a{
                text-transform: none;
                font-size: 20px;
                line-height: 25px;
            }
            .romb-container a:hover,
            .triangle-content a:hover,
            #fourth .triangle-content a:hover{
                border-color: #ffffff;
            }
/*
* Second Section
*/
.triangle{
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    width: 1200px;
    text-align: center;
    margin-left: -600px;
}
    .triangle-content {
        width: 0;
        height: 0;
        border-left: 600px solid transparent;
        border-right: 600px solid transparent;
        border-bottom: 450px solid #7FB4CF;
        border-bottom: 450px solid rgba(127, 180, 207, 0.95);
        margin: 0 auto;
    }
        .triangle-content .content{
            width: 600px;
            position: absolute;
            left: 50%;
            margin-left: -300px;
            top: 115px;
        }
            .triangle-content h2,
            .triangle-content h3,
            .triangle-content p{
                color: #ffffff;
            }
            .triangle-content h2{
                padding: 40px 0 20px;
            }
            .triangle-content h3{
                padding: 20px 0;
            }
            .triangle-content p{
                padding: 10px 0 0;
            }
            .triangle-content a{
                text-transform: none;
            }

/*
* Third Section
*/
#third h1.big{
    color: #9d646f;
}
    #third .list .line{
        background: #9d646f;
    }
        #third .list p{
            font-family: 'droid_serifitalic', Arial, Helvetica, sans-serif;
            font-size: 17px;
        }
        #third h5{
            padding: 15px 0 10px;
        }

/*
* Fourth Section
*/
#fourth .triangle{
    top: 0;
    bottom: auto;
}
    #fourth .triangle-content{
        border-bottom: 0;
        border-top: 450px solid #9d646f;
        border-top: 450px solid rgba(157, 100, 111, 0.85);
    }
        #fourth .triangle-content .content{
            top: 35px;
        }
            #fourth  .triangle-content h2{
                padding: 0 0 20px 0;
            }
            #fourth .triangle-content h3.bold{
                padding: 40px 0 0;
            }
            #fourth .triangle-content a{
                border-color: #b8959c;
                font-size: 20px;
                line-height: 30px;
            }

/*
* Fifth Section
*/
.team-container .row{
    padding-bottom: 30px;
}
    .team-container .content{
        text-align: left;
    }
        .team-container img{
            float: left;
            margin: 0 auto;
            padding: 40px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .team-container .no-rotation{
            padding: 0 13px;
        }
        .team-container .team-detail{
            float: left;
            padding: 0 0 0 20px;
        }
            .team-container h4{
                text-transform: uppercase;
                padding: 10px 0 20px 0;
            }
            .team-container .description{
                font-size: 14px;
                padding: 0 0 20px;
                width: 320px;
                margin: 0 auto;
                line-height: 22px;
            }
            .team-container .details{
                font-size: 14px;
                color: #eeeeee;
            }
                .team-container .details a{
                    color: #7fb4cf;
                    border-color: #eeeeee;
                    margin: 0;
                    display: inline-block;
                }
                .team-container .details a:hover{
                    border-color: #7fb4cf;
                }

#fifth .logo{
    margin: 0 auto;
    padding: 50px 0;
}

/*
* Footer
*/
#footer{
    background: #333333;
    padding: 50px 0 40px;
}
    #footer .description{
        color: #fff;
        padding: 40px 0 15px;
        font-size: 20px;
    }
    .posts{
        color: #fff;
    }
        .posts h1{
            padding-top: 65px;
            color: #fff;
            font-family: 'ubuntulight', Arial, Helvetica, sans-serif;
            font-weight: 300;
            font-size: 40px;
        }
        .posts article{
            padding-top: 38px;
        }
            .posts article h5{
                padding-bottom: 15px;
            }
                .posts article a{
                    border-bottom-color: #73838a;
                    text-transform: uppercase;
                }
                .posts article a:hover{
                    border-bottom-color: #fff;
                }

            .posts article p{
                padding-bottom: 20px;
            }
            .posts .more{
                font-size: 12px;
            }

/*
* Media queries
*/
@media (max-width: 1300px) {
    .extend-img{
        min-width: 320px;
        min-height: 560px;
    }
    .container-fluid {
        width: 100%;
    }
    .row{
        margin: 0;
    }
    #intro .sign-up-container {
        width: 100%;
    }
    #intro .container-fluid {
        width: 100%;
        max-width: 100%;
    }
    #intro .container-fluid .row {
        max-width: 100%;
    }
    #intro .container-fluid .column-half{
        width: 100%;
    }
    #intro .content {
        padding: 30px 10px;
    }
    #first .column-half:last-child .content {
        padding: 0 0 0 45px;
    }
    .triangle{
        left: 0;
        width: 100%;
        top: 0;
        margin-left: auto;
    }
    #fourth .triangle{
        bottom: 0;
    }
    .triangle-content {
        background: #7FB4CF;
        background: rgba(127, 180, 207, 0.95);
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0 auto;
    }
    #fourth .triangle-content {
        border-bottom: 0;
        background: #9d646f;
        background: rgba(157, 100, 111, 0.85);
        border: 0;
    }
    .triangle-content .content{
        width: auto;
        position: static;
        margin-left: auto;
    }
    #fourth .triangle-content h2 {
        padding: 40px 0 20px 0;
    }

    .frmRow {
        width: 360px;
    }
}