/*
 * Theme Name: Metacots
 * Theme URI: http://www.marccots.com
 * Theme Description: Blank Bootstrap Wordpress Theme by Marc Cots
 * Author: Marc Cots
 * Author URI: http://www.marccots.com/
 * Version: 0.3
 * Tags: bootstrap, white, blank
 * License: license.txt
 * License URI:
*/



/* Apply bootstrap styles */
@import url('css/bootstrap.css');
@import "css/woocommerce-layout.css";


/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-family: 'Arvo', serif; }

img { max-width: 100%;}

h2{ 
    text-transform: uppercase; 
    margin-top: 0;
}

.btn {
    display: inline-block;
    padding: 10px 12px;
    margin-bottom: 15px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    height: 40px;
    border-radius: 0;
    white-space: nowrap;
    min-width: 200px;
    text-transform: uppercase;
}

.btn-default.on { border-color: MediumAquaMarine; color: MediumAquaMarine; }


/* Top Header */ 

 #top-header{
        display: none;
    }

    
#top-header{
    background-color: #F8F8F8;
    color: #333;
    font-size: 0.8rem;
    min-height: 100%;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
    padding: 0 15px;
}

#top-header ul,ol{
    margin-bottom: 3px;
    margin-left: 0px; 
    padding-left: 0px;
}

#top-header  a{
    color: #333;
}

.logo-img { max-height: 100%; }


/*Main Menu*/

.top-main-menu {
    background: #fff none repeat scroll 0 0;
    border-bottom: 1px solid #f0f0f0;
    position: fixed;
    width: 100%;
    z-index: 2;
    height: 75px;
    padding: 15px;
}

.main-menu {
    margin: 0;
}

.navbar-toggled-title{
    float: left;
    display: inline;
    margin: 15px;
}

.navbar { margin-top: 13px; }

.menu-style a{ font-size: 9.5pt; text-transform: uppercase; letter-spacing: 2px; }


/*Header Menu */

#header-menu{
    list-style: none outside none;
    display: inline-block;
    text-align: right;
}

#header-menu > li {
    display: inline;
    padding: 20px 10px 31px 5px;
    position: relative;
    cursor: pointer;
}

.current_page_parent a { color: MediumAquaMarine; }

.sub-menu .current-menu-item { background: rgba(255,255,255,0.3); cursor: default; }
.sub-menu .current-menu-item a { cursor: default; }

.sub-menu {
    position: absolute;
    padding: 0;
    box-sizing: border-box;
    background: MediumAquaMarine;
    text-align: left;
    margin-left: -20px;
    display: none;
    left: 0;
    top: 63px;
}

.sub-menu a { color: #fff; }

.sub-menu.visible { display: inherit; }

.sub-menu > li { 
    display: inherit !important; 
    padding: 10px 30px;
    cursor: pointer;
}

.sub-menu > li:hover { background: rgba(255,255,255,0.3); }


/*Responsive Menu */

#responsive-menu{
    margin-top: 40px;
    position: fixed;
    height: 100%;
    width: 300px;
    padding: 40px 30px;
    top: 0;
    left: -300px;
    background: #333;
    color: #f5f5f5;
    z-index: 1;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#responsive-menu.actiu{ 
    left: 0px; 
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

#responsive-menu ul{ padding: 0; }
#responsive-menu li{ list-style: none; margin-top: 30px; }

.seccio { padding: 60px 0; }

#responsive-menu .sub-menu {
    display: block;
    position: relative;
    background: none;
    top: 0;
    margin: 0 0 10px 10px;
}

#responsive-menu .sub-menu li {
    list-style: none;
    padding: 0px;
    margin-top: 5px;
}

.products-home { width: 20%; margin-bottom: 40px !important; }
.products-home img { width: 140px; height: 140px; }

@media (max-width: 767px){

.top-main-menu{ height: 60px; padding: 13px;}

.navbar{margin-top: 0}

.brand{height: 33px !important; padding: 0 20px !important;}

.products-home { width: 35% !important; }
.products-home img { width: 100px !important; height: 100px !important; }
h1, .h1 {
    font-size: 24px;
}
.titular h3 {
    font-size: 19px;
}

}


/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */

/* Brand */

.brand{
    float: left;
    height: 48px;
    margin: 0;
    /*padding: 10px;*/
    position: relative;
}


#site-title{
    font-size: 2rem;
}

/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------- */



/* post image */


.wp-post-image {
    float: left;
    height: auto;
    margin-bottom: 15px;
    max-width: 100%;
}




/* Sidebar */

.sidebar-wrapper{
    padding-top: 0px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-left: 1px solid transparent;
    border-color: #dcdcdc;
}

.sidebar-wrapper ul {
    padding-left: 25px;
}

.sidebar-wrapper p {
    padding-left: 10px;
}

.sidebar-posts .textwidget, .sidebar-page .textwidget{
    padding-left: 15px;

}

/* Web Wrap */

.web-wrap{min-height: 100vh; z-index: 0; background: #f5f5f5; margin-bottom: 50px;}

@media (max-width: 767px){
.web-wrap { margin-bottom: 98px; }
}

/* Footer */

footer{
    padding-top: 15px;
    padding-bottom: 15px;
    background: #333;
    color: #f5f5f5;
    position: fixed;
    width: 100%;
    z-index: -1;
    bottom: 0;
    font-size: 8pt;
}

.footer h3, .footer h4, .footer h5, .footer h6 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    text-transform: none;
    font-weight: bold;
}





/* Home */

.home-img{
    background-position: center center !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
    height: 450px;
    margin: 0;
    position: relative;
    width: 100%;
    display: table;
}

.titular {
    color: #fff;
    padding: 0 15%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

.titular h3 {
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    font-family: times new roman;
    margin-top: -5px;
    margin-bottom: 30px;
}

.home-productos img {
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.home-productos  li {
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    padding: 5px;
}



.home-instalaciones img {
    height: 150px;
    object-fit: cover;
    object-position: center center;
}

h3.title-post {
    text-align: center;
    margin-top: 15px;
    font-weight: normal;
    color: #333;
}

.home-servicios img { max-height: 255px; object-fit: cover; }

/* Posts */

.post-gallery ul {
    text-align: center;
    padding: 0;
}

.post-gallery li {
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    padding: 5px;
}

.post-gallery img {
    width: 100%;
    object-fit: cover;
}

.posts-page img {
    height: 350px;
    object-fit: cover;
}

.posts-page h3 > a { color: #333; }

/* Products */

.info-page h2 {
    font-size: 15px;
    margin: 30px 0 15px;
}

.img-products { float: right;}

.img-products img { 
    object-fit: cover;
    height: 200px;
    width: 100%;
}

.products-list li {
    float: left;
    list-style: none;
}
.izq .content-products { float: right; }
.izq .img-products { float: left; }

/* Pages */

.page-list { 
    color: #777; 
    font-size: 13px;
    padding: 10px 0;
    list-style: none;
}

/* Servicios */

.content-servicios { padding: 3px; margin: 0; box-sizing: border-box; }

.content-servicios > div {
    background-size: cover !important;
    height: 50vh;
    display: table;
    text-align: center;
    width: 100%;
}

.content-servicios > div > div {
    display: table-cell;
    height: 50vh;
    vertical-align: middle;
    text-shadow: 2px 2px 10px #000;
}

.content-servicios .btn { text-shadow: none; }

/* Contact */

.contact-wrap { 
    background-color: #eee; 
    padding: 30px;
    box-sizing: border-box;
}

.fa {
    color: MediumAquaMarine;
    font-size: 22px;
    vertical-align: middle;
    margin-right: 10px;
}

.post-thumb img {
    height: 350px;
    object-fit: cover;
}

/* MEDIA QUERIES */

/* Small devices (tablets, 768px and up) */

@media (min-width: 768px) {

 #top-header{
        display: block;
    }
    
    .header-widget{
        display: block;
    }

    .header-menu-wrapper{
        float: right;
    }

    .footer-menu-wrapper{
        float: right;
    }

    .footer-menu-wrapper ul, ol{
        margin-left: 10px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    #top-header ul,ol{
        margin-left: 10px;
    }

    .header-menu li:first-child {
        padding-left: 20px;
    }


}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }