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


/* CENTERING */

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

/* /end */

.background-image {
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    background-image: url(2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 800px;
    height: 900px;
    -webkit-filter:grayscale(70%);
    -moz-filter:grayscale(70%);
    -o-filter:grayscale(70%);
    -ms-filter:grayscale(70%);
    filter:grayscale(70%);
  }
  

h3{
   position: relative;
   left: 45%;
}

/* THE FRONT */

.front{

    background-image:url(LOGO-Plasticity.png);
   background-size:contain;
   background-position-y:50px ;
   background-color: #ffffffb0;
   background-repeat:no-repeat;
   
}


.back{
   background-image:url(LOGO-Plasticity.png);
background-position-y:340px ;
background-position-x:65px ;
   background-size:250px;
   background-repeat: no-repeat;
   h1, p, .font-a-icons {
      color: #3b8939;
      font-family: "Lato";
      margin-left: 0%;
      line-height: 90%;
      text-align: center;
   }   
   
   h1{
      margin-top: 5%;    
   }
   
   p{
      font-size: 19px;
      padding-bottom: 15px;
      text-align: center;
      border-bottom: 2px solid #3b8939;
   }
   
   .bold{
      font-weight: bold;
   }
   
   .font-a-icons{    
    margin-top: -15px;
      margin-left: 75px;
      .icon-group{
         margin-top: -25px;
      }
      
      span, .link, .fa, a{
         color: #3b8939;
      }  
      
      .fa{
         font-size: 40px;
      }
      
      span, a{
         font-size: 18px;
      }
      
      a, .website{
         text-decoration: none;
      }
      
      a:hover, .website:hover{
         color: #3a893986;
      }     
   }
   .icon-box{
      position: relative;
      color: #3b8939;
      font-size: 40px;
      height: 45px;
      width: 45px;
      padding: 5px;
      top: 75px;
      right: 10%;
      border-radius: 50%;
      display: inline-block;
      border: 2px solid #3b8939;
      margin: 5px;
      text-align: center;
      cursor: pointer;
      -webkit-transition: all ease 0.5s;
	      -moz-transition: all ease 0.5s;
	         transition: all ease 0.5s;
   }
   .icon-box:hover {
    box-shadow: inset 0 50px 0 0 #3a89397d;
    color: #fff;
   }
}


.flip-container {
	perspective: 1000px;
}


.flip-container, .front, .back {
   height: 600px;
   width: 375px;
}

.flipper {
	transition: 0.5s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	backface-visibility: hidden;
	position: absolute;
}

.front {
	z-index: 2;
	transform: rotateY(0deg);
  transition: all 2s;
}

.back{
   background-color: #ffffffb0;
}

.back {
	transform: rotateY(180deg);
   transition: all 2s;
}

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 400x; 
	}