/* Partial con le informazioni base del progetto - Mixin, Plaholder, variabili, font */

/* Colori progetto */                        
$White: #ffffff;
$Black: #000000;
$Text: #333333;
$ProjectColor: #58585a;
$Trasp: transparent;

$DarkGrey: #58585a;
$LightGrey: #f1efef;
$DarkGreen: #00714b;
$Olive: #9ea572;
$Green: #c2cf34;
$LightGreen: #e1eec5;

/* Stili di reset */
a:hover { text-decoration: none; }
a, a:hover, a:active, a:focus { outline: 0; }
ol, ul { list-style: none; padding: 0; margin: 0; }
ol li, ul li { display: inline-block; margin: 0 5px; vertical-align: top; }

a { color: black; }
a:hover { color: $DarkGreen; }

img { max-width:100%; height: auto; }

/* Rimuove il colore giallo dell'autocomplete di chrome negli input */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #e5e5e5 inset !important;
    border: 1px solid #e5e5e5 !important;
    -webkit-text-fill-color: $Black !important;
}

.BLOBBlockAlignLeft, .BLOBBlockAlignRight { float: none; }
.NoPadSx { padding-left: 0 !important; }
.NoPadDx { padding-right: 0 !important; }
.NoPad { padding-left: 0 !important; padding-right: 0 !important; }

.PadUpDown { padding: 50px 0; }
.PadUp { padding: 50px 0 0 0; }
.PadDown { padding: 0 0 50px 0; }
.PadUpDownBig { padding: 100px 0; }

.BLOBHidden { display: none; }
.BoxFloatDx { display: block; float: right; margin: 0 0 30px 30px; }




/* Oggetti editoriali comuni */
h1, h3, h4, h5 { 
  margin: 0 0 15px 0;
  font-family: 'Lato', sans-serif; font-weight: 600;
}

h1 {
  font-size: 36px;
  line-height: 36px;
}
h2 {
  color: black;
}

.viewPar p, .viewParCell p, p {
  @extend %Par; 
}  

ul.viewUL, ol.viewOL { 
  @extend %Par;
  & li {
    list-style-position: outside;
    margin-left: 30px;
    margin-bottom: 10px;
    display: block; 
  }
}
ul.viewUL {
  &.BLOBListSymbolDisc {
    & li {
      &:before {
        content:" ";
        height: 8px;
        width: 8px;
        display: inline-block;
        margin: -5px 10px 0 -17px;
        border-radius:50%;
        background-color: $Green;
        vertical-align: middle;
        position:relative;
      }
    }
  }
  &.BLOBListSymbolCircle {
    & li {
      &:before {
        content:" ";
        height: 8px;
        width: 8px;
        display: inline-block;
        margin: -5px 10px 0 -17px;
        border-radius:50%;
        border:2px solid $Green;
        background-color:$Trasp;
        vertical-align: middle;
        position:relative;
      }
    }
  }
  &.BLOBListSymbolSquare {
    & li {
      &:before {
        content:" ";
        height: 6px;
        width: 6px;
        display: inline-block;
        margin: -5px 10px 0 -17px;
        background-color:$Green;
        vertical-align: middle;
        position:relative;
      }
    }
  }
  &.BLOBListSymbolNone li { margin-left:31px;}
}
ol.viewOL {
  &.BLOBListSymbolCustom1 {
    & li {
      &:before {
        content:"\e258";
        display: inline-block;
        margin-right: 10px;
        color:$Green;
        font-family: 'Glyphicons Halflings';
        margin-top: -2px;
        vertical-align: middle;
        position:relative;
        font-size: 1.2rem;
      }
    }
  }
  &.BLOBListSymbolCustom2 {
    margin-left:20px;
    & li {
      margin-bottom:15px;
      &:before {
        content: "\e013";
        display: inline-block;
        margin-right: 10px;
        color: $DarkGrey;
        font-family: 'Glyphicons Halflings';
        margin-top: 0;
        vertical-align: middle;
        position: absolute;
        font-size: 1.5rem;
        left: -25px;
      }
    }
  }
}
.BLOBListSymbolDecimal, .BLOBListSymbolLowerLetter, .BLOBListSymbolUpperLetter {
  margin-left: 0;
  & li { display:list-item !important;}
}

.CorpoPagina hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 2px dashed $DarkGrey;
}

.userFormat1 { @extend %FontTBold; }
.userFormat3 { color: $DarkGreen; }

.clear {
  clear: both;
  height: 1px;
}
.blob-element-download a {
  color: $DarkGrey;
  display: block;
  border: 1px solid $DarkGrey;
  padding: 5px;
  font-family: 'Lato', sans-serif; 
  font-weight: 600;
  margin-bottom: 15px;
  position: relative;
  transition: color 0.5s;
  img {
    margin-right: 10px;
  }
  :hover { color: black; }
  :before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: $Green;
    transition: width 0.5s;
    z-index: -1;
  }
  :hover:before {
    width: 100%;
  }
}

/* PLACEHOLDER */
%FontTLight { font-family: 'Lato', sans-serif; font-weight: 300; }
%FontTRegular { font-family: 'Lato', sans-serif; font-weight: 400; }
%FontTSemiBold { font-family: 'Lato', sans-serif; font-weight: 600; }
%FontTBold { font-family: 'Lato', sans-serif; font-weight: 700; }
%FontTBlack { font-family: 'Lato', sans-serif; font-weight: 900; }

%Par {
    @extend %FontTRegular;
    font-size: 17px;
    line-height: 21px;
    margin: 0 0 15px 0;
}

%CenterBoth {
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
%CenterVert {
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);      
}
%CenterOriz {
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);      
}

%ImgBg {
  display: block;
  background-size: cover;
  background-position: 50% 50%;
  background-color: $Trasp;
  background-repeat:no-repeat;  
  height: 100%;
  width: 100%; 
}

%TrBgColor {
  -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /* Safari */
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 
}
%TrBg {
  -webkit-transition: background 0.3s ease-in-out; /* Safari */
  transition: background 0.3s ease-in-out; 
}
%TrColor {
  -webkit-transition: color 0.3s ease-in-out; /* Safari */
  transition: color 0.3s ease-in-out; 
}

/* MIXIN */
@mixin transform($transform) {
  -webkit-transform: $transform;
  -moz-transform:    $transform;
  -ms-transform:     $transform;
  -o-transform:      $transform;
  transform:         $transform;
}
@mixin transition($transition...) {
  -webkit-transition: $transition; /* Safari */
  transition: $transition;
}
@mixin flexBox($flexFlow) {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  

    -webkit-flex-flow: $flexFlow;
    flex-flow: $flexFlow;    
}
@mixin flexItem($flexItem) {
    -webkit-flex: $flexItem;
    -moz-flex: $flexItem;
    -ms-flex: $flexItem;
    -o-flex: $flexItem;
    flex: $flexItem;   
}
@mixin display($parametro) {
    display: $parametro;
}
@mixin btnStondato($colore) {
    display: inline-block;
    border: 2px solid $colore;
    color: $colore;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: underline;
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin: 30px 0;
}
@mixin btnSquadrato($colore) {
    display: inline-block;
    border: 2px solid $colore;
    color: $colore;
    padding: 10px 20px;
    font-size: 1.8rem;
    line-height: 1.8rem;
    margin: 30px 0;
}


/* definizione Mixin media query */

.BoxGrey {
  background-color: #f1efef;
  margin-bottom: 30px;
}
.BgGreen {
  background-color: #e1eec5;
  margin-bottom: 30px;
  height:inherit;
  min-height:300px;
}

.viewIndexSlice {
  & ol {
    @include flexBox(row wrap);
    margin: 30px -5px;
    & li {
      @include flexItem(0 1 32%);
      position: relative;
      margin: 5px;
      border: 1px solid $DarkGrey;
      & a {
        background-color: $Green;
        color: black;
        text-transform: uppercase;
        padding: 15px;
        font-weight: 600;
        font-size: 16px;
        line-height: 16px;
        display: block;
        text-align: left;
        @include transition(background-color 0.3s ease-in-out, color 0.3s ease-in-out);
        &:hover {
          background-color: $DarkGreen;
          color: white;
        }       
      }
    }
  }

}

%Link, .viewLinkOnlyTextContainer a {
  color: $DarkGreen;
  font-weight: 600;
  text-decoration: none;
  @include transition(color 0.3s ease-in-out, text-decoration 0.3s ease-in-out);
  &:hover {
    text-decoration: underline;
  }       
}


/* Classi generiche progetto da estendere */
.containerFlex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  

    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;   

    justify-content: stretch; 
    & .itemFlex50 { 
      -webkit-flex: 1 1 50%;
      -moz-flex: 1 1 50%;
      -ms-flex: 1 1 50%;
      -o-flex: 1 1 50%;
      flex: 1 1 50%;
      overflow: hidden;       
    }
    & .itemFlex33 { 
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      -o-flex: 1;
      flex: 1;       
      width: 33.3%;
      overflow: hidden;  
    }
}

.NoPadSx { padding-left: 0 !important; }
.NoPadDx { padding-right: 0 !important; }
.NoPad { padding-left: 0 !important; padding-right: 0 !important; }

.PadUpDown { padding-top: 60px; padding-bottom: 60px; }
.PadUp { padding-top: 60px; }
.PadDown { padding-bottom: 60px; }
.PadUpDownBig { padding-top: 100px; padding-bottom: 100px; }
.PadLeft { padding-left: 20px; }
.PadRight { padding-right: 20px; }


.BLOBHidden { display: none; }
.BoxFloatDx { display: block; float: right; margin: 0 0 30px 30px; }


/* Oggetti editoriali comuni */
h1, h3, h4, h5 {  }

.viewPar p, .viewParCell p, p, .viewUL li.viewLI, .viewOL li.viewLI  { }  

ul.viewUL li.viewLI, ol.viewOL li.viewLI {display:block;} 

.userFormat1 { @extend %FontTBold; }
.userFormat3 {  }

/* ADMINLINK */
.WrapAdmin { background-color: $ProjectColor; }
.AdminLink { 
    background-color: $ProjectColor;
    & a, & p, & a.btn { color: $White; font-size: 1.4rem; line-height: 1.4rem; } 
    .PagInt & {
      background-color: $ProjectColor;
      & a, & p, & a.btn { color: $White; } 
    }
    & .adminPanelPageInfo {
        color: $White;
        font-size: 1.4rem;
        margin: 0;
        padding: 10px;
        text-align: center;
    }
    & .adminPanelPageInfoItemTitle, & .adminPanelPageInfoItem {
        @extend %Par;
        color: $White;
        text-align: center;    
    }
    & .adminLinkOnSite, & .admin-backoffice-link a, & .admin-logged-panel a, & .admin-logged-panel p {
      background-color: $Text;
      border-radius: 4px;
      display: block;
      font-weight: bold;
      margin: 10px auto;
      padding: 10px 5px;
      text-align: center;
      text-transform: uppercase;
      width: 300px;
    }
    & .admin-logged-panel, a.btn {
      text-align: center;
      color: $White;
    }
    & .WrapAdmin {
      padding: 20px;
    }
}

/* Testata sticky */
.headroom {
    transition: transform 400ms ease-out;
}
.goingDown {
    transform: translateY(-165%);
}
.stuck {
  transform: translateY(0%);
  position: fixed;
  z-index: 1000; /* 1030 */
  backface-visibility: hidden;
  top:0;
  width: 100%;
}
.stuck.imOnTop {
  position: relative;
  z-index: 2;
}



/* Stili Tabella */
table.viewTable {
  border-top: 2px solid $ProjectColor!important;
  border-left: none !important;
  & tr {
    border-bottom: 2px solid $ProjectColor !important;
    & th, & td {
      border-right: none !important;
      border-bottom: none !important;  
      padding: 15px !important;    
    }
  }
  & .viewTableHCCellText {
    @extend %FontTBold;
    font-size: 2rem;
    line-height: 2rem;
    color: $ProjectColor;
  }
  & .viewTableCellText {
    @extend %FontTRegular;
    font-size: 2rem;
    line-height: 2rem;
    color: $Black;
  }
}


/* pulsante menu */
#hamburger-icon {
    color: $ProjectColor;
    width: 30px;
    height: 20px;
    position: relative;
    display: block;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    right: inherit;
    z-index: 120;
    cursor: pointer;
  & .line {
    display: block;
    background: $ProjectColor;
    width: 30px;
    height: 4px;
    position: absolute;
    left: 0;
    border-radius: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
  }
  & .line.line-1 {
    top: 0;
  }
  & .line.line-2 {
    top: 50%;
  }
  & .line.line-3 {
    top: 100%;
  }
  &:hover .line-1 {
    transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
  }
  &:hover .line-3 {
    transform: translateY(4px);
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
  }
  &.active .line-1 {
    transform: translateY(10px) translateX(0) rotate(45deg);
    -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
    -moz-transform: translateY(10px) translateX(0) rotate(45deg);
  }
  &.active .line-2 {
    opacity: 0;
  }
  &.active .line-3 {
    transform: translateY(-10px) translateX(0) rotate(-45deg);
    -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
    -moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
  }
}
 

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
    animation-delay: 0s, 0.3s; 
    animation-direction: normal, alternate;
    animation-duration: 0.3s, 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1, infinite;
    animation-name: hvr-bob-float, hvr-bob;
    animation-timing-function: ease-out, ease-in-out;
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    vertical-align: middle;
}

.hvr-bob {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}


/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}