@import url(http://fonts.googleapis.com/css?family=Satisfy);
@import url(http://fonts.googleapis.com/css?family=Quicksand);

.heading 
{
  font-family:'Satisfy',Helvetica,Arial,Verdana;
  color:#fff;
  text-shadow:0px 0px 5px #333; 
  padding:0;
  margin:auto;  
  z-index:5;   
  width:200px;
  height:150px;
  text-align:center;  
  position:absolute; 
  top:-32px;
  left:0;
  bottom:0; 
  right:0; 
  display:block; 
}
body
{
  margin:0;
  padding:0;
  overflow:hidden;
}
.layer1
{
  
  width:20px;
  height:20px;
  border-radius:50%;
  top:0;
  z-index:5;
  margin:auto;
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background-color:#fff; 
  border:5px solid #035680;
}
.layer2 
{
  
  width:0px;
  height:0px;
  border-radius:50%;
  margin:auto;
  position:absolute;
  z-index:200;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  background-color:#fff;
  border:5px solid #035680; 

}
.layer3
{
  
  width:40px;
  height:40px;
  border-radius:50%; 
  top:0;
  z-index:2;
  margin:auto;
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background-color:#fff;
  border:5px solid #035680;
}
.hide
{ 
  display:none;
}
.clicker
{
  
  width:50px !important;
  height:50px !important;
  border-radius:50px;
  top:0;
  z-index:300;
  margin:auto;
  display:block;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background-color:#fff;
  opacity:0;
}
.clicker:hover
{
	cursor:pointer;
}
.display
{
  display:block !important;
  visability:auto;
}
.full1
{
  width:350px;  
  height:350px;
}
.full2
{
  width:300px;
  height:300px;
}
.full3
{
  width:400px;
  height:400px;
}
.hello , .designer , .and , .developer , .liketo , .stretch ,.twist ,.shape ,.designs ,.tricky ,.line1 ,.line2 ,.circle ,.again ,.arrow ,.until ,.unique ,.balance,.romb ,.impression , .skip , .twist1 ,.twist2 ,.twist3
{
  display:none;
  font-family:'Quicksand',Helvetica , Arial Verdana;
  font-size:28px;
  color:#333;
  text-shadow:0px 0px 2px #777;
  font-weight:normal; 
  width:400px;
  height:34px;
  text-align:center;
  z-index:500;
  margin:auto; 
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:0;
}
.me
{
  padding:0;
  margin:0;
  font-size:20px;
  display:none;
}
.and
{
  font-size:80px;
  padding-left:10px;
  height:80px;
}
#canvas
{ 
  display:none; 
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
.code
{
  width:100%; 
  height:100%;
   position:absolute;
  top:0; 
  left:0;
/*  background-image:url('img/iwb.gif');   */
  display:none; 
}
.liketo 
{  
  display:block; 
  top:-100px;
  width:170px;
}
.i , .like ,.to
{
  margin:0;
  display:none;
   float:left;
  padding:4px;
  z-index:2000;
}
.stretch ,.until ,.unique 
{
  display:none;
  top:-110px;
 
}

.balance  
{
  width: 48px;
  height: 24px; 
  background: #fff; 
  border-color:#035680; 
  border-style: solid;
  border-width: 1px 1px 25px 1px; 
  border-radius: 100%;
} 
.balance:before { 
  content: ""; 
  position: absolute;
  top: 50%; 
  left: 0;
  background: #035680;
  border: 9px solid #035680;
  border-radius: 100%;
  width: 6px;
  height: 6px; 
  z-index:400;
}
.balance:after { 
  content: "";
  position: absolute; 
  top: 50%; left: 50%;
  background:#fff; 
  border: 9px solid #fff; 
  border-radius:100%; 
  width: 6px;
  height: 6px; 
} 

.line1 ,.line2
{
  width:400px;
  height:50px;
}
.circle
{

  width:10px;
  height:10px;
  border:2px solid #035680;
  border-radius:50%;
}
.tricky
{
  color:#035680;
  font-size:60px;
  font-weight:bold; 
  height:70px;

}

.arrow
{
  width:70px;
  height:70px;
  border-radius:50%;
}
.romb
{

  width:450px;
  height:450px;
  opacity:0.3;
}
.unique
{

  font-weight:bold;
  font-size:32px;
  z-index:100;
  text-shadow:0px 0px 20px #fff;
}
.blues
{
  background-color:#035680;
  height:0px;
  width:100%;
  position:absolute;
  bottom:0;
  
}
.white
{
  background-color:#fff;
  height:0px;
  width:100%;
  position:absolute;
  bottom:0px;
}
.tricky2
{
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  text-align:center;
  height:72px;
  z-index:500;  
  font-family:'Quicksand',Helvetica,Arial;
  font-weight:bold;
  font-size:60px;
  color:#fff;
  display:none; 
}
.tricky3
{
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  text-align:center;
  height:72px;
  z-index:1000;
  font-family:'Quicksand',Helvetica,Arial;
  font-weight:bold;
  font-size:60px;
  color:#035680;
  display:none;
}
.cleft , .cright 
{
  
  background-color:#035680;
  position:absolute;
  width:50%;
  height:100%;
  top:0;
  display:none;
}
.cleft
{
  left:0;
}
.cright
{
  right:0;
} 
.intro 
{
  margin:0;
  padding:0; 
}
.skip
{
  display:none;
  position:absolute;
  width:140px;
  top:140px;
  z-index:1000; 
  text-shadow:none;
}
.skip a
{
  font-family:"Quicksand",Helvetica,Verdana,Arial;
  color:#333;
  font-size:16px;
  text-decoration:none;
  display:none;
}  
.skip a:hover
{
  text-decoration:underline;
  cursor:pointer;
}

.mute
{
  display:none;
  
}
.mute a
{
  font-family:"Quicksand",Helvetica,Verdana,Arial;
  color:#333;
  font-size:16px;
  text-decoration:none;
  position:absolute;
  top: 10px;
  right:18px;
  display:none;
  z-index:1000;
}
.mute a:hover
{
  text-decoration:underline;
    cursor:pointer;
}
nav
{
	width:100%;
	margin:0;
	padding:0;
}
nav ul
{
	margin:0;
	padding:0;
	width:100%;
	list-style:none;
}
nav li
{
	width:25%;
	float:left;
	text-align:center;
	
}
nav a
{
	text-decoration:none;
	font-family:"Quicksand",Helvetica,Verdana,Arial;
	font-size:18px;
	color:#035680;
	border-bottom:1px solid #ccc;
	display:block;
	padding:10px;
}
.white-wrap
{
	width:100%;
	height:100%;
	background-color:#fff;
	position:absolute;
	z-index:2000;  
	top:0;
	left:0;
	display:none;

}
.twist
{
    color:#fff;
  
}
.twist1 ,.twist2 ,.twist3
{
 background-color:#fff;
  height:1%;
  position:absolute;
  width:5%;

}
.twist1 
{

  left:-10%;
}
.twist3
{

  left:10%;
}
.circle1, .circle2,.circle3,.circle4,.circle5,.circle6,.circle7,.circle8,.circle9, .circle10,.circle11,.circle12,.circle13,.circle14,.circle15,.circle16,.circle17, .circle18,.circle19,.circle20,.circle21,.circle22,.circle23,.circle24,.circle25, .circle26,.circle27,.circle28,.circle29,.circle30,.circle31,.circle32,.circle33,.circle34,.circle35,.circle36
{ 
  width:350px;
  height:20px; 
  background:none;
  margin:auto; 
  position:absolute;
  top:0;  
  left:0; 
  right:0;
  bottom:0;
  padding:0;
  z-index:1000000;
  display:none;
}
.cinner
{
    width:20px;
  height:20px;
  background-color:#035680;
  position:absolute;
  display:none;
  z-index:1000000;
  border-radius:50%;
}
.cwrap
{
  
  display:block;
  width:auto;
  height:auto;
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:none;
  overflow:hidden;
}