@font-face {font-family: Lato;src: url('../fonts/lato-regular.ttf');} 
@font-face {font-family: Courgette;src: url('../fonts/courgette-regular.ttf');} 

body{font-family:Lato;margin:0;color:#fff;background: #929292 url(tech3.png) no-repeat center center fixed;font-size:3vw;}
canvas{width:100%;height:100%;background-color:0xffffff;}
li {list-style-image : url(smart-arrow.png);}

@media only screen and (max-width:450px) {
	#sous-titre {flex-direction:column;width:30%;}
}

@media only screen and (min-width:451px) {
	#sous-titre {flex-direction:row;width:50%;}
}

@media only screen and (max-width: 749px) {
	#main {width:100%;margin:0;}
	#haut, #bas, #t-haut, #t-bas {width:100%;}
	#gauche, #droite {width: 0;}
	.texte1,.texte4{font-size:1.2rem;}
	.texte2{font-size:1.0rem;}
	.texte3,.texte6{font-size:0.9rem;}
	.texte5{font-size:0.8rem;}
	.btn-devis {line-height:20px;width:180px;margin: 0 Calc(50% - 90px);}
}
@media only screen and (max-width: 629px) {
	.texte1,.texte4{font-size:1rem;}
	.texte2{font-size:0.8rem;}
	.texte3,.texte6{font-size:0.7rem;}
	.texte5{font-size:0.6rem;}
	.btn-devis {line-height:15px;width:120px;margin: 0 Calc(50% - 60px);}
}

@media only screen and (min-width: 750px) {
	#main {width:750px;margin:0 auto;}
	#haut, #bas, #t-haut, #t-bas {width:750px;}
	#gauche, #droite {width: Calc(50% - 375px);}
	.texte1,.texte4{font-size:1.4rem;}
	.texte2{font-size:1.0rem;}
	.texte3,.texte6{font-size:0.9rem;}
	.texte5{font-size:0.8rem;}
	.btn-devis {line-height:20px;width:180px;margin: 0 Calc(50% - 90px);}
}

#main {background-color: rgba(0,0,0,0.7);}

#logo{}
#titre{width:100%;height:75px;display:flex;flex-direction:column;justify-content:center;}
#sous-titre {float:left;display:flex;justify-content: flex-start;height: 55px;align-items: baseline;}
#devis {width:50%;float:left;min-width: 130px;}
#content{text-align: justify;padding:160px 30px 100px 30px;display:flex;flex-direction:column;justify-content:space-around;height: Calc(100% - 260px);}


#gauche, #droite {position:fixed;z-index:1;height:100%;top:0;}
#gauche{left:0;background: linear-gradient(to right, #fff, #000);}
#droite {right:0;background: linear-gradient(to left, #fff, #000);}

#haut, #bas, #t-haut, #t-bas {position:fixed;color:#fff;display:flex;justify-content:space-between;z-index:2;background-color: #000;}
#haut {top:0;height:130px;}
#t-haut {top:130px;height:20px;background: linear-gradient(#000, transparent);}
#bas {bottom:0;height:70px;}
#t-bas {bottom:70;height:20px;background: linear-gradient(transparent, #000);}

#view-offre {position:absolute;z-index:100;padding:20px 10px;border:2px groove white;background: rgba(0,0,0,0.9);}
#view-offre p {text-align:center;font-size:1rem;color:#5ABE8C;margin:0;}
#view-offre ul {margin:5px;}
#view-offre-annuler {position:absolute;width:20px;height:20px;cursor:pointer;top:10px; right:10px;}

.texte1{color: #E6AA1E;}
.texte2, .texte3{color: #fff;display:flex;align-items:baseline;}
.texte4 {text-align:center;padding:10px;color:#fff;background-color:#f00;width:90%;margin:0 auto;border-top-left-radius: 50%;border-bottom-right-radius: 20%;font-family:Courgette;}
.tick {	width:10px;height:10px;margin:0 5px 0 10px;}
.savoir-plus {font-size: 0.8em;color: #5ABE8C;cursor:pointer;font-weight:bold;}
.btn-devis {text-align:center;background-color:#f00;color:#fff;cursor:pointer;border-bottom-right-radius: 50%;border-top-left-radius: 20%;align-self:center;padding:5px;}