* {margin: 0;padding: 0;}
body {color:rgb(100,100,100);background:#ba122bff;overflow-y:scroll;}
header h1::first-letter {text-transform:uppercase;}
article ul2 {display:flex;flex-wrap:wrap;}
article li img {width:100%;border-radius:10px;}
#images li {margin:1em 1em 1em 1em;width:100%;border-radius:10px;overflow:hidden;position:relative;display:flex;justify-content: center;}
#categories li {position:relative;margin:1em 1em 1em 1em;display:flex;justify-content: center;width:100%;}
#categories .preview_images {position:absolute;top:0;left:215px;width:400px;height:400px;justify-content: center;}
#categories .category_preview_img {float:left;background-size:cover !important;width:100%;height:100%;border-radius:50%;border:1px solid #e4e4e4;}
#categories li .category {position:relative;margin:0 3em 0 0;width:400px;height:400px;border-radius:50%;
font-weight:bold;text-transform:uppercase;overflow:hidden;
border:1px solid rgb(250,200,200);text-align:center;}
#categories li .category:hover {border:1px solid #000;}
#categories .category a {display:block;position:relative;width:100%;height:100%;color:#fff;}
#categories .category a span {width:100%;background:rgba(0,0,0,0.5);display:block;line-height:3em;position:relative;top:45%;font-size:large;}
nav {padding:1em 2em;}

ol,ul {list-style-type:none;}
#site_header {width:100%;background:#ba122bff;z-index:1;}
#site_header img {float:right;width:110px;margin:1em;}
#site_header h1 {font-family:sans-serif;font-size:3em;padding: 0.2em 0.5em 0;color:white;background-color: #ba122bff;text-align:center}
#site_header p {font-family:sans-serif;color:#282828;padding:0.2em;}
#banner {width: 100%; height: 350px; left: 50%; top: 50%; margin:0 auto; background: url('https://www.globecientos.es/catalogo/templates/globecientos/cabecera.png') no-repeat top center; background-color: #ba122bff;}
#cuerpo {width: 881px; margin:0 auto; }
article {background:rgb(253,253,253);border-radius:10px; }
article p {padding:0 1em 1em;}
article header h1{padding:0.5em 1em 1em;}
a {font-family: 'Open Sans', sans-serif;color:rgb(218, 81, 81);font-size: 1em;;text-decoration: none;}
a:hover {color:#ba122bff;}

.clear {clear:both;}
.p {position:absolute;}
input + label {display:block;margin:1em;}
.button {width:7em;border:none;background:rgba(13,82,255, 0.5);color:#fff;text-decoration:none;padding:0.5em;text-align:center;margin:0 0.5em 0.5em;margin:1em;}
.button:link {color:#fff;}
.button:visited {color:#fff;}
.button:hover {border-color:#fff;background:rgba(0,53,181, 0.5);color:#e4e4e4;cursor:pointer;}
.button:active {color:#fff;}
.button:focus {outline:none;}

header a {text-decoration:none;}
header a:link {color:white;}
header a:visited {color:white;}
header a:hover {color:white;}
header a:active {color:white;}
header a:focus {outline:none;}

#images li .delete, #images li .preview {position:absolute;display:block;top:5px;z-index:20;width:2em;height:2em;background: rgba(0,0,0,0.1);padding:0.2em;border-radius:0.3em;}
#categories li .delete, #categories li .preview {position:absolute;display:block;bottom:-5px;z-index:20;width:2em;height:2em;background: rgba(0,0,0,0.1);padding:0.2em;border-radius:0.3em;}
.delete {right:5px;}
.preview {right:3.2em;}
.delete img {width:100%;height:100%;}
.delete img:hover, .preview img:hover {filter:grayscale(100%);}

.textofoto {position:relative;display:block;z-index:20;background: rgba(255, 255, 255, 0.74);padding:0.2em;bottom:-5px;color:#ba122bff;width:100%;text-align: center;display:flex;justify-content: center;}

.flexbox {display:flex;flex-basis:400px;flex-wrap:wrap;justify-content:center;}
header .flexbox li {margin:0 0.5em;}
#action_status_message {padding:1em 1em 0;margin:1em auto;background:rgba(210,210,210,0.5);width:100%;font-size:1.4em;}