:root {
  --topmargin: 13vw;
  --logoheight: 10vw;
  --logowidth: 30vw;
}

@font-face {
  font-family: myriad;
  src: url(MyriadPro-It.woff);
}
@font-face {
  font-family: mavin;
  src: url(marvin-demo.woff);
}
@font-face {
  font-family: Ebrima;
  src: url(Ebrima.woff);
}

@font-face {
  font-family: Berlin;
  src: url(Berlin.ttf);
}

body
{
	font-family: Ebrima;
	overflow-x: hidden;
}

@keyframes vlistanim {
  from {
  margin-left:10vw;
  opacity: 0;
  
  }
  to {
  margin-left:0em;
  opacity: 1;
  }
}

.vlist * 
{
  font-family: myriad;
  font-size: 1.2em;
	margin-left:10em;
  opacity: 0;
  animation-fill-mode: forwards;
}

.vlist *:nth-child(1)
{
  animation-name: vlistanim;
  animation-delay: 0s;
  animation-duration: 1s;
}
.vlist *:nth-child(2)
{
  animation-name: vlistanim;
  animation-delay: 1s;
  animation-duration: 1s;
}

.vlist *:nth-child(3)
{
  animation-name: vlistanim;
  animation-delay: 2s;
  animation-duration: 1s;
}

.vlist *:nth-child(4)
{
  animation-name: vlistanim;
  animation-delay: 3s;
  animation-duration: 1s;
}


.vlist *:nth-child(5)
{
  animation-name: vlistanim;
  animation-delay: 4s;
  animation-duration: 1s;
}

.vlist *:nth-child(6)
{
  animation-name: vlistanim;
  animation-delay: 5s;
  animation-duration: 1s;
}

.vlist *:nth-child(7)
{
  animation-name: vlistanim;
  animation-delay: 6s;
  animation-duration: 1s;
}

.image_half
{
	width:50%
}

#logo
{
	position: absolute;
	top:1vw;
	left:1vw;
	z-index:1000;
	background: url(logo.png) no-repeat top left;
    background-size:  var(--logowidth) var(--logoheight);
	width: var(--logowidth);
	height: var(--logoheight)
	
}

.encart
{
	-margin-left: 9vw;
    border: 1px dashed gray;
    padding: 1em;
    font-style: italic;
	width: 80%;
	text-align:center
}

.desktoponly
{
	display:block
}

.mobileonly
{
	display:none
}

.mi
{
	color: black;
}

.mi a
{
	display: block;
	color: inherit;
	text-decoration:none;
	width: 100%;
    height: 100%;
	-border: red 1px solid;
	padding-left:10px;
	padding-right:10px;
}

.mi:last-child {
	color:#669c41;
    white-space: nowrap;
}

.mobileonly .mi.lin
{
	display:none;
}

.icon
{
	-display:none;
	padding: 0.5em 3em 0.5em 3em;
	color:black;
	text-align:right;
	right:0;
	font-size: 5vw;
}

.pricetag
{
	font-family: Berlin;
	
	position: relative;
	-bottom:0;
	-border: solid red 1px;
	-transform: scale(0.7);
	z-index:500;
	width: 15vw;
	height: 15vw;
	background: url(prestaclean.png) no-repeat top left;
	background-size: auto 100%;
}


.pricetag.education1
{
	background: url(logoprix/education1.png) no-repeat top left;
	background-size: auto 100%;
}
.pricetag.education2
{
	background: url(logoprix/education2.png) no-repeat top left;
	background-size: auto 100%;
}

.pricetag.chienadulteseancecollective
{
	background: url(logoprix/chienadulteseancecollective.png) no-repeat top left;
	background-size: auto 100%;
}
.pricetag.chiotseanceindividuelle
{
	background: url(logoprix/chiotseanceindividuelle.png) no-repeat top left;
	background-size: auto 100%;
}

.pricetag.comportementchienchat
{
	background: url(logoprix/comportementchienchat.png) no-repeat top left;
	background-size: auto 100%;
}


.pricetag.conseilprevention1
{
	background: url(logoprix/conseilprevention1.png) no-repeat top left;
	background-size: auto 100%;
}

.pricetag.comportementfuretlapin
{
	background: url(logoprix/comportementfuretlapin.png) no-repeat top left;
	background-size: auto 100%;
}
.pricetag.adoption
{
	background: url(logoprix/adoption.png) no-repeat top left;
	background-size: auto 100%;
}

.pricetag div
{
	position: absolute;
	-border: red 1px solid
}

.pricetag .titre
{
	left:37.6%;top:22.2%;color:white;font-size:1vw
}
.pricetag .prix
{
	left:33%;top:23%;color:white;font-size:5.5vw
}
.pricetag .prix span
{
	font-size:40%
}
.pricetag .info
{
	left:10%;right:22%;top:70%;color:#659b40;font-size:1.3vw;
	text-align: center;
}

.priceasterix
{	margin-top:2em;
	color:#659b40
}

 table.lighttable 
 {
	 border-collapse: collapse;
	 width:100%;
	 
 }
.lighttable tr
{
  border-bottom: 1px solid #ddd;
  height:2em;
}

.lighttable .header
{
	padding-top: 2em;
	color:#669c41;
}

.lighttable.leftcol
{
	width:48%
}
.lighttable.rightcol
{
	position:absolute;top:0;left:52%;width:48%
}

div
{
	
	aborder: 1px solid red;
}

h1
{
	color: #977a4d;
	-text-align:center
}

p a
{
color: #977a4d;
}
p a:visited
{
color: #977a4d;
}

p
{

	text-align:center
}


.leftmenu
{
	position: absolute;
	-border-right: #977a4d solid 2px;
	font-family: mavin;
	z-index:100;
	font-size: 120%;
}
.leftmenu div
{
	padding: 0.5em 3em 0.5em 0.5em;
	text-transform: uppercase;
	text-align: right;
	margin: 1vw 0 1vw 0;
	-padding: 0.5em;
	cursor: pointer;
}
.leftmenu div:hover
{
	background-color: #a78a5b;
	color: white;
	cursor: pointer;
}

.leftmenu div.cur
{
	background-color: #a78a5b;
	color: white;
	cursor: pointer;
}

.rightarea
{
	top: var(--topmargin);
	position: absolute;
	padding: 0 2vw 0 2vw;
	padding-bottom:10em;
	border-left: #977a4d solid 2px;
}

.rightmargin
{
	ttop: var(--topmargin);
	position: fixed;
	left:80vw;
	right: 8vw;
	hheight:100vh;
	bottom: 0;
	padding: 0 2vw 0 2vw;
}

.rightarea h1
{
	font-weight: normal;
  font-family: myriad;
}

.leftmenu
{
	top: var(--topmargin);
	left:2vw;
	width: 20vw;
	bottom: 0;
	height:70%;
	padding: 0vw 0 2vw 0;
}

.rightarea {
	left:24vw;
	right: 17vw;
}



.leftmenu
{
	left:40px;
	width: 220px;
}

.rightarea {
	left: 260px;
}


.field {
  margin-bottom: 10px;
}

.field label {
  display: block;
  font-size: 12px;
  color: #777;
}

.field input {
  display: block;
  min-width: 50vw;
  line-height: 1.5;
  font-size: 14px;
}
.field textarea {
  display: block;
  min-width: 50vw;
  line-height: 1.5;
  font-size: 14px;
  
}

input[type="submit"] {
  display: block;
  padding: 6px 30px;
  font-size: 14px;
  background-color: #4460AA;
  color: #fff;
  border: none
}

input[type="submit"] {
	box-shadow: 0px 3px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #649b40 5%, #649b40 100%);
	background-color:#649b40;
	border-radius:4px;
	border:1px solid #649b40;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}
input[type="submit"] :hover {
	background:linear-gradient(to bottom, #649b40 5%, #649b40 100%);
	background-color:#649b40;
}
input[type="submit"] :active {
	position:relative;
	top:1px;
}

        

.topcontact
{
	position:absolute;
	top:0;
	right:1em;
	text-align: right;
	display: flex;
    justify-content: flex-end;
	transform-origin: top right;
	transform: scale(0.4)
}
.topcontact.secondline
{
	top:3em;
}

.topicon {
  margin: 16px;
 width: 96px;
 height:96px;
 display:block;
 background:transparent url('img/insta.png') center top no-repeat;
}


.texticonpart {
	font-family: mavin;
	line-height: 48px;
	margin: 16px;
	font-size: 2.5em;
	color: #659b40;
	text-decoration: none
}

.topicon:hover {
   background-image: url('img/insta-hi.png');
}

.topicon.insta
{
   background-image: url('img/insta.png');
}
.topicon.insta:hover
{
   background-image: url('img/insta-hi.png');
}
.topicon.facebook
{
   background-image: url('img/facebook.png');
}
.topicon.facebook:hover
{
   background-image: url('img/facebook-hi.png');
}
.topicon.mail
{
   background-image: url('img/mail.png');
}
.topicon.mail:hover
{
   background-image: url('img/mail-hi.png');
}

img.txtleft
{
	float:left;
  max-width:20vw;
  max-height:30vw;
  width: auto;
  height: auto;
  margin:1em
}

img.txtleftsmall
{
	float:left;
  max-width:13vw;
  max-height:30vw;
  width: auto;
  height: auto;
  margin:1em
}

img.txtright
{
	float:right;
  max-width:20vw;
  max-height:30vw;
  width: auto;
  height: auto;
  margin:1em
}

img.txtrightbig
{
	-float:right;
  max-width:40vw;
  max-height:30vw;
  width: auto;
  height: auto;
  margin:1em
}


/* For Mobile Phones Portrarrit or Landscape View */
@media  (max-width: 640px) {
	body
	{
		-background-color:red;
		font-size:1.5vh;
	}
	

	#logo
	{
		width: 50%;
		height: 20vh;
		background-size:  100%;
		
	}


	/*
	.icon
	{
		display:block;
	}*/
	
	.desktoponly
	{
		display:none
	}
	
	.mobileonly
	{
		display:block
	}
	
	.leftmenu
	{
		position:relative;
		text-align:right;
		top:80px;
		left:2vw;
		width:95%;
		border: 0px
	}

	.rightarea {
		position:relative;
		-margin-top: -40px;
		-top:0;
		left:0vw;
		right:2vw;
		top: auto;
		bottom: auto;
		padding-top: var(--topmargin);
		border-left: #977a4d solid 0px;
		
	}
	
	.rightmargin
	{
		display: flex;
		justify-content: right;
		gap: 10px;
		position:relative;
		border: solid red 1px;
		border: 0px;
		
		left:0;
		right:0;
		top: auto;
		bottom: auto;
			
		transform: scale(1.5);
		transform-origin: top right;
	}
	
	.icon
	{
		-position:absolute;
		top:0;
		padding: 0.5em 0.5em 0.5em 0.5em;
		color:black;
		text-align:right;
		right:0;
		font-size: 5vw;
	}
	
	.pricetag
	{
		margin-bottom:20vh;
		transform: scale(2.5);
		transform-origin: top right;
	}
		
	.topcontact.secondline
	{
		display:none;
	}


	.lighttable.leftcol
	{
		width:100%
	}
	.lighttable.rightcol
	{
		width:100%;	
		position:relative;
		left:0;
		top:inherit;
	}

	img.txtleft
	{
		  max-width:80vw;
		  max-height:50vw;
		  align:center;
		margin:1em;
		
		float: inherit;
  margin-left: auto;
  margin-right: auto;
  display: block;
	}

	img.txtright
	{
		  max-width:80vw;
		  max-height:50vw;
		  margin:1em;
		  
		float: inherit;
  margin-left: auto;
  margin-right: auto;
  display: block;
	}

	img.txtrightbig
	{
			  max-width:90vw;
			  max-height:50vw;
			  /*margin:0em;
			  
			-float: inherit;
	  margin-left: 0;
	  margin-right: 0;
	  display: block;*/
	}
}
 
 
 
.logoprixentete
{
  width:100%;
  height: 5em;
  background: url(logoprix/enetetetableau.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-origin: bottom right;
  background-position: right;
}
 
 
.logoprixentetecadre
{
  width:100%;
  height: 5em;
  background: url(logoprix/entetetableaufond.png);
  background-repeat: repeat;
  background-size: auto 100%;
  background-origin: bottom right;
  background-position: right;
}