@charset "utf-8";
/* CSS Document */

body{
  background 				: transparent;
}

#LCback {
  position 					: fixed;
  width 					: 98%;
  z-index 					: -1;
}
 
#LCgif {
  position 					: fixed;
  top 						: -10%;
  width 					: 100%;
  height 					: auto;
  z-index 					: -2;
}

#LCback img, #LCgif img {
  width 					: 100%;
  height 					: auto;
  border 					: none;
}

#LCback img:focus, #LCgif img:focus {
  background 				: none;
}

#HP {
  position					: fixed;
  bottom					: 5%;
  right						: 5%;
  z-index					: 1;
}

#langfr, #langen {
  background-image			: url('../images/Fr.png');
  background-repeat			: no-repeat;
  width						: 40px;
  height					: 28px;
  border-radius				: 25px;
  position					: fixed;
  right						: 50%;
  top						: 15px;
  z-index 					: 1;
}

#langen {
  background-image			: url('../images/En.png');
}

.whyus {
  font-family				: "Tunga";
  font-size					: 200%;
  color						: #fb0606;
  position					: fixed;
  left						: 5%;
  top						: 5%;
  text-decoration			: none;  
  padding-left 				: 1%;
  padding-right 			: 1%;
  padding-top 				: 10px;
  line-height 				: 30px;
  border-style				: solid;
  border-width				: 2px;
  border-color				: #1812f8;
  background				: linear-gradient(to bottom, darkblue 5%, cyan 100%);
  -webkit-transition		: 1s linear 0s;  
  -moz-transition			: 1s linear 0s;  
  -ms-transition			: 1s linear 0s;  
  -o-transition				: 1s linear 0s;  
  transition				: 1s linear 0s;  
  -webkit-border-radius		: 10px;
  -moz-border-radius		: 10px;
  -ms-border-radius			: 10px;
  -o-border-radius			: 10px;
  border-radius				: 10px;
  -webkit-box-shadow		: 0px 0px 5px 1px #000;
  -moz-box-shadow			: 0px 0px 5px 1px #000;
  -ms-box-shadow			: 0px 0px 5px 1px #000;
  -o-box-shadow				: 0px 0px 5px 1px #000;
  box-shadow				: 0px 0px 5px 1px #000;
  z-index 					: 1;
}

.whyus:hover, .whyus:focus {
  cursor					: pointer;
  color						: #04F819;  
  font-size					: 250%;
  display					: block;
  border-color				: #fb0606;
  background				: linear-gradient(to bottom, darkblue 5%, cyan 100%);
}

#whyinfo {
  display					: none;
}

#whyinfo div {
  text-align				: justify;
  text-shadow				: none;  
  border					: none;
  -webkit-border-radius 	: 20px;
  -moz-border-radius 		: 20px;
  -ms-border-radius			: 20px;  
  -o-border-radius			: 20px;  
  border-radius				: 20px;
  padding 					: 18px 2% 5px 2%;
  max-width 				: 500px;
}

#whyinfo div p {
  font-size 				: 16px;
  color						: #1812f8;  
}

#whyinfo:target {
  display					: block;
}

.contactus {
  font-family				: "Tunga";
  font-size					: 150%;
  color						: #fb0606;
  position					: fixed;
  left						: 13%;
  bottom					: 8%;
  text-decoration			: none;
  padding-left 				: 1%;
  padding-right 			: 1%;
  padding-top 				: 3px;
  line-height 				: 25px;
  -webkit-transition		: 1s linear 0s;  
  -moz-transition			: 1s linear 0s;  
  -ms-transition			: 1s linear 0s;  
  -o-transition				: 1s linear 0s;  
  transition				: 1s linear 0s;  
  z-index					: 1;
  background				: linear-gradient(to bottom, cyan 5%, darkblue 100%);
  border-style				: solid;
  border-width				: 2px;
  border-color				: #1812f8;
  -webkit-border-radius		: 10px;
  -moz-border-radius		: 10px;
  -ms-border-radius			: 10px;
  -o-border-radius			: 10px;
  border-radius				: 10px;
  -webkit-box-shadow		: 0px 0px 5px 1px #000;
  -moz-box-shadow			: 0px 0px 5px 1px #000;
  -ms-box-shadow			: 0px 0px 5px 1px #000;
  -o-box-shadow				: 0px 0px 5px 1px #000;
  box-shadow				: 0px 0px 5px 1px #000;
  -webkit-transform						: rotate(0deg);
  -moz-transform						: rotate(0deg);
  -ms-transform							: rotate(0deg);
  -o-transform							: rotate(0deg);
  transform								: rotate(0deg);
  -webkit-animation-name				: balance;
  -webkit-animation-duration			: 1s;
  -webkit-animation-timing-function		: linear;
  -webkit-animation-iteration-count		: infinite;
  -webkit-animation-direction			: alternate;
  -moz-animation-name					: balance;
  -moz-animation-duration				: 1s;
  -moz-animation-timing-function		: linear;
  -moz-animation-iteration-count		: infinite;
  -moz-animation-direction				: alternate;
  -ms-animation-name					: balance;
  -ms-animation-duration				: 1s;
  -ms-animation-timing-function			: linear;
  -ms-animation-iteration-count			: infinite;
  -ms-animation-direction				: alternate;
  -o-animation-name						: balance;
  -o-animation-duration					: 1s;
  -o-animation-timing-function			: linear;
  -o-animation-iteration-count			: infinite;
  -o-animation-direction				: alternate;
  animation-name						: balance;
  animation-duration					: 1s;
  animation-timing-function				: linear;
  animation-iteration-count				: infinite;
  animation-direction					: alternate;
}

@-webkit-keyframes balance /*Safari and Chrome*/
{
	0% {-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}
	100% {-webkit-transform:rotate(2deg);transform:rotate(2deg);}
}

@-moz-keyframes balance /*Firefox*/
{
	0% {-moz-transform:rotate(-2deg);transform:rotate(-2deg);}
	100% {-moz-transform:rotate(2deg);transform:rotate(2deg);}
}

@-o-keyframes balance /*Opera*/
{
	0% {-o-transform:rotate(-2deg);transform:rotate(-2deg);}
	100% {-o-transform:rotate(2deg);transform:rotate(2deg);}
}

@keyframes balance
{
	0% {transform:rotate(-2deg);}
	100% {transform:rotate(2deg);}
}

.contactus:hover, .contactus:focus {
  cursor					: pointer;
  color						: #04F819;
  font-size					: 200%;
  display					: block;
  border-color				: #fb0606;
  background				: linear-gradient(to bottom, darkblue 5%, cyan 100%);
}

/** the form elements **/
h1 { 
  color						: #fb0606;
  font-family				: "Tunga", Georgia, serif; 
  font-size					: 2.6em; 
  line-height				: 100%;
  text-align				: center; 
}

h2 { 
  color						: #fb0606;
  font-family				: "Tunga", Georgia, serif; 
  font-size					: 1.6em; 
  line-height				: 100%;
  text-align				: center; 
}

/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

footer {
  color						: #1812f8;
  position					: fixed;
  bottom					: 5px;
  font-size					: 70%;
  text-align				: center;
  z-index					: -1;
}

@media all and (orientation : portrait) {
  #LCback {top:30%;}   
  #LCgif {top:30%;}
  #langfr, #langen {right:5%;}
}

@media all and (max-height:650px) and (min-width:500px) {
  .whyus, .contactus {font-size:100%;padding-top:2px;line-height:20px;}
  .whyus:hover, .whyus:focus, .contactus:hover {font-size:150%;}
  #whyinfo div p {font-size:12px;}
}

@media all and (max-width:500px) {
  .whyus, .contactus {font-size:100%;padding-top:2px;line-height:20px;}
  .whyus:hover, .whyus:focus, .contactus:hover {font-size:150%;}
  #whyinfo div p {font-size:12px;}
}

@media all and (max-height:500px) {
  .whyus, .contactus {font-size:100%;padding-top:2px;line-height:20px;}
  .whyus:hover, .whyus:focus, .contactus:hover {font-size:150%;}
  #whyinfo div p {font-size:12px;}
}

@media all and (max-height:500px) and (max-width:1000px) {
  .whyus, .contactus {font-size:100%;padding-top:2px;line-height:20px;}
  .whyus:hover, .whyus:focus, .contactus:hover {font-size:150%;}
  #whyinfo div p {font-size:12px;}
}