/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––– */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

body
{
    background-color: white;
    font-weight: 400;
    font-size: 1.1em;
    position: relative;
    color: 333333;
    font-family: 'Ubuntu', sans-serif;

}

html, body 
{
    min-height: 100vh;
}

.wptmc-sign {
  font-size: 28px;
  color: #2C3E50;
}


/* Grid /
–––––––––––––––––––––––––––––––––––––––––––––– */
.container
{
    max-width: 800px !important;
}

.LogoA
{
    margin: auto;
    display: block;
    margin-top: 30%;
}


/* Keyframes & Animation
–––––––––––––––––––––––––––––––––––––––––––––– */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––– */

h1 {font-style: normal; font-size: 0.8em; color: #2C3E50; font-weight: 300;}
h2 {font-style: normal; font-size: 0.8em; color: #2C3E50; line-height: 1.4rem}
span {font-style: unset; font-size: 0.7em; font-weight: 300; color: grey; text-align: center;}
    

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––– */
.footerH
{
    height: 50px;
    text-align: center;
}

.footerA
{
    height: 50px;
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    font-weight: 300;
    font-size: 0.6em;
}


.norelative /*Boostrap automaticly "added position: ralative" so we have to cheange it*/
{
    position: static;
}

.polaroid {
  width:  200px;
  height: 314px;
  position: relative;
  border: 5px solid #fff;
  border-bottom: 50px solid #fff;
}
.shine {
  width: 100%; 
  height: 100%;
  background-image: url('../img/blask.png');
  background-position: -500px 0;
  left: 0px;
  top: 0px;
  position: absolute;
  background-repeat: no-repeat;
  -webkit-transition: background-position .5s ease;
  -moz-transition: background-position .5s ease;
  -o-transition: background-position .5s ease;
  transition: background-position .5s ease;
}
.shine:hover { background-position: 500px 0; }