@charset "utf-8";
/* CSS Document */

/* ========== tablet ========== */

@media screen and (max-width: 1020px) {
	
    /* ========== grid ========== */
    
.row{width:90%;margin:0 auto;padding:0px 20px}.column{width:auto !important;float:none;margin:0px 0px 10px 0px}.column:child{width:auto}.column:before,.column:after{content:"";display:table}.column:after{clear:both !important}.left,.right{float:none !important}
	
    /* ========== content ========== */
    
    menu {
        width: 100%;
        height: 0px;
        margin: -10px auto 0px auto;
        padding: 0px;
        top: 0px;
        overflow: hidden;
        text-align: center;
        -webkit-transition: height 300ms linear;
        -moz-transition: height 300ms linear;
        -o-transition: height 300ms linear;
        transition: height 300ms linear;
    }
    menu ul {
        width: 100% !important;
        height: auto;
        clear: left;
        border: none;
		margin: 10px 0px 0px 0px;
    }
    menu li {
        max-width: 280px !important;
        margin: 0px auto !important;
        padding: 10px 0px;
        display: block;
        border-top: 1px solid rgb(100, 100, 100);
    }
    menu li:first-child {
        border: none;
    }
    menu li:after {
        display: none;
    }
    menu li.spacer {
        display: none;
    }
    label.menubtn {
        display: block;
        color: rgb(255, 255, 255);
        cursor: pointer;
        text-align: center;
		margin: 20px 0px 0px 0px;
    }
    label.menubtn:after {
        font-family: 'custom';
        font-size: 25px;
        content: "\e001";
    }
    #toogle:checked + menu {
        height: 310px;
    }
	.access ul {
		float: none;
		margin: 20px auto;
		display: table;
	}
	.logo {
		float: none;
		margin: 30px auto;
		display: table;
	}
	.content h1, .content h2, .content h4, .content #treeview {
		text-align: center;
	}
	.thumbs {
	  max-width: 60%;
	  margin: 20px auto;
	}
	.thumbs a {
		height: auto;
	}
	.details .options {
		text-align: center;
	}
	.details  .options .price {
		float: none;
	}
	.details .options .formtext {
		width: 100%;
		float: none;
		display: table;
		text-align: center;
		font-size: 13px;
	}
	.details .options .mainbutton {
		position: relative;
		right: 0px;
		bottom: 0px;
		margin: 20px auto;
	}
	.details .options .optionshead {
	  padding: 30px 0px 10px 0px;
	}
	.description p {
		text-align: center;
	}
	.form h3, .form p, .formtext, .form a {
		width: 100%;
		text-align: center;
	}
	a.mainbutton, #table a {
		margin: 10px auto;
		float: none;
	}
	select.formsfixed, input.formsfixed, .formsmulti {
		display: table;
		margin: 10px auto;
		float: none;
		clear: both;
	}
	.required, .formicon {
		float: none;
		display: table;
		margin: 5px auto 30px auto;
	}
	.details {
		max-width: 60%;
		margin: 20px auto;
	}
	#cartscreen {
		max-width: 80%;
		margin: 20px auto;
	}
	#cartscreen .step {
		width: 100%;
		display: none;
	}
	#cartscreen .step.active, #cartscreen .step p span {
		display: inline-block;
	}
	.buttons a {
		float: none !important;
		display: table;
		margin: 20px auto;
	}
	#table {
        padding: 0px;
        line-height: 30px;
		text-align: center;
    }
    #table table,
    #table thead,
    #table tbody,
    #table th,
    #table td,
    #table tr {
        display: block;
    }
    #table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    #table tr {
        border: 1px solid #ccc;
        margin: 15px 0px;
    }
    #table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        min-height: 60px;
    }
    #table td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    #table td:nth-of-type(1):before {
        content: "Code";
    }
    #table td:nth-of-type(2):before {
        content: "";
    }
    #table td:nth-of-type(3):before {
        content: "Product";
    }
    #table td:nth-of-type(4):before {
        content: "QTY";
    }
    #table td:nth-of-type(5):before {
        content: "Price";
    }
    #table td:nth-of-type(6):before {
        content: "Total";
    }
    #table td:nth-of-type(7):before {
        content: "Remove";
    }
	#table #orders td:nth-of-type(1):before {
        content: "Date";
    }
    #table #orders td:nth-of-type(2):before {
        content: "Invoice Number";
    }
    #table #orders td:nth-of-type(3):before {
        content: "Amount";
    }
    #table #orders td:nth-of-type(4):before {
        content: "Status";
    }
    #table #orders td:nth-of-type(5):before {
        content: "View";
    }

	.totals, .celltotal {
		min-width: auto;
		float: none;
		display: table;
		margin: 5px auto;
		text-align: center;
	}
	.form label {
		float: none;
		margin: 5px auto 10px auto;
		display: table;
	}
	.cellhalf {
		width: 100%;
		float: none;
		margin: 20px auto;
	}
	.cellform {
		width: 100%;
		float: none;
		text-align: center;
	}
	.account .panel {
		padding: 25px;
		text-align: center;
	}
	#blog, #rightcol {
		max-width: 80%;
		margin: 0px auto;
	}
	#blog .details {
		max-width: 100%;
	}
	#rightcol {
		text-align: center;
	}
	#rightcol .panel:first-child {
		border: none;
	}
	#rightcol li a {
		padding: 5px 0px;
	}
	#OP_dynamic p, #OP_dynamic input, #shipping p, #payment p {
		float: none;
		margin: 15px auto;
	}
	#OP_dynamic a {
		clear: both;
		margin: 10px auto;
	}

}