/*************************************************************************

C S S    H A N D C R A F T E D    B Y    M A M O K A        www.mamoka.com

..........................................................................
..........................................................................
..........................................................................
..........................................................................
..........................................................................

**************************************************************************

CODERS

Davide Cantelli d.cantelli@mamoka.com
Sacha Alexandre Bourdeaud'Hui a.bourdeaudhui@mamoka.com

*************************************************************************/

html
   {
   margin: 0;
   border: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   min-height: 100%;
   font: normal 300 62.5%/1 'Signika', 'Trebuchet MS', Arial, Helvetica, sans-serif;
   background: #fff;
   }
   body
      {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      border: 0;
      padding: 0;
      width: 100%;
      color: #202020;
      background: #e0e0e0;
      -webkit-transition: top .5s, left .5s;
      transition: top .5s, left .5s;
      }
      
      body.mobile-nav-istituto-active { left: 230px;  position: fixed; }
      body.mobile-nav-school-active { left: 230px;  position: fixed; }
      body.mobile-nav-general-active { left: -230px; position: fixed; }      
      body.mobile-nav-search-active { top: 50px; }      
      .active-nav { display: block !important; z-index: 9999 !important; box-shadow: 0 0 20px #000 !important; }
      .active-ctrl-nav em {  }
   
      div.wrapper
         {
         margin: 0 auto;
         width: 1000px;
         }
      body > div.wrapper
         {
         border-top: 10px solid #404040;
         padding-bottom: 10px;
         background: #f0f0f0; 
         }      
      div.clear   { clear: both;   }
      img { border: none; }

@media screen and (min-width: 1201px) 
   {
   div.wrapper   { width: 1200px; }
   }
@media screen and (max-width: 1000px) 
   {
   body { height: 100%; }
   div.wrapper   { width: 100%;   }
   }

strong
   {
   font-weight: 600;
   }

      
/**************************************************************************

HEADER

*************************************************************************/

header
   {
   margin: 0 0 10px 0;
   }

/******** TOP ***********/

   header section#header-top
      {
      position: relative;
      width: 100%;
      height: 60px;
      overflow: hidden;
      background: #fff;
      }
      header p.logo
         {
         position: absolute;
         top: -10px;
         left: 20px;
         z-index: 5;
         margin: 0;
         width: 230px;
         height: 80px;
         background: #de6800;
         }
         header p.logo a
            {
            display: block;
            width: 100%;
            height: 100%;
            background: url('../pix/mmk_logo_scuoleonline.png') no-repeat 50% 50%;
            }
            header p.logo a strong
               {
               position: absolute;
               top: -50px;
               left: -300px;
               }
      header section#header-top ul
         {
         margin: 0 0 0 250px;
         padding: 0;
         border-bottom: 1px solid #dcd7db;
         list-style: none;
         }
         header section#header-top ul li
            {
            float: left;
            }
            header section#header-top ul li a
               {
               float: left;
               padding: 0 15px;
               border-right: 1px solid #dcd7db;
               font-size: 1.3em;
               line-height: 59px;
               text-decoration: none;
               text-transform: uppercase;
               color: #404040;
               -webkit-transition: color .4s, background .4s;
               transition: color .4s, background .4s;
               }
            header section#header-top ul li a:hover
               {
               background: #e0e0e0;
               }
      header section#header-top > a > img
         {
         position: relative;
         top: 14px;
         right: 20px;
         float: right;
         }
            
         header section#header-top > .mobile-nav-search
            {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 6;
            border-right: 1px solid #EC872D;
            width: 70px;
            height: 70px;
            font-size: 3em;
            line-height: 70px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            cursor: pointer;
            }   
         header section#header-top > .mobile-nav-general
            {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 6;
            border-left: 1px solid #EC872D;
            width: 70px;
            height: 70px;
            font-size: 3em;
            line-height: 70px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            cursor: pointer;
            }   

@media screen and (max-width: 1000px) 
   {
   header p.logo
      {
      left: 1%;
      width: 29%;
      min-width: 180px;
      }
   header section#header-top ul
      {
      margin: 0 0 0 30%;
      }
   }
@media screen and (max-width: 780px) 
   {
   header section#header-top
      {
      height: 110px;
      text-align: center;
      }
   header p.logo
      {      
      top: 0;
      left: 0;
      width: 100%;
      height: 70px;
      }
      header p.logo a
         {
         background-size: auto 30%;
         }
   header section#header-top ul
      {
      display: none;
      }
   header section#header-top > a > img
      {
      top: 73px;
      right: 0;
      float: none;
      }
   header section#header-top > .mobile-nav-general   { display: block;   }
   header section#header-top > .mobile-nav-search   { display: block;   }
   
   }
   
/******** MIDDLE ***********/
         
   header section#header-middle
      {
      width: 100%;
      height: 180px;
      }
      header section#header-middle nav
         {
         margin: 0 0 0 20px;
         width: 230px;
         height: 100%;
         background: #ffcc00;
         }
         header section#header-middle nav ul
            {
            margin: 0;
            padding: 15px 0 0 38px;
            list-style: none;
            }
            header section#header-middle nav ul li
               {
               height: 25px;
               }            
            header section#header-middle nav ul li:before
               { 
               content: "";
               border-color: transparent #404040;
               border-style: solid;
               border-width: 0.35em 0 0.35em 0.45em;
               display: block;
               height: 0;
               width: 0;
               left: -1.2em;
               top: 1.5em;
               position: relative;
               }   
               header section#header-middle nav ul li a
                  {
                  display: block;
                  font-size: 1.6em;
                  color: #404040;
                  line-height: 25px;
                  text-decoration: none;
                  }
                  header section#header-middle nav ul li a:hover
                     {
                     color: #de6800;
                     }
      header section#header-middle > div
         {
         float: right;
         position: relative;
         width: 750px;
         height: 180px;
         background: url('../pix/mmk_school-bg.png') repeat-x 0 70px #4356a6;
         }
         header section#header-middle > div h1,
         header section#header-middle > div p.title
            {
            margin: 0;
            padding: 0;
            font-size: 3.5em;
            font-weight: 300;
            color: #e0e0e0;
            line-height: 2em;
            text-align: right;
            background: #394c9b;
            }
            header section#header-middle > div h1 strong,
            header section#header-middle > div p.title strong
               {
               font-weight: 600;
               }
            header section#header-middle > div h1 a,
            header section#header-middle > div p.title a
               {
               display: block;
               padding: 0 20px;
               color: #e0e0e0;
               text-decoration: none;
               }
            header section#header-middle > div h1 a:hover,
            header section#header-middle > div p.title a:hover
               {
               color: #ffffff;
               text-decoration: underline;
               }   
         header section#header-middle > div p.contact-info
            {
            margin: 0;
            padding: 0 20px;
            font-size: 1.3em;
            color: #e3e6ee;
            line-height: 30px;
            text-align: right;
            background: #4f61ab;
            }
            header section#header-middle > div p.contact-info a
               {
               color: inherit;
               }   
            header section#header-middle > div p.contact-info em.fa
               {
               margin: 0 7px 0 14px;
               font-size: 1.2em;
               }   
            header section#header-middle > div p.contact-info br
               {
               display: none;
               }         
         header section#header-middle > div p.subtitle
            {
            margin: 0;
            padding: 0;
            font-size: 3.5em;
            font-weight: 300;
            color: #fff;
            line-height: 2em;
            text-align: right;
            }
            header section#header-middle > div p.subtitle strong
               {
               font-weight: 600;
               }
            header section#header-middle > div p.subtitle a
               {
               display: block;
               padding: 0 20px;
               color: inherit;
               text-decoration: none;   
               }
            header section#header-middle > div p.subtitle a:hover { text-decoration: underline; }
                        
         header section#header-middle > div .mobile-nav-istituto
            {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            border-right: 1px solid #5D74AD;
            width: 70px;
            height: 70px;
            font-size: 1em;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            cursor: pointer;
            }            
            header section#header-middle > div .mobile-nav-istituto em
               {
               padding-top: 14px;
               display: block;
               font-size: 3em;
               }      
         header section#header-middle > div .mobile-nav-school
            {
            display: none;
            position: absolute;
            top: 70px;
            left: 0;
            border-right: 1px solid #5D74AD;
            width: 70px;
            height: 70px;
            font-size: 1em;
            color: #ffd002;
            text-align: center;
            text-transform: uppercase;
            cursor: pointer;
            }            
            header section#header-middle > div .mobile-nav-school em
               {
               padding-top: 14px;
               display: block;
               font-size: 3em;
               }
header section#header-middle > ul.slider
   {
   float: right;
   position: relative;
   width: 750px;
   height: 180px;
   margin: 0;
   padding: 0;
   list-style: none;
   }
   header section#header-middle > ul.slider li
      {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-size: cover;
      background-position: 50% 50%;
      }

@media screen and (min-width: 1201px) 
   {
   header section#header-middle div,
   header section#header-middle ul.slider
      { width: 950px; }
   }           
@media screen and (max-width: 1000px) 
   {
   header section#header-middle div,
   header section#header-middle ul.slider
         {
         width: 70%;
         }
         header section#header-middle > div h1,
         header section#header-middle > div p.title
            {
            font-size: 2.5em;
            line-height: 1em;
            }
            header section#header-middle > div h1 a,
            header section#header-middle > div p.title a
               {
               padding: 20px;
               }
   header section#header-middle nav
         {
         margin: 0 0 0 1%;
         width: 29%;
         }      
         header section#header-middle > div p.subtitle
            {
            font-size: 2.5em;
            line-height: 1em;
            }
            header section#header-middle > div p.subtitle a
               {
               padding: 20px;
               }
   }
   
@media screen and (max-width: 780px) 
   {
   header section#header-middle
      {
      height: 140px;
      }
   body.istituto header section#header-middle
      {
      height: 70px;
      }
      header section#header-middle div,
      header section#header-middle ul.slider
         {
         width: 100%;
         height: 140px;
         }
      body.istituto header section#header-middle div
         {
         height: 70px;
         }
         header section#header-middle > div h1,
         header section#header-middle > div p.title,
         header section#header-middle > div p.subtitle
            {
            margin-left: 70px;
            height: 70px;
            font-size: 1.6em;
            box-sizing: border-box;
            }
            header section#header-middle > div h1 a,
            header section#header-middle > div p.title a,
            header section#header-middle > div p.subtitle a
               {
               padding: 10px;
               }
            header section#header-middle > div h1 strong,
            header section#header-middle > div p.title strong,            
            header section#header-middle > div p.subtitle strong
               {
               display: block;
               font-size: 1.6em;
               line-height: 1.5em;
               }      
      header section#header-middle nav
         {
         display: none;
         position: absolute;
         top: 0;
         right: -230px;
         margin: 0;
         width: 230px;
         height: 100%;
         -webkit-transition: box-shadow .5s;
         transition: box-shadow .5s;
         }
         header section#header-middle nav ul
            {
            padding: 0;
            }
            header section#header-middle nav ul li
               {
               float: left;
               width: 100%;
               height: auto;
               text-align: center;
               }
            header section#header-middle nav ul li:before
               {
               content: none;
               }
               header section#header-middle nav ul li a
                  {
                  display: block;
                  padding: 10px;
                  }
         header section#header-middle > div p.contact-info
            {
            display: none;
            }            
         header section#header-middle > div .mobile-nav-istituto, 
         header section#header-middle > div .mobile-nav-school
            { display: block; }
         header section#header-middle > div .mobile-nav-istituto
            { background: #394c9b; }
            
   }
   
/******** BOTTOM ***********/

   header section#header-bottom
      {
      width: 100%;
      height: 49px;
      }
      header section#header-bottom #search
         {
         float: left;
         margin: 0 0 0 20px;
         border-bottom: 1px solid #d9d9d9;
         width: 230px;
         height: 49px;
         background: #fff;
         }
         header section#header-bottom #search input[type="text"]
            {
            margin: 10px;
            padding: 0 10px;
            border: 1px solid #c0c0c0;
            border-radius: 0;
            width: 143px;
            height: 30px;
            font-size: 1em;
            background: #f0f0f0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            }
         header section#header-bottom #search input[type="submit"]
            {
            margin: 10px 0;
            padding: 0;
            border: none;
            border-radius: 0;
            width: 55px;
            font-size: 1em;
            font-weight: 700;
            color: #fff;
            line-height: 30px;
            text-align: center;
            text-transform: uppercase;
            background: #4f61ab;
            cursor: pointer;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            -webkit-transition: background .2s;
            transition: background .2s;
            }
            header section#header-bottom #search input[type="submit"]:hover
               {
               background: #394c9b;
               }
      header section#header-bottom div#breadcrumbs
         {
         float: left;
         border-bottom: 1px solid #d9d9d9;
         width: 730px;
         min-height: 49px;
         margin: 0 0 0 20px;
         }
         header section#header-bottom div#breadcrumbs p
            {
            margin: 0;
            padding-top: 1.4em;
            font-size: 1.2em;
            line-height: 18px;
            }
            header section#header-bottom div#breadcrumbs p strong
               {
               font-weight: 400;
               color: #4f61ab;
               }
            header section#header-bottom div#breadcrumbs p span
               {
               margin:  0 4px;
               /*font-size: 0.7em;*/
               color: #de6800;
               }
            header section#header-bottom div#breadcrumbs p a
               {
               color: inherit;
               text-decoration: none;
               }
               header section#header-bottom div#breadcrumbs p a:hover
                  {
                  text-decoration: underline;
                  }

@media screen and (min-width: 1201px) 
   {
   header section#header-bottom div#breadcrumbs { width: 930px; }
   }                  
@media screen and (max-width: 1000px) 
   {
   header section#header-bottom #search
      {
      margin: 0 0 0 1%;
      width: 29%;
      }
   header section#header-bottom div#breadcrumbs
      {
      width: auto;
      }
   }

@media screen and (max-width: 780px) 
   {
   header section#header-bottom
      {
      position: absolute;
      top: -50px;
      left: 0;
      }
      header section#header-bottom #search
         {
         margin: 0;
         border: 0;
         width: 100%;
         height: 50px;
         font-size: 1.2em;
         text-align: center;
         background: #404040;
         }
         header section#header-bottom #search input[type="text"]
            {
            margin: 0;
            border: 0;
            width: 70%;
            height: 100%;
            font-size: 1.2em;
            }
         header section#header-bottom #search input[type="button"]
            {
            margin: 0;
            width: 30%;
            height: 100%;
            }
      header section#header-bottom div#breadcrumbs
         {
         display: none;
         }
   }   

/**************************************************************************

ASIDE LEFT

*************************************************************************/

#left
   {
   float: left;
   margin-right: 20px;
   width: 250px;
   }
   #left nav > div
      {
      float: left;
      margin: 0 0 10px 20px;
      background: #fff;
      width: 230px;
      }
 #left nav > div.listascuole { display: none; }
      #left nav > div .menuvoice
         {
         display: block;
         position: relative;
         left: -20px;
         margin: 10px 0; 
         padding: 0 20px;
         width: 240px;
         font-size: 1.6em;
         font-weight: 600;
         color: #fff;
         line-height: 40px;
         text-decoration: none;
         text-transform: uppercase;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         cursor: pointer;
         }
      #left nav > div .blue   { background: #4356a6; background: url('../pix/mmk_school-bg.png') -22px -63px/350px auto no-repeat #4356a6; }
#left nav > div .grey   { background: #606060; background: url('../pix/mmk_school-bg.png') -22px -63px/350px auto no-repeat #606060; cursor: pointer; }
      #left nav > div .grey:hover   { color: #de6800; }
      
         #left nav ul
            {
            margin: 0 10px 0 0;
            padding: 0px 0 20px 30px;
            list-style: none;
            }   
         #left nav ul li ul
            {
            padding: 0px 0 0px 15px;
            overflow: hidden;
            }   
            #left nav ul li:before
               { 
               content: "";
               border-color: transparent #de6800;
               border-style: solid;
               border-width: 0.35em 0 0.35em 0.45em;
               display: block;
               height: 0;
               width: 0;
               left: -1.2em;
               top: 1.5em;
               position: relative;
transition: left 0.5s;
-webkit-transition: left 0.5s;
               }
            #left nav ul li:hover:before
               { 
               left: -0.8em;
               }
               #left nav ul li a
                  {
                  display: block;
                  font-size: 1.4em;
                  color: #606060;
                  line-height: 25px;
                  text-decoration: none;
                  }
                  #left nav ul li a:hover
                     {
                     color: #394c9b;
                     }   
               #left nav ul li.hiexpand a
                  {
                  color: #df6800;
                  }
@media screen and (max-width: 1000px) 
   {
   #left
      {
      margin: 0 1%;
      width: 29%;
      }
      #left nav > div
         {
         margin: 0 0 10px 0;
         width: 100%;
         }
      #left nav > div.listascuole { display: block; }
         #left nav > div .menuvoice
            {
            width: 100%;
            }      
   }
   
@media screen and (max-width: 780px) 
   {
   #left
      {
      width: 0;
      }   
   #left nav
      {
      position: absolute;
      top: 0;
      left: -230px;
      width: 230px;
      height: 100%;
      overflow: hidden;
      z-index: 8888;
      margin: 0;
      height: 100%;
      background: #4356a6;
      overflow: scroll;
      -webkit-transition: box-shadow .5s;
      transition: box-shadow .5s;
      }
      #left nav > div
         {
         margin: 0;
         width: 230px;
         background: #4356a6;
         color: #fff;
         }
         #left nav > div .menuvoice
            {
            left: 0;
            width: 100%;
            text-align: center;
            background-position: 0px 0px;
            background-repeat: repeat-x;
            background-size: auto 200%;
            cursor: pointer;
            }
         #left nav > div .blue   { background-color: #1F358F; }
         #left nav > div .grey   { background-color: #1F3463; }
         #left nav > div .grey:hover   { color: white;   }
         #left nav > div ul
            {
            margin: 0;
            padding: 0;
            text-align: left;
            }
            #left nav > div ul li
               {      
               height: auto;
               border-bottom: 1px solid #58718c;
               }
            #left nav > div ul li:before
               {
               content: none;
               }
            #left nav > div ul li a
               {
               position: relative;
               display: block;
               padding: 10px;
               font-size: 1.6em;
               color: #fff;
               line-height: 25px;
               }
               #left nav ul li.hiexpand a
                  {
                  font-weight: bold;
                  color: #ffffff;
                  }
            #left nav ul li.active > a
               {
               background: #3349A3;
               }   
               #left nav ul li a:hover
                  {
                  color: white;
                  }  
               #left nav ul li a span
                  {
                  font-weight: bold;
                  color: #fff !important;
                  } 
                  #left nav > div ul li ul
                     {
                     padding-left: 0; background: #697bc1;
                     } 
                  #left nav > div ul li ul li
                     {
                     border-bottom: 1px solid #4356a6;
                     }
                  #left nav > div ul li ul li a
                     {
                     padding-left: 20px;
                     }
            #left div ul.scuole li p
               {
               margin: 0;
               color: #A8C0FF;
               }
            #left div ul.scuole li strong
               {
               display: block;
               color: #fff;
               }
            #left div ul.scuole li em.fa
               {
               }      
   }

/**************************************************************************

CONTENT

*************************************************************************/

section#content
   {
   float: left;
   margin: 0 20px 10px 0;
   width: 460px;
   }
@media screen and (min-width: 1201px) 
   {
   section#content  { width: 660px; }
   }
@media screen and (max-width: 1000px) 
   {
   section#content
      {
      margin: 0 1% 10px 0%;
      width: 68%;
      }
   }  
@media screen and (max-width: 780px) 
   {
   section#content
      {
      margin: 0 1% 10px 1%;
      width: 98%;
      }
   }

/**************************************************************************

CONTENT FULL WIDTH

*************************************************************************/

section#content.fullwidth
   {
   position: relative;
   margin: 10px 0 0;
   width: 100%;
   }
   
/**************************************************************************

CONTENT HOMEPAGE GENERIC

*************************************************************************/


body section#content.homepage_generic { font-size: 1em; }

body section#content.homepage_generic > section h2,
body section#content.homepage_generic > aside h2
   {
   display: block;
   margin: 0 0 10px 0; 
   padding: 0 20px;
   font-size: 1.6em;
   font-weight: 600;
   color: #fff;
   line-height: 40px;
   text-align: center;
   text-transform: uppercase;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }
body section#content.homepage_generic > section h2.blue,
body section#content.homepage_generic > aside h2.blue
   {
   background: #4356a6; background: url('../pix/mmk_school-bg.png') -0px -73px/50% auto repeat  #4356a6;
   }
body section#content.homepage_generic > section h2.grey,
body section#content.homepage_generic > aside h2.grey
   {
   background: #606060; background: url('../pix/mmk_school-bg.png') -0px -73px/50% auto repeat  #606060;
   }
body section#content.homepage_generic > section h2.orange,
body section#content.homepage_generic > aside h2.orange
   {
   background: #df6800; background: url('../pix/mmk_school-bg.png') -0px -73px/50% auto repeat  #df6800; 
   }

body section#content.homepage_generic > aside.right
   {
   float: right;
   margin: 0 20px 20px 0;
   padding: 10px;
   width: 245px;
   background: #fff;
   overflow: auto;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }  
   body section#content.homepage_generic >  aside.right article
      {  
      margin: 10px;
      overflow: auto;
      }
      body section#content.homepage_generic >  aside.right article p
         {
         margin: 10px 0;
         font-size: 1.4em;
         font-weight: 300;
         color: #606060;
         text-decoration: none;
         }
         body section#content.homepage_generic >  aside.right article p strong
            {
            display: block;
            color: #404040;
            }
         
body section#content.homepage_generic > section
   {
   margin: 0 20px 20px 20px;
   padding: 10px;
   background: #fff;
   overflow: auto;
   }
   body section#content.homepage_generic > aside.right + section { margin-right: 285px;   }   

   body section#content.homepage_generic > section.istituti ul
      {
      margin: 0;
      padding: 0;
      list-style: none;
      }
      body section#content.homepage_generic > section.istituti ul li
         {
         float: left;
         margin: 0 0 1px 0;
         width: 25%;
         //height: 80px;
         background: rgb(240,249,255);
         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmVlZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
         background: -moz-linear-gradient(left, rgba(240,249,255,1) 0%, rgba(235,238,252,1) 100%);
         background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,249,255,1)), color-stop(100%,rgba(235,238,252,1)));
         background: -webkit-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(235,238,252,1) 100%);
         background: -o-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(235,238,252,1) 100%);
         background: -ms-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(235,238,252,1) 100%);
         background: linear-gradient(to right, rgba(240,249,255,1) 0%,rgba(235,238,252,1) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#ebeefc',GradientType=1 );
         }
      body section#content.homepage_generic > aside.right + section ul li {   width: 33.33%;   }
      
         body section#content.homepage_generic > section.istituti ul li a
            {
            display: block;
            padding: 22px;
            font-size: 1.4em;
            font-weight: 300;
            color: #404040;
            text-decoration: none;
            }
         body section#content.homepage_generic > section.istituti ul li:hover
            {
            background: rgb(240,249,255);
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYmNiZGYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
            background: -moz-linear-gradient(left, rgba(240,249,255,1) 0%, rgba(187,203,223,1) 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,249,255,1)), color-stop(100%,rgba(187,203,223,1)));
            background: -webkit-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(187,203,223,1) 100%);
            background: -o-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(187,203,223,1) 100%);
            background: -ms-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(187,203,223,1) 100%);
            background: linear-gradient(to right, rgba(240,249,255,1) 0%,rgba(187,203,223,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#bbcbdf',GradientType=1 );
            }
            body section#content.homepage_generic > section.istituti ul li a strong
               {
               display: block;
               font-size: 1.14em;
               font-weight: 600;
               }
   body section#content.homepage_generic > section.scuole { clear: both; }
   
      body section#content.homepage_generic > section.scuole article 
         {
         float: left;
         width: 25%;
         }
         body section#content.homepage_generic > section.scuole article h3
               {
               margin: 10px;
               font-size: 1.6em;
               color: #de6800;
               text-transform: uppercase;
               }

         body section#content.homepage_generic > section.scuole article ul
               {
               margin: 10px;
               padding: 0px 0 20px 15px;
               font-weight: 300;
               list-style: none;
               }
               body section#content.homepage_generic > section.scuole article ul li:before
                  { 
                  content: "";
                  border-color: transparent #de6800;
                  border-style: solid;
                  border-width: 0.35em 0 0.35em 0.45em;
                  display: block;
                  height: 0;
                  width: 0;
                  left: -1.5em;
                  top: 1.5em;
                  position: relative;
                  }  
                  body section#content.homepage_generic > section.scuole article ul li a
                     { 
                     display: block;
                     font-size: 1.4em;
                     color: #404040;
                     line-height: 25px;
                     text-decoration: none;
                     }  
                  body section#content.homepage_generic > section.scuole article ul li a:hover
                     { 
                     color: #de6800;
                     }  

@media screen and (max-width: 1000px) 
   {
   body section#content.homepage_generic > section.istituti ul li
      {
      width: 33%;
      }
   body section#content.homepage_generic > aside.right + section.istituti ul li
      {
      width: 50%;
      }
   }                 

@media screen and (max-width: 760px) 
   {
   body section#content.homepage_generic > section.istituti ul li
      {
      width: 50%;
      }
   body section#content.homepage_generic > aside.right + section.istituti ul li
      {
      width: 100%;
      }
   body section#content.homepage_generic > section.scuole article 
      {
      width: 50%;
      } 
   body section#content.homepage_generic > section.istituti ul li a
      {
      padding: 10px;
      }
   }              


@media screen and (max-width: 580px) 
   {
   body section#content.homepage_generic > aside.right { float: none; margin: 20px; width: auto; }
   body section#content.homepage_generic > aside.right + section.istituti { margin-right: 20px; }
   body section#content.homepage_generic > section.istituti ul li,
   body section#content.homepage_generic > aside.right + section.istituti ul li,
   body section#content.homepage_generic > section.scuole article 
      {
      width: 100%;
      }
   body section#content.homepage_generic > section.scuole article h3
      {
      margin: 0;
      padding: 10px;
      cursor: pointer;
      }
   }   
/**************************************************************************

GENERIC PAGE

*************************************************************************/

body section#content.page_generic aside#left
   {
   position: absolute;
   top: -10px;
   left: 20px;
   bottom: 0;
   width: 230px;
   background: #4356a6; background: url('../pix/mmk_asidedoodles.png') 0 0 repeat #4356a6;
   }
body section#content.page_generic section.contenuto
   {
   margin: 0 20px 0 270px;
   }
   
@media screen and (max-width: 1000px)
   {
   body section#content.page_generic aside#left
      {
      left: 0;
      margin: 0 1%;
      width: 29%;
      }  
   body section#content.page_generic section.contenuto
      {
      margin: 0 2% 0 32%;
      } 
   }
   
@media screen and (max-width: 780px) 
   {
   body section#content.page_generic aside#left  { display: none; }     
   body section#content.page_generic section.contenuto { margin: 0 20px; } 
   }


/**************************************************************************

CONTENT PAGE

*************************************************************************/

section#content
   {
   font-size: 1.4em;
   line-height: 1.5;
   }
section#content h1
   {
   display: block;
   font-size: 2.15em;
   font-weight: 400;
   }

section#content h2,
section#content span.sottotitolo
   {
   display: block;
   font-size: 1.6em;
   font-weight: 400;
   }
   
section#content h3
   {
   display: block;
   font-size: 1.4em;
   font-weight: 400;
   } 
section#content h4
   {
   display: block;
   font-weight: 400;
   } 
 
body.scuola section#content h1,
body.scuola section#content h2,
body.scuola section#content h3,
body.scuola section#content h4,
body.scuola section#content span.sottotitolo
   { color: #CE6000; }

body.istituto section#content h1
   { color: #394c9b; }   

body.istituto section#content h2,
body.istituto section#content h3,
body.istituto section#content h4,
body.istituto section#content span.sottotitolo
   { color: #4f61ab; }   

section#content p
   {
   }   
   section#content a { color: #202020; }
   body.scuola section#content a   { color: #CE6000;   }
   body.istituto section#content a   { color: #394c9b;   }

section#content a { text-decoration: underline; }


@media screen and (max-width: 780px) 
   {
   section#content
      {
      width: 94%;
      margin: 0 3% 10px 3%;
      }   
   }

/**************************************************************************

CONTENT HOMEPAGE

*************************************************************************/

body section#content.homepage 
{

   font-size: 1em;
}
   body section#content.homepage > section
      {
      margin: 0 0 10px 0;
      width: 100%;
      background: #fff;
      overflow: auto;
      overflow-y: hidden;
      }
      body section#content.homepage > section h2
         {
         display: block;
         margin: 10px 10px 0; 
         padding: 0 20px;
         font-size: 1.6em;
         font-weight: 600;
         color: #fff;
         line-height: 40px;
         text-transform: uppercase;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         background: #606060;
         background: url('../pix/mmk_school-bg.png') -0px -73px/100% auto no-repeat #606060;
         }
body section#content.homepage > section a
            {
            color: #303030;
            }
      body section#content.homepage > section article:last-child { border: none;  }
      body section#content.homepage > section article
         {
         clear: both;
         margin: 10px 10px 0;
         border-bottom: 1px solid #d9d9d9;
         overflow: auto;
         }
            
         body section#content.homepage > section article > a
            {
            color: inherit;
            text-decoration: none;
            }
            body section#content.homepage > section article > a:hover img
               {
               opacity: .7;
               }
            body section#content.homepage > section article > a h3
               {
               text-decoration: underline;
               }
            body section#content.homepage > section article > a:hover h3
               {
               text-decoration: underline;
               }
         body section#content.homepage > section article img
            {
            float: left;
            margin: 0 10px 10px 0;
            width: 120px;
            height: 120px;
            }
         body section#content.homepage > section article h3
            {
            margin: 10px 0 5px;
            font-size: 1.4em;
            }
         body section#content.homepage > section article a h3,
         body.istituto section#content.homepage > section article a h3
            {
            color: #4356a5;
            }
         body.scuola section#content.homepage > section article a h3
            {
            color: #de6800;
            }
         body section#content.homepage > section article p
            {
            margin: 10px 0 20px;
            font-size: 1.4em;
            font-weight: 300;
            color: #616161;
            }
         body section#content.homepage > section article img + h3 + p
            {
            margin: 10px 0 10px 130px;
            }
      body section#content.homepage > section.coordinate p
         {
         margin: 0;
         border-bottom: 1px solid #e0e0e0;
         padding: 10px;
         font-size: 1.4em;
         color: #606060;
         }
      body section#content.homepage > section.coordinate p strong
         {
font-weight: 400;
color: #de6800;
         }
      body section#content.homepage > section.coordinate  img
         {
         display: block !important;
         border: 0 !important;
         float: right !important;
         margin: 10px !important;
         height: 150px !important;
         }
      body section#content.homepage > section ul
         {
         margin: 10px;
         padding: 0 0 0 5px;
         list-style: none;
         }
         body section#content.homepage > section ul li
            {
            margin: 5px 0;
            font-size: 1.4em;
            font-weight: 300;
            color: #616161;            
            }
            body section#content.homepage > section ul li em.fa
               {
               margin-right: 5px;
               font-style: normal;   
               color: #4356a5;   
               } 
 
ul.ultimi_aggiornamenti li
   {
   position: relative;
   }
   ul.ultimi_aggiornamenti li i
      {
      font-style: normal;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      }
   ul.ultimi_aggiornamenti li a
      {
      display: block;
      margin-left: 80px;
      }
@media screen and (max-width: 780px) 
{
section#content a h3, section#content a h2 {text-decoration: underline !important;}
}
/**************************************************************************

ASIDE RIGHT

*************************************************************************/

#right
   {
   float: right;
   width: 250px;   
   }
   #right > div
      {
      float: left;
      margin: 0 20px 20px 0;
      background: #fff;
      width: 230px;
      }
      #right > div .menuvoice
         {
         display: block;
         position: relative;
         right: -10px;
         margin: 10px 0; 
         padding: 0 20px;
         width: 240px;
         font-size: 1.6em;
         font-weight: 600;
         color: #fff;
         line-height: 40px;
         text-transform: uppercase;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         }
      #right > div .orange   { background: #df6800; background: url('../pix/mmk_school-bg.png') -22px -63px/350px auto no-repeat #df6800; }   
      
      #right > div ul
            {
            margin: 0;
            padding: 0px 0 20px 35px;
            list-style: none;
            }  
            #right > div ul ul
                  {
                  padding: 0 0 0 15px;
                  }         
            #right > div ul li:before
               { 
               content: "";
               border-color: transparent #de6800;
               border-style: solid;
               border-width: 0.35em 0 0.35em 0.45em;
               display: block;
               height: 0;
               width: 0;
               left: -1.2em;
               top: 1.5em;
               position: relative;
               }   
               #right > div ul li a
                  {
                  display: block;
                  font-size: 1.4em;
                  color: #606060;
                  line-height: 25px;
                  text-decoration: none;
                  }
                  #right > div ul li a:hover
                     {
                     color: #de6800;
                     }
               #right > div ul li.hiexpand a
                  {
                  color: #de6800;
                  }    
      #right > div ul.scuole
         {
         margin: 0px;
         padding: 0;
         list-style: none;
         }
         #right > div ul.scuole li:before
            {
            content: none;
            }
            #right > div ul.scuole li a
               {
               display: block;
               padding: 10px 25px;
               color: inherit;
               text-decoration: none;
               -webkit-transition: background .4s, box-shadow .4s;
               transition: background .4s, box-shadow .4s;
               }
               #right > div ul.scuole li a:hover
                  {
                  background: #e06a00;
                  box-shadow: 0 3px 0px #CA4704;
                  -webkit-box-shadow: 0 3px 0px #CA4704;
                  }
                  #right > div ul.scuole li a:hover p,
                  #right > div ul.scuole li a:hover strong
                     {
                     color: #fff;
                     }
                  #right > div ul.scuole li a:hover em.fa
                     {
                     color: #000;
                     }
               #right > div ul.scuole li p
                  {
                  margin: 0;
                  color: #616161;
                  line-height: 1.3em;
                  -webkit-transition: color .4s;
                  transition: color .4s;
                  }               
                  #right > div ul.scuole li p strong
                     {
                     display: block;
                     margin-bottom: 5px;
                     font-size: 1.1em;
                     color: #e06a00;
                     -webkit-transition: color .4s;
                     transition: color .4s;
                     }
                  #right > div ul.scuole li p em.fa
                     {
                     margin-right: 3px;
                     color: #93a4dc;
                     -webkit-transition: color .4s;
                     transition: color .4s;
                     }

   body.istituto #right > div.banners
      {
      background: transparent;
      }
   #right a.banner
      {
      display: block;
      margin: 0 0 10px;
      width: 230px;
      text-decoration: none;
      box-shadow: 0 3px 5px #e0e0e0;
      background: #fff;
      }
   #right a.banner img
      {
      display: block;
      margin: 0 auto;
      border: 0;
      max-width: 100%;
      height: auto;
      }

@media screen and (max-width: 1000px) 
   {
   #right
      {
      margin: 0 1%;
      width: 98%;
      }
   body.istituto #right
      {
      width: 98%;
      }
   body.istituto #right > div:first-child
         {
         display: none;
         }
      body.istituto #right > div
         {
         width: 100%;
         }
      body.scuola #right > div
         {
         width: 100%;
         margin: 0 0 10px 0;
         }
         #right > div .menuvoice
            {
            right: 0;
            margin: 10px;
            width: auto;
            }
            #right > div ul li
               {
               width: 50%;
               float: left;
               }
      #right a.banner
         {         
         float: left;
         margin: 1% 0.5%;
         width: 24%;
         }
      #right div:nth-child(4n+1) a.banner { clear: left; }
      #right img.banner:nth-child(even) { clear: both; }
   }
   
@media screen and (max-width: 780px) 
   {
   body.scuola #right
      {
      margin: 0;
      }
   body.istituto #right
      {
      margin: 0 2% 0 3%;
      width: 95%;
      }      
      body.istituto #right > div ul li
         {
         width: 100%;
         }
      
      body.scuola #right > div
         {
         display: block;
         }         
      body.scuola #right > div
         {
         position: absolute;
         top: 0;
         left: -230px;
         z-index: 8888;
         margin: 0;
         width: 230px;
         height: 100%;
         background: #df6800;
         overflow: scroll;
         -webkit-transition: box-shadow .5s;
         transition: box-shadow .5s;
         }
      
         body.scuola #right > div .menuvoice
            {
            right: 0;
            margin: 10px 0;
            width: 100%;
            background-color: #C74A0F;
            background-position: 0 0;
            background-size: 100% auto; 
            -webkit-background-size: 100% auto; 
            }
         body.scuola #right > div ul
            {
            padding: 0;
            }
            body.scuola #right > div ul li
               {
               float: none;
               width: 100%;
               border-bottom: 1px solid #C74A0F;
               }

            body.scuola #right > div ul li ul
               {
               padding-left: 0;
               background: #E07F2A;
               } 
            body.scuola #right > div ul li ul li
               {
               border-bottom: 0;
               border-top: 1px solid #D26836;
               }
            body.scuola #right > div ul li ul li a
               {
               padding-left: 20px;
               }
            body.scuola #right > div ul li:before
               {
               content: none;
               }                     
               body.scuola #right > div ul li a
                  {
                  padding: 10px;   
                  font-size: 1.6em;
                  color: #fff;
                  line-height: 25px;
                  }                      
               body.scuola #right > div ul li a span
                  {
                  font-weight: bold;
                  color: #fff !important;
                  }
                  body.scuola #right > div ul li a:hover
                     {
                     color: #fff;
                     }
                  body.scuola #right > div ul li.hiexpand a
                     {
                     font-weight: bold;
                     color: #fff !important;
                     }  
                  body.scuola #right > div ul.scuole li p
                     {   
                     color: #fff;
                     }
                     body.scuola #right > div ul.scuole li p em.fa,
                     body.scuola #right > div ul.scuole li p strong
                        {
                        color: #000;
                        }  
      #right a.banner
         {       
         margin: 1% 0.5%;
         width: 32.333%;
         }
      #right div:nth-child(4n+1) a.banner { clear: none; }
      #right div:nth-child(3n+1) a.banner { clear: left; }
   }


@media screen and (max-width: 580px) 
   {
      body.istituto #right > div
         {
         width: 99%;
         }
      #right a.banner
         {       
         margin: 1% 0.5%;
         width: 49%;
         }
      #right div:nth-child(3n+1) a.banner { clear: none; }
      #right div:nth-child(2n+1) a.banner { clear: left; }
   }


@media screen and (max-width: 320px) 
   {    
      body.istituto #right > div
         {
         width: 99%;
         }
      
      #right a.banner
         {       
         margin: 1% 0.5%;
         width: 99%;
         }
      #right div:nth-child(2n+1) a.banner { clear: none; }
   }
 

/**************************************************************************

FOOTER

*************************************************************************/

.lastmod
{
padding: 10px 20px;
line-height: 20px;
font-size: 1.2em;
color: #909090;
text-align: left;
text-shadow: 0 1px 0 #ffffff;
}
footer
   {
   border-top: 5px solid #fe9a00;
   background: #404040;
   }
   footer div.wrapper > div
      {
      float: left;
      width: 25%;
      min-height: 250px;
      border-left: 1px solid #202020;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      }   
   footer div.wrapper > div:first-child{ border: none; }
   
   footer div > img
      {
      margin: 20px;
      max-width: 80%;
      text-align: center;
      }
   footer div > ul
      {
      margin: 20px 0;
      padding: 0px 0 0 38px;
      list-style: none;
      }
      footer div > ul li
         {
         height: 25px;
         }            
      footer div >  ul li:before
         { 
         content: "";
         border-color: transparent #de6800;
         border-style: solid;
         border-width: 0.35em 0 0.35em 0.45em;
         display: block;
         height: 0;
         width: 0;
         left: -1.2em;
         top: 1.5em;
         position: relative;
         }   
         footer div > ul li a
            {
            display: block;
            font-size: 1.3em;
            color: #c0c0c0;
            line-height: 25px;
            text-decoration: none;
            }
            footer div > ul li a:hover
               {
               color: #fff;
               }
               
@media screen and (max-width: 780px) 
   {
   footer div.wrapper > div
      {
      width: 50%;
      min-height: 1px;
      }
      footer div.wrapper > div:first-child
         {
         display: none;
         }
   }

   
/*************************************************************************
FORMS
*************************************************************************/

#content form
   {
   margin: 0;
   border: 0;
   padding: 0;
   }
   #content form fieldset
      {
      margin: 0;
      border: 0;
      padding: 0;
      }
      #content form fieldset label
         {
         display: block;
         font-weight: bold;
         color: #606060;
         line-height: 2;
         }
      #content form fieldset input[type="text"],
      #content form fieldset input.community_input
         {
         margin: 0 0 10px 0;
         border: 1px solid #C2C2C2;
         padding: 7px 10px;
         width: 100%;
         max-width: 300px;
         color:  #202020;
         outline: none;
         background: transparent;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         }
      #content form fieldset input[type="submit"],
      #content form fieldset button,
      #content form fieldset .community_button
         {
         display: block;
         position: relative;
         margin: 20px 0;
         padding: 10px 30px;
         border: none;
         color: #fff;
         font-weight: 600;
         background: #394c9b;
         text-decoration: none;
         text-transform: uppercase;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         cursor: pointer;
         -webkit-transition: background .3s;
         transition: background .3s;
         }
         #content form fieldset .community_button:hover
            {
            background: #456ABA;
            }
   
      #content form fieldset input:focus
         {
         outline: none;
         }