@import '/css/reset.css';

@body_font: Helvetica Neue,Helvetica,Arial,sans-serif;

.translate(@x, @y) {
    transform: translate(@x, @y);
    -webkit-transform: translate(@x, @y);
    -moz-transform: translate(@x, @y);
    -o-transform: translate(@x, @y);
    -ms-transform: translate(@x, @y);
}

.opacity(@value){
    @ms: @value * 100 ;
    filter:alpha(opacity=@ms); /* IE */
    -moz-opacity:@value; /* Mozilla */
    opacity: @value; /* CSS3 */
}


.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -o-transition: @transition;
    -ms-transition: @transition;
    transition: @transition;
}

.transform( @blah2 ){
    transform: @blah2;
    -webkit-transform: @blah2;
    -moz-transform: @blah2;
    -o-transform: @blah2;
    -ms-transform: @blah2;

}

.border-radius( @blah ){
  -webkit-border-radius: @blah;
  -moz-border-radius: @blah;
  border-radius: @blah;
}

.boxshadow( @blah ){
    -webkit-box-shadow: @blah;
    -moz-box-shadow: @blah;
    box-shadow: @blah;
}

.filter(@blah){
    -webkit-filter: @blah;
    filter: @blah;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

body{
    font-family: @body_font;
    font-size: 18px;
    line-height: 25px;
    min-height: 100vh;
}

em{ 
    font-style: normal;
    font-weight: bold;
}

.container{
    margin: 0 auto;
    position: relative;
    @media screen and (min-width: 480px) {
        max-width: 900px;
        padding-left: 8%;
    }
}

.valign{
    position: absolute;
    top:0;
    margin:0;
}

#the-contact-form .form-group{
    margin: 10px 0;
    
    &.has-error{
        border: 1px solid red;
    }

    label{ display: none; }

    input, textarea{
        padding: 4px;
        width: 100%;
        border-radius: 0;
        border: 1px solid #cccccc;
    }
    
    textarea{
        height: 70px;
        font-family: @body_font;
    }

    button{
        border-radius: 0;
        border: 0;
        background-color: #5a5a5a;
        color: #cccccc;
        padding: 5px 40px 5px 5px;

    }

}
#contact-container{
    margin-top: 20px;
}


body#home{
    
    header{
        margin: auto;
        width: 100%;
        float:left;
        h1{ 
            margin: 0;
            img{ width: 100%; }
        }

        @media screen and (min-width: 480px) {
            width: auto;
            display: inline;
            h1{ 
                img{ width: auto; }
            }
                        
        }
    }
    .content{
        float:left;
        padding: 20px;
        @media screen and (min-width: 990px){
            max-width: 368px;
            margin-left: 40px; 
            padding: 40px 80px 0px 40px;
            min-height: 500px - 40px;
        }

        @media screen and (min-width: 768px) and (max-width: 989px){
            max-width: 308px;
            margin-left: 40px; 
            padding: 40px 80px 0px 40px;
            min-height: 500px - 40px;
        }
        @media screen and (max-width: 909px){
            margin-left: 0px; 
            clear:left;
        }


        background-color: rgba( 255, 255, 255, 0.6 );
    }

    .bg{
        z-index: -1;
        position: absolute;
        height: 100%;
        width: 100%;
        background-size: cover;
        .transition(1s);


        &.in{ .opacity(1);}
        &.out{ .opacity(0);}

        .info{
            position: absolute;
            bottom: 20px;
            left: 8%;
            padding: 10px;
            color: #ffffff;
        }
        @media screen and (min-width: 768px) {
            &.bg1{ background-image: url( /images/Cosgrove-BG-01.jpg ); }
            &.bg2{ background-image: url( /images/Cosgrove-BG-02.jpg ); }
            &.bg3{ background-image: url( /images/Cosgrove-BG-03.jpg ); }
            &.bg4{ background-image: url( /images/Cosgrove-BG-04.jpg ); }
        }
    }
}