html, body {
margin: 0;
padding: 0;
}
* {
font-family: 'Roboto Condensed', sans-serif; 
}
body.no-scroll {
overflow: hidden;
}
video#bg-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%; 
min-height: 100%;
z-index: -1;
}
main {
min-height: 75vh;
}
a {
border-bottom: 1px dotted;
text-decoration: none;
}
a:hover {
border-bottom-style: solid;
}
a.img {
border: none;
}
a.custom-logo-link {
position: fixed;
z-index: 25;
top: 10px;
right: 10px;
display: block;
border: none!important;
text-decoration: none;
}
button, .button, input[type=button], input[type=submit], input[type=reset] {
display: inline-block;
border: 2px solid;
height: 30px;
line-height: 30px;
padding: 0 15px;
font-weight: bold;
cursor: pointer;
transition: color 0.5s, border-color 0.5s;
outline: none;
background: transparent;
font-size: 14px;
box-sizing: border-box;
text-transform: uppercase;
}
img {
max-width: 100%;
height: auto;
}
.custom-logo-link > img {
display: block;
width: 128px;
}
.search-icon {
background: #000; 
padding: 5px;
border-radius: 15px;
}
.past-future, #menu-button {
position: fixed;
display: block;
border: none!important;
text-decoration: none;
left: calc(50vw - 10px);
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
z-index: 10;
}
article.event .overtitle,
article.event .date,
article.post .date,
article.event .title,
article.post .title,
.menu,
.past-future {
text-shadow: rgb(0, 0 , 0) 1px 0px 0px, rgb(0, 0 , 0) 0.540302px 0.841471px 0px, rgb(0, 0 , 0) -0.416147px 0.909297px 0px, rgb(0, 0 , 0) -0.989992px 0.14112px 0px, rgb(0, 0 , 0) -0.653644px -0.756802px 0px, rgb(0, 0 , 0) 0.283662px -0.958924px 0px, rgb(0, 0 , 0) 0.96017px -0.279415px 0px;
}
#past {
top: 60px;
transform: rotate(-90deg);
}
#future {
bottom: 90px;
transform: rotate(-90deg);
left: calc(50vw - 25px);
}
#menu-button {
left: auto;
right: 5px;
top: calc(50vh - 15px);
display: none;
cursor: pointer;
background: #000;
color: #fff;
padding: 10px;
}
#menu-button:hover {
background: #fff;
color: #000;
}
#close-menu {
font-size: 36px;
color: #fff;
position: fixed;
right: 38px;
top: calc(50vh - 21px);
display: none;
cursor: pointer;
}
#nav-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 99;
display: none;
}
nav {
position: fixed;
opacity: 0;
transition: opacity 3s;
z-index: 100;
display: none;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul > li > a {
display: block;
border: none!important;
text-align: center;
font-size: 28px;
text-transform: uppercase;
padding:10px;
text-decoration: none;
font-weight: bold;
line-height: 22px;
transition: letter-spacing 0.5s;
text-shadow: rgb(0, 0 , 0) 1px 0px 0px, rgb(0, 0 , 0) 0.540302px 0.841471px 0px, rgb(0, 0 , 0) -0.416147px 0.909297px 0px, rgb(0, 0 , 0) -0.989992px 0.14112px 0px, rgb(0, 0 , 0) -0.653644px -0.756802px 0px, rgb(0, 0 , 0) 0.283662px -0.958924px 0px, rgb(0, 0 , 0) 0.96017px -0.279415px 0px;
}
nav ul > li > a:hover {
letter-spacing: 5px;
}
nav ul > li.astm-search-menu form > div {
margin: 10px auto;
position: relative;
display: flex;
}
nav ul > li.astm-search-menu form input[type=text] {
flex-grow: 1;
}
nav ul > li.astm-search-menu #search-button {
background: white;
border: 1px solid black;
width: 26px;
height: 26px;
text-align: center;
line-height: 34px;
cursor: pointer;
}
#articles > .spinner {
position: fixed;
top: calc(50vh - 20px);
left: calc(25vw - 20px);
margin: 0;
z-index: 5000;
}
.articles-list {
transition: opacity 2s;
}
body.home .articles-list {
opacity: 0;
}
.articles-list.future {
padding-top: 220px;
}
.articles-list > article {
padding: 0 0 15px 15px;
}
.articles-list > article .date {
font-size: 18px;
font-weight: bold;
}
.articles-list > article .overtitle {
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
margin: 0;
}
.articles-list > article .title {
font-size: 48px;
line-height: 40px;
letter-spacing: -3px;
text-transform: uppercase;
font-weight: bold;
margin: 0;
cursor: pointer;
transition: margin 0.5s;
}
.articles-list > article .title:hover {
margin-top: 5px;
margin-bottom: -5px;
}
.articles-list > article .other-acts {
margin: 0;
font-size: 25px;
line-height: 21px;
}
.articles-list > article .content {
display: none;
padding: 5px;
margin-top: 10px;
border-bottom: 1px solid;
text-align: center;
background-color: rgba(0, 0, 0, 0.66);
}
.articles-list > article .content > h3 {
margin-top: -5px;
margin-bottom: 2px;
}
.articles-list > article .content > h3 + p {
margin-top: 0;
margin-bottom: 5px;
}
.articles-list > article .content.loaded {
padding: 15px;
margin-top: 10px;
}
article h1 > .date {
font-size: 0.7em;
font-weight: normal;
margin-right: 10px;
}
.load-more {
width: 100%;
text-align: center;
padding: 20px 0;
} .full-width {
max-width: 1024px;
margin: auto;
overflow: hidden;
}
.full-width h1 {
font-size: 48px;
color: #fff;
text-shadow: rgb(0, 0 , 0) 1px 0px 0px, rgb(0, 0 , 0) 0.540302px 0.841471px 0px, rgb(0, 0 , 0) -0.416147px 0.909297px 0px, rgb(0, 0 , 0) -0.989992px 0.14112px 0px, rgb(0, 0 , 0) -0.653644px -0.756802px 0px, rgb(0, 0 , 0) 0.283662px -0.958924px 0px, rgb(0, 0 , 0) 0.96017px -0.279415px 0px;
}
body.single .full-width,
body.page .full-width {
background-color: rgba(0, 0, 0, 0.66);
word-wrap: break-word;
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
@media screen and (max-width: 1220px) {
.full-width {
margin: 0 85px 0 15px;
}
} footer {
margin-top: 15px;
padding: 15px 15px 65px 15px;
background-color: rgba(0, 0, 0, 0.2);
}
#footer-menu {
text-align: center;
list-style: none;
margin: 15px 0;
padding: 0;
font-size: 0.8em;
}
#footer-menu > li {
display: inline-block;
}
#footer-menu > li > a {
display: inline-block;
margin: 0 10px;
text-transform: uppercase;
font-weight: bold;
}
#footer-menu > li:after {
content: '|';
}
#footer-menu > li:last-child:after {
content: '';
}
.follow-us {
width: 415px;
text-align: center;
}
.follow-us a {
font-size: 45px;
display: inline-block;
margin:0 10px;
border: none;
transition: transform 0.5s;
}
.follow-us a:hover {
transform: scale(1.25);
}
#follow-us-bottom {
position: fixed;
right: 15px;
bottom: 40px;
width: auto;
}
#follow-us-bottom > a {
color: #000;
text-shadow: rgb(0,0,0) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989992px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756802px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279415px 0px;
font-size: 20px;
}
.sharing-buttons {
margin: 15px 0;
white-space: nowrap;
}
.sharing-buttons > .text {
line-height: 38px;
display: inline-block;
vertical-align: bottom;
}
.sharing-buttons a {
display: inline-block;
margin-left: 10px;
border: none;
font-size: 2em;
transition: transform 0.5s;
}
.sharing-buttons a:hover {
transform: scale(1.25);
}
.share.facebook { color: #3b5998; }
.share.twitter { color: #1da1f2; }
.share.pinterest { color: #bd081c; }
.share.instagram { color: #e1306c; }
.share.google-plus { color: #dd4b39; }
.share.soundcloud { color: #ff8800; }
.share.whatsapp { color: #25d366; }
.share.mixcloud { color: #52aad8; } .pjnt-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.pjnt-box a {
color: inherit;
padding: 5px;
display: inline-block;
color: #fff;
} .fancybox-content {
border: none;
padding: 45px 0 30px 0;
}
.fancybox-close-small {
color: #000 !important;
cursor: pointer;
}
.fancybox-close-small:hover {
color: #fff !important;
}
@media all and (max-width: 345) {
.follow-us a {
margin: 0 5px;
}
}
.spinner {
width: 40px;
height: 40px;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% { 
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
} 50% { 
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
} 100% { 
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
} body.home nav,
body.archive nav,
body.search nav {
opacity: 1;
}
body.page nav ul > li > a,
body.single nav ul > li > a,
body.post-type-archive-media nav ul > li > a ,
body.post-type-archive-resident nav ul > li > a {
color: #fff;
text-shadow: none;
}
body.page #menu-button,
body.single #menu-button,
body.post-type-archive-media #menu-button,
body.post-type-archive-resident #menu-button {
display:block;
} body.post-type-archive-media nav {
display: none;
}
body.post-type-archive-media h2 {
color: #fff;
text-shadow: rgb(0 0 0) 1px 0px 0px, rgb(0 0 0) 0.540302px 0.841471px 0px, rgb(0 0 0) -0.416147px 0.909297px 0px, rgb(0 0 0) -0.989992px 0.14112px 0px, rgb(0 0 0) -0.653644px -0.756802px 0px, rgb(0 0 0) 0.283662px -0.958924px 0px, rgb(0 0 0) 0.96017px -0.279415px 0px;
}
.media-archive-category:after {
content: '';
display: block;
clear: both;
}
.media-archive-category + form {
padding: 30px 0;
text-align: center;
}
article.media {
float: left;
width: calc(25% - 30px);
cursor: pointer;
margin: 0 10px 10px 0;
position: relative;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
article.media:after {
content: '';
display: block;
padding-top: 100%;
}
article.media:nth-of-type(4n) {
margin-right: 0;
}
article.media > .info {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, .75);
color: #fff;
margin: 0;
padding: 10px;
left: 0;
bottom: 0;
text-align: center;
box-sizing: border-box;
}
article.media > .info > h2 {
margin: 0;
padding: 0;
} .articles-list > article.media {
float: none;
width: calc(100% - 20px);
margin: 10px;
max-height: 300px;
} body.post-type-archive-resident nav {
display: none;
}
body.post-type-archive-resident .full-width > article {
float: left;
width: calc(25% - 30px);
cursor: pointer;
margin: 0 10px 10px 0;
position: relative;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body.post-type-archive-resident .full-width > article:after {
content: '';
display: block;
padding-top: 100%;
}
body.post-type-archive-resident .full-width > article:nth-of-type(4n) {
margin-right: 0;
}
body.post-type-archive-resident .full-width > article h2 {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .75);
color: #fff;
margin: 0;
padding: 0;
left: 0;
top: 100%;
transition: top 0.5s;
overflow: hidden;
text-align: center;
}
body.post-type-archive-resident .full-width > article:hover h2 {
top: 0;
}
body.post-type-archive-resident .full-width > article h2 > div {
position: relative;
top: 50%;
transform: translateY(-50%);
} .overlay {
display: none;
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.9);
overflow: auto;
}
.overlay > .close {
cursor: pointer;
position: absolute;
top: 45px;
right: 10px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
font-size: 45px;
transition: transform 0.5s;
}
.overlay > .close:hover {
transform: scale(1.25);
}
.overlay > .contents {
max-width: 800px;
margin: 30px auto;
padding: 10px;
} .responsive-iframe {
position:relative;
overflow:hidden;
}
.responsive-iframe > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
@media screen and (max-width: 860px) {
.past-future {
font-size: 20px;
}
#past {
left: -13px;
}
#future {
left: -22px;
}
#articles {
padding-left: 15px;
}
#articles > .spinner {
position: fixed;
top: calc(50vh - 20px);
left: calc(50vw - 20px);
}
nav, #follow-us-bottom {
display: none;
}
nav ul > li > a {
color: #fff!important;
text-shadow: none!important;
}
#menu-button {
display:block;
} article.media {
width: calc((100% / 3) - 20px);
}
article.media:nth-of-type(4n) {
margin-right: 10px;
}
article.media:nth-of-type(3n) {
margin-right: 0;
} body.post-type-archive-resident .full-width > article {
width: calc((100% / 3) - 20px);
}
body.post-type-archive-resident .full-width > article:nth-of-type(4n) {
margin-right: 10px;
}
body.post-type-archive-resident .full-width > article:nth-of-type(3n) {
margin-right: 0;
}
}
@media screen and (max-width: 560px) { body.custom-background {
background-position: inherit!important;
} article.media {
width: calc(100% - 10px);
float: none;
margin: 0 0 10px 0 !important;
} .articles-list > article.media {
float: none;
width: calc(100% - 20px);
margin: 10px;
max-height: 300px;
} body.post-type-archive-resident .full-width > article {
width: calc(50% - 10px);
}
body.post-type-archive-resident .full-width > article:nth-of-type(4n) {
margin-right: 10px;
}
body.post-type-archive-resident .full-width > article:nth-of-type(3n) {
margin-right: 10px;
}
body.post-type-archive-resident .full-width > article:nth-of-type(2n) {
margin-right: 0;
}
} body.admin-bar a.custom-logo-link {
top: 42px;
}
@media screen and (max-width: 600px) {
#wpadminbar {
position: fixed;
}
body.admin-bar a.custom-logo-link {
top: 56px;
}
body.admin-bar #past {
top: 105px;
}
.overlay > .close {
top: 100px;
}
} .pjnt-content  {
font-size: 200% !important;
} .wow-modal-button-2  {
background: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {background-color: red;}
to {background-color: green;}
}