/* DEFINITIONS START */
/* VALUES */
/* COLORS */
/* FONTS */
/* ANIMATION */
/* GRAFIC */
/* My gridsize */
/* Space top of page */
/* $grid WITH px-unit */
/* RESPONSIVE */
/*
		@media (min-width: $respXlimitL){
			
		} 
		
		@media (min-width: $respXlimitS+1px) and (max-width: $respXlimitM) {
			
		}	
		
		@media (max-width: $respXlimitS) {
			
		}
		
		@media (max-width: $respXlimitXS) {
			
		}
		
*/
/* FUNCTION */
/* end DEFINITIONS */
body #page {
  position: relative;
  max-width: 900px;
  width: 900px;
  height: 756px;
  margin: 5px auto 18px auto; }
  body #page {
      /*background-color:red;
      width:1200px;
      width:50*$gridX;*/ }
#page img {
  position: absolute;
  background-repeat: no-repeat;
  top: 100px; }
#header {
  position: relative;
  top: 31px; }
  #header #topbar {
    position: relative;
    left: 36px;
    top: 9px;
    width: 648px;
    height: 111.6px; }
    #header #topbar h1 {
      position: absolute;
      left: 27px;
      top: 0;
      top: 56.0px;
      margin: 0;
      padding: 0;
      width: 783.9px;
      height: 79.92px;
      display: block; }
      #header #topbar h1 span {
        display: block;
        position: absolute;
        left: 3px;
        top: 36px;
        width: 584px;
        height: 212px;
        /* add the value of top in span */
        margin: 0;
        padding: 0;
        /*background: url('../images/kv.png') top left no-repeat;*/
        background-size: contain; }
    #header #topbar h2 {
      position: absolute;
      left: 522px;
      white-space: nowrap;
      top: 104.0px;
      margin: 0;
      padding: 0;
      display: block; }
    #header #topbar p {
      position: absolute;
      left: 18px;
      top: 162px;
      /*display:block;*/ }
    #header #topbar img {
      position: absolute;
      left: 540px;
      top: -64.8px; }
    #header #topbar span.header_picture {
      display: block;
      position: absolute;
      left: 0;
      top: 9px;
      top: -66px;
      /*		width:36*$gridX;
      		width:743px;
      		height:6.2*$gridX;		
      		height:203px;*/ }
    
  #header #menu {
    position: relative;
    right: 18px;
    top: 18px;
    right: 0;
    z-index: 3; }
  #header #main_menu {
    list-style: none;
    position: absolute;
    margin-bottom: 40px;
    right: 0;
    display: inline-block; }
    #header #main_menu div.menu_underline {
      position: relative;
      left: 3%;
      top: 34px;
      width: 95%; }
    #header #main_menu li {
      margin: 0px 0px 9px 0px;
      padding: 0px 9px;
      display: inline-block;
      overflow: hidden;
      left: 0;
      right: 0;
      white-space: nowrap; }
      #header #main_menu li ul {
        /* window/container for submenus */
        display: none;
        position: absolute;
        top: 34.2px;
        padding: 0px 0px;
        margin: 0 0 0 18px;
        z-index: 4; }
        #header #main_menu li ul li {
          display: inline-block;
          overflow: hidden;
          left: 0;
          right: 0;
          white-space: nowrap; }
          #header #main_menu li ul li a {
            /* submenu margins, padding etc. */
            padding: 4px 16px; }
          #header #main_menu li ul li ul {
            /* window/container for submenus */
            display: none;
            position: absolute;
            top: 16.2px;
            padding: 0px 0px;
            margin: 0 0 0 18px;
            z-index: 255; }
            #header #main_menu li ul li ul li {
              display: inline-block;
              overflow: hidden;
              left: 0;
              right: 0;
              white-space: nowrap; }
              #header #main_menu li ul li ul li a {
                /* submenu margins, padding etc. */
                padding: 4px 16px; }
    #header #main_menu a {
      display: block;
      padding: 10px;
      padding: 5px 15px;
      margin-bottom: 6px; }
    #header #main_menu li:hover > ul {
      display: inline-block;
      display: block;
      /*		li:hover > ul {
      			display: inline-block;
      			display: block;
      		}*/ }
    #header #main_menu li ul li {
      padding: 0;
      margin: 0; }
      #header #main_menu li ul li a {
        /* submenu position */
        margin: 0;
        padding: 2px 16px; }
    #header #main_menu :after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0; }
    #header #main_menu html[xmlns] {
      display: block; }
    #header #main_menu * html {
      height: 1%; }

#middle {
  position: relative;
  top: 121px;
  margin: 0 0 0 54px; }
  #middle h1 {
    left: 36px;
    top: 0;
    position: absolute;
    display: block; }
  #middle h2 {
    left: 54px;
    top: 45px;
    position: absolute;
    display: block; }
  #middle #head {
    position: absolute;
    top: 54px;
    left: 0;
    padding: 18px 36px;
    margin: 0px;
    display: inline-block;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }
  #middle #foot {
    position: absolute;
    top: 81px;
    left: 36px;
    padding: 0 18px;
    margin: 1px;
    height: 378px;
    width: 82%;
    display: block; }

#footer {
  position: relative;
  top: 503.5px;
  z-index: 5; }
  #footer #footer_info {
    position: absolute;
    top: 108px;
    left: 18px;
    padding: 0 4.5px;
    margin: 0;
    width: 837px;
    display: block; }
    #footer #footer_info h1, #footer #footer_info p {
      display: inline; }
  #footer p#copyright {
    position: absolute;
    text-align: center;
    top: 144px;
    width: 900px; }

/* corona */
div#coronaWrap {
		position: relative;
 		 display: block;
		 height: 0px;
		 width: 0px;
	}
div#coronaWrap div#corona pre {
    top: 21px;
	left: 7px;
	}
#corona {
	position: absolute;
	width: auto;
	height: auto;
    color: #cac57c;
    font-weight: bold;
    font-size: 15px;
    font-stretch: extra-condensed;
    background-color: crimson;
    margin: 26px 0 0 41px;
    padding: 5px;
    box-shadow: 0px 0px 15px #ff4444, 0px 0px 5px 3px #ff3322;
    border-radius: 25%;
    z-index: 4;
    opacity: 0.85;
    transition: color 0.50s linear;
}

div#corona:hover {
	color:yellow;
	transition: color 0.50s linear;
	cursor: pointer;
	}
	
div#coronaWrap div#corona pre {
    background-color: rgba(240, 255, 240, 0.9);
    color: black;
    text-align: left;
    vertical-align: middle;
    font: normal normal 500 11.5px/1.3 "Segoe UI";
    border: solid 0 rgba(0, 0, 0, 0.1);
    border-width: 0 1px 1px 0;
	box-shadow: 5px 5px 15px #447744,
		7px 7px 5px -3px #225522;

    z-index: 3;
    position: absolute;
    top: 20px;
    left: 35px;
    border-radius: 4px;
    padding: 4px;
    margin: 6px;
	height: auto;
	width: auto;
	overflow: hidden;
	transition: opacity 0.5s linear;
}
div#corona:hover {
	cursor: pointer;
    opacity: 1;
    transition: opacity 0.25s linear;
}	
div.crop{
	background-position: top left;
    width: 155%; /*  width: 1000px; = img.width + margin-left (positif) */
    position: sticky;
    z-index: 4;
    pointer-events: none;
}