/* ===================================
    Background color
====================================== */

.bg-transparent {background-color: transparent;}
.bg-white {background-color:#fff;}
.bg-black {background-color:#000;}
.bg-extra-dark-gray {background-color:#1c1c1c;}



.bg-blue-dark {background-color:#2C3E50;}
.bg-blue-dark-light {background-color:#395169;}

.bg-blue {background-color:#2C3E50;}
.bg-blue-light {background-color:#395169;}


.bg-dark-gray {background-color:#757575;}
.bg-extra-medium-gray {background-color:#939393;}
.bg-medium-gray {background-color:#dbdbdb;}
.bg-extra-light-gray {background-color:#e0e0e0}
.bg-medium-light-gray {background-color:#ededed}
.bg-light-gray {background-color:#f7f7f7}
.bg-very-light-gray {background-color:#fafafa}
.bg-deep-pink {background-color:#E83B23;}
.bg-transparent-white { background-color: rgba(255,255,255,0.3); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(37%, rgba(255,255,255,0)), color-stop(96%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 37%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); }
.bg-transparent-black { background-color: rgba(0,0,0,0); background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(37%, rgba(0,0,0,0)), color-stop(96%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,1) 96%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 ); }
.bg-white-opacity { background-color: rgba(255, 255, 255, 0.85); }
.bg-black-opacity { background-color: rgba(0, 0, 0, 0.85); }
.bg-black-opacity-light { background-color: rgba(0, 0, 0, 0.5); }
.bg-deep-pink-opacity {background-color: rgba(255, 33, 79, 0.85);}
.bg-charcoal-gray{background-color: #0e0f10;}




/* text color */
.text-white {color:#FFF}
.text-black {color:#000}
.text-extra-dark-gray {color:#232323}
.text-dark-gray {color:#626262}
.text-extra-medium-gray {color:#757575}
.text-medium-gray {color:#939393}
.text-extra-light-gray {color:#b7b7b7}
.text-light-gray {color:#d6d5d5}
.text-very-light-gray {color:#ededed}
.text-deep-pink {color:#E83B23}
.text-orange {color:#E83B23}
.text-extra-dark-blue {color:#2c3e50;}
.text-dark-gray-blue {color:#395169;}

.text-dark-blue{color:#2c3e50;}
.text-blue{color:#395169;}

/* button background */

.btn.btn-blu {background:#2C3E50; border-color: #2C3E50; color: #fff}
.btn.btn-blu:hover, .btn.btn-blu:focus {background: transparent; color: #2C3E50}

.btn.btn-bluex {background:#2C3E50; border-color: #2C3E50; color: #fff}
.btn.btn-bluex:hover, .btn.btn-bluex:focus {background: transparent; color: #2C3E50}

.btn.btn-blue-light {background:#395169; border-color: #395169; color: #fff}
.btn.btn-blue-light:hover, .btn.btn-blue-light:focus {background: transparent; color: #395169}


/* button transparent */
.btn.btn-transparent-blue {background: transparent; border-color: #2C3E50; color: #2C3E50}
.btn.btn-transparent-blue:hover, .btn.btn-transparent-blue:focus {background: #2C3E50; border-color: #2C3E50; color: #fff}

.btn.btn-transparent-blue-light {background: transparent; border-color: #395169; color: #395169}
.btn.btn-transparent-blue-light:hover, .btn.btn-blue-light:focus {background: #395169; border-color: #395169; color: #fff}
/* ===================================
    Icone Float Social in Blog
====================================== */
@media (max-width: 768px) {
  .icon-barx {display:none;}
}
.icon-barx {
  z-index:1;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-barx a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-barx a:hover {
    background-color: #000;
}

.fb {
  background: #3B5998;
  color: white;
}

.tw {
  background: #55ACEE;
  color: white;
}

.gg {
  background: #dd4b39;
  color: white;
}

.lk {
  background: #007bb5;
  color: white;
}

.yt {
  background: #bb0000;
  color: white;
}
/* ===================================
    Form invio mail
====================================== */
.fileContainer {
    overflow: hidden;
    position: relative;
}
.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
input[type=text] {
  width: 99%;
    -webkit-transition:border-bottom width 0.4s ease-in-out;
    transition: border-bottom width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
    border-bottom:1px solid #ff214f;
}

/* NAVBAR E PULSANTE */

nav.navbar.bootsnav .btn-hamburger .navbar-toggle {
margin: 0;
top: 5px;
left: -5px;
}

/* .white-link .mobile-toggle span {
    background: #000 !important;
} */

.btnx.focus, .btnx:focus, .btnx:hover {
    color: #333;
    text-decoration: none;
}
.border-none {
    border-style: none !important;
}
.btnx {
    display: inline-block;
    border: 2px solid transparent;
    letter-spacing: .5px;
    line-height: inherit;
    border-radius: 0;
    text-transform: uppercase;
    width: auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}


/*  HOME SCRITTA EMAIL X  CELLULARE   */
 @media (max-width: 767px){
    h2.x {
    font-size: 23px;
    line-height: 36px;
    }

    .blog-grid.blog-4col li, .blog-grid.blog-3col li {
        width: 49%;
    }
    .blog-grid.gutter-large li {
        padding: 7px 7px;
    }

  }


/* BLOCCO 4 FASI IN SERVIZI */

@media (max-width: 767px){
    .tab-style1 .nav-tabs li {
        width: 22% !important;
        margin-bottom: 30px;
    }
}

/* PADDING SECTION */
@media (max-width: 767px){
    section#about{
        padding: 85px 0 !important;
    }
}


/* RIDIMENSIONA I SERVIZI IN HOME PAGE*/

@media (max-width: 768px){
    .scomparsa {
        display:none !important;
    }
    .visibile{
        display: inline !important;
    }
}
@media (max-width: 768px){
    .scomparsa2 {
        display:none !important;
    }
    .visibile2{
        display: inline !important;
    }
}
@media (min-width: 769px){
    .scomparsa2 {
        display:inline !important;
    }
    .visibile2{
        display: none !important;
    }
}

/* MODULO DI CONTATTO HOME PAGE*/

.flow-text {
    font-size: 2.0rem;line-height: 1.8em;
    }
    .card-panel {
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
    }
    .center, .center-align {
        text-align: center;
    }
    .combustion-yellow-skin .btn, .giallo, .combustion-yellow-skin .btn-large {
        color: #191919;
        background-color: #ffc400;
    }
    .btn-floating:hover, .btn-large:hover, .btn:hover, .z-depth-1-half {
        box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
    }
    .waves-effect {
        position: relative;
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        vertical-align: middle;
        z-index: 1;
        will-change: opacity,transform;
        transition: all .3s ease-out;
    }
    .send-message span {
        display: inline-block;
        min-width: 50px;
        padding: 0 5px;
        background: hsla(0,0%,62%,.1);
        outline: none;
    }
    .hoverable {
        transition: box-shadow .25s;
        box-shadow: 0
    }

    .hoverable:hover {
        transition: box-shadow .25s;
        box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
    }

    .card-panel {
        padding:50px
    }

    .card,.card-panel {
        transition: box-shadow .25s;
        margin: .5rem 0 1rem;
        border-radius: 2px;
        background-color: #fff;
    }

    .card {
        position: relative
    }

    /* spinner */

.ombra{box-shadow: 0 -3px 19px -10px rgb(0, 0, 0);}

.fab {
    line-height: 2;
}
.ring-green-skin .navbar-fixed {
    height: 0
}

.ring-green-skin .btn,.ring-green-skin .btn-large {
    color: #191919;
    background-color: #69f0ae
}

.ring-green-skin .hero {
    position: relative;
    overflow: hidden;
    background-color: #69f0ae
}

.ring-green-skin .hero h1 {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0 3rem;
    margin: 0;
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #64dd17;
    text-transform: uppercase;
    mix-blend-mode: difference
}

.ring-green-skin .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 650px;
    height: 600px;
    margin-top: -300px;
    margin-left: -325px
}

.ring-green-skin .ring:after,.ring-green-skin .ring:before {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    content: ''
}

.ring-green-skin .ring:after {
    -webkit-animation: clockwise 10s linear infinite;
    animation: clockwise 10s linear infinite;
    box-shadow: inset 0 33.33333px 0 rgba(0,228,173,.7),inset 33.33333px 0 0 rgba(49,255,206,.7),inset -33.33333px 0 rgba(151,255,230,.7),inset -33.33333px 0 0 rgba(228,255,248,.7)
}

.ring-green-skin .ring:before {
    -webkit-animation: counterclockwise 10s linear infinite;
    animation: counterclockwise 10s linear infinite;
    box-shadow: inset 0 33.33333px 0 rgba(1,27,174,.7),inset 33.33333px 0 0 rgba(1,39,250,.7),inset -33.33333px 0 rgba(99,122,254,.7),inset -33.33333px 0 0 rgba(175,187,255,.7)
}

.ring-pink-skin .navbar-fixed {
    height: 0
}

.ring-pink-skin .btn,.ring-pink-skin .btn-large {
    color: #191919;
    background-color: #81d4fa
}

.ring-pink-skin .hero {
    position: relative;
    overflow: hidden;
    background-color: #81d4fa
}

.ring-pink-skin .hero h1 {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0 3rem;
    margin: 0;
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase
}

.ring-pink-skin .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -325px
}

.ring-pink-skin .ring:after,.ring-pink-skin .ring:before {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    content: ''
}

.ring-pink-skin .ring:after {
    -webkit-animation: clockwise 15s linear infinite;
    animation: clockwise 15s linear infinite;
    box-shadow: inset 0 33.33333px 0 rgba(158,4,184,.7),inset 33.33333px 0 0 rgba(216,14,250,.7),inset -33.33333px 0 rgba(232,114,252,.7),inset -33.33333px 0 0 rgba(244,189,254,.7)
}

.ring-pink-skin .ring.mobile:after {
    box-shadow: inset 0 15px 0 rgba(158,4,184,.7),inset 15px 0 0 rgba(216,14,250,.7),inset -15px 0 rgba(232,114,252,.7),inset -15px 0 0 rgba(244,189,254,.7)
}

.ring-pink-skin .ring:before {
    -webkit-animation: counterclockwise 15s linear infinite;
    animation: counterclockwise 15s linear infinite;
    box-shadow: inset 0 33.33333px 0 rgba(50,0,159,.7),inset 33.33333px 0 0 rgba(73,0,235,.7),inset -33.33333px 0 rgba(136,82,255,.7),inset -33.33333px 0 0 rgba(189,159,255,.7)
}

.ring-pink-skin .ring.mobile:before {
    box-shadow: inset 0 15px 0 rgba(50,0,159,.7),inset 15px 0 0 rgba(73,0,235,.7),inset -15px 0 rgba(136,82,255,.7),inset -15px 0 0 rgba(189,159,255,.7)
}

@-webkit-keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1)
    }

    50% {
        -webkit-transform: rotate(180deg) scaleX(.87) scaleY(.95)
    }

    to {
        -webkit-transform: rotate(1turn) scaleX(1) scaleY(1)
    }
}

@keyframes clockwise {
    0% {
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
        transform: rotate(0deg) scaleX(1) scaleY(1)
    }

    50% {
        -webkit-transform: rotate(180deg) scaleX(.87) scaleY(.95);
        transform: rotate(180deg) scaleX(.87) scaleY(.95)
    }

    to {
        -webkit-transform: rotate(1turn) scaleX(1) scaleY(1);
        transform: rotate(1turn) scaleX(1) scaleY(1)
    }
}

@-webkit-keyframes counterclockwise {
    0% {
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1)
    }

    50% {
        -webkit-transform: rotate(-180deg) scaleX(.98) scaleY(.89)
    }

    to {
        -webkit-transform: rotate(-1turn) scaleX(1) scaleY(1)
    }
}

@keyframes counterclockwise {
    0% {
        -webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
        transform: rotate(0deg) scaleX(1) scaleY(1)
    }

    50% {
        -webkit-transform: rotate(-180deg) scaleX(.98) scaleY(.89);
        transform: rotate(-180deg) scaleX(.98) scaleY(.89)
    }

    to {
        -webkit-transform: rotate(-1turn) scaleX(1) scaleY(1);
        transform: rotate(-1turn) scaleX(1) scaleY(1)
    }
}

.tunnel-skin .navbar-fixed {
    height: 0
}

.tunnel-skin .btn,.tunnel-skin .btn-large {
    color: #fff;
    background-color: #9c27b0
}

.tunnel-skin .tunnel canvas {
    background-color: #9c27b0
}

.tunnel-skin .tunnel h1 {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 100%;
    padding: 0 2rem;
    margin: 0;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase
}

.waves-light-blue-skin .navbar-fixed {
    height: 0
}

.waves-light-blue-skin .btn,.waves-light-blue-skin .btn-large {
    color: #fff;
    background-color: #2196f3
}

.waves-light-blue-skin .waves {
    background-color: #2196f3
}

.waves-light-blue-skin .hero {
    position: relative;
    overflow: hidden
}

.waves-light-blue-skin .hero canvas {
    position: absolute;
    top: 0;
    left: 0
}

.waves-light-blue-skin h1 {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    top: 20%;
    left: 50%;
    z-index: 10;
    width: 90%;
    font-size: 4.5rem;
    font-weight: 200;
    letter-spacing: -3px;
    color: #fff;
    text-align: left
}

.waves-deep-purple-skin .navbar-fixed {
    height: 0
}

.waves-deep-purple-skin .btn,.waves-deep-purple-skin .btn-large {
    color: #fff;
    background-color: #651fff
}

.waves-deep-purple-skin .waves {
    background-color: #651fff
}

.waves-deep-purple-skin .hero {
    position: relative;
    overflow: hidden
}

.waves-deep-purple-skin .hero canvas {
    position: absolute;
    top: 0;
    left: 0
}

.waves-deep-purple-skin h1 {
    position: absolute;
    top: 20%;
    z-index: 10;
    width: 100%;
    padding: 0 3rem;
    font-size: 4.5rem;
    font-weight: 200;
    letter-spacing: -3px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 20px rgba(101,31,255,.8)
}

.fuzzy-hue-skin .navbar-fixed {
    height: 0
}

.fuzzy-hue-skin .btn,.fuzzy-hue-skin .btn-large {
    color: #fff;
    background-color: #304ffe
}

.fuzzy-hue-skin .hero {
    background-color: #f5f5f5
}

.fuzzy-hue-skin h1 {
    position: absolute;
    top: 30%;
    z-index: 10;
    width: 100%;
    padding: 0 4rem;
    margin: 0;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #191919;
    text-align: center;
    text-transform: uppercase
}

.fuzzy-saturation-skin .navbar-fixed {
    height: 0
}

.fuzzy-saturation-skin .btn,.fuzzy-saturation-skin .btn-large {
    color: #fff;
    background-color: #191919
}

.fuzzy-saturation-skin .hero {
    background-color: #f5f5f5
}

.fuzzy-saturation-skin h1 {
    position: absolute;
    top: 30%;
    z-index: 10;
    width: 100%;
    padding: 0 4rem;
    margin: 0;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #191919;
    text-align: center;
    text-transform: uppercase
}

.fuzzy-saturation-skin #map,.fuzzy-saturation-skin .rectangle,.fuzzy-saturation-skin .rectangle-50,.fuzzy-saturation-skin .social a,.fuzzy-saturation-skin .square,.fuzzy-saturation-skin img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.combustion-purple-skin .navbar-fixed {
    height: 0
}

.combustion-purple-skin .btn,.combustion-purple-skin .btn-large {
    color: #fff;
    background-color: #7c4dff
}

.combustion-purple-skin .hero {
    background-color: #f5f5f5
}


.combustion-yellow-skin .navbar-fixed {
    height: 0
}

.combustion-yellow-skin .btn,.combustion-yellow-skin .btn-large {
    color: #191919;
    background-color: #ffc400
}

.combustion-yellow-skin .hero {
    background-color: #f5f5f5
}
@media screen and (min-width: 621px){
.combustion-yellow-skin h1 {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 100%;
    padding: 0 3rem;
    margin: 0;
    font-size: 8rem;
    font-weight: 400;
    line-height: 9rem;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase
}
.combustion-purple-skin h1 {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 100%;
    padding: 0 3rem;
    margin: 0;
    font-size: 8rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #ff4081;
    text-align: center;
    text-transform: uppercase;
    mix-blend-mode: difference
}


}

@media screen and (max-width: 620px){
    .combustion-yellow-skin h1{
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        z-index: 10;
        width: 100%;
        padding: 0 3rem;
        margin: 0;
        font-size: 6rem;
        font-weight: 400;
        line-height: 8rem;
        letter-spacing: 2px;
        color: #fff;
        text-align: center;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: uppercase;
    }
    .combustion-purple-skin h1 {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        z-index: 10;
        width: 100%;
        padding: 0 3rem;
        margin: 0;
        font-size: 6rem;
        font-weight: 400;
        line-height: 8rem;
        letter-spacing: 2px;
        color: #ff4081;
        text-align: center;
        text-transform: uppercase;
        mix-blend-mode: difference
    }

}