/*General Style*/
*{
	padding: 0;
	margin: 0;
}

body{
	margin: 20px;
}
/*Example 2*/
.ex-2 {
	background: black;
}

.ex-2 #for-small-screen{
	display: none;
}

.ex-2 #showblock {
	display: block;
	color: blue;
	font-size: 35px;
	font-weight: bold;
	text-align: center;
	margin-top: 10%;
}

@media all and (min-width: 481px) and (max-width: 760px) {
	.ex-2 #showblock {
		display: block;
		color: orange;
		font-size: 25px;
		font-weight: 400;
	}
}

/*Example 3*/
.ex-3 h1 ~ p {
    background: green;
	padding: 20px;
	margin: 10px;
	color: #fff;
	font-size: 25px;
	width: 50%;
}

/*Example 4*/
.ex-4 div[class^='anees'] {
    background: orange;
	padding: 20px;
	margin: 10px;
	color: #fff;
	font-size: 25px;
	width: 50%;
}

/*Example 5*/
.ex-5 div[class$='anees'] {
    background: orange;
	padding: 20px;
	margin: 10px;
	color: #fff;
	font-size: 25px;
	width: 50%;
}

/*Example 6*/
.ex-6 div[class*='anees'] {
    background: orange;
	padding: 20px;
	margin: 10px;
	color: #fff;
	font-size: 25px;
	width: 50%;
}

/*Example 7*/
.ex-7 input:checked{
	width: 200px;
	height: 200px;
	color: red; /* Will not be execute */
}

/*Example 8*/
.ex-8 input:disabled{
	color: red; 
	background-color: black;
	margin: 10px 70px;
}

.ex-8 input:enabled{
	width: 70px;
	height: 70px;
	color: blue;
	background: orange;
}

/*Example 9*/
.ex-9 p:empty{
	background-color: orange;
	width: 200px;
    height: 20px;
	margin: 10px 0;
}

/*Example 10*/
.ex-10 p:first-of-type{
	background-color: black;
	color: orange;
	margin: 15px;
}

/*Example 11*/
.ex-11  h3{
	text-align: center;
}

.ex-11 ul {
	width: 437px;
	margin: 20px auto;
	background: black;
	height: 43px;
}

.ex-11 ul li{
	float: left;
	list-style: none;
	border-right: 6px solid green;
	padding: 10px;
}

.ex-11 ul li:hover{
	background-color: blue;
}

.ex-11 #menu-block-using-last-child ul li:last-child:hover{
	background-color: red;
}

.ex-11 #menu-block-using-last-child ul li:last-child{
	border-right: 0;
}

.ex-11 ul li a{
	color: orange;
	text-decoration: none;
	font-size: 20px;
}

/*Example 12*/
.ex-12  ul li:last-of-type{
	border: 5px dotted red;
	margin: 20px;
}

/*Example 13*/
.ex-13  :not(p){
	color: blue;
}

.ex-13  p:not(:last-child){
	color: green;
}

/*Example 14*/
.ex-14 .ex-14-child{
	margin-bottom: 50px;
}

.ex-14  #ex-14-1 div:nth-child(odd){
	background: orange;
	padding: 10px;
}

.ex-14  #ex-14-2 div:nth-child(-n + 3){
	background: blue;
	padding: 10px;
}

.ex-14  #ex-14-3 div:nth-child(4n){
	background: red;
	padding: 10px;
}

.ex-14  #ex-14-4 div:nth-last-child(2){
	background: green;
	padding: 10px;
}

/*Example 15*/
.ex-15  .ex-15-child {
	margin: 20px;
	padding: 20px;
	border: 5px solid green;
}

.ex-15  .ex-15-child h1:only-of-type{
	color: orange;
	font-size: 30px;
}

.ex-15  .ex-15-child h1:only-child{
	background: black;
	padding: 50px;
}

/*Example 16*/
.ex-16  :required {
	padding: 20px;
	background: green;
	width: 200px;
	height: 60px;
}

.ex-16  :optional {
	padding: 10px;
	background: orange;
	width: 150px;
	height: 40px;
}

/*Example 17*/

.ex-17 a{
	display: inline-block;
	text-decoration: none;
	font-size: 18px;
	margin: 20px;
	color: red;
}

.ex-17  :target {
	background: green;
	padding: 20px;
	font-size: 25px;
	
	font-family: anees;
	font-family: "anees hikmat";
}

/*Example 18*/
.ex-18 p{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: #fff;
}

.ex-18 #p1{
	text-shadow: 20px 15px red;
}

.ex-18 #p2{
	text-shadow: 5px 16px 7px blue;
}

.ex-18 #p3{
	text-shadow: 257px 0px 3px red,
				 0px 17px 2px blue,
				-1px -17px 3px green;
}

.ex-18 #p4{
	background-color: #565656;
	color: #333;
	text-shadow: 0 1px 0 #777, 0 -1px 0 #000;
	font-size: 40px;
}

/*Example 19*/
.ex-19 p{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: yellow;
	width: 200px;
}

.ex-19 #p1{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.ex-19 #p2{
	text-overflow: ellipsis;
	overflow: hidden;
}

.ex-19 #p3{
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ex-19 #p4{
	text-overflow: clip;
	white-space: nowrap;
	overflow: hidden;
}

/*Example 20*/
.ex-20 p, .ex-20 #txtArea{
	overflow: auto;
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: yellow;
	width: 200px;
}

.ex-20 #p1{
	resize: both;
}

.ex-20 #p2{
	resize: vertical;
}

.ex-20 #p3{
	resize: horizontal;
}

.ex-20 #txtArea{
	resize: none;
}

/*Example 21*/
.ex-21 p{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: blue;
	width: 200px;
}

.ex-21 #p1{
	word-wrap: break-word;
}

.ex-21 #p2{
	overflow: auto;
}

/*Example 22*/
.ex-22 div{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: blue;
}

.ex-22 .usingColumn{
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}

.ex-22 .content-column-2 { 
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}
/* OR */
.ex-22 div[class*='column-3'] { 
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
}
/* OR */
.ex-22 div[class*='-4'] { 	
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}

/*Example 23*/
.ex-23 p{
	margin: inherit;
	padding: inherit;
}

.ex-23 div{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: blue;
}

.ex-23 .ex-23-1{
	-webkit-column-width: 150px;
	-moz-column-width: 150px;
	column-width: 150px;
}

.ex-23 .ex-23-2{
	word-break: break-word;
	width: 1000px;
	-webkit-column-width: 100px;
	-moz-column-width: 100px;
	column-width: 100px;
}

.ex-23 .ex-23-3{
	-webkit-column-width: 250px;
	-moz-column-width: 250px;
	column-width: 250px;
}

.ex-23 .ex-23-4{
	-webkit-column-width: 250px;
	-moz-column-width: 250px;
	column-width: 250px;
}

.ex-23 .ex-23-4 p{
	margin: 0;
	padding: 0;
	text-indent: 70px;
}

.ex-23 .ex-23-5{
	width: 1000px;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	-webkit-column-width: 100px;
	-moz-column-width: 100px;
	column-width: 100px;
}

/*Example 24*/
.ex-24 div{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: orange;
}

.ex-24 .ex-24-1{
	-webkit-column-gap: 4em;
	-moz-column-gap: 4em;
	column-gap: 4em;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}

.ex-24 .ex-24-2{
	-webkit-column-gap: 6em;
	-moz-column-gap: 6em;
	column-gap: 6em;
	-webkit-column-rule: 3px solid red;
	-moz-column-rule: 3px solid red;
	column-rule: 3px solid red;
	-webkit-column-width: 100px;
	-moz-column-width: 100px;
	column-width: 100px;
}

/*Example 25*/
.ex-25 div{
	background: black;
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: brown;
}

.ex-25 .ex-25-2, .ex-25 .ex-25-1{
	-webkit-column-count: 8;
	-moz-column-count: 8;
	column-count: 8;
}

.ex-25 .ex-25-2 h1{
	-webkit-column-span: all;
    column-span: all;
}

/*Example 26*/
.ex-26 div{
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: brown;
	width: 80%;
	height: 300px;
}

.ex-26 .ex-26-1{
	background-image: url("2nees.png"), url("web.png");
	background-position: 95% 85%, 50% 50%;
	background-repeat: no-repeat;
}

.ex-26 .ex-26-2{
	background: url("2nees.png") no-repeat 40% 50%,
				url("web.png") no-repeat 80% 0%;
}

.ex-26 .ex-26-3{
	background: url("web.png") no-repeat 80% 0%;/*For Non Supporting Browser*/
	
	background: url("2nees.png") repeat-y 50% 50%,
				url("web.png") no-repeat 80% 0%;
}

/*Example 27*/
.ex-27 div{
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: brown;
	width: 80%;
	height: 300px;
	border: 4px solid red;
}

.ex-27 .ex-27-1{
	background: url("web.png") no-repeat center top;
	background-size: 100px 70%;
}

.ex-27 .ex-27-2{
	background: url("web.png") no-repeat center top;
	background-size: 75% auto;
}

.ex-27 .ex-27-3{
	background: url("web.png") no-repeat center top;
	background-size: cover;
}

.ex-27 .ex-27-4{
	background: url("web.png") no-repeat center top;
	background-size: contain;
}

.ex-27 .ex-27-5{
	background: url("web.png") no-repeat;

	background: url("2nees.png") no-repeat 2% 15%, 
				url("2nees.png") no-repeat 80% 80%, 
				url("2nees.png") no-repeat 2% 80%, 
				url("2nees.png") no-repeat 80% 2%,
				url("2nees.png") no-repeat center,
				url("web.png") no-repeat;
	background-size: 200px auto, 300px, 15%, 100px 75px,contain, cover;
}

/*Example 28*/
.ex-28 div{
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: brown;
	width: 80%;
	height: 300px;
	border: 9px dotted red;
	background: black;
}

.ex-28 hr{
	height: 50px;
	background-color: black;
}

.ex-28 .ex-28-compare {
	background: url("course.png") no-repeat left top;
	float: left;
	width: 24%;
}

.ex-28 .ex-28-1{
	background-clip:border-box;
}

.ex-28 .ex-28-2{
	background-clip:padding-box;
}

.ex-28 .ex-28-3{
	background-clip:content-box;
}

.ex-28 .ex-28-4{
	background: url("web.png") no-repeat;
	background-origin:	border-box;
}

.ex-28 .ex-28-5{
	background: url("web.png") no-repeat;
	background-origin:	padding-box;
}

.ex-28 .ex-28-6{
	background: url("web.png") no-repeat;
	background-origin:	content-box;
}

.ex-28 .ex-28-7{
	background-clip:border-box;
}

.ex-28 .ex-28-8{
	background-clip:padding-box;
}

.ex-28 .ex-28-9{
	background-clip:content-box;
}

.ex-28 .ex-28-10{
	background-origin:	border-box;
}

.ex-28 .ex-28-11{
	background-origin:	padding-box;
}

.ex-28 .ex-28-12{
	background-origin:	content-box;
}

/*Example 29*/
.ex-29 div{
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: orange;
	width: 20%;
	height: 100px;
	border: 9px dotted black;
	background: brown;
	float: left;
}

.ex-29 .ex-29-1{
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}

.ex-29 .ex-29-2{
	border-top-left-radius: 150px 20px;
	border-top-right-radius: 150px 50px;
	border-bottom-right-radius: 150px 50px;
	border-bottom-left-radius: 150px 20px;
}

.ex-29 .ex-29-3{
	border-radius: 20px;
}

.ex-29 .ex-29-4{
	border-radius: 200px 100px;
}

.ex-29 .ex-29-5{
	border-radius: 50%;
}

.ex-29 .ex-29-6{
	border-radius: 100px 50px 10px;
}

.ex-29 .ex-29-7{
	border-radius: 30px 50px 70px 90px;
}

/*Example 30*/
.ex-30 div{
	padding: 20px;
	margin: 20px;
	font-size: 25px;
	color: orange;
	background: brown;
	float: left;
	border-style:solid;
}

.ex-30 .ex-30-1{
	 border-image: url('border.png') 30 stretch;
	 border-width: 30px;
}

.ex-30 .ex-30-2{
	 border-image: url('border.png') 30 10 50 39 stretch;
	 border-width: 30px;
}

.ex-30 .ex-30-3{
	border-image: url('border.png') 28 repeat;
	border-width: 50px;
}

.ex-30 .ex-30-4{
	border-image-source: url('border.png');
	border-image-slice: 30; /* Up to four values allowed */
	border-image-width: 10px; /* Up to four values allowed */
	border-image-outset: 15px; /* Up to four values allowed */
	border-image-repeat: repeat; /* Up to two values allowed */
}

/*Example 31*/
.ex-31 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: orange;
	background: brown;
	width: 80%;
	border-style:solid;
}

/*box-shadow: inset(optional) horizontal vertical blur(optional) spread(optional) color; */
.ex-31 .ex-31-1{
	 box-shadow: 50px 20px red; 
}

.ex-31 .ex-31-2{
	box-shadow: 50px 20px 30px red; 
}

.ex-31 .ex-31-3{
	box-shadow: inset 0px 0px 53px -1px green;
}

.ex-31 .ex-31-4{
	box-shadow: inset 0px 0px 53px -1px green, 18px 17px 46px red, -18px -17px 6px blue;
}

/*Example 32*/
.ex-32 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: black;
	background: #c3c3c3;
	width: 25%;
	float: left;
	border-style:solid;
}

.ex-32 .ex-32-1{
	opacity: 0.1;
}

.ex-32 .ex-32-2{
	opacity: 0.4;
}

.ex-32 .ex-32-3{
	opacity: 0.7;
}

.ex-32 .ex-32-4{
	opacity: 0.1;
	background: url('2nees.png');
}

.ex-32 .ex-32-5{
	opacity: 0.4;
	background: url('2nees.png');
}

.ex-32 .ex-32-6{
	opacity: 0.7;
	background: url('2nees.png');
}

.ex-32 .ex-32-7{
	width: 80%;
	background: url('web.png');
}

.ex-32 .ex-32-7 .ex-32-7-text{
	opacity: 0.2;
	background: url('2nees.png') repeat;
	width: 95%;
	height: 100%;
	border: 0;
	padding: 0;
	background-size: 20%;
	margin: 0;
}

/*Example 33*/
.ex-33 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: red;
	background: #000;
	width: 40%;
	height: 75px;
	float: left;
	border-style:solid;
}

.ex-33 .ex-33-1{
	color: rgba(255,0,0,0.5);
}

.ex-33 .ex-33-2{
	color: rgba(255,255,0,0.3);
	border-color: green;
}

.ex-33 .ex-33-3{
	color: rgba(0,0,0,0.5);
	border-color: green;
	background: url('2nees.png');
}

.ex-33 .ex-33-4{
	opacity: 0.5;
	color: rgb(0,0,0);
	border-color: green;
	background: url('2nees.png');
}

/*Example 34*/
.ex-34 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: red;
}

.ex-34 .ex-34-1{
	-webkit-appearance: button;
	-webkit-appearance: button;
	appearance: button;
}

/*Example 35*/
.ex-35 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: white;
	float: left;
	width: 25%;
	border: 1px solid orange;
}

.ex-35 .ex-35-1{
	background: -webkit-linear-gradient(black, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(black, white); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(black, white); /* For Firefox 3.6 to 15 */
	background: linear-gradient(black, white); /* Standard syntax */
}

.ex-35 .ex-35-2{
	background: -webkit-linear-gradient(left, black, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, black, white); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, black, white); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, black, white); /* Standard syntax */
}

.ex-35 .ex-35-3{
  background: -webkit-linear-gradient(left top, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, black , white); /* Standard syntax */
}

.ex-35 .ex-35-4{
  background: -webkit-linear-gradient(0deg, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(0deg, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(0deg, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(0deg, black , white); /* Standard syntax */
}

.ex-35 .ex-35-5{
  background: -webkit-linear-gradient(45deg, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, black , white); /* Standard syntax */
}

.ex-35 .ex-35-6{
  background: -webkit-linear-gradient(90deg, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(90deg, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(90deg, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(90deg, black , white); /* Standard syntax */
}

.ex-35 .ex-35-7{
  background: -webkit-linear-gradient(-90deg, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, black , white); /* Standard syntax */
}

.ex-35 .ex-35-8{
  background: -webkit-linear-gradient(180deg, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, black , white); /* Standard syntax */
}

.ex-35 .ex-35-9{
  background: -webkit-linear-gradient(-135deg, black , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-135deg, black, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-135deg, black, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-135deg, black , white); /* Standard syntax */
}

.ex-35 .ex-35-10{
  background: -webkit-linear-gradient(45deg, red , green, blue, orange, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(45deg, red , green, blue, orange, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(45deg, red , green, blue, orange, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(45deg, red , green, blue, orange, yellow); /* Standard syntax */
}

.ex-35 .ex-35-11{
  background: -webkit-linear-gradient(180deg, red , green, blue, orange, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, red , green, blue, orange, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, red , green, blue, orange, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, red , green, blue, orange, yellow); /* Standard syntax */
}

.ex-35 .ex-35-12{
  background: -webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax */
}

.ex-35 .ex-35-13{
  background: -webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(170,55,100,0.4), rgba(255,255,0,0.7), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(170,55,100,0.4), rgba(255,255,0,0.7), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(170,55,100,0.4), rgba(255,255,0,0.7), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(90deg, rgba(255,0,0,0), rgba(170,55,100,0.4), rgba(255,255,0,0.7), rgba(255,0,0,1)); /* Standard syntax */
}

.ex-35 .ex-35-14{
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(143deg, red 32px, yellow 44px, green 51px);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(143deg, red 32px, yellow 44px, green 51px);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(143deg, red 32px, yellow 44px, green 51px);
  /* Standard syntax */
  background: repeating-linear-gradient(143deg, red 32px, yellow 44px, green 51px);
}

.ex-35 .ex-35-15{
  /* Safari 5.1 to 6.0 */
  background: rgb(18, 16, 70) -webkit-repeating-linear-gradient(-45deg,transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  /* Opera 11.1 to 12.0 */
  background: rgb(18, 16, 70) -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  /* Firefox 3.6 to 15 */
  background: rgb(18, 16, 70) -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
  /* Standard syntax */
  background: rgb(18, 16, 70) repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}

/*Example 36*/
.ex-36 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: white;
	float: left;
	width: 25%;
	height: 230px;
	border: 1px solid orange;
}

.ex-36 .ex-36-1{
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-2{
  background: -webkit-radial-gradient(red 30%, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red 30%, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red 30%, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red 30%, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-3{
  background: -webkit-radial-gradient(circle, red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(circle, red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-4{
  background: -webkit-radial-gradient(closest-side at 80% 30%, red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(closest-side at 80% 30%, red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(closest-side at 80% 30%, red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(closest-side at 80% 30%, red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-5{
  background: -webkit-radial-gradient(farthest-side at 80% 30%, red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(farthest-side at 80% 30%, red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(farthest-side at 80% 30%, red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(farthest-side at 80% 30%, red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-6{
  background: -webkit-radial-gradient(closest-corner at 80% 30%, red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(closest-corner at 80% 30%, red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(closest-corner at 80% 30%, red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(closest-corner at 80% 30%, red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-7{
  background: -webkit-radial-gradient(farthest-corner at 80% 30%, red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(farthest-corner at 80% 30%, red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(farthest-corner at 80% 30%, red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(farthest-corner at 80% 30%, red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-8{
  background: -webkit-radial-gradient(21px at 80% 30%, red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(21px at 80% 30%, red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(21px at 80% 30%, red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(21px at 80% 30%, red, green, blue); /* Standard syntax */
}

.ex-36 .ex-36-9{
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

.ex-36 .ex-36-10{
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(circle closest-corner at 80% 30%,red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(circle closest-corner at 80% 30%,red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(circle closest-corner at 80% 30%,red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(circle closest-corner at 80% 30%, red, yellow 10%, green 15%);
}

.ex-36 .ex-36-11{
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(circle farthest-side , orange -28%, green 5%, blue 47%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(circle farthest-side , orange -28%, green 5%, blue 47%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(circle farthest-side , orange -28%, green 5%, blue 47%);
  /* Standard syntax */
  background: repeating-radial-gradient(circle farthest-side , orange -28%, green 5%, blue 47%);
}

/*Example 37*/
.ex-37 div{
	padding: 20px;
	margin: 20px 20px 80px;
	font-size: 25px;
	color: blue;
	width: 300px;
	height: 50px;
	background: black;
	border: 1px solid orange;
}

.ex-37 .block-space {
	margin: 120px 0 180px;
	height: 4px;
	padding: 0;
	width: 100%;
	background: red;
}

.ex-37 h5 {
	color: orange;
	border: 1px solid red;
	background: #ccc;
	font-size: 20px;
	padding: 20px;
}

.ex-37 .ex-37-1{
	opacity: 0.5;
}

.ex-37 .ex-37-1-1{
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* webkit */
	-moz-transform: rotate(45deg); /* Firefox */
    transform: rotate(45deg);
}

.ex-37 .ex-37-2{
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* webkit */
	-moz-transform: rotate(-90deg); /* Firefox */
    transform: rotate(-90deg);
}

.ex-37 .ex-37-3{
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* webkit */
	-moz-transform: rotate(-90deg); /* Firefox */
    transform: rotate(-90deg);
	
	-ms-transform-origin: top;
	-webkit-transform-origin: top;
	-moz-transform-origin: top;
	transform-origin: top;
}

.ex-37 .ex-37-4{
	-ms-transform: rotate(75deg); /* IE 9 */
    -webkit-transform: rotate(75deg); /* webkit */
	-moz-transform: rotate(75deg); /* Firefox */
    transform: rotate(75deg);
	
	-ms-transform-origin: 241px 70px;
	-webkit-transform-origin: 241px 70px;
	-moz-transform-origin: 241px 70px;
	transform-origin: 241px 70px;
}

.ex-37 .ex-37-5{
	margin: 45px 0 0;
	background: #ccc;
	opacity: 0.5;
	width: 170px;
}

.ex-37 .ex-37-5-rotate{
	-ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* webkit */
	-moz-transform: rotate(10deg); /* Firefox */
    transform: rotate(10deg);
	
	margin: 0;
	width: 170px;
}

.ex-37 .ex-37-5-2{
	-ms-transform-origin: left top;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	transform-origin: left top;
}

.ex-37 .ex-37-5-3{
	-ms-transform-origin: 270% 20em;
	-webkit-transform-origin: 270% 20em;
	-moz-transform-origin: 270% 20em;
	transform-origin: 270% 20em;
}

/*Example 38*/
.ex-38 div{
	padding: 20px;
	font-size: 25px;
	color: blue;
	width: 300px;
	height: 50px;
	background: darkslategrey;
	border: 1px solid orange;
}

.ex-38 .ex-38-def{
	opacity: 0.5;
}

.ex-38 .ex-38-1{
	-ms-transform: translate(35px,-70px);  /* IE 9 */
    -webkit-transform: translate(35px,-70px);  /* webkit */
	-moz-transform: translate(35px,-70px);  /* Firefox */
    transform: translate(35px,-70px);
}

.ex-38 .ex-38-2{
	-ms-transform: translateX(35px);  /* IE 9 */
    -webkit-transform: translateX(35px);  /* webkit */
	-moz-transform: translateX(35px);  /* Firefox */
    transform: translateX(35px);
	
	margin-bottom: 30px;
}

.ex-38 .ex-38-3{
	-ms-transform: translateY(-70px);  /* IE 9 */
    -webkit-transform: translateY(-70px);  /* webkit */
	-moz-transform: translateY(-70px);  /* Firefox */
    transform: translateY(-70px);
}

.ex-38 .ex-38-4{
	-ms-transform: translate(50%);  /* IE 9 */
    -webkit-transform: translate(50%);  /* webkit */
	-moz-transform: translate(50%);  /* Firefox */
    transform: translate(50%);
}

/*Example 39*/
.ex-39 div{
	padding: 20px;
	font-size: 25px;
	color: blue;
	width: 300px;
	height: 50px;
	background: black;
	border: 1px solid orange;
	margin-bottom: 30px;
}

.ex-39 .ex-39-def{
	opacity: 0.5;
}

.ex-39 .ex-39-1{
	-ms-transform: skew(201deg,10deg);  /* IE 9 */
    -webkit-transform: skew(201deg,10deg);  /* webkit */
	-moz-transform: skew(201deg,10deg);  /* Firefox */
    transform: skew(201deg,10deg);
}

.ex-39 .ex-39-2{
	-ms-transform: skewX(201deg);  /* IE 9 */
    -webkit-transform: skewX(201deg);  /* webkit */
	-moz-transform: skewX(201deg);  /* Firefox */
    transform: skewX(201deg);
}

.ex-39 .ex-39-3{
	-ms-transform: skewY(10deg);  /* IE 9 */
    -webkit-transform: skewY(10deg);  /* webkit */
	-moz-transform: skewY(10deg);  /* Firefox */
    transform: skewY(10deg);
}

.ex-39 .ex-39-4{
	-ms-transform: skew(-210deg);  /* IE 9 */
    -webkit-transform: skew(-210deg);  /* webkit */
	-moz-transform: skew(-210deg);  /* Firefox */
    transform: skew(-210deg);
}

.ex-39 .ex-39-5{
	margin-top: 150px;

	-ms-transform: skew(15deg, -15deg);  /* IE 9 */
    -webkit-transform: skew(15deg, -15deg);  /* webkit */
	-moz-transform: skew(15deg, -15deg);  /* Firefox */
    transform: skew(15deg, -15deg);
}

.ex-39 .ex-39-6{
	-ms-transform: rotate(-15deg);  /* IE 9 */
    -webkit-transform: rotate(-15deg);  /* webkit */
	-moz-transform: rotate(-15deg);  /* Firefox */
    transform: rotate(-15deg);
}

/*Example 40*/
.ex-40 div{
	padding: 20px;
	font-size: 25px;
	color: green;
	width: 300px;
	height: 50px;
	background: orange;
	border: 1px solid blue;
	margin: 0px auto;
}

.ex-40 .block-space {
	margin: 110px 0 25px;
	height: 4px;
	padding: 0;
	width: 100%;
	background: red;
}

.ex-40 .ex-40-def{
	opacity: 0.5;
}

.ex-40 .ex-40-1{
	-ms-transform: scale(2,3);  /* IE 9 */
    -webkit-transform: scale(2,3);  /* webkit */
	-moz-transform: scale(2,3);  /* Firefox */
    transform: scale(2,3);
	
	margin-top: 105px;
}

.ex-40 .ex-40-2{
	-ms-transform: scaleX(0.5);  /* IE 9 */
    -webkit-transform: scaleX(0.5);  /* webkit */
	-moz-transform: scaleX(0.5);  /* Firefox */
    transform: scaleX(0.5);
}

.ex-40 .ex-40-3{
	-ms-transform: scaleY(0.8);  /* IE 9 */
    -webkit-transform: scaleY(0.8);  /* webkit */
	-moz-transform: scaleY(0.8);  /* Firefox */
    transform: scaleY(0.8);
}

.ex-40 .ex-40-4{
	-ms-transform: scale(1.5);  /* IE 9 */
    -webkit-transform: scale(1.5);  /* webkit */
	-moz-transform: scale(1.5);  /* Firefox */
    transform: scale(1.5);
	
	margin-top: 44px;
}

.ex-40 .ex-40-5{
	-ms-transform: scale(1.4, -1.4);  /* IE 9 */
    -webkit-transform: scale(1.4, -1.4);  /* webkit */
	-moz-transform: scale(1.4, -1.4);  /* Firefox */
    transform: scale(1.4, -1.4);
	
	margin-top: 33px;
}

/*Example 41*/
.ex-41 div{
	padding: 20px;
	font-size: 25px;
	color: green;
	width: 300px;
	height: 50px;
	background: orange;
	border: 1px solid blue;
	margin: 105px auto 0;
}

.ex-41 .block-space {
	margin: 110px 0 25px;
	height: 4px;
	padding: 0;
	width: 100%;
	background: red;
}

.ex-41 .ex-41-def{
	opacity: 0.5;
}

.ex-41 .ex-41-1{
	-ms-transform: scale(1.5) rotate(10deg) translateY(30px);  /* IE 9 */
    -webkit-transform: scale(1.5) rotate(10deg) translateY(30px);  /* webkit */
	-moz-transform: scale(1.5) rotate(10deg) translateY(30px);  /* Firefox */
    transform: scale(1.5) rotate(10deg) translateY(30px);
}

.ex-41 .ex-41-2{
	-ms-transform: matrix(2,0,0,2,0,0);  /* IE 9 */
    -webkit-transform: matrix(2,0,0,2,0,0);  /* webkit */
	-moz-transform: matrix(2,0,0,2,0,0);  /* Firefox */
    transform: matrix(2,0,0,2,0,0);
}

.ex-41 .ex-41-3{
	-ms-transform: matrix(2,0,0,2,-171,-59);  /* IE 9 */
    -webkit-transform: matrix(2,0,0,2,-171,-59);  /* webkit */
	-moz-transform: matrix(2,0,0,2,-171px,-59px);  /* Firefox */
    transform: matrix(2,0,0,2,-171,-59);
}

.ex-41 .ex-41-4{
	-ms-transform: matrix(2,0.30,0.60,2,0,0);  /* IE 9 */
    -webkit-transform: matrix(2,0.30,0.60,2,0,0);  /* webkit */
	-moz-transform: matrix(2,0.30,0.60,2,0,0);  /* Firefox */
    transform: matrix(2,0.30,0.60,2,0,0);
}

.ex-41 .ex-41-5{
	-ms-transform: matrix(-0.014,1.166,1.387,0.009,103.344,-168.730);/* IE 9 */
	-webkit-transform: matrix(-0.014,1.166,1.387,0.009,103.344,-168.730); /* webkit */
	-moz-transform: matrix(-0.014,1.166,1.387,0.009,103.344px,-168.730px); /* Firefox */
	transform: matrix(-0.014,1.166,1.387,0.009,103.344,-168.730);
	
	margin-top: 400px;
}

/*Example 42*/
.ex-42 div{
	padding: 20px;
	font-size: 25px;
	color: green;
	width: 300px;
	height: 50px;
	background: orange;
	border: 1px solid blue;
	margin: 50px auto 0;
}

/*example 1*/
.ex-42 .ex-42-1{
	transition: background-color 2s;
}

.ex-42 .ex-42-1:hover{
	background-color: silver;
}

/*example 2*/
.ex-42 .ex-42-2{
	transition-property: width, background-color;
    transition-duration: 2s;
}

.ex-42 .ex-42-2:hover{
	background-color: red;
	width: 600px;
}

/*example 3*/
.ex-42 .ex-42-3{
	/*transition-property: all; Default */ 
    transition-duration: 2s;
}

.ex-42 .ex-42-3:hover{
	background-color: silver;
	width: 600px;
	font-size: 12px;
	height: 100px;
}

/*example 4*/
.ex-42 .ex-42-4{
	transition-property: width, background-color;
    transition-duration: 2s, 5250ms;
}

.ex-42 .ex-42-4:hover{
	background-color: blue;
	width: 400px;
}

/*example 5*/
.ex-42 .ex-42-5{
    transition-duration: 4s;
	transition-timing-function: ease-in-out;
}

.ex-42 .ex-42-5:hover{
	background-color: brown;
	width: 600px;
}

/*example 6*/
.ex-42 .ex-42-6{
    transition-duration: 4s;
	transition-timing-function: cubic-bezier(1,1.89,1,-0.4);
}

.ex-42 .ex-42-6:hover{
	background-color: brown;
	width: 600px;
}

/*example 7*/
.ex-42 .ex-42-7{
	transition-property: width, background-color;
    transition-duration: 4s;
	transition-timing-function: ease-in-out, cubic-bezier(.44,1.89,0,-0.65);
}

.ex-42 .ex-42-7:hover{
	background-color: brown;
	width: 600px;
}

/*example 8*/
.ex-42 .ex-42-8{
    transition-duration: 4s;
	transition-timing-function: ease-in-out;
	transition-delay: 2s;
}

.ex-42 .ex-42-8:hover{
	background-color: yellow;
	width: 600px;
}

/*example 9*/
.ex-42 .ex-42-9{
    transition-duration: 4s;
	transition-timing-function: ease-in-out;
	transition-delay: -2s;
}

.ex-42 .ex-42-9:hover{
	background-color: yellow;
	width: 600px;
}

/*example 10*/
.ex-42 .ex-42-10{
	transition: all 4s ease-in-out 2s;
}

.ex-42 .ex-42-10:hover{
	background-color: yellow;
	width: 600px;
}

/*example 11*/
.ex-42 .ex-42-11{
	transition:background-color 2s ease 1s, 
			   width 4s ease, 
			   font-size 6s ease-in-out;
}

.ex-42 .ex-42-11:hover{
	background-color: yellow;
	width: 600px;
	font-size: 15px;
}

/*example 12*/
.ex-42 .ex-42-12{
	transition: all 4s;
}

.ex-42 .ex-42-12:hover{
	background-color: yellow;
	color: blue;
	width: 600px;
	-webkit-transform: rotate(180deg) scale(1.2);
    transform: rotate(180deg) scale(1.2);
}

/*Example 43*/
.ex-43 div{
	padding: 20px;
	font-size: 25px;
	color: green;
	width: 300px;
	height: 50px;
	background: orange;
	border: 1px solid blue;
	margin: 50px auto 0;
}

/*example 1*/
.ex-43 .ex-43-1{
	-webkit-animation: animate-example-43-1 5s linear 100ms infinite alternate;
	animation: animate-example-43-1 5s linear 100ms infinite alternate;
}

@-webkit-keyframes animate-example-43-1 {
	from {
		background-color: orange;
		color: green;
	}
    to {
		background-color: blue;
		color: red;
	}
}

@keyframes animate-example-43-1 {
	from {
		background-color: orange;
		color: green;
	}
    to {
		background-color: blue;
		color: red;
	}
}

/*example 2*/
.ex-43 .ex-43-2{
	-webkit-animation: animate-example-43-2 5s linear 100ms infinite alternate;
	animation: animate-example-43-2 5s linear 100ms infinite alternate;
}

@-webkit-keyframes animate-example-43-2 {
	0% {
		background-color: orange;
	}
	
	25% {
		color: green;
	}
	
	50%{
		font-size: 25px;
		color: white;
	}
	
	75%{
		font-size: 20px;
	}
	
    100% {
		background-color: black;
		color: red;
		font-size: 30px;
	}
}

@keyframes animate-example-43-2 {
	0% {
		background-color: orange;
	}
	
	25% {
		color: green;
	}
	
	50%{
		font-size: 25px;
		color: white;
	}
	
	75%{
		font-size: 20px;
	}
	
    100% {
		background-color: black;
		color: red;
		font-size: 30px;
	}
}

/*Example 44*/
.ex-44 div{
	padding: 20px;
	font-size: 25px;
	color: green;
	width: 300px;
	height: 50px;
	background: orange;
	border: 1px solid blue;
	margin: 50px auto 0;
}

/*example 1 Call animation animate-example-44-1 */
.ex-44 .ex-44-1{
	-webkit-animation-name: animate-example-44-1;
	-webkit-animation-duration: 6s;
	animation-name: animate-example-44-1;
	animation-duration: 6s;
}

/*example 2 Call animation animate-example-44-1 too but with timing function*/
.ex-44 .ex-44-2{
	-webkit-animation-name: animate-example-44-1;
	-webkit-animation-duration: 6s;
	-webkit-animation-timing-function: ease-in;
	animation-name: animate-example-44-1;
	animation-duration: 6s;
	animation-timing-function: ease-in;
}

/*example 3 Call animation animate-example-44-1 too but with delay function*/
.ex-44 .ex-44-3{
	-webkit-animation-name: animate-example-44-1;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: -10;
	animation-name: animate-example-44-1;
	animation-duration: 4s;
	animation-timing-function: ease-in;
	animation-delay: 2s;
}

@-webkit-keyframes animate-example-44-1 {
	from {
		background-color: orange;
		color: green;
	}
    to {
		background-color: blue;
		color: red;
	}
}

@keyframes animate-example-44-1 {
	from {
		background-color: orange;
		color: green;
	}
    to {
		background-color: blue;
		color: red;
	}
}

/*example 4 */
.ex-44 .ex-44-4{
	-webkit-animation-name: animate-example-44-4;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 3;
	animation-name: animate-example-44-4;
	animation-duration: 4s;
	animation-iteration-count: 3;
}

/*example 5 Call animation animate-example-44-4 too but with infinite value*/
.ex-44 .ex-44-5{
	-webkit-animation-name: animate-example-44-4;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	animation-name: animate-example-44-4;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

/*example 6 Call animation animate-example-44-4 too but with animation-direction: Reverse*/
.ex-44 .ex-44-6{
	-webkit-animation-name: animate-example-44-4;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 3;
	-webkit-animation-direction: reverse;
	animation-name: animate-example-44-4;
	animation-duration: 4s;
	animation-iteration-count: 3;
	animation-direction: reverse;
}

/*example 7 Call animation animate-example-44-4 too but with animation-direction: alternate*/
.ex-44 .ex-44-7{
	-webkit-animation-name: animate-example-44-4;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 4;
	-webkit-animation-direction: alternate;
	animation-name: animate-example-44-4;
	animation-duration: 4s;
	animation-iteration-count: 4;
	animation-direction: alternate;
}

/*example 8 Call animation animate-example-44-4 too but with play-state */
.ex-44 .ex-44-8{
	-webkit-animation-name: animate-example-44-4;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-name: animate-example-44-4;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.ex-44 .ex-44-8:hover{
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

@-webkit-keyframes animate-example-44-4 {
	from {
		background-color: orange;
		margin-left: 0px;
	}
	
	50%{
		background-color: black;
	}
	
    to {
		background-color: yellow;
		margin-left: 800px;
	}
}

@keyframes animate-example-44-4 {
	from {
		background-color: orange;
		margin-left: 0px;
	}
	
	50%{
		background-color: black;
	}
	
    to {
		background-color: yellow;
		margin-left: 800px;
	}
}

/*example 9 Call animation animate-example-44-9 too but with animation-fill-mode*/
.ex-44 .ex-44-9{
	-webkit-animation-name: animate-example-44-9;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-fill-mode: forwards;
	animation-name: animate-example-44-9;
	animation-duration: 4s;
	animation-iteration-count: 2;
	animation-fill-mode: forwards;
}

.ex-44 .ex-44-10{
	-webkit-animation-name: animate-example-44-9;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
	-webkit-animation-fill-mode: forwards;
	animation-name: animate-example-44-9;
	animation-duration: 4s;
	animation-iteration-count: 2;
	animation-direction: alternate;
	animation-fill-mode: forwards;
}

/*examples for shorthand animation */
.ex-44 .ex-44-11{
	-webkit-animation: animate-example-44-9 4s ease 0s 2 alternate forwards running;
	animation: animate-example-44-9 4s ease 0s 2 alternate forwards running;
}

.ex-44 .ex-44-12{
	-webkit-animation: animate-example-44-9 4s 0s 2 alternate forwards;
	animation: animate-example-44-9 4s 0s 2 alternate forwards;
}

.ex-44 .ex-44-13{
	-webkit-animation: animate-example-44-9 2s 1s backwards;
	animation: animate-example-44-9 2s 1s backwards;
}

/*example for call multiple animation */
.ex-44 .ex-44-14{
	-webkit-animation: animate-example-44-9 4s 0s 5 alternate,
					   animate-example-44-14 4s forwards;
	animation: 		   animate-example-44-9 4s 0s 5 alternate,
			           animate-example-44-14 4s forwards;
}

@-webkit-keyframes animate-example-44-9 {
	from {
		background-color: gray;
		margin-left: 0px;
	}
	
	50%{
		background-color: black;
	}
	
    to {
		background-color: yellow;
		margin-left: 800px;
	}
}

@keyframes animate-example-44-9 {
	from {
		background-color: gray;
		margin-left: 0px;
	}
	
	50%{
		background-color: black;
	}
	
    to {
		background-color: yellow;
		margin-left: 800px;
	}
}

@-webkit-keyframes animate-example-44-14 {
	from {
		color: brown;
		border: 3px solid green;
	}
	
    to {
		color: red;
		border: 8px solid red;
	}
}

@keyframes animate-example-44-14 {
	from {
		color: brown;
		border: 3px solid green;
	}
	
    to {
		color: red;
		border: 8px solid red;
	}
}

/*Example 45*/
.ex-45 div{
	padding: 20px;
	font-size: 25px;
	color: orange;
	width: 39%;
	height: 50px;
	background: black;
	border: 1px solid blue;
	margin: 3%;
	float: left;
}

.ex-45 .btnLink{
	display: inline-block;
	background: gray;
	color: white;
	padding: 20px;
	text-decoration: none;
}

/*example 1 */
.ex-45 .ex-45-1{
	-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(0deg);
}

.ex-45 .ex-45-2{
	-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(0deg);
	transform-style: preserve-3d;
}

.ex-45 .ex-45-3{
	-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
    transform: rotateY(0deg);
}

.ex-45 .ex-45-4{
	-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(0deg);
	transform-style: preserve-3d;
}

.ex-45 .child {
	background: red;
	width: 30px;
	margin: 0;
	padding: 10px;
	-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
	-webkit-transform-origin: 40% 90% 10px;
	transform: rotateY(60deg); 
	transform-origin: 40% 90% 10px;
}

/*Example 46*/
.ex-46 div{
	padding: 20px;
	font-size: 25px;
	color: orange;
	width: 39%;
	height: 50px;
	background: black;
	border: 1px solid blue;
	margin: 3% auto;
}

.ex-46 .btnLink{
	display: inline-block;
	background: gray;
	color: white;
	padding: 20px;
	text-decoration: none;
}

/*example 1 2D */
.ex-46 .ex-46-1{
	-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

/*example 2 3D */
.ex-46 .ex-46-2{
	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); /* Chrome, Safari, Opera */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

/*Example 47*/
.ex-47 div{
	padding: 20px;
	font-size: 25px;
	color: orange;
	width: 39%;
	height: auto;
	background: black;
	border: 1px solid blue;
	margin: 3% auto;
}

.ex-47 .btnLink{
	display: inline-block;
	background: gray;
	color: white;
	padding: 20px;
	text-decoration: none;
}

/*example 1 2D */
.ex-47 .ex-47-1{
	-webkit-perspective: 0; /* Chrome, Safari, Opera */
    perspective: 0;
}

/*example 2 3D */
.ex-47 .ex-47-2{
	-webkit-perspective: 0; /* Chrome, Safari, Opera */
    perspective: 0;
}
