﻿

.color-primary-0 { color: #323232 }	/* Main Primary color */
.color-primary-1 { color: #FFA2A2 }
.color-primary-2 { color: #8B8383 }
.color-primary-3 { color: #000000 }
.color-primary-4 { color: #000000 }

.color-complement-0 { color: #282828 }	/* Main Complement color */
.color-complement-1 { color: #99F099 }
.color-complement-2 { color: #696F69 }
.color-complement-3 { color: #000000 }
.color-complement-4 { color: #000000 }

/*
#ex1 {
    perspective: 1000px;
    overflow:hidden;
}

#header1-5:hover {
    overflow:hidden;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0em);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0em);
    z-index:-1;
}


body {
    perspective: 1000px;
}
*/

html {
    font-size: 1.2vw;
}

body {
    font-family: calibri;
    /*overflow-x: hidden;*/
}

.container {
    max-width:96%;
}



.imageFixedTop {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
}

h1 {
    font-family: calibri;
}

    h1.display-1 {
        font-family: calibri;
    }

h2 {
    font-family: calibri;
}

h3.display-2 {
    font-family: calibri;
}

h3.display-3 {
    font-family: calibri;
}



.code {
    width:100%;
    overflow:auto;
    text-align:left;
}

.searchInHomePageDiv {
    position:absolute;
    top:100px;
    left:30vw;
    width:40vw;
}

ul.ui-autocomplete.ui-menu {
    background-color: #fff;
    width: 40vw;
    margin: 0px;
    padding-left: 10px;
}

    ul.ui-autocomplete.ui-menu ul {

    }

    ul.ui-autocomplete.ui-menu li {
        list-style: none;
    }

pre {
    display: block;
    font-family: monospace;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    word-break: break-all;
    word-wrap: break-word;
    width: 1000px;
}

code {

}

.mbr-parallax-background {
    filter: none;
    -webkit-filter: grayscale(0%);

    -webkit-transition: 0.3s;
    transition: 0.3s;
}

    .mbr-parallax-background:hover {
        /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); */
        /*filter: gray; */
        -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    }

.mbr-parallax-background .display-1, .display-2 {
    text-shadow: 1px 1px #999;
}

#formRegistrati {
    background-color:#fff;

    -webkit-transition: 1s;
    transition: 1s;
}

#formRegistrati:hover {
    background-color:rgba(14, 148, 46, 0.55);

}

#form1-c {
    background-color:transparent;
    background-color:#fff;
    /*background: linear-gradient(#fff, #fff);*/

    -webkit-transition: 1s;
    transition: 1s;

}

    #form1-c:hover {
        /*background-color:rgba(3, 99, 112, 0.29);*/
        /*background: linear-gradient(rgba(3, 99, 112, 0.68), rgba(3, 99, 112, 0.29));*/
    }

#footer1-2 {
    background: linear-gradient(rgb(50, 50, 50), rgba(50, 50, 50));
}

#contacts1-d {
    background: linear-gradient(rgb(46, 46, 46), rgba(46, 46, 46)); 
}


#social-buttons1-b {
    background-color:#fff;

    -webkit-transition: 1s;
    transition: 1s;
}

    #social-buttons1-b:hover {
        /*background-color:rgba(18, 99, 168, 0.51);*/
    }

#logoImg {
    max-height:80px;
}

.nav-item {
    text-align: center;
    background-color: rgba(50, 50, 50, 0.30);
    border: 1px solid rgba(0, 0, 0, 0.00);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.00);
    -webkit-transition: all 1s ease;
    transition: all 0.3s ease;
}

.nav-item:hover {
    border:1px solid #fff;
    box-shadow:3px 3px 3px rgba(85, 85, 85, 0.80);
    background-color:rgba(50, 50, 50, 0.70);
}

.nav-link {
    color: #ffffff;
}

.nav-item:hover .nav-link {
    color: #ffffff;
}

.navbar {
    z-index: 9999 !important;
}

.navbar-fixed-top.scrolled {
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.00);
    box-shadow: 3px 3px 3px #ddd;
    transition: background-color 200ms linear;
}

    .navbar-fixed-top.scrolled .nav-item {
        text-align: center;
        background-color: #fff;
        -webkit-transition: all 1s ease;
        transition: all 0.3s ease;
    }

.nav-link.scrolled {
    color: #000000 !important;
}

.navbar-fixed-top.scrolled #logoImg {
    max-height: 40px;
    -webkit-transition: all 1s ease;
    transition: all 0.3s ease;
}


.dropdown-menuOverflow {
    max-height: 80vh;
    overflow: auto;
}


.mbr-section-title {
    /*-webkit-transition: all 3s ease;
    transition: all 3s ease;*/
}

/*
.mbr-section-title:hover {
    position :relative;
    -webkit-animation: mymove 3s infinite; 
    animation: mymoveR 5s infinite;
}
*/

@-webkit-keyframes mymoveR {
    0%   {text-shadow:5px 5px 5px rgba(85, 85, 85, 0.00);}
    50%  {color:#fff; }
    75%  {text-shadow:5px 5px 5px rgba(85, 85, 85, 0.80); }
    100%  {text-shadow:5px 5px 5px rgba(85, 85, 85, 0.00);}
}

@keyframes mymoveR {
    0%   {text-shadow:5px 5px 5px rgba(85, 85, 85, 0.00);}
    50%  {color:#fff; }
    75%  {text-shadow:5px 5px 5px rgba(85, 85, 85, 0.80); }
    100%  {text-shadow:5px 5px 5px rgba(85, 85, 85, 0.00);}
}

.carousel-item:hover {
    position: relative;
    -webkit-animation: effetto3DCarousel 3s infinite;
    animation: effetto3DCarousel 3s infinite;
}


@-webkit-keyframes effetto3DCarousel {
    0% {
        transform: perspective(0px) rotateY(0deg) rotateX(0deg) scale(1);
    }

    50% {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
    }

    100% {
        transform: perspective(0px) rotateY(0deg) rotateX(0deg) scale(1);
    }

}

@keyframes effetto3DCarousel {
    0% {
        transform: perspective(0px) rotateY(0deg) rotateX(0deg) scale(1);
    }

    50% {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
    }

    100% {
        transform: perspective(0px) rotateY(0deg) rotateX(0deg) scale(1);
    }
}



.mbr-cards {
    margin: 60px 0px 60px 0px;
    background-color: #fff !important;
}


.card {
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px rgba(216, 216, 216, 0.70);
    background-image: linear-gradient(#fff, #fff);
    margin: 30px 0px 30px 0px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color:#fff !important;
}

    .card:hover {
        box-shadow: 5px 5px 5px rgba(85, 85, 85, 0.90);
        background-image: linear-gradient(#e5ecee, #cbdadf);
    }

        .card:hover img {
            transform: perspective(0px) rotateY(0deg) rotateX(0deg) scale(1.1);
        }

h4.card-title {
    text-align:center;
    padding:3px;
    height:100px;
}

.card-img {
    position:relative;
    overflow:hidden;

    transition: 0.3s;
}

.card-img-top {
    position:relative;

    transition: 0.3s;
}

.card-img-top:hover {
    position:relative;

    background-size: auto 110%;
}



#loadingDiv {
    position:fixed;
    z-index:100;
    top:40%;
    left:40%;
}

a {
    color: #2f1b93;
}

a:hover {
    color: #25166f;
}

.trTh {
	background-color:#bbbbbb;
}

.trChiaro {
	background-color:#eeeeee;
}

.trScuro  {
	background-color:#cccccc;
}

/*
-webkit-filter: grayscale();
filter: grayscale(); 
*/

.btn {
    color:#ffffff !important;
}

  /*--- Video in Home Page --------------------------------------------------------------------------------------*/
.relativeMp4Div {
    position: relative;
    top: 0px;
    /*background: linear-gradient(rgb(50,50,50), rgb(46,46,46));*/
    /*width:100vw;*/
}


    .relativeMp4Div .absoluteMp4Div {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        top: 0;
        left: 0;
        bottom: 0;
        
    }


        .relativeMp4Div .absoluteMp4Div .videoMP4 {
            /*position: absolute;*/
            min-width: 100%;
            min-height: 100vh;
            overflow: hidden;
            
            /*margin: auto 1vw;*/
        }

/*--- BreadCrumb --------------------------------------------------------*/

.breadcrumbDiv {
    display:inline-block;
    background:none;
    text-align:left;

    border:0px solid #111;
    width:100%;
}

.breadcrumbFirst {
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

  display:inline-block;
}

.breadcrumbSeparatore {
  min-height: 1px;
  padding-right: 0px;
  padding-left: 0px;
  margin-top:3px;

  display:inline-block;
}

.breadcrumbSeparatore img {
    width:1.5vw;
    margin-top:-5px;
}

.breadcrumb {
  min-height: 0px;
  padding-right: 15px;
  padding-left: 15px;

  /*font-size:1.3vw;*/

  background-color:transparent;

    /*float: left;*/
  display:inline-block;
}

    .breadcrumbFirst a,
    .breadcrumbFirst a:link,
    .breadcrumbFirst a:before,
    .breadcrumbFirst a:after,
    .breadcrumb a,
    .breadcrumb a:link,
    .breadcrumb a:before,
    .breadcrumb a:after {
        color: #555;

        /*font-size:1.3vw;*/

        -webkit-transition: color 0.5s, font-weight 0.5s;
        transition: color 0.5s;
    }

        .breadcrumbFirst a:hover,
        .breadcrumb a:hover {
            color: #356895;
        }


/* --- Menu prodotti ----------------------------------------------------------------------------------------*/

.menuNew {
    width:4vw;
}
/*
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 0px;
    border-right:1px solid #111;

    transition: 0.5s;
}

.sidenav a {
    padding: 3px;
    text-decoration: none;
    font-size:1em;
    color: #818181;
    display: block;
    transition: 0.3s
}

.prodottoMenuLeftDiv{
    margin-top:0px;
    padding-top:50px;
}
*/

.sidenav a:hover, .offcanvas a:focus {
    color: #092982;
    /*margin-left:10px;*/
}

.sidenav .closebtn {
    font-size:4em;

    margin:0px 20px 0px 0px;
    text-align:right;
    color:#999;
}

.sidenav .closebtn:hover {
    color:#111;
}


/*--- Paginazione ------------------------------------------------------- */

/*
 .pagination ul li {
      list-style-type:none;
      display: inline;
      float:left;
      margin: 0px;
      padding: 20px 10px 20px 10px;
      border-top:4px solid transparent;
      transition: 0.3s;
  }
*/
 
ul.pagination {
    list-style-type:none;
    display: inline-block;
    float:left;
    
    padding: 0;
    margin: 0;
}
     

ul.pagination .paginationLi {
    display: inline;
    float:left;
    
}

ul.pagination .paginationLi a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

ul.pagination .paginationLi a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination .paginationLi a:hover:not(.active) {background-color: #ddd;}


/*--- CheckOutMini ------------------------------------------------------- */

  .modal-header, .modal-header h6, .modal-header .closebtn {
      background-color: #333;
      color: #fff;
      font-size:1.4vw;
      font-weight:bold;
      text-align: center;
      padding: 15px 15px 15px 15px;
      border:0px;
  }
  .modal-body {
      padding: 15px 15px 15px 15px;
      background-color:#fff;
      
  }


/*--- Categoria List Menu Left -------------------------------------------------------*/

.sliderText {
    border:none;
    background-color:#fff;
    width:60px;
}

.sliderPrezzi {
    width:100%;
}

.CategoriaNav li label {
    margin-left:3px;

    font-size:0.9em;
}

.CategoriaNav a {
    text-decoration:none;
}

.CategoriaNodo0Div {
    /*background: #555;*/
    color: #000;
    /*list-style-image: url('/images/FrecciaDxMenu.png');*/
    list-style: none;
    font-weight: bold;
    font-size: 0.9em;
    margin: 20px 5px 0px -30px;
    padding: 3px;
    border-bottom: 1px solid #555;
    
    box-shadow:5px 5px 5px #fff;
    border-radius: 5px 5px 0px 0px;
    
    transition: 0.3s;
}


.CategoriaNodo1Div {
    background: #fff;
    /*list-style-image: url('/images/FrecciaDxMenu.png');*/
    list-style: none;
    font-size: 0.85em;
    margin: 3px 5px 0px -30px;
    padding: 0px 0px 0px 3px;
    border-bottom: 1px solid #999;
    box-shadow: 5px 5px 5px #fff;
    border-radius: 5px 5px 0px 0px;
    transition: 0.3s;
}

.openCloseCategoriaDiv {
    float:right;
}

.openCloseCategoriaDiv a {
    font-size:1em;
    font-weight:bold;
}

.CategoriaNodoFiglioDiv {
    list-style:none;
    margin:0px 0px 0px -20px;
}



.CategoriaNodo2Div {
    background: #fff;
    list-style:none;
    
    font-size:0.8em;

    margin:0px 5px 0px -30px;
    padding: 0px 0px 0px 3px;

    border-bottom:1px solid #CCC;
    /*box-shadow:5px 5px 5px #555;*/
    /*border-radius: 5px 5px 0px 0px;*/

    transition: 0.3s;
}

.CategoriaNodo3Div {
    background: #fff;
    list-style:none;
    
    font-size:0.75em;

    margin:0px 5px 0px -30px;
    padding: 0px 0px 0px 3px;

    border-bottom:1px solid #eee;
    /*box-shadow:5px 5px 5px #555;*/
    /*border-radius: 5px 5px 0px 0px;*/

    transition: 0.3s;
}


.CategoriaNodo0Div .checkbox,
.CategoriaNodo1Div .checkbox,
.CategoriaNodo2Div .checkbox,
.CategoriaNodo3Div .checkbox {
    margin:1px;
    padding:3px;
    margin-right:5px;
    font-size:0.9em;

    transition: 0.3s;
}

.CategoriaNodo0Div:hover {
    background: #fff;
    color: #555;

    box-shadow: 5px 5px 5px #555;
    border-radius: 5px 5px 0px 0px;
}

.CategoriaNodo0Div .checkbox label {
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
}

.CategoriaNodo1Div .checkbox label,
.CategoriaNodo2Div .checkbox label,
.CategoriaNodo3Div .checkbox label {
    font-size: 1em
}

.CategoriaNodo1Div:hover,
.CategoriaNodo2Div:hover,
.CategoriaNodo3Div:hover {
    box-shadow: 5px 5px 5px #555;
    border-radius: 5px 5px 0px 0px;
}

/*--- Chat ------------------------------------------------------------------------------------------------------------*/
.chatDiv {
    z-index:9999;
    position:fixed;
    position: expression(fixed);
    bottom:0px;
    right:20px;
    width:30%;
    height:auto;
    /*overflow:auto;*/
    border:1px solid #1b9608;

    border-radius: 5px 5px 5px 5px;
    box-shadow:0px 5px 5px #555;

    background-color:#ebf3e9;
    padding:5px;
    color:#111;
}

.chatDiv div, button, input  {
    border-radius: 5px 5px 5px 5px;
}

.chatDiv a {
    z-index:100;
}


.liveChatDiv {
    position:fixed;
    position: expression(fixed);
    bottom:0px;
    right:15px;
    height:auto;
    border:0px solid #000;
    /*
    box-shadow:0px 5px 5px #555;
    background-color:#eee;
    padding:5px;
    color:#111;
    */
}


.chatDiv .messaggiDiv {
    border:1px solid #999;
    padding:3px;
    height:300px;
    overflow:auto;
    /*width:100%;*/
    background-color:#ccc;
}

.chatDiv .messaggiDiv .messaggioAdmin {
    border-radius: 5px 5px 5px 5px;
    background-color:#afe8ab;
    padding:3px;
    font-size:0.8em;
    margin:3px 1px 3px 15px;
    box-shadow:0px 5px 5px #555;
}

.chatDiv .messaggiDiv .messaggioAdmin b {
    font-weight:normal;
}

.chatDiv .messaggiDiv .messaggioUser {
    border-radius: 5px 5px 5px 5px;
    background-color:#fff;
    padding:3px;
    font-size:0.8em;
    margin:3px 15px 3px 1px;
    box-shadow:0px 5px 5px #555;
}

.cookieDiv {
    position:fixed;
    padding:5px 10px 0px 10px;
    bottom:0;
    border-top:1px solid #111;
    color:#fff;
    background-color:#282828;
    opacity: 0.9;
    width:100%;

    z-index:100;
}


.cookieDiv p {
    padding:0;
    margin:0;
    font-size:1.2vw;
    text-align:justify;
}

.borderShadow
{
    border:0px solid #000;
    box-shadow:5px 5px 5px #555;
}


#BillingInfoDiv label {
    font-weight:bold;
    text-align:left;
}

#BillingInfoDiv label:after {
  content: ": ";
}

.littleSpan {
    font-size:0.7em;
    text-align:justify;
}

.marqueeDiv {
    position:fixed;
    bottom:0px;
    z-index:1000 !important;
    background-color:#fff;
    color:#000;
}

    .marqueeDiv span {
        padding-right:50px;
        font-weight:bold;
    }

    .mobileVisible {
        display: none;
    }
#mySidenav {
    display: block;
}

.chiSiamo {
    background-color: #000;
    padding: 20px;
    opacity: 0.5;
    color: #fff;
}



.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
        opacity: 1;
    }

    .slider:-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #04AA6D;
        cursor: pointer;
    }

    .slider:-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #04AA6D;
        cursor: pointer;
    }


/*---------------------------------------------------------------------------------------------------------------------*/
/*--- Mobile CSS ------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 770px) {

    .breadcrumbDiv {
        /*padding-bottom:0px;*/
    }

    .menuNewDiv {
        margin-bottom:25px;
    }

    #logoImg {
        max-height: 40px;
    }

    html {
        font-size: 1em;
    }

    .container {
        max-width: 100%;
    }

    .imageFixedTop {
        object-fit: cover;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        max-height: 90vh;
        min-width: 100%;
    }

    .bg-color {
        background-color: #ffffff !important;
    }

    .navbar-fixed-top {
        background-color: #fff !important;
        transition: background-color 200ms linear;
    }

    .navbar-fixed-top .nav-item {
        text-align: center;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.00);
        box-shadow: 0px 0px 0px #fff;
        -webkit-transition: all 1s ease;
        transition: all 0.3s ease;
    }

    .nav-link {
        color: #000000 !important;
    }
    

    .menuNew {
        width:29px;
    }

    .dropdown-menuOverflow {
        max-height: none;
        overflow: unset;
    }

    .card-img-top {
        overflow:auto;
        max-width:90vw;
    }

    .mobileVisible {
        display: block;
    }
    #mySidenav {
        display: none;
    }

    .checkOutCol {
        display:none;
    }

    .display-2 {
        margin-top: 60px;
    }

    h1 {
        font-size: 1.5em !important;
    }

    h2 {
        font-size: 1.4em !important;
    }

    h3 {
        font-size: 1.3em !important;
    }

    h3 {
        font-size: 1.2em !important;
    }

    /*--- CheckOutMini ------------------------------------------------------- */
    .modal-header, .modal-header h6, .modal-header .closebtn {
        font-size: 1em;
    }

        .cookieDiv p {
        padding: 0;
        margin: 0;
        font-size: 0.7em;
    }

    /*--- Chat ------------------------------------------------------------------------------------------------------------*/
    .chatDiv {
        width: 90%;
        height: 90%;
    }

        .chatDiv .messaggiDiv {
            height: 150px;
        }

    .imageClipboardDiv {
        width: 80vw;
        /*overflow-x:auto;*/
    }

    .imageClipboardDiv img {
        width: 80%;
        
    }
}