/*------------------------------------------------------------------
Theme Name: Astro
Theme URL: http://codnauts.com
Author: Codnauts
Author URI: http://themeforest.net/user/codnauts
Version: 1.0
Template License: Regular or Extended from ThemeForest only
Plugin Licenses: GPL or MIT
Last change: first release
Primary use: App & Mobile Website 
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
    0. General
    1. Typography 
    2. Colors & Backgrounds
    3. Animations
    4. Layout
    5. Input & Form Elements
    6. Navbar
    7. Drawer
    8. Sliders
    9. Elements
    10. Animation
    11. Toolbar
    12. Sidebars
    13. Elements
    14. Media Queries
/*---------------------------------------------------------------- */

/*  0. General
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
body, html {
    max-width: 100vw;
    overflow-x: hidden;
}
/*  1. Typography
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
img {
    max-width: 100%;
}
blockquote {
    margin: 30px 0;
}

/*  2. Colors & Backgrounds
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.white {
    background-color: #fff;
}
.white-text {
    color: #fff;
}
.black {
    background: #232323;
    /*background: -moz-radial-gradient(center, ellipse cover, #585858 0%, #232323 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #585858), color-stop(100%, #232323));
    background: -webkit-radial-gradient(center, ellipse cover, #585858 0%, #232323 100%);
    background: -o-radial-gradient(center, ellipse cover, #585858 0%, #232323 100%);
    background: -ms-radial-gradient(center, ellipse cover, #585858 0%, #232323 100%);
    background: radial-gradient(ellipse at center, #585858 0%, #232323 100%);
    background-size: 550% 450%;*/
}
.black-text {
    color: #232323;
}
.rose {
    background-color: #e91e63;
}
.rose-text {
    color: #e91e63;
}
.light-grey {
    background-color: #fafafa;
}
.opacity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.bg0 {
  background-image: url('../img/bg0.jpg');
}
.bg1 {
  background-image: url('../img/card-blog1.jpg');
}
.bg2 {
  ackground-image: url('../img/bg2.jpg');
}
.bg3 {
  background-image: url('../img/card-profile3.jpg');
}
.bg4 {
  background-image: url('../img/blog2.jpg');
}
.bg5 {
  background-image: url('../img/bg5.jpg');
}
.bg6 {
  background-image: url('../img/product2.jpg');
}

.bgc1 {
  background-image: url('../img/chris1.jpg');
}
.bgc4 {
  background-image: url('../img/chris4.jpg');
}
.bgc5 {
  background-image: url('../img/chris5.jpg');
}
.bgc6 {
  background-image: url('../img/chris6.jpg');
}


/*  3. Animations
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
    font-size: 24px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 20px;
}
/*  4. Layout
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.valign-wrapper {
    display: flex;
    align-items: center;
}
.valign {
    display: block;
    width: 100%;
}
#main {
    margin-top: 56px;
}
#main.with-tab {
    margin-top: 114px;
}
.product-page .main-raised {
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 10px;
    margin-right: 10px;
}
.content {
    padding-top: 32px;
}
.fullscreen {
    height: calc(100vh - 56px);
}
.contact-content {
    margin-bottom: 20px;
}
.contact-content .info {
    padding: 0 0 30px;
}
.section {
    padding: 20px 0;
}
.section.section-comments {
    padding: 20px 0;
}
.footer [class*="col"] {
    margin-bottom: 40px;
}
.info {
    padding-top: 40px;
}
.home-filter {
  padding:70px 20px 20px;
}
.relative {
  position: relative;
}

/* Grid */
.fluid-row {
  -webkit-backface-visibility: hidden;
}
.fluid-row:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.fluid-row .mix {
    display: inline-block;
    display: none;
    padding: 1px 1px 4px;
    box-sizing: border-box;
}
.fluid-row .fluid-xs-6 {
    width: calc(50% - 2px);
}


#Container .mix{
    display: none;
}
.no-padding {
    padding: 0;
}
.no-margin {
    margin: 0;
}
.container-fluid.no-padding [class*="col"] {
    padding-left: 1px;
    padding-right: 1px;
}
.row {
    margin-right: 0;
    margin-left: 0;
}
.m-t-40 {
    margin-top: 40px;
}
.p-t-40 {
   padding-top: 40px;
}
.p-t-20 {
   padding-top: 20px;
}
.m-t-20 {
   margin-top: 20px;
}

.m-b-40 {
    margin-bottom: 40px;
}
.p-b-40 {
    padding-bottom: 40px;
}
.more-p {
  padding: 120px 0;
}
.not-center {
  margin-top: -100px;
}
/* Masonry */
.msnry-container {
    margin-top: 40px;
}
.msnry-item {
    width: 50%;
    height: auto;
    float: left;
    margin: 0;
    padding: 1px;
}


/* Parallax Header */
.page-header {
    min-height: auto;
    height: auto;
    background-size: cover;
}
.header-filter:after {
    background: rgba(132, 13, 121, 0.88);
    background: linear-gradient(45deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
    background: -moz-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
    background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, 0.88) 0%, rgba(208, 44, 180, 0.31) 100%);
}
.page-header.fullscreen {
    height: calc(100vh - 56px);
}
.page-header .container,
.product-page .page-header .container {
    padding: 60px 20px 40px;
    text-align: center;
}
.page-header .title {
    font-size: 2.5em;
}
.product-page .title-row {
    margin-top: 0;
}
.page-header.profile-header {
    height: 240px;
}

/*  5. Input
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.input-group .input-group-addon {
    padding: 15px 15px 0;
}

/*  6. Navbar
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
#toolbar {
    width: 100%;
    height: 56px;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap; 
    transition: all .25s ease-in-out;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 
                0 3px 20px 0px rgba(0, 0, 0, 0.12), 
                0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
#toolbar.no-shadow {
    box-shadow: none;
}
#toolbar.with-tab {
    height: 112px;
}
#toolbar.with-tab .nav-tabs-navigation {
    flex: 0 0 100%;
}
#toolbar.with-tab .nav-tabs {
    text-align: center;
}
#toolbar.with-tab .nav-tabs>li {
    float: none;
    display: inline-block;
}
#toolbar .open-left {
    flex: 0 0 56px;
    line-height: 56px;
    text-align: center;
    position: relative;
}
#toolbar .open-right {
    flex: 0 0 56px;
    line-height: 56px;
    text-align: center;
    position: relative;
}
#toolbar .navbar-toggle {
    margin: 0;
    border: none;
    height: 56px;
    width: 56px;
}
#toolbar .navbar-toggle .icon-bar {
    margin-left: auto;
    margin-right: auto;
}
#toolbar i {
    color: #fff;
    margin-top: 16px;
}
#toolbar .branding {
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    line-height: 56px;
    text-align: center;
    margin: 0;
    flex-grow: 2;
}
#toolbar.left-only .branding {
    text-align: left;
    margin-left: 16px;
}
#toolbar.right-only .branding {
    text-align: left;
    margin-left: 16px;
}
#toolbar.transparent i,
#toolbar.transparent .branding {
  color: #222;
}
#toolbar.no-branding {
  justify-content: space-between;
}

/*  7. Drawer
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.side-nav {
  position: fixed;
  width: 280px;
  left: 0;
  top: 0;
  margin: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  height: 100%;
  height: calc(100% + 60px);
  height: -moz-calc(100%);
  padding-bottom: 60px;
  background-color: #fff;
  z-index: 9999;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow-y: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateX(-105%);
          transform: translateX(-105%);
}
#slide-out-right {
  width: 300px;
}
.side-nav.right-aligned {
    right: 0;
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
    left: auto;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.side-nav.right-aligned .card {
  margin: 5px 5px 10px;
  width: auto;
}
.side-nav.right-aligned .card.side-nav-card {
  width: 100%;
  margin: 0;
}
.drag-target {
  height: 100%;
  width: 25px;
  position: fixed;
  top: 0;
  z-index: 998;
}
#sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  will-change: opacity;
}
.side-nav .panel-group .panel+.panel {
  margin-top: 0;
}
.side-nav .panel .panel-heading {
  padding: 16px 20px;
  border-bottom: none;
}
.side-nav .panel .panel-heading .panel-title {
  font-family: "Roboto Slab", "Times New Roman", serif;
}
.side-nav .panel .panel-body {
    padding: 0;
}
.side-nav .panel .panel-body a {
    padding: 11px 16px 11px 32px;
    display: block;
    font-size: 13px;
    color: #3C4858;
    cursor: pointer;
}
.card.side-nav-card {
   box-shadow: none;
    border-radius: 0;
    background: url(../img/blog3.jpg) no-repeat top / cover;
    margin: 0;
    min-height: 160px;
    position: relative;
}
.card.side-nav-card .content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    color: #fff;
}
.card.side-nav-card .author .avatar {
    width: 64px;
    height: 64px;
}
.card.side-nav-card .info-title {
  font-size: 1.3em;
}

/*  8. Sliders
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.swiper-container {
    width: auto;
    height: auto;
    margin: 0;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    position: relative;
}
.swiper-slide .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 40px;
    z-index: 2;
}

/* Testimonials */
.testimonials {
  padding: 70px 40px 30px;
}
.testimonials .avatar {
  margin: 40px auto 10px;
  width: 72px;
  height: 72px;
}
.testimonials .testimonial {
  padding: 20px;
  border-radius: 6px;
  background: #01acc6;
  color: #fff;
  position: relative;
  opacity: 0.3;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  font-style: italic;
}
.swiper-slide.swiper-slide-active .testimonial {
  opacity: 1;
}
.testimonials .testimonial:after {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #01acc6;
  position: absolute;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  bottom: -12px;
  left: 50%;
  margin-left: -15px;
}
.testimonials p {
    font-size: 15px;
}
.testimonials .avatar {
    border-radius: 50%;
}

/*  8. Elements
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Card */
.card-image a {
    display: block;
}
.portfolio-card {
    margin-bottom: 0;
}
.portfolio-card .btn.btn-just-icon {
    margin: 0 10px;
    padding: 0;
}
.portfolio-card .card-footer {
    margin-top: 0;
}
.portfolio-card .content {
    padding-top: 0;
    padding-bottom: 0;
}

/* Comments */
.section-comments .media .avatar {
    width: 40px;
    height: 40px;
}
.section-comments .your-comment .media .avatar {
    width: 64px;
    height: 64px;
}

/* Chat */
.chat .message p {
    margin-bottom: 0;
    font-size: 14px;
}
.chat span {
    font-size: 12px;
}
.chat ul li {
    width: 100%;
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
.chat ul li > img {
    float: left;
}
.chat ul li .message {
    margin-left: 55px;
    position: relative;
    padding: 12px 16px;
    border-radius: 4px;
}
.chat ul li .message.first {
    border-top-right-radius: 20px;
}
.chat ul li .message.last {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.chat ul li.message-left {
    margin-bottom: 36px;
}
.chat ul li.message-right .message.first {
    border-top-left-radius: 20px;
    border-top-right-radius: 4px;
}
.chat ul li.message-right > img {
    float: right;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
.chat ul li.message-right .message {
    margin-right: 55px;
    margin-left: 0;
    margin-bottom: 2px;
    background-color: #f1f1f1 !important;
}
.chat ul li.message-left > img {
    margin-right: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
.chat ul li.message-left .message {
    background-color: #f0f8ff;
    margin-bottom: 2px;
}
.message-right > span,
.message-left > span {
    margin-bottom: 20px;
    display: block;
}
.message-left > span {
    margin-left: 55px;
}
.photo-add {
    margin-top: 8px;
}
.photo-add .square-user {
    height: 48px;
    width: 48px;
    margin-right: 4px;
    float: left;
}
.chat-day {
    display: block;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}
/* Pagination */
.pagination {
    width: 100%;
    text-align: center;
}
.pagination > li {
    display: inline-block;
}
/* Tab */
.nav-pills.text-center li {
    float: none;
    display: inline-block;
}

/* Contact */
.page-header iframe {
  height: 250px;
  width: 100%;
  border: none;
}

/* Calendar */
.calendar table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
.calendar td,
.calendar th {
    padding: 0;
}
.calendar {
    text-align: center;
    padding: 0 20px 20px;
}
.calendar thead {
    color: #fff;
    opacity: 0.9;
    border: none;
}
.calendar tbody {
    color: #fff;
}
.calendar tbody td:hover {
    background-color: rgba(255, 255, 255, .2);
}
.calendar td {
    border: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: calc(13vw - 16px);
    height: calc(13vw - 16px);
    line-height: calc(13vw - 18px);
    margin: 5px;
}
.calendar .prev-month,
.calendar .next-month {
    opacity: 0.4;
}
.current-day {
    background: #fff;
    color: #000;
}
.calendar tbody td.current-day:hover {
    background-color: rgba(255, 255, 255, 1);
}
.event {
    cursor: pointer;
    position: relative;
}
.event:after {
    background: #fff;
    border-radius: 50%;
    bottom: 3px;
    display: block;
    content: '';
    height: 4px;
    left: 50%;
    margin: 0px 0 0 -2px;
    position: absolute;
    width: 4px;
}
.event.current-day:after {
    background: #fff;
}

/*  14. Media Queries
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 768px) {
    .navbar-toggle {
        display: block;
    }
    .container {
        width: auto;
        max-width: 100%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .msnry-item {
        width: 33.3333%;
        height: auto;
        float: left;
        margin: 0;
        padding: 1px;
    }

}




/* Visible Drag Target below 767 width*/
.drag-target { 
    display: block;
}
@media(max-width: 767px) {
	.drag-target { display: block;}
}