/* 
********************************************
Kkush Kayal Theme Style
Author: Surajit Kayal (surajitkayal@webmagix.co.in);
http://webmagix.co.in
********************************************
*/
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

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

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

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

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

@import url(http://fonts.googleapis.com/css?family=Lobster+Two);

@font-face {
    font-family: "Museo 300";
src: url("../fonts/Museo300-Regular.eot");
src: local("Museo 300"), local("Museo 300"),
url("../fonts/Museo300-Regular.otf") format("opentype"),
url("../fonts/Museo300-Regular.woff") format("woff"),
url("../fonts/Museo300-Regular.svg#Museo 300") format("svg");
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* General Demo Style */
body {
    font-family: 'Museo 300','Droid Sans','Lato', 'Myriad Pro','Trebuchet MS', sans-serif;
    background: #ECF0F1; /*#  #f1c40f */
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    color: #212d38;
    overflow: scroll;
    overflow-x: hidden;
}

a {
    color: #555;
    text-decoration: none;
    outline: none;
}

a img {
    border: none;
}

a, a:hover , span:hover {
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

#overlay p {
    font-size: 32px;
    color: #fff;
    max-width: 50%;
    margin: 50px auto 30px;
    text-align: center;
}
#handle {
    position: absolute;
    z-index: 999;
    width: 90px;
    height: 43px;
    display: block;
    background: url(../images/r-menu.png)  0 -43px no-repeat;
    left: 5px;
    top: 10px;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    cursor: pointer;
}

#handle:hover {
    background: url(../images/r-menu.png)  0 0 no-repeat;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

.twt-pro {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.container {
    position: relative;
    background: transparent url(../images/light.png) fixed no-repeat center top;
}

.codrops-header {
    margin: 0px;
    padding: 40px 10px 10px 10px;
    position: relative;
    display: block;
    text-align: center;
}

.codrops-header h1,
.codrops-header-special h1 {
    font-size: 39px;
    line-height: 42px;
    margin: 0;
    position: relative;
    font-weight: 400;
    color: #000;
    font-family: 'Bree Serif','Kavoon';
}

.codrops-header h1 a {
    color: #19B5FE;
    -webkit-text-shadow: 1px 1px #111;
    -moz-text-shadow: 1px 1px #111;
    text-shadow: 1px 1px #111;
}

.codrops-header h1 a:hover {
    -webkit-text-shadow: 1px 3px #222;
    -moz-text-shadow: 1px 3px #222;
    text-shadow: 1px 3px #222;
}

.codrops-header h2,
.codrops-header-special h2 {
    font-size: 13px;
    line-height: 14px;
    font-weight: 300;
    margin: 0;
    padding: 3px 5px;
    margin: 10px 0 5px;
    color: #212d38;
	/* display: inline-block; */;
}

.codrops-header h2 span {
    background: #19B5FE;
    color: #fff;
    padding: 1px 6px;
    margin: 0 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.codrops-header h2 span:hover {
    background: #444;
}

.codrops-header h2.nfont {
    font-family: 'Pacifico','Bree Serif';
    font-size: 19px;
    font-weight: 400;
    color: #212d38;
    line-height: 27px;
}
/* Header Style */
.codrops-top {
    line-height: 24px;
    font-size: 11px;
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    z-index: 9999;
    position: relative;
    box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
    padding: 0px 10px;
    letter-spacing: 1px;
    color: #333;
    display: inline-block;
}

.codrops-top a:hover {
    background: rgba(255,255,255,0.3);
}

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

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

.codrops-info-social {
    padding: 10px;
    margin: 0 auto;
    text-align: center;
    background: none;
    color: #222;
    font-size: 17px;
    font-family: 'Pacifico';
}

#ron {
    width: 90px;
    height: 48px;
    display: block;
    background: url(../images/ron2.png)  0 -48px no-repeat;
    margin: 0 auto;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

#ron:hover {
    background: url(../images/ron2.png)  0 0 no-repeat;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

#twt a {
    width: 64px;
    height: 64px;
    display: block;
    background: url(../images/twt.png)  0 -64px no-repeat;
    margin: 0 auto;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

#twt a:hover {
    background: url(../images/twt.png)  0 0 no-repeat;
    transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
}

.codrops-info {
    padding: 10px;
    margin: 0 auto;
    text-align: center;
    line-height: 20px;
    color: #222;
}

.codrops-info a {
    background: #ffb71b;
    color: #111;
    padding: 1px 6px;
    margin: 0 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.codrops-info span {
    color: #ff1f1f;
    font-size: 16px;
}

.codrops-info a:hover {
    background: #1c2c3b;
    color: #fff;
}

.codrops-info.small {
    font-size: 12px;
}

.codrops-info,.small a {
    color: #222;
}

.codrops-info .foot {
    background: #3498db;
    color: #fff;
}
/* Demo Buttons Style */
.codrops-demos {
    text-align: center;
    display: block;
    line-height: 30px;
    padding: 5px 0px;
}

.codrops-demos a {
    display: inline-block;
    margin: 0px 10px;
    font-weight: bold;
    color: #333;
    line-height: 20px;
    font-size: 12px;
    background: #fff;
    background: rgba(255,255,255,0.4);
    padding: 0 4px;
}

.codrops-demos a:hover {
    border-bottom: 2px solid #f7bb6d;
}

.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
    border-bottom: 2px solid #f7bb6d;
    color: #777;
}

.codrops-header-special {
    position: absolute;
    top: 80px;
    left: 0px;
    text-align: left;
}

.codrops-header-special h2 {
    padding: 5px 20px 5px 10px;
    color: #fff;
    line-height: 26px;
    background: #000;
    background: rgba(0,0,0,0.8);
}

.codrops-header-special h1 {
    background: #000;
    background: rgba(0,0,0,0.8);
    display: inline-block;
    font-size: 32px;
    line-height: 32px;
    padding: 20px;
    color: #fff;
}

.codrops-header-special .codrops-demos {
    text-align: left;
}

.codrops-header-special .codrops-demos a {
    background: rgba(255,255,255,1);
}

.codrops-header-special .codrops-info {
    color: #fff;
    background: #000;
    background: rgba(0,0,0,0.8);
    padding: 5px 20px 5px 10px;
    line-height: 26px;
    margin-top: 30px;
    text-align: left;
}

.togglebox {
    overflow: hidden;
    clear: both;
    margin-bottom:0;
}

.togglebox .content {
    padding: 10px;
    background: #fefefe;
    border-bottom: 1px solid #fdfdfd;
    margin-top: 0px;
}