@import url(https://fonts.googleapis.com/css?family=Six+Caps);

html * {
  margin:0;
  scrollbar-color: rgb(255, 157, 0) rgba(154, 208, 252, 0.873);
  scrollbar-width: thin;
}

.tangerinefont {
  font-family: 'Tangerine', serif;
	text-shadow: 4px 4px 4px lightgreen;
  font-size:36px;
  font-weight: 300;
  display:flex;
  flex-flow: row wrap;
  align-items: right;
  justify-content: right; 
  margin-right:50px;
}

h2 {
  text-align:center;
  padding:10px;
  font-size:24px;
  color:maroon;
  padding-top:40px;
  text-shadow: 2px 2px #ff6702;
}*
h3 {
  font-size:18px;
  color:maroon;
  padding-top:40px;
  text-shadow: 2px 2px lightblue;
}

.centerdiv {
  display:flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;  
}

.mainmenudiv {   
  position : absolute;
  left:4%;
  top:1%;
  width:30%;
  height:96%;
  display:flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  color:rgba(42, 42, 42, 0.6);
}

.mainslogandiv {  
  position : absolute;
  left:50%;
  top:5%;
  display:flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: top; 
  font-family: 'Tangerine', serif;
  font-size: 60px;
  /*text-shadow: 4px 4px 12px rgb(80,80,80);*/
  text-shadow: -4px 4px rgba(179,179,179,.4), -3px 3px rgba(153,153,153,.2), 
  -2px 2px rgba(179,179,179,.2), 
  -1px 1px rgba(179,179,179,.2), 
  0px 0px rgba(128,128,128,.5), 
  1px -1px rgba(77,77,77,.6), 
  2px -2px rgba(77,77,77,.7), 
  3px -3px rgba(82,82,82,.8), 
  4px -4px rgba(77,77,77,.9), 
  5px -5px rgba(77,77,77,1);
  color:black;
  animation-duration: 4s;
  animation-name:   shakeanimate;
  animation-iteration-count: 1; 
}

.socialbuttonmenudiv{   
  position : absolute;
  top:10%;
  left:80%;
  width:15%;
  display:flex;
  flex-flow: row wrap;
  align-items: right;
  justify-content: right; 
 
}


iframe {
  width: 99%;
  height: 500px;
}


frameset {
  overflow:hidden; 
  display:block;
  align-items: center;
  justify-content: center;
  margin: 0;
  border:none;
}
frame {
  display:inline-block;
  align-items: center;
  justify-content: center;
}


.error {
  font-family: 'Times New Roman', Times, serif;
  font-size: 12px;
  color:red;
  animation: shake 1s ease-in-out forwards;  
}

@keyframes slidefromtop {
    from {
      margin-top: -100%;
    }
  
    to {
      margin-top: 0;
    }
  }

  @keyframes slidefromleft {
    from {
      margin-left: -250%;
      /*transform:rotate(180deg);*/
    }
  
    to {
      margin-left: 0;
      
    }
  }

  .mybounce {
    animation-duration: 0.2s;
    animation-name:   shakeanimate;
    animation-iteration-count: 1;
    margin:0;
    padding:0; 
    display:flex;
    align-items: center;
    flex-direction:column;
    flex-wrap: wrap;
  }
  @keyframes shakeanimate {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    20% {transform: rotateY(90deg);}
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
 } 

 .mytilt {
  animation-duration: 0.3s;
  animation-name: horizontal-shaking;
  animation-iteration-count:  4;   
  margin:0;
  padding:0;  
  display:flex;
  align-items: center;
  flex-direction:column;
  flex-wrap: wrap;
}
 @keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
 }

.ouvertureY {
  position:relative;
  width:100%;
  animation-duration: 2s;
  animation-name:   animouvreY;
  animation-iteration-count:  1; 
  display:inline-table;  
}


@keyframes animouvreY{
  0% { transform: rotateY(90deg); }
  50% { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}

.ouvertureX {
  position:relative;
  width:100%;
  animation-duration: 4s;
  animation-name:   animouvreX;
  animation-iteration-count:  1; 
  display:inline-table;  
}

@keyframes animouvreX{
  0% { transform: rotateX(90deg); }
  50% { transform: rotateX(45deg); }
  100% { transform: rotateX(0deg); }
}

.promo {
  position:absolute;
  left:18%;
  top:1%;
  animation-duration: 2s;
  animation-name:  slidefromleft;
  animation-iteration-count:  1; 
  border:2px solid pink;
}

.promoplus {
  position:absolute;
  left:60%;
  top:-1%;
  animation-duration: 2s;
  animation-name:  slidefromleft;
  animation-iteration-count:  1; 
}


.y_rotate {
 animation-duration: 2s;
  animation-name:  rotate_y;
  animation-iteration-count:  1;  
}
  @keyframes rotate_y {
	0% {
		transform: rotateY(0deg);

	}
	50% {
		transform: rotateY(90deg);
	}
	100% {
		transform: rotateY(0deg);

	}
  }

.show_item {
 animation-duration: 2s;
  animation-name:  opaque_item;
  animation-iteration-count:  1;   
}
  @keyframes opaque_item {
    0%    { opacity: 0; }
    20%   { opacity: 0.4; }
    80%   { opacity: 0.8; }
    100%  { opacity: 1; }
  }