html,body        {margin:0; padding:0; height:100%;}
body             {font-family:Lora,Arial; font-size:15px; color:#222222; background:#ffffff;}
.clear           {clear:both;}
.story           {margin:auto; width:1200px;}
.left            {float:left;}
.right           {float:right;}
img, iframe      {border:0; border-radius:4px;}
ul               {margin:5px 0 10px 0; padding-left:30px;}

#top             {width:100%; height:150px; padding-top:5px; z-index:50;}
#logo            {float:left;}
#recherche       {float:left;margin:80px 0 0 140px;}
#mairie          {float:right; text-align:right; padding-top:20px; margin-right:5px; font-size:13px; color:#777777;}
#intro           {width:100%; height:450px; z-index:50;}
.fixintro        {margin-top:80px;}
#menur           {display:none; position:absolute; padding:15px; top:0; right:0; z-index:99;}

#menur a:link,#menur a:visited {color:#222222;}
#lemenu          {clear:both; width:100%; display:block; background:#ffffff; height:80px;}
.fixmenu         {position:fixed; top:0px; z-index:99;}
#menu            {position:absolute; width:100%; z-index:90; text-align:center; font-size:0px;}

#menu a                     {display:block;}
#menu a:link,#menu a:visited{color:#222222;}
.item                       {text-align:left; background:#ffffff; display:inline-block; vertical-align:top; width:224px; margin:5px; padding:3px; cursor:pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; border-radius:4px; moz-border-radius:4px;}
.item:hover .item-titre     {color:#ffffff;}
.item-titre                 {padding:10px; font-size:24px; color:#222222;}
.line                       {display:inline-block; margin-top:10px; background:#ffffff; width:10px; height:60px;}
.list                       {display:none; position:relative;}
.sitem, .sitem2, .ssitem    {background:#ffffff; font-size:15px; padding:5px 15px 5px 10px; margin-top:3px; border-radius:2px;}
.sitem:hover, .sitem2:hover, .ssitem:hover {background:#f5f5f5; cursor:pointer;}
.slist                      {display:none; position:absolute; margin:-8px 0 0 214px; width:184px; padding:0 3px 3px 3px; border-radius:4px; moz-border-radius:4px;}
.flr                        {position:absolute; margin-left:194px; width:15px; height:20px; background:url('/ima/flr.png');}
#page            {float:left; width:900px; margin:20px 0 20px 0;}
#page-actu       {float:left; width:900px; margin:20px 0 20px 0; font-size:0;}
#ariane          {display:block; padding-bottom:10px; margin-bottom:20px; border-radius:3px; moz-border-radius:3px; line-height:30px; font-size:15px;}
#colonne         {float:right; width:280px; margin:20px 0 20px 0;}
.col             {font-size:0px; padding-bottom:10px;}
.col a:link,.col a:visited {color:#222222;}
.ico             {display:inline-block; font-size:11px; text-align:center; padding:5px; width:60px; height:90px; vertical-align:top;}
.item-col        {margin-top:10px; text-align:left; display:block; vertical-align:top; padding:3px; cursor:pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; border-radius:4px; moz-border-radius:4px;}
.col-tit         {color:#ffffff; padding:10px; font-size:17px; display:block;}      
.flb             {position:absolute; margin:-20px 0 0 240px; width:15px; height:20px; background:url('/ima/flb.png');}
.slist2          {display:none; position:relative; width:100%; padding-top:5px;}
.ssitem2         {background:#ffffff; font-size:15px; padding:5px 10px 5px 10px; border-radius:2px; moz-border-radius:2px; margin-top:3px;}
.ssitem2:hover   {background:#eeeeee; cursor:pointer;}
#intro2          {width:100%; height:100px; z-index:50;}

.actu            {float:left; margin-bottom:15px; width:100%;}
.actu-img        {float:left; margin-right:15px;}

.sep             {display:none;}
.item-actu       {display:inline-block; width:450px; margin-bottom:40px; vertical-align:top; font-size:15px; cursor:pointer;}
.tactu           {font-size:24px; margin-bottom:5px; display:block;font-weight:700;}
.det-actu {width:420px;}
.home            {background:#f5f5f5; padding:2px 4px 2px 4px; border-radius:4px; display:inline-block; font-size:15px;}

#bas             {background:#444444; padding:10px 0 10px 0; width:100%; font-size:0px;}
.titre-bas       {font-size:18px; color:#dddddd; margin-bottom:5px; display:inline-block;}
.item-bas        {font-size:14px; text-align:left; display:inline-block; vertical-align:top; width:230px; margin:5px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.item-bas a:link, .item-bas a:visited  {color:#aaaaaa;}
.item-bas a:hover  {color:#dddddd; text-decoration:none;}
#foot            {background:#222222; padding:5px 0 5px 0; width:100%; font-size:13px; text-align:center; color:#ffffff;}

.gp          {float:left; margin:0 10px 10px 0;}
.dp          {float:right; margin:0 0 10px 10px;}

hr           {height:1px; border:0; background:#cccccc;}
.titre       {font-size:24px; display:block; padding-bottom:10px; margin-bottom:10px; border-radius:3px; moz-border-radius:3px; border-bottom:3px solid #777777; line-height:30px;}
.titreg      {font-size:28px; font-weight:700;}
.titreg2     {font-size:24px; font-weight:700;}
.tel         {font-size:20px; font-weight:700;}
.mail        {font-size:16px; font-weight:700; background:#f5f5f5; padding:2px 4px 2px 4px; border-radius:4px; display:inline-block; margin-top:5px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.mail:hover  {background:#cee8f6;}
.stabilo     {background:#f3d637;}
.normal      {font-size:15px; color:#222222;}

.text        {border-radius:4px; color:#333333; border:1px solid #f5f5f5; background:#ffffff; font-family:Lora,Arial; font-size:15px; cursor:pointer; padding: 4px 8px 4px 8px; margin-bottom:5px; width:200px; display:inline-block;}
.textarea    {border-radius:4px; color:#333333; border:1px solid #f5f5f5; background:#ffffff; font-family:Lora,Arial; font-size:15px; cursor:pointer; padding: 4px 8px 4px 8px; margin-bottom:5px; width:300px; display:inline-block;}
.g-recaptcha {margin:0 0 10px 0; text-align:center; display:inline-block;}
.erreur      {display:inline-block; border:0; color: #e40006; margin:10px 0 10px 0; font-size:16px; cursor:pointer;}
.bouton            {font-family:Laro,Arial; font-size:15px; color: #ffffff; border:0; background:#aaaaaa; padding:3px 6px 3px 6px; cursor:pointer; border-radius:4px;}
.bouton:hover      {background:#00ea03;}
a            {outline: none;}
a:link       {color: #0091e0; text-decoration: none}
a:visited    {color: #0091e0; text-decoration: none}
a:hover      {color: #15adff; text-decoration: none}
a.b:link     {color: #ffffff; text-decoration: none}
a.b:visited  {color: #ffffff; text-decoration: none}
a.b:hover    {color: #ffffff; text-decoration: none}
a.n:link     {color: #222222; text-decoration: none}
a.n:visited  {color: #222222; text-decoration: none}
a.n:hover    {color: #222222; text-decoration: none}
iframe       {width:100%;}

@media screen and (max-width: 767px)
  {
  #recherche, #mairie, #bas, .flr {display:none;}
  .story, .storys    {margin:auto; width: calc(100% - 30px); padding:15px;}
  #page, #page-actu, .item-actu, .det-actu {width:100%;}
  #logo {float:none; width:100%; text-align:center;}
  #intro {margin-top:20px;}
  .left, .right, actu, .actu-img, #colonne, .dp, .gp  {float:none; margin:0;}
  .actu-img {display:block; margin-bottom:10px;}
  .actu {display:block;}
  #menu {display:none; padding-top: 60px;background:rgba(255,255,255,0.7);top: 0;height: 100%;}
  .item {margin:5px 15px; width:calc(100% - 50px); padding:10px;}
  .sitem, .sitem2 {padding:10px; font-size:16px;}
  .slist {display:none;}
  .flb {margin:-20px 0 0 0; right:40px;}
  #page {text-align:justify;}
  #lemenu {height:0;}
  #menur {display:block;}
  .item-col {width:calc(100% - 20px); padding:10px;}
  .col  {display:inline-block;}
  iframe             {width:100%;}
  img{max-width:100%;}
  table              {width:100%;}
  tr,td              {display:block; width:100%; max-width:100%; padding:0; margin-bottom:5px;}
  a                  {margin-bottom:5px;}

  #colonne {width:100%;}
  .col {display:block;}
  #foot {padding:15px; width:calc(100% - 30px);}
  .item-actu {word-break: break-all;}
  }
@media screen and (min-width: 768px) and (max-width: 1300px)
  {
  #recherche {display:none;}
  .story, .storys    {margin:auto; width: calc(100% - 30px); padding:15px;}
  #page, #page-actu {width:100%;}
  .left, .right, actu, .actu-img, #colonne, .dp, .gp  {float:none; margin:0;}
  iframe             {width:100%;}
  table              {width:100%;}
  tr,td              {display:inline-block; width:100%; max-width:100%; padding:0; margin-bottom:5px;}
  .item    {width: calc(15% - 10px);}
  .flr     {margin-left:calc(100% - 30px); }
  .slist {margin-left:calc(100% - 10px); width: calc(100% - 35px);}
  }