@media not print {

	/************ MASONRY START ***************/
	@media(max-width:1230px){
		 .grid-item{
			 width: 28.303% !important; /* 300px */

		}
	}

	@media(max-width:730px){
		 .grid-item{
			 width: 44% !important; /* 300px */

		}
	}

	@media(max-width:590px){
		 .grid-item{
			 width: 43% !important; /* 300px */
		}
	}

	@media(max-width:510px){
		 .grid-item{
			 width: 85% !important; /* 300px */
		}
	}

	@media(max-width:450px){
	   .grid-item{
			 width: 90% !important; /* 300px */
		}

	}

	@media(max-width:370px){

		.grid-item{
			 width: 87% !important; /* 300px */
		}

	}


	@media(max-width:320px){

		.grid-item{
			 width: 100% !important; /* 300px */
		}
	}

	/************ MASONRY END ***************/
	@media(max-width:900px)
	{

        header .company .tag{
            display: block;
        }

		table{
			margin-top:15px;
		}

		table, thead, tbody, th, td, tr {
			display: block;
			border:0 !important;
	    }

	    thead,th{
	    	display:none;
	    }

		table,
		table.table-bordered,
		table.table-striped{
			border:0 !important;
			outline: 0;
		}


		tr{
		  	border-style: solid !important;
			/* border-width: 2px !important; */
            /* box-shadow: 5px 10px; */
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            border-radius: 10px;
			margin-bottom:10px;
		}

	   td{
	    	width:100%;
			border: none;
			border-bottom: 1px solid #eee;
			padding-left: 50%;
			font-weight:100;
			white-space:nowrap;
			text-align:left;
			vertical-align:middle;
			overflow-x:auto;

		}

	      td:before {
			display:inline-block;
			width: 45%;
			height:100%;
			padding-right: 10px;
			white-space: normal;
			text-align:left;
			font-size:0.9em;
			font-weight: bold;
			margin-bottom: 10px;
			content: attr(column-title);
	    }


	      td.action{
			width:100%;
			border: none;
			border-bottom: 1px solid #eee;
			padding-left: 0;
			font-weight:100;
			white-space:nowrap;
			text-align:center;
	     }

		  td.action:before {
			display:inline-block;
			width: 0%;
			height:100%;
			padding-right: 0px;
			white-space: normal;
			text-align:left;
			font-size:1.1em;
			font-weight: bold;
			content:"";
	    }

	    td.action a{
	    	margin-left: 1px;
	    	margin-right: 1px;
	    }

	    td.action .fa{
	    	font-size:1.5em;
	    }
	}


    @media(max-width:730px)
	{

        header .company {
            text-align:center;
        }
    }


    @media(max-width:600px)
	{

        header #nav-toggle {
            display: block;
        }

        header{
            position: fixed;
            top:0;
            left:0;
            right:0;
            height:80px;
            z-index:100;
            -webkit-box-shadow: 0 10px 10px -10px #000000;
            -moz-box-shadow: 0 10px 10px -10px #000000;
             box-shadow: 0 10px 10px -10px #000000;
        }

        header .company{
            font-size:1.4em;
        }

        header .path{
            font-size:0.8em;
            margin-bottom:2px;
            border:1px dotted #7367f0;
            padding:5px 0px 2px 0px;
            width:180px;
            text-align: center;
            margin:10px auto !important;
        }


        header .row > .col:not(.no-mobile) {
            display: block !important   ;
            width:100% !important;
            max-width:100% !important;
            flex:0 0 100% !important;
        }


        .placeholder{
            margin-top:70px;
            padding-left:5px;
            padding-right:5px;
            overflow-x:hidden;
        }

        .no-mobile{
            display: none !important;
        }
    }

    @media(max-width:470px)
	{
        header .action{
            text-align: center !important;
            margin-top:10px;
        }


        section#login{
            width:90%;
            margin:5px auto;
            display: block;
            background:#FFF;
            border:1px dashed #7367f0;
            border-radius: 10px;
            padding:10px 10px;
            top:5%;
            transform:translateY(5%);
        }
    }

    @media(max-width:990px) , (max-height: 505px){
        section#home #misc{
            text-align: center;
            position: static;
        }
        section#home #misc .analytics{
            /* margin-top:-20px; */
            font-size:0.7em;
            display: inline-block;
            width:40%;
            margin:0px 10px 0px 0px;
        }

    }
}