* { margin: 0; padding: 0; }


/*---Posición, fondo y bordes de macroelementos---*/

body {
	box-sizing: border-box;
	background: url(concyT.png) 20px 40px no-repeat fixed, url(concyL.png) right bottom no-repeat fixed, #000;
	font: 16px Helvetica, Arial, sans-serif;
	color: #D1D7E0;
}

main {
	float: left;
	width: 54%;
	padding: 0;
	margin: 40px 0 30px 18%;
	text-align: justify;
}

aside {
	float: right;
	width: 24%;
	padding: 1%;
	margin: 40px 1% 0 0;
	border-radius: 1em;
	background: linear-gradient(to bottom, #000, #2D283E);
}

header.concy {
	position: fixed;
	width: 96%;
	padding: 0 2%;
	height: 30px;
	background: linear-gradient(#802BB1, #000);
}

.concy h1, .concy h2{
	float: left;
	font: 20px "Monotype Corsiva";
	color: #564F6F;
}

nav {
	position: absolute; 
	width: 14%;
	padding: 1%;
	margin: 40px 0 0 1%;
	border-radius: 1em;
	background: linear-gradient(to left, #2D283E, #000);
}

nav li {
	padding: 0 0 0 1em;
	list-style-type: none;
	color: #D1D7E0;
}

nav ul.gnav {
	border-left: solid;
	border-top: solid;
	border-color: #802BB1;
	border-radius: 1em;
	padding: 1em;
}

nav a:link { text-decoration: none; }
nav a:visited { text-decoration: none; }
nav a:hover { text-decoration: none; display: inline-block; -ms-transform: scale(1.2,1.2); /* IE 9 */-webkit-transform: scale(1.2,1.2); /* Safari 3-8 */ transform: scale(1.2,1.2); }
nav a:active { color: #802BB1; }


footer {
	clear: both;
	float: left;	
	width: 96%;
	padding: 0 2%;
	background: linear-gradient(#000, #2D283E);
}

summary {
	color: #802BB1;
}

a:link { text-decoration: underline dotted; color: #D1D7E0; }
a:visited { text-decoration: underline dotted; color: #D1D7E0; }
a:hover { text-decoration: none; display: inline-block; -ms-transform: scale(1.2,1.2); /* IE 9 */-webkit-transform: scale(1.2,1.2); /* Safari 3-8 */ transform: scale(1.2,1.2); }
a:active { color: #802BB1; }

h1, h2, h3 {
	color: #802BB1;
	margin: 0 0 1em 0;
	padding: 0 1em;
}

h1, h2 {
	text-align: center;
}

h3 {
	border-bottom: solid;
}

/*---Botón buscar---*/


form.buscar input[type=text] 
{
	float: right;
	border: none;
	margin-top: 5px;
	height: 20px;
	border-radius: 6px 0 0 6px;
}

form.buscar button {
	float: right;
	margin-top: 5px;
	height: 20px;
	width: 30px;
	border: none;
	font: 1em Webdings; 
	color: #D1D7E0;
	cursor: pointer;
	background-color: #564F6F;
	border-radius: 0 6px 6px 0;
}

form.buscar button:focus {
	background-color: #D1D7E0;
	color: #564F6F;
}

/*---Menú desplegable---*/



.dropbtn {
	float: right;
	margin-top: 5px;
	margin-left: 1em;
	height: 20px;
	width: 30px;
	border: none;
	font: 1em Webdings; 
	cursor: pointer;
	background-color: #564F6F;
	color: #D1D7E0;
	border-radius: 6px;
}

.dropbtn:focus {
	background-color: #D1D7E0;
	color: #564F6F;
}

.dropdown-content {
	position: absolute;
	right: 2%;
	top: 30px;
	display: none;
	background-color: #000;
	border-radius: 1em;
	z-index: 1;
}

.dropdown-content a {
    float: none;
    color: #D1D7E0;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #000;
	border-radius: 1em;
}

.show {
    display: block;
    float: right;
}


/*------------divs------------*/



div.ginf {
	border: solid;
	border-color: #802BB1;
	border-radius: 1em;
	padding: 1em;
	margin: 2em 0;
}

div.info {
	position: relative;
	width: 60%;
	margin: 2em 0;
	border-radius: 1em;
	padding: 1em;
}

#info01, #info03, #info05, #info07, #info09, #info11 {
	left: 35%;
	text-align: left;
	background: linear-gradient(to bottom right, #000, #2D283E);
}

#info02, #info04, #info06, #info08, #info10, #info12 {
	left: 1%;
	text-align: right;
	background: linear-gradient(to bottom left, #000, #2D283E);
}

aside .promo {
	border-top: solid;
	border-right: solid;
	border-color: #802BB1;
	border-radius: 1em;
	padding: 1em;
	margin: 2em 0;
}

.promo img {
	width: 45%;
	border-radius: 1em;
}

.promo figure {
	position: relative;
}

.promo figcaption {
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
}




/* #802BB1 #2D283E #564F6F #4C495D #D1D7E0 */