*{margin: 0;padding:0;}
.logo{background-image: url('https://developers/disonet.com/DEV_TOOLS_Logo.png','content');background-repeat: no-repeat;background-position: center center;background-size:contain;}


.card{
	background-color: #d6d6d6;
	box-shadow: 0px 0px 7px 2px black;
	height: auto;
	width: auto;
	margin: 2.5%;
	float: left;
	transition: 1s;
}

.card-sb{
	height: auto;
	width: auto;
	margin: 2.5%;
	float: left;
	transition: 1s;
}

.card-full{
	height: auto;
	width: auto;
	margin: 0%;
	float: left;
	transition: 1s;
}


/*.card:hover{
	background-color: #d6d6d6;
	box-shadow: 0px 0px 12px 5px black;
	height: 7.1em;
	
}
*/

.card-7{width: 9.24%;height: auto;}
.card-6{width: 11.63%;height: auto;}
.card-5{width: 15%;height: auto;}
.card-4{width: 19.999%;height: auto;}

.card-4-displayed{width: 19.999%;height: auto;display: block;}


.card-3{width: 28.3333333%;height: auto;}
.card-2{width: 45%; height: auto;}
.card-1{width: 95%;height: auto;}

.card-3_4{width: 69%;height: auto;}


.card-1-full{width: 100%;height: auto;}
.card-2-full{width: 50%;height: auto;}
.card-3-full{width: 33.3333333%;height: auto;}
.card-4-full{width: 25%;height: auto;}

.content{margin: 2.5%;float: left;}



/*colors pelete background*/
.red{background-color: #cf3636;}
.blue{background-color: #3163da;}
.green{background-color: #3baa50;}
.pink{background-color: #d77ad8;}
.grey{background-color: #8d8d8d;}
.purple{background-color: #9c60c4;}
.white{background-color: #f3f3f3;}
.dark{color: white;background-color: black;}
.orange{background-color: #e09f59;}
.yellow{background-color: #cdcd63;}
.white-transparent{background-color: rgba(255, 255, 255, 0.5); color: black;}
.dark-transparent{background-color: rgba(0, 0, 0, 0.5);color:white;}

/*da info sobre el elemento a editar*/
.pointer-editor{padding-top: 5%;padding-bottom: 5%;background-image: url("paper.png");}



/*alturas predefinidas*/
.height-1{height: 10px;}
.height-2{height: 20px;}
.height-3{height: 30px;}
.height-4{height: 40px;}
.height-5{height: 50px;}
.height-6{height: 60px;}
.height-7{height: 70px;}
.height-8{height: 80px;}
.height-9{height: 90px;}
.height-10{height: 100px;}
.height-11{height: 110px;}
.height-12{height: 120px;}
.height-13{height: 130px;}
.height-14{height: 140px;}
.height-15{height: 150px;}
.height-16{height: 160px;}
.height-17{height: 170px;}
.height-18{height: 180px;}
.height-19{height: 190px;}
.height-20{height: 200px;}
.height-21{height: 210px;}
.height-22{height: 220px;}
.height-23{height: 230px;}
.height-24{height: 240px;}
.height-25{height: 250px;}
.height-26{height: 260px;}
.height-27{height: 270px;}
.height-28{height: 280px;}

.height-em-1{height: 1em;}
.height-em-2{height: 2em;}
.height-em-3{height: 3em;}
.height-em-4{height: 4em;}
.height-em-5{height: 5em;}
.height-em-6{height: 6em;}
.height-em-7{height: 7em;}
.height-em-8{height: 8em;}
.height-em-9{height: 9em;}
.height-em-10{height: 10em;}
.height-em-11{height: 11em;}
.height-em-12{height: 12em;}
.height-em-13{height: 13em;}
.height-em-14{height: 14em;}
.height-em-15{height: 15em;}
.height-em-16{height: 16em;}
.height-em-17{height: 17em;}
.height-em-18{height: 18em;}
.height-em-19{height: 19em;}
.height-em-20{height: 20em;}
.height-em-21{height: 21em;}
.height-em-22{height: 22em;}
.height-em-23{height: 23em;}
.height-em-24{height: 24em;}


/*align special*/
.center-content{text-align: center;}
.padding-stand{padding: 2.5%;}
.padding-left{padding-left: 2.5%;}
.padding-top{padding-top: 2.5%;}
.padding-top-bottom{padding-top: 2.5%;padding-bottom: 2.5%;}

/*margin*/
.margin-top-1{margin-top:10px;}
.margin-top-2{margin-top:20px;}
.margin-top-3{margin-top:30px;}
.margin-top-4{margin-top:40px;}
.margin-top-5{margin-top:50px;}
.margin-top-6{margin-top:60px;}
.margin-top-7{margin-top:70px;}
.margin-top-8{margin-top:80px;}

/*botones*/
.button{border:1px solid;font-size: 1em;}

.simple-full-button{border:1px solid;width:calc(100% + 2px);font-size: 1em;}

/*border*/
.border-round-1{border-radius: 2px;}
.border-round-2{border-radius: 5px;}
.border-round-3{border-radius: 9px;}
.border-round-4{border-radius: 18px;}

.font-1-em{font-size: 1em;}
.font-1_5-em{font-size: 1.5em;}
.font-2-em{font-size: 1.5em;}



/*ajuste de desbordamiento*/
.overflow-hidden{overflow: hidden;}
.overflow-scroll{overflow: scroll;}


/*ventana modal*/

.modal-center{position: fixed;top: 50%;left: 47.5%;transform: translate(-50%, -47.5%);}
.modal-center-close{position: fixed;top: -50%;left: 47.5%;transform: translate(-50%, -47.5%);}


@media only screen and (max-width: 800px) {
 
  
  /*html { background: blue;}*/

  
    
   [class*="card-"] {
    width: 95%;
  }
  
  [class*="card-3"] {
    width: 28.3333333%;
  }
  
  [class*="card-4"] {
    width: 28.3333333%;
  }
  
  [class*="card-4-displayed"] {
    display: none;
  }
  
   footer>[class*="card-4"] {
    width: 45%;
  }
  
  footer>a>[class*="card-4"] {
    width: 45%;
  }
  
    
  [class*="card-1-full"] {
    width: 100%;
  }
   [class*="card-2-full"] {
    width: 100%;
  }
 }
 
 
 
 
 
 
 
 
 
@media only screen and (max-width: 600px) {
 /* html { background: green; }*/
  
  
  
   [class*="card-"] {
    width: 95%;
  }
  
  [class*="card-3"] {
    width: 28.3333333%;
  }
  
  [class*="card-4"] {
    width: 28.333%;
  }

  
 
  
  
  
  
  
  [class*="card-1-full"] {
    width: 100%;
  }
  [class*="card-2-full"] {
    width: 50%;
  }
  
  
  
}
 
 
  
@media only screen and (max-width: 350px) {
  /* html { background: red; }*/
  
  
  
   [class*="card-"] {
    width: 95%;
  }
 
  
  [class*="card-1-full"] {
    width: 100%;
  }
  
  
  
}