canvas{
	border: 0px #CCC solid;
}

.flex-container{
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 10px;
	width:100%;
    	align-items: center;
	/*background-color: blue;*/	 
}

.flex-item{
    order: 1;
    margin: 10px;
    /* width: 540px; */
    /* height: 400px; */
    flex-grow:0;
   /* background-color: red;*/
}

p{
font-family:Verdana;
color:#872838;
font-size: 24px;
margin-top: 50px;
}

p.em{
font-size: 24px;
color:#872838;
}

p.code{
    border-style:solid;
    border-color: #872838;
    border-width: 3px;
    border-radius: 20px;
    padding:10px;
    font-family:Courier;
    color: #000000;
    font-size: 20px;
    margin-top: 10px;
    background-image: url("backgrnd2.jpg");
    background-size: 600px;
}

h1{
    color:#872838;
    font-family:Courier;
    margin-top: 20px;
}

p.dyntext{
    text-align: justify;
    line-height: 1.5;
     /* width:500px; */
    /* height:250px; */
    /* border-style:solid; */
    /* border-color: #ff0000; */
    /* border-width: 3px; */
    /* border-radius: 20px; */
    padding:10px;
    color: #000000;
    font-size: 18px;
    margin-top: 10px;
}

p.def{
    text-align: center;
    font-size: 24px;
    color:#872838;
    line-height: 3;
     /* width:500px;  */
    /* height:250px; */
    margin-top: 10px;
    padding:10px;
}

div.info{
    width:550px;
    height:300px;  
}
@media only screen and (max-width: 600px) {
    /* For mobile phones: */
    div.info{
	width: 100%;
	height: 100%;
    }
}

span.colored{
color: #ff0000;
}

span.colored2{
color: #872838;
}

p.sh1{
padding-left: 3em
}
p.sh2{
padding-left: 6em
}

table.logo{
    width:100%;
    height: 200px;
    text-align: center
}


img.logo{
    height:40px;
}

h2{
margin-top: 40px;
}

.flex-container2{
	display:flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
    	background-color: lightgrey;
}

.flex-item2{
	order: 1;
/*	background-color: cornflowerblue; */
	width: 240px;
    	height: 400px;
    	margin: 10px;
}
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#myPopupQuoi{
    line-height: 200%;
    left: -240px;
    top: -350px;
}
 #myPopupOu{
     line-height: 200%;
     left: -430px;
      top: -350px;
}
/* The actual popup */
/* .popup .popuptext{ */
/*     visibility: hidden; */
/*     width: 600px; */
/*      height: 200px;  */
/*     background-color: #fff; */
/*     color: #000000; */
/*     font-size: 18px; */
/*     border-style:solid; */
/*     border-color: #ff0000; */
/*     border-width: 3px; */
/*     border-radius: 20px; */
/*     padding:30px; */
/*     text-align: justify; */
/*     padding: 20px; */
/*     position: absolute; */
/*     z-index: 10; */
/*     bottom: 125%; */
/*     /\* left: 50%; *\/ */
/*     /\* margin-left: -80px; *\/ */
/*     top: -350px; */
/*     left: -70px; *\/ */
/* } */

/* Popup arrow */
/* .popup .popuptext::after { */
/*     content: ""; */
/*     position: absolute; */
/*     top: 100%; */
/*     left: 50%; */
/*     margin-left: -5px; */
/*     border-width: 5px; */
/*     border-style: solid; */
/*     border-color: #555 transparent transparent transparent; */
/* } */

/* Toggle this class - hide and show the popup */
/* .popup .show { */
/*     visibility: visible; */
/*     -webkit-animation: fadeIn 1s; */
/*     animation: fadeIn 1s; */
/* } */
/* .popup .hide { */
/*     visibility: hidden; */
/* } */


.topnav {
    background-color:#872838;
    overflow: hidden;
}

 .topnav a.flag {
    float: right;
    display: block;
 }
 
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 21px;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 800px) {
    /* .topnav a:not(:first-child) {display: none;} */
  .topnav a {display: none;} 
  .topnav a.icon {
    float: left;
    display: block;
  }
  .topnav a.flag {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
    .topnav.responsive {
	position: relative;
    }
 
.topnav.responsive a.flag {
    position: absolute;
    right: 0;
    float: right;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}