body#contact{

    .mainbar{

        p{
            margin:20px;
        }

        .captchaError{
            color:red;
            font-weight:bold;
            text-align:center;
        }

    }

    h2{
    text-align:center;
    }

    form{

        width:50%;
        margin:10px auto;

        fieldset{
            padding: 8px;

            p{
                font-size:11px;
            }
        }

        label{
            display:block;
            width:auto;
            text-align:left;
            padding-bottom:8px;
        }
        input[type="text"]:focus, textarea:focus{
            background:#B5EBFD;
            color:#555;
        }
        input[type="submit"]{
            margin:10px 0 0 10px;
        }
        input[name="captcha"]{
            width:100px;
        }
        img{
            margin:6px 4px 0 0;
            float:left;
        }
    }
}

body#landing{

    header{
        height:80px;

        .logo{
            margin-top:14px;
            width:300px;
            height:auto;
        }
    }

    .wrapper.base{
        margin:100px auto;
        background:white;
        border:solid 1px #E9E9E9;
    }

    .info{

        .row1{
            float:left;
            width:62%;
            margin-left:1%;

            ul{
                margin-left:20px;
                li{
                    padding:6px;
                    font-size:14px;
                }
            }

            .more{
                color:#424242;
                font-size:22px;
                margin:40px 0;
            }

            h1{
                margin:30px 0;
                color:#424242;
                font-size:24px;
            }

            .contactInfo{
                background-image:url(@IMAGES_URL+"/imagen-contacto.png");
                background-color:#F2F2F2;
                background-repeat:no-repeat;
                background-position:right center;
                border: 1px solid #cccccc;

                p:nth-child(1){
                    font-weight:bold;
                    margin:20px 30px;
                }

                ul{
                    padding:0 30px 30px 30px;
                    list-style:none;
                    li{
                        padding:2px;
                    }
                }
            }

            h3{
                margin:30px 0;
            }

            p{
                margin:30px 0 20px 0;
                font-size:14px;
            }

            article{
                margin:10px 0;
                position:relative;
                overflow:hidden;

                blockquote{
                    background:#A6A6A6;
                    padding:20px;
                    font-size:24px;
                    font-weight:bold;
                    width:180px;
                    float:left;
                    text-align:center;
                }   
            }

            article.ofrecemos{
                blockquote{
                    float:right;
                }
            }

            article.atrae{
                margin-top:40px;
                ul{
                    margin-left:30px;
                    float:left;
                }
            }

            article.black{
                background:#A6A6A6;
                padding:20px;

                p{
                    margin:4px 10px;
                    font-size:12px;
                }
            }

        }

        .row2{
            float:right;
            width:36%;
            margin-left:1%;

            form[name=contactForm]{
                width:390px;
                position:fixed;

                input[type="submit"]{
                    width:370px;
                }

            }
        }
    }

    .captchaError{
        color:red;
        font-weight:bold;
        text-align:center;
        margin:30px;
    }

    h2{
        
    }

    form{
        float:right;
        width:38%;
        margin: 10px 10px 0 0;
        background-color:#F0F8FC;
        border:solid 6px #5E8CCB;

        fieldset{
            width:96% !important;
            padding:4px 10px !important;

            p{
                font-size:11px;
            }
        }
        input[type="text"],textarea{
            width:97% !important;
        }
        label{
            display:block;
            width:auto;
            text-align:left;
            padding-bottom:4px;
            font-size:12px;
        }
        input[type="text"]:focus, textarea:focus{
            background:#B5EBFD;
            color:#555;
        }
        input[type="submit"]{
            margin:0;
            font-weight:bold;
            width:424px;
            font-size:30px !important;
        }
        input[name="captcha"]{
            width:100px !important;
        }
        input[name="captcha"] ~ p{
            display:inline;
        }
        img{
            margin:6px 4px 0 0;
            float:left;
        }
    }

    @mainWidth: 1160px;
    @desktopWidth: 992px;
    @tabletWidth: 768px;
    @wideMobileWidth: 480px;
    @mobileLayout: 320px;

    /* Main layout */
    @media only screen and (min-width: @mainWidth) {

    }    

    // Desktop Layout
    @maxDesktopWidth: @mainWidth - 1;
    @media only screen and (min-width: @desktopWidth) and (max-width: @maxDesktopWidth) {
        .info{
            float:none;
            width:auto;
        }
        form{
            width:auto;
            margin:20px;
            float:none;
        }
        nav{
            display:none;
        }       
    }

    // Tablet Layout (nexus 7 horizontal)
    @maxTabletWidth: @desktopWidth - 1;
    @media only screen and (min-width: @tabletWidth) and (max-width: @maxTabletWidth) {
        .info{
            float:none;
            width:auto;
        }
        form{
            width:auto;
            margin:20px;
            float:none;
        }
        nav{
            display:none;
        }       
    }

    // Wide Mobile Layout (nexus 7 vertical, huawey horizontal)
    @maxWideMobileWidth: @tabletWidth - 1;
    @media only screen and (min-width: @wideMobileWidth) and (max-width: @maxWideMobileWidth) {
        .info{
            float:none;
            width:auto;
            padding:20px 20px !important;
        }
        form{
            width:auto;
            margin:20px;
            float:none;
        }
        .contactInfo{
            background-image:none !important;
            ul{
                padding:0 10px 10px !important;
            }
        }
        nav{
            display:none;
        }    
        input[type="submit"]{
            width:auto !important;
            margin:auto !important;
        }   
    }

    // Mobile Layout (huawey vertical)
    @maxMobileWidth: @wideMobileWidth - 1;
    @media only screen and (max-width: @maxMobileWidth) {
        .info{
            float:none;
            width:auto;
            padding:20px 20px !important;

            .row1{
                float:none !important;
                width:100% !important;

                blockquote {
                    float: none !important;
                    width: auto !important;
                    margin-bottom:20px !important;
                }

            } 

            .row2{
                float:none !important;
                width:100% !important;

                form{
                    position:relative !important;
                    width:auto !important;
                    margin:10px 0 !important;

                    input[type="submit"]{
                        font-size:26px !important;
                        width:auto !important;
                        margin:auto !important;
                    }
                }
            } 

        }
        form{
            width:auto;
            margin:20px;
            float:none;
        }
        .contactInfo{
            background-image:none !important;
            ul{
                padding:0 10px 10px !important;
            }
        }
        nav{
            display:none;
        }       
        input[type="submit"]{
            width:auto !important;
            margin:auto !important;
        }  

    }

}

body#landingOmega{
    background-color: #555;

    .wrapper.base{
        margin:60px auto 0;
    }

    .captchaError, .fileError{
        color:red;
        background:white;
        font-weight:bold;
        text-align:center;
        margin:30px;
        padding:20px;
    }

    .landing{
        position:relative;
        width:800px;
        height:700px;
        background-image:url(@IMAGES_URL+"Omega.png");
        margin:auto;
        border:solid 1px #003518;

        .mailto{
            display: block;
            height: 30px;
            right: 55px;
            position: absolute;
            text-indent: 4000px;
            bottom: 70px;
            width: 180px;
        }

        form{
            float:right;
            width:340px;
            margin: 20px 10px 0 0;
            background-color:#CEE773;
            border:solid 6px #004A21;
            .borderRadius(4px);

            fieldset{
                width:320px !important;
                padding:4px 10px !important;

                p{
                    font-size:11px;
                }
            }
            input[type="text"],textarea{
                width:310px !important;
            }
            label{
                display:block;
                width:auto;
                text-align:left;
                padding-bottom:4px;
                font-size:12px;
            }
            input[type="text"]:focus, textarea:focus{
                background:#B5EBFD;
                color:#555;
            }
            input[type="submit"]{
                margin:0;
                font-weight:bold;
                width:320px;
                font-size:30px !important;
            }
            input[name="captcha"]{
                width:100px !important;
            }
            input[name="captcha"] ~ p{
                display:inline;
            }
            img{
                margin:6px 4px 0 0;
                float:left;
            }
        }
    }
}