@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Kleymissky';
	src:url('../fonts/Kleymissky.otf');
}
@font-face
{
font-family: asia;
src:url(../fonts/asia.otf);
}
@font-face{font-family:Kleymissky;src:url(../fonts/Kleymissky.otf);}

body {
	font-family: 'Lato', Arial, sans-serif;
}

a, button {
	outline: none;
}

a {
	text-decoration: none;
}
img{width: 60%;}
.container > header {
	margin: 0 auto;
	padding: 1.9em;
	text-align: center;
	color: #fff;
	font-family: 'asia';
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
	color: #fff;
	font-family: 'asia';
}

.container > header span {
	display: block;
	font-size: 60%;
	font-family: 'asia';
	padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
	background: linear-gradient(90deg, #000, red, #000);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
	border-bottom:1px solid red;
	box-shadow:0 0 15px red;
	position:fixed;
	z-index:99;
}

.codrops-top a {
	text-decoration: none;
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #fff;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.95);
	color: #777;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

/* Demo Buttons Style */
.codrops-demos {
	padding-top: 1em;
	font-size: 0.9em;
}

.codrops-demos a {
	text-decoration: none;
	outline: none;
	display: inline-block;
	margin: 0.5em;
	padding: 0.7em 1.1em;
	border: 3px solid #fff;
	color: #fff;
	font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	opacity: 0.6;
}

.container > section {
	padding: 2em;
	font-size: 1.4em;
	max-width: 50em;
	margin: 0 auto;
}

.container > section p {
	padding: 0.8em 0;
	text-align: justify;
	opacity: 0.5;
	font-weight: 300;
	line-height: 1.4;
}
.fb-icon {
	
	background-image: url(../images/fb.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 80px;
	cursor: pointer;
	
	filter: alpha(opacity = 80);
	float: left;
}
#fb-box {
	position: fixed;
	width: 440px;
	height:20px;
	top: 100px;
	right: 0px;
	padding: 0px;
	z-index: 100;
	margin-right: -340px;
	z-index:9999999;
}
.fb-text-box {
	background-color: black;
	border-radius: 0px 0px 0px 5px;
	-moz-border-radius: 0px 0px 0px 5px;
	-khtml-border-radius: 0px 0px 0px 5px;
	-webkit-border-radius: 0px 0px 0px 5px;
	width: 340px;
	height: 340px;
	float: left;
	top:-160px;
	
	color: white;

	
}


/* the @catalinred clearfix */
wrapper:after {
    content: "";
    display: table;
    clear: both;
}

/* this rule sets the size for all the icons inside the reveal container */
.svgicon2 {
    position: relative;
    perspective: 300px;
    transform-style: preserve-3d;
    perspective-origin: 50% 50% 0%;
    float: left;
    top: .5em;
    margin-right: 1em;
    left: 0.6em;
    height: 3em;
    width: 3em;
}

.svgicon2 .twitsvg {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    background: transparent;
    background-size: 3em 3em;
    -webkit-transform: rotateY(45deg);
    -ms-transform: rotateY(45deg);
    transform: rotateY(45deg);
    fill: #555;
    -webkit-transition: fill .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -ms-transition: fill .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: fill .3s ease-in;
    transition: all .3s ease-in;
}

.twitsvg:hover {
    position: absolute;
    background: transparent;
    background-size: 3em 3em; 
    fill: #35AFEB;
    cursor: pointer;
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.svgicon .pint-all {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    background: transparent;
    background-size: 3em 3em;
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.svgicon2 .pint-all {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    background: transparent;
    background-size: 3em 3em;
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.pint-all:hover {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    cursor: pointer;
}

.pint-all .pintsvg {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    fill: #555;
    left: -1em;
    margin-top: -2em;
    background: transparent;
    background-size: 3em 3em;
    -webkit-transition: fill .3s ease-in;
    -ms-transition: fill .3s ease-in;
    transition: fill .3s ease-in;   
}

.pint-all:hover .pintsvg {
    fill: #CB2027;
}

.face-all {
    position: relative;
}

.face-all:hover {
    cursor: pointer;
}

.face-all .face1 {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    fill: #555;
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.face-all:hover .face1 {
    fill: #30487A;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);   
    cursor: pointer;
}

.face-all .face2 {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    fill: #555;
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.face-all:hover .face2 {
    fill: #758EB4;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    cursor: pointer;
}

.goog-all {
    position: relative;
}

.goog-all:hover {
    cursor: pointer;
}

.goog-all .goog {
    position: absolute;
    transform-perspective: 50% 50% 0%;
    fill: #555;
    -webkit-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
    margin-left: 4em;
}

.goog-all:hover .goog {
    fill:#B84F46;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    cursor: pointer;
}

/* this sets the font for "share" and hides it when the cover is open */
.bar-cover > p {
    position: relative;
    top: 0em;
    padding-top: .4em;
    font-family: "TragicSans Medium", sans-serif;
    color: rgba(255, 255, 555, 0.5);
    font-size: 1.2em;
    text-shadow: 1px 1px 1px #fff, 0px -1px 1px #000;
    transition: color .3s ease, visibility .3s ease;
	text-align: center;
}

.share-bar:hover .bar-cover p,
.bar-cover:hover p,
.share-bar:focus .bar-cover p,
.bar-cover:focus p {
    color: rgba(255, 255, 555, 0.5);
    text-shadow: none;
    visibility: hidden;
}

/***********************reveal container for icons, set at 3em height for 2em icons**************************************************/
.share-bar {
    transform-style: preserve-3d;
    postion: relative;
    perspective: 500px;
    transition-perspective: 50% 50% 0%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    height: 3em;
    width: 16em;
    border-radius: 2em;
	 background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
   
    box-shadow: inset 0 0 .5rem rgba(0,0,0,0.5);
    
}

/* reveal cover size is matched to the .share-bar. both can easily be changed to match smaller, or larger share icons: 1.5em icons, 2em height, 12em width for instance */
.bar-cover {
    position: absolute;
    top: -.1em;
    -webkit-top: 5em;
    -webkit-transform-origin: 50% 100% 0px;
    transform-origin: 50% 100% 0px;
    -webkit-transform-perspective: 50% 50% 0%;
    transform-perspective: 50% 50% 0%;
    height: 3em;
    width: 16em;
    border-radius: 2em;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  animation: animate 8s linear infinite;
    box-shadow: inset 0 0 5px rgba(186,136,87,0);
    border-top: 5px solid rgba(55, 55, 55,0);
    -webkit-transform: perspective(500px) rotateY(0deg) rotateX(0deg);
    transform: perspective(500px) rotateY(0deg) rotateX(0deg);
    -webkit-transition: all .5s ease-in;
    transition: transform .5s ease-in, box-shadow .3s ease-in, border .3s ease-in .2s, top .3s ease-in, background .3s ease-out .3s;
    
}
 @keyframes animate
	{
		0%
		{
			background-position: 0%;
		}
		100%
		{
			background-position: 400%;
		}
}

.share-bar:hover .bar-cover,
.bar-cover:focus {
    position: absolute;
    top: -.2em;
    -webkit-top: 4.8em;
    backface-visibility: visible;
    -webkit-transform-perspective: 50% 50% 0%;
    transform-perspective: 50% 50% 0%;
    color: rgba(127, 93, 59, 0.9);
     background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  animation: animate 8s linear infinite;
    box-shadow: inset 0 0 5px rgba(76,76,76,0.5);
    border-top: 5px solid rgba(215, 215, 215,0.8);
    cursor: pointer;
    -webkit-transform-origin: 50% 100% 0px;
    transform-origin: 50% 100% 0px;
    -webkit-transform: perspective(500px) rotateY(0deg) rotateX(-135deg);
    transform: perspective(500px) rotateY(0deg) rotateX(-135deg);
}
		
		
.guzik {
  position: absolute;
  margin-top: -150px;
  left: 40%;
  width: 300px;
  height: 300px;
  perspective: 400px;
  z-index:3;
}


@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}