.phpmind_text_shadow_eg{
	color:#028fc9;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:50px;
	text-align:center;
    text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
.phpmind_text_heading_green{color: #668C0E;
    font: 16px "Trebuchet MS",Verdana,Arial;
    margin: 0 0 15px;
    padding: 0;
font-weight:bold;}
.phpmind_border_radius_eg{
			border:3px solid #666666;
			padding:20px 60px; 
			background:#73C22D;
			width:350px;
			border-radius:30px;
			}
.phpmind_border_boxshadow_eg{
	background: none repeat scroll 0 0 #73C22D;
    box-shadow: 10px 10px 5px 5px #666666;
    padding: 20px 60px;
    width: 400px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#fff;
	font-weight:bold;
	}		
.phpmind_border_boxshadow_inset_eg	{
	background: none repeat scroll 0 0 #73C22D;
    box-shadow: 10px 10px 15px 5px #666666 inset;
    padding: 20px 60px;
    width: 400px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#fff;
	font-weight:bold;
	}	
.phpmind_border_box_image_eg{
	background: #FF6;
	padding: 10px 5px;
	width: 450px;
	border:20px solid transparent;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #666;
	font-weight:bold;
	border-image: url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-border-image-eg.png") 30 30 round;
}	
.phpmind_background_size{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-size-image.jpg");
	background-size: contain;
	background-repeat:no-repeat;
	width:	500px;
	height:300px;
	border:7px dotted #C90;
}
.phpmind_background_size_cover{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-size-image.jpg");
	background-size: cover;
	background-repeat:no-repeat;
	width:	500px;
	height:300px;
	border:7px dotted #C90;
}
.phpmind_background_size_cover_length{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-size-image.jpg");
	background-size:200px;
	background-repeat:no-repeat;
	width:	500px;
	height:300px;
	border:7px dotted #C90;
}
.phpmind_background_size_cover_percentage{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-size-image.jpg");
	background-size:80% 50%;
	background-repeat:no-repeat;
	width:	500px;
	height:300px;
	border:7px dotted #C90;
	}
.phpmind_background_origin_content{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-origin.jpg");
	background-origin: content-box;
	background-repeat: no-repeat;
	width:	300px;
	height:300px;
	padding:20px;
	border:10px dotted #39C;
	}
.phpmind_background_origin_padding{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-origin.jpg");
	background-origin: padding-box;
	background-repeat: no-repeat;
	width:	300px;
	height:300px;
	padding:20px;
	border:10px dotted #39C;
	}
.phpmind_background_origin_border{
	background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-background-origin.jpg");
	background-origin: border-box;
	background-repeat: no-repeat;
	width:	300px;
	height:300px;
	padding:20px;
	border:10px dotted #39C;
	}
.phpmind_background_clip_content{
	background:#9CC;
	background-clip: content-box;
	background-repeat: no-repeat;
	width:	100px;
	height:100px;
	padding:20px;
	border:10px dotted #39C;
	float:left;
	margin-right:15px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#000033;
	font-weight:bold;
	}
.phpmind_background_clip_padding{
	background:#9CC;
	background-clip: padding-box;
	background-repeat: no-repeat;
	width:	100px;
	height:100px;
	padding:20px;
	border:10px dotted #39C;
	float:left;
	margin-right:15px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#000033;
	font-weight:bold;
	}
.phpmind_background_clip_border{
	background:#9CC;
	background-clip: border-box;
	background-repeat: no-repeat;
	width:	100px;
	height:100px;
	padding:20px;
	border:10px dotted #39C;
	float:left;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#000033;
	font-weight:bold;
	}
.phpmind_text_shadow_eg{
	font-family:Verdana, Geneva, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#006600;
	text-align:justify;
	text-shadow: 4px 4px 7px #009900;

}
.phpmind_word_wrap {
	background:#EFEFEF;
         border: 1px solid #999999;
         color: #333333;
         padding: 10px;
         width: 200px;
         word-wrap: break-word;
	}
/*word wrap send here*/
/*multi column layout starts here*/
.phpmind_css3_multicolumn_layout
{
	-moz-column-count:3; /*To support Firefox */
	-webkit-column-count:3; /*To support Chrome and Safari*/
	column-count:3;
	border: 1px solid #d8d8d8;
}
.phpmind_css3_column_gap{
	-moz-column-count:3; /*To support Firefox */
	-webkit-column-count:3; /*To support Chrome and Safari*/
	column-count:3;
	-moz-column-gap:30px; /*To support Firefox */
	-webkit-column-gap:30px; /* To support Chrome and Safari */
	column-gap:30px;
	border: 1px solid #d8d8d8;
	}
.phpmind_css3_column_rule{
	-webkit-column-rule: 1px solid #CCCCCC; /*To support Chrome and Safari*/
	-moz-column-rule: 1px solid #CCCCCC;/*To support Firefox */
	column-rule: 1px solid #CCCCCC;
	-moz-column-count:3; /*To support Firefox */
	-webkit-column-count:3; /*To support Chrome and Safari*/
	column-count:3;
	}
.phpmind_css3_multi_column_column_property{
	columns:120px 3;
	-webkit-columns:120px 3; /*To support Safari and Chrome */
	-moz-columns:120px 3; /*To support Firefox */
	border: 1px solid #d8d8d8;
}
.phpmind_css3_multi_column_width{
	column-width:140px;
	-moz-column-width:140px; /*To support Firefox */
	-webkit-column-width:140px; /*To support Safari and Chrome */
	border: 1px solid #d8d8d8;
	}
.phpmind_css3_column_span_property{
	-moz-column-count:3; /*To support Firefox */
	-webkit-column-count:3; /*To support Chrome and Safari*/
	column-count:3;
	border: 1px solid #d8d8d8;
	}
.phpmind_css3_column_span_property h2{
  column-span: all;	
  -webkit-column-span:all; /*To support Safari and Chrome */
	}
/*multi column layout ends here*/
/*css3 transition*/
.phpmind_transition_transitioneffect{ border-radius:90px; width:120px; height:120px; background:#F60;	color:#FFFFFF;
}
.phpmind_transition_transitioneffect p{
	color: #FFFFFF;
	display: inline;
	float: left;
	margin: 45px auto 0 40px;
	width: 50px;
	}
.phpmind_transition_transitioneffect:hover
{ 
	width:150px;
	height:150px;
	background:#990000;
	transition-property:width, height, background;
	-webkit-transition-property: width, height, background; /* Safari */
	-moz-transition-property: width, height, background; /* Firefox 4 */
	-o-transition-property:width, height, background; /* Opera */
	transition-duration: 3s;
	-webkit-transition-duration: 3s; /* Safari */
}

.phpmind_transition_transitioneffect_main{
	width:150px;
	height:150px;
	}
/*transtion function eg*/
.phpmind_transition_linear{
	width:100px;
	height:50px;
	background:#990066;
	color:#fff;
	}
.phpmind_transition_linear:hover{
	width:300px;
	transition:width 5s linear 0s;
	-o-transition:width 5s linear 0s;
	-webkit-transition:width 5s linear 0s;
	-moz-transition:width 5s linear 0s;
	-ms-transition:width 5s linear 0s;	
	}
	.phpmind_transition_ease{
	width:100px;
	height:50px;
	background:#990066;
	}
.phpmind_transition_ease:hover{
	width:300px;
	transition:width 5s ease 0s;
	-o-transition:width 5s ease 0s;
	-webkit-transition:width 5s ease 0s;
	-moz-transition:width 5s ease 0s;
	-ms-transition:width 5s ease 0s;	
	}
.phpmind_transition_ease_out{
	width:100px;
	height:50px;
	background:#990066;
	}
.phpmind_transition_ease_out:hover{
	width:300px;
	transition:width 5s ease-out 0s;
	-o-transition:width 5s ease-out 0s;
	-webkit-transition:width 5s ease-out 0s;
	-moz-transition:width 5s ease-out 0s;
	-ms-transition:width 5s ease-out 0s;	
	}
	.phpmind_transition_ease_in{
	width:100px;
	height:50px;
	background:#990066;
	}
.phpmind_transition_ease_in:hover{
	width:300px;
	transition:width 5s ease-in 0s;
	-o-transition:width 5s ease-in 0s;
	-webkit-transition:width 5s ease-in 0s;
	-moz-transition:width 5s ease-in 0s;
	-ms-transition:width 5s ease-in 0s;	
	}
.phpmind_transition_ease_in_out{
	width:100px;
	height:50px;
	background:#990066;
	}
.phpmind_transition_ease_in_out:hover{
	width:300px;
	transition:width 5s ease-in-out 0s;
	-o-transition:width 5s ease-in-out 0s;
	-webkit-transition:width 5s ease-in-out 0s;
	-moz-transition:width 5s ease-in-out 0s;
	-ms-transition:width 5s ease-in-out 0s;	
	}
.phpmind_transition_cubic_bezier{
	width:100px;
	height:50px;
	background:#990066;
}
.phpmind_transition_cubic_bezier:hover{
	width:300px;
	transition:width 5s cubic-bezier(.7,0.17,.13,1.05) 0s;
	-o-transition:width 5s cubic-bezier(.7,0.17,.13,1.05) 0s;
	-webkit-transition:width 5s cubic-bezier(.7,0.17,.13,1.05) 0s;
	-moz-transition:width 5s cubic-bezier(.7,0.17,.13,1.05) 0s;
	-ms-transition:width 5s cubic-bezier(.7,0.17,.13,1.05) 0s;
	}
.phpmind_css3_transition_span{
	color: #FFFFFF;
    display: block;
    padding: 10px 0 10px 5px;
	}
/*egs ends here*/
/*main transition examples startes here*/
#phpmind_transition_box {
  position:relative;
  width:400px;
  height:300px;
  margin:0 auto 10px;
  border:18px solid transparent;
  border-image: url("http://www.phpmind.com/blog/wp-content/uploads/2013/09/phpmind-border-image-eg.png") 18 18 round;
  padding:10px;
}
#phpmind_transition_center {
  width:65px;
  height:61px;
  position:absolute;
  top:130px;
  left:170px;
  background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/10/phpmind_flower_pink.png") no-repeat;
 
  -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;}
.phpmind_blue_link {
  width:90px;
  margin:0px auto;
  font-size:16px;
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;
  color:#33CCFF;
}
.phpmind_blue_link_left {
  width:90px;
  margin:0px auto 0px 15px;
  font-size:16px;
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;
  color:#33CCFF;
}
.phpmind_transition_img1, .phpmind_transition_img2, .phpmind_transition_img3, .phpmind_transition_img4 {
 width:65px;
  height:61px;
  position:absolute;
  top:130px;
  left:170px;
  background:url("http://www.phpmind.com/blog/wp-content/uploads/2013/10/phpmind_flower_pink.png") no-repeat;
  -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;  /* Ensures that the element is being transformed in the 3d context so that hw acceleration kicks in where appropriate. */
  -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);}
  .phpmind_transition_img1 {
    -webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;  }
  .phpmind_transition_img2 {
    -webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;  }
  .phpmind_transition_img3 {
    -webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;  }
  .phpmind_transition_img4 {
    -webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;  }
#phpmind_transition_box:hover .phpmind_transition_img1, #phpmind_transition_box.hover_effect .phpmind_transition_img1 {
  -webkit-transform: translate(-205px, -165px);
-moz-transform: translate(-205px, -165px);
-o-transform: translate(-205px, -165px);
-ms-transform: translate(-205px, -165px);
transform: translate(-205px, -165px);}


#phpmind_transition_box:hover .phpmind_transition_img2, #phpmind_transition_box.hover_effect .phpmind_transition_img2 {
  -webkit-transform: translate(210px, -165px);
-moz-transform: translate(210px, -165px);
-o-transform: translate(210px, -165px);
-ms-transform: translate(210px, -165px);
transform: translate(210px, -165px);
}
#phpmind_transition_box:hover .phpmind_transition_img3, #phpmind_transition_box.hover_effect .phpmind_transition_img3 {
  -webkit-transform: translate(215px, 155px);
-moz-transform: translate(215px, 155px);
-o-transform: translate(215px, 155px);
-ms-transform: translate(215px, 155px);
transform: translate(215px, 155px);}


#phpmind_transition_box:hover .phpmind_transition_img4, #phpmind_transition_box.hover_effect .phpmind_transition_img4 {
  -webkit-transform: translate(-203px, 157px);
-moz-transform: translate(-203px, 157px);
-o-transform: translate(-203px, 157px);
-ms-transform: translate(-203px, 157px);
transform: translate(-203px, 157px);}

#phpmind_transition_box:hover #phpmind_transition_center {
  opacity:0;
}
/*main transition example ends here*/
/*image fading eg starts here*/
.phpmind_css3_transition_fading {
  position:relative;
  height:240px;
  width:240px;
  margin:0 auto;
  box-shadow: 8px 8px 5px #ccc;
}

.phpmind_css3_transition_fading img {
  position:absolute;
  left:0;
  opacity:1;
  -webkit-transition: opacity 2s ease-in 2s;
  -moz-transition: opacity 2s ease-in 2s;
  -o-transition: opacity 2s ease-in 2s;
  transition: opacity 2s ease-in 2s;
}

.phpmind_css3_transition_fading img.phpmind_css3_transition_img2:hover {
  opacity:0;
}
/*image fading eg ends here*/
/*css3 transition ends here*/