html, body{
margin:0px;
padding: 0px;
color: #353535;
font-family: 'Raleway', sans-serif;
font-size: 0.9rem;
overflow-x:hidden;
}
.nl-button-wp{
overflow: visible;
position: fixed;
right: 0px;
top: 10%;
z-index: 4500;
}
.nl-button-wp svg .cls-1, .nl-button-wp svg .cls-2, .nl-button-wp svg .cls-3{
stroke-width: 1.5px;
}
.nl-button-wp .icon{
width: 45px;
height: 45px;
background-color: #ea514a;
padding: 6px 3px 10px 8px;
display: inline-block;
float: left;
position: relative;
z-index: 4000;
cursor: pointer;
}
.nl-button-wp .icon svg .campana.animated, .nl-button-wp .icon.animated svg{
animation: buzzing 0.2s ease-in-out;
}
.nl-button-wp .txt{
position: absolute;
right: -280px;
height: 45px;
padding: 0px 20px;
line-height: 45px;
color: #ffffff;
font-weight: 700;
display: inline-block;
background-color: #487ab6;
letter-spacing: 0.08em;
float: left;
z-index: 3000;
width: 280px;
text-align: center;
transition: all 0.23s ease-in-out;
}
.nl-button-wp .txt.visible{
right: 45px;
}
.nl-form-wrapper{
padding: 30px;
}
#mc_embed_signup .mc-field-group{
padding-bottom: 1% !important;
}
.mobile, .only-mobile{
display: none !important;
}
a:hover{
text-decoration: none;
}
.gm-style .gm-style-iw {
background-color: #f5f5f5 !important;
top: 16px !important;
left: 0 !important;
padding-top: 10px;
display: block !important;
padding: 20px;
width: 100% !important;
height: 230px !important;
overflow: hidden !important;
min-width: 550px;
min-height: 110px;
font-size: 0.8em;
}
.gm-style .gm-style-iw :parent{
background-color: #f5f5f5 !important;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
::-moz-scrollbar {
width: 0px;
-moz-opacity: 0;
-moz-appearance: none !important;
background: transparent; /* make scrollbar transparent */
}
scrollbar {-moz-opacity: 0 !important; -moz-appearance: none !important;}
scrollbar:hover {-moz-opacity: 0 !important; -moz-appearance: none !important;}
.gm-style .gm-style-iw h1{
font-size: 1.5em;
color: #353535;
margin-top: 20px;
}
.gm-style-iw.gm-style-iw-c{
border-radius: 0px;
padding: 0.7em !important;
width: 555px !important;
height: 190px !important;
}
/*style the p tag*/
.gm-style .gm-style-iw #google-popup p{
padding: 10px;
}
/*style the arrow*/
.gm-style div div div div div div div div:not(.label-currently):not(.label-previously):not(.page-link-m) {
background-color: #f5f5f5 !important;
padding: 0;
margin: 0;
padding: 0;
top: 0;
color: #333;
font-size: 14px;
}
.gm-style-iw-d{
background-color: #ffffff !important;
overflow: hidden !important;
height: 160px !important;
}
.gm-style .gm-style-iw-t::after{
top: 16px;
border-top: 15px solid #f6f6f6;
}
.page-link-m{
padding: 5px;
background-color: #E95149;
display: inline-block;
position: absolute;
width: 60px;
text-align: center;
bottom: 0px;
right: 0px;
}
.page-link-m a{
color: #fff !important;
width: 100%;
height: 100%;
text-decoration: none;
}
/*style the link*/
.gm-style div div div div div div div div a {
color: #21252a;
/*font-weight: bold;*/
font-size: 0.8em;
}
.home{
height: 100vh;
background-color:#fff;
position: relative;
overflow-x: hidden;
position: relative;
z-index: 4000;
}
.home.ind-page{
height: auto;
overflow: auto;
}
.home.ind-page h1{
display: inline-block;
font-size: 3em;
font-weight: bold;
color: #353537;
}
.home.ind-page .logo {
width: 100%;
left: initial;
height: 50px;
margin: 55px 0px;
padding: 0px 15px;
/*transition: padding 0.5s linear;*/
}
.home.ind-page .logo.fixed-header {
position: fixed;
top: 0px;
margin: 0px;
padding: 20px 15px;
z-index: 1000;
box-sizing: content-box;
}
.home.ind-page .logo img{
filter: brightness(0) invert(0);
opacity: 0.8;
height: 45px;
float: right;
margin-top: 6px;
position: relative;
}
#popup-contact{
z-index: 5000 !important;
}
#popup-contact .modal-content{
height: auto;
border: none !important;
}
#popup-contact .modal-dialog{
max-width: 55%;
height: auto;
position: relative;
top: 45%;
transform: translateY(-50%) !important;
}
#popup-contact h1{
font-weight: 800;
color: #487ab6;
letter-spacing: 0.03em;
font-size: 1.8em;
}
.modal-backdrop.show{
z-index: 4000;
}
/*************************************** CITY CONTEXT *****************************************/
.city-profile{
overflow: hidden !important;
}
.city-profile .lang{
z-index: 4000;
position: absolute;
font-weight: 600;
font-size: 1.3em;
letter-spacing: 0.1em;
display: inline-block;
top: 50%;
right: 0px;
font-weight: 600;
transform: rotate(90deg) translateY(-50%);
}
.city-profile .lang a{
color: #fff;
}
.fullsize.city-profile{
height: 100vh !important;
}
.city-profile .graphic .section{
display: inline-block;
position: relative;
}
.city-footer{
position: absolute;
bottom: 30px;
overflow: auto;
width: calc(100% - 80px);
}
.city-profile .graphic{
z-index: 3000;
text-align: center;
position: absolute;
width: calc(100% - 80px);
top: 50%;
transform: translateY(-50%);
}
.city-profile .graphic img{
width: 70%;
}
.city-footer .city-profile{
position: relative;
z-index: 1000;
float: right;
color: #fff;
font-size: 2em;
font-weight: 700;
letter-spacing: 0.05em;
display: inline-block;
margin-left: 20px;
}
.city-footer hr{
position: relative;
float: left;
width: 80%;
border-top: 4px solid #fff;
}
.city-profile h1{
z-index: 1000;
color: #fff !important;
position: relative;
letter-spacing: 0.05em;
}
.city-profile .bg{
position: absolute;
z-index: 0;
width: 100%;
top: 0px;
left: 0px;
-moz-filter: url("data:image/svg+xml;utf8,#grayscale");
-o-filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
}
.city-profile h1{
color: #fff;
}
.city-context-text{
background-color: #fff;
padding: 30px 50px 30px 30px;
display: inline-block;
float: left;
min-height: 600px;
margin-top: -21px;
}
.city-info{
display: inline-block;
float: left;
left: -40px;
top: 40px;
}
.city-info .city-image img{
width: 100%;
height: auto;
-moz-filter: grayscale();
-webkit-filter: grayscale();
filter: grayscale();
}
.city-details .title{
text-transform: uppercase;
}
.city-details .subtitle{
color: #487ab6;
position: relative;
z-index: 500;
font-weight: 700;
letter-spacing: 0.1em;
}
.city-data{
background-color: #487ab6;
color: #fff;
border-top: 5px solid #E95149;
padding: 15px 20px;
}
.city-data div{
margin-bottom: 5px;
}
.city-data b{
text-transform: capitalize;
letter-spacing: 0.07em;
font-weight: 600;
}
.city-page .extend{
display: none;
background-color: #f1efde;
padding:20px;
margin-top: 20px;
}
.city-page .table{
background-color: #487ab6;
color: #fff;
width: 35%;
float: right;
display: inline-block;
padding: 15px;
}
.city-more{
/* left: -76px; */
width: 100%;
margin-top: 18px;
}
.city-more h3{
font-size: 1.2em;
font-weight: 700;
border-bottom: 3px solid #353535;
text-align: left;
/*margin-bottom: 10px;*/
margin-bottom: 0px;
padding: 5px 10px 5px 22px;
}
.city-more .sections{
display: block;
/*margin-bottom: 10px;*/
overflow: auto;
border-bottom: 2px solid;
padding:10px;
}
.city-more .sections:hover{
background-color: #fdfcf3;
/*border-bottom: 2px solid;*/
}
.city-left{
display: inline-block;
float: left;
position: relative;
}
.city-more a{
color: #353535 !important;
font-weight: 600;
float: left;
}
.city-more .marker{
height: 12px;
width: 12px;
float: left;
margin-top: 4px;
display: inline-block;
background-color: #E95149;
margin-right: 10px;
}
.city-page .table b{
letter-spacing: 0.1em;
}
.city-page header{
display: inline-block;
font-size: 1.5em;
background-color: #353535;
color: #fff;
letter-spacing: 0.1em;
padding: 10px 20px;
}
.city-page h2, .city-context-text h2{
margin-top: 30px;
font-size: 1.5em;
font-weight: 600;
color: #487ab6;
}
.city-page h3, .city-context-text h3{
margin-top: 20px;
font-size: 1.2em;
font-weight: 600;
color: #82b6c4;
}
.city-page h4, .city-context-text h4{
font-size: 1.1em;
font-weight: 600;
color: #487ab6;
margin-top: 10px;
}
.city-page .info-wrapper{
padding: 20px 0px;
border-top: 4px solid #353535;
}
.city-page .segment{
margin-bottom: 20px;
background-color: #ffffff;
padding: 20px;
color: #353535;
overflow: auto;
}
.city-page .intro{
font-style: normal;
font-size: 1.1em;
font-weight: 600;
float: left;
width: 60%;
margin-bottom: 15px;
}
.logo.fixed-header img{
right: 3%;
}
.logo img{
height: 100%;
}
.copyright a{
color: #5693c2 !important;
}
.home ul{
list-style-type: none;
margin:0px;
padding: 0px;
overflow:auto;
}
.home ul li{
float: left;
padding: 15px;
cursor: pointer;
}
.home ul li:hover, .home ul li.active{
background-color: #2d2d2d;
color:#eaeaea;
}
.menu a, .logo a{
text-decoration: none;
color: inherit;
}
.menu{
overflow: auto;
letter-spacing: 0.15rem;
}
.submenu{
display: none;
position: absolute;
background-color: whitesmoke;
color: #353535;
z-index: 5000;
top: 49px;
margin-left: -15px !important;
}
.submenu li{
float: initial !important;
}
.submenu li:hover{
background-color: #eaeaea !important;
color: #353535 !important;
}
.menu ul{
float: left;
}
.language{
float: right;
padding: 15px;
color: #76a8bd;
}
.language-list{
display: none;
}
.search-bar{
float: right;
overflow:auto;
margin-top: 10px;
}
.search-ico{
display: inline-block;
height: 35px;
width: 35px;
color: #fff;
text-align: center;
line-height: 35px;
border:none;
border-radius: 0px;
background-color: #353535;
}
.search-txt{
display: inline-block;
width: 200px;
height: 35px;
border: solid 1px #353535;
color: #353535;
float: right;
font-size: 0.7rem;
padding-left: 10px;
letter-spacing: 0.15rem;
background-color: transparent;
}
.logo{
background-color: #fff;
height: 90px;
width: 90px;
left: 5.2%;
}
footer{
position: absolute;
bottom: 0px;
width: 100%;
font-size: 0.8rem;
}
.social{
margin-bottom: 30px;
}
.social-ico{
margin-bottom: 20px;
padding: 0px;
}
.social-ico div{
display: inline-block;
height: 35px;
width: 35px;
line-height: 35px;
color: #eaeaea;
background-color: #353535;
text-align: center;
margin-right: 10px;
cursor: pointer;
}
.social-ico div:hover{
background-color: #4882b6;
}
.social-ico div{
padding: 7px;
}
.social-ico svg{
fill:#f1efde;
vertical-align: unset;
}
.social-latest{
display: inline-block;
padding: 10px;
border: 1px solid #353535;
/*width: 500px;*/
}
.social-latest .s-user, .copyright a{
font-weight: 600;
}
.copyright{
float: right;
font-size: 0.7rem;
/*margin-top: 15px;*/
line-height: 40px;
}
.social-l-wrapper{
float: left;
padding: 0px;
}
.social-bottom{
overflow: hidden;
}
.cr-wrapper{
float: right;
overflow: visible;
margin-top:15px;
padding: 0px;
}
.slider{
margin-top: -20px;
width: 57%;
float: right;
overflow:hidden;
position: absolute;
right: 0px;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 55vh;
}
#wwdCarousel{
background-color:#333333;
width:100%;
position: relative;
right: initial;
top: 214px;
height: 388px;
}
#wwdCarousel2{
height: 60%;
top: 60%;
width: 45%;
}
#about-carousel{
width: 100%;
position: relative;
top: initial;
right: initial;
z-index: auto;
}
.slider img{
/*height:100%;
width: auto;
filter:grayscale(100%);
float: right;
/*position: absolute;
top: 50%;
transform:translateY(-50%);
display: inline-block;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; //
overflow: hidden;*/
/*height: 100%;
width: auto;*/
height: auto;
width: 100%;
filter: grayscale(100%);
float: right;
max-width: unset;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
overflow: hidden;
}
#wwdCarousel img{
width: 100%;
height: auto;
}
.carousel-inner{
height: 100%;
}
.carousel-item{
height: 100%;
}
.carousel-caption{
font-size: 1.5em;
font-weight: 500;
font-size: 1em;
letter-spacing: 0.15em;
bottom: 0px;
padding-top: 5px !important;
width: 100% !important;
left: 0px !important;
right: 0px !important;
padding-bottom: 5px !important;
background-color: #333;
letter-spacing: 0.15em;
}
.carousel-indicators{
bottom: 30px !important;
}
.slider img:nth-child(2){
right: -100%;
}
.slider img:nth-child(2).visible{
right:0px;
}
.arrow-up{
width: 0px;
height: 0px;
margin-left: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #353537;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
overflow: hidden;
}
.arrow-up.tw{
margin-left: 55px;
}
.slider .arrow-right{
position: absolute;
right: calc(5.2% + 60px);
display: none;
top: 45%;
width: 0px;
height: 0px;
cursor: pointer;
z-index: 5000;
border-left: 30px solid #eaeaea;
border-right: 30px solid transparent;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
#about-carousel .arrow-right{
border-left: 20px solid #eaeaea;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#about-carousel .arrow-left{
left: calc(5.2% + 60px);
right: initial;
border-left: 20px solid transparent;
border-right: 20px solid #eaeaea;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.about, .partners, .map, .news, .puzzle, .contact, .resiliencepills{
height: 50vh;
min-height: 320px;
}
.resiliencepills .right{
float: right;
padding: 0px;
height: 100%;
}
.resiliencepills .left .youtube-video{
float: right;
margin-bottom:10px;
cursor: pointer;
width: 100%;
padding-bottom: 10px;
border-bottom: 2px solid #4680bb;
}
/*
.resiliencepills .left .youtube-video:hover{
border-bottom: 2px solid #4680bb;
margin-bottom: 18px;
}*/
.resiliencepills .left .youtube-video h2{
float: left;
width: 70%;
font-size: 1em;
padding-right:10px;
font-weight: bold;
}
.resiliencepills .left .ytp-large-play-button{
height: 28px;
width: 28px;
}
.yt-prev-img-wr{
display: inline-block;
position:relative;
float:right;
width:30%;
height:50px;
overflow:hidden;
}
.yt-prev-img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 100%;
}
.resiliencepills .left{
float: left;
height: 100%;
overflow: hidden;
padding: 0px;
color: #fff;
background-color: #353535;
}
.resiliencepills .title{
text-align: center;
background-color: #ea5143;
}
.resiliencepills .title h1{
line-height: 7rem;
margin-bottom: 0px;
}
.viswrapper{
float: left;
height: 100%;
width: 100%;
overflow: scroll;
padding: 20px 70px;
background-color: #f5f5f5;
color: #353535;
height: calc(50vh - 100px);
}
.resiliencepills{
position: relative;
overflow: hidden;
}
/*
.resiliencepills .title{
position: absolute;
color: #eaeaea;
font-size: 1em;
padding: 12px 30px;
background-color: #ea5049;
transform: rotate(-90deg) translateY(-50%);
left: -49px;
top: 43%;
font-weight: bold;
letter-spacing: 0.15em;
}
*/
.coming-soon, .join-us{
width: 100vw;
height: 100vh;
background-color: #487ab6;
position: absolute;
top: 0px;
z-index: 5000;
border: 20px solid #EEEBD5;
opacity: 0.95;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.popup-wrapper{
display: none;
width: 100vw;
height: 100vh;
background-color: #487ab6;
opacity: 0.95;
position: fixed;
top: 0px;
left: 0px;
}
.a-y-partner{
position: absolute;
bottom: 0px;
right: 0px;
color: #fff;
margin: 20px;
font-weight: 700;
cursor: pointer;
}
.a-y-partner div{
display: inline-block;
color: #353535;
}
.coming-soon header, .join-us header{
font-size: 7em;
letter-spacing: 0.4em;
color: #fff;
font-weight: 900;
line-height: 1.2em;
}
.join-us a{
color: #fefefd;
}
.join-us header{
letter-spacing: 0.2em;
border-bottom: 15px solid;
margin-bottom: 40px;
padding-bottom: 20px;
}
.coming-soon header hr, .join-us header hr{
display: inline-block;
height: 14px;
margin-top: 0.5em;
width: 30%;
float: right;
background-color: #fff;
}
.coming-soon .btn-left, .join-us .btn-left{
display: inline-block;
background-color: #E95149;
color: #fff;
padding: 10px;
font-size: 1.2em;
letter-spacing: 0.1em;
font-weight: 600;
margin-right: 10px;
border-bottom: 4px solid #353535;
}
.partner-password{
width: 600px;
background-color: #eeebd3;
padding: 30px 50px;
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.partner-password.animated{
animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}
.coming-soon .btn-right, .join-us .btn-right{
display: inline-block;
background-color: #EEEBD5;
color: #487ab6;
padding: 10px 20px;
font-size: 1.2em;
letter-spacing: 0.1em;
font-weight: 600;
margin-right: 20px;
border-bottom: 4px solid #353535;
}
.coming-soon .nl, .join-us .nl{
color: #fff;
font-size: 1.2em;
font-weight: 700;
border-bottom: 2px solid;
padding-bottom: 5px;
float: right;
margin-top: 0.25em;
}
.coming-soon .nl:hover, .join-us .nl:hover{
text-decoration: none;
}
.coming-soon .subscription, .join-us .subscription{
margin-bottom: 40px;
color: #487ab6;
overflow: auto;
font-weight: 800;
margin-top: 20px;
font-size: 1.5em;
}
.coming-soon p, .join-us p{
font-size: 2.5em;
color: #353535;
font-weight: 700;
margin-bottom: 40px;
}
.coming-soon .wrapper, .join-us .wrapper{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
body.hidden, html.hidden{
width: 100vw;
height: 100%;
position: fixed;
overflow-y: hidden !important;
}
.about{
background-color: #eaeaea;
}
.about .img, .about .txt, .partners .left, .partners .right{
display: inline-block;
float: left;
padding: 0px;
}
.pwu{
font-size: 2em !important;
border-bottom: 4px solid;
text-align: left !important;
padding-bottom: 4px !important;
line-height: 1.2em !important;
}
.imgwur{
height: 100%;
width: 0px;
background-color: #f5f5f5;
position: relative;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.imgwur.visible{
width: 25%;
}
.newsanimated.visible{
width: 100%;
}
.about .img img{
width: 70%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.about .txt .title{
height: 25vh;
background-color: #353535;
color: #eaeaea;
width: 100%;
text-align: center;
}
.about .txt .description{
position: relative;
height: 25vh;
background-color: #fff;
color: #353535;
width: 100%;
font-size: 0.9rem;
padding: 50px;
}
.more, .close-more{
display: inline-block;
position: absolute;
background-color: #76aabf;
color:#fff;
bottom: 0px;
right: 40px;
cursor: pointer;
font-weight: 500;
letter-spacing: 0.15rem;
padding: 10px 20px;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.city{
width: 23%;
position: absolute;
bottom: 0px;
}
.city.left{
left: 0px;
}
.city.right{
right: 0px;
}
.people{
position: absolute;
bottom: 500px;
}
.people.left{
width: 11.5%;
left: 5%;
}
.people.right{
width: 15%;
right: 8.5%;
bottom: 50px;
}
.partners .right{
position: relative;
background-color:#404040;
color: #eaeaea;
height: 100%;
}
.partners .left img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 100%;
}
.partners .left{
position: relative;
height: 100%;
color: #353535;
background-color: #353535;
}
.contact-us h1, footer h1{
position: absolute;
display: inline-block;
left: 5%;
color: #353535 !important;
line-height: normal;
top: 20%;
-webkit-transform: rotate(-90deg) translateY(-50%);
-moz-transform: rotate(-90deg) translateY(-50%);
-ms-transform: rotate(-90deg) translateY(-50%);
transform: rotate(-90deg) translateY(-50%);
}
.partnersleft, .partnersright{
overflow:hidden;
width: 0px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.partnersleft.visible, .partnersright.visible{
width: 50%;
}
.partners .description{
position: absolute;
top: 36%;
/*transform: translateY(-50%);*/
padding: 0px 50px;
font-size: 1em;
}
.partners h1{
margin-left: 50px;
}
.partners-group{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.partners-group .row{
margin: 0px;
height:50%;
padding: 0px;
position: relative;
}
.partners-group div div{
display: inline;
padding: 10px 1%;
text-align: center;
color: #fff;
font-size: 1em;
/* background-color: #404040; */
background-color: #4782b6;
font-weight: 500;
letter-spacing: 0.1rem;
/* font-size: 0.7rem; */
cursor: pointer;
position: relative;
}
.partners-group div div div{
position: absolute;
left: 50%;
top: 50%;
background-color: transparent;
width: 80%;
line-height: initial;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.partner:hover{
background-color: #353535;
/*animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;*/
}
.partners-group .blue{
background-color: #4781b6;
}
.partners-group .red{
background-color: #ea5049;
}
.partners-group .light-blue{
background-color: #76a9bd;
}
.light-blue{
background-color: #76a9bd;
color: #fff;
}
.news{
height: 50vh;
background-color: #353535;
color:#eaeaea;
overflow:hidden;
position: relative;
}
.news .news-txt{
}
.news .left{
padding: 50px;
float: left;
height: 100%;
background-color: #404040;
}
.newsanimated{
float: right;
padding: 0px;
width: 0px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.newsanimated .title{
background-color: #4680bb;
color: #ffffff;
}
.newsanimated .title{
text-align: center;
}
.puzzle h1{
text-align: start;
}
.news h2{
color: #fff;
margin-bottom: 20px;
}
.news .date{
font-weight: 500;
letter-spacing: 0.15rem;
}
.news .more{
background-color: #447ec6;
color: #ffffff;
position: absolute;
bottom: 0px;
margin-right: 30px;
}
.news .more-btn{
color: #ffffff;
display: none;
position: absolute;
bottom: 0px;
margin-right: 35px;
}
.more.more-yt-vid{
position: relative;
right: 0px;
float: right;
margin-top: 20px;
}
.more.more-yt{
display: none;
position: relative;
float: right;
margin-top: 20px;
right: 0px;
}
.latest-news{
padding: 30px 50px 50px 50px;
box-sizing: border-box;
height: calc(50vh - 100px);
background-color: whitesmoke;
color: #353535;
}
.news-group{
border-top: 2px solid #eb4f48;
margin-top: 16px;
height: 100%;
overflow: scroll;
}
.latest-news div div a{
font-weight: bold;
color: #353535;
text-decoration: none;
}
.latest-news div div{
margin:1rem 0px 0px 0px;
/*font-size: 1.1em;*/
}
.puzzle{
position: relative;
background-color: #eaeaea;
overflow:hidden;
}
.double-line{
text-align: left;
width: 61%;
}
.pieces{
/*overflow:auto;*/
height: 100%;
}
.piece{
float: left;
height: 100%;
cursor: pointer;
text-align: center;
padding: 0px;
}
.piece a{
color: inherit;
text-decoration: none;
}
.pieces .row{
margin-right: 0px;
margin-left: 0px;
height: 50%;
background-color: #fff;
}
.piece.blue{
background-color: #fff;
color: #323232;
}
.city-profile-items div{
padding: 20px;
height: 10vh;
position: relative;
display: inline-block;
float: left;
}
.city-profile-items a{
/*width: 80%;*/
text-align: center;
color: inherit !important;
font-weight: 600;
/* position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);*/
}
.piece.empty{
width: 22.4%;
position: absolute;
right: 0px;
background-color: #fff;
height: 100%;
overflow: hidden;
}
.piece.empty.right{
position: relative;
background-color: #eaeaea;
}
.pieces div.white{
background-color: #eaeaea;
color: #323232;
}
.pieces div.black{
background-color: #353535;
color: #eaeaea;
}
.pieces div:hover{
/*color: #E95149;*/
}
.piece:hover{
background-color: #4781b6 !important;
}
#urh{
display: inline-block;
/* font-size: 4.6em; */
background-color: #76a9bd;
color: #f1efde;
width: 46%;
position: absolute;
top: 25vh;
z-index: 500;
font-weight: 700;
padding: 3.3em;
height: 45%;
}
.logo-txt{
font-size: 2.52vmin;
font-size: 5.2vmax;
letter-spacing: 0.2em;
line-height: 1.2em;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#logo{
display: inline-block;
width: 150px;
position: relative;
font-size: 20px;
font-weight: 200;
line-height: 35px;
letter-spacing: initial;
box-sizing: border-box;
top: -4px;
z-index: 4500;
color: #f1efde;
}
#logo img{
width: 100%;
}
.logo-highlighter{
position: absolute;
z-index: 4500;
width: 100%;
top: 0px;
left: 0px;
height: 20px;
background-color: #ea514a;
}
.logo-conector{
position: absolute;
top: 65vh;
right: 0px;
z-index: 4500;
display: none;
}
.logo-conector .line{
margin-top: 3px;
width: 66vw;
background-color: #353535;
height: 4px;
z-index: 5000;
float: left;
}
.mini-circle{
width: 10px;
height: 10px;
background-color: #353537;
border-radius: 100%;
float: left;
}
.pieces div.vertical{
position: absolute;
top: 80px;
right: 199px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
text-align: center;
height: 201px;
z-index: 4500;
}
.about-ur, .news-detail{
padding: 0px;
height:0px;
width:0px;
right: 30px;
top: 50vh;
position:fixed;
z-index: 500;
background-color: #353535;
color: #eaeaea;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
overflow: hidden;
}
.about-ur.fullsize, .news-detail.fullsize{
display: block;
height:100%;
width:100%;
padding: 80px 100px;
right: 0px;
top: 0vh;
z-index: 5000;
}
.faf-link, .wwd-link{
width: 47%;
margin-top: 20px;
float: left;
height: 100px;
text-align: center;
/* line-height: 100px; */
font-size: 1.5em;
line-height: 1em;
position: relative;
border-bottom: 3px solid #353535;
}
.faf-link{
background-color: #ea5345;
margin-right: 5%;
}
.wwd-link{
background-color: #82b6c4;
}
.faf-link a, .wwd-link a{
color: #fff !important;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
text-decoration: none;
font-weight: 500;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.wwd-link a:hover{
color: #353535 !important;
}
.fullsize{
color: #2e2e2e;
/*background-color: #f1efde;*/
background-color: #fbfbfb;
overflow-y: scroll;
/*border: solid 15px #fff;*/
/*-webkit-font-smoothing: antialiased;*/
}
.fullsize .container{
padding: 40px 20px;
overflow: auto;
}
.fullsize.full-ind{
padding: 40px 40px 100px 40px;
min-height: calc(100vh - 209px);
position: relative;
z-index: 1;
}
.fullsize.full-ind .modal-dialog{
max-width: 100%;
height: 100%;
position: relative;
margin-top: 0px;
}
.fullsize.page{
padding: 100px 0px;
}
.fullsize.full-ind.partner-page .content-center{
position: relative;
height: auto;
}
.fullsize.full-ind.partner-page .people{
bottom: 12px;
}
.fullsize.full-ind.partner-page .people.left{
left: calc(4% + 15px);
}
.fullsize.full-ind.partner-page .city{
position: absolute;
}
.fullsize .search-bar{
float: left;
margin-top: 40px;
width: 100%;
}
.fullsize .search-txt{
width: 90%;
}
.fullsize .search-ico{
width: 10%;
}
#thelibrary .books .row{
margin-bottom: 30px;
}
.categories{
overflow: auto;
margin-top: 40px;
border-bottom: 4px solid;
}
.categories div{
padding: 10px 30px;
background-color: #76a9bd;
float: left;
color: #fff;
letter-spacing: 0.05em;
cursor: pointer;
font-weight: 600;
font-size: 1.3em;
margin-right: 10px;
}
.categories div:hover{
background-color: #4781b6;
}
.categories div.active{
background-color: #4781b6;
}
.the-library{
display: flex;
margin-top: 40px;
flex-wrap: wrap;
}
.the-library .publication .book-hover{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 254, 250, 0.82);
display: none;
-moz-animation: 0.5s ease-in;
-webkit-animation: 0.5s ease-in;
animation: 0.5s ease-in;
}
.the-library .publication .book-hover.visible{
display: block;
}
.publication .book-hover .icon{
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%,-50%);
font-size: 1em;
letter-spacing: 0.05em;
color: #4781b6;
/* border: solid; */
line-height: 0.8em;
padding: 10px;
/* border-radius: 100%; */
font-weight: 700;
}
.the-library .publication, .fullsize .publication{
float: left;
margin-bottom: 1%;
cursor:pointer;
}
.the-library .publication .img, .fullsize .publication .img{
/*height: 400px;*/
position: relative;
overflow: hidden;
padding: 10px;
background-color: #fff;
}
.the-library .publication img, .fullsize .publication img{
width: 100%;
height: auto;
}
.itn-art {
margin-bottom: 2em;
position: relative;
}
.itn{
moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 4em;
-webkit-column-gap: 4em;
column-gap: 4em;
margin-top: 20px;
}
.itn-art a{
text-decoration: none;
}
.the-library .publication .info, .itn-art .info, .fullsize .publication .info{
background-color: #fff;
color: #353535;
padding: 15px;
border-top: 4px solid #4781b6;
}
.itn-art .info{
border-top: 4px solid #487ab6;
display: inline-block;
font-size: 0.7em;
line-height: 1.2em;
}
.itn-art .year{
color: #E95149;
font-size: 1.1em;
font-weight: 500;
margin-bottom: 10px;
position: relative;
z-index: 500;
}
.itn-art .go-to{
font-size: 1.5em;
position: absolute;
display: inline-block;
right: -8px;
bottom: -8px;
}
.the-library .publication .info span{
font-size: 1.2em;
color: #4681b6;
}
.the-library .publication .info .year, .fullsize .publication .info .year{
float: right;
}
#thelibrary .books .book{
cursor: pointer;
}
.book-title{
font-size: 1em;
line-height: 1.1em;
font-weight: bold;
}
#book-reader{
z-index: 5000 !important;
}
.modal-backdrop.show{
}
.modal-title{
margin-top: 0px !important;
color: #4883b6;
font-family: 'roboto';
}
.modal-title a{
color: inherit;
}
.modal-content{
border:none;
border-radius: 0;
height: 100%;
}
.modal-body{
padding: 0px;
}
.modal-dialog{
max-width: 90%;
height: 90%;
position: relative;
}
#book-reader .modal-dialog{
box-shadow:1px 2px 50px rgba(189, 187, 187, 0.5);
}
#book-reader .modal-dialog{
max-width: 700px;
min-height: 380px;
max-height: 400px;
position: relative;
background-color: #fff;
top: 15%;
padding-top: 20px;
}
#book-reader .modal-dialog .left{
float: left;
width: 35%;
padding: 0px 0px 20px 20px;
}
#book-reader .modal-dialog .left img{
width: 100% !important;
height: auto !important;
}
#book-reader .modal-dialog .right{
float: right;
width: 65%;
padding: 20px;
}
#book-reader h1{
font-weight: bold;
font-size: 1.5em;
color: #487ab6;
}
#book-reader h2{
font-weight: bold;
font-size: 1.1em;
margin-bottom: 1em;
}
#book-reader .a-desc{
font-size: 0.9em;
margin-bottom: 1em;
overflow-y: scroll;
height: 80px;
}
#book-reader button.close{
top: -15px;
right: 15px;
}
#book-reader .a-language{
float: left;
font-weight: bold;
color: #E95149;
padding: 15px 0px;
}
#book-reader .a-year{
float: right;
font-weight: bold;
color: #E95149;
padding: 15px 0px;
}
#book-reader .buttons{
overflow: auto;
margin-top: 20px;
bottom: 0px;
position: absolute;
width: 65%;
right: 0px;
padding: 20px;
}
#book-reader .download, #book-reader .view{
width: 40px;
height: 40px;
display: inline-block;
margin-left: 10px;
border: solid 2px #487ab6;
float: right;
padding: 5px;
}
#book-reader .download:hover, #book-reader .view:hover{
background-color: rgba(74, 124, 186, 0.25);
}
#book-reader .view{
line-height: 25px;
}
#book-reader{
background-color: rgba(245, 245, 245, 0.6705882352941176);
}
#book-reader .download img, #book-reader .view img{
}
.modal-header{
border: 0;
}
.modal-body iframe{
position: absolute;
height: 100%;
width: 100%;
}
button.close{
position: absolute;
top: 5px;
font-size: 3em;
right: 22px;
margin: 0px;
}
.fullsize .content{
width: 50%;
float: left;
font-size: 1.2em;
line-height: 1.5em;
}
.fullsize .c-page{
background-color: #fbfbfb;
padding: 30px 30px;
}
.content .sec-intro, .fullsize .sec-intro{
font-size: 1.5em;
margin-bottom: 30px;
line-height: 1.3em;
}
.sec-intro .left, .sec-intro .right{
float: left;
margin-top: 20px;
padding: 0px;
}
.sec-intro .right{
padding-left: 40px;
}
.sec-intro .contact-btn-r b{
font-weight: 700;
color: #353535;
}
.fullsize .content img{
width: 100%;
height: auto;
}
.fullsize .content-wwd{
float: none;
padding: 50px;
z-index: 1000;
background-color: #fff;
text-align: left;
width:70%;
display:
inline-block;
position: relative;
top:-90px;
font-size: 1.1em;
}
.fullsize .content-wwd iframe{
width: 100%;
height: 400px;
}
.fullsize .content.right{
padding: 0px 250px 0px 50px;
}
.content.right{
padding: 0px 0px 0px 100px;
width: 48%;
}
.content-center{
width: 40% !important;
position: absolute;
height: 88%;
overflow-y: scroll;
overflow-x: hidden;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.content.right h3{
/*color: #82b6c4;*/
color: #353535;
margin-bottom: 11px;
font-size: 1.4em;
font-weight: 700;
}
.content.right h5{
font-size: 1em;
}
.content.right .related-post{
border-bottom: solid #ea524b;
margin-top: 17px;
padding-bottom: 15px;
font-size: 0.8em;
line-height: 1.3em;
}
.contact-btn-r{
padding: 20px;
background-color: #ea524b;
color: #EEEBD5;
font-size: 1.3em;
margin-bottom: 40px;
line-height: 1.3em;
border-bottom: solid 4px #4879b6;
-webkit-animation: 0.5s ease-in all;
-moz-animation: 0.5s ease-in all;
animation: 0.5s ease-in all;
}
.boton-wp{
-webkit-animation: 0.5s ease-in all;
-moz-animation: 0.5s ease-in all;
animation: 0.5s ease-in all;
border-bottom: 4px solid #E95149;
background-color:#487ab6;
line-height: 1.3em;
color:#EEEBD5;
padding:15px;
font-weight:700;
font-size:1.3em;
display: inline-block;
}
.boton-wp.red{
line-height: 1.3em;
padding: 1.5em 20px;
border-bottom: 4px solid #4879b6;
background-color:#E95149;
color:#EEEBD5;
}
.boton-wp:hover,.contact-btn-r:hover{
background-color: #82b6c4 !important;
/*color: #353535;*/
}
.fullsize .media-career{
float: right;
width: 40%;
margin-top: 35px;
}
.media-career .row div{
padding: 0px;
}
.careers-img{
width: 100%;
}
.events, .eventsWuf{
margin-top: 30px;
}
.events{
display: none;
width: 70%;
}
.event{
border-bottom: 3px solid #ea514a;
margin-bottom: 30px;
padding: 0px 0px 30px 0px;
overflow: auto;
}
.event > div{
float: left;
}
.event a{
text-decoration: none;
}
#agenda .tabs{
overflow: auto;
border-bottom: 4px solid #4779bb;
}
#agenda .tabs div{
display: inline-block;
float: left;
padding: 10px 20px;
background-color: #E95149;
color: #fff;
font-size: 1.5em;
margin-top: 30px;
cursor: pointer;
font-weight: 600;
letter-spacing: 0.1em;
margin-right: 20px;
}
#agenda .tabs div.active, #agenda .tabs div:hover{
background-color: #487ab6;
}
.fullsize h1{
margin-bottom: 20px;
color: #487ab6;
font-size: 2em;
line-height: 1.2em;
font-weight: 700;
}
.city-page {
}
.city-page h1, .city-context-text h1{
font-size: 2em !important;
font-weight: 500;
margin-bottom: -10px;
position: relative;
font-weight: 600;
letter-spacing: 0.08em;
}
.fullsize h1 a{
text-decoration: inherit;
color: inherit;
}
.fullsize h4{
margin-top: 30px;
}
.event h4{
margin-top: 4px;
}
.agenda-wrapper h4{
margin-top: 0px;
}
#agenda .time{
color: #487ab6;
font-size: 1.8em;
}
#agenda .month{
font-size: 1.6em;
padding: 5px 20px;
color:#fff;
display: inline-block;
margin: 30px 0px;
background-color: #353535;
}
.fullsize a{
/*color: #76AABD;*/
color: #487ab6;
/*color: #353535;*/
}
.fullsize .content-wwd a:hover{
/*color: #487ab6;*/
text-decoration: underline;
}
.related-post a{
color: inherit;
text-decoration: inherit;
font-weight: 600;
}
.related-post a:hover{
text-decoration: underline !important;
}
.medellin-logos{
margin: 50px 0px;
}
.medellin-logos .row{
margin-bottom: 30px;
}
.fullsize .logos:not(.logos-home) div{
text-align: center;
}
.logos-home{
text-align: left;
}
.fullsize .logos:not(.logos-home) img{
width: 80%;
opacity: 0.8;
/*filter: brightness(0) invert(1);*/
filter: brightness(0) invert(0);
}
.fullsize .share{
position: fixed;
right: 90px;
bottom: 0px;
z-index: 5000;
}
.full-ind .share{
position: absolute;
text-align: right;
right: 15%;
bottom: 0px;
height: 35px;
}
.fullsize .share .social-ico{
margin-bottom: 0px;
}
.fullsize .logos img.mini{
width: 15%;
}
.about .media{
width: 100%;
height: calc(100vh - 300px);
overflow: auto;
}
.close{
text-shadow: none;
opacity: 1;
color: #ea514a;
cursor: pointer;
position: static;
margin-right: -15px;
margin-top: -15px;
font-size: 3em;
}
.close:hover{
color:#76AABD;
}
.more:hover, .close-more:hover{
background-color: #ea514a;
}
.news article{
position: absolute;
left: 50%;
top: 50%;
width: 85%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.news .more-posts, .more.more-yt-vid{
background-color: #ea5143;
font-size: 24px;
height: 39px;
font-weight: 500;
line-height: 40px;
text-align: center;
padding: 0px;
width: 39px;
margin-right: 0px;
}
.news .more-posts:hover, .more.more-yt-vid:hover{
background-color:#4680bb;
}
.news hr.blue{
width: 95%;
float: left;
height: 3px;
margin-top: 0px;
background-color: #447ec6;
}
.news .flecha-izq{
right: -1px;
top: 0px;
position: absolute;
display: inline-block;
height: 0;
border-right: 65px solid #457fc0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
}
.pieces div div:hover{
animation: shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
.pieces div div.vertical h1{
line-height:201px;
}
.contact-us{
position: relative;
/*height: 50vh;*/
height: 420px;
background-color: #f5f5f5;
overflow: hidden;
padding: 4% 9%;
}
footer.contact-us-n{
background-color: #f7f7f7;
height: auto;
}
footer.contact-us-n .address{
overflow: hidden;
}
footer.contact-us-n .mit{
float: left;
padding: 0px;
}
footer.contact-us-n .mit .f-a{
color: #353535;
font-size: 1.2em;
letter-spacing: 0.03em;
}
footer.contact-us-n .mit .f-a:hover{
text-decoration: underline !important;
}
footer.contact-us-n .logos{
overflow: hidden;
}
footer.contact-us-n .logos div:not(.implementing-tag){
float: left;
}
footer.contact-us-n .impl{
margin-top: 5.6%;
}
footer.contact-us-n .impl .implementing-tag{
display: block;
float: none;
margin-bottom: 5%;
}
footer.contact-us-n .support-div{
margin-top: 10.5%;
}
footer.contact-us-n .ajuntament-div{
margin-top: 10%;
}
.contact-wrapper{
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
width: 80%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
footer.contact-us-n .contact-wrapper{
position: relative;
top: 0px;
left: 0px;
width: 100%;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
transform: none;
}
footer.contact-us-n h2{
margin-bottom: 20px;
text-align: left;
font-size: 2.5em;
font-weight: 700;
}
.form{
display: inline-block;
width: 30%;
float: left;
height: 100%;
}
.submit-contact-form{
background-color: #353535;
color: #fff;
padding: 10px;
text-align: center;
font-size: 1.2em;
cursor: pointer;
}
.success-msg{
margin-top: 10px;
font-weight: 600;
}
.form input{
width: 50%;
background-color: transparent;
border: 1px solid #353535;
height: 35px;
display: inline-block;
margin:0px;
margin-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
}
.form input:nth-child(1){
background-color: #353535;
color: #eaeaea;
}
.form input:nth-child(2){
float: right;
}
.form textarea{
width: 100%;
height: 165px;
margin-bottom: 10px;
border: 1px solid #212529;
background-color: transparent;
}
.address{
display: inline-block;
width: 60%;
float: right;
text-align: left;
}
#map {
height: 100%;
}
.label-currently{
display: inline-block;
padding: 5px;
background-color: #ea5143 !important;
color: #fff;
position: absolute;
font-size: 0.8em;
left: 0px;
top: 0px;
letter-spacing: 0.1em;
}
.label-previously{
display: inline-block;
padding: 5px;
background-color: #4680bb !important;
color: #fff;
position: absolute;
font-size: 0.8em;
left: 0px;
top: 0px;
letter-spacing: 0.1em;
}
.circle{
background-color: #E95149;
width: 100px;
height: 100px !important;
border-radius: 100%;
padding: 0px !important;
position: absolute;
/*bottom: 23px;*/
bottom: 400px;
left: 12px;
-moz-transition: all 0.6s ease-in;
-webkit-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;*/
}
.vertical-bar{
background-color: #4882b6;
width: 40px;
height: 160px !important;
padding: 0px !important;
position: absolute;
/*bottom: 23px;*/
bottom: 400px;
left: 112px;
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
z-index: 50;
}
.horizontal-bar{
background-color: #4882b6;
width: 160px;
height: 40px !important;
padding: 0px !important;
position: absolute;
/*bottom: 23px;*/
bottom: 25vh;
left: 36px;
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
z-index: 2000;
}
.horizontal-bar.shown{
bottom: 97px;
}
.horizontal-bar.visible{
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
}
.square{
background-color: #E95149;
width: 80px;
height: 80px !important;
padding: 0px !important;
position: absolute;
/*bottom: 23px;*/
bottom: 400px;
left: 112px;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
transition: all 1.2s ease-in;
z-index: 3000;
}
.square.visible{
bottom: 0px;
}
.vertical-bar.visible{
bottom: 0px;
}
.triangle {
width: 0 !important;
height: 0 !important;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid #76AABD;
padding: 0px !important;
position: absolute;
bottom: 0px;
/*left: 60px;*/
left: 400px;
z-index: 100;
-moz-transition: all 0.4s ease-in;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.circle.visible{
bottom: 23px;
}
.circle.mini{
background-color: #76a9bd;
bottom: 0px;
left: -100px;
}
.circle.mini.visible{
left: 41px;
}
.triangle.visible{
left: 60px;
}
.post{
margin-bottom: 60px;
padding-bottom: 40px;
font-size: 0.9em;
background-color: #ffffff;
padding: 20px;
overflow-wrap: break-word;
}
.post-ip{
margin-bottom: 30px;
padding-bottom: 0px;
border-bottom: 3px solid;
}
.post img{
width: 100%;
height: auto;
margin:20px 0px;
border: solid #fff 11px;
}
.post-ip img{
width: 100%;
height: auto;
margin:20px 0px;
border: solid #fff 11px;
}
.post-ip .logos img{
border:none;
}
.menu-mobile{
display: none;
width: 100%;
height: 100vh;
position: absolute;
z-index: 5000;
background-color: #fff;
left: 0px;
top: 50px;
font-size: 1.7em;
}
.ind-page .menu-mobile{
top: 0px;
}
.ind-page .menu-toggle{
position: absolute;
z-index: 4000;
right: 20px;
top: -40px;
}
.menu-mobile div{
height: 10%;
padding: 4% 5%;
border-bottom: 3px solid #353535;
}
.menu-mobile div:hover{
background-color: #353535;
color: white;
}
.menu-mobile div a{
color: inherit;
}
#comment{
width: 100%;
height: 200px;
border: none;
background-color: #fbfbfb;
}
#commentform p{
overflow: hidden;
}
#commentform input{
border: none;
height: 40px;
width: 80%;
float: left;
background-color: #fbfbfb;
}
.comment-form-comment label{
margin-bottom: 0px !important;
}
#commentform label{
display: inline-block;
margin-bottom: .5rem;
background-color: #353535;
color: #fff;
width: 20%;
float: left;
line-height: 40px;
padding: 0px 20px;
-webkit-font-smoothing: antialiased;
letter-spacing: 0.1em;
}
#commentform label[for=wp-comment-cookies-consent]{
width: 95%;
background-color: transparent;
color: #333333;
line-height: 1.3em;
font-size: 0.8em;
padding-left: 0px;
}
#wp-comment-cookies-consent{
width: 5%;
height: auto;
}
#reply-title{
margin-top: 70px;
font-size: 1.4em;
color: #4779bb;
}
.post-fft{
border:none;
}
.logged-in-as{
font-size: 0.9em;
margin-bottom: 30px;
}
.comment-form-comment {
margin-bottom: 20px !important;
}
.comment-form-comment label{
font-size: 1em;
letter-spacing: 0.1em;
background-color: #353535;
color: #fff;
padding: 5px 10px;
margin: 0px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.form-submit{
float: right;
/*margin-top: -61px;*/
cursor: pointer;
}
.addeventatc{
visibility: visible !important;
z-index: auto !important;
display: inline-block !important;
border: 2px solid rgb(71, 121, 187) !important;
color: rgb(71, 121, 187) !important;
font-size: 20px !important;
height: 38px !important;
cursor: pointer !important;
line-height: 31px !important;
float: right !important;
text-align: center !important;
width: 38px !important;
padding: 3px 0px !important;
}
.addeventatc:hover, .addeventatc:active{
color: #f1efdc !important;
}
.event .description div{
width: 70%;
display: inline-block;
}
.addeventatc_dropdown{
top: 28px !important;
left: -253px !important;
margin-top: -48px !important;
border: 2px solid #353535;
font-size: 0.5em;
color: #353535;
text-align: left;
padding:0px !important;
width:251px !important;
}
.addeventatc_dropdown span{
padding: 10px !important;
display: inline-block !important;
}
.form-submit #submit{
width: 100%;
line-height: 11px;
line-height: 11px;
background-color: #487abb
}
.nav-previous{
float: left;
}
.nav-next{
float: right;
}
.navigation.post-navigation{
margin-top: 100px;
}
.navigation.post-navigation h2{
display: none;
}
.nav-links{
overflow: auto;
}
.nav-links .post-title{
display: none;
}
.nav-links a{
color: #4779bb;
font-weight: 500;
text-decoration: none;
}
.nav-links .meta-nav{
display: none;
}
#submit{
background-color: #82b6c6;
border: none;
border-radius: 0px;
padding: 15px 20px;
color: #fff;
position: relative;
right: 0px;
letter-spacing: 0.1em;
}
.meta-bx{
height: 40px;
width: 100%;
}
.sharedpostcard{
padding: 20px 0px 20px 0px;
background-color: #82b6c4;
display: inline-block;
width: 523px;
padding: 20.5px 50.5px;
}
.itn-art img{
width: 100%;
height: auto;
}
/* THE GAME */
.welcome-screen, .solutions-screen, .congratulations-screen{
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
}
.congratulations-screen .incaseof{
top: 0px;
line-height: 0.5;
margin-top: 15px;
}
.congratulations-screen .incaseofs{
background-color: #ea5049;
padding: 10px 20px;
margin: 0px 25%;
display: block;
color: #eeebd6;
font-size: 1.2em;
font-weight: 700;
position: relative;
top: 1.1em;
z-index: 600;
}
.welcome-screen, .congratulations-screen{
background-color: #82b6c4;
color: #EEEBD5;
}
.game-city{
position: absolute;
bottom: -5px;
width: 100%;
}
.c-content{
position: absolute;
width: 40rem;
left: 50%;
top: 46%;
transform: translate(-50%,-50%);
z-index: 5000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.welcome-screen .c-content{
}
.player, .coming-soon .subscription .s-mail, .join-us .subscription .s-mail{
overflow: hidden;
margin-top: 30px;
}
.player input, .coming-soon .subscription input, .join-us .subscription input{
width: 90%;
height: 50px;
float: left;
font-size: 1.3em;
border: none;
box-shadow: none;
border-bottom: 4px solid #ea5049;
padding: 0px 20px;
}
.coming-soon .subscription input, .join-us .subscription input{
font-size: 0.9em;
}
.coming-soon .subscription input, .coming-soon .subscription .next, .join-us .subscription .input, .join-us.subscription .next{
margin-top: 10px;
}
.player .next, .coming-soon .subscription .next, .join-us .subscription .next{
float: right;
background-color: #4879b6;
width: 10%;
height: 50px;
cursor: pointer;
}
.coming-soon .subscription .next, .join-us .subscription .next{
text-align: center;
color: #fff;
}
.next span{
font-size: 20px;
line-height: 50px;
}
.c-content .t-level-txt{
margin-bottom: 50px;
}
.f-level-txt{
color: #353535;
font-size: 3.5em;
font-weight: bolder;
line-height: 0.8em;
}
.s-level-txt{
font-size: 2em;
font-weight: 800;
margin-bottom: 0px;
}
.t-level-txt{
font-size: 1.5em;
}
.game-button{
position: absolute;
z-index: 5000;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
font-size: 2em;
font-weight: 800;
color: #fff;
border-bottom: 4px solid;
line-height: 1.2em;
}
.game-button.play{
}
.incaseof{
font-size: 1.7em;
color: #353535;
font-weight: 600;
position: relative;
top: 20px;
}
.incaseofs{
background-color: #ea5049;
padding: 10px 20px;
display: inline-block;
color: #eeebd6;
font-size: 2em;
font-weight: 700;
position: relative;
top: 1.1em;
z-index: 600;
}
.wheelscreen .s-level-txt, .solutions-screen .s-level-txt, .congratulations-screen .s-level-txt{
color:#353535;
margin-bottom: 30px;
line-height: 1.15em;
}
.solutions-screen{
background-color: #EEEBD5;
}
.wheelscreen, .solutions-screen, .congratulations-screen{
display: none;
overflow: hidden;
}
.congratulations-screen .t-level-txt{
margin: 0px 0px 30px 0px;
font-weight: 700;
color: #353535;
font-size: 1.2em;
line-height: 1.4em;
}
.congratulations-screen .s-level-txt{
color: #353535;
margin-bottom: 10px;
}
.player-name{
color: #487ab6;
}
.game-button.play, .game-button.stop, .game-button.take-action{
cursor: pointer;
}
.game-button.stop, .game-button.take-action{
display: none;
}
.game-wheel{
position: relative;
/*top: -120vh;*/
}
.center-card{
/*position: relative;
top: 50%;
left: 50%;
width: 60%;
transform: translate(-50%,-50%);*/
margin-top: 45%;
position: relative;
z-index: 500;
padding: 0px 10px;
}
.chosen-solution{
line-height: 1em;
margin-top: 0px;
font-size: 1.6em;
font-weight: 800;
color: #353535;
padding: 0px 10px;
}
.solutions{
width: 100%;
position: relative;
height: 350px;
background-color: #fff;
padding: 0px 40px;
overflow: scroll;
}
.solutions .block{
position: sticky;
z-index: 500;
height: 40px;
left: 0px;
width: 100%;
background-color: #fff;
}
.solutions .block:nth-child(1){
top: 0px;
}
.solutions .block:nth-child(2){
bottom: 0px;
}
.misc{
height: 3px;
width: 40px;
margin: 0px 10px;
vertical-align: middle;
display: inline-block;
line-height: 0px;
background-color: #353535;
}
.solutions .solution{
position: relative;
z-index: 400;
font-size: 1.5em;
color: #353535;
font-weight: 500;
padding:15px 0px;
cursor: pointer;
border-bottom: 3px solid #4879b6;
}
.congratulations-screen .game-city{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 300;
height: 350px;
}
.congratulations-screen .solutions{
overflow: hidden;
width: 400px;
height: 400px;
margin-top: -14px;
display: inline-block;
}
.congratulations-screen .s-level-txt{
font-weight: 700;
font-size: 1.3em;
margin-bottom: 6px;
}
#ciudadpostal, #ciudadwheel, #ciudadwelcome{
position: absolute;
bottom: 0px;
left: 0px;
}
.solutions-screen .c-content{
width: 50rem;
-webkit-animation-name: wheelbounce;
-webkit-animation-duration: 0.5s;
animation-name: wheelbounce;
animation-duration: 0.5s;
}
.congratulations-screen .c-content{
width: 80rem;
}
.game-wheel.animated{
-webkit-animation-name: wheelbounce;
-webkit-animation-duration: 0.5s;
animation-name: wheelbounce;
animation-duration: 0.5s;
}
#cardtoshare a{
text-decoration: none !important;
}
.share.play-again{
cursor: pointer;
display: inline-block;
background-color: #E95149;
color: #fff;
padding: 10px;
margin-right: 30px;
font-size: 1em !important;
}
#shareBtn.share.s-level-txt{
cursor: pointer;
display: inline-block;
background-color: #487ab6;
color: #fff;
padding: 10px;
font-size: 1em !important;
}
.game .share{
cursor: pointer;
display: inline-block;
background-color: #487ab6;
color: #fff !important;
padding: 10px;
font-size: 1em !important;
}
.postcardimg{
position: relative;
left: 0px;
z-index: 300;
}
.scroll-down{
background-color: #fff;
color: #E95149;
cursor: pointer;
padding-bottom: 20px;
}
/* FACTS & FIGURES */
.facts{
overflow: auto;
}
.fact{
overflow: hidden;
position: relative;
font-size: 1.2em;
line-height: 1.2em;
text-align: left;
float: left;
margin-bottom: 30px;
height: 300px;
cursor: pointer;
}
#card-out{
width: 1000px;
height: 1000px;
font-size: 2em;
position: absolute;
top: 0px;
z-index: 0;
/*opacity: 0;*/
}
#card-out .card-ff{
height: 100%;
/*top: -294px;*/
}
.fact .card-ff{
height: 300px;
}
.card-ff.blue{
background-color: #487ab6;
color:#EEEBD5;
border-bottom: 7px solid #82b6c4;
}
.card-ff.light-blue{
background-color: #82b6c4;
color:#EEEBD5;
border-bottom: 7px solid #E95149;
}
.card-ff{
position: relative;
}
.card-ff.red{
background-color: #E95149;
color:#EEEBD5;
border-bottom: 7px solid #487ab6;
}
.card-ff.beige{
background-color: #EEEBD5;
border-bottom: 7px solid #E95149;
}
.beige{
background-color: #EEEBD5;
color: #333333;
}
.card-ff .txt{
position: absolute;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%,-50%);
}
.card-ff span{
font-weight: bold;
font-size: 1.3em;
}
.card-ff i{
font-size: 0.8em;
}
.card-ff a{
font-weight: bold;
color: inherit;
text-decoration: underline;
}
.fact .card-hover{
height: 300px;
background-color: rgba(255,255,255,0.5);
position: relative;
top: 0px;
transition: all 0.2s linear;
}
.card-hover .tw{
display: none;
}
.fact .card-hover.visible{
top: -300px;
}
.facts .card-hover .social-ico{
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.fft-date{
margin-bottom: 20px;
font-size: 1.2em;
font-weight: 500;
float: left;
}
.autor-pic{
position: relative;
margin-top: 30px;
overflow: hidden;
}
.autor-pic .round-pic{
height: 70px;
width: 70px;
border-radius: 100%;
border: 4px solid #fff;
overflow: hidden;
position: relative;
float: left;
}
.fft-autor{
float: left;
margin: 8px 15px 0px 15px;
border-bottom: 3px solid #353535;
padding-bottom: 10px;
width: calc(100% - 100px);
}
.autor-pic hr{
height: 2px;
background-color: #353535;
margin: 30px 0px;
}
.fft-date hr{
display: inline-block;
width: 40px;
height: 2px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
background-color: #353535;
}
.round-pic img{
width: 100%;
height: auto;
position: absolute;
top: 50%;
margin:0px;
border:none;
transform: translateY(-50%);
filter:grayscale(100%);
}
.tools{
background-image: url("../img/bg-tfa.jpg");
padding: 30px;
background-size: cover;
}
.tool{
margin-bottom: 20px;
background-color: transparent;
}
.tools .extend{
display: none;
}
.tools h2{
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 10px;
font-size: 1.5em;
cursor: pointer;
margin-bottom: 0px;
}
.tools h3{
color: white;
margin-bottom: 20px;
}
.tool .corner{
border-width: 16px 16px 0px 0px;
border-style: solid;
border-color: transparent #353535;
position: relative;
float: right;
top: -16px;
display: inline-block;
}
.tools .summary{
padding: 20px;
/*border-top: 3px solid #353535;*/
cursor: pointer;
background-color: rgba(255,255,255,0.9);
}
.tools .more, .city-page .more{
position: initial;
top: initial;
left: initial;
background-color: #353535;
}
.tools .more:hover{
background-color: #fff;
color: #353535;
}
.tool.col-md-6{
margin-bottom: 0px;
display: inline-block;
float: left;
padding: 0px;
}
#tool-2{
padding-right: 50px;
}
#tool-1 h2{
background-color: #82b6c4;
}
#tool-2 h2{
background-color: #E95149;
}
#tool-3 h2{
background-color: #487ab6;
}
.result{
padding: 20px;
border-left: 4px solid;
background-color: #efefed !important;
color: #333333 !important;
margin: 20px 0px;
}
.result.lblue{
border-color: #82b6c4;
}
.result.blue{
border-color: #487ab6;
}
.result.red{
border-color: #E95149;
}
.result.beige{
border-color: #EEEBD5;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes buzzing {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.navbar, .nav{
padding: 0px !important;
}
/* HIGHLIGHTS */
.highligths{
width: 100vw;
}
.highlights section{
width: 100vw;
height: 100vh;
position: relative;
}
.highlights .h-image{
display: inline-block;
position: absolute;
}
.highlights .sec-7 .h-image{
width: 30%;
top: 50%;
left: 50%;
transition: all 1s ease-in;
position: absolute;
transform: translate(-50%,-50%);
}
.highlights .sec-7 .h-image.animated{
height: 60vh;
width: auto;
}
.highlights .sec-1 .h-image{
width: 52%;
bottom: 9vh;
left: -100%;
z-index: 50;
transition: all 0.5s ease-in;
}
.highlights .sec-1 .h-image.animated{
left: 0px;
}
.highlights .sec-2 .h-image{
width: 44%;
right: -100%;
top: 25vh;
transition: all 1s ease-in;
}
.highlights .sec-2 .h-image.animated{
right: 0px;
}
.highlights .h-image img{
width: 100%;
}
.highlights .sec-7 .h-image img{
height: 100%;
width: auto;
}
.highlights .year{
position: absolute;
display: inline-block;
font-size: 13em;
font-weight: 800;
z-index: 100;
}
.highlights .year.white.animated{
bottom: 14vh;
}
.highlights .year.white{
transform: rotate(-90deg);
color: #fff;
bottom: -100%;
left: -8vw;
transition: all 0.7s ease-in;
}
.highlights .year.blue{
transform: rotate(90deg);
color: #487ab6;
right: -103px;
top: -100%;
background-color: transparent;
z-index: 30;
transition: all 0.7s ease-in;
}
.highlights .year.blue.animated{
top: 14vh;
}
.highlight{
display: inline-block;
position: absolute;
}
.sec-1 .highlight{
right: 8vw;
top: -100%;
z-index: 40;
padding: 2.5% 2.5% 2.5% 8%;
width: 45vw;
transition: all 0.5s ease-in;
}
.sec-1 .highlight.animated{
top: 13vh;
}
.sec-2 .btn{
margin-top: 10px;
}
.highlights .btn{
font-size: 1.5em;
font-weight: 700;
color:#fff;
border-radius: 0px;
}
.highlights .btn.red{
background-color: #e95243;
}
.sec-2 .highlight{
z-index: 100;
color: #fff;
width: 50%;
top: 27vh;
left: -100%;
transition: all 0.5s ease-in;
}
.sec-2 .highlight.animated{
left: 5vw;
}
.highlights .sec-3 .h-image{
width: 60%;
top: 10vh;
position: absolute;
left: -100%;
transition: all 1.5s ease-in;
}
.highlights .sec-3 .h-image.animated{
left: 0px;
}
.highlights .sec-5 .h-image{
left: -100%;
position: absolute;
width: 70%;
top: 50%;
transform: translateY(-50%);
transition: all 0.8s ease-in;
}
.highlights .sec-4 .h-image{
right: -100%;
top: 50%;
transform: translateY(-50%);
width: 80%;
transition: all 0.8s ease-in;
}
.highlights .sec-4 .h-image.animated{
right: 0px;
}
.highlights .sec-5 .h-image.animated{
left: 0px;
right: auto;
}
.highlights .sec-8 .h-image{
left: -100%;
width: 65%;
top: 50%;
transform: translateY(-50%);
transition: all 0.5s ease-in;
}
.highlights .sec-8 .h-image.animated{
left: 0px;
}
.highlights .sec-5 .h-image{
width: 60%;
transform: translateY(-50%);
}
.highlights .sec-6 .h-image{
width: 60%;
right: -100%;
top: 50%;
transform: translateY(-50%);
transition: all 0.7s ease-in;
}
.highlights .sec-6 .h-image.animated{
right: 0px;
}
.highlight.red, .red{
background-color: #E95149;
color: #fff;
}
.highlight.blue, .blue{
background-color: #487ab6;
color: #fff;
}
.sec-3 .highlight.blue{
width: 60%;
padding: 8% 2% 2% 2%;
right: -100%;
top: 35vh;
transition: all 1.2 ease-in;
}
.sec-3 .highlight.blue.animated{
right: 10vw;
}
.highlights .extra-txt{
display: inline;
position: absolute;
font-size: 1em;
font-weight: 800;
color: #353535;
}
.highlights .sec-7 .extra-txt{
display: inline;
position: absolute;
font-size: 1.2em;
font-weight: 800;
bottom: 7vh;
left: 10vw;
}
.item-marker{
display: inline-block;
margin-right: 10px;
height: 15px;
width: 15px;
}
.item-marker.red{
background-color: #E95149;
}
.sec-3 .extra-txt{
right: 10vw;
top: 75vh;
}
.sec-3 .highlight.red{
padding: 2%;
right: -100%;
top: 30vh;
width: 60vw;
z-index: 1;
right: 10vw;
transition: all 0.5s ease-in;
}
.sec-3 .highlight.red.animated{
right: 22vw;
}
.sec-4 .highlight-wrapper, .sec-6 .highlight-wrapper{
top: 50%;
transform: translateY(-50%);
left: -100%;
position: relative;
width: 42%;
transition: all 0.9s ease-in;
}
.sec-6 .highlight-wrapper{
width: 45%;
}
.sec-4 .highlight-wrapper.animated, .sec-6 .highlight-wrapper.animated{
left: 10vw;
}
.sec-8 .highlight-wrapper.animated{
right: 6vw;
}
.sec-8 .highlight-wrapper{
right: -100%;
position: absolute;
left: initial;
display: inline-block;
top: 5vw;
width: 42vw;
transition: all 0.7s ease-in;
}
.sec-9{
background-image:url('../highlights/fotos/H09.png');
background-size: contain;
}
.sec-12{
background-image:url('../highlights/fotos/H13.png');
background-size: cover;
}
.sec-12 .highlight-wrapper{
width: 60vw;
background-color: #E95149;
color: #fff;
padding: 2%;
position: absolute;
top: 50%;
left: -100%;
transform: translate(-50%,-50%);
transition: all 0.7s ease-in;
}
.sec-12 .highlight-wrapper.animated{
left: 50%;
}
.sec-7 .highlight{
background-color: #fff;
width: 100%;
}
.sec-7 .highlight-wrapper{
width: 60%;
position: absolute;
left: -100%;
transition: all 0.7s ease-in;
top: 15vh;
padding: 20px;
background-color: #fff;
}
.sec-7 .highlight-wrapper.animated{
left: 10vw;
}
.sec-5 .highlight-wrapper{
top:30vh;
right:-100%;
transition: all 0.7s ease-in;
position: absolute;
width: 43%;
display: inline-block;
}
.sec-5 .highlight-wrapper.animated{
right: 10vw;
}
.sec-9 .highlight-wrapper{
width: 60%;
position: absolute;
top: 15vh;
left: -100%;
transition: all 0.7s ease-in;
}
.sec-9 .highlight-wrapper.animated{
left: 50%;
transform: translateX(-50%);
}
.sec-9 .highlight-wrapper .top{
font-size: 2.5em;
font-weight: 800;
line-height: 1.2em;
margin-bottom: 10px;
}
.sec-9 .highlight-wrapper .top span{
color: #487ab6;
font-size: 2em;
margin-right: 10px;
}
.sec-9 .buttons{
margin-top: 15px;
}
.sec-9 .buttons .btn{
margin-right: 10px;
}
.sec-9 .highlight-wrapper .bottom{
font-size: 1.5em;
font-weight: 600;
}
.sec-10 .h-image{
width: 80%;
position: absolute;
right: -100%;
top: 50%;
transform: translateY(-50%);
transition: all 0.7s ease-in;
}
.sec-10 .h-image.animated{
right: 0px;
}
.sec-10 .highlight-wrapper{
width: 57vw;
position: absolute;
left: -100%;
bottom: 10vh;
transition: all 0.7s ease-in;
}
.sec-10 .highlight-wrapper.animated{
left: 13vw;
}
.sec-7 .highlight{
}
.highlights .sec-5 .btn.red{
float: right;
}
.highlights .btn.blue{
background-color: #487ab6;
position: absolute;
right: 7%;
bottom: -24%;
}
.sec-12 .btn img{
width: 30px;
margin:0px 5px;
}
.sec-13{
background-color: #487ab6;
}
.sec-14{
background-color: #E95149;
}
.sec-13 .highlight-wrapper,.sec-14 .highlight-wrapper{
width: 50vw;
position: absolute;
top: 50%;
left: -100%;
transform: translate(-50%,-50%);
color: #fff;
transition: all 0.7s ease-in;
}
.sec-13 .highlight-wrapper.animated, .sec-14 .highlight-wrapper.animated{
left: 50%;
}
.sec-14 .highlight-wrapper{
width: auto;
}
.sec-13 .uh-logo, .sec-14 .uh-logo, .sec-14 .crpp-logo, .sec-13 .crpp-logo{
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
}
.highlights a{
color: inherit !important;
text-decoration: none;
}
.highlights a:hover{
text-decoration: none;
}
.sec-14 .highlight-wrapper h1{
margin: 0px;
position: relative;
z-index: 200;
border-bottom: 7px solid;
padding-bottom: 13px;
}
.sec-14 .highlight-wrapper span{
font-size: 1.5em;
font-weight: 800;
}
.sec-13 .wtso, .sec-14 .wtso{
position: absolute;
right: 12%;
color: #fff;
letter-spacing: 0.15em;
bottom: 9%;
}
.sec-13 .highlight-wrapper span{
font-weight: 800;
z-index: 100;
color: #E95149;
}
.sec-13 .uh-logo, .sec-14 .uh-logo{
left: 0px;
}
.sec-13 .ec-logo, .sec-14 .ec-logo{
width: 120px;
position: absolute;
margin:3%;
bottom: 0px;
right: 0px;
}
.highlight-wrapper div{
position: relative;
}
.highlight-wrapper h1{
margin:0px;
}
.sec-4 .btn, .sec-5 .btn, .sec-4 .btn, .sec-5 .btn {
margin-top: 10px;
}
.sec-4 .highlight.blue, .sec-5 .highlight.blue, .sec-6 .highlight.blue, .sec-8 .highlight.blue, .sec-10 .highlight.blue{
padding:3%;
width: 100%;
}
.sec-10 .highlight.blue{
padding-top: 13%;
position: relative;
top: -80px;
}
.sec-8 .highlight.blue{
margin-left: 31%;
width: auto;
}
.sec-6 .highlight.blue{
width: 30vw;
}
.sec-4 .highlight.red, .sec-5 .highlight.red, .sec-6 .highlight.red, .sec-8 .highlight.red, .sec-10 .highlight.red{
padding: 3%;
width: 100%;
}
.highlights .sec-10 .extra-txt{
position: relative;
display: inline-block;
right: 0px;
}
.sec-10 .highlight.red{
width: auto;
position: relative;
z-index: 100;
left: -8vw;
}
.sec-10 .extra-txt-group{
position: absolute;
top: -70px;
left:33%;
width: 50%;
}
.sec-11 .highlight-wrapper{
display: inline-block;
background-color: #4779bb;
position: absolute;
color: #fff;
width: 55vw;
padding: 2%;
left: -100%;
top: 50vh;
transition: all 0.7s ease-in;
}
.sec-11 .highlight-wrapper.animated{
left: 10vh;
}
.sec-11 .h-image.top{
width: 40vw;
position: absolute;
right: -100%;
top: 20vh;
z-index: 100;
}
.sec-11 .h-image.top.animated{
right: 15vh;
transition: all 0.5s ease-in;
}
.sec-11 .highlight .description{
width: 66%;
margin-bottom: 20px;
}
.sec-11 .btn{
margin-right: 20px;
}
.sec-11 .h-image.bottom{
width: 30vw;
position: absolute;
right: -100%;
bottom: 25vh;
z-index: 200;
transition: all 0.8s ease-in;
}
.sec-11 .h-image.bottom.animated{
right: 25vh;
}
.sec-2 .blue-top{
height: 60vh;
background-color: #487ab6;
position: absolute;
width: 100%;
top: 0px;
}
.highlight h1{
font-size: 2em;
font-weight: 800;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.highlight .description{
font-size: 1.5em;
letter-spacing: 0.05em;
}
.highlights .uh-logo{
width: 180px;
opacity: 0.8;
position: absolute;
margin: 3%;
right: -100%;
bottom: 0px;
filter: brightness(0) invert(0);
transition: all 0.9s ease-in;
}
.highlights .uh-logo.animated{
right: 0px;
}
.highlights .crpp-logo{
position: absolute;
margin: 3%;
width: 90px;
left: -100%;
z-index: 5000;
transition: all 0.9s ease-in;
}
.highlights .sec-1 .crpp-logo{
-webkit-mix-blend-mode: overlay;
mix-blend-mode: overlay;
}
.highlights .crpp-logo.animated{
left: 0px;
}
.back-to-map{
position: absolute;
transform: translateY(-50%) rotate(-90deg);
top: 50%;
left: -40px;
font-weight: 600;
font-size: 1.3em;
letter-spacing: 0.1em;
z-index: 4000;
}
.back-to-map a, .go-to-tool a{
color: #fff;
}
.back-to-map a:hover, .go-to-tool a:hover{
color: #3b3b3b;
}
.go-to-tool{
position: absolute;
transform: translateX(-50%);
top: 40px;
left: 50%;
font-weight: 600;
font-size: 1.3em;
letter-spacing: 0.1em;
z-index: 4000;
}
.city-profile-items{
position: relative;
overflow: auto;
width: 100%;
height: auto;
background: transparent;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
.team_profile{
padding: 50px 0px 0px 0px;
border: none;
background-color: transparent;
width: 22%;
float: left;
margin: 1.5%;
}
h2.res-team{
font-size: 1.8rem;
border-bottom: 3px solid;
margin-top: 30px;
padding: 0px 0px 4px 0px;
}
.team_profile .round{
height: 110px;
width: 110px;
border-radius: 50%;
background-color: #ffffff;
overflow: hidden;
position: relative;
display: inline-block;
top: -50px;
border: 4px solid #ffffff;
}
.team-wrapper{
width:100% !important;
padding: 0px 1%;
overflow: auto;
}
.team_profile img{
width: 100%;
height: auto;
/*filter: grayscale();*/
}
.res-team-group{
overflow: hidden;
}
.profile-cat{
display: inline-block;
background-color: #e95243;
color: #fff;
padding: 0px 5px;
position: absolute;
top: 92px;
text-align: center;
width: 90px;
left: -17%;
font-size: 0.8em;
left: -14%;
height: 24px;
line-height: 2em;
transform: rotate(-90deg);
}
.team_header{
background-color: #82b6c4;
text-align: center;
border-bottom:4px solid #4779bb;
height: 110px;
width: 100%;
}
.team_profile .profile_desc{
padding: 20px;
height: 240px;
background-color: #ffffff;
}
.profile_desc .desc{
font-size: 0.8em;
line-height: 1.3em;
height: 128px;
overflow: scroll;
}
.team_profession, .team_mail{
font-size: 1.1em;
}
.team_mail b{
border-bottom: 2px solid;
word-wrap: break-word;
font-size: 0.8em;
font-weight: 500;
}
.team_mail a{
color: inherit;
}
.team_profession{
margin-bottom: 2px;
line-height: 1.1em;
font-size: 0.9em;
}
.team_mail{
margin-bottom: 13px;
}
.team_header h2{
color: #ffffff;
font-size: 1.1em;
letter-spacing: 0.04em;
position: relative;
top: -45px;
}
#popup-brd button.close{
top: -0.5em;
font-size: 5em;
right: -0.2em;
}
.cp-item{
height: auto !important;
position: relative;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
.logo-uh{
width: 100%;
}
.title h1, .partners h1,.puzzle h1, .contact-us h1, footer h1{
font-size: 3rem;
font-weight: 700;
line-height: 25vh;
}
.puzzle h1{
line-height: 1.2em;
}
.news h1{
line-height: 7rem;
margin-bottom: 0px;
font-weight: 700;
}
.puzzle h1{
line-height: 1em;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.the-library .publication .info h1, .itn-art .info h1, .fullsize .publication .info h1{
font-size: 1.5em;
color:#353535;
margin-bottom: 10px;
}
.content .sec-intro h2, .fullsize .sec-intro h2, .fullsize .sec-intro a, .fullsize .content h1, .fullsize h1{
font-weight: 700;
color: #ea524b;
}
.itn-art .info h1{
color: #487ab6;
font-size: 1.2em;
margin-bottom: 0.2em;
}
.content .post h1{
color: #4778b6 !important;
font-weight: 700;
font-size: 1.8em;
}
.footer-unh-logo img{
width: 60%;
}
@media (max-width: 500px){
.col-md-3.publication{
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.categories{
display: none;
}
}
@media (min-width: 501px) and (max-width: 800px){
.col-md-3.publication{
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 800px){
.nl-form-wrapper{
padding: 20px;
}
.nl-button-wp{
top: 14%;
}
#popup-contact h1 {
font-size: 1.3em;
}
#mc_embed_signup h2{
font-size: 1.1em;
}
#popup-contact .modal-dialog{
max-width: 95%;
top: 48%;
}
.profile-cat{
left: -12%;
}
.footer-unh-logo{
text-align: center;
margin: 20px 0px;
}
.footer-unh-logo img{
width: 40%;
}
.sec-intro .right{
padding-left: 0px;
}
.sec-intro .right > div{
padding: 0px;
}
.events{
width: 100%;
}
#book-reader .modal-dialog .left{
display: none;
}
#book-reader .modal-dialog .right{
width:100%;
}
#book-reader .modal-dialog{
height: 400px;
}
.logos-home{
text-align: center;
}
.logos-home div{
text-align: center;
margin-bottom: 2em;
}
.logo-uh{
width: 40%;
}
#where-we-are-working{
display: none;
}
#popup-brd button.close{
top:-0.5em;
right: -0.2em;
font-size: 3em;
}
#popup-brd .modal-dialog{
max-width: 80%;
height: auto;
position: relative;
margin:0px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) !important;
}
.city-profile-items div{
display: block;
float: none;
height: auto;
}
.team_profile{
width: 100%;
}
h2{
font-size: 1.5em;
}
.fullsize .content-wwd iframe{
width: 100%;
height: 200px;
}
.back-to-map, .city-profile .lang{
position: relative;
transform: none;
top: initial;
left: initial;
}
.city-profile .bg{
height: 100%;
width: auto;
left: 50%;
transform: translateX(-50%);
}
.city-footer hr{
display: none;
}
.city-footer .city-profile{
float: none;
font-size: 1.5em;
text-align: center;
width: 100%;
}
.city-footer{
position: relative !important;
width: 100%;
margin-top: 20px;
bottom: initial;
}
.city-footer .city-profile{
text-align: left;
margin-left: 0px;
}
.player .next, .coming-soon .subscription .next, .join-us .subscription .next{
width: 25%;
}
#tool-2{
padding-right: 0px;
}
.int-art .info{
width: 100%;
}
#agenda .tabs div{
font-size:0.7em;
margin-right: 0px;
}
#agenda .month{
font-size: 0.7em;
margin: 0px 0px 20px 0px;
}
.itn{
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.fullsize.full-ind {
padding: 25px 25px 100px 25px;
}
.fullsize.full-ind ul{
padding-left: 20px !important;
}
.fullsize.full-ind li::before {
color: #487ab6; /* or whatever color you prefer */
}
.fullsize.full-ind.tools-for-action-page{
padding: 0px;
}
.content.tools{
padding: 30px 7% !important;
}
.fullsize .media-career{
display: none;
}
.fullsize .logos div {
text-align: center !important;
margin-bottom: 20px;
}
.player input, .coming-soon .subscription input, .join-us .subscription input{
width: 75%;
border-radius: 0px !important;
}
body.hidden, html.mob{
overflow-y:hidden !important;
}
.coming-soon .wrapper, .join-us .wrapper{
width: 90%;
}
.a-y-partner{
bottom: 10vh;
}
.join-us .a-y-partner{
bottom: 0vh;
}
.coming-soon p, .join-us p{
font-size: 1em;
margin-bottom: 15px;
margin-top: 20px;
}
.coming-soon .btn-left, .coming-soon .btn-right, .join-us .btn-left, .join-us .btn-right{
margin: 20px;
padding: 5px 10px;
font-size: 1em;
float: left;
}
.join-us .btn-left{
margin: 10px 0px;
display: block;
padding: 15px;
}
.coming-soon .nl, .join-us .nl{
float: left;
}
.partner-password{
width: 80%;
}
.coming-soon header, .join-us header{
font-size: 4em;
line-height: 1em;
}
.join-us header{
border-bottom: 0.2em solid;
margin-bottom: 0px;
padding-bottom: 10px;
font-size: 3em;
letter-spacing: 0.1em;
}
.coming-soon header hr, .join-us header hr{
width: 26%;
height: 5px;
float: right;
}
.congratulations-screen .incaseofs{
margin: 0px 70px;
}
.f-level-txt{
font-size: 2.5em;
}
.s-level-txt {
font-size: 1.7em;
line-height: 1em;
font-weight: 600;
}
.welcome-screen .s-level-txt{
margin-bottom: 10px;
margin-top: 50px;
}
.c-content .t-level-txt {
font-size: 1.2em;
padding: 0px 1em;
}
.congratulations-screen .t-level-txt{
font-size: 0.9em;
margin: 5px 0px;
}
.player{
width: 80%;
display: inline-block;
}
.player input{
width: 80%;
border-radius: 0px;
}
.player .next{
width: 20%;
}
.home.ind-page .logo{
height: auto;
margin:50px 0px 0px 0px;
padding-bottom: 20px;
position: relative !important;
}
.content-center{
height: 69%;
width: 100% !important;
/*margin-top: 40px;*/
}
.home.ind-page{
overflow: visible;
}
.home.ind-page .logo img{
height: auto;;
margin-bottom: 0px;
width: 30%;
}
.solutions{
height: 270px;
padding: 0px 20px;
}
.the-library .publication{
margin-bottom: 40px;
}
.congratulations-screen .solutions{
width: 300px;
margin-top: -6px;
height: 300px;
}
.solutions .solution{
font-size: 0.9em;
}
.c-content .t-level-txt{
margin-bottom: 10px;
}
.welcome-screen .c-content{
}
.center-card{
margin-top: 45%;
padding: 0px 10px;
}
.postcardimg{
bottom:0px;
}
.sharedpostcard {
padding: 10px 0px 30px 0px;
width: 100%;
}
.incaseofs{
font-size: 1.5em;
line-height: 1em;
margin:0px 30px;
}
.game-button{
font-size: 1em;
border-bottom: 2px solid;
}
.game-city{
width: 100%;
height: auto;
}
.congratulations-screen .game-city{
height: auto;
bottom: auto;;
}
.welcome-screen .c-content{
width: 80%;
top: 45%;
}
#ciudadwheel{
height: unset;
}
.solutions-screen .c-content, .congratulations-screen .c-content{
width: 20rem;
}
.congratulations-screen{
overflow-y: scroll !important;
}
.copyright{
display: none;
}
.partners-group{
position: relative;
bottom: auto;
padding: 0px;
}
.partners-group .row{
padding: 0px;
height: auto;
}
.partners-group div div {
padding: 9% 2% !important;
margin-bottom: 0px;
width: 100%;
background-color: whitesmoke;
color: #fff;
}
.partnersleft.visible, .partnersright.visible{
width: 100%;
}
.web{
display: none !important;
}
.mobile, .only-mobile{
display: block !important;
}
#city-prof{
height: auto;
width: 100%;
}
.city-profile-items{
width: 100% !important;
height: auto !important;
background-color: transparent !important;
}
.mobile.highlights-btn{
width: 100% !important;
margin-bottom: 20px;
text-align: left !important;
background-color: transparent !important;
}
.newsanimated.visible{
width: 100%;
}
.contact-us{
width: 100%;
padding: 40px;
height: auto;
}
.form, .address{
width: 100%;
margin-bottom: 40px;
}
.partnersright.visible{
width: 100%;
}
.title h1, .partners h1, .news h1, .puzzle h1, .contact-us h1, footer h1, #city-prof h1{
font-size: 2em;
font-weight: bold;
line-height: 5rem !important;
text-align: left;
padding: 0px 20px;
background-color: #353537;
color: #eaeaea;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cities div{
padding: 1.5em 2em;
font-size: 1em;
font-weight: 600;
text-align: center;
border-bottom: 1px solid;
letter-spacing: 0.1rem;
}
.cities-right .city-box{
border-bottom: none;
}
.cities div:hover{
background-color: #f5f5f5;
}
.cities a{
color: inherit;
}
.contact-us h1:not(footer h1){
position: relative;
display: block;
top: 0px;
left: 0px;
transform: none;
color: #353537;
background-color: transparent;
padding: 0px !important;
}
.latest-news{
background-color: white;
color: #363638;
padding: 50px;
}
.latest-news div div a{
font-weight: 700;
text-decoration: none;
}
.partners h1{
margin-left: 0px;
}
.partners .right{
background-color: #ffffff;
color: #363638;
}
.partners .description{
padding: 50px;
position: relative;
}
.pieces .row{
height: auto;
}
.puzzle h1{
position: relative;
top: auto;
left: auto;
width: 100%;
transform: none;
margin: 0px;
}
.about-ur.fullsize, .news-detail.fullsize{
padding: 10%;
}
.welcome-screen, .congratulation-screen, .solutions-screen{
overflow: visible !important;
}
.fullsize .content.right{
padding: 0px;
margin-top: 20px;
}
.piece.empty{
display: none;
}
.faf-link, .wwd-link{
width: 100%;
}
.contact-wrapper {
overflow: hidden;
position: initial;
top: initial;
left: initial;
width: 100%;
transform: none;
}
.pieces div{
border-bottom: 2px solid #fff;
}
.pieces .row{
margin:0px !important;
}
.piece{
border-bottom: 8px solid #fff !important;
}
.fullsize .content{
width: 100%;
float: none;
}
.fullsize h1{
margin-bottom: 20px;
font-size: 1.5em !important;
}
.fullsize h4{
font-size: 1.2em;
}
.latest-news,.resiliencepills .left, .resiliencepills, .viswrapper{
height: auto;
}
.viswrapper{
padding: 30px;
}
.content.right{
padding:0px 0px 0px 100px
margin-top: 0px;
}
.event{
padding: 0px;
overflow: auto;
height: auto;
}
.event .description{
overflow: auto;
margin-bottom: 15px;
}
.logos{
margin-top: 20px;
}
.about, .partners, .map, .news, .puzzle, .contact{
height: auto;
overflow: auto;
}
.partnersleft{
display: none;
}
.about .txt .description{
height: auto;
}
.imgwur.visible{
display: none;
}
.about .txt .title{
height: auto;
}
.menu-toggle{
float: right;
margin-top: 8px;
font-size: 2em;
}
#mainCarousel{
width: 100%;
margin:0px;
/*height: 30%;*/
}
/*.mobile{
display: block;
width: 30px;
height: 30px;
color: #353537;
background-color: #fff;
}*/
.home ul li{
display: block;
width: 100%;
}
.menu{
position: absolute;
left: 0px;
z-index: 5000;
background-color: #fff;
height: 100vh;
display: none;
}
.language{
float: left;
}
#urh{
width: 70%;
height: 24%;
top: 14vh;
padding: 4% 3%;
}
.search-bar{
display: none;
}
.social-latest{
width: 100%;
}
.slider{
top: 50%;
}
.slider .arrow-right{
top: 45%;
right: auto;
border-left: 15px solid #eaeaea;
border-right: 15px solid transparent;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
#logo{
width: 48%;
line-height: normal;
top: auto;
}
#logo span{
display: none;
}
#logo img{
margin-top: -4.8%;
}
.logo-txt{
font-size: 7.5vmin;
line-height: 1.4em;
}
.logo-highlighter{
height: 7%;
}
.news .left{
display: none;
}
#wwdCarousel{
height: 110px;
top: 73px;
}
#wwdCarousel2{
display: none;
}
.fullsize .content-wwd{
width: 85%;
top: -50px;
padding: 30px;
}
.resiliencepills{
display: none;
}
.col-md-3.fact{
max-width: 100%;
}
.col-md-6.tool{
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
#tool-2{
margin-bottom: 30px;
}
.fullsize h1 {
margin-bottom: 20px;
font-size: 1.8em !important;
}
.home.ind-page .logo img{
float: left;
}
.col-md-6.city-context-text, .col-md-6.city-left {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
float: none;
display: block;
}
.city-info{
padding: 0px;
float: none;
left: 0px;
}
.city-info .city-image, .city-info .city-data{
display: none;
}
.city-more{
left: initial;
}
.mobile.city-datos{
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 20px;
height: auto;
}
.city-data{
position: relative;
}
.mobile.city-datos img{
height: auto;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
filter: grayscale();
}
.city-image{
height: 180px;
overflow: hidden;
position: relative;
}
.mobile.title.city-title{
width: 100%;
background-color: transparent;
text-transform: uppercase;
}
.join-us .a-y-partner {
bottom: 5vh;
right: 5vw;
}
footer.contact-us-n .mit div, footer.contact-us-n .mit p, .address .social-ico{
text-align: center;
}
}
@media (min-width:768px) and (max-width: 1024px){
.coming-soon .wrapper, .join-us .wrapper{
width: 60%;
}
#wwdCarousel {
height: 234px;
}
.city-profile-items{
margin: 50px 0px;
}
.city-profile-items div{
/*height: 20vh;*/
font-size: 1.3em;
font-size: 1.5em;
padding: 2.5em;
/*float: left;*/
}
.fullsize .content.right {
padding: 0px 100px 0px 50px;
}
.home.ind-page .logo img{
margin-bottom: 0px;
}
.social-latest{
width: 100%;
margin-bottom: 0px;
display: block;
}
#urh{
height: 31%;
}
.slider{
/*top: 32.5vh;*/
top: 60%;
}
.home.ind-page h1{
margin-bottom: 30px;
font-size: 4em;
}
.copyright {
display: inline-block;
margin-top: 30px;
margin-bottom: 20px;
}
.col-md-9.txt, .col-md-4.newsanimated, .col-md-6.partnersright, .col-md-6.partnersleft {
max-width: 100%;
}
.red.partner{
display: inline-flex !important;
}
.piece, .pieces div{
border-bottom: none !important;
}
.pieces div.white, .piece.blue{
color: initial;
}
.piece.empty{
display: initial;
height: initial;
}
.pieces .row{
position: relative;
}
.pieces .row .web{
display: initial !important;
background-color: initial;
color: initial;
}
.puzzle h1 {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
margin: 0px;
background-color: initial;
color: inherit;
line-height: 1.3em !important;
padding: 35px;
}
.pieces .row {
height: 50%;
}
.int-art .info{
width: 100%;
}
.profile-cat {
left: -17%;
}
}
@media (max-width:1024px){
.contact-us{
padding: 3% 4%;
}
footer.contact-us-n .ajuntament-div{
margin-top: 5%;
}
footer.contact-us-n .ajuntament-div{
}
}
@media (min-width:1024px) and (max-width: 1100px){
.col-md-9.txt, .col-md-4.newsanimated, .col-md-6.partnersright, .col-md-6.partnersleft {
max-width: 75%;
}
#wwdCarousel{
top: 178px;
height: 314px;
}
.coming-soon header, .join-us header {
font-size: 6em;
margin-bottom: 20px;
}
.col-md-4.newsanimated{
max-width: 33.3%;
}
.join-us p{
margin-bottom: 20px;
font-size: 2em;
}
.join-us .nl{
margin-top: 40px;
width: 100%;
text-align: left;
border-bottom: 0px;
}
#mainCarousel{
height: 40vh;
}
.pwu {
font-size: 1.2em !important;
border-bottom: 2px solid;
}
.title h1, .partners h1, .news h1, .puzzle h1, .contact-us h1, footer h1{
font-size: 2.5em;
}
.puzzle h1{
padding: 35px;
}
.logos div:nth-child(1) img{
width: 100% !important;
}
.logos div:nth-child(2){
padding-left: 10px;
}
.logos div:nth-child(2) img{
width: 35% !important;
}
.logos div:nth-child(3) img{
width: 85% !important;
}
.logos.support-div div:nth-child(2) img{
width: 55% !important;
}
}
// TABLETS / IPADS
@media (min-width:700px) and (max-width: 800px){
#wwdCarousel {
height: 235px;
top: 137px;
}
.contact-us-n .mit{
text-align: center;
max-width: 100%;
}
.contact-us-n .logos-home{
text-align: center;
}
.contact-us-n .impl div{
width: 100%;
max-width: 100%;
}
footer.contact-us-n .support-div div{
max-width: 100%;
margin-top: 20px;
}
#logos{
text-align: right !important;
}
#ajuntament-div{
text-align: left !important;
}
}
@media(min-width: 1800px){
.fullsize.full-ind{
padding: 40px 14%;
}
.about .txt .description{
font-size: 1em;
}
body{
font-size:1.3em;
}
.city-profile .graphic {
left: 50%;
transform: translate(-50%,-50%);
}
.city-footer {
width: calc(75%);
}
}
@keyframes wheelbounce {
0% {top:-120vh;}
25% {top:-60vh;}
40% {top:-20px;}
55% {top:-5vh;}
70% {top:-0vh;}
85% {top:-5vh;}
100% {top:0vh;}
}
@-webkit-keyframes wheelbounce {
0% {top:-120vh;}
25% {top:-60vh;}
40% {top:-20px;}
55% {top:-5vh;}
70% {top:-0vh;}
85% {top:-5vh;}
100% {top:0vh;}
}
@media (max-width: 1200px){
.container{
max-width: 1218px !important;
}
}
@media (min-width: 1281px){
.container{
max-width: 1360px !important;
}
}
@media (max-width: 1290px){
.logo {
height: 85px;
width: 85px;
left: 0%;
}
.partners-group div{
padding: 10px 0.9%;
}
}
@-moz-document url-prefix(http://),url-prefix(https://) {
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
scrollbarbutton {
display: none !important;
}
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}
@media (min-width:801px) and (max-width:1024px){
.puzzle h1{
font-size: 2rem;
}
}