/* 
  Created on : 5-ago-2015, 9.42.28
  Author     : grafico
  CSS per la generazione di un portale a tre colonne, main content al centro + 2 aside laterali.
*/
.layout-three-col{
  position:relative;
  width:100%;
  overflow:hidden;
}
.middle-col{
  float:left;
  width:100%;
  position:relative;
  right:15%;
}
.left-col{
  float:left;
  width:100%;
  position:relative;
  right:70%;
}
header .logo,
.layout-three-col .col1, .layout-three-col .col2, .layout-three-col .col3{
  float:left;
  position:relative;
  overflow:hidden;
}
.layout-three-col .col1 {
  width:70%;
  left:100%;
  left:calc(100% + 1px);
}
header .logo,
.layout-three-col .col2 {
  width:15%;
}
.layout-three-col .col2 {
  left:15%;
  left:calc(15% + 1px);
}
.layout-three-col .col3 {
  width:15%;
  left:85%;
  left:calc(85% + 3px);
}
.page.layout-three-col,
.page .left-col{
  background:#F4F4F4;
}
.page .middle-col{
  background:#FFF;
}
.page.layout-three-col{
  border:0 solid #BBB;
  border-width:0 2px;
}
.page .col1, .page .col2, .page .col3{
  padding:5px;
}
.page .col1{
  padding:5px 15px 30px;
}
.page .middle-col,
.page .left-col{
  border-right:#BBB solid 1px;
}
header .layout-three-col .col1{
  width:85%;
}
header .layout-three-col .col2{
  left:0;
}
/* simple-layout */
body.simple-layout{
  background:transparent;
}
.simple-layout .page.layout-three-col,
.simple-layout .middle-col,
.simple-layout .left-col,
.simple-layout .page .col1{
  border:none;
}
.simple-layout header,
.simple-layout footer,
.simple-layout .col2,
.simple-layout .col3{
  display:none;
}
.simple-layout .centered-section,
.simple-layout .middle-col,
.simple-layout .left-col,
.simple-layout .col1{
  width:100%;
  float:none;
  position:static;
  background-color:#FFF;
  margin:0 auto;
  padding:5px 15px;
}
.simple-layout .centered-section,
.simple-layout .middle-col,
.simple-layout .left-col,
.simple-layout .centered-section{
  padding:0;
}

/* responsive */
@media screen and (min-width: 1701px) {
  .full-page .middle-col{
    width:200%;
    margin-left:-234px;
    right:100%;
  }
  .full-page .left-col{
    width:100%;
    margin-left:-50%;
    left:468px;
  }
  .full-page.layout-three-col .col2{
    float:right;
    width:234px;
    right:0px;
    left:auto;
  }
  .full-page.layout-three-col .col3{
    float:right;
    width:234px;
    left:50%;
  }
  .full-page.layout-three-col .col1wrap{
    float:left;
    width:50%;
    position:relative;
    right:234px;
  }
  .full-page.layout-three-col .col1{
    margin:0px 234px;
    left:200%;
    overflow:hidden;
    width:auto;
    width:calc(100% - 466px);
  }
}
@media screen and (max-width: 1000px) {
  .page.layout-three-col{
    background:#F4F4F4;
    border:none;
  }
  .page .middle-col{
    right:0;
    background:transparent;
    border:none;
  }
  .page .left-col{
    right:0;
    background:transparent;
    border:none;
  }
  .page .col1{
    width:100%;
    left:0; right:0;
    border-bottom:1px solid #BBB;
    background:#FFF;
    padding:5px;
  }
  .page .col1:after{
    content:' ' !important;
    display:table !important;
    clear:both !important;
  }
  .page .col2, .page .col3{
    width:50%;
    width:calc(50% + 5px);
    left:0; right:0;
    border:0 solid #BBB;
  }
  .page .col2{
    margin-right:-10px;
    border-width:0 10px 0 0;
  }
  .page .col3{
    border-width:0 0 0 10px;
  }
  
}
@media screen and (max-width: 450px) {
  .page .col2, .page .col3{
    width:100%;
    float:none;
    border:none;
  }
}