body{
	height: 200px;
  background-color: white;
  margin:auto;
  font-family: 'Asap', sans-serif;
}
a.menu {
  pointer-events: auto;
}

#buy img{
  margin-top: 20px;
}

pre{

  font-size:12pt;
  line-height: 16pt;
  padding:0px 10px;
  overflow-x: scroll;
  max-width:660px;

}

table {
  border-collapse: collapse;
  width:100%;
    border: solid 4px;
}
table b{
    display: block;
    margin-bottom: 10px;
}
 th {
    border: solid  4px;
    color: #fff ;
    padding: 10px ;
    margin-bottom: 20px;
}

td {
    border: solid  4px;
    padding: 10px;
    vertical-align: top;
    width: 25%;
}

input.password {
  padding: 12px 20px;
  margin: 12px 0;
  box-sizing: border-box;
  border:1px solid black;
  background: white;
  color:black;
  width:400px;
  max-width: 100%;
}
input.submit {
  width:400px;
  max-width: 100%;
}
div.password{
  margin:auto;
  width:400px;
  max-width: 100%;
}

button.print-button{
}
div.avant-propos {
  font-style: italic;
  border-left: 4px solid;
      border-left-color: currentcolor;
  padding: 0 0 0 16px;
  margin: 24px 0px;
  border-left-color: var(--color-4);
}

div.box .button_pool button{
  display:inline-block;
  margin: 2px 2px;
  transform: rotate(0);
}
div.box .button_pool button.on {
  background: none;
  color: #6AFAFE;
  border: #6AFAFE 2px solid;
  padding: 8px 18px;
}

li{
  padding:4px;
}

img.capture{
  max-width:100%;
  width:260px;

  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);

  -webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

img.capture:hover {
  
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
}

.collapse {
  padding:4px 8px;
}

.collapse>button {
  cursor: pointer;
  display: block;
}

.collapse:focus {
  outline: none;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border-radius:4px;
  margin-top : 12px;
  margin-bottom : 20px;
  border: #6AFAFE dashed 4px;
}

.collapse>div {
  display: none;
}

.collapse:focus div {
  display: block;
}
        
.copy-paste{
  cursor: pointer;
	background-color:#f3f2f9;
  margin : 26px 8px;
  padding : 6px;
}

.buy_info{
  font-size: 10pt;
  line-height: 14pt;
  margin:0px;
  margin-top:10px;
}

p.text_info{
  font-size: 10pt;
  line-height: 14pt;
}

div.text_info:before{
  font-size: 8pt;
  content:"───";
}

div.text_info{
  padding-top:6px;
  padding-bottom:12px;
}

blockquote:before {
  content: open-quote;
  quotes: "«" "»";
}

blockquote:after {
  content: close-quote;
  quotes: "«" "»";
}

blockquote{
  font-style: italic;
  line-height: 24px;
  margin-top:26px;
  margin-left:12px;
  margin-right:40px;
}

q{
  font-style: italic;
  quotes: "«" "»";
}

p.author{
  text-align: left;
  font-weight: bold;
  font-size: 10pt;
  margin-top:-10px;
  margin-left:26px;
}

button {

  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);

  -webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;

  padding:10px 20px;
  font-size:12pt;
  display:inline-block;
  font-weight:bold;  
  font-family: 'Asap', sans-serif;


	background-color:#6AFAFE;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	margin: 6px 0px;
	text-decoration:none;
  border:none;
}

button:hover {
  
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
			opacity:0.6;
      cursor: pointer;
}

a.button{
  text-decoration: inherit;
  text-align: center;
  font-weight: bold;
  font-size:14pt;
  color: #6AFAFE;
}

a{
  text-decoration: inherit;
  color: #6AFAFE;
}

a.white{
  text-decoration: inherit;
  color: white;
}

table{
  margin-bottom:8px;
}

#password{ 
  margin-left: auto; 
  margin-right: auto; 
  width: 100%;
  position: -webkit-sticky;
  position: sticky;
  top: 20vh;
}

.contrepartie{
  padding: 12px; 
  margin-top: 16px; 
  position: relative; 
  top:inherit; 
  box-sizing: border-box; 
  width:100%;
  border:1px solid #6AFAFE;
}

#gradient{
  background-color: white;
  background-image: linear-gradient(white, #dddddd);
  background-size: 100%;
  position:fixed;
  width:100vw;
  height:40vh;
  left:0;
  bottom:0;
  z-index: -1;
}

#footer{
  color:black;
  text-align:center;
  font-size:10px;
  width: 100%;
  margin-top: 38px;
  margin-bottom: 80px;
  opacity: 0.8;
  
}

div.buybar{
  padding-top:16px;
}

#content{
  vertical-align:top;
  margin-top:16px;
}

#canvas{
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  position: fixed;
  box-shadow: 4px 4px 4px #dbdbdb;
}

img.media{
  margin-top:0px;
  margin-bottom:16px;
}
.diapo{
  margin-top:0px;
  margin-bottom:16px;
}
.diapo canvas{
  border-radius: 6px;
}

#canvasnews{
  position: absolute;
  text-align:center;
  vertical-align: center;
  font-size: 12pt;
  background-color:#6AFAFE;
  font-weight:bold;
  color:white;
  margin:auto;
  margin:24px;
  padding :10px;
  width:140px;
  height:140px;
  color:white;
  border-radius: 50%;
  font-weight:bold;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}
  
#canvasnews:hover {
  -webkit-transform: rotate(-16deg);
  -moz-transform: rotate(-16deg);
  -ms-transform: rotate(-16deg);
  -o-transform: rotate(-16deg);
}

#banner{
  background:white;
  position:fixed;
  width:100%;
  left:0;
  height:40px;
  top:0;
  z-index: 1;
}

button.menu{
  display:none;
}

div.sidebar{
  padding-top:16px;
}

#socialmedia{
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
}  
div.sm{
  background-color:white;
  margin:auto;
} 

img.menu{
  height:20px;
  width:auto;
  vertical-align: bottom;
  margin:4px;
  padding:0;
  background:none;
  border:none;
  font-family: 'Asap', sans-serif;		
	-webkit-transition: color 0.6s,-webkit-transform 0.6s;
 	transition:  color 0.6s,transform 0.6s;
}  

img.menu:hover{
  -webkit-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
  -ms-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
}

h2{
  font-size:18px;
}
img{
  width:100%;
}
li img {
  float: left;
}
iframe.box{
  width:100%;
  height:370px;
  background:black;
  border:none;
  margin-top:0px;
  margin-bottom:16px;
  box-shadow: 4px 4px 4px #dbdbdb;
}

#block1{
  vertical-align:top;
  text-align: center;
  padding:16px;
}
#blockm{
  margin:auto;
  padding:14px;
  position: relative;
}

#block1m{
  vertical-align:top;
  text-align: center;
  padding:16px;
  margin-top:48px;
}

#block2{
  vertical-align:top;
  text-align: left;
  padding:16px;
}

#block3{
  vertical-align:top;
  text-align: left;
  padding:16px;
}

a.menu{
  color:black;
  background-color:white;
  padding:4px 10px 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size:14pt;
	font-weight:bold;
  font-variant: small-caps;
  font-family: 'Asap', sans-serif;	
	-webkit-transition: color 0.6s,-webkit-transform 0.6s;
   transition:  color 0.6s,transform 0.6s;
}


img.logo {
  
  position: relative;
  z-index:2;
  width:180px;
}

iframe.text{
  width:100%;
  padding-bottom: 0px;
  margin-top: 20px;
  border:none;
}


div.box{
  background:white;
  border:solid black 1px;
  padding:14px;
  margin:0;
  margin-bottom:16px;
  box-shadow: 4px 4px 4px #dbdbdb;
} 


img.box{
  margin-bottom:16px;
  box-shadow: 4px 4px 4px #dbdbdb;
} 

h1 {
  background-color: white;
  border-bottom:solid black 1px;
  padding-top: 18px;
	padding-bottom: 0px;
  margin:auto;
  z-index:1;
  font-size:24px;
}

#logom{
  margin:auto;
  padding:20px;
 }
  
#menu {
  margin:0;
  text-align:center;
  border-bottom:solid black 1px;
  box-shadow: 10px 0 0 white,-10px 0 0 white;
  background-color: white;
  z-index:2;
}
    

a.menu:hover{
  color:#6AFAFE;
}
  
#new{
  background-color:#6AFAFE;
  text-decoration:none,
}
  	div.kart{
      vertical-align:top;
      
  	} 
		img.buy{
      vertical-align:top;
  	} 
		form.buy{
      margin-top:4px;
      bottom:0;
      width:100%;
		}
		input:hover{
			opacity:0.6;
      
		}
		input{
  		-webkit-transition: -webkit-opacity 0.8s;
 			transition:  opacity 0.8s;
      padding:6px;
  		border-radius: 4px;
			background:#6AFAFE;
      border:none;
 			color:#fff;
      font-size:12pt;
      display:inline-block;
      width:100%;    
      font-weight:bold;
      font-family: 'Asap', sans-serif;
    } 
    input.buy{
      margin-top: 14px;
      margin-bottom: 8px;
      width:inherit;
      -webkit-transform: rotate(-1deg);
      -moz-transform: rotate(-1deg);
      -ms-transform: rotate(-1deg);
      -o-transform: rotate(-1deg);
    }
    .mediaVgn{
      display:inline-block;
      margin-bottom: 16px;
    }
    div.box button{
      display:block;
    }

    @media only screen and (orientation: portrait) {

      li img {
        width: 10vw;
padding-right: 2vw;
      }
      li p {
        margin:0;
      }
      ol {
        margin: 0 ;
        padding: 0 0 0 4vw;
      }
      h3 {
        margin: 0;
        padding: 0;
        font-size: 3.8vw;
      }
p.author , p.text_info , p.buy_info{
  line-height: 20pt;
  font-size:14pt;
}

#goback {
  display: none;
}

pre{
  width:auto;

}
      #canvasnews{
        width:180px;
        height:180px;
      }
      #nav{
        display:table;
        width:100%;
      }
      #logo{
        display:table-cell;
      }
      img.logo{
        width:100%;
      }	
      #socialmedia{
        width:44vw;
        display:table-cell;
        vertical-align: top;
      }   
      div.sm{
        padding:0;
        margin: 4vw;
        width:34vw;
        height:9vw;
        padding:1vw 1vw 1vw 2vw;
        border-radius: 8vw;
      }    
      #sandwich{
        display:table-cell;}
      img.menu{
        width:6vw;
        height:6vw;
        margin:1vw;
      } 

      button.menu{
        display:table-cell;
        vertical-align: bottom;
        background-color: white;
        color:black;
        border:solid black 1px;
        width:18vw;
        height:18vw;
        padding:4px 10px 4px 10px;
        border-radius: 50%;
        font-size:6vw;
        font-weight:bold;
        font-variant: small-caps;
        font-family: 'Asap', sans-serif;
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        opacity:1;
      }

      button.menu:hover{
        opacity:1;
      }
      #block1{
        text-align: justify;
      }
      #blockm{
        padding-top:0px;
        position: relative;
      }
      #block1m{
        margin-top:0;
        text-align: justify;
      }
      #block2{
        padding-top:0px;
      }
      #sandwich {
        display:none;
      }
      
      a.menu{
        display:block;
        font-size:4vw;
        height:6vw;
        padding-top:2vw;
        margin-bottom:2vw;
      }
      body{
        width:100%;
      }
      img.buy{
        margin-right:8px;
      }
      p, blockquote, ul{
        font-size:16pt;
      }
      blockquote{
        line-height: 24pt;
      }
      p{
        line-height: 28pt;
      }
      li{
        line-height: 30pt;
      }
      h1{
        font-size:18pt;
        top: 20px;
      }
      h2{font-size:18pt;}

      #new {
        border-top: dashed white;
        width:100%;
        text-align: center;
        font-size: 16pt;
        padding:16px;
        position:fixed;
        bottom:0;
        color:white;
        font-weight:bold;
        left:0;
        z-index:2;
      }
      iframe.sidebar{
        display: none;
      }
      div.sidebar{
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
      }
      .contrepartie{
        display:table;
      }

      #buy{
        display:table;
      }
      
      div.kart{
        display:table-cell;
        width:auto;
        padding-left:8px;
      } 
    
      img.buy{
        display:table-cell;
        width:200px;
      }

      h1 {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
      }
    }

@media only screen and (orientation: landscape) {


li img {
  width: 60px;
  padding-right: 4px;
}
li p {
  margin:4px 0;
}
ol {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 20px;
}
h3 {
  margin: 0;
  padding: 0;
  font-size: 12pt;
}

  #goback {
    display: relative;
    padding : 20px 0px 20px 0px;
  }


  li{
    line-height: 24px;
  }

  #menu {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10px;
    margin-bottom: 16px;
  }
    
  pre{
    max-width:460px;
  }

  p {
    line-height: 24px;
  }

  a.menu{
    margin:8px;
    font-size:13pt;
   line-height: 40px;
  }
  #socialmedia{
      width:140px;
      margin:auto;
      margin-top:20px;
    }
    div.sm{
      padding:4px;
      border-radius: 18px;
    } 
 		body{
      max-width:800px;
  	}
  	#block1{
      padding-top:140px;
      display:table-cell;
      width:220px;
    }

    a.menu:hover{
      -webkit-transform: rotate(-6deg);
      transform: rotate(-6deg);
    }

    h1 {
      position: -webkit-sticky;
      position: sticky;
      top: 60px;
    }
  	#block2{
      display:table-cell;
      width:auto;
      float:none;
    }
  
  
  	#block3{
      margin-left:212px;
      width:556px;
      right:0;
    }
  	
  	#nav{
      position: -webkit-sticky;
      position: sticky;
      top:48px;
  	}
  
  
    #new {
      white-space: normal;
      margin:auto;
      padding :10px;
      width:120px;
      height:120px;
      color:white;
  		border-radius: 50%;
      font-weight:bold;
			-webkit-transform: rotate(-2deg);
			-moz-transform: rotate(-2deg);
			-ms-transform: rotate(-2deg);
			-o-transform: rotate(-2deg);
			transform: rotate(-2deg);
  		-webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
      display: table-cell;
      vertical-align: middle;
		}
    #news{
      margin-top:14px;
    }
  
  #new:hover {
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  #logo {
  		-webkit-transition: opacity 0.3s,-webkit-transform 0.3s;
  		transition: opacity 0.3s, transform 0.3s;
		}
  
  #logo:hover {
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
  iframe.sidebar{
    display: none;
  }
  div.sidebar{
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
  }
  .contrepartie{
    display:table;
  }
  #buy{
    display:table;
  }
  
  div.kart{
    display:table-cell;
    width:auto;
    padding-left:8px;
  } 

  img.buy{
    display:table-cell;
    width:200px;
  }
  
}

@media only screen and (min-width: 1200px) and (orientation: landscape) {
 	body{
      max-width:1000px;
    }
    
pre{
  max-width:660px;
}
  
  	#block3{
      padding-top:74px;
      width:auto;
      float:none;
      display:table-cell;
    }
    #buy{
      position: -webkit-sticky;
      position: sticky;
      top:54px;
  	} 
  
		form.buy{
      width:100%;
		}

    div.sidebar{
      display:table-cell;
      width:240px;
      padding-left:20px;
    }

    div.buybar{
      display:table-cell;
      width:180px;
      padding-left:20px;
      padding-top:0;
    }
    
    div.text{
      display:table-cell;
      width:auto;
      vertical-align: top;
    }

    iframe.sidebar{
      display: block;
      width:100%;
      margin-bottom: 16px;
      border:none;
    }

    #buy{
      display:block;
    }
    .contrepartie{
      display:block;
    }
    img.buy{
      display:block;
      width:100%;
  	} 
    div.sidebar{
      -webkit-columns: 1;
      -moz-columns: 1;
      columns: 1;
    }
    div.kart{
      padding-left:0;
      padding-top: 20px;
    }
  
}