/************* common styles ***************/
    
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    html,
    body {
        background-color: #0C0C0D;
        color: #d4d4d4;
    }
    
    h2,
    h3,
    h4,
    nav ul li a {
        font-family: 'Raleway', sans-serif;
    }
    
    nav ul,
    nav ul li {
        background-color: #BF0426;
    }
    
    nav ul li a {
        color: #f3eeee;
        text-decoration: none;
    }
    
    nav ul li a:hover {
        color: #28282b;
        text-decoration: none;
    }
    
    ul {
        list-style: none;
    }
    
    p {
        font-family: 'Open Sans', sans-serif;
    }
    
    #nuestrosServicios h4 {
        background-color: #2b2b2b;
    }
    
    .flip {
        display: none;
    }
    
    .swiper-slide {
        display: flex;
        justify-content: center;
    }
    
    .cardTile {
        background-size: cover;
        background-position: center;
        text-shadow: 0 0 0.5em #000, 0 0 0.5em #000, 0 0 0.5em #000
    }
    
    .color-uno {
        background-image: url('../img/obrasCiviles.jpeg');
    }
    
    .uno.flip-card-back {
        background-color: #BF0426;
    }
    
    .color-dos {
        background-image: url('../img/hormigonEstructural.jpeg');
    }
    
    .dos.flip-card-back {
        background-color: #47474e;
    }
    
    .color-tres {
        background-image: url('../img/construccionNavesIndustriales.jpg');
    }
    
    .tres.flip-card-back {
        background-color: #b4b4b7;
    }
    
    .color-cuatro {
        background-image: url('../img/pavimento.jpeg');
    }
    
    .cuatro.flip-card-back {
        background-color: #79041a;
    }
    
    .color-cinco {
        background-image: url('../img/herreriaYAceros.jpeg');
    }
    
    .cinco.flip-card-back {
        background-color: #521822;
    }
    
    .color-seis {
        background-image: url('../img/servicioGrua.jpg');
    }
    
    .seis.flip-card-back {
        background-color: #a5364a;
    }
    
    .bold {
        font-weight: bold;
    }
    
    .fa-facebook-square {
        color: #4267b2;
    }
    
    .fa-instagram {
        color: white;
    }
    
    #redesSociales {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    #correoEnviado {
        text-align: center;
    }
    
    @media all and (min-width: 320px) {
        nav ul {
            max-width: 100%;
            display: block;
            margin: 0 auto;
        }
        nav ul li {
            text-align: center;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            box-shadow: inset 0 -0.6em 1em -0.35em rgba(0, 0, 0, 0.17), inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.15), inset 0 0 0em 0.05em rgba(255, 255, 255, 0.12);
        }
        section,
        footer {
            margin: 1em;
        }
        .no-flip div,
        .flip div {
            width: 50%;
            display: flex;
            text-align: center;
            flex-direction: column;
            justify-content: center;
            height: 10em;
            font-size: 0.75em;
        }
        .swiper-slide img {
            max-width: 100%;
            height: 10em;
        }
        #redesSociales {
            font-size: 2em;
        }
        #redesSociales li {
            margin-right: 0.5em;
            margin-left: 0.5em;
        }
        #bannerErnibike img {
            max-width: 100%;
        }
    }
    
    @media all and (min-width:480px) {
        .swiper-slide img {
            height: 15em;
        }
    }
    
    @media all and (min-width: 768px) {
        main,
        footer {
            padding-right: 0.5em;
            padding-left: 0.5em;
        }
        .no-flip,
        .flip {
            width: 75%;
            margin-left: auto;
            margin-right: auto;
        }
        .no-flip div,
        .flip div {
            width: 33%;
            max-width: 33%;
            height: 15em;
            font-size: 1em;
        }
        .form {
            padding-left: 0;
            padding-right: 0;
        }
        #bannerErnibike img {
            max-width: 75%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    @media all and (min-width:1024px) {
        nav ul li {
            display: inline-block;
            width: 33%;
        }
        #bannerErnibike img {
            width: 50%;
        }
        .no-flip {
            display: none;
        }
        .flip {
            display: flex;
        }
        .flip-card {
            background-color: transparent;
            perspective: 1000px;
        }
        .flip-card .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            max-width: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        .flip-card .flip-card-front,
        .flip-card .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            max-width: 100%;
            ;
            backface-visibility: hidden;
        }
        .flip-card-front {
            background-color: #bbb;
            color: black;
        }
        .flip-card-back {
            background-color: dodgerblue;
            color: white;
            transform: rotateY(180deg);
        }
        #redesSociales {
            font-size: 3.5em;
        }
    }