/* valores */
@first:#00a07e;
@second:#3f454c;
@error:#f00;
@pixel:1px;
@images: "../img";
.rounded(@value:5px) {
   -webkit-border-radius: @value;
   -moz-border-radius: @value;
    border-radius: @value;
}
.gradient (@origin: top, @start:#a7880a, @stop:#3a3110) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@stop, endColorstr=@stop, GradientType=0);
}
.transform {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}
.box-shadow (@x: 0px, @y: 2px, @blur: 10px, @alpha: 0.5) {
  -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
.top-spacer0 {margin-top: 0;}
.top-spacer5 {margin-top: 5px;}
.top-spacer10 {margin-top: 10px;}
.top-spacer15 {margin-top: 15px;}
.top-spacer20 {margin-top: 20px;}
.top-spacer25 {margin-top: 25px;}
.top-spacer30 {margin-top: 30px;}
.bottom-spacer0 {margin-bottom: 0;}
.bottom-spacer5 {margin-bottom: 5px;}
.bottom-spacer10 {margin-bottom: 10px;}
.bottom-spacer15 {margin-bottom: 15px;}
.bottom-spacer20 {margin-bottom: 20px;}
.bottom-spacer25 {margin-bottom: 25px;}
.bottom-spacer30 {margin-bottom: 30px;}
.noMargin {margin:0;}
.mBottom {margin-bottom:@pixel + 9;}
.relative {position:relative;}
.overflow {overflow:hidden;}
.clear {clear:both;}
.btn {
    .rounded(@pixel - 1);
    text-transform:uppercase;
    font-family: 'Nunito', sans-serif;
    &.btn-primary {
        background:@first;
        border-color:darken(spin(@first, 8%), 5%);
        &:hover,
        &:focus {
            background:darken(spin(@first, 8%), 15%);
            border-color:@first;
        }
    }
    &:hover,
    &:focus {
        background-position:0 -30px;
    }
}
.btn:hover,
.btn:focus {
    background-position:0 -30px;
}
textarea {height: @pixel + 59;}
img {max-width:100%;}
a {
    color:@first;
    transition: all 0.8s ease 0s;
    &:hover,
    &:active,
    &:focus {
        text-decoration:none;
        outline:none;
    }
}
.map {
    img {max-width:inherit;}
}
.scrollUp {
    background:lighten(spin(@second, 8%), 90%);
    font-size:1.8em;
    color:@first;
    .rounded(@pixel + 4);
    padding:@pixel @pixel + 7;
    position:fixed;
    bottom:@pixel + 14;
    right:@pixel + 14;
    display:none;
    opacity:0.5;
    transition: all 0.8s ease 0s;
    &:hover {
        opacity:0.8;
    }
}
.well {
    .rounded(@pixel - 1);
    border:@pixel - 1;
    background:lighten(spin(@second, 8%), 90%);
    box-shadow:inherit;
}

html {height:100%;}
body {
    height:auto;
    color:@second;
    padding-top:@pixel + 98;
}
h1, h2, h3, h4, h5, h6 {
    color:@second;
    font-family:'Quicksand', sans-serif;
    text-transform:uppercase;
    font-weight:400;
    font-size:1.5em;
    padding:@pixel + 4 @pixel + 7;
}
#contBrand {
    position:absolute;
    top:@pixel - 1;
    left:@pixel - 1;
    z-index:999;
    padding:@pixel + 9;
    width:100%;
    text-align:center;
    background:rgba(255,255,255,0.7);
    img {
        max-width:@pixel + 249;
    }
}
#cookie-bar {
    background:rgba(0,0,0,0.8);
    height:auto;
    line-height:24px;
    color:lighten(spin(@second, 8%), 40%);
    text-align:justify;
    padding:20px;
    position:relative;
    z-index:9999;
    &.fixed {
        position:fixed;
        bottom:20px;
        left:20px;
        max-width:600px;
        &.bottom {
            top:0;
            bottom:auto;
        }
    }
    p {
        margin:0;
        padding:0;
    }
    a {
        color:#ffffff;
        display:inline-block;
        text-decoration:uderline;
        padding:0 6px;
        margin-left:8px;
        &:hover {
            text-decoration:none;
        }
    }
    .cb-enable {
        color:lighten(spin(@first, 8%), 5%);
        &:hover {color:lighten(spin(@first, 8%), 90%);}
    }
    .cb-disable {
        background:#990000;
        &:hover {background:#bb0000;}
    }
    .cb-policy {
        background:#0033bb;
        &:hover {background:#0055dd;}
    }
}

header {
    nav {
        &.navbar {
            background:@first;
            text-transform:uppercase;
            font-family:'Quicksand', sans-serif;
            .navbar-nav {
                li {
                    a {
                        padding:25px;
                        color:lighten(spin(@first, 8%), 90%);
                        &:hover {
                        color:@second;
                            background:lighten(spin(@first, 8%), 90%);
                        }
                    }
                }
                .dropdown-menu > li > a {
                    padding:10px;
                    color:@second;
                }
            }
            .navbar-toggle {
                border:0;
                .icon-bar {
                    background:lighten(spin(@first, 8%), 90%);
                }
                &:hover {
                    background:lighten(spin(@first, 8%), 5%);
                }
            }
            .navbar-brand {
                display:none;
                max-width:@pixel + 219;
                text-transform:inherit;
                padding-top:15px;
                padding-bottom:15px;
                color:lighten(spin(@first, 8%), 90%);
                strong {color:lighten(spin(@second, 8%), 55%);}
            }
        }
    }
}
.carousel {
    max-height:550px;
    overflow:hidden;
    box-shadow:0 10px 15px 0 @second;
    .carousel-control i {
        display:inline-block;
        font-size:6em;
        height:30px;
        margin-left:-15px;
        margin-top:-55px;
        position:absolute;
        top:50%;
        width:30px;
        z-index:5;
    }
}
section {
    header {
        text-align:center;
        h1, h2, h3, h4, h5, h6 {
            font-size:2.5em;
            margin-bottom:@pixel + 29;
        }
    }
}
/* About and gallery */
#about {
    background:lighten(spin(@second, 8%), 90%);
    padding-top:@pixel + 19;
    padding-bottom:@pixel + 49;
    header {
        font-family:'open sans', sans-serif;
        font-weight:400;
        padding-bottom:@pixel + 39;
        p {
            text-align:left;
            font-size:1.3em;
            color:lighten(spin(@second, 8%), 19%);
        }
    }
}

/* Parallax */
#imgDecoration {
    position:relative;
    min-height:@pixel + 399;
    background: url('@{images}/parallax.jpg') fixed no-repeat;
    background-size:cover;
    .claim {
        text-align:center;
        margin-top:@pixel + 129;
        font-family:'Quicksand', sans-serif;
        font-weight:400;
        font-style:italic;
        padding-bottom:@pixel + 39;
        color:lighten(spin(@second, 8%), 90%);
        text-shadow:@pixel - 1 @pixel @pixel + 1 lighten(spin(@second, 8%), 10%);
        h1 {
            color:lighten(spin(@second, 8%), 90%);
            letter-spacing:2px;
            font-size:2.8em;
            line-height:1.2em;
        }
    }
}
/* Projects */
#projects {
    padding:@pixel + 49 @pixel - 1 @pixel + 69;
    header {
        font-family:'open sans', sans-serif;
        font-weight:400;
        padding-bottom:@pixel + 39;
        p {
            text-align:left;
            font-size:1.3em;
            color:lighten(spin(@second, 8%), 19%);
        }
    }
    .thumbnail {
        h2 {
            margin-top:@pixel - 1;
            padding-left:@pixel - 1;
            padding-right:@pixel - 1;
            a {
                color:@second;
            }
        }
        p {
            min-height:@pixel + 124;
            text-align:justify;
        }
    }
    &.ramosCentros {
        .thumbnail {
            h2 {height:@pixel + 49;}
            p {height:@pixel + 49;}
        }
    }
    &.ProjectsPage {
        .thumbnail {
            .contImg {
                overflow:hidden;
                height:@pixel + 149;
            }
            h2 {height:@pixel + 49;}
            p {
                height:@pixel + 139;
                overflow:hidden;
            }
        }
    }
}

#textPage {
    dl dt {
        text-transform:uppercase;
        font-weight:normal;
        color:@first;
        margin-top:@pixel + 19;
    }
}

/* contact */
#contact {
    header {
        font-family:'open sans', sans-serif;
        font-weight:400;
        padding-bottom:@pixel + 39;
        strong {
            font-size:1.8em;
            font-weight:600;
        }
        p {
            font-size:1.5em;
            color:lighten(spin(@second, 8%), 19%);
        }
    }
    #mapaContacto {margin-bottom:@pixel + 24;}
    #contactForm {
        div {
            input {
                width:100%;
            }
            textarea {
                width:100%;
            }
            &.checkboxCont {
                label {width:100%;}
                #id_conditions {
                    max-height:15px;
                    max-width:15px;
                }
                a {color:@second;}
            }
        }
        button,
        #showMap {
            min-width: 150px;
        }
        #contact_submit {float:right;}
    }
}
/* Modal */
#ourProjects,
#map {
    .modal-header {
        padding-bottom:@pixel - 1;
        border:@pixel - 1;
    }
    .modal-body {
        ul {
            padding-top:@pixel + 29;
            li {
                text-align:center;
                .fa {
                    color:@second;
                    display:block;
                    font-size:2.5em;
                    margin-bottom:@pixel + 9;
                }
            }
        }
    }
    .modal-footer {
        margin-top:@pixel - 1;
        padding-top:@pixel - 1;
        border:@pixel - 1;
    }
}

footer {
    position:relative;
    background:@second;
    color:lighten(spin(@second, 8%), 40%);
    margin-top:@pixel + 59;
    padding-top:@pixel + 44;
    address {
        i {
            font-size:2em;
            margin-right:1em;
            color:lighten(spin(@second, 8%), 20%);
        }
    }
    a {
        color:lighten(spin(@second, 8%), 40%);
        &:hover {color:@first;}
    }
    .socials {
        display:block;
        margin-bottom:@pixel - 1;
        li {text-align:center;}
        a {
            background:lighten(spin(@second, 8%), 5%);
            color:lighten(spin(@second, 8%), 90%);
            display:inline-block;
            font-size:@pixel + 14;
            height:@pixel + 34;
            width:@pixel + 34;
            .rounded(@pixel + 19);
            line-height:@pixel + 34;
            margin:@pixel + 9 @pixel;
            text-decoration: none;
            transition: all 0.8s ease 0s;
            &:hover {
                background:lighten(spin(@second, 8%), 15%);
            }
        }
    }
    .subfooter {
        background:darken(spin(@second, 8%), 5%);
        p {padding-top:@pixel + 14;}
    }
}
.modal {
    text-align:justify;
    .modal-body {font-size:0.9em;}
}

@media (max-width: 980px) {
    #team {
        article {
            margin-bottom:@pixel + 39;
            .socialMedia {
                border:@pixel - 1;
            }
        }
    }
    /* contact */
    #contactForm {
        button,
        #showMap {
            min-width:15%;
            &#contact_submit {
                float:right;
            }
        }
    }
}

@media (max-width: 768px) {
    #cookie-bar {
        background:rgba(0,0,0,0.8);
        height:auto;
        line-height:24px;
        color:lighten(spin(@second, 8%), 40%);
        text-align:justify;
        padding:20px;
        position:relative;
        z-index:9999;
        &.fixed {
            position:fixed;
            left:inherit;
            bottom:2%;
            margin-left:2%;
            margin-right:2%;
            width:96%;
        }
    }
    header nav.navbar {
        .navbar-collapse {max-height:inherit;}
        .navbar-brand {
            display:block;
        }
        .navbar-nav li {
            a {
                padding:15px 20px;
            }
        }
        .navbar-nav .open .dropdown-menu > li > a {
            color:@second;
            background:lighten(spin(@first, 8%), 90%);
        }
        .dropdown-menu .divider {display:none;}
    }
    #imgDecoration .claim {
        margin-top:90px;
        h1 {
            font-size:2.1em;
        }
    }
    #contact {
        #contactForm {
            input {
                margin-bottom:@pixel + 9;
            }
            button,
            #showMap {
                min-width:100%;
            }
        }
    }
}

@media (max-width: 495px) {

}