.container {position:fixed; z-index:1000;background-color:#f5f2ed;right: 0px;height:40px;left:0px;top:200px }
body, p { color: #404040;font-family: Arial,Arial;font-size:1.2em;font-style:normal;line-height:1.5;font-weight:normal;text-align: justify; text-indent: 0cm;}

@keyframes slidy {0% { left: 0%; }10% { left: 0%; }20% { left: -100%; }30% { left: -200%; }40% { left: -300%; }50% { left: -400%; }60% { left: -500%; }70% { left: -600%; }80% { left: -700%; }90% { left: -800%; }100% { left: -900%; }}
.blink1 {animation: blinker 3s step-start infinite;}
.blink2 {animation: blinker 5s step-start infinite;}
@keyframes blinker {50% {opacity: 0;}}div#slider { overflow: hidden; }
div#slider figure img { width: 10%; float: left; }
div#slider figure {position: relative;width: 1000%;margin: 0;left: 0;text-align: left;font-size: 0;animation: 20s slidy infinite; }

html {line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
audio,video {display: inline-block;}
audio:not([controls]) {display: none;height: 0;}
img {border:none; max-width:100%;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
iframe, embed {left: 0;top: 0;width: 100%;}
svg:not(:root) {overflow: hidden;}
button,input,optgroup,select,textarea {margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,html [type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {display: inline-block;vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
details, menu {display: block;}
summary {display: list-item;}
canvas {display: inline-block;}
template {display: none;}
[hidden] {display: none;}
select{-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
form{border: none;background:#fff}
H1{ color: #f93; font-variant: normal; font-weight: bold; font-size: 14px; font-family: Trebuchet MS,Verdana}
H2{ color: #630; font-variant: normal; font-weight: bold; font-size: 14px; font-family: Trebuchet MS,Verdana}
h4{padding: 1.125em 0 0 0; font-size: 1.125em;}
h5{padding: 1em 0 0 0; font-size: 1em;}
h6{padding: 0.875em 0 0 0; font-size: 0.875em;}

.col1{width:8.25%; float:left; }.col2{width:16.5%; float:left; }.col2pix{width:16.5%; float:left; }.col3{width:24.75%; float:left; }.col3c{width:23.5%; float:left; }.col4{width:33%; float:left; }.col5{width:41.25%; float:left;}.col6{width:49.5%; float:left;}.col7{width:57.75%; float:left;}.col8{width:66%; float:left;}.col9{width:74.25%; float:left;}.col10{width:82.5%; float:left;}.col11{width:91%; float:left;}.col12{width:99%; float:left;}.col25{width:24.8%; float:left;}.col55{width:4.12%; float:left;}.max1400{max-width:1400px; margin:0 auto}.max1200{max-width:1210px; margin:0 auto}.max980{max-width:980px; margin:0 auto}

img.logopix{ width:230px;height:48px}
img.icon{cursor:pointer;margin:3px;display:block;float:left;width:25px;height:25px}

a { color: #666;font-weight: bold; font-size: 1em; text-decoration: none; background-color: transparent}
a.white { color: #404040; font-weight: bold; font-size: 1em; text-decoration: none;}
.new { color: #404040; font-weight: bold;padding:2px 0 2px; font-size: 1.2em; font-family: Arial,Verdana, Lucida Grande,Arial, Times; text-decoration: none; background: linear-gradient(to right,#c0ff60, #ffffff);-moz-border-radius:3px;-webkit-border-radius:3px;}
.news { color: #404040; font-weight: bold;padding:2px 0 2px;  font-size:  0.8em; font-family: Arial,Verdana, Lucida Grande,Arial, Times; text-decoration: none;background: linear-gradient(to right,#c0ff60, #ffffff);-moz-border-radius:3px;-webkit-border-radius:3px;}
.mod { color: #404040; font-weight: bold; padding:2px 0 2px;  font-size:  1.2em; font-family: Arial,Verdana, Lucida Grande,Arial, Times; text-decoration: none; background: linear-gradient(to right,#FFD235, #ffffff);-moz-border-radius:3px;-webkit-border-radius:3px;}
.mods { color: #404040; font-weight: bold;padding:2px 0 2px;  font-size:  0.8em; font-family: Arial,Verdana, Lucida Grande,Arial, Times; text-decoration: none; background: linear-gradient(to right,#FFD235, #ffffff);-moz-border-radius:3px;-webkit-border-radius:3px;}
.del { color: #404040; font-weight: bold;padding:2px;  font-size:  1.2em; font-family: Arial,Verdana, Arial; text-decoration: none; background: linear-gradient(to right,#ffbacc, #ffffff);-moz-border-radius:5px;-webkit-border-radius:3px;}
.dels { color: #404040; font-weight: bold;padding:2px;  font-size:  0.8em; font-family: Arial,Verdana, Arial,; text-decoration: none; background: linear-gradient(to right,#ffbacc, #ffffff);-moz-border-radius:5px;-webkit-border-radius:3px;}
a:hover               { color: #000;  font-weight: bold; font-size: 1em; text-decoration: underline;}
a:hover {transition-property: background-color; transition-duration: 1s;}
.new:hover { color: #202020; font-weight: bold; font-size:  1.2em; font-family: Trebuchet MS,Verdana, Lucida Grande,Arial, Times; text-align: justify; text-decoration: none;background: linear-gradient(to right,#ffffff, #c0ff60);}
.news:hover { color: #202020; font-weight: bold; font-size:  0.8em; text-align: justify; text-decoration: none;background: linear-gradient(to right,#ffffff, #c0ff60);}
.mod:hover {color: #202020; font-weight: bold; font-size:  1.2em;  text-decoration: none;background: linear-gradient(to right,#ffffff, #FFD235);}
.mods:hover {color: #202020; font-weight: bold; font-size:  0.8em;  text-decoration: none;background: linear-gradient(to right,#ffffff, #FFD235);}
.del:hover { color: #202020; font-weight: bold; font-size:  1.2em;  text-align: justify; text-decoration: none;background: linear-gradient(to right,#ffffff, #FFbacc);}
.dels:hover { color: #202020; font-weight: bold; font-size:  0.8em;  text-align: justify; text-decoration: none;background: linear-gradient(to right,#ffffff, #FFbacc);}
.stitle{font-size:1.6em;font-family:Cinzel;background-color:#f2f5f6;color:#800000}

.title{font-size:2.5em;font-family:Dancing Script,cursive;;}
a:active  { color: #ccc; font-weight: bold; font-size: 12px; text-decoration: none }

img.plan, #googlemap{margin: 3em 0 -3.4em 0;max-width: 281%; width:100%}

div#logo{position:fixed;z-index:2;top:5px;left:5px}

@charset "utf-8";
*{padding:0; margin:0}
.shadow {-moz-box-shadow: 3px 3px 5px #777;-webkit-box-shadow: 3px 3px 5px #777;box-shadow: 3px 3px 5px #777;}
.hide {visibility:hidden;}.show {visibility: visible;}.left {text-align:left}.right {text-align:right}.center {text-align:center}.clear{clear:both; line-height:0}
.pad{padding-right:10px;}
.pad4{padding:20px;}
.corner{border-radius: 10px;-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius: 10px;}
.grey{background:#f2f5f6;}
.hinter{height:20px}
.swap1{ background-color: #ffffff;}.swap2{ background-color: #e0e0e0;}.swap3{ background-color: #FFFFF0;}.swap4{ background-color: #f5f5f5;}
.pt5{padding-top:5px}.pt10{padding-top:10px}.pt20{padding-top:10px}.pt30{padding-top:10px}
.rodate{font-size:0.8;font-family:Cinzel;color:#800000;padding:10px;-webkit-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);position:relative;font-size:1em;background: linear-gradient(to right,#ffff00,transparent);}
.rodate1{font-size:0.8;font-family:Cinzel;width:40%;color:#800000;padding:10px;-webkit-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);position:relative;font-size:1em;background: linear-gradient(to right,#ffff00,transparent);}

input{font-size:1.2;}
h2.type{font-family:cinzel,times;color:#002080;padding: 2em 0 0.7em 0;background-color: #c0e0ff;text-align: center;max-width:100%;}
h4{padding: 1.125em 0 0 0; font-size: 1.125em;}
h5{padding: 1em 0 0 0; font-size: 1em;}
h6{padding: 0.875em 0 0 0; font-size: 0.875em;}
hr {clear: both;text-align:center;background-color: #ffffff;background-color: rgba(255,255,255,0);width: 90%;border: 0;border-bottom: solid 1px #a0a0a0;color: #a0a0a0;margin: 1em auto 1em;height: 1px;}

ul{list-style-image: url("https://www.mycitynews.eu/pix/dot-yellow.png");padding-left:30px}
li{font-size: 0.8em;}
/*----------------------------------Fin CSS Pages----------------Début max-media--------------------------------------------*/

@media screen and (max-width:768px){
.col1{width:99%; float:left;}.col2{width:99%; float:left;}.col2pix{width:99%; float:left; }.col2p{width:99%; float:left;}.col3{width:99%; float:left;}.col3c{width:99%; float:left;}.col4{width:99%; float:left; }.col5{width:99%; float:left;}.col6{width:99%; float:left;}.col7{width:99%; float:left;}.col8{width:99%; float:left;}.col9{width:99%; float:left;}.col10{width:99%; float:left;}.col11{width:99%; float:left;}.col12{width:99%; float:left;}
input.login{width:140px;padding:0 1%; border:solid #cccccc 0.08em; font-family:Arial, Arial, Helvetica, sans-serif; color:#5b646e; outline: none;font-size: 1.8em;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius: 5px;border-radius: 5px;}
img.logopix{ width:210px;height:55px}
img.icon{cursor:pointer;display:block;padding:2px;float:left;width:40px;height:40px}
img.iconmenu{cursor:pointer;display:block;padding:2px;float:left;width:40px;height:40px}
.corner{border-radius: 1px;-moz-border-radius:1px;-webkit-border-radius:1px;-khtml-border-radius: 1px;}
.pad4{padding:20px;box-sizing: border-box;}
div#logo{z-index:10000;position:fixed;top:9px;width:320px;height:60px;left:9px;}
.stitle{font-size:1.4em;}

.title{font-size:2em;}
.rodate{font-size:0.8;font-family:Cinzel;width:70%;color:#800000;padding:10px;-webkit-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);position:relative;font-size:1em;background: linear-gradient(to right,#ffff00,transparent);}
.rodate1{font-size:1;font-family:Cinzel;width:70%;color:#800000;padding:10px;-webkit-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);position:relative;font-size:1em;background: linear-gradient(to right,#ffff00,transparent);}

}


//special haute resolution
@media only screen (-webkit-max-device-pixel-ratio: 1.5) or (max-resolution: 1.5dppx){div#box{background-color:#d55f9e}}
@media only screen (-webkit-min-device-pixel-ratio: 2) , (min-resolution: 288dpi){
.col1{width:99%; float:left;}.col2{width:99%; float:left;}.col2pix{width:99%; float:left; }.col2p{width:99%; float:left;}.col3{width:99%; float:left;}.col3c{width:99%; float:left;}.col4{width:99%; float:left; }.col5{width:99%; float:left;}.col6{width:99%; float:left;}.col7{width:99%; float:left;}.col8{width:99%; float:left;}.col9{width:99%; float:left;}.col10{width:99%; float:left;}.col11{width:99%; float:left;}.col12{width:99%; float:left;}

.pt5{padding-top:5px}.pt10{padding-top:10px}.pt20{padding-top:20px}.pt30{padding-top:30px}
.pad{padding-right:10px;}
.pad4{padding:20px;box-sizing: border-box;}
.mtop{margin-top:50px}
.flag  {height:48px;width:96px}
.sicon{width:80px;height:80px}
.stitle{font-size:1.4em;}
.title{font-size:2em;}
}
@media only (min-resolution: 3dppx){div#box{background-color:#ff0000}}
@media only (min-resolution: 4dppx)){div#box{background-color:#ff0000}}
//FIN special haute resolution


@media (max-width: 700px) and (device-height: 1024px){
}

@media only screen and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2){//ipad portrait
img.logopix{ width:230px;height:60px}
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
//body{ color: blue; } /* your css rules for ipad landscape */
}

// Small devices (landscape phones, less than 768px)
/////////////@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
/////////////@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
/////////////@media (max-width: 1199.98px) { ... }

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-portait-only {
  @media (min-width: 600px) and (max-width: 899px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-tablet-landscape-only {
  @media (min-width: 900px) and (max-width: 1199px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-desktop-only {
  @media (min-width: 1200px) and (max-width: 1799px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

.phone-up {
  background: purple;
}

.phone-only {
  @include for-phone-only { background: purple; }
}

.tablet-portait-only {
  @include for-tablet-portait-only { background: purple; }
}

.tablet-portrait-up {
  @include for-tablet-portrait-up { background: purple; }
}

.tablet-landscape-only {
  @include for-tablet-landscape-only { background: purple; }
}

.tablet-landscape-up {
  @include for-tablet-landscape-up { background: purple; }
}

.desktop-only {
  @include for-desktop-only { background: purple; }
}

.desktop-up {
  @include for-desktop-up { background: purple; }
}

.big-desktop-up {
  @include for-big-desktop-up { background: purple; }
}