@import url("normalize.css");
@import url("bootstrap.css");
@import url("general.css");
@import url("font-awesome.css");
@import url("animate.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic&subset=latin,latin-ext);
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; opacity: 1; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; opacity: 1; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }

@keyframes skew {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
  }
}

body { background: #eceff1; font-family: 'Roboto', sans-serif; font-size: 14px; color: #898989;}
a {outline: none !important; border: none;}
a:hover {outline: none !important; border: none; text-decoration: none;}
article h1, article h2, article h3, article h4, article h5, article h6 { margin: 10px 0; }


/* === Header === */
.header {background: #404040; border-bottom: 3px solid #3a3a3a; padding: 10px 0; width: 100%; position: fixed; top: 0; z-index: 9; left: 0; box-shadow: 1px 1px 5px #5F6061;}
.header .add-btn {float: right; background: #00bfa5 url(../../img/add-btn.png) center center no-repeat; width: 50px; height: 50px; display: block; border-radius: 5px;}
.search input[type="text"] {background: #2b2b2b; padding: 15px 50px 15px 20px; border-radius: 5px; font-size: 16px; transition: all ease 0.5s;}
.search input[type="text"]:focus {background: #ffffff;}
.search input[type="submit"] {right: 10px; left: inherit; background: url(../../img/search.png) center center no-repeat;}
/* === Header === */

/* === Section === */
.section.text { text-align: center; padding: 100px 0 40px 0;}
.section.text .logo  {display: inline-block;}
.section.text .logo img {max-width: 240px;}
.section.text p {margin: 15px 0;}
.section.text .add-btn {background: #00bfa5 url(../../img/add-btn.png) 15px center no-repeat; padding:10px 20px 10px 55px; transition:all ease 0.3s; border-bottom: 2px solid #01907C; border-radius: 5px; font-size: 17px; color: #ffffff; display: inline-block;}
.section.text .add-btn:hover {background-color: #01907C; border-color: #015045;}

.section.list .main {padding: 0;}
.section.list .box1 {background: #dedfe0; min-height: 600px;}
.section.list .box {background: #ffffff; border-radius: 5px; box-shadow: 0px 0px 5px #C1C1C1; overflow: hidden;}
.section.list .item {border-bottom: 1px solid #eceff1; margin: 0; padding: 10px 0; transition: all ease 0.3s;}
.section.list .item:hover {background: #fafafa;}
.section.list .item > .row {margin: 0;}
.section.list .item .title {color: #464646; line-height: 40px;}
.section.list .item .title span.icon {background: #880e4f; border-radius: 5px; color: #ffffff; padding: 5px;}
.section.list .item .date {text-align: right; line-height: 40px;}
.section.list .item p {margin: 15px 0;}
.section.list span.like.on i {color: #00bfa5;}
.section.list span.dislike.on i {color: #00bfa5;}
.section.list .like-btn a {display: inherit; color: #898989;}
.section.list .like-btn i {font-size: 20px;}
.section.list .like-btn span {margin-right: 20px;}
.section.list .share ul {list-style: none; float: right;}
.section.list .share ul li {float: left; margin-left: 10px;}
.section.list .share ul li a {display: block; color: #fff; background: #537abb; border-radius: 100%; font-size: 12px; line-height: 24px; width: 24px; text-align: center;}
.section.list .share ul li.twitter a {background: #78caee;}

.modal-open {overflow-y: auto;}
.modal-content {overflow: hidden;}
.modal-title {background: #00bfa5; color: #ffffff; position: relative; border-bottom: 5px solid #00b098;}
.modal-title h2 {margin:0; font-size: 20px; line-height: 20px; font-weight: 400; text-align: left; padding: 20px 60px;}
.modal-title .icon {position: absolute; left: 15px; margin-top: -17px; top: 50%;}
.modal-title .closeBtn {position: absolute; right: 10px; top: 50%; margin-top: -12px; line-height: 24px; font-size: 24px; color: #ffffff;}
.modal-content .modal-main {padding: 0 15px 15px 15px;}
.modal-content .modal-main .item {position: relative; margin-top: 15px; overflow: hidden;}
.modal-content .modal-main .item .character {position: absolute; bottom: 5px; right: 5px; font-size: 11px; color: #CACACA;}
.modal-content .modal-main .item .btnx {background: #00bfa5; transition: all ease 0.3s; font-size: 18px; font-weight: 300; border-radius: 5px; border-bottom: 2px solid #01907C; line-height: 40px; width: 200px; text-align: center; float: right; display: block; color: #fff;}
.modal-content .modal-main .item .btnx:hover {background-color: #01907C; border-color: #015045;}
/* === Section === */

/* === Footer === */
/* === Footer === */

.form-control { padding: 6px 12px !important; border: 1px solid #ccc !important;}

/*
*   Owl Carousel Css
* v1.3.3
*/
.owl-theme .owl-controls{margin-bottom:20px;text-align:center}
.owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;*display:inline;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:.5}
.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none}
.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline}
.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#869791}
.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter:Alpha(Opacity=100);opacity:1}
.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}
.owl-item.loading{min-height:150px;background:url(AjaxLoader.gif) no-repeat center center}


.user {float: left; position: relative; padding: 10px 0 10px 50px; color: #cccccc; margin-top: 7px;}
.user p {margin: 0;}
.user img {border-radius:100%; position: absolute; left: 0; top:0; max-width: 40px;}
.fbLogin {text-align: right;}
.fbLogin img {margin-top:7px; border-radius:5px; max-width:40px;cursor:pointer}

/* ============================================================================================================  
  Responsive Css
============================================================================================================ */
@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
  .section.list .main {padding: 0 15px;}
    .user {display: none;}
}
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
  .header .logo img {max-width: 35px; min-width: 35px;}
  .search input[type="text"] {padding: 7px 35px 7px 10px; font-size: 15px; line-height: 21px;}
  .header .add-btn {width: 34px; height: 34px; background-size: 60%;}
  .headder #facebook {position: absolute; right: 5px; bottom: 0; margin-bottom: -40px;}
  .fbLogin img {max-width:30px; margin-top: 2px;}
  .section.text {padding: 80px 0 40px 0;}
}
@media screen and (max-width: 479px) {
  .section.list > .container > .row {margin: 0;} 
  .section.list .main {padding: 0; }
  .section.list > .container {padding: 0;} 
  .section.text .logo img {max-width: 50%; display: inline-block;}
  .section.text p, .section.list .main {font-size: 12px;}
  .section.list .box {border-radius: 0;}
  .section.text {padding: 80px 0 25px 0;}
  .modal-content .modal-main .item .btnx {width: 100%;}
}
/* ============================================================================================================  
  Responsive Css
============================================================================================================ */