/*### =========================== ###*/
/*### ======= LOG CSS KIT ======= ###*/
/*### =========================== ###*/


/* ============ INFO ============ *//* 
  
  # Version:  1.1;
  # Upadated: 16/10/2018;
  # Authors:
      a.tondo@logotel.it;
      ...

  # Customization:  ATLANTE - AGOS;

*//* ============================== */


/* ====== TABLE OF CONTENTS ====== *//*

  + COLOR GUIDE
  + FONT GUIDE
  # RESET
  # TYPOGRAPHY
  # IMAGES
  # UTILITY
  # BUTTON
  # TABLE
  # LISTS (UL & OL)
  # DESCRIPTION LISTS
  # BLOCKQUOTE
  # CREATIVE LAYOUT
  # GRID

*//* ============================== */



/*-------------------- COLOR GUIDE --------------------*/
/*

  PRIMARY          - #07ABB8 (LIGHT BLUE)   - alt  #065380

  SECONDARY        - #1A3A5D (DARK BLUE)    - alt #065380
  
  ACCENT/ALERT     - #EB212E (RED)          - alt #DB111E
  
  BACKGROUND       - #FFFFFF (FAKE WHITE)

  TEXT MAIN        - #585B5C
  TEXT EM          - #484B4C
  

  NOTE FOR THE FRONT-END DEVELOPER:
  Primary, Secondary, Accent/alert and Text color should have high contrast on Background color.
  Primary, Secondary and Accent/alert color should have high contrast also when used as background for white text.
  
*/
/*-----------------------------------------------------*/





/*-------------------- FONT GUIDE ---------------------*/
/*

  GENERAL FONT     - 'Clear sans'


  NOTE FOR THE FRONT-END DEVELOPER:
  Make sure @font-face rules are already set in other CSS file, if not add 'em here.

*/
/*-----------------------------------------------------*/




/* ------------- */
/* +++ RESET +++ */
/* ------------- */


html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 10px;
  background: #FFFFFF;
  margin: 0;
  overflow: auto;
}

body {
  margin: 0;
  background: #FFFFFF;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #585B5C;
  overflow: auto;
}

@media(max-width: 767px) {
  body {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}

img {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

article,aside,details,figcaption,
figure,footer,header,main,nav,
section,summary { display: block; }

input,
button { font:inherit; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

p,
hr,
ul,
ol,
dl,
blockquote,
pre,
address,
fieldset,
figure {
  margin: 0 0 2rem 0;
}

* + p,
* + hr,
* + ul,
* + ol,
* + dl,
* + blockquote,
* + pre,
* + address,
* + fieldset,
* + figure {
  margin-top: 2rem;
}





/* ------------------ */
/* +++ TYPOGRAPHY +++ */
/* ------------------ */


/* LINK: basic style for generic link */

a { /*color: #46C0ED;*/
  color: #07ABB8;
  text-decoration: underline;
  cursor: pointer;

  -webkit-text-decoration-style: dotted;
  text-decoration-style: dotted;
    
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

a:hover {
  /*color: #065380;*/
  color: #024c44;
   -webkit-text-decoration-style: solid;
  text-decoration-style: solid;
}

a:not([href]){ text-decoration: none; }



/* SELECTION: basic style selection */

::-moz-selection {
  /*background: #1A3A5D;*/
  background: #024c44;
  color: #FFFFFF;
  text-shadow: none;
}
::selection {
  /*background: #1A3A5D;*/
  background: #024c44;
  color: #FFFFFF;
  text-shadow: none;
}



/* HEADINGS: basic style for H1, H2 ecc elements */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 2rem 0;
  font-weight: 300;
  color: #555555;
  text-transform: none;
}

* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
  margin-top: 2rem;
}

h1 {
  font-size: 4rem;
  line-height: 5rem;
}

h2 {
  font-size: 3.2rem;
  line-height: 4rem;
}

h3 {
  font-size: 2.4rem;
  line-height: 3rem;
}

h4 {
  font-size: 1.8rem;
  line-height: 2.4rem;
}

h5 {
  font-size: 1.4rem;
  line-height: 2rem;
}

h6 {
  font-size: 1.2rem;
  line-height: 1.8rem;
}



/* .LOG-text--mark: MODIFIER style for highligted text*/

.LOG-text--mark {
  padding: 0 .2rem;
  /*background: #1A3A5D;*/
  background: #024c44;
  color: #FFFFFF;
}


/* .LOG-text--primary: MODIFIER for colored text (primary) */

.LOG-text--primary { /*color: #46C0ED;*/
  color: #07ABB8; }

/* .LOG-text--secondary: MODIFIER for colored text (secondary) */

.LOG-text--secondary { /*color: #1A3A5D;*/
  color: #024c44; }

/* .LOG-text--alert: MODIFIER for colored text (alert) */

.LOG-text--alert { color: #EB212E; }

/* .LOG-text--muted: MODIFIER for muted text */

.LOG-text--muted { opacity: 0.7; }


/* .LOG-text--neg: MODIFIER for text on dark background */

.LOG-text--neg,
.LOG-text--neg a { color: #FFFFFF; }
.LOG-text--neg a:hover { opacity: 0.9; }


/* .LOG-text--left: MODIFIER for left aligned text */

.LOG-text--left { text-align: left; }


/* .LOG-text--center: MODIFIER for center aligned text */

.LOG-text--center { text-align: center; }


/* .LOG-text--right: MODIFIER for right aligned text */

.LOG-text--right { text-align: right; }



/* .LOG-hr: style HR tag */

hr.LOG-hr {
  box-sizing: content-box;
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(0,0,0,.2);
}



/* .LOG-hr--dashed: MODIFIER for dashed lines */

hr.LOG-hr--dashed { border-top-style: dashed; }



/* .LOG-hr--dotted: MODIFIER for dashed lines */

hr.LOG-hr--dotted { border-top-style: dotted; }



/* .LOG-hr--primary: MODIFIER for colored lines */

hr.LOG-hr--primary{ /*border-top-color: #46C0ED;*/
  border-top-color: #07ABB8; }






/* -------------- */
/* +++ IMAGES +++ */
/* -------------- */


/* .LOG-img--block: MODIFIER for block images */

.LOG-img--block {
  display: block;
  margin: 2rem auto 2rem;
}

/* .LOG-img--circle: MODIFIER for rounded images - WORK ONLY ON SQUARE IMAGES */

.LOG-img--circle { border-radius: 500px; }





/* --------------- */
/* +++ UTILITY +++ */
/* --------------- */


.visuallyhidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* .LOG-tile: class for presentation only */

.LOG-tile {
  display: inline-block;
  vertical-align: middle;
  width: 2rem;
  height:2rem;
  box-sizing: border-box;
  margin: 0 1rem;
}


/* .LOG-tile-- : MODIFIER for .LOG-tile */

.LOG-tile--primary { /*background-color: #46C0ED;*/
  background-color: #07ABB8; }

.LOG-tile--secondary { /*background-color: #1A3A5D;*/
  background-color: #024c44; }

.LOG-tile--alert { background-color: #EB212E; }

.LOG-tile--text { background-color: #585B5C; }

.LOG-tile--bkg { background-color: #FFFFFF; }
  
.LOG-tile--border { border: 1px solid #555555; }





/* .LOG-scrollable--H: scollable box (horizontal) for content with fixed width */

.LOG-scrollable--H{
  display: block;
  max-width: 100%;
  overflow-x: auto;
}



/* .LOG-scrollable--V: scollable box (vertical) for content with fixed height */

.LOG-scrollable--V{
  display: block;
  max-height: 80vh;
  overflow-y: auto;
}



/* .LOG-sticky: sticky content. Don't know how to explain it */

.LOG-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: .3rem;
}


/* .LOG-sticky--bottom: sticky content stucked to bottom of the container */

.LOG-sticky--bottom {
  top: auto;
  bottom: .3rem;
}





/* -------------- */
/* +++ BUTTON +++ */
/* -------------- */


/* .LOG-button: basic setting for the button ---THIS CLASS IS MANDATORY--- */

.LOG-button {
  position: relative;
  display:inline-block;
  /*overflow: hidden;*/
  box-sizing:border-box;
  min-width: 6.4rem;
  height:3.6rem;
  margin: .2rem .4rem;
  padding:0 1.6rem;
  font-size:1.4rem;
  font-weight: 500;
  line-height:3.6rem;
  cursor: pointer;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: .1rem;
  text-transform: uppercase;
  border: none;
  /*border-radius: 2px;*/
  border-radius: 2.4rem; /* CUSTOMIZATION ROUNDED BUTTONS */
  outline: none;
  background-color: transparent;

  white-space: nowrap;
  overflow:hidden;
}

.LOG-button:hover,
.LOG-button:focus{ text-decoration:none; }

.LOG-button,
.LOG-button:hover,
.LOG-button:focus,
.LOG-button:active{/*color: #46C0ED;*/
  color: #07ABB8;}

.LOG-button:before {
  content:"";
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: #999;
  transition: opacity .2s cubic-bezier(.4,0,1,1);
  /*border-radius: 2px;*/
  border-radius: 2.4rem; /* CUSTOMIZATION ROUNDED BUTTONS */
}

.LOG-button:hover:before,
.LOG-button:focus:before {
  opacity: .1;
  transition: opacity .2s cubic-bezier(.4,0,1,1);
}

.LOG-button:active:before {
  opacity: .2;
  transition: opacity .2s cubic-bezier(.4,0,1,1);
}



/* .LOG-button--primary: MODIFIER for colored buttons (PRIMARY COLOR) */
/* .LOG-button--secondary: MODIFIER for colored buttons (SECONDARY COLOR) */
/* .LOG-button--alert: MODIFIER for colored buttons (SECONDARY COLOR) */

.LOG-button--primary,
.LOG-button--secondary,
.LOG-button--alert {
  box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  overflow: visible;
}

.LOG-button--secondary,
.LOG-button--secondary:hover,
.LOG-button--secondary:focus,
.LOG-button--secondary:active {
  color: #FFF;
  /*background: #1A3A5D;*/
  background: #024c44;
}

.LOG-button--primary,
.LOG-button--primary:hover,
.LOG-button--primary:focus,
.LOG-button--primary:active{
  color: #FFF;
  /*background: #46C0ED;*/
  background: #07ABB8;
}


.LOG-button--alert,
.LOG-button--alert:hover,
.LOG-button--alert:focus,
.LOG-button--alert:active {
  color: #FFF;
  background: #EB212E; 
}

.LOG-button--primary:before,
.LOG-button--secondary:before,
.LOG-button--alert:before {
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 8px rgba(0,0,0,.09),0 8px 16px rgba(0,0,0,.18);
}

.LOG-button--primary:hover:not(:active):before,
.LOG-button--primary:focus:not(:active):before,
.LOG-button--secondary:hover:not(:active):before,
.LOG-button--secondary:focus:not(:active):before,
.LOG-button--alert:hover:not(:active):before,
.LOG-button--alert:focus:not(:active):before { opacity: .8; }

.LOG-button--primary:after,
.LOG-button--secondary:after,
.LOG-button--alert:after {
  content:"";
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(255,255,255,.05);
  z-index: -1;
  /*border-radius: 2px;*/
  border-radius: 2.4rem; /* CUSTOMIZATION ROUNDED BUTTONS */
  transition: opacity .2s cubic-bezier(.4,0,1,1);
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}

.LOG-button--primary:active:after,
.LOG-button--secondary:active:after,
.LOG-button--alert:active:before {
  opacity:1;
}

.LOG-button--primary,
.LOG-button--primary:hover,
.LOG-button--primary:focus,
.LOG-button--primary:active,
.LOG-button--secondary,
.LOG-button--secondary:hover,
.LOG-button--secondary:focus,
.LOG-button--secondary:active
.LOG-button--alert,
.LOG-button--alert:hover,
.LOG-button--alert:focus,
.LOG-button--alert:active {
  border:0;
  color:#FFF;
}


/* .LOG-button--disabled: MODIFIER for disabled buttons */

.LOG-button[disabled][disabled],
.LOG-button--disabled.LOG-button--disabled {
  color: rgba(0,0,0,.26);
  cursor: default;
  pointer-events: none;
  background-color: transparent;
}

.LOG-button--secondary[disabled][disabled],
.LOG-button--primary[disabled][disabled],
.LOG-button--secondary.LOG-button--disabled.LOG-button--disabled,
.LOG-button--primary.LOG-button--disabled.LOG-button--disabled{
  color:rgba(0,0,0,.26);
  cursor:default;
  pointer-events:none;
  background-color:rgba(0,0,0,0.07);
  box-shadow:none;
}


/* .LOG-button--big: MODIFIER for bigger buttons */

.LOG-button--big {
  height: 4.8rem;
  min-width: 8.4rem;
  padding: 0 2rem;
  font-size: 1.8rem;
  line-height: 4.8rem;
}


/* .LOG-button--ghost: MODIFIER for 'ghost' buttons (no background, only border) */

.LOG-button--ghost:not(.LOG-button--primary):not(.LOG-button--secondary) {
  padding: 0 1.4rem;
  line-height: 3.2rem;
  border-width: .2rem;
  border-style: solid;
}

.LOG-button--ghost.LOG-button--big:not(.LOG-button--primary):not(.LOG-button--secondary) {
  padding:0 1.8rem;
  line-height:4.4rem;
}


/* .LOG-button--block: MODIFIER for display:block buttons */

.LOG-button--block{
  display:block;
  margin-left:0;
  margin-right:0;
  margin-bottom:1rem;
  width:100%;
}

/* .LOG-button--neg: MODIFIER for buttons placed onto a darker background */

.LOG-button--neg:not(.LOG-button--primary):not(.LOG-button--secondary),
.LOG-button--neg:not(.LOG-button--primary):not(.LOG-button--secondary):hover,
.LOG-button--neg:not(.LOG-button--primary):not(.LOG-button--secondary):focus,
.LOG-button--neg:not(.LOG-button--primary):not(.LOG-button--secondary):active{color:#FFF;}

.LOG-button--neg:not(.LOG-button--primary):not(.LOG-button--secondary):before { background: #FFF; }

.LOG-button--ghost.LOG-button--neg:not(.LOG-button--primary):not(.LOG-button--secondary):not(.LOG-button--disabled){color:#FFF;}

.LOG-button--neg[disabled][disabled],
.LOG-button--neg.LOG-button--disabled.LOG-button--disabled{color:rgba(255,255,255,.26);}


/* -------------- */
/* +++ TABLES +++ */
/* -------------- */


/* .LOG-table: basic setting for the table ---THIS CLASS IS MANDATORY--- */

table.LOG-table {
  width: 100%;
  margin-bottom: 1.2rem;
  border-spacing: 0;
  border-collapse: collapse;
}

table.LOG-table td,
table.LOG-table th{
  padding: 8px 8px;
}

table.LOG-table thead th { vertical-align:bottom; }
table.LOG-table th {
  font-weight:700;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,.5);
}

table.LOG-table td { border-bottom: 1px solid rgba(0,0,0,.3); }



/* .LOG-table--fixed: MODIFIER set the width of th and td with no dimension specified by math and not by content */

table.LOG-table--fixed { table-layout:fixed; }



/* .LOG-table__row--highlight: MODIFIER set light grey background color on children TD or TH element */

tr.LOG-table__row--highlight td,
tr.LOG-table__row--highlight th { background-image: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,.05) 100%); }



/* .LOG-table__cell--highlight: MODIFIER set light grey background color on just one TD */

td.LOG-table__cell--highlight { background-image: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,.05) 100%); }



/* .LOG-table__cell--alert: MODIFIER set the background color of the cell with the ALERT color */
/* .LOG-table__cell--primary: MODIFIER set the background color of the cell with the PRIMARY color */

td.LOG-table__cell--alert,
th.LOG-table__cell--alert,
th.LOG-table__cell--primary,
td.LOG-table__cell--primary { color: #fff; }

tr.LOG-table__row--highlight td.LOG-table__cell--alert
tr.LOG-table__row--highlight td.LOG-table__cell--primary{ background-image: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,.05) 100%); }

td.LOG-table__cell--primary,
th.LOG-table__cell--primary { /*background-color: #46C0ED;*/
  background-color: #07ABB8; }

td.LOG-table__cell--alert,
th.LOG-table__cell--alert { background-color: #EB212E; }



/* .LOG-table--zebra: MODIFIER set alt color for odd rows */

.LOG-table--zebra tr:nth-child(2n+1) td { background-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 100%); }

.LOG-table--zebra tr.LOG-table__row--highlight td { background-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, rgba(0,0,0,0.1) 100%); }
.LOG-table--zebra tr.LOG-table__row--highlight:nth-child(2n+1) td,
.LOG-table--zebra tr:nth-child(2n+1) td.LOG-table__cell--highlight{ background-image: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%); }

.LOG-table--zebra tr.LOG-table__row--highlight:nth-child(2n+1) td.LOG-table__cell--alert,
.LOG-table--zebra tr.LOG-table__row--highlight:nth-child(2n+1) td.LOG-table__cell--primary { background-image: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%); }



/* .LOG-table__cell--vertical: MODIFIER rotate the content of a cell 90° - content must be wrapped in a child element

  <td class="LOG-table__cell--vertical">
    <span>
      TEXT
    </span>
  </td>

  ---doesn't work on IE11 and previous--- */

@supports ( transform:rotate(-90deg) ) {
  td.LOG-table__cell--vertical,
  th.LOG-table__cell--vertical {
    position: relative;
    height: 140px;
  }
  td.LOG-table__cell--vertical > *,
  th.LOG-table__cell--vertical > * {
    display: block;
    width: 0;
    height: 0;
    transform: rotate(-90deg);
    white-space: nowrap;
  }

  @media (max-width:960px){
    table.LOG-table--responsive960 td.LOG-table__cell--vertical,
    table.LOG-table--responsive960 th.LOG-table__cell--vertical {
      position: static;
      height: auto;
    }
    table.LOG-table--responsive960 td.LOG-table__cell--vertical > *,
    table.LOG-table--responsive960 th.LOG-table__cell--vertical > * {
      width: auto;
      height: auto;
      transform: rotate(0deg);
      white-space: normal;
    }
  }
  @media (max-width:800px){
    table.LOG-table--responsive800 td.LOG-table__cell--vertical,
    table.LOG-table--responsive800 th.LOG-table__cell--vertical {
      position: static;
      height: auto;
    }
    table.LOG-table--responsive800 td.LOG-table__cell--vertical > *,
    table.LOG-table--responsive800 th.LOG-table__cell--vertical > * {
      width: auto;
      height: auto;
      transform: rotate(0deg);
      white-space: normal;
    }
  }
  @media (max-width:640px){
    table.LOG-table--responsive640 td.LOG-table__cell--vertical,
    table.LOG-table--responsive640 th.LOG-table__cell--vertical {
      position: static;
      height: auto;
    }
    table.LOG-table--responsive640 td.LOG-table__cell--vertical > *,
    table.LOG-table--responsive640 th.LOG-table__cell--vertical > * {
      width: auto;
      height: auto;
      transform: rotate(0deg);
      white-space: normal;
    }
  }
  @media (max-width:480px){
    table.LOG-table--responsive480 td.LOG-table__cell--vertical,
    table.LOG-table--responsive480 th.LOG-table__cell--vertical {
      position: static;
      height: auto;
    }
    table.LOG-table--responsive480 td.LOG-table__cell--vertical > *,
    table.LOG-table--responsive480 th.LOG-table__cell--vertical > * {
      width: auto;
      height: auto;
      transform: rotate(0deg);
      white-space: normal;
    }
  }
  @media (max-width:360px){
    table.LOG-table--responsive360 td.LOG-table__cell--vertical,
    table.LOG-table--responsive360 th.LOG-table__cell--vertical {
      position: static;
      height: auto;
    }
    table.LOG-table--responsive360 td.LOG-table__cell--vertical > *,
    table.LOG-table--responsive360 th.LOG-table__cell--vertical > * {
      width: auto;
      height: auto;
      transform: rotate(0deg);
      white-space: normal;
    }
  }

}



/* .LOG-table__cell--N: MODIFIER set the width of the cell as (N*10)% */

th.LOG-table__cell--1,
td.LOG-table__cell--1{width:10%;}
th.LOG-table__cell--2,
td.LOG-table__cell--2{width:20%;}
th.LOG-table__cell--3,
td.LOG-table__cell--3{width:30%;}
th.LOG-table__cell--4,
td.LOG-table__cell--4{width:40%;}
th.LOG-table__cell--5,
td.LOG-table__cell--5{width:50%;}
th.LOG-table__cell--6,
td.LOG-table__cell--6{width:60%;}
th.LOG-table__cell--7,
td.LOG-table__cell--7{width:70%;}
th.LOG-table__cell--8,
td.LOG-table__cell--8{width:80%;}



/* .LOG-table__cell--break: MODIFIER breaks long words inside the cell */

td.LOG-table__cell--break{
  -ms-word-break:   break-all; 
  word-break:       break-all;
  word-wrap:        break-word;
  -webkit-hyphens:  auto;
     -moz-hyphens:  auto;
  
  hyphens: auto;
}



/* LOG-table--responsiveNNN: MODIFIER force block layout for every cell in the table at low resolution */ 

table[class*="LOG-table--responsive"],
.LOG-table--fluid{max-width:100%!important;}

@media (max-width:960px){
  table.LOG-table--responsive960,
  table.LOG-table--responsive960 > *,
  table.LOG-table--responsive960 tr,
  table.LOG-table--responsive960 tr > * {
    width:auto!important;
    display:block;
  }
  table.LOG-table--responsive960 tr { border-bottom: 1px solid; }
}
@media (max-width:800px){
  table.LOG-table--responsive800,
  table.LOG-table--responsive800 > *,
  table.LOG-table--responsive800 tr,
  table.LOG-table--responsive800 tr > * {
    width:auto!important;
    display:block;
  }
  table.LOG-table--responsive800 tr { border-bottom: 1px solid; }
}
@media (max-width:640px){
  table.LOG-table--responsive640,
  table.LOG-table--responsive640 > *,
  table.LOG-table--responsive640 tr,
  table.LOG-table--responsive640 tr > * {
    width:auto!important;
    display:block;
  }
  table.LOG-table--responsive640 tr { border-bottom: 1px solid; }
}
@media (max-width:480px){
  table.LOG-table--responsive480,
  table.LOG-table--responsive480 > *,
  table.LOG-table--responsive480 tr,
  table.LOG-table--responsive480 tr > * {
    width:auto!important;
    display:block;
  }
  table.LOG-table--responsive480 tr { border-bottom: 1px solid; }
}
@media (max-width:360px){
  table.LOG-table--responsive360,
  table.LOG-table--responsive360 > *,
  table.LOG-table--responsive360 tr,
  table.LOG-table--responsive360 tr > * {
    width:auto!important;
    display:block;
  }
  table.LOG-table--responsive360 tr { border-bottom: 1px solid; }
}



/* .LOG-table. when wrapped in a .LOG-scrollable--H element should have its own width */

.LOG-scrollable--H table.LOG-table { width: auto; }


/* ------------------------ */
/* +++  LISTS (UL & OL) +++ */
/* ------------------------ */


/* .LOG-list: basic setting for the lists ---THIS CLASS IS MANDATORY---  */

.LOG-list {
  margin: 2rem 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

.LOG-list li { list-style: none; }
.LOG-list li:not(:first-child) { margin-top: .3rem; }

.LOG-list li:before { display: inline-block; }

ul.LOG-list li:before {
  content:"\2022";
  text-indent: -1.3rem;
}

ul.LOG-list .LOG-list, 
ol.LOG-list .LOG-list {
  margin: .5rem 0;
  font-size:.9em;
}

ul.LOG-list ul.LOG-list li:before { content:"\00b7";}

ol.LOG-list { counter-reset: list; }

ol.LOG-list li:before {
  counter-increment: list;
  content: counter(list) ".";
  text-indent:-2rem;
  font-size: 0.8em;
  text-align:center;
  opacity: 0.8;
}


/* .LOG-list--primary: MODIFIER for colored bullet/number */

.LOG-list--primary li:before {
  /*color: #46C0ED;*/
  color: #07ABB8;
}


/* .LOG-list--secondary: MODIFIER for colored bullet/number */

.LOG-list--secondary li:before {
  /*color: #1A3A5D;*/
  color: #024c44;
}

ol.LOG-list--primary li:before,
ol.LOG-list--secondary li:before { opacity: 1; }


/* .LOG-list--line: MODIFIER for line-separated element of the list */

.LOG-list--line { padding-left: 0; }

.LOG-list--line > li { padding-left: 2rem; }

.LOG-list--line > li:not(:first-child) {
  padding-top: .3rem;
  border-top: 1px solid rgba(0,0,0,.1);
}


/* .LOG-list--step: MODIFIER for emphasize the bullet/number */

.LOG-list--step { padding-left: 3rem; }

.LOG-list--line.LOG-list--step { padding-left: 0; }

.LOG-list--line.LOG-list--step li { padding-left: 3rem; }

ul.LOG-list--step li:before,
ol.LOG-list--step li:before {
  font-size: 1.5em;
  line-height: 1em;
  vertical-align: middle;
}

ul.LOG-list--step li:before { text-indent: -2rem; }
ol.LOG-list--step li:before { text-indent: -3rem; }





/* ------------------------- */
/* +++ DESCRIPTION LISTS +++ */
/* ------------------------- */


/* .LOG-description: basic setting for the descriptio lists ---THIS CLASS IS MANDATORY--- */

.LOG-description { margin: 2rem 0; }

.LOG-description > dt {
 color: #555555;
 font-weight:normal;
 text-transform:uppercase;
}
.LOG-description > dt:nth-child(n+2) { margin-top:2rem }



/* .LOG-description--primary: MODIFIER for colored dt */

.LOG-description--primary > dt { /*color: #46C0ED;*/
  color: #07ABB8; }





/* ------------------ */
/* +++ BLOCKQUOTE +++ */
/* ------------------ */


/* .LOG-blockquote: basic setting for blockquotes ---THIS CLASS IS MANDATORY---*/

.LOG-blockquote {
  padding-left: 2rem;
  border-left: 5px solid rgba(0,0,0,.2);
  font-size: 1.6rem;
  line-height: 2.2rem;
  font-style: italic;
}

.LOG-blockquote cite,
.LOG-blockquote footer { 
  margin-top:0.7rem;
  font-style: normal;
  color: #555555;
}

.LOG-blockquote cite:before,
.LOG-blockquote footer:before { content: "- "; }


/* .LOG-blockquote--primary: MODIFIER for colored border quotes */

.LOG-blockquote--primary { 
  /*border-left: 5px solid #46C0ED; */
  border-left: 5px solid #07ABB8;
}





/* ------------------------------ */
/* +++ CREATIVE LAYOUT (flex) +++ */
/* ------------------------------ */


/*  .LOG-block: set the children of the element as flexbox if supported ---THIS CLASS IS MANDATORY--- 

---doesn't work on IE11 and previous---
*/

.LOG-block { margin: 2rem 0; }

.LOG-block > * { display: block; }

.LOG-block > *:not(:nth-last-child(1)) { margin-bottom: 2rem; }

@media (min-width: 600px) {
  .LOG-block { overflow: auto; }

  .LOG-block > *,
  .LOG-block > *:not(:nth-last-child(1)) {
    display: inline-block;
    margin: 0 1.5rem;
  }

  .LOG-block > *:nth-child(1):nth-last-child(4),
  .LOG-block > *:nth-child(1):nth-last-child(4) ~ * {
    width: calc(25% - 3rem);
  }

  .LOG-block > *:nth-child(1):nth-last-child(3),
  .LOG-block > *:nth-child(1):nth-last-child(3) ~ * {
    width: calc(33.33% - 3rem);
  }

  .LOG-block > *:nth-child(1):nth-last-child(2),
  .LOG-block > *:nth-child(1):nth-last-child(2) ~ * {
    width: calc(50% - 3rem);
  }
}


@supports (display:flex) {

  @media (min-width: 600px) {
  
    .LOG-block {
      display:flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .LOG-block > *,
    .LOG-block > *:not(:nth-last-child(1)) {
      float: none;
      margin: 0 1.5rem;
      width: auto!important; /* need to be !important in order to override the fallback sizes */
    }


    /*  .LOG-block--valign: MODIFIER for LOG-block000 vertical alignement */
    .LOG-block--valign { align-items: center; }


    /*  .LOG-block__child--unshrink: MODIFIER for LOG-block000 children elements that are not comprimible */

    .LOG-block__child--unshrink { flex-shrink: 0; }


    /*  .LOG-block__child--shrink: MODIFIER for LOG-block000 children elements that are comprimible */

    .LOG-block__child--shrink { flex-shrink: 2; }



    /*  .LOG-block__child--grow: MODIFIER for LOG-block000 children elements that can grow */

    .LOG-block__child--grow { flex-grow: 1; }

  }

}


/* .LOG-block--highlight: MODIFIER for blocks with background */

.LOG-block--highlight {
  padding: .7rem;
  background-color: rgba(0,0,0,.1);
}

@media (min-width: 600px) { .LOG-block--highlight {  padding: 1.5rem; } }



/* .LOG-float: set the first child element as a float element ---THIS CLASS IS MANDATORY--- */

.LOG-float { overflow: auto; }

.LOG-float > :first-child {
  float:left;
  max-width: 33.33%;
  margin: 0 3rem 3rem 0;
}

.LOG-float > :first-child + * {
  display: block;
  overflow: auto;
}



/* .LOG-float--right: MODIFIER to place the first child element on the right*/

.LOG-float--right > :first-child {
  float: right;
  margin: 0 0 3rem 3rem;
}




/* ------------------------------ */
/* ++++++++++++ GRID ++++++++++++ */
/* ------------------------------ */


/* .LOG-grid__row: ELEMENT container */

.LOG-grid__row {
  margin: 0 -1.5rem;
  font-size: 0;
  line-height: 0;
}


/* .LOG-grid__col: ELEMENT sub container */

.LOG-grid__row [class*="LOG-grid__col--"] {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1.5em;
  padding: 0 1.5rem;
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
}


/* .LOG-grid__col--XX: MODIFIER sub container (width) */

@media (min-width: 660px) {
  .LOG-grid__row .LOG-grid__col--01 { width: 16.66%; }
  .LOG-grid__row .LOG-grid__col--02 { width: 33.33%; }
  .LOG-grid__row .LOG-grid__col--03 { width: 50%; }
  .LOG-grid__row .LOG-grid__col--04 { width: 66.66%; }
  .LOG-grid__row .LOG-grid__col--05 { width: 83.33%; }
  .LOG-grid__row .LOG-grid__col--06 { width: 100%; }  
}


/* .LOG-grid__col--middle: MODIFIER sub container (vertical alignement) */

.LOG-grid__col--middle,
.LOG-grid__row--middle > * { vertical-align: middle; }


/* .LOG-grid__col--bottom: MODIFIER sub container (vertical alignement) */

.LOG-grid__col--bottom,
.LOG-grid__row--bottom > * { vertical-align: bottom; }


@supports (display: flex) {
  @media (min-width: 660px) {
    .LOG-grid__row,
    .LOG-grid__row [class*="LOG-grid__col--"] {
      display: flex;
      align-items: stretch;
    }

    .LOG-grid__row [class*="LOG-grid__col--"] { flex-direction: column; }

    /*
    .LOG-grid__row [class*="LOG-grid__col--"] > * { flex-grow: 1; }
    */
  }
}






/*[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]*/
/*[[[[[[[[[[[ That's all, folks! ]]]]]]]]]]]*/
/*[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]*/