*{	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.ani{-webkit-transition: all 250ms ease-out; -moz-transition: all 250ms ease-out; -ms-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; transition: all 250ms ease-out;}

html, body{
	 overflow-x: hidden;  prevents horizontal scroll bars */
   -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
   height: 100%; /* fixes focus scrolling in Safari (OS X) */
	font-family: 'Roboto';
}


.campoDireccion { background-color: #fff;
   
    color: #999;
    padding: 1em; margin-top: 25px;
    width: 50%;
    font-size: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    display: inline-block;
    vertical-align: top;
    margin: 0 1%;
    border: 1px solid #ddd;}

.error-cont { display: table; position: absolute; width: 100%; height: 100%; background: #C3242A; text-align: center; }
.error-cont div { display: table-cell; vertical-align: middle; padding: 2em; text-align: center; }
.error-cont h2 { display: inline-block; color: #fff; text-align: center; }

select {
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>");
  background-color: #eaeaea;
  background-repeat: no-repeat;
  background-position: right 20px top 20px;
  background-size: 16px 16px;
  color: #999;
  padding: 1em;
  width: 100%;
  font-size: 1em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:0;
  outline:0;
  -webkit-border-radius: 0 0 0 0;
  -moz-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
  text-indent: 0.01px;
  text-overflow: ”;
  
}
@-moz-document url-prefix() { 
  select {
      background: #fff;
  }
}

ul{
    margin: 0;
    padding: 0;
}

#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:9996; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../img/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* Login */
.fondo { background: url(../img/fondo.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.fondo2 { background: #f6f6f6; }

#login { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 350px;  border: 7px solid rgba(0,0,0,0.3); position: absolute; top: 50%; left: 50%; margin-top: -180px; margin-left: -175px;}
.logo-login{display: block; width: 60%; margin: 1em auto; }
#login-cont {background: #fff; width: auto; background: #fff; padding: 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#login-cont ul {display: block; list-style: none;}
#login-cont li {padding: 0.5em; text-align: center; }
#login-cont li a {color: #999; font-size: 1em; text-decoration: none;}
#login-cont li a:hover {color: #2D88FF;}

#login-cont input[type="text"] {width: 100%; background: #eaeaea; padding: 1em; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #999;}
#login-cont input[type="password"] {width: 100%; background: #eaeaea; padding: 1em; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #999;}

#login-cont input[type="submit"] {width: 100%; background: #333; padding: 1em 0.5em; font-weight: 300; font-size: 1.1em; font-weight: 100; color: #fff; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0px 1px 1px #4d4d4d; }
#login-cont input[type="submit"]:hover {background: #2D88FF;}

/* HEADER */

header {position: fixed; top: 0; left: 0; z-index: 9998; display: block; width: 100%; background: #fff; -webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.5); box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.5);}
.logo-header{display: block; width: 130px; margin: 8px 10px; }
header ul {float: right; list-style: none; }
header ul li {float: left; margin-left: 1em; padding-top: 10px;}
header ul li a {display: block; padding: 0.5em; text-decoration: none; color: #666;}
header ul li a:hover {color: #d60e2e;}
header .icon-user-1 {margin-right: 0.5em;}
header li a i {font-size: 1.25em !important; vertical-align: middle}
header ul li:last-child {padding-top: 0;}
.logout { display: block; background: #2D88FF; color: #fff; font-size: 1.15em; padding: 0.85em;}
.logout i { font-size: 1.6em;}
.logout:hover {background: #666; color: #fff;}
.progreso {width: 100%; height: 20px; background: #eaeaea; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 2px; /*-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.4); box-shadow: 0px 4px 4px rgba(0,0,0,0.3); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');*/}
.progreso div {width: 10%; height: 14px; background: #d60e2e; text-align: center; font-size: 0.75em; color: #fff;}

.mobile-menu {display: none;}
.mobile {display: none;}

/* SELECCIÓN */

.select-type {font-family: 'Roboto';}
.select-type h1 { width: 100%; text-align: center; font-size: 4em; font-weight: 100; color: #666;}
.select-type h1 i{ font-size: -0.5em; }
.select-type ul { width: 100%; max-width: 1440px; padding: 1em; margin: 0 auto; list-style: none; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; align-items: stretch; justify-content: center; }
.select-type li { background-color: #666; margin: 0.25em; display: inline-block; vertical-align: middle;}
.select-type li a {display: block; width: 240px; height: 180px; padding: 1em; color: #fff; text-decoration: none; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25);}
.select-type li a:hover{ background: #2D88FF;}
.select-type li a:hover i { transform: translate(0px, -10px);}
.select-type .icon, .select-type .icon1 { width: 100%; display: block; font-size: 4em; margin: 1px; font-weight: 700; }
.select-type .icon1 { margin-top: 10%; }
.select-type .name { width: 100%; display: block; font-size: 1.25em; font-weight: 100;}

/* GRILLA TRABAJOS */

.options { width: 80%; margin: 0 auto; text-align: center;}
.options a { display: inline-block; vertical-align: top; padding: 0.9em; font-size: 1.1em; color: #fff; background: #666; margin: 0 0.25em;}
.options a:hover { background: #2D88FF; }
.options select {background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>"); background-color: #fff; background-repeat: no-repeat; background-position: right 20px top 20px; background-size: 16px 16px; color: #999; padding: 1em; width: 33%; font-size: 1em; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; outline:0; display: inline-block; vertical-align: top; margin: 0 1%; border: 1px solid #ddd; }

.bt {display: block; padding: 0.75em 1.2em; color: #fff; background: #d60e2e; color: #fff; font-size: 1.2em; text-decoration: none; text-align: center; font-weight: 300; margin: 0; border: none; }
.bt a:hover { background: #666; }

.info-grid-list {display: block; width: 25%; height: auto; color: rgba(0,0,0,0.5); position: absolute; top: 35%; left: 13.5%;}
.info-grid-list h2 { font-weight: 100; color: #e0e0e0; margin: 0 0 1em 0; padding-bottom: 0.5em; border-bottom: 1px solid #e0e0e0 }
.info-grid-list div { width: 100%; padding: 2em; margin-top: 1em; background: rgba(0,0,0,0.5) }
.info-grid-list ul { list-style: none; color: #e0e0e0; }
.info-grid-list li { display: block; padding: 0.25em; }
.box {display: inline-block; width: 1em; height: 1em; background: #000; margin-right: 10px;}
.info-grid-list li:nth-child(1) .box {background: #bc122d}
.info-grid-list li:nth-child(2) .box {background: #125abc}
.info-grid-list li:nth-child(3) .box {background: #e5c517}
.info-grid-list li:nth-child(4) .box {background: #56bc12} 

.grid {width: 80%; margin: 0 auto; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; justify-content: flex-start; }
.grid li {position: relative; width: 20%; padding: 0.5em; }
.grid li:hover {cursor: pointer;}	
.grid li img {margin: 0; border: 0; /* -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.3); -moz-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.3); box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.3);*/}
.grid li span{display: block; width: 100%; padding: 1em; padding: 0 0.5em; text-align: center; position: absolute; top: 30%; left: 0; color: #666;}

/* TABLA TRABAJOS */
     
#map { width: 100%; height: 400px; }
.list { display: block; width: 90%; max-width: 1200px; margin: 0 auto; padding: 1em 1.5em; color: #666;}
.list table { width: 100%; box-shadow: 0px 0px 3px rgba(0,0,0,0.25)}
.list td { height: 40px; vertical-align: middle; padding: 1em; }
.list tr { background: #eee }
.list tr:nth-child(2n+1) { background: #f6f6f6 }
.list tr td:nth-child(1) { width:1%; padding: 0;}
.list tr td:nth-child(2) { width:9%; }
.list tr td:nth-child(3) { width:9%; }
.list tr td:nth-child(4) { width:60%; }
.list tr td:nth-child(5) { width:9%; text-align: center; }
.list tr:hover{-webkit-transition: all 250ms ease-out; -moz-transition: all 250ms ease-out; -ms-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; transition: all 250ms ease-out; background: #ccc; color: #666;}
.list tr:nth-child(1):hover{background: #2D88FF;}
.list tr:nth-child(1) td:nth-child(1) { width:1%; padding: 0;}
.color1 {background: #bc122d; color: #fff;}
.txt-color1 {color: #bc122d;}
.color2 {background: #19821E; color: #fff;}
.txt-color2 {color: #19821E;}
.list tr:nth-child(1) td { background: #666; color: #fff;}
.warning {  background: #666; font-size: 1em; color: yellow; border-radius: 50px; width: 24px; height: 25px; display: inline-block; padding-top: 3px; }
/* DETALLE TRABAJOS */

.detalle {color: #ccc; font-family: 'Roboto';     margin-top: 2em;}
.detalle h1 {font-weight: 100; font-size: 2em; margin: 0;}
.detalle h2 {font-weight: 300; font-size: 1.5em; margin: 0;}
.detalle h3 {font-weight: 500; font-size: 1.1em; margin: 1em 0;}
.detalle ul {font-weight: 300; font-size: 1.1em; margin: 0.5em 0;}
.detalle ul li { display: inline-block; vertical-align: top; width: 48.5%; margin: 0.25em 0;}
.detalle hr { margin: 1em 0; }
.detalle .bt { background: #666; cursor: hand; }
.cerrar { display: block; font-size: 2em; color: #999; text-decoration: none; text-align: right;position: absolute;     top: 3em; right: 0.75em; }
.cerrar:hover { color: #fff; background: none; }
.detalle ul li span { display: block; width: 95%; margin: 0 auto;}
.detalle input[type="text"] { width: 95%; background: #eaeaea; padding: 10px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #333;  margin: 10px auto;  display: block; }
.detalle input[type="tel"] { width: 95%; background: #eaeaea; padding: 10px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #333;  margin: 10px auto;  display: block; }
.detalle textarea { width: 100%; background: #eaeaea; padding: 0.25em; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #333; resize: none; display: block; margin: 20px auto; height: 120px; text-indent: initial; padding: 10px;  }

.detalle .bt { margin: 1.5em 0;  }
.check-entrega { margin-left: 1em;}

.page-title{ display: block; font-weight: 100; font-size: 2em; margin: 0 auto 1em auto; padding: 0 0 0.5em 0; width: 90%; border-bottom: 1px solid #999; }

.accounts tr:first-child { padding-left: 1em; }
.accounts tr:nth-child(2n+1) { background: #f6f6f6 }
.accounts tr td:nth-child(1) { width:15% !important; padding: 1em !important; }
.accounts tr td:nth-child(2) { width:55% !important; }
.accounts tr td:nth-child(3) { width:20% !important; }
.accounts tr td:nth-child(4) { width:10% !important; }

.full-detail {color: #666; font-family: 'Roboto'; margin-top: -1.5em; max-width: 800px; margin: 0 auto; width: 90%; padding: 2em; background: #fff; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);}
.full-detail .page-title { width: auto; border: none; padding: 0;  }
.full-detail h1 {font-size: 3em; font-weight: 100; margin: 0;}
.full-detail h2 {font-weight: 300; font-size: 1.5em; margin: 0;}
.full-detail h3 {font-weight: 500; font-size: 1.1em; margin: 0 0 1em 0;}
.full-detail ul {font-weight: 300; font-size: 1.1em; margin: 0.5em 0;}
.full-detail ul li { display: inline-block; vertical-align: top; width: 100%; margin: 0.25em 0;}
.full-detail hr { margin: 1em 0; }
.full-detail .bt { width: auto; display: inline-block; vertical-align: top; background: #666; font-size: 1em; margin-top: 10px;}
.full-detail .bt:hover { background: #2D88FF; }
.full-detail ul li span { display: block; width: 95%; margin: 0 auto;}
.full-detail input[type="text"] { color: #666; width: 95%; max-width: 300px; background: #fff; padding: 10px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #333; margin: 10px 0;  display: block; border: 1px solid #999; }

/* FORMS */

.error { background-color: #d60e2e !important; color: #fff !important;}

.container{padding-top: 6.5em; max-width: 1200px;  margin: 0 auto;  }
.datos { width: 90%; min-height: 200px; background: #fff; margin: auto; margin-bottom: 3%; background: #fff; max-width: 800px; box-shadow: 0px 0px 5px rgba(0,0,0,0.25); }

.title { padding: 3em 0 1em 0; color: #fff; margin: 0; border-bottom: 1px solid #ccc; width: 90%; margin: 0 auto; }
.title h1 {width: 100%; text-align: left; color: #666; font-size: 3em; font-weight: 100; margin: 0.25em 0 0 0;}
.title span{font-size: 0.5em; line-height: 0.5em;}
.title h2{width: 100%; text-align: left; color: #999; font-size: 1em; margin: 0; font-weight: 300;}
.title a { display: block; width: auto; font-size: 1.1em; text-align: left; padding: 20px 0; margin: 30px auto; color: #2D88FF; text-align: center; text-decoration: none; margin: 0; padding: 0; float: right; opacity: 0.8;}
.title a span {font-size: 1.1em; margin: 0;}
.title a:hover { opacity: 1;}

.forms { width: 100%; padding: 2em; margin: 0; }
.forms h3 { color: #666; padding: 0; margin: 0.5em 0; font-weight: 400; font-size: 1em; }
.forms input[type="text"] {width: 100%; background: #eaeaea; padding: 1em; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px }
.forms textarea { width: 100%; background: #eaeaea; padding: 0.25em; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #333; resize: none; display: block; margin: 20px auto; height: 120px; text-indent: initial; padding: 10px;  }
.forms input[type="submit"] {width: 100%; background: #d60e2e; padding: 1.2em 1em 1em 1em; margin-top: 1em; border: none; color: #fff;}
.forms input[type="submit"]:hover {background: #666;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9997;
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modal-header { display: block; padding: 0.5em 1em; background: #f6f6f6; text-align: right; }

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close-modal {
    color: #666;
    font-size: 2em;
    font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.modal-body {padding: 1em; text-align: center; font-weight: 300; font-size: 1.5em;}

/* QUERIES */ 

@media screen and (min-width: 1400px){
	#brief, #cuadro {width: 70% !important;}
	.grid li { width: 12.5%;}
}


@media screen and (max-width: 1400px){
	#brief, #cuadro {width: 65% !important;}
	.grid li { width: 20%;}
	.options select { width: 25% }
	.select-type ul { width: 70%; flex-flow: row wrap; }
}

/*@media screen and (max-width: 1024px){
  .title h1{font-size: 4em;}
  #brief, #cuadro {width: 54% !important;}
}*/


@media screen and (max-width: 1024px){
	.datos {-moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
	.title, .campaign, .creative{width: 100%;}
	.title h1 {margin: 0 !important;}
	#brief, #cuadro {width: 72% !important;}
	.title a { font-size: 5em; position: absolute; color: #fff; top: -40px; right: 0; width: auto; text-align: right;}
	.title a span{display: none;}
	.title h1, .title h2 {display: block; text-align: left !important; margin-left: 15px !important;}
	.title h1 {font-size: 3.5em !important;}
	.options {float: none; width: 80%; margin: 0 auto; text-align: center; padding: 0;}
	.options select {width: 30%;}
	.grid { width: 80%; }
	.grid li { width: 25%; }
	.grid li span{ top: 60px;}
	.info-grid-list {position: static; width: auto; margin: 0 auto; display: inline-block; vertical-align: top;}
	.info-grid-list a { width: auto; display: inline-block; vertical-align: top; padding: 0.6em; font-size: 1.25em; color: #fff; background: #d60e2e; margin: 0 0.25em; }
	.new-order {width: 55px;}
	.new-order span {display: none;}
	.info-grid-list div {display: none;}
	.list { float: none; margin: 0 auto; padding: 1em 0; overflow-x:scroll }
	.select-type h1 {font-size: 4em; margin-top: 0;}
	.select-type ul li a {  text-align: center; }
	.select-type ul li a .icon1 { margin-top: 10px;}
	.day ul li { flex: 0 0 48%; text-align: center; }
}

@media screen and (max-width: 800px) {
	.options {text-align: center; padding: 0; }
	.options select {display: inline-block; margin: 0 0.5em; width: 28%; }
	.new-order {width: 55px !important;}
	.new-order span {display: none;}
	.grid li { width: 33.3%; }
	.options select {width: 28%;}
}

@media screen and (max-width: 700px) {
	header ul { display: none; }
	
	/* MOBILE MENU */
    
    .campoDireccion { width: 90%}
	
	.mobile-menu {display: block; float: right; background-image: url(../img/menu.jpg); width: 39px; height: 39px; margin: 10px;}
    .mobile-menu i { font-size: 1.6em;}
	.mobile { display: block; background: #666; width: 100%; height: 0px; overflow: hidden; }
	.mobile li { width: 100%; padding: 0.2em; margin: 0; border-bottom: 1px solid #999;}
	.mobile li i { margin-right: 1em; font-size: 1.5em}
	.mobile li a, .mobile li a:hover{ color: #fff; }
 
	#brief, #cuadro {width: 100% !important;}
	.creative a { display: block; background: #d60e2e; padding: 1.4em; margin: 0.5em 0; font-size: 0.8em; width: 100%; text-decoration: none; text-align: center; color: #fff; }
	.select-type h1 {font-size: 3em; margin-top: 0;}
	.select-type ul { flex-flow: column wrap; -moz-flex-flow: column wrap; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; width: 100%; }
	.select-type ul li {width: 100% !important; margin: 0.1em; flex: initial !important; }
	.select-type ul li a { width: 100%; height: 170px; }
	.select-type .icon1 { margin-top: 0 !important; }
	.select-type .name {display: inline; font-size: 1.25em;}
	.select-type .name br {display:none}
	.options {text-align: center; padding: 0; }
	.options select {width: 100%; margin: 1em 0 0 0; }
	.options a {width: 47%; margin:0.7%;  }
	.info-grid-list {display: block; width; 100%; margin-bottom: 0.25em;}
	.info-grid-list a { width: 96.5%; padding: 1em; }
	.info-grid-list a span {display: inline-block;}
	.options select { width: 90%; margin-top: 20px; }
	.options a { width: 75%; margin-top: 0.25em; }
	.grid li { width: 50%; }
	.grid li span{ font-size: 1em !important; top: 30%;}
	.list tr td:nth-child(1) { width:4%; font-size:11px; }
    .list tr td:nth-child(2) { width:16%; font-size:11px; }
   
    .list tr:nth-child(1) td {    font-size: 11px;}
	.list tr:nth-child(2) td {    font-size: 11px;}
	
	.list tr td:nth-child(3) { font-size: 11px;}
	.list tr td:nth-child(4) { font-size: 11px;}
	.list tr td:nth-child(5) { font-size: 11px;}
	.list tr td:nth-child(6) { font-size: 11px;}
	.list tr td:nth-child(7) { font-size: 11px;}
	
   
	.new-order {width: 96% !important;  }
	.new-order span {display: inline-block; padding: 0.25em; }

}
@media screen and (max-width: 700px) {
	.new-order {display: none !important;}
}