*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: ''; display: table; }

.clearfix:after { clear: both; }



body {

	background: #fff;

	color: #fff;

	font-weight: 400;

	font-size: 1em;

	font-family: 'Roboto Slab', serif;

}





.demo-2 {background: url(../../img/intro-left.png), url(../../img/intro-right.png);

background-repeat:no-repeat;

background-color:#FFF;

background-position:left top, right top;

}

.demo-2 a {

	-webkit-transition: all 0.3s ease-in-out;

  -moz-transition: all 0.3s ease-in-out;

  -o-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

  transition: all 0.3s ease-in-out;

	color: #2b498e;

	text-decoration: none;

	outline: none;}



a:hover, a:focus {

	color: #3463d1;

	text-shadow: 0px 0px 1px #2b498e;

}



.ip-main a:link {

font-weight: 700;

  font-size: 26px;

  margin: auto;

  display: table;

  width: 33%;

  float: left;

  text-align: center;

}

.ip-main > a:nth-child(2) {
    margin-bottom: 20px;
}


section {

	padding: 1em;

	text-align: center;

}



.codrops-header {

	margin: 0 auto;

	padding: 2em;

	text-align: center;

}



.codrops-header h1 {

	margin: 0;

	font-weight: 300;

	font-size: 2.5em;

	line-height: 1.3;

}



.codrops-header h1 span {

	display: block;

	padding: 0 0 0.6em 0.1em;

	font-size: 60%;

	opacity: 0.7;

}



.codrops-top {

	width: 100%;

	text-transform: uppercase;

	font-weight: 700;

	font-size: 0.69em;

	line-height: 2.2;

}

.mainsmall{position: absolute;
    bottom: 0;
    z-index: 999999999999;
    left: 0;
    right: 0;
    margin: 11px auto;
	font-size: 12px!important;
    display: inline-block!important;
    width: 100%;
    color: #000;
    text-align: left;}
.mainsmall a{width:auto!important;font-size:12px!important;margin-right:4px!important;}

.codrops-top a {

	display: inline-block;

	padding: 2em;

	text-decoration: none;

	letter-spacing: 1px;

}



.codrops-top span.right {

	float: right;

}



.codrops-top span.right a {

	display: block;

	float: left;

}



.codrops-icon:before {

	margin: 0 4px;

	text-transform: none;

	font-weight: normal;

	font-style: normal;

	font-variant: normal;

	line-height: 1;

	speak: none;

	-webkit-font-smoothing: antialiased;

}



.codrops-icon-drop:before {

	content: "\e001";

}



.codrops-icon-prev:before {

	content: "\e004";

}



.codrops-demos {

	padding: 2em 0 1em;

	font-size: 0.8em;

	text-align: center;

}



.codrops-demos a {

	display:inline-block;

	margin:0.5em 0.75em;

	line-height:1.5;

	outline:none;

	text-decoration:none;

	text-transform:uppercase;

	letter-spacing:1px;

	font-weight:700;

}



.codrops-demos a.current-demo {

	color:inherit;

}



.related {

	padding:4em 0 3em;

}



.related p {

	font-size:1.25em;

	font-weight:700;

}



.related > a {

	border:2px solid #000;

	border-color:initial;

	display:inline-block;

	text-align:center;

	margin:20px 10px;

	padding:25px;

}



.related a img {

	max-width:100%;

	opacity:0.8;

}



.related a:hover img,

.related a:active img {

	opacity:1;

}



.related a h3 {

	margin:0;

	padding:0.5em 0 0.3em;

	max-width:300px;

	text-align:left;

}



body #cdawrap {

	background:none;

	top:50px;

	opacity:0;

	-webkit-transition:opacity 0.3s 1.2s;

	transition:opacity 0.3s 1.2s;

}

.gfge {
    width: 100% !important;
    margin-top: 20px !important;
}

body #cdawrap a {

	color:#fff!important;

}



body .loaded ~ #cdawrap {

	opacity:1;

}



body #cdawrap #cda-remove {

	top:20px;

	right:25px;

	width:20px;

	height:20px;

	opacity:0;

}



body #cdawrap:hover #cda-remove {

	opacity:1;

}



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

	.codrops-icon span {display:none;}

}



@media screen and (max-width:1664px) {

	.demo-2 {background-position:-132px top, right top;}

}



@media screen and (max-width:1313px) {

	.demo-2 {background-position:-188px top, 673px top;}

}



@media screen and (max-width:1127px) {

	.demo-2 {background-position:-264px top, 595px top;}

}



@media screen and (max-width:856px) {

	.demo-2 {background: none;}

}



@media screen and (max-width:684px) {

	.ip-main a:link {width:100%;margin-bottom:12px;}

	.ip-main > a:nth-child(2) {margin-bottom: 12px;}
	.gfge {margin-top: 0 !important;}
}



@media only all and (max-height:919px) {

	.ip-main {padding:37px 0 7em 0!important;}

}



@media only all and (max-height:761px) {

	.loaded .ip-logo {top: 5px!important;}

}



@media only all and (max-height:600px) {

	.ip-main {padding: 37px 0 4em 0!important;}

}