@import url('https://fonts.googleapis.com/css?family=Jomhuria');

body{-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#3d4252;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;min-width:100%;padding:0;text-align:left;}
body{font-family:Arial, sans-serif;font-size:1.3rem;color:#FCFBFB; background:url("../images/background.jpg") no-repeat center top fixed;background-size:cover}

section, article, aside, footer, header, nav, hgroup {display: block;}

div.formerror{font-size:1rem; color:#EF1649; font-weight:bold;}

/* Taille */
div.content{background:#ffffff; margin:auto; text-align:center;}

/* Titre et header */
section.title{text-align:center;}
section.title h1{display:block; width:100%; font-size:60px; text-align:center; font-family: 'Jomhuria', cursive; color:#EF1649; padding:0; margin:0; font-weight:normal; line-height:40px;}
section.title h1.lvl1{font-size:45px; padding:1px 0px 0px 0px;}
section.title h1.lvl2{font-size:55px; padding:0px 0px 1px 0px;}
section.title .headerimg{line-height:0; font-size:0;}
section.title .headerimg img{max-width:100%;width:100%; height:90px;}

/* Comment ca marche */
section.howdoesitworks header{background:#646473; text-align:center; font-family: 'Jomhuria', cursive; height:35px; font-size:30px; color:#ffffff; font-weight:normal; line-height:38px; padding:0px 0px 0px 0px;}
section.howdoesitworks .hdiws {display:table; width:100%; font-size: 0px; cursor:default}
section.howdoesitworks .hdiwspacer {display:table-cell; width:0.5%;}
section.howdoesitworks .hdiw {background:#9797a6; display:table-cell; width:33%; height:50px; padding:0; border:0; text-align:left; font-size: 0px; vertical-align:top;}
section.howdoesitworks .row{display:table; line-height:0; height: 100%;}
section.howdoesitworks .hdiw .arrow{display:none;}

section.howdoesitworks .active{background:#3eb0b1; b0ackground:#EF1649;}
section.howdoesitworks .active .arrow{display:table-cell; height: 50px; width: 8%; font-size: 0px; margin:0; padding:0; line-height:0;}
section.howdoesitworks .active .arrow img{width:100%; height:50px;}

section.howdoesitworks .icon{display:table-cell; height: 50px; width: 17%; font-size: 0px; margin:0; vertical-align: middle; line-height:0;}
section.howdoesitworks .icon img{width:80%; padding-left:5px;}
section.howdoesitworks .text{display:table-cell; height: 50px; width: 70%; font-family: arial; font-size: 10px; line-height: 13px; color:#ffffff; margin:0; padding:0 0 0 3px; vertical-align:middle;}
section.howdoesitworks .text br{display:none;}

/* Intro */
section.intro  p.text{text-align:justify; padding: 20px 10px 0px 10px; margin:0; font-family: arial; font-size:0.8rem; line-height:20px; font-weight:normal; color:#757584;}

/* Etapes */
section.steps{padding:0px 10px 5px 10px;}
section.steps header{text-align:center; font-family: 'Jomhuria', cursive; font-size: 30px; color:#EF1649; font-weight:normal; line-height:40px; padding:10px 0px 0px 0px;}
section.steps .button{margin: 8px auto 8px auto; width:90%; }
section.steps .domain{margin: 8px auto 8px auto; width:90%; }
section.steps  p.text{text-align:justify; padding: 5px 10px 0px 10px; margin:0; font-family: arial; font-size:0.8rem; line-height:20px; text-align:center;  font-weight:normal; color:#757584;}

/* Etapes Form */
section.steps .formcontainer{padding: 10px 0px 10px 0px;}
section.steps .formrow1, 
	section.steps .formrow2{display:table; width:100%;}
section.steps .formrow1 .formelement, 
	section.steps .formrow2 .formelement{display:block; width:100%; text-align:center; padding:10px 0px 10px 0px;}

section.steps .formrow1 .formelement input, 
		section.steps .formrow2 .formelement input{width:200px;}

/* Cartes */
#tarot-cards{display:block; min-height:80px; margin:0px 8px 0px 9px; padding:0; font-size:0px; text-align:center;}
div.tarot-card{width:39px; height:80px;}
div.tarot-card-container{display:inline-block; margin:0; padding:0; left:auto; overflow:hidden; margin-right:-8px; margin-left:-9px; z-index:100; }
div.tarot-card-front{top:0; background:transparent url("../images/cardback.png") 0px 0px no-repeat; background-size:100% 80px; }
div.forbidden{cursor:not-allowed;}
div.tarot-card-free{cursor:pointer;}
div.tarot-card-free:hover div.tarot-card-front{background:transparent url("../images/cardback_over.png") 0px 0px no-repeat; background-size:100% 80px; z-index:4;}
div.tarot-results{display:block; min-height:80px; line-height:80px;}
div.tarot-result{display:inline-block; background:transparent url("../images/cardback_result.png") 0px 0px no-repeat; background-size:100% 100%; height:80px; li0ne-height: 1px; border:0px solid #000000; vertical-align:top; text-align:center;}
div.tarot-result span{display:inline-block; color:#000000; font-size:0.9rem; margin:auto; vertical-align:top; line-height:20px;}

/* Elements Form */
button, input[type="button"], input[type="reset"], input[type="submit"] 
{
	-webkit-appearance: button;
	margin: 0px 1px 0px 1px;
	cursor: pointer;
	padding: 0.7rem 1rem 0.5rem 1rem;
	border: 2px solid #EF1649 #a30023 #a30023 #EF1649;
	border-radius: 5px;
	background-color: #EF1649;
	cursor: default;
	font-family: 'Jomhuria', cursive;
	font-size: 1.5rem;
	line-height:1.5rem; 
	color: #ffffff;
	text-transform: uppercase;
	white-space: nowrap;
}

button.active{cursor: pointer;}
button.active:hover, button.over{background-color:#3eb0b1; border: 2px solid #000000;}

input[type="text"], input[type="email"], input[type="tel"], input[type="date"]
{
	border: 2px solid #EF1649;
	border-radius: 5px;
	font-family: arial;
	font-size: 0.7rem;
	font-weight:bold;
	padding: 0.7rem 1rem 0.5rem 1rem;
}

input[type="date"]:before {
	content: attr(placeholder) !important;
	color: #aaa;
	margin-right: 0.5em;
  }
input[type="date"]:focus:before, input[type="date"]:valid:before {content: "";}

/* Responsive */
@media only screen and (min-width: 300px) 
{
	/* Taille */
	div.content{width:350px;}

	/* Titre et header */
	section.title .headerimg img{height:110px;}
	section.title h1{font-size:60px; line-height:40px;}
	section.title h1.lvl1{font-size:50px; padding:10px 0px 0px 0px;}
	section.title h1.lvl2{font-size:60px; padding:0px 0px 10px 0px;}

	/* Comment ca marche */
	section.howdoesitworks header{height:35px; font-size:35px; line-height:38px; padding:0px 0px 0px 0px;}
	section.howdoesitworks .hdiw {height:50px; font-size: 0px;}

	section.howdoesitworks .active .arrow{height: 50px;}
	section.howdoesitworks .active .arrow img{height:50px;}

	section.howdoesitworks .icon{height: 50px;}
	section.howdoesitworks .icon img{padding-left:5px;}
	section.howdoesitworks .text{height: 50px; font-size: 11px; line-height: 13px; margin:0; padding:0 0 0 3px;}

	/* Intro */
	section.intro  p.text{padding: 20px 20px 0px 20px; margin:0; font-size:0.8rem; line-height:1.3rem;}

	/* Etapes */
	section.steps{padding:0px 10px 5px 10px;}
	section.steps header{font-size: 35px; line-height:40px; padding:10px 0px 0px 0px;}
	section.steps .button{margin: 8px auto 8px auto; width:80%;}
	section.steps .domain{margin: 8px auto 8px auto; width:80%;}
	section.steps  p.text{padding: 5px 10px 0px 10px; margin:0; font-size:0.8rem; line-height:1.3rem;}

	/* Cartes */
	#tarot-cards{min-height:80px; margin:0px 10px 0px 10px;}
	div.tarot-card{width:46px; height:80px;}
	div.tarot-card-container{margin-right:-10px; margin-left:-10px;}
	div.tarot-card-front{background-size:100% 80px;}
	div.tarot-card-free:hover div.tarot-card-front{background-position: 0px 0px; background-size:100% 80px;}
	div.tarot-results{margin-bottom:0px; min-height:80px;}
	div.tarot-result{height:80px; line-height:30px;}
	div.tarot-result span{font-size:0.7rem;}
	
	/* Elements Form */
	section.steps .formcontainer{padding: 10px 0px 5px 0px;}
	section.steps .formrow1, 
		section.steps .formrow2{display:table; width:100%;}
	section.steps .formrow1 .formelement, section.steps .formrow2 .formelement{display:block; width:100%; padding:5px 5px 5px 5px}
	
	section.steps .formrow1 .formelement input, 
		section.steps .formrow2 .formelement input{width:260px;}
		
	button, input[type="button"], input[type="reset"], input[type="submit"] {display:block; margin: 0px 5px 0px 5px; padding: 0.7rem 2rem 0.5rem 2rem; font-size: 1.7rem; line-height:1.5rem;}
	input[type="text"], input[type="email"], input[type="tel"], input[type="date"]{font-size:0.8rem; padding: 0.7rem 1rem 0.5rem 1rem;}
}

@media only screen and (min-width: 480px) 
{
	/* Taille */
	div.content{width:480px;}

	/* Titre et header */
	section.title .headerimg img{height:150px;}
	section.title h1{font-size:55px; line-height:40px;}
	section.title h1.lvl1{font-size:55px; padding:10px 0px 0px 0px;}
	section.title h1.lvl2{font-size:65px; padding:0px 0px 10px 0px;}

	/* Comment ca marche */
	section.howdoesitworks header{height:35px; font-size:40px; line-height:38px; padding:0px 0px 0px 0px;}
	section.howdoesitworks .hdiw {height:50px; font-size: 0px;}

	section.howdoesitworks .active .arrow{height: 50px;}
	section.howdoesitworks .active .arrow img{height:50px;}

	section.howdoesitworks .icon{height: 50px;}
	section.howdoesitworks .icon img{padding-left:5px;}
	section.howdoesitworks .text{height: 50px; font-size: 12px; line-height: 13px; margin:0; padding:0 0 0 3px;}

	/* Intro */
	section.intro  p.text{padding: 20px 10px 0px 10px; margin:0; font-size:0.9rem; line-height:1.5rem;}

	/* Etapes */
	section.steps{padding:0px 20px 5px 20px;}
	section.steps header{font-size: 40px; line-height:40px; padding:10px 0px 0px 0px;}
	section.steps .button{margin: 8px auto 8px auto; width:80%;}
	section.steps .domain{margin: 8px auto 8px auto; width:80%;}
	section.steps  p.text{padding: 10px 10px 10px 10px; margin:0; font-size:0.9rem; line-height:1.5rem;}

	/* Cartes */
	#tarot-cards{min-height:110px; margin:0px 12px 0px 12px;}
	div.tarot-card{width:60px; height:110px;}
	div.tarot-card-container{margin-right:-12px; margin-left:-12px;}
	div.tarot-card-front{background-size:100% 110px;}
	div.tarot-card-free:hover div.tarot-card-front{background-position: 0px 0px; background-size:100% 110px;}
	div.tarot-results{margin-bottom:0px; min-height:110px; height:110px;}
	div.tarot-result{height:110px; line-height:50px;}
	div.tarot-result span{font-size:0.9rem;}
	
	/* Elements Form */
	section.steps .formcontainer{padding: 10px 0px 5px 0px;}
	section.steps .formrow1, 
		section.steps .formrow2{display:table; width:100%;}
	section.steps .formrow1 .formelement, 
		section.steps .formrow2 .formelement{display:block; width:100%; padding:5px 5px 5px 5px;}
	
	section.steps .formrow1 .formelement input, 
		section.steps .formrow2 .formelement input{width:360px;}
	
	button, input[type="button"], input[type="reset"], input[type="submit"] {display:table-cell; margin: 0px 5px 0px 5px; padding: 0.7rem 2.5rem 0.5rem 2.5rem; font-size: 1.9rem; line-height:1.5rem;}
	input[type="text"], input[type="email"], input[type="tel"], input[type="date"]{font-size: 1rem; padding: 0.7rem 1rem 0.5rem 1rem;}
}

@media only screen and (min-width: 768px)
{
	/* Taille */
	div.content{width:700px;}

	/* Titre et header */
	section.title .headerimg img{height:200px;}
	section.title h1{font-size:60px; line-height:40px;}
	section.title h1.lvl1{font-size:60px; padding:10px 0px 0px 0px;}
	section.title h1.lvl2{font-size:70px; padding:0px 0px 10px 0px;}

	/* Comment ca marche */
	section.howdoesitworks header{height:35px; font-size:40px; line-height:38px; padding:0px 0px 0px 0px;}
	section.howdoesitworks .hdiw {height:50px; font-size: 0px;}
	section.howdoesitworks .active .arrow{height: 50px;}
	section.howdoesitworks .active .arrow img{height:50px;}
	section.howdoesitworks .icon{height: 50px;}
	section.howdoesitworks .icon img{padding-left:5px;}
	section.howdoesitworks .text{height: 50px; font-size: 13px; line-height: 17px; margin:0; padding:0 0 0 3px;}
	section.howdoesitworks .text br{display:inline;}
	
	/* Intro */
	section.intro  p.text{padding: 20px 10px 0px 10px; margin:0; font-size:1.0rem; line-height:1.5rem;}

	/* Etapes */
	section.steps{padding:0px 20px 5px 20px;}
	section.steps header{font-size:40px; line-height:40px; padding:10px 0px 0px 0px;}
	section.steps .button{margin: 8px auto 8px auto; width:auto;}
	section.steps .domain{margin: 8px 5px 8px 5px; width:28%;}
	section.steps  p.text{padding: 10px 10px 10px 10px; margin:0; font-size:1rem; line-height:1.5rem;}
	
	/* Cartes */
	#tarot-cards{min-height:136px; margin:0px 18px 0px 18px;}
	div.tarot-card{width:67px; height:136px;}
	div.tarot-card-container{margin-right:-19px; margin-left:-19px;}
	div.tarot-card-front{background-size:100% 120px;}
	div.tarot-card-free:hover div.tarot-card-front{background-position: 0px 16px; background-size:100% 120px;}
	div.tarot-results{margin-bottom:0px; min-height:120px; height:120px;}
	div.tarot-result{height:120px; line-height:50px;}
	div.tarot-result span{font-size:0.9rem;}
	
	/* Elements Form */
	section.steps .formcontainer{padding: 10px 0px 5px 0px;}
	section.steps .formrow1, 
		section.steps .formrow2{display:table; width:100%;}
	section.steps .formrow1 .formelement, 
		section.steps .formrow2 .formelement{display:table-cell; padding:5px 5px 5px 5px;}
	section.steps .formrow1 .formelement{width:100%;}
	section.steps .formrow2 .formelement{width:50%;}
	
	section.steps .formrow1 .formelement input{width:610px;}
	section.steps .formrow2 .formelement input{width:280px;}

	button, input[type="button"], input[type="reset"], input[type="submit"] {margin: 0px 5px 0px 5px; padding: 0.7rem 2.5rem 0.5rem 2.5rem; font-size: 1.9rem; line-height:1.5rem;}
	input[type="text"], input[type="email"], input[type="tel"], input[type="date"]{font-size: 1rem; padding: 0.7rem 1rem 0.5rem 1rem;}
}

@media only screen and (min-width: 1024px)
{
	/* Taille */
	div.content{width:800px}

	/* Titre et header */
	section.title .headerimg img{height:240px;}
	section.title h1{font-size:60px; line-height:40px;}
	section.title h1.lvl1{font-size:60px; padding:10px 0px 0px 0px;}
	section.title h1.lvl2{font-size:70px; padding:0px 0px 10px 0px;}

	/* Comment ca marche */
	section.howdoesitworks header{height:35px; font-size:40px; line-height:38px; padding:0px 0px 0px 0px;}
	section.howdoesitworks .hdiw {height:50px; font-size: 0px;}
	section.howdoesitworks .active .arrow{height: 50px;}
	section.howdoesitworks .active .arrow img{height:50px;}
	section.howdoesitworks .icon{height: 50px;}
	section.howdoesitworks .icon img{padding-left:5px;}
	section.howdoesitworks .text{height: 50px; font-size: 14px; line-height: 17px; margin:0; padding:0 0 0 3px;}

	/* Intro */
	section.intro  p.text{padding: 20px 10px 0px 10px; margin:0; font-size:1.1rem; line-height:1.5rem;}

	/* Etapes */
	section.steps{padding:0px 20px 5px 20px;}
	section.steps header{font-size: 40px; line-height:40px; padding:10px 0px 0px 0px;}
	section.steps .button{margin: 8px auto 8px auto; width:auto;}
	section.steps .domain{margin: 8px 5px 8px 5px; width:28%;}
	section.steps  p.text{padding: 10px 10px 10px 10px; margin:0; font-size:1rem; line-height:1.5rem;}
	
	/* Cartes */
	#tarot-cards{min-height:150px; margin:10px 20px 10px 20px;}
	div.tarot-card{width:74px; height:150px;}
	div.tarot-card-container{margin-right:-20px; margin-left:-20px;}
	div.tarot-card-front{background-size:100% 130px;}
	div.tarot-card-free:hover div.tarot-card-front{background-position: 0px 20px; background-size:100% 130px;}
	div.tarot-results{margin-bottom:0px; min-height:130px;}
	div.tarot-result{height:130px; line-height:50px;}
	div.tarot-result span{font-size:0.9rem;}
	
	/* Elements Form */
	section.steps .formcontainer{padding: 10px 0px 10px 0px;}
	section.steps .formrow1, 
		section.steps .formrow2{display:table; width:100%;}
	section.steps .formrow1 .formelement, 
		section.steps .formrow2 .formelement{display:table-cell; padding:10px 5px 10px 5px;}
	section.steps .formrow1 .formelement{width:100%;}
	section.steps .formrow2 .formelement{width:50%;}
	
	section.steps .formrow1 .formelement input{width:690px;}
	section.steps .formrow2 .formelement input{width:310px;}

	button, input[type="button"], input[type="reset"], input[type="submit"] {margin: 0px 5px 0px 5px; padding: 0.7rem 3rem 0.5rem 3rem; font-size: 2rem; line-height:1.5rem;}
	input[type="text"], input[type="email"], input[type="tel"], input[type="date"]{font-size: 1rem; padding: 0.7rem 1rem 0.5rem 1rem;}
}