/* 01. Basic Styles & Typography
================================================== */
    /* #Links */
	a:hover, a:focus { color: #ed422c; }
    table th { background: #ed422c; }

/* 03. Header
================================================== */    
    #logo  h1 a span{
        color: #ed422c;
    }
    /* Submenus */
    nav#main-nav ul ul li:hover > a {color:#ed422c;}   
    nav#main-nav > ul > li:hover > a { color: #ed422c; }
    nav#main-nav > ul > li.current_page_item > a { color: #ed422c; }
    nav#main-nav > ul > li.current_page_ancestor > a { color: #ed422c; }
    nav#main-nav > ul > li.current-menu-item > a { color: #ed422c; }
    nav#main-nav > ul > li > ul > li:first-child {border-top: 2px solid #ed422c;}    
    nav#main-nav > ul > li > ul:before {
        border-bottom: 20px solid #ed422c;
    }    
    
    /* Social icons */
    a.social-icon:hover { background: #ed422c; }
    
/* 04.Content
================================================== */  
    /* Home Page */
    #services div.widget .icon {color: #ed422c; }
    .project-nav a:hover { background: #ed422c; }

    /* Main Slider (Flex Slider) */
    .slides > li h3 { background-color: rgb(237, 66, 44); background-color: rgba(237, 66, 44, 0.8); }   
    .flexslider .flex-control-nav li a.flex-active { background-color: rgb(237, 66, 44); background: rgba(237, 66, 44, 0.8); }    
    
    /* Pagination */
    .wp-pagenavi .current, .wp-pagenavi a:hover { background: #ed422c; }
    
/* 05. Sidebar & Widgets
================================================== */    
    .widget .tabs li a.current { border-top: 2px solid #ed422c; }
    .widget_calendar caption { background: #E4402B; }
    .widget_calendar table td#today { background: #E4402B; }
    
/* 06. Footer & Prefooter widget area
================================================== */  
    #footer .widget a:hover { color: #ed422c; }    
    
/* form contacto
================================================== */
form{
    background: #fff;
    padding: 40px 0;
    box-shadow: 0 0 6px 0 rgba(255,255,255,0.8);
    border-radius: 10px;
}

.form{
    width: 100%;
    margin: 0;
}
form .grupo{
    position: relative;
    margin: 15px;
}

input, textarea{
    background: none;
    color: #c6c6c6;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid (#49454567);
}

input:focus{
    outline: none;
    color: #5e5d5d;
}
/*label{
    color: #49454567;
    font-size: 16px;
    position: absolute;
    left: 5px;
    top: 10px;
    transition: 0.5s ease-in-out all;
    pointer-events: none;
}

input:focus~label,
input:valid~label{
    top: -14px;
    font-size: 12px;
    color: #2196f3;
}*/
.barra{
    position: relative;
    display:block;
    width: 100%;
}

.barra::before{
    content: "";
    height: 2px;
    width: 0%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, #585453, #cccccc);
    transition: 0.3s ease width;
    left: 0;
}

input:focus~.barra::before{
    width:100%;

}

button{
    font-family: 'robot';
    background: #585453;
    background: linear-gradient(to right, #C7C7C7, #585453);
    border: none;
    display: block;
    width: 80%;
    margin: 10px auto;
    color: #fff;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

h1,p{
    
    display: display;
    justify-content: center;
    align-items: center;
    text-align: center;

}

@media screen and (max-width:500px) {
    form{
        width:80%;
    }
}