@font-face {
    font-family: 'gothamlight';
    src: url('fonts/gothamlight-webfont.eot');
    src: url('fonts/gothamlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gothamlight-webfont.woff2') format('woff2'),
         url('fonts/gothamlight-webfont.woff') format('woff'),
         url('fonts/gothamlight.ttf') format('truetype'),
         url('fonts/gothamlight-webfont.svg#gothamlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'GothamMedium';
    src: url('fonts/gothammedium-webfont.eot');
    src: url('fonts/gothammedium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gothammedium-webfont.woff2') format('woff2'),
         url('fonts/gothammedium-webfont.woff') format('woff'),
		 url('fonts/gothammedium.ttf') format('truetype'),
         url('fonts/gothammedium-webfont.svg#gothammedium') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{
	margin: 0px;
	padding: 0px;
}

#align-left{
	justify-content: flex-start;
}
#align-right{
	justify-content: flex-end;
}

.admin-login-cont{
	display: flex;
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #18442B;
}
.admin-login{
	width: 400px;
	background-color: #fff;
	padding: 100px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	margin: auto;
	text-align: center;
}
.admin-login input[type=text], .admin-login input[type=password]{
	padding: 10px;
	font-family: GothamLight,GothamMedium,sans-serif;
	border: 1px solid #333;
	border-radius: 5px;
	font-size: 35px;
	margin-top: 10px;
	text-align: center;
}
.admin-login input[type=submit]{
	padding: 10px;
	font-family: GothamLight,GothamMedium,sans-serif;
	border: 1px solid #333;
	border-radius: 5px;
	font-size: 35px;
	margin-top: 10px;
	text-align: center;
	background-color: #18442B;
	color: #fff;
}

.admin-login input[type=submit]:hover{
	text-decoration: underline;
	cursor: pointer;
}



.admin-header-cont{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width: 100%;
	/*border: 1px solid #0F0;*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20px;
}
.header-mainitems{
	display: flex;
	/*justify-content: center;*/
	align-items: flex-start;
	/*border: 1px solid #0F0;*/
	width: 30%;
	}
.header-cart-link{
	font-family: GothamLight,GothamMedium,sans-serif;
	color: #888;
	text-align: center;
	text-decoration: none;
}
.header-cart-link:hover{
	text-decoration: underline;
}
.header-menu{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	text-align: center;
	width: calc(100% - 200px);
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #18442B;
	padding: 20px 80px;
	border-radius: 7px;
}
.header-menu-item{
	justify-content: space-between;
	font-family: GothamLight,Arial;
	color: #fff;
	font-size: 15pt;
	text-decoration: none;
}


.header-menu-item:hover{
	text-decoration: underline;
}

.admin-products-form{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: 1px;
	
}
.products-form-item{
	margin: 50px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 18px;
	border: 1px;
}

.products-form-item input, .admin-edit-cont input{
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 18px;
	border: solid 1px;
}

.products-form-item select{
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 18px;
}

.admin-product {
  width: calc(100% - 200px);
  background: #eee;
  margin : 30px auto;
  font-family: GothamLight,GothamMedium,sans-serif;
}

.span {
  padding : 20px;
  background : #18442B; 
  color : white;
  font-size : 1.2em;
  font-variant : small-caps;
  cursor : pointer;
  display: flex;
  justify-content: space-between;
  
}

.slide {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  display: none;
  clear:both;
  width:100%;
  overflow: hidden;
  text-align: center;
  flex-direction: row;
  padding: 20px;
}
.section-name{
	font-family: GothamLight,GothamMedium,sans-serif;
	width: 100%;
	text-align: center;
	font-size: 36px;
	color: #666;
	margin-top: 50px;
}


.product-table{
	width: calc(100% - 300px);
	margin: auto;
	border-collapse: collapse;
}
.product-table th{
	padding: 5px;
	vertical-align:middle
}
.product-table td{
	border-top: solid 1px;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

.product-table input[type='number']{
    width: 40px;
} 
.active_light{
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: green;
	margin-top:auto;
}
.inactive_light{
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: red;
	margin-top:auto;
}
.button_green{
	width: 90px;
	padding: 5px;
	background-color: green;
	border-radius: 3px;
	font-family: GothamLight,GothamMedium,sans-serif;
	color: white;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	margin: 0px;
}
.button_red{
	width: 90px;
	padding: 5px;
	background-color: red;
	border-radius: 3px;
	font-family: GothamLight,GothamMedium,sans-serif;
	color: white;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	margin: 0px;
}
.button_orange{
	padding: 5px 10px;
	background-color: orange;
	border-radius: 3px;
	font-family: GothamLight,GothamMedium,sans-serif;
	color: white;
	-webkit-appearance: none;
	appearance: none;
	border: none;
}

.button_add{
	display: block;
	padding: 10px 15px;
	background-color: purple;
	border-radius: 2px;
	font-family: GothamLight,GothamMedium,sans-serif;
	color: white;
	-webkit-appearance: none;
	appearance: none;
	border: none;
}

.button_red:hover, .button_green:hover, .button_orange:hover, .button_add:hover{
	cursor: pointer;
}

.cart-colors-ball{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width:30px;
	height:30px;
	border-radius: 22px;
	overflow: hidden;
	justify-content: center;
}
.backgrounds{
		display: none;
		position: fixed;
		margin: 0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		z-index: 2;
		top: 0px;
		left: 0px;
	
}
.backgrounds:hover{
	cursor: pointer;
}

.add_ref{
	font-family: GothamLight,GothamMedium,sans-serif;
	display: flex;
	flex-direction: column;
	background-color: white;
	min-width: 400px;
	min-height: 400px;
	margin: auto;
	border-radius: 10px;
	z-index: 3;
	padding: 30px;
}
.add_ref:hover{
	cursor: default;
}

.add_ref input[type=text], .add_ref input[type=number], .add_ref select{
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 18px;
	border: solid 1px;
}
.prod_iconos{
	display: flex;
	flex-direction: row;
}
.prod_iconos div{
	margin: 0px 0px -20px 10px;
}

.admin-edit-cont{
	width: 100%;
	display: flex;
	flex-direction:column;
	align-items: center;
	font-family: GothamLight,GothamMedium,sans-serif;
}
.admin-edit-form input[type=number], .admin-edit-form input[type=text], .admin-edit-form select, .admin-edit-form textarea{
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 18px;
	border: solid 1px;
	resize: none;
}
.admin-telas{
	width: 100%;
	display: flex;
	justify-content: center;
}
.telas-tabla {
  width: calc(100% - 200px);
  min-width: 300px;
  background: #fff;
  margin : 30px auto;
  font-family: GothamLight,GothamMedium,sans-serif;
  	border-collapse: collapse;
}
.telas-tabla th {
	padding: 10px;
	background: #ddd;
}
.telas-tabla tr:nth-child(even) {
	background: #efefef;
}
.telas-tabla td {
	padding: 10px 5px;
	text-align: center;
}
.admin-telas input[type=text], .admin-telas select, .admin-telas input[type=number]{
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 18px;
	border: solid 1px;
}

.config-cont{
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 16px;
	color: #333;
}
.config-section{
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 22px;
	font-weight: bold;
	margin-top: 50px;
}


label.label input[type="file"] {
  position: absolute;
  top: -1000px;
}
.label {
  cursor: pointer;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 5px 15px;
  margin: 5px;
  background: #dddddd;
  display: inline-block;
}
.label:hover {
  background: #5cbd95;
}
.label:active {
  background: #9fa1a0;
}
.label:invalid+span {
  color: #000000;
}
.label:valid+span {
  color: #ffffff;
}

.order-cont{
	max-width: 1500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 15px;
	color: #333;
	margin: 50px auto;
}
.order-cont select, .order-cont input[type=text], .order-cont textarea{
	font-family: GothamLight,GothamMedium,sans-serif;
	padding: 5px;
	font-size: 18px;
}
.order-hor-cont{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 50px;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 15px;
}
.order-data, .order-data div{
	margin: 10px;
	text-align: center;
	font-size: 18px;
}
.order-table{
	width: 100%;
	font-family: GothamLight,GothamMedium,sans-serif;
	font-size: 16px;
	color: #333;
	border-collapse: collapse;
	text-align: center;	
}
.order-table tr{

}
.order-table td{
	border-top: 0.5px solid #000;
	/*border: 0.5px solid #000;*/
	height: 80px;
	border-collapse: collapse;
	text-align: center;
	justify-content: center;
}
.order-title{
	font-size: 25px;
	font-weight: bold;
}
#order-ok{
	background-color: green;
	color: #FFF;
}
#order-pending{
	background-color: orange;
	color: #FFF;
}
#order-bad{
	background-color: red;
	color: #FFF;
}
.order_button{
	display: block;
	padding: 13px 20px;
	background-color: purple;
	border-radius: 2px;
	font-family: GothamLight,GothamMedium,sans-serif;
	color: white;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	font-size: 25px;
}
.order_button:hover{

	text-decoration: underline;
	cursor: pointer;
}
.order-new-prod{
	display: none;
}
#order-new-prod1{
	display: block;
}


@media (max-width: 1150px){
    .header-menu{
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px 20px;
	width: calc(100% - 50px);
	}
	
	.header-menu-item{
		/*display: none;*/
		margin: 7px;
		font-size: 30pt;
	
	}
	#header-plastics{
		display:none;
	}
	.admin-product {
		width: calc(100% - 50px);
		background: #eee;
		margin : 40px auto;
		font-family: GothamLight,GothamMedium,sans-serif;
		font-size: 30pt;
}
		.telas-tabla {
		width: calc(100% - 50px);
		background: #eee;
		margin : 40px 0px;
		font-family: GothamLight,GothamMedium,sans-serif;
		/*font-size: 20pt;*/
}
}