@font-face{

	font-family: 'OfficinaSansStd-Bold';
	src:url('../fonts/OFFICINASANSSTD-BOLD.otf');
}

@font-face{
	font-family: 'Arial-BoldMT';
	src:url('../fonts/arialbold.ttf');
}


.chem-ico-ani{

	animation: ico-anim  0.3s linear forwards;
}
@keyframes ico-anim {
 50%{transform: translateY(-70px);visibility:hidden;}
 55%{transform: translateY(70px);visibility:hidden;}
  100% { transform: translateY(0px),visibility:visible; }
}


.do2{
    animation: dowara 1s  forwards;
    transform-origin: center;
}

.testo,.testo1,.testo2,.testo3,.testo4,.testo5,.testo7,.testo6{
	cursor:pointer;
	background-color: red;
}

.do1{
animation: dowara 1s 1s  forwards  ;
transform-origin: center;
}



@keyframes dowara {
	0%{transform: scale(0);}
	50%{transform: scale(1.1);}
    100%{transform: scale(1);}
} 


.thirch{

animation: sass 1s 3s forwards  ;
transform-origin: center;

}
.bab{

animation: dowara 1s 4s linear forwards  ;
transform-origin:center 65%;

}
.sas{

animation: sass 1s 1.5s forwards  ;
transform-origin: center;

}

.rbi1
{
animation: ma31 1s forwards  ;
transform-origin: center;
}

.rbi2
{
	border: 1px solid #f00;
animation: ma32 1s forwards  ;
transform-origin: center;
}


.sar{

animation: sarya 1s 4s linear forwards  ;
transform-origin:45% 55%;

}

.dsch{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s 6.2s linear forwards;
  stroke-width:1;
}


@keyframes dash {
 to{ stroke-dashoffset: 0; }
} 




.shad{
	animation: shadow 2s 5.2s linear forwards  ;
}

.testo{animation: tt 0.5s 5.5s ease-out forwards  ;}
.testo1{animation: tt 0.5s 5.6s ease-out forwards  ;}
.testo2{animation: tt 0.5s 5.7s ease-out forwards  ;}
.testo3{animation: tt 0.5s 5.8s ease-out forwards  ;}
.testo4{animation: tt 0.5s 5.9s ease-out forwards  ;}
.testo5{animation: tt 0.5s 6s ease-out forwards  ;}
.testo6{animation: tt 0.5s 6.1s ease-out forwards  ;}
/* .wall-han{animation: shadow 1s 5s  forwards  ;} */
.dakh,.wall-han{animation: shadow 1s 5s  forwards  ;}

.secch{

animation: sass 1s 2.5s forwards  ;
transform-origin: center;

}

.redch{

animation: sass 1s 2s forwards  ;
transform-origin: center;

}

.chem{
animation: dowara 0.5s 4s linear forwards;
transform-origin:56% 20%;
}


@keyframes shadow {
  100% { visibility: visible; }
} 

@keyframes tt {
    
  100% { transform: translateY(0px);opacity:1; }
} 


@keyframes sass {
   0% { transform: translateY(-1000px) }
  100% { transform: translateY(0px) }
} 

@keyframes ma31 {
  0% { transform: translateX(-1000px) }
  100% { transform: translateX(0px) }
} 
@keyframes ma32 {
  0% { transform: translateX(1000px) }
  100% { transform: translateX(0px) }
} 

@keyframes sarya {
0%{transform: scale(0);}
100%{transform: scale(1);}
} 

header img{
	width: 100px;
	height:126px;
}




header{
	text-align: right;
	padding-right: 40px;
	padding-top: 40px;
}


#house{
position:absolute;
top:10px;
left:0;
width:100%;
}


#garden-l{
position: absolute;
bottom:-100px;
left:-220px;
}

#garden-r{
position: absolute;
bottom:-100px;
right:-150px;
}

#mod-edu{
	position:absolute;
	top:0px;
}


#appr
{

position:absolute;
	right:0px;
	top:180px;

}


body{
	overflow-x: hidden;
}


.anim-feu{
	animation: fram-f 1s 2 ease-out forwards  ;
}

.ghar1{
	animation: ghar-f 1s  ease-out forwards  ;
}
.ghar2{
	animation: ghar-f 1s 0.1s  ease-out forwards  ;
}
.ghar3{
	animation: ghar-f 1s 0.2s ease-out forwards  ;
}
.ghar4{
	animation: ghar-f 1s 0.3s  ease-out forwards  ;
}
.ghar5{
	animation: ghar-f 1s 0.4s  ease-out forwards  ;
}
.ghar6{
	animation: ghar-f 1s 0.5s  ease-out forwards  ;
}

.ghar7{
	animation: ghar-f 1s 0.6s  ease-out forwards  ;
}

.ghar8{
	animation: ghar-f 1s 0.7s  ease-out forwards  ;
}
.ghar9{
	animation: ghar-f 1s 0.8s  ease-out forwards  ;
}
.ghar11{
	animation: ghar-f 1s 0.9s  ease-out forwards  ;
}

.ghar12{
	animation: ghar-f 1s 1s  ease-out forwards  ;
}

.fbb{
	animation: fb  4s  ease-out forwards  ;
}

.sbb{
	animation: sb 4s  ease-out forwards  ;
}

.handan{
	animation: hk 2s 1s  ease-out forwards  ;
}

.mot-b{
	animation: dowara 1s  ease-out forwards  ;
}
.mot-g{
	animation: mot 1s 1s  ease-out forwards  ;
}

.gg1{
	animation: dowara 0.5s  ease-out forwards  ;
}

.gg2{
	animation: dowara 0.5s 0.1s  ease-out forwards  ;
}

.gg3{
	animation: dowara 0.5s 0.2s ease-out forwards  ;
}

.anim-sar{
	animation: mot 0.8s ease-out forwards  ;
}

.puzzd{
	animation: pd 0.8s ease-out forwards  ;
}
.puzzl{
	animation: pl 0.8s ease-out forwards  ;
}
.puzzu{
	animation: pu 0.8s ease-out forwards  ;
}
.puzzr{
	animation: pr 0.8s ease-out forwards  ;
}

@keyframes pd {
 100% {transform:translate(-105px,50px);}
} 
@keyframes pl {
 100% {transform:translate(-88px,-64px);}
} 
@keyframes pu {
 100% {transform:translate(115px,-67px);}
} 
@keyframes pr {
 100% {transform:translate(106px,39px);}
} 




@keyframes mot {
	 0% {transform:scale(0);}
 100% {transform:scale(1);}
} 
@keyframes hk {
	0% {transform: translate(80px,-15px);}
 50% {transform: translate(0px,0px);}
 100% {transform: translate(80px,-15px);}
} 
@keyframes fb {
  25% {transform: translate(-45px,-20px);}
  75% {transform: translate(-45px,-20px);}
  100% {transform: translate(0px,0px);}
} 

@keyframes sb {
  25% {transform: translate(40px,20px);}
  75% {transform: translate(40px,20px);}
  100% {transform: translate(0px,0px);}
} 

@keyframes ghar-f {
 50% {transform: scale(0);}
 100% {transform: scale(1);}
} 

@keyframes fram-f {
 0% { transform: scale(0);opacity:0; }
 75% { transform: scale(1);opacity:0.5; }
 100% {transform: scale(1);opacity:0;}
} 

svg{
	/* border: 1px solid #f00; */

	overflow: visible !important;
	width: 100%;
	height: 100vh;
}



.sar-ph{
	transform-origin:43% 47%;
}

.lun-b{
	transform-origin:25% 50%;
}
.lun-g{
transform-origin:26% 50%;
}

.lun-g-m{
	transform-origin:12% 50%;
	}
.cas-b{
	border: 1px solid #f00;

	transform-origin:36% 84%;
}
.cas-g{transform-origin:36% 84%;}

.nor-b{transform-origin:64% 42%;}
.nor-g{transform-origin:64% 42%;}

.feu{transform-origin:56.2% 22%; }

.care-g1{transform-origin:45% 21%}
.care-g2{transform-origin:46% 21.8%}
.care-g3{transform-origin:47% 22.5%}


.g1{transform-origin:93% 88%}
.g2{transform-origin:90.5% 90.5%;}
.g3{transform-origin:88% 92%;}
.g4{transform-origin:96% 90%;}
.g5{transform-origin:93% 92%}
.g6{transform-origin:90.6% 95.5%}
.g7{transform-origin:97.8% 93%}
.g8{transform-origin:95.5% 96%;}
.g9{transform-origin:93% 98.5%;}
.g10{transform-origin:36% 84%;}
.g11{transform-origin:98% 98.5%;}
.g12{transform-origin:95.5% 102%;}



.header{padding-left:40px;padding-right:40px;padding-top:40px;}

.header .logo{text-align: right}

.header h1{margin:0px;color:#FF8C3E;text-transform:uppercase;font-family:'OfficinaSansStd-Bold'}


.first-section { padding-top:50px; }

.first-section p,.f-section p,.kh-section p{font-family: arial;text-align: justify;font-size:14px;color:gray;}

.first-section div.paragraphe{padding-right:150px;}

.f-section div.paragraphe{padding-left:150px;}

.loop{padding-left:150px;}

.second-section
{
	padding-left: 60px;
}
.second-section h3{
		position: relative;
		font-family: arial;
}


.second-section h3:after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		bottom: -10px;
		border-bottom: 3px solid #FF8C3E;
		width: 60px;
	}



	.bul{
padding-top:30px;
		position: relative;
			z-index: 1;			
			margin: 0;
			line-height: 2.5em;
			font-size:15px;
			font-family: arial;
			
	}

	.bul:before {
				content: "";
				position: absolute;
				z-index: -1;
				background-color: #FF8C3E;
				width: 2.5em;
				height: 2.5em;
				border-radius: 50%;					
			}

		.s-section{

			background-image: url('../img/block_orange.png');
			background-size: cover;
			padding-top:40px;
			margin-top:20px;
				
			}


ul.timeline {
    list-style-type: none;
    position: relative;
	margin-top: 40px;
    margin-bottom: 40px;
	
}
ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #FDB825;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

.timeline p{color:white;}


.s-section .time{
	padding-left: 130px;
	padding-bottom: 40px;
}



.time h3{
		position: relative;
		font-family: arial;
		color:white;
		padding-left:20px;

}


.time h3:after {
		content: "";
		position: absolute;
		left: 20px; right: 0;
		bottom: -10px;
		border-bottom: 3px solid #FDB825;
		width: 60px;

	}
.logo{
	cursor: pointer;
}

	.intro{padding-left:130px;padding-right:150px;padding-top:30px;}



	.ff.paragraphe .timeline li p{color:gray;}

.ff.paragraphe h4{color:#FF8C3E;font-size: 22px;margin-bottom: 20px
	}

.kh-section{
padding-right: 100px;
padding-left: 100px;

}

.tit{
	/* border: 1px solid #f00; */

	color:#FF8C3E;
		text-align: center;

		margin-bottom: 40px;
		margin-top: 40px;
}

ul{list-style: none}

.puce{color:#FDB825;font-size:18px;}


.pind{
	/* border: 1px solid #f00; */
	padding-top:20px;
	padding-right: 120px;
	padding-left: 140px;
}


.f-section .pp2{padding-right:120px;}



.time h4{color:#E6E0E0;padding-left:20px;}

h4.f-h{margin-top:30px;}


.time-sec ul.timeline{
	margin-top: 20px;
}




.exc{
padding-top:120px;
padding-right: 120px !important;
}

.exc h4{
	color:#E6E0E0;
	padding-left:20px;
}


.foot{
	padding-left:140px !important;
	padding-right:130px !important;
	color:white;

	padding-bottom: 20px;
}

.f-section .elmt{
	padding-left:90px;
	padding-right:90px;
}

.p-tit{color:#FDB825;}
.p-text{color:gray;padding-right:80px;}