/*===================================================================================================================
 * @name: Flip Popup
 * @type: jQuery
 * @author: (c) Zerokod Interactive media Productions
 * @demo: http://zerokod.com/flippopup
 * @version: 0.1.1
 * @requires jQuery 1.4.3
 *==================================================================================================================*/
/*///////////////*/


.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
}

.white_content {
	display: block;
	position: absolute;
	width: 50%;
	height: 50%;
	z-index:99999999;
	overflow: hidden;
     position: absolute;
    top: 0px;
    left: 0px;
    
}
.closeX{
    display: block;
	position: relative;
	top: 0%;
	right: 0%;
	color:#fff;
    z-index:999999999;
    clear:both;
    height:30px;
    width: 100%;
    text-align: right;
}
.closeX a, .closeX a:hover {
    position: absolute;
    text-decoration: none;
    float:right;
    right: 2%;
}



    
    
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;

    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -webkit-transform:perspective(1000px);
    transform: perspective(1000px);
    
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 

    border: 0px solid #ccc;
    width:100%;
    height:100%;
    font-family: arial;
}

		

			
/* END: Accommodating for IE */


    


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    
    width:100%;
    height:100%;
    
}

.front {
			
    /*background: lightgreen;*/
    z-index: 2;
}

.back {
   /* background: lightblue;*/
			margin-left: 0 auto;
    margin-right: 0 auto;
}

.front .name {
    font-size: 2em;
    display: inline-block;
    background: rgba(33, 33, 33, 0.9);
    color: #f8f8f8;
    font-family: Courier;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: 60px;
    left: 25%;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.05em #333;
    display: none;

    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}



		
    
    
@keyframes flip {
  0% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;

  }

  
  50% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }

  100% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }
}

@-webkit-keyframes flip {
  0% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;

  }

  
  50% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }

  100% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }
}

@-ms-keyframes flip {
  0% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;

  }

  
  50% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }

  100% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }
}



.animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
}
    
.back{
    

    
    -webkit-animation: flip 8.5s 1; /* Safari 4+ */
    -moz-animation:    flip 8.5s 1; /* Fx 5+ */
    -o-animation:      flip 8.5s 1; /* Opera 12+ */
    animation:         flip 8.5s 1; /* IE 10+ */
        
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    display: none;  
} 
    
/*////////////////////////*/
    /*demo div element to popup*/
 
#pop1{
    width:600px;
    height:500px;  
}
 .linkpuls {
    background: none repeat scroll 0% 0% #ff5599;
    padding: 5px 30px;
    border-radius: 15px;
    text-decoration: none !important;
     width:150px;
     z-index:1;
     color:#fff;
     text-align: center;
     font-family: arial;
     text-transform: uppercase;
}
h1.demotitle{
     font-family: arial;
     text-transform: uppercase;
    font-size: 50px;
}

.linkpulsgreen {
    background: none repeat scroll 0% 0% #4ebe4e;
    padding: 5px 30px;
    border-radius: 15px;
    text-decoration: none !important;
     width:150px;
     z-index:1;
     color:#fff;
     text-align: center;
     font-family: arial;
     text-transform: uppercase;
}
.linkpulsblue {
    background: none repeat scroll 0% 0% #0edce3;
    padding: 5px 30px;
    border-radius: 15px;
    text-decoration: none !important;
     width:150px;
     z-index:1;
     color:#fff;
     text-align: center;
     font-family: arial;
     text-transform: uppercase;
}

.linkpulsorange{
    background: none repeat scroll 0% 0% #f79747;
    padding: 5px 30px;
    border-radius: 15px;
    text-decoration: none !important;
     width:150px;
     z-index:1;
     color:#fff;
     text-align: center;
     font-family: arial;
     text-transform: uppercase;
}
/*
.topcontainer {
  
    position: absolute;
    top: 0px;
    left: 0px;
}*/