html, body {
width: 100%;
height: 100%;
background: #341507;
}
main {
width: 100%;
}
section {
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
/*
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
*/
}
section .main {
max-width: 1100px;
padding: 75px 10% 100px 10%;
margin: auto;
text-align: left;
}
section h1 {
margin-bottom: 25px;
font-family: 'Spicy Rice', cursive;
font-weight: 200;
font-size: 2.5em;
color: #d9cba7;
}
section h1 span {
color: #00baff;
}
section h2 {
font-size: 1.2em;
font-weight: 200;
color: #ddd;
}
section p {
margin-bottom: 20px;
color: #d9cba7;
font-size: 1em;
line-height: 1.3em;
font-weight: 400;
}
article .main {
max-width: 1300px;
padding: 40px 10% 25px 10%;
margin: 0 auto 30px auto;
}
article img {
display: block;
max-width: 100%;
margin: 0 auto 30px 0;
}
article h1 {
margin-bottom: 10px;
font-family: 'Spicy Rice', cursive;
font-size: 2.2em;
color: #fff;
}
article h2 {
font-family: 'Spicy Rice', cursive;
margin-bottom: 15px;
font-size: 1.6em;
font-weight: 200;
color: #d8d0bf;
width: 95%;
margin: auto;
}
article p {
width: 95%;
margin: auto;
color: #d8d0bf;
font-size: 1em;
line-height: 1.4em;
font-weight: 400;
margin-bottom: 20px;
}
article iframe {
height: 400px;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
article iframe {
height: 275px;
}
}
@media screen and (max-width: 400px) {
article iframe {
height: 200px;
}
}
blockquote {
width: 80%;
margin: 30px auto;
padding: 0 0 0 20px;
font-style: italic;
font-family: 'Spicy Rice', cursive;
font-size: 24px;
font-weight: 600;
color: #fff;
border-left: #4a4a4a 10px solid;
}
blockquote span {
margin-top: 15px;
font-family: 'Open Sans', serif;
font-size: 16px;
color: #ccc;
}
/*OTROS*/
.arrow {
width: 50px;
height: 50px;
display: block;
margin-top: 60px;
border-radius: 50%;
background-color: #00baff;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
opacity: .9;
transition: all .5s ease;
}
.arrow.down {
background-image: url(http://www.nacion.com/gnfactory/LNC/GNF/2016/08/27/0001/svg/arrow_down.svg);
}
.arrow:hover {
opacity: 1;
}
.boxes {
padding: 40px;
background: #d9cba7;
margin: 20px auto;
background-size: cover;
}
.boxes h2 {
font-family: 'Spicy Rice', cursive;
max-width: 850px;
font-size: 2.5em;
font-weight: 200;
color: #341507;
width: 95%;
margin: 0 auto 0px auto;
}
.boxes p {
width: 95%;
max-width: 850px;
margin: auto;
color: #341507;
font-size: 1em;
line-height: 1.4em;
font-weight: 400;
margin-bottom: 20px;
}
.boxes .og-grid {
margin: 0 auto;
text-align: center;
}
.boxes .og-grid li {
display: inline-block;
margin: 10px 5px 0 0px;
vertical-align: top;
background: #00baff;
}
.boxes .og-grid li > a,
.boxes .og-grid li > a img {
border: none;
outline:none;
display: block;
color: #341507;
font-weight: 800;
font-family: 'Jura', sans-serif;
font-size: 1.1em;
padding: 0 0 20px 0;
}
.boxes .og-grid li.og-expanded > a::after {
top: auto;
border: solid transparent;
height: 0;
width: 0;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 15px;
left: 50%;
margin: -20px 0 0 -15px;
padding: 0 0 20px 0
}
.boxes .og-expander {
position: absolute;
top: auto;
left: 0;
width: 100%;
overflow: hidden;
margin-top: 10px;
text-align: left;
height: 0;
overflow: hidden;
background-image: url(http://www.nacion.com/gnfactory/LNC/GNF/2016/08/27/0001/img/cover3.png);
background-size: cover;
}
.boxes .og-expander-inner {
padding: 50px 30px;
height: 90%;
}
.boxes .og-close {
position: absolute;
width: 40px;
height: 40px;
top: 20px;
right: 20px;
cursor: pointer;
margin-bottom: 30px;
background: #42b5e7;
}
.boxes .og-close::before,
.boxes .og-close::after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 1px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.boxes .og-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.boxes .og-close:hover::before,
.boxes .og-close:hover::after {
background: #fff;
}
.boxes .og-fullimg {
width: 50%;
float: left;
height: 100%;
overflow: hidden;
position: relative;
}
.boxes .og-details {
padding: 38px;
margin: auto;
background: #221202;
opacity: 0.8;
border-radius: 10px;
max-width: 900px;
}
.boxes .og-fullimg {
text-align: center;
width: 0px;
}
.boxes .og-fullimg img {
display: none;
}
.boxes .og-details h3 {
font-weight: 300;
font-size: 40px;
margin-bottom: 20px;
text-align: center;
color: #d9cba7;
font-family: 'Spicy Rice', cursive;
font-weight: 200;
}
.boxes .og-details p {
color: #d9cba7;
font-size: 16px;
line-height: 20px;
font-weight: 400;
margin-bottom: 20px;
}
#info {
width: 100%;
margin: auto;
text-align: center;
}
#infomovil{
width: 300px;
margin: auto;
display: none;
}
@-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@media screen and (max-width: 830px) {
.og-expander h3 { font-size: 32px; }
.og-expander p { font-size: 13px; }
.og-expander a { font-size: 12px; }
}
@media screen and (max-width: 450px) {
#info { display: none;}
#infomovil {display: inline;}
}
@media screen and (max-width: 650px) {
.og-fullimg { display: none; }
.og-details { float: none; width: 100%; }
section h1 {font-size: 1.5em;}
}
}
/*OTROS*/