#cuadro{
  background: url('../img/cuadro.png') top right no-repeat;
  background-size: 140px auto;
}
#circulus{
 background: url('../img/circulo.png') right no-repeat ;
 background-size:  160px auto;/*96px*/
 background-position: 100% 29%; /* 65%*/
 background-attachment: scroll; /*fixed*/
 
}

.arreglos{
color:white;
/*font-size:24px;*/
font-family: OpticSans-301;
text-decoration:none;
text-align: left;
background-color: transparent;
border: none;
}
#titulo{
color:white;
/*font-size:5px;*/
font-weight:bold;
font-family: OpticSans-301;
text-decoration:none;
text-align: left;
background-color: transparent;
border: none;
outline: none;
box-shadow: none;

}

.personal {
  position: relative; 
  left: calc(100% /4); 
}

.prueba_x{
/*font-family: 'Font Awesome 5 Pro';
content: "\f078";*/
float: right ;
/*transition: all 0.5s;*/
}

[data-bs-toggle="collapse"] .fa:before{
  content: "\f077"; /*flecha para arriba*/
}

[data-bs-toggle="collapse"].collapsed .fa:before{
  content: "\f078"; /*flecha para abajo*/
}

.img_s1{
  width:340px;  
  height: 210px; /*210*/
}
.bor_c{
  border-top: white 3px solid; 
  width: 162px;
}
.alto_card{
  height: 410px;
}
#shop{
  margin-left:-12px;
  margin-right:-12px;
}
/*#d_c{
  width: 306px;
}*/
@media only screen 
and (max-width: 1439px){ 
   .img_s1{
    width:345px;
    height: 200px;
    }
    .bor_c{
      width: 165px;
    }
    .alto_card{
      height: 410px; 
    }
}
@media only screen 
and (max-width: 1331px){ 
   .img_s1{
    width:300px;
    height: 200px;
    }
    .bor_c{
      width: 142px;
    }
    .alto_card{
      height: 385px; 
    } 
  #circulus{
    background-position: 100% 28%;
  }
}
@media only screen 
and (max-width: 1240px){ 
   .img_s1{
    width:290px;
    height: 200px; 
    }
    .bor_c{
      width: 132px;
    }
    .alto_card{
      height: 385px; 
    }
}
@media only screen 
and (max-width: 1220px){ 
   .img_s1{
    width:280px;
    height: 200px;
    }
    .bor_c{
      width: 124px;
    }
    .alto_card{
      height: 385px;
    }
}
@media only screen 
and (max-width: 1199px){
   .img_s1{
    width:280px;
    height: 168px;
   }
   .bor_c{
    width: 120px; 
   }
   .alto_card{
    height: 325px;
  }
  #circulus{
    background-position: 100% 22.6%;
  }
}
@media only screen 
and (max-width: 1120px){
   .img_s1{
    width:250px;
    height: 168px;
   }
   .bor_c{
    width: 120px; 
   }
   .alto_card{
    height: 325px;
  }
}
@media only screen 
and (max-width: 1024px){
   .img_s1{
    width:230px;
    height: 167px;
    }
    .bor_c{
      width: 100px;
     }
  #cuadro{
    background-size: 135px auto;
  }
  #circulus{
    background-position: 100% 23%;
  }
}
@media only screen 
and (max-width: 991px){
   .img_s1{
    width:160px;
    height: 120px;
   }
   .bor_c{
    width: 59px;
   }
   .alto_card{
    height: 225px;
  }
  #cuadro{
    background-size: 130px auto;
  }
  #circulus{
    background-position: 100% 17%;
  }
}
@media only screen 
and (max-width: 767px){

    .personal {
      position: relative; 
      left: calc(100% /40); 
    }

   .img_s1{
    width: 425px;
    height: 250px;
   }
   .bor_c{
    border: none;
   }
   .alto_card{
    height: 432px; /*650px*/ 
  }
  #d_c{
    /*height: 500px;*/
    width: 400px;
  }
  #cuadro{
    background: none;
  }
  #circulus{
    background: none;
  }
}
@media only screen 
and (max-width: 375px){
   .img_s1{
    width: 375px;
   }
  #cuadro{
    background: none;
  }
  #circulus{
    background: none;
  }
  #d_c{
    width: 350px;
  }
}
@media only screen 
and (max-width: 320px){
  .img_s1{
    width: 320px;
   }
  #cuadro{
    background: none;
  }
  #circulus{
    background: none;
  }
  #d_c{
    width: 295px;
  }
}
  /*
  .wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} .wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} .wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} .wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} .wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} .wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}