@import "https://fonts.googleapis.com/css?family=Lato:300,400,500,600,700";
@import "https://fonts.googleapis.com/css?family=Roboto";
@import "https://fonts.googleapis.com/css?family=Faster+One";
@import "https://fonts.googleapis.com/css?family=Racing+Sans+One";
body, html {
    height: 100%;
}

.hero-image {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/hero.jpg");
	height: 70%;
}

.error-image {
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/error404.jpg");
	height: 90%;
}

.hero-image,.error-image {	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.hero-image img, .hero-text, .hero-follow{
	text-align: center;
	position: absolute;
}

.hero-image img{
	top:5%;
	left: 2%;
	transform: translate(-2%, -5%);
}

.hero-follow{
	top:5%;
	right: 2%;
	font-size: 1.85rem;
}

.error-text {
	color: white;
	font-family: 'Racing Sans One', sans-serif;
}

.hero-text {
	top: 65%;
	left: 50%;
	transform: translate(-50%, -65%);
	color: white;
	font-family: 'Racing Sans One', sans-serif;
}

.hero-text h1 span{
	font-family: 'Faster One', sans-serif;
}

.roboto{
	font-family: 'Roboto', sans-serif;
}

.text-small{
	font-size: 0.95em;
}

.rounded {
    border-radius: .25rem!important;
}

.minh-400{
	min-height:400px;
}

.pj-logo{
	height:25px;
	width:79px;
	margin-left:3px;
	vertical-align:middle;
	margin-bottom:2px;
}

.z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)!important;
}

.view{
	position: relative;
    overflow: hidden;
    cursor: default;
}

body {
    font-family: 'Lato', sans-serif;
    background: #fff;
}

p {
    font-family: 'Lato', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #222;
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
	color: #fff;
}

#sidebar ul li a:hover {
    color: #fff;
    background: #3b444c;
	text-decoration: none;
}

#sidebar ul li.active>a{
    color: #fff;
    background: #6d7fcc;
}

#sidebarCollapse{
	display: none;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

.modal-content{
	border-width:0!important;
}

.modal-footer, .table th{
	border-top:0!important;
}

.modal-body td{
	font-size:0.8125rem
}

.file-field input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}

.file-field .file-path-wrapper {
    overflow: hidden;
    padding-left: 10px;
    height: 2.5rem;
}

.file-field input.file-path {
    width: 100%;
    height: 36px;
}

.breadcrumb{
	padding:0;
	margin-bottom:1.5rem;
	background-color:transparent;
	border-radius:0;
}

.img-pholder{
	border:1px solid #aaa;
	width: 100%;
	padding-top: 100%; /* 1:1 Aspect Ratio */
	position: relative; /* If you want text inside of it */
}

.img-pholder div{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.upl-bttn{
	box-sizing:border-box;
	max-width:100%;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

main{
	width: calc(100% - 250px);
	min-height: 100vh;
	transition: all 0.3s;
	position: absolute;
	top: 0;
	right: 0;
}

#content{
	padding: 30px;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 991px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse{
        display: block;
    }
	main {
        width: 100%;
    }
    main.active {
        width: calc(100% - 250px);
    }
	.nav_bar{
		display:none;
	}
}