/* Space out content a bit */

body {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background-image: url(pattern.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color:#333
}


/* Everything but the jumbotron gets side spacing for mobile first views */


/* Custom page header */

.header {
    padding-bottom: 1rem;
    /*border-bottom: .05rem solid #e5e5e5;*/
}


/* Make the masthead heading the same height as the navigation */

.header h2 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 3rem;
}


/* Custom page footer */

.footer {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,.125);
}


/* Customize container */


/*@media (min-width: 48em) {
  .container {
    max-width: 46rem;
  }
}*/

.container-narrow>hr {
    margin: 2rem 0;
}


/* Main marketing message and sign up button */

.jumbotron {
    background: #fff;
    text-align: center;
    border-bottom: .05rem solid #e5e5e5;
}

.jumbotron .btn {
    padding: .75rem 1.5rem;
    font-size: 1.5rem;
}


/* Supporting marketing content */

.marketing {
    /*margin: 3rem 0;*/
}

.marketing p+h4 {
    margin-top: 1.5rem;
}


/* Responsive: Portrait tablets and up */

.card-header.jumbotron {
    /*background: transparent url('small_steps.png');*/
    opacity:.5;
    margin-bottom: 0;
}

.card-header.jumbotron h1 {
    margin: 1rem 0;
}

#main .card-header {


    -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}

.btn-secondary {
  background:transparent;
}

.marketing .card {
    border: 0;
}
.card {
    background: transparent;
}
.marketing .card-block {
    padding-left: 0;
    padding-right: 0;
}

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.btn-group-justified .btn, .btn-group-justified .btn-group {
    float: none;
    display: table-cell;
    width: 1%;
}

.btn-group-justified .btn .btn, .btn-group-justified .btn-group .btn {
    width: 100%;
}

.btn-group-justified .btn .dropdown-menu, .btn-group-justified .btn-group .dropdown-menu {
    left: auto;
}

.marketing .card {
    border-top: 1px solid rgba(0,0,0,.125);
}

.marketing .row:first-child div:first-child .card {
    border: 0;
}

.header h2 {
    text-align: center;
}

.contacts {
    text-align: center;
}

.hexagon {
    position: relative;
    width: 140px;
    height: 80.83px;
    margin: 0 auto;
    background-image: url(https://lucafilosofi.com/foto.jpg);
    background-size: auto 161.6581px;
    background-position: center;
}

.hexTop, .hexBottom {
    position: absolute;
    z-index: 1;
    width: 98.99px;
    height: 98.99px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 20.50px;
}


/*counter transform the bg image on the caps*/

.hexTop:after, .hexBottom:after {
    content: "";
    position: absolute;
    width: 140.0000px;
    height: 80.82903768654761px;
    -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-40.4145px);
    -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-40.4145px);
    transform: rotate(45deg) scaleY(1.7321) translateY(-40.4145px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
}

.hexTop {
    top: -49.4975px;
}

.hexTop:after {
    background-position: center top;
}

.hexBottom {
    bottom: -49.4975px;
}

.hexBottom:after {
    background-position: center bottom;
}

.hexagon:after {
    content: "";
    position: absolute;
    top: 0.0000px;
    left: 0;
    width: 140.0000px;
    height: 80.8290px;
    z-index: 2;
    background: inherit;
}

#telephone {
    float: left;
}

#email {
    float: right;
}

#telephone span, #email span {
    display: none;
}

#telephone i, #email i {
    display: block;
    font-size: 30px;
}

.contacts a {
    line-height: 3rem;
}

.lead {
    font-size: 1.50rem;
    font-weight: 300;
}

#main .card-block {
    padding: 2rem 1.25rem;
}

.swiper-container {
    width: 100%;
    height: 150px;
    margin: 0 auto;
}

.swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide i {
    font-size: 8em;
}
a.btn:hover {
  background: #fff;
  opacity: .5
}
#what-i-use {
  margin: 3rem 0 0 0;
  border-top: 1px solid rgba(0,0,0,.125);
}
.sub-heading {
    margin:0;
    padding:1em 0;
    text-align:center;
    color: white;
    font-size: 3em;
}

@media screen and (min-width: 48em) {
    /* Remove the padding we set earlier */
    .header, .marketing, .footer {
        padding-right: 0;
        padding-left: 0;
    }
    /* Space out the masthead */
    .header {
        margin-bottom: 2rem;
    }
    /* Remove the bottom border on the jumbotron for visual effect */
    .jumbotron {
        border-bottom: 0;
    }
    .marketing .card {
        border: 0;
    }
    .header h2 {
        text-align: left;
    }
    .contacts {
        text-align: right;
    }
    #telephone, #email {
        float: none;
    }
    #telephone span, #email span {
        display: block;
    }
    #telephone i, #email i {
        display: none;
    }
}