.optics {background: #f3f3f3;}
.pl4 {padding-left:40px;}
.pr4 {padding-right:40px;}
.optics-length {width:100%; background:url('/plugins/jtl_optics/frontend/images/temple_length.svg') no-repeat; min-height: 189px; width:300px; background-size: cover; margin:auto}
.optics-width {width:100%; background:url('/plugins/jtl_optics/frontend/images/temple_width.svg') no-repeat; min-height: 189px; width:300px; background-size: cover; margin:auto;position: relative;}
.optic-width {width:100%; background:url('/plugins/jtl_optics/frontend/images/optic_width.svg') no-repeat; min-height: 189px; width:300px; background-size: cover; margin:auto; position: relative;}
#width-total, #length-total, #heightglass {display: block; position: absolute; bottom: -15px;}
#width-stegbreite {display: block; position: absolute; top: 36px; left: 130px; font-size: 24px; border-left: 1px solid #597f8c; border-right: 1px solid #597f8c; width: 39px; text-align: center; height: 42px;}
.optics .arrow-1, .optics .arrow-2 , .optics .arrow-3 , .optics .arrow-4 {position: relative; display: block;}
.optics .arrow-1::after {content: ''; position: absolute; width: 10px; height: 2px; top: -4px; right: 0px; background-color: #597f8c; transform: rotate(45deg);}
.optics .arrow-1::before {content: ''; position: absolute; width: 10px; height: 2px; top: 4px; right: 0px; background-color: #597f8c; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); transform: rotate(-45deg);}
.optics .arrow-2::after {content: ''; position: absolute; width: 10px; height: 2px; top: -4px; left: 0px; background-color: #597f8c; transform: rotate(135deg);}
.optics .arrow-2::before {content: ''; position: absolute; width: 10px; height: 2px; top: 4px; left: 0px; background-color: #597f8c; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); transform: rotate(45deg);}
#width-stegbreite .sizer-line {width:100%; height: 2px; background-color: #597f8c; top:6px; position: absolute;}
.optics #width-stegbreite .arrow-1, .optics #width-stegbreite .arrow-2 {top:6px;}
#width-glass {display: block; position: absolute; top: 88px; left: 41px; width: 88px; height: 2px;}
#width-glass .sizer-line {width:100%; height: 2px; background-color: #597f8c; bottom:0px; position: absolute;}
#height-glass {display: block; position: absolute; top: 48px; right: 13px; border-left: 3px solid #597f8c; width: 71px; text-align: center; height: 88px;}
#height-glass .arrow-3, #height-glass .arrow-4  {position: relative; display: block;}
#height-glass .arrow-3::after {content: ''; position: absolute; width: 10px; height: 2px; top: 4px; left: -2px; background-color:#597f8c; transform: rotate(45deg);}
#height-glass .arrow-3::before {content: ''; position: absolute; width: 10px; height: 2px; top: 4px; left: -10px; background-color: #597f8c; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); transform: rotate(-45deg);}
#height-glass .arrow-4 {height: 88px;}
#height-glass .arrow-4::after {content: ''; position: absolute; width: 10px; height: 2px; bottom: 4px; left: -2px; background-color:#597f8c; transform: rotate(-45deg);}
#height-glass .arrow-4::before {content: ''; position: absolute; width: 10px; height: 2px; bottom: 4px; left: -10px; background-color: #597f8c; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); transform: rotate(45deg);}
.sv660 {display:none;}
@media (max-width: 660px)
{
    .optic-item {flex: 0 0 100%; max-width: 100%;}
    .sv660 {display:block; padding-top:30px;}
}