/* elementos principales */

html { 
    background-color: #c0c0c0;
}
body {
    margin: 0px;
    padding: 0px;
}
.mini-shadow {
    box-shadow: 2px 2px 6px #404040;
}
div#bg {
    position: absolute;
    width: 100%;
}
body.index div#bg {
    background: #ffffff url(./images/fondo.jpg) no-repeat scroll center top;
    height: 50rem;
}
body.pag-contacto div#bg,
body.pag-about-me div#bg, 
body.pag-obras div#bg {
    background: #ffffff url(./images/contacto.jpg) no-repeat scroll center top;
    height: 20rem;
}
#main-content {
    padding-top: 10rem;
}   

/* Barra de navegación y menús */

#navbar {
    box-shadow: 3px 3px 6px #404040;
}
.navbar {
    background: rgba(0, 0, 0, 0) none repeat scroll left top;
    padding:.4rem;
}
.navbar.navbar-fixed-top .container{
    padding: 0px;
    display: inherit; /* background in arkitecno.js */
    /* background-color: rgba(147, 149, 153, 0.19); */
}

.navbar-header {
    position: relative;
}

.navbar-header button.navbar-toggle {
    background-color: #e0e0e0;
    transition: background-color 0.5s;
    border-style: solid;
    border-width: 1px;
    border-color: #1e9fff;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 6px 12px 6px 12px;
    transition: right 1s;
}

.mini-shadow .navbar-header button.navbar-toggle {
    right: 0px;
    opacity: 1;
}

.navbar-header button.navbar-toggle {
    right: -1.5em;
    opacity: .5;
}

.navbar-header button.navbar-toggle:hover {
    background-color: #1e9fff;
}
.navbar-header button.navbar-toggle .icon-bar {
    background-color: #1e9fff;
    transition: background-color 0.5s;
    height: 4px;
    margin-top: 7px;
    margin-bottom: 7px;
    width: 32px;
    border-radius: 4px;
}
.navbar-header button.navbar-toggle:hover .icon-bar {
    background-color: #e0e0e0;
}
#navbar.navbar-collapse {
    color: #606060;
    overflow: hidden;
}

#navbar li {
    background-color: #ffffff;
    border-width: 0px;
    border-style: solid;
    border-top-width: 1px;
    border-top-color: #ffffff;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
}
#navbar a {
   text-align: right;
   font-size: 2.0rem;
   padding: 2.0rem;
   padding-right: 5rem;
   color: #606060;
}
#navbar li.active a {
   color: #ffffff;
   background-color: #1e9fff;
}
#navbar a:hover{
   color: #ffffff;
   background-color: #1e9fff;
}
#navbar li.active a:hover {
   cursor: default;
   background-color: #1e9fff;
   color: #c0c0c0;
}
@media (min-width: 768px) {
    body.index div#bg {
        height: 55rem;
    }
     .navbar-nav {
         float: right;
     }
     #navbar li > a{
        padding-right: 1.5rem; 
        font-size: 1.6rem;
        padding: 1.6rem;
     }
}

#page-title.navbar-brand {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    background-image: url(./images/logo-arkitecno.png);
    background-repeat: no-repeat;
    background-size: 24%;
    background-position-x: 1.4rem;
    background-position-y: .7rem;
    margin: 0px 0px 0px 0px;
    padding: 0rem 0rem 0rem 7rem;
}
#page-title .text {
    position: relative;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    color: rgb(29,107,224);
    font-size: 2.8rem;
    top: 2rem;
 }

 /* Cajas de presentación */

 .row.boxes {
     height: 40rem;
 }
.boxes  > div{
  padding: 2rem;
  color: #ffffff;
}
.box {
    opacity: .85;
    height: 9rem;
 }
 .box .title {
   padding-left: .5rem;
   padding-right: .5rem;
   font-size: 2.2rem;
   font-family: 'Roboto', sans-serif;
   font-weight: 700;
   line-height: 1.2em;
   text-shadow: 1px 2px 5px #606060;
   color: #f8f8f8;
}
.img-box {
   text-align:center;
} 
.img-box img {
    width: 5rem;   
}
 
@media (min-width: 768px) 
{
    .img-box {
        padding-top: 1rem;
    }
    .box {
        height: 20rem;
    }
    .box .title {
        padding-top: 2rem;
        font-size: 2.5rem;
        text-align: center;
    }
    div#bg {
        height: 55rem;
    }
    .row.boxes {
        height: 45rem;
    }
}
 
#box-director {
    background-color: #00c4ff;
    border-color: #0068cf;
}
#box-coordinador {
    background-color: #8b44c2;
    border-color: #68336f;
}
#box-presupuestos {
    background-color: #f00e4e;
    border-color: #b00b38;
}
#box-planes {
    background-color: #f0d211;
    border-color: #b09205;
}

h1#task-title {
    text-align: center;
    font-size: 3rem;
}
#task-list {
    color: #606060;
    padding: 2rem;
    font-size: 1.6rem;
    line-height: normal;
}

/* Descripción obras */

div.marco-imagen img {
    width: 100%;
}

div.img-footer {
    text-align: center;
    font-size: 1.6rem;
    padding: 2.2rem;
    color: #ffffff;
    background-color: #b080d0;
    width: 100%;
}

div.obra-desc h1 {
    float: left;
    color: #606060;
    padding-right: 1rem;
    padding-top: 0rem;
    padding-bottom: 3rem;
}
div.obra-desc p {
    padding: 1.5rem;
    font-size: 1.4rem;
    color: #606060;
}

@media (min-width: 768px) 
{
    h1#task-title {
        font-size: 4.5rem; 
    }
    #task-list {
    font-size: 2rem; 
}
}

@media (min-width: 958px) 
{
    div.img-footer {
        font-size: 2.2rem;
    }
    div.obra-desc p {
        font-size: 1.8rem;
    }
}

/* página about-me */

body.pag-about-me #main-content {
    padding-top: 20rem;
}
#about-me-list {
    padding:1em;
    font-size: 1.2em;
}
#img-profile {
    float: right;
    width: 25vw;
    height: 25vw;
    background-color: #e0c0f0;
    background-image: url(./images/profile-warn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: -3px 3px 6px #505050;
    margin: 2em;
    margin-right: 0em;
    -webkit-transition: background-image 0.5s ease-in-out;
    transition: background-image 0.5s ease-in-out;
}
#img-profile:hover {
    background-color: #f0f0f0;
    background-image: url(./images/profile-logo.png);
}
@media (min-width: 768px) 
{
    #img-profile {
        float: right;
        max-width: 33vw;
        max-height: 33vw;
    }
}

/* página obras */

body.pag-obras #main-content {
    padding-top: 20rem;
}
#main-content > h1 {
    padding-top: 1em;
    padding-bottom: 1em;
}

form.confirm-save button {
    background-color: #f57a7a;
    color: #ffffff;
}
form.confirm-save button:hover {
    background-color: #ff3020;
    color: #ffffff;
}

/* página contacto */

body.pag-contacto #main-content {
    padding-top: 20rem;
}
#mail-form input,
#mail-form textarea,
#mail-form button, 
#mail-form table {
    width: 100%;
    margin-bottom: .2em;
}
#contact-data {
    margin-bottom: 2em;
}

#mail-form.disabled {
    background-color: #c4cac4;
}
#mail-form.disabled input,
#mail-form.disabled textarea,
#mail-form.disabled button {
    border-style: none;
    background-color: #c4cac4;
}

#mail-form .btn:hover {
    background-color: #706040;
    color: #f0f0f0;
}

.form-footer p {
    width: 100%;
    cursor: default;
    color: #306030;
    background-color: #ffffff;
}

/* Pie de páginas */

footer {
    position: relative;
    padding:1.5rem;
    min-height: 5rem;
    background-color: #40404a;
    color: #a0a0a0;
    box-shadow: 2px -2px 5px #a0a0a0;
}

footer a:link,
footer a:visited  {
    color: #9c9c90
}

footer a:hover {
    color: #f0f0c0;
}

.tel-container {
    float: right;
    margin: .5em;
}
p.tel-footer a {
    font-size: 1.5rem;
    padding: .5em;
    color: #b0b0b0;
    border-style: solid;
    border-color: #a0a0a0;
    border-width: 1px;
    border-radius: 8px;
    text-decoration: none;
}

p.tel-footer a:hover,
p.tel-footer a:active {
    border-color: #ffffff;
    color: #ffffff;
    background-color: #000000;;
}