/************************\ DEFAULT /************************/
body { margin: 0; padding: 0; line-height: 25px; overflow-x: hidden; }
body.cover { background-size:cover;} body.repeat { background-repeat: repeat;} body.repeat-x { background-repeat: repeat-x;} body.repeat-y { background-repeat: repeat-y;}
a { text-decoration: none; word-break: break-word; -webkit-transition:Color .3s ease-in-out; -moz-transition:Color .3s ease-in-out; -o-transition:Color .3s ease-in-out; transition:Color .3s ease-in-out;}
blockquote { padding-left: 10px; margin: 15px;}
p { word-break: break-word;}
img { max-width: 100%;}
form { padding: 0; margin: 0;}
input { border: none; width: 100%; padding: 5px; }
.none { display:none}
.clear { clear:both;}
/************************\ END DEFAULT /************************/

/************************\ PACKAGE /************************/
#wrap { margin: 0 auto; -webkit-animation: fade 3s 1 ease-in-out; -moz-animation: fade 3s 1 ease-in-out;-o-animation: fade 3s 1 ease-in-out;}
#content { margin: 0 auto;}
#menu { z-index: 999; max-width: 25%; margin:0 ; text-align: center; font-weight: lighter; padding: 2em; position: fixed; left: 0; overflow: hidden; top: 0;}
#navigator { width: 150px; margin: 10em auto 0; padding: 15px 0; text-align:center;}

#foot { margin: 10px auto 70px;}
 .credit { max-width: 300px; margin: 0 auto; text-align: center; border-top: 1px solid #000; padding: 20px 0; opacity:.5;}
/************************\ END PACKAGE /************************/

/************************\ CENTERBAR /************************/

.title {display: inline-block; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}

.title:hover {-webkit-transform: translate(0px, 5px); -moz-transform: translate(0px, 5px); -ms-transform: translate(0px, 5px); transform: translate(0px, 5px);}

.title h1{ margin:15px 0; padding:0; font-size: 3em; font-weight: 900; line-height: 90%; letter-spacing: 2px; text-transform: uppercase; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease;}

.desc{ margin:0; padding:0; text-align: justify; word-break: break-word;}
/*********************ERBAR /************************/

/************************\ MENU /************************/

.links { margin: 2em auto; padding: 0;}
.links ul { padding-left: 10px;}
.links ul, .links ul li { margin:0; padding:0; list-style:none;}
.links ul li { display: inline-block;}
.links ul li a { display: inline-block; text-align:center; text-transform:uppercase; font-weight:900; font-size:1em; margin:0; padding:5px 10px;}
.links ul li a:hover { background: transparent;}
.links ul li a,.links ul li a:hover { -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -ms-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease;}
/************************\ END MENU /************************/

/************************\ SEARCH /************************/
.search { height:25px; margin: 0 auto; padding:0; text-align:center; display: inline-block;}
.search form { margin: 0; padding: 0;}
.search fieldset { margin: 0; padding: 0; border: none;}
.search input { width: 100%; outline: none; display: inline-block; text-align:center; text-transform:uppercase; font-weight:900; font-size:1em; margin:0; padding:5px 10px;}
#sbmt { display:none; }
/************************\ END SEARCH /************************/

/************************\ POST /************************/
.post { position:relative; padding: 5px; vertical-align: middle; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}

.music { position:relative;}
.music img { height: 80%; position: absolute; right: 0; z-index: 2; padding: 15px 25px; background: #000;}
.box { background-color: #000; z-index:2;}
.player { height: 150px;}

.permalink { margin-top:10px; text-align: left;}

.ask { float: left; width:100%; padding:0 10px; margin-left: 24px;margin-top: -24px;}}
.ask p {padding:0; margin:0;}
.asker_img { float: left; }
.chat { margin: 0; padding: 0 0 15px; list-style: none;}
.label { font-weight: 900; }

.link { text-decoration:underline; font-weight:900;}
/************************\ END POST /************************/

#infscr-loading { position: fixed; bottom: 10px; left: 10px; padding: 5px 10px; background: #FFF; z-index: 99999;}
#infscr-loading img { float: left; width: 25px;}
#infscr-loading div { float: left; line-height: 25px; margin-left: 5px;}

#load { cursor:pointer; font-size: 15px; font-weight: 900; line-height: 90%; text-transform: uppercase; -webkit-transition: all 0s ease; -moz-transition: all 0s ease;     -o-transition: all 0s ease; transition: all 0s ease; }
#scroll-top { display:none; position:fixed; bottom:10px; right:10px; padding: 10px 7px;}

@-webkit-keyframes fade { from{ opacity:0;} to { opacity:1;}}
@-moz-keyframes fade { from{ opacity:0;} to { opacity:1;} }
@-o-keyframes fade { from{ opacity:0;} to { opacity:1;} }
@keyframes fade { from{ opacity:0;} tp{ opacity:1;}}
@-webkit-keyframes cssAnimation { from { -webkit-transform: translate(-100%); } to { -webkit-transform: translate(0); } }
@-moz-keyframes cssAnimation { from { -moz-transform: translate(-100%); }
to { -moz-transform: translate(0); } }
@-o-keyframes cssAnimation { from { -o-transform: translate(-100%); } to { -o-transform: translate(0); } }
@-webkit-keyframes post { from { -webkit-transform: opacity:0; }to { -webkit-transform: opacity:1; } }
@-moz-keyframes post { from { -moz-transform: opacity:0; } to { -moz-transform: opacity:1; } }
@-o-keyframes post { from { -o-transform:opacity:0); } to { -o-transform: opacity:1; } }

/************************\ INDEX PAGE /************************/
.post { float: left; width: 45.5%; display: inline-block; margin: 15px; padding: 0;}
.photo img {display:block;}
.photo .imgset li:first-child  {display:block;}
.photo .imgset li {display:none;}

.text {padding:2em 2em 4em;}
.pad { padding: 10px 25px 25px !important;}
.gap {padding: 10px 20px!important;}
.no-pad {margin: -2em -2em 0;}
.no-pad iframe,.no-pad embbed { width: 100%!important; height: 35vh!important;}

.caption { padding:5px 0; margin:5px 0 0;}
.caption p { margin:0; padding:0;}

.icon ,.icon .like_button { float: right; display:inline-block; width: 17px!important; height: 17px!important; padding: 4px 0 0 10px; text-align: center;Color: #000; cursor: pointer;}
.icon a { margin: 4px auto;}
.perma { position:relative; float: left; padding: 4px 0 0; font-size:1.1em; height: 21px; font-weight: 900;}
.perma:hover span { visibility: visible; opacity:1;}
.perma span { position: absolute; width: 60px; padding: 0; margin: 5px 10px; line-height: normal; font-size: 1em; background: transparent; color: #444; font-style: normal; text-transform: uppercase; opacity: 0; z-index: 1; visibility: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.ctrl { width:19px; height:19px; padding: 0 4px; margin: 0; text-indent: 22px; color: transparent; line-height: 29px; text-align: left; float: left;}
.ctrl:hover {width:auto;color:#444;}
.fb:before, .twit:before { content: ''; position: absolute; margin:5px 0 0 -22px; height: 19px; width: 19px; background: url('http://assets.tumblr.com/images/dashboard_master_sprite.png') no-repeat;}
.fb:before { background-position: -471px -301px;}
.twit:before { background-position: -471px -331px;}

.icon, .perma { cursor: pointer; opacity:.5; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.icon:hover, .perma:hover { opacity:1;}

.photo {padding:0!important; width: 45.5%!important;}
.hover:hover img { -webkit-transform: matrix(1.05,0,0,1.05,0,0); -moz-transform: matrix(1.05,0,0,1.05,0,0); -o-transform: matrix(1.05,0,0,1.05,0,0); transform: matrix(1.05,0,0,1.05,0,0);}
.hover:hover img.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray;}
.hover {position:relative; text-align:center;}

.bg,.dtl,.hover img,.dtl a ,.dtl .icon,.dtl .like_button {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px);}

.hover:hover .bg,.hover:hover .dtl { -webkit-transform: translate(0px, 8px); -moz-transform: translate(0px, 8px); -ms-transform: translate(0px, 8px); transform: translate(0px, 8px);}

.dtl { opacity:0; visibility:hidden; position: absolute; width:100%; bottom:0; left:0; z-index:2; text-align:left;}
.dtl .info { padding:3em; margin:0;}
.dtl a { color:#fff; font-size:2em; font-weight:900;}
.dtl a ,.dtl .icon,.dtl .like_button { opacity:.6; }
.dtl a:hover ,.dtl .icon:hover,.dtl .like_button:hover { opacity:1; }
.dtl .icon { opacity:1; margin-top: -5px; padding-left:12px;}
.bg { z-index:1; opacity:0; visibility:hidden; background:#000; width:98%; height:98%; margin:1%; left:0; top:-8px; position:absolute;}

.hover:hover .dtl { opacity:1; visibility:visible;}
.hover:hover .bg { opacity:.6; visibility:visible; box-shadow: inset 0 0 0 1em #FFf;}

/************************\ END INDEX PAGE /************************/

/************************\ RESPONSIVE STYLE /************************/
@media only screen and (max-width: 695px){ #foot,.side {position:relative; max-width:330px;} #menu { position:relative!important; max-width:100%;} #content {margin: 0;} .post{width:100%; margin:10px 0;} .text {padding:2em 2em 4em;}.photo {width:100%!important;}}
@media only screen and (min-width: 700px) and (max-width: 999px){ #content {margin-left: 2.1%;} #menu { position:relative!important; max-width: 100%!important;} .links { left: -50%; right: -50%; } #foot { max-width:600px;}}
@media only screen and (min-width: 1000px){ #wrap { max-width: 100%;} #foot,#content{margin-left: 30.7%;} #menu {min-height:100%;} .links {position: absolute; width: 100%; left: 0;} .links ul li,.links ul li a { display: block; margin: 1px 0;} .search{display:block!important;} #menu {-webkit-animation: cssAnimation 2.5s 1 ease-in-out; -moz-animation: cssAnimation 2.5s 1 ease-in-out;-o-animation: cssAnimation 2.5s 1 ease-in-out;} .post {-webkit-animation: post 2.5s 1 ease-in-out; -moz-animation: post 2.5s 1 ease-in-out;-o-animation: post 2.5s 1 ease-in-out;}} 
@media only screen and (max-width: 1000px){ #notes { margin-left: 100px;}}
/************************\ END RESPONSIVE STYLE /************************/