body {
  padding: 2em;
  background: url("../images/Middle_texture.jpg");
  background-size: auto;
}

.layout {
  display: flex;
  flex-flow: row wrap;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  /*text-align: center;*/
  border: 1px solid black;
  box-shadow: 3px 3px 5px #333333;
  min-width: 80px;
  min-height: 80px;
}

.layout > * {
  padding: 10px;
  flex: 1 100%;
}

input#responsive-nav,
label.responsive-nav-label {
  display: none;
}

.breadcrumps {
	/*background: #82b721;*/
	background: #346179;
  clear: both;
}

.mod-languages {
    float: left;
}

div.mod-languages img {
	box-shadow: 2px 2px grey;
}

.search {
    float: right;
}

div.mod-languages ul {
  flex-flow:unset;
}

.topnavigation {
  box-sizing: border-box;
  float: left;
  width: 100%;
  /*background: #3a3a3a;*/
  background: #3D5866;
  font-size: 17px;
}

.topnavigation a {
  display: block;
  color: #B6D9EC;
  text-decoration: none;
}

.topnavigation  ul {
  margin: 0;
  padding: 0;
}

.navigation ul li {
  position: relative;
  float: left;
  list-style: none;
}
 
.navigation ul li:hover {
  /*background: #4096ee;*/
  background: #53a5d2;
}
 
.navigation ul li a {
    padding: 20px;
}

.navigation ul ul {
  position: absolute;
  top: -9999px;
  left: -9999px;
  background: #1780b9;
  /*background: #333;*/
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
 
.navigation ul ul li {
  float: none;
  width: 200px;
  border-bottom: 1px solid #555;
}
 
.navigation ul ul li a {
  padding: 10px 20px;
}

.navigation ul li:hover > ul {
  top: 100%;
  left: 0;
}

.navigation ul ul li:hover > ul {
  top: 0;
  left: 200px;
}

aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-flow: column wrap;
}

aside a {
  text-decoration: none;
  display: block;
  padding: 0.2em;
  color: black;
}

aside a:hover {
  text-decoration: none;
  display: block;
  font-weight: bold;
  /*color: violet;*/
}

.left {
  /*background: #6cc06c;*/
  background: #346179;
  width: 10%;
  float: left;
}

.left-2 {
  border: 1px solid #264e66;
  border-radius: 10px/10px;
  padding: 10px;
  background: #e2eaee;
}
.left-3 {
  border: 1px solid #264e66;
  border-radius: 10px/10px;
  padding: 10px;
  background: #e2eaee;
}

.left-menu li {
  border: 1px solid black;
  box-shadow: 3px 3px 5px #333333;
  margin-bottom: 5px;
  width: 140px;
  height: 30px;
  background-color: #62881a;
}

.left-menu li:hover {
  background-color: #9ed92c;
}

.left-menu li:first-of-type {
  margin-top: 10px;
}

.header {
  /*background: #82b721;*/
  background: #346179;
}

.header img {
  float: left;
  /*height: 30vh;*/
  width: 30vw;
  box-shadow: 3px 3px grey;
  /*clear:both;*/
  /*margin: 40px 40px;*/
}

.banner img{
  float: center;
  width: 100%;
}

.slider {
  width: 900px;
}

.footer {
  /*background: #279033;*/
  background: #3D5866;
}

.content {
  text-align: left;
  background: #E2E8EB;
}

.right {
  /*background: #6cc06c;*/
  background: #346179;
  width: 10%;
  float: left;
}

.right-1 {
  border: 1px solid #264e66;
  border-radius: 10px/10px;
  padding: 10px;
  background: #e2eaee;
}

/*.right-2 {
  border: 1px solid #264e66;
  border-radius: 10px/10px;
  padding: 10px;
  background: #e2eaee;
}

.right-3 {
  border: 1px solid #264e66;
  border-radius: 10px/10px;
  padding: 10px;
  background: #e2eaee;
}*/

@media all and (min-width: 600px) {
  .left, .right {
     flex: 1 auto;
  }
}

@media all and (max-width: 600px) {
  .navigation {
      flex-flow: column wrap;
      padding: 0;
  }

  .topnavigation {
      padding: 0px;
  }

  .topnavigation a {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
  }
}

@media all and (max-width: 800px) {
  .content img{
	width: 90%;
	height: 90%;
  }
  
  .com-content-article__body{
	width: 70vw;  
  }
  
  .com-content-article__body table{
	font-size: 11px;
	width: 70vh;
  }
    
  .navigation {
    justify-content: space-around;
  }

   .right {
    /*border-top: 1px solid black;*/
    width: 20%;
    float: left;
  }
  
  .left {
    width: 20%;
    float: left;
  }
   
  .left li {
    border: 0;
    margin-bottom: 2px;
    width: 100%;
    height: 20px;
  }

  .left li:first-of-type {
    margin-top: 5px;
  }
}

@media all and (min-width: 800px) {
  .content {
    flex: 10 0px;
    order: 2;
  }

  .left {
    order: 1;
    /*border: 1px solid black;*/
  }

  .right {
    order: 3;
  }

  .footer {
    order: 4;
  }
}


@media screen and (max-width: 1024px) {
* {
  /*padding: 0;*/
  /*font-family: 'Roboto', sans-serif;*/
  box-sizing: border-box;
}	
	
  label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 20px;
  background: #222;
  cursor: pointer;
  color: #fff;
}

label.responsive-nav-label span {
  margin-right: 10px;  
}

.topnavigation {
  position: absolute;
  top: -9999px;
  padding: 10px;
}
 
input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}

.topnavigation li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important; 
}
   
.topnavigation li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
  background: #4a4a4a;
  color: #fff;
}
 
.topnavigation ul li:hover {
  background: none;
}
   
.topnavigation ul li a:hover {
  /*background: #9ec05f;*/
  background: #53a5d2
}

.navigation ul ul {
  position: relative !important;
  width: 100%;
  left: 0 !important;
  top: 0 !important;
  background: none !important;
  box-shadow: none;
}

.navigation ul ul li {
  padding-left: 20px;
}
  
.left, .right {
   width: 20%;    
}

}