*
{
	box-sizing:border-box;
		-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
}
body,html {
	margin: 0;
	width:100%;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	height:100%;
	background:url(../images/wood.jpg) fixed;
	background-size:100% 100%;
}
a
{
	text-decoration:none;
	color:#FFF;	
}
.clearfix
{
	clear:both;
}.name.name2 {
    position: absolute;
    height: auto;
    bottom: 0;
    text-align: center;
    width: 100%;
    font-size: 40px;
    color: #019a8e;
	    text-shadow: 2px 2px #fff;
}
.big_container
{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	bottom:0;
}
#container {
	width: 100%;
	height:100%;
	background: url(../images/main2.jpg) no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	float:left;
}
#container, .adjust, .links, .name
{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

}
.mid1
{
	margin-top:15px;
}
.adjust {
	position: relative;
	top: 26%;
	left:-15px;
	margin: auto;
	width:60%;
	text-align: center;
}
.adjust1 {
	width: 100%;
	top: 16%;

}
.links {
	width: 20%;
	float: left;
	height: 100%;
}
.name {
	width: 60%;
	float: left;
	height: 100%;
	overflow: hidden;
}

/* The circle */
.ec-circle, .ec-circle1{
	width:100%;
    height:150px;
	margin-left:15px;
    text-align: center;
    overflow: hidden;
	border-radius:50%;
	background:url(../images/tricks_03.png) no-repeat center center;
	background-size:60%;
	-webkit-box-shadow: 
        inset 0 0 10px 230px rgba(0,0,0,1),
		inset 0 0 0 7px #7f5940;
	-moz-box-shadow: 
        inset 0 0 1px 230px rgba(0,0,0,1),
		inset 0 0 0 7px #7f5940;
	box-shadow: 
        inset 0 0 1px 230px rgba(255,255,255,0.5),
		inset 0 0 0 7px #7f5940;
	-webkit-transition: box-shadow 400ms ease-in-out;
	-moz-transition: box-shadow 400ms ease-in-out;
	-o-transition: box-shadow 400ms ease-in-out;
	-ms-transition: box-shadow 400ms ease-in-out;
	transition: box-shadow 400ms ease-in-out;
	/*For IE < 9 so that we have some kind of effect */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	display: block;
	outline: none;
}
.ec-circle-hover, .ec-circle1-hover{
	-webkit-box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 10px #7f5940,
		0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 10px #7f5940,
		0 0 10px rgba(0,0,0,0.3);
    box-shadow: 
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 10px #7f5940,
		0 0 10px rgba(0,0,0,0.3);
	/*For IE < 9 so that we have some kind of effect */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.ec-circle1
{
		background:url(../images/quiz.png) no-repeat center center;
		background-size:65%;
}
.item
{
	width:100%;
	height:200px;
	float:left;
	margin-top:65%;
}
.item1
{
	width:100%;
    height: 200px;
	float:left;
	margin-top:60%;
}
.item1 ul
{
	padding:0;
	margin:0;
}	
.btn {

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;
	border:0;

	border-radius: 7px;

	font-size: 20px;

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform: uppercase;

	padding: 15px;

	display: inline-block;

	position: relative;
	margin-top:45px;
	box-shadow:1px 1px 2px #666666;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-ms-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}
.btn:hover
{
	cursor:pointer;
}
.btn:after {

	content: '';

	position: absolute;

	z-index: -1;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	-ms-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;

}


.btn-1 {

	background: #01998e;

	color: #fff;

}

.btn-1:active {

	background: #354B61;

	color: #fff;

	top: 2px;

}



.btn-1 {

	overflow: hidden;

line-height:1;
}

.btn-1:before {

	left: auto;

	right: 10px;

	z-index: 2;

}

.btn-1:after {

	width: 30%;

	height: 200%;

	background: rgba(255,255,255,0.2);

	z-index: 1;

	right: 0;

	top: 0;

	margin: -5px 0 0 -5px;

	-webkit-transform-origin: 0 0;

	-webkit-transform: rotate(-20deg);

	-moz-transform-origin: 0 0;

	-moz-transform: rotate(-20deg);

	-ms-transform-origin: 0 0;

	-ms-transform: rotate(-20deg);

	transform: rotate(-20deg);
	

}

.btn-1:hover:after {

	width: 60%;
	cursor:pointer;

}
.small_name, .small_links, #container h2
{
	display:none;
}
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}
@media only screen and (max-device-width : 1024px)
{
	.item ul li img, .name ul li img, .item1 ul li img
	{
		width:100%;
	}
	#container
	{
		height:100%;
	}
	.adjust {
	left:-15px;
	height:auto;
	margin: auto;
	width:70%;
	top:30%;
	text-align: center;
	}
	.adjust1 {
	width: 90%;
	top: 20%;
	}
	.item, .item1
	{
		margin-top:100%;
		height:100%;
		float:left;
		padding-top:10%;
	}
	.item
	{
		padding-top:20%;
	}
	
}


@media only screen
and (max-device-width : 768px)
{
	body
	{
		background:url(../images/medium_back.jpg) fixed;
		background-size:100% 100%;
	}
	#container
	{
		background:none;
		overflow:scroll
	}
	.item, .item1, .links, .names,.name
	{
		display:none !important;
	}
	.small_name
	{
	    float: left;
    	height: 160px;
    	margin: 15% auto 0 15%;
    	width: 70%;
		display:block;
		background:url(../images/magic_ved1.png) no-repeat;
		background-size:100% 80%;
	}
	.small_links,.small_copy
	{
		float:left;
		height:70px;
		margin-bottom:30px;
		width:100%;
		display:block;
		text-align:center;
	}
	.small_links
	{
		margin-bottom:0;
	}
	.small_links button
	{
		width:40%;
		height:auto;
		font-size:16px;
	}
	.small_links .btn
	{
	margin-top:0px;
	}
	
	.small_copy p
	{
		color:#FFF;
		text-align:center;
		font-size:14px;
	    padding:0 15px;
	}	
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 639px)
{
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
	body
	{
		background:url(../images/small_back.jpg) fixed;
		background-size:100% 100%;
	}
	
}