@font-face {
    font-family: 'brinnanblack';
    src: url('brinnan_black-webfont.woff2') format('woff2'),
         url('brinnan_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html {font-size: 62.5%;} /* reset font-size to 10px  */
*, *:before, *:after {margin:0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
*:focus {outline:0;}
img {border: 0; vertical-align: bottom; height: auto;}
table {border-collapse: collapse; border-spacing: 0;}
a {-webkit-transition: all ease 0.2s; -o-transition: all ease 0.2s; transition: all ease 0.2s; text-decoration: none;}
/* end reset */
:root {
  --dgreen: #007550; --lgreen: #c4d600;
  --crecemujer: #c4007a; --ncolor:  #2e2e2e;
}
body {
	font: normal 1.6rem/1.3 'Montserrat', sans-serif; 
	color: var(--ncolor);
	background-size: cover;
}
.mhide {
	display: none;
}
.container, .modal {
	min-height: 100vh;
	background: #95e0ff url(../img/bg.jpg) no-repeat top center;
	background-size: cover;
}
.content {
	width: 95%; max-width: 1200px;
	margin: auto; padding: 45px;
}
.logo, .sun {text-align: center;}
.sun {padding: 10px 0 0;  margin-bottom: 45px;}
.sun img {width: 100%; max-width: 500px;}
.title {
	font: 700 3.8rem/1 'brinnanblack', sans-serif;
	text-align: center; color: white;
	text-transform: uppercase;
}
.title span {color: var(--lgreen); font-size: 4.6rem;}
.tcenter {text-align: center;}
.historiesGrid {
	display: grid; grid-gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}
.historiesGrid > div {
	position: relative; cursor: pointer;
	border-radius: 10px; overflow: hidden;
	border: 2px solid white;
}
.historiesGrid > div img {width: 100%;}
.gradient {
	position: absolute; height: 55%; width: 100%;
	bottom: 0; left: 0;
	background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.historiesGrid p {
	color: #fff; font-weight: 600;
	position: absolute; left: 0; bottom: 3%;
	font-size: 1.5rem; padding: 3px 5px;
	text-transform: uppercase;
	border-left: 5px solid #b1935d;
}


.footer {
	background: #202020;
	color: #fff; text-align: center;
	padding:  10px; font-size: 1.2rem;
}
.arkadlogo {margin-top: 8px;}

/* modal */
.historyContent {
	display: grid; grid-gap: 20px;
	grid-template-columns: repeat(2, 1fr);
	min-height: 90vh;
}
.history, .historyImage {
	align-self: center; justify-self: center;
	padding: 20px;
}

.historyImage {
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid white;
	padding: 0;
}

.history .title {
	margin-bottom: 20px; padding: 20px 0 2px;
	text-transform: uppercase;
	color: white; 
	font: 700 2.8rem/1.1 'brinnanblack', sans-serif;
	border-bottom: 2px solid #b1935d;
}
.history .title h2 {
	display: inline-block; position: relative;
	font-size: 2.6rem;
	
}
.history .title p {
	color: #b1935d;
	margin-bottom: 15px;
}
.history p {
	margin-bottom: 20px;
	font-weight: 500;
	color: #3c3c3b;
}

.artistImg {
	width: 100%;
	max-width: 360px;
	padding: 0 20px 0 20px;
	margin: auto;
}

.artistImg img {width: 100%}

.artist {padding-bottom: 0;}
.artist h2 {margin-bottom: 20px;}
.artist p {text-align: justify;}
.artistSocial {
	margin-top: 20px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.artistSocial a {
	display: flex;
	align-items: center;
	font-size: 2.2rem;
	color: inherit;
}
.artistSocial a:hover {
	color: var(--dgreen);
}
.artistSocial a i {
	font-size: 3rem;
	margin-right: 5px;
}
.artistSocial img {max-width: 160px;}
.artistFoot {
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding-bottom: 45px;
}
.artistFoot img {max-width: 180px;}

@media screen and (max-width: 1024px) {
	.historiesGrid {grid-template-columns: repeat(2, 1fr);}
	.historyContent {grid-gap: 10px; display: block;}
	.historyImage.siguanaba {background: #4f3d29;}
	.historyImage.cipitio {background: #7d9c3e;}
	.historyImage.cadejo {background: #fcbf4a;}
	.historyImage.cuyancua {background: #3dbfbd;}
	.historyImage.zumbadora {background: #f26762;}
	.historyImage.chillona {background: #ef3622;}
	.historyImage.juez {background: #886746;}
	.historyImage.llorona {background: #7d9c3e;}
	.historyImage.aguijuyo {background: #fcbf4a;}
	.historyImage.chasca {background: #3dbfbd;}
	.historyImage.chalchuapa {background: #f26762;}
	.historyImage.padre {background: #f0341b;}
	.historyImage {
		text-align: center;
		padding: 40px 0 20px;
		border: none;
	}
	.historyImage img {width: 90%; max-width: 500px;}
	.history {padding: 25px 20px;}
	.history .title h2 {
	  font-size: 2.2rem;
	}
}
@media screen and (max-width: 860px) {
	.history h3 {font-size: 30px; display: block; padding: 0 0 2px;}
	.history p {font-size: 1.6rem;}
}
@media screen and (max-width: 640px) {
	.mhide {
		text-align: center;
		display: block;
		padding:  20px;
	}
	.artistFoot img {width: 100%;}
	.artistSocial a {font-size: 1.8rem;}
	.artistSocial a i {font-size: 2.4rem;
}	.artistSocial img {max-width: 120px;}
}
@media screen and (max-width: 480px) {
	.content {padding: 25px 20px 45px;}
	.sun {margin-bottom: 25px; padding: 0;}
	.title {font-size: 3.4rem;}
	.title span {font-size: 4.2rem;}
	.history h3 {font-size: 24px;}
	.historiesGrid p {font-size: 1.4rem;}
}