@charset "utf-8";
/* CSS Document */
body{ margin:0; padding:0; font-family:Myriad Pro; font-size:12px; background-color:#FFF;}
section{ height:auto; }
aside{ height:auto; }
.clear{ clear:both;}
#wrapper{ width:100%; height:auto; float:left; }
header{ width:100%; float:left; height:640px; background-image:url(../image/bg.jpg); background-size: 100%;}
#top{ width:100%; height:5%; background-color:#045f1a; float:left;}
#top_1{ width:32%; float:right; height:5%; }
#top_1 ul{ list-style:none; margin:0; padding:0;}
#top_1 ul li{ text-decoration:none; color:#FFF; float:left; padding-top: 2%; padding-left: 1%; font-size:12px; }
#top_1 ul li a{ color:#FFF; text-decoration:none;}
#logo{ width:100%; background-color:rgba(255,255,255,0.7); height:20%; float:left;}
#logo_1{ width:50%; height:100%; float:left; }
#logo_1 img{ margin-left:2%; width:66%;   margin-top: 1%; height:auto;}
#logo_2{ width:50%; height:100%; float:left; }
#logo_2_top{ width:100%; height:69%; float:left;}
#logo_2_top_1{ width:50%; height:100%; float:left; }
#logo_2_top_1 img{ float:right; margin-top:4%; margin-right:4%}
#logo_2_top_2{ width:50%; height:100%; float:left; margin-left:0%; }
#logo_2_top_2_1{ width:100%; height:50%; float:left; margin-top:1%;}
#logo_2_top_2_2{ width:100%; height:50%; float:left; margin-top:-4%;}
#logo_2_top_2_1 img{ margin-top:4%; float:left}
#logo_2_top_2_2 img{ margin-top:6%; float:left}
.text{ font-size:20px; padding:5%; float:left; color:#045f1a;}
nav{ width:90%; height:31%; float:left; margin-left:8%;   margin-top: 0.3%;}
nav ul{ list-style:none; margin:0; margin-left:0%; padding:0;}
nav ul li{ float:left; font-size:15px; color:#045f1a;}
#li_1{ width:22%; height:35px; line-height:35px; background-color:#ffcc00; margin-left:2%; border-top:4px #045f1a solid; border-radius:6%; text-align:center;}
#li_1 img{ margin-top:0%; margin-left:1%;}
.li_2{ width:26%; height:35px; line-height:35px; background-color:#ffcc00; border-top:4px #045f1a solid; border-radius:6%; margin-left:2%; text-align:center;}
.li_2:hover { color:#FFF;}
#li_3{ width:18%; height:35px; line-height:35px; background-color:#ffcc00; border-top:4px #045f1a solid; border-radius:6%; margin-left:2%; text-align:center;}
#li_3:hover { color:#FFF;}
#box{ width:100%; height:300px; float:left; margin-top:10%}
#box_1{ width:80%; height:300px; margin-left:auto; margin-right:auto;}
.box{ width:19.55%; height:217px; background-color:#045f1a; float:left; margin-left:4%; border:#FFF 2px solid; border-radius:4%; transition: 0.5s all ease;}
.box:hover ,.box:hover .box_text1_1 { color:#FFF; box-shadow: #6F6F6F 1px 15px 40px;
  transform: scale(1.01);
  -webkit-transform: scale(1.01);}
.box_img{ width:100%; height:76%; float:left; border-radius:4.5%;}
.box_img img{ border-radius:3%;}
.box_text{ width:100%; height:18%; float:left; font-size:16px; color:#FFF; line-height:18%; text-align:center; margin-top:4%;}
.box_text1{ width:100%; height:6%; float:left;}
.box_text1_1{width: 50%;
height: 273%;
background-color: #ffcc00;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 200%;
margin-top: -7%;
font-size: 19px;
color: #045f1a;
border-radius: 10%; 
transition: 0.5s all ease;}
.box a{ text-decoration:none}
#box_2{ width:100%; height:50px; background-color:#393939; border-bottom:4px #ffcc00 solid; border-top:4px #ffcc00 solid; }
#box_2 ul{ list-style:none;}
#box_2 ul li{ float:left; padding-left:3%; font-size:24px; color:#ffcc00; text-decoration:none;}
#box_2 ul li a{ color:#FFFFFF; font-size:16px; text-decoration:none;}
#box_2_1{ width:60%; height:70%; float:left; margin-left:7%; margin-top:0.9%;} 
#box_2_1 ul{ margin:0; padding:0;}
#box_2_2{ width:20%; height:100%; float:left; margin-top:0.3%; background-color:#ec2327; border-radius:10%; }
#box_2_2 img{ margin-left:3%; margin-top:3%; float:left}
#box_2_2_text{ float:left; font-size:18px; color:#FFF; margin-bottom:4%; margin-top:4%; margin-left:4%; margin-right:4%; }
#box_3{ width:100%; height:auto; float:left; margin-top:3%}
#box_3_1{ width:70%; height:65%; float:left; margin-left:5%; }
#box_3_2{ width:26%; height:300px; background-color:#ffcc00; border-radius:5%; float:right; margin-top:3%; margin-bottom:2%; margin-right:-3%;}
#box_3_2 ul{ list-style:url(../image/tree.png);}
#box_3_2 ul li{ margin-top:3%;}
#box_3_21 ul{ list-style:url(../image/tree.png);}
#box_3_21 ul li{ margin-top:1%;}
#box_3_21{ width:26%; height:300px; background-color:#ffcc00; border-radius:5%; float:right; margin-top:3%; margin-bottom:2%;}
#box_4{ width:100%; height:auto; float:left; margin-top:2%}
#box_4_1{ width:90%; height:auto; position:relative; margin-left:auto; margin-right:auto;}
#box_4_1_1{ width:71%; height:auto; float:left; }
#box_4_1_11{ width:100%; height:270px; margin-bottom:4%; float:left;}
#box_4_1_1_1{ width:100%; height:250px; border:4px #555555 solid; border-radius:3%; background-color:#FFF; float:left;}
#box_4_1_1_1_1{ width:100%; height:15%; float:left; margin-top:-4%; margin-left:-0.5%;}
#box_4_1_1_1_1 ul{ list-style:none; margin:0; padding:0;}
#box_4_1_1_1_1 ul li{ float:left; width:15%; height:37px; font-size:18px; color:#045f1a; line-height:42px; text-align:center; background-color:#ffcc00; margin-right:2%; border-radius:6%;}
#box_4_1_1_1_2{ width:100%; height:85%; float:left; margin-top:3%;}
.box_4_1_1_1_2_1{ width:32%; height:100%; float:left; margin-left:1%;}
.box_4_1_1_1_2_1_1{ width:100%; height:48%; float:left; margin-bottom:1%;}
.box_4_1_1_1_2_1_1_1{ width:25%; height:100%; float:left;}
.box_4_1_1_1_2_1_1_1_1{ width:90%; height:70%; background-color:#ffcc00; border:2px #045f1a solid; border-radius:10%;}
.box_4_1_1_1_2_1_1_1_1_1{ width:100%; height:50%; float:left; text-align:center; font-size:18px; color:#045f1a;}
.box_4_1_1_1_2_1_1_1_1_2{ width:100%; height:50%; background-color:#045f1a; float:left; text-align:center; font-size:18px; color:#ffcc00;}
.box_4_1_1_1_2_1_1_2{width:72%; height:100%; float:left; margin-left:3%}
#box_4_1_1_2{ width:100%; height:auto; float:left; margin-top:1%;}
#box_4_1_1_2_1{ width:100%; height:100%; background-color:#fff; border-bottom:2px #ffcc00 solid; border-left:2px #ffcc00 solid; border-right:2px #ffcc00 solid; border-top:9px #ffcc00 solid; border-radius:2%; box-shadow:rgba(102,102,102,0.8) 3px 7px 18px 4px;   margin-bottom: 2%;}
#box_4_1_1_2_1 a{ font-size:18px; color:#045f1a; text-align:center; text-decoration:none;}
#box_4_1_2{ width:27%; height:auto; border-radius: 4%; float:left; margin-left:0%;}
#box_4_1_2_1{ width:100%; margin-left:9%; height:45px; background-color:#045f1a; border-radius: 16%; float:left;}
#box_4_1_2_2{ width:100%; height:100%; float:left; margin-left:11%;}
.lable{ font-size:17px; margin-top:2%;}
#box_4_1_2_2 input{ width:93%; height:26px;}
#box_4_1_2_2 select{ width:97%; height:33px;}
#box_5{ width:100%; height:70px; background-color:#045f1a; margin-bottom:2%;}
.box_5_1{ width:25%; height:100%; float:left;}
.box_5_1_img{ width:19%; height:100%; float:left; padding-top:2.5%;}
.box_5_1_left{ margin-left:-18%}
#box_6{ width:100%; height:250px; float:left;}
#box_6_1{ width:90%; height:100%; margin-left:auto; margin-right:auto;}
.box6{ width:29%; height:100%; border-radius:7%; position:relative; overflow:hidden; float:left; background-color:#ffcc00; margin-left:3%;}
.box6 img{ margin-left:3%;}
.text_2{ padding-left:1%; padding-right:1%;}
.box6 iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}
footer{ width:100%; height:243px; float:left; background-color:#f3f3f3; margin-top:3%;}
#footer_1{ width:40%; height:100%; float:left;}
#footer_1_logo{ width:60%; height:100%; float:left;}
#footer_1_logo img{ margin-left:15%; margin-top:28%;}
#footer_1_about{ width:40%; height:90%; float:left; padding-top:3%;}
#footer_1_about ul{ list-style:url(../image/tree.png); margin-top:2%;}
#footer_1_about ul li{ width:100%; color:#646464; font-size:14px; margin-left:-2%; margin-top:6%; }
#footer_2{ width:60%; height:100%; float:left;}
#footer_2_1{ width:50%; height:100%; float:left; padding-top:1%;}
#footer_2_2{ width:50%; height:100%; float:left;}
#footer_2_2_1{ width:100%; height:40%; float:left; margin-top:1%;}
#footer_2_2_2{ width:100%; height:55%; float:left;}
#footer_2_2_2 input{ width:80%; height:30px; margin-left:4%;}
#footer_img{ width:90%; float:left; margin-left:4%; margin-top:2%; }
#footer_img a{ margin-left:1%;}
#end{ width:100%; height:50px; background-color:#045f1a; float:left;}
#end_1{ width:50%; height:100%; float:left;}
#end_2{ width:50%; height:100%; float:left;}
h4{ font-size:20px; color:#045f1a; margin:0; padding:0; } 
#text{ font-size:13px;}
#text_1{ font-size:16px; color:rgba(102,102,102,0.8)}
#text_2{ font-size:14px; color:#000; }
#text_3{ font-size:18px; color:#FFF; margin:0; margin-left:10%;}
#text_4{ width:70%; font-size:13px; color:rgba( 102,102,102,0.8); margin-left:5%; }
#text_5{ font-size:24px; color:#959595; margin-left:5%;}
#text_6{ font-size:12px; color:#fff; margin-top: 3%; margin-left: 4%;}
#text_7{ font-size:12px; color:#fff; float:right; margin-top:3%; margin-right:5%;}
#text_8{ font-size:15px; color:rgba( 102,102,102,0.8); margin-left:2%; margin-right:2%;}
#text_9{ font-size:16px; color:#045f1a; float:right; margin-right:5%;}
.text_1{  font-size:24px; color:#fff; margin:0; padding:0; margin-top:6%;}
.a_text{ font-size: 19px;
  color: #045f1a; }
.a_text1{ font-size:12px;}
p{ margin:5px; padding:0;}
h2{ font-size: 32px;
color: #045f1a;
margin: 0;
margin-left: 1%;
margin-top: 1%;}
h3{ font-size: 25px;
color: #045f1a;
margin: 0;
margin-left:4%;
margin-top:3%;}
h5{ font-size:30px; color:#ffcc00; margin:0; margin-left:16%; padding-top:4%;}
.btn{  border: #045f1a 1px solid;
  border-radius: 2px;
  padding: 4px 4px;
  color: #045f1a;
  transition: 0.3s ease-in;
  text-decoration: none;}
.btn:hover{ background: none repeat scroll 0 0 #ffcc00;
  box-shadow: 3px 0px 4px #ffcc00;
  border-radius: 2px;
  padding: 4px 4px;
  transition: 0.3s ease-in;
  color: #FFF;}
.btns{ background-color:aliceblue; border:none; margin:2%;}
#about{ width:100%; height:auto; background-color:rgba(243,243,243,1.0); float:left; margin-top:-23%;}
.about_text1{ font-size:21px;}
#about_1{ width:90%; height:auto; background-color:rgba(255,255,255,0.7); margin-left:auto; margin-right:auto;}
#about_1_1{ width:72%; height:auto; float:left; margin-bottom:2%;}
#about_1_2{ width:72%; height:auto;  background-color:rgba(243,243,243,0.9); float:left; margin-bottom:2%; position:relative; z-index:10;}
#about_span{ float: left;
  margin-top: -54%;
  width: 100%;
  margin-left: 3%;
  position:relative;
  z-index:9;}
.about_row{ width:29%; height:auto; float:left; margin-left:3.2%; margin-top:2%;}
.about_row1{ width:29%; height:auto; float:left; margin-left:3.2%; margin-top:3%;}
.about_row_1{ width:100%; height:auto; float:left; margin-top:1%; }
.about_row_img{ width:100%; height:auto; float:left;}
.about_row_img img{ width:98%; height:auto; border:#FFF 2px solid}
.about_text{ width:100%; height:auto; float:left;}
.about_top{ margin-top:6%;}
#about5{   width: 26%;
  height: 337px;
  border-radius: 5%;
  float: right;
  margin-top: 3%;
  margin-bottom: 2%;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;}
#about5 a{ color:#045f1a}
#about_p{  color: #045f1a;
  font-size: 26px;
  margin-top: -10%;
  margin-left: 2%;
}
.about_read{ border: #045f1a 1px solid;
  border-radius: 2px;
  background-color: #ffcc00;
  padding: 5px 8px;
  color: #045f1a !important;
  transition: 0.3s ease-in;
  text-decoration: none;
  width: 39%;
  text-align: center;
  height: 21px;}
.about_read a{color: #045f1a !important;}
.about_read:hover a{ background: none repeat scroll 0 0 #ffcc00;
  box-shadow: 3px 0px 4px #ffcc00;
  border-radius: 2px;
  padding: 5px 8px;
  transition: 0.3s ease-in;
  color: #FFF;
  text-decoration:none;}
.about5_read {   width: 95%;
  height: 32px;
  background-color: #ffcc00;
  font-size: 16px;
  text-align: center;
  padding-top: 4%;
  border-top: #045f1a 4px solid;
  border-radius: 10px;
  margin-bottom: 1%;
  margin-top: 2%;
  margin-left: 2%;
 }
#about5 a:hover{ color:#FFF; text-decoration:none;}
#tour_li{ width:23%; height:600px; float:left; margin-left:4%; }
#tour_row{ width:72%; height:auto; float:left; margin-bottom:2%;}
#list{ width:75%; height:400px; float:left; background-color:#906;} 
#list h4{ font-size:19px; color:#045f1a;}
#list ul{ margin:0; padding:0;}
#list li{background: none repeat scroll 0 0 #ebebeb;
  box-shadow: 3px 0px 4px;
  border-radius: 2px;
  padding: 14px 23px;
  color:#045f1a; }
#Our{ width:58%;
	background: none repeat scroll 0 0 #ebebeb;
  box-shadow: 3px 0px 4px;
  border-radius: 2px;
  padding: 14px 23px;
  color:#045f1a; }
#list a{ color:#045f1a; text-decoration:none;}
#list  li:hover{ color:#ffcc00;}
#tour_li ul{ list-style:none; margin:0; padding:0;}
#sliderbanner{ width:97.5%; height:250px; background-color:rgba(243,243,243,0.9); margin-left:1%; margin-right:1%; float:left; border: 3px #045f1a solid;
  border-radius: 2.5%;}
#requestcallback{ width:25%; float:left; height:278px; margin-bottom:5%; border-radius:5%; background-color:#ec2327; margin-left:3%; margin-top:5%;} 
#requestcallback_img{ width:20%; height:auto; float: left;margin-top:26%;margin-left: 6%; margin-right: 4%;}
#requestcallback_img img{ width:100%; height:auto;}
#requestcallback_text{ width:70%; height:200px; float:left; margin-top:6%;}
#text_req{ font-size:37px; color:#ffcc00; }
#text1_req{ font-size:28px; color:#FFF; margin-left:14%;}
#honey{ width:100%; height:auto; float:left;}
.honey_1{ margin-top:2%; margin-left:0%; padding-bottom:2%; border-bottom: #ffcc00 3px solid; }
#honey_1{ width:100%; height:60px; float:left; margin-top:2%;   border-bottom: #ffcc00 3px solid;}
.honey_1_1{ width:9.5%; height:29px; border:#ffcc00 1px solid; float:left; margin-left:2.5%; margin-top:1%; transition: 0.7s ease-in;}
.honey_1_1:hover{ background-color:#ffcc00; border:#045f1a 1px solid;}
.honey_1_1:hover p{ color:#FFF;}
.honey_1_1 p{ padding:0; margin-left:20%; margin-top:6%; color:#045f1a; transition: 0.7s ease-in;}
.honey_row{ width:94%; height:202px; float:left; margin-top:2%; margin-left:3%; margin-right:auto; border: 3px #045f1a solid; border-radius: 2.5%; transition: 0.5s all ease;}
.honey_row:hover {box-shadow: #6F6F6F 1px 15px 40px;
  transform: scale(1.01);
  -webkit-transform: scale(1.01);}
.honey_row_1{ width:98%; height:55px; float:left; margin-left:2%; margin-top:2%;}
.honey_row_text{ font-size:18px; margin-left:1%; font-family:Arial, Helvetica, sans-serif;  color:#ffcc00;}
.honey_row_text1{ font-size:13px; margin-left:2%;}
.honey_row_2{ width:100%; height:100px; float:left; border-top: 1px #ccc solid; padding-top: 0.5%;}
.honey_row_img1{  height:100px; margin-left:2%; float:left;}
.honey_row_img1 img { width:100%; height:auto;}
.honey_row_2_1{ width:63%; height:147px; float:left;}
.honey_row_2_1_1{width:60%; height:147px; float:left;}
.honey_row_2_1_2{ width:40%; height:97px; padding-top:5%; float:left;}
.honey_row_2_1_1_1{ width:61%; height:84px; margin-right:7%; margin-top:7%; border:#ffcc00 1px solid; float:right;}
.honey_row_text2{ font-size:13px;}
.honey_row_text3{ font-size:32px; color:#045f1a; margin-left:4%;}
.honey_row_text4{ font-size:12px; float:right; margin-top:-3%;}
.honey_read a{ border: #045f1a 1px solid;
  border-radius: 2px;
  padding: 8px 60px;
  color: #045f1a;
  transition: 0.7s ease-in;
  text-decoration: none;
  background: none repeat scroll 0 0 #ffcc00;}
.honey_read:hover a{ color:#FFF; box-shadow: 3px 0px 4px #ffcc00;}
#view_row{width:72%; height:auto; float:left; margin-bottom:2%;}
.viewslider{ width:100%; height:auto; float:left; margin-top:2x%;  
overflow:hidden; margin-top:2%; margin-bottom:-2%;}
.viewstext{ font-size:17px;}
#viewsreq{ width:90%; height:55px; border:3px #045f1a solid; float:left; position:relative; margin-left:5%; z-index:1001; margin-top:-7%; border-radius:10%; background:-webkit-radial-gradient(white 21%, rgba( 255,204,0,0.7) );}
#viewsreq_1{ width:50%; height:40px; float:left; font-size:25px; color:#045f1a; padding-left:10%; padding-top:10px;}
#viewsreq_2{ width:40%; height:50px; float:left;  padding-top:3px;}
#viewsreq_2_1{ width:70%; background-color:#ec2327; height:33px; float:left; text-align:center; color:#FFF; font-size:18px;border-radius: 15%; padding-top: 14px;}
#viewsinc{ width:100%; height:300px; border:3px #ffcc00 solid; border-radius:5%; float:left; margin-top:-10%}
#viewspress{width:24%; float:left; height:200px; margin-bottom:4%; background: -webkit-radial-gradient(white 25%, #ffcc00 ); border-radius:5%; border:1px #045f1a solid; margin-left:3%; margin-top:0%;}
#viewspress_in{ margin-top:6%;}
#viewspresstext2{font-size:16px; margin-left:2%;}
#viewspresstext3{ font-size:52px; color:#045f1a; margin-left:16%;}
#viewspresstext4{ font-size: 13px; float: left; margin-top: -8%; margin-left: 74%;}
#viewspress_req{ width:70%; background-color:#ec2327; height:33px; float:left; text-align:center; color:#FFF; font-size:18px;border-radius: 15%; padding-top: 11px; margin-top:16%; margin-left:13%;}
#contact{ width:72%; height:1130px; float:left; margin-bottom:2%;}
.contact_row{ width:50%; height:auto; float:left;}
#contact_1{ width:100%; height:56px; background-color:#F4F4F4; float:left;}
#contact_text{ font-size:22px; margin-left: 2%; margin-top: 4%;}
.contact_text_1{ font-size:21px; margin-left:3%; margin-top:3%;}
.contacy_text{ font-size:16px; margin-top:4%; margin-left:4%;}
#read{  width: 90%;
  height: 1186px;
  position: relative;
  margin-left: auto;
  margin-right: auto;}
#read_1{  width: 71%;
  height: 800px;
  float: left;}  
.read_img{width: 32%;
  height: 38%;
  float: left;
  margin-left: 1%;}
.read_p{  padding: 2% !important;
  font-size: 15px  !important;}
.read_slider{width: 100%;
  height: 590px;
  margin-top: 8%;}
  

.read_slider{  width: 63%;
  float: right;
  margin-top: 13%;}
  .rg-image-wrapper{
	position:relative;
	padding:20px 30px;
	background:transparent url(../images/black.png) repeat top left;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	min-height:20px;
	margin-top: -82%;
}
.rg-image{
	position:relative;
	text-align:center;
	line-height:0px;
}
.rg-image img{
	max-height:100%;
	max-width:100%;
}
.rg-image-nav a{
	position:absolute;
	top:190px;
	left:0px;
	background:#000 url(../images/nav.png) no-repeat -20% 50%;
	width:28px;
	height:14%;
	text-indent:-9000px;
	cursor:pointer;
	opacity:0.3;
	outline:none;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}
.rg-image-nav a.rg-image-nav-next{
	right:0px;
	left:auto;
	background-position:115% 50%;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
}
.rg-image-nav a:hover{
	opacity:0.8;
}
.rg-caption {
	text-align:center;
	margin-top:15px;
	position:relative;
}
.rg-caption p{
	font-size:11px;
	letter-spacing:2px;
	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
	line-height:16px;
	padding:0 15px;
	text-transform:uppercase;
}
.rg-view{
	height:30px;
}
.rg-view a{
	display:block;
	float:right;
	width:16px;
	height:16px;
	margin-right:3px;
	background:#464646 url(../images/views.png) no-repeat top left;
	border:3px solid #464646;
	opacity:0.8;
}
.rg-view a:hover{
	opacity:1.0;
}
.rg-view a.rg-view-full{
	background-position:0px 0px;
}
.rg-view a.rg-view-selected{
	background-color:#6f6f6f;
	border-color:#6f6f6f;
}
.rg-view a.rg-view-thumbs{
	background-position:0px -16px;
}
.rg-loading{
	width:46px;
	height:46px;
	position:absolute;
	top:50%;
	left:50%;
	background:#000 url(../images/ajax-loader.gif) no-repeat center center;
	margin:-23px 0px 0px -23px;
	z-index:100;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	opacity:0.7;
}
.read-more, .read-less {
	background:url(../images/packageReadmore.gif) no-repeat left top;
	display:block;
	height:35px;
	text-indent:-9999px;
	margin-top:10px;
	line-height:22px;
}

.youtube {
    background: url(//i.ytimg.com/vi/EQKjq3RpZYs/mqdefault.jpg);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
    
}

.youtube .play {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center;
    background-size: 64px 64px;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .8;
    filter: alpha(opacity=80);
    transition: all 0.2s ease-out;
}

.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}