/* rosso 333CE0
grigio 424241
bg F4F4F4
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
html, body {
  height: 100%;
}
body{font-family: 'Montserrat', sans-serif; color: #424241}
body p{font-size: 15px}
h1,h2,h3,h4,h5,h6{font-family: 'Montserrat', sans-serif; font-weight: 500}
a,a:before,a:after,a:focus,a:active,a:visited{transition: all linear 0.2s; color: #424241 }
a:hover{color: #000}
.row{max-width: 80rem !Important}
.full-width.row{max-width: 100rem}
.top-bar, .top-bar ul{background: transparent}
main{min-height: 50vh}

.logo{font-weight:700; font-size: 30px; text-transform: uppercase; color: #4d4d4d}

#content #inner-content{padding: 0}

.slick-dotted.slick-slider{margin: 0}
.slider, .slider .slide{width: 100%; height: auto;background: transparent}
.slider .slide img{width: 100%; height: auto; opacity: 0;}
.slider .slide a{width: 100%; display: block; background: center center no-repeat; background-size: cover}

.slider .slick-dots{bottom:20px; left: 0}
.slider .slick-dots li button::before {content: ""}
.slider .slick-dots li button{border: 2px solid #fff;  border-radius: 50%;}
.slider .slick-dots li.slick-active button{background: #fff}

.contents-box .box{ margin: 80px 0; position: relative}
.contents-box .box::before{ content: ""; position: absolute; left: 0; right: 0; top: -40px; margin: 0 auto; width: 80px; height: 2px;background: #4d4d4d}
.contents-box .box img{width: 100%}

.button-bst a{display: block; width: auto; text-align: center;padding: 10px 20px; background: #fff; color: #424241; border: 1px solid #424241; position: relative; float: left; font-weight: 500}
.button-bst a:before{content: ""; float: left; left:-10px; width: 20px; position:absolute; top: 50%; margin-top: -2px; border:1px solid #fff; height: 3px; background: #424241}
.button-bst a:after{content: ""; float: right; right:-10px; width: 20px; position:absolute; top: 50%; margin-top: -2px; border:1px solid #fff; height: 3px; background: #424241}
.button-bst a:hover{background: #424241; color: #fff}
.button-bst a:hover:before{left: -22px}
.button-bst a:hover:after{right:-22px}

.button-bst.dark{margin-bottom: 40px;  display: block;  float: left;}
.button-bst.dark a{background: transparent; border-color: #ccc; color: #ccc}
.button-bst.dark a:before,.button-bst.dark a:after{border:none; background: #ccc; height: 1px}
.button-bst.dark a:hover{background: #000;}



/* menu */
#top-bar-menu{margin-top: 20px}
.menu .active>a{background: transparent}
.overlay {  height: 0%;  width: 100%;position: fixed;z-index: 1;top: 0; left: 0;background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-y: hidden;   transition: 0.5s;}
.overlay-content { position: relative; top: 0; display: table; width: 100%; text-align: center; margin-top: 30px; height: 100vh;}
.overlay-content .menu{display: table-cell; vertical-align: middle}
.overlay a { padding: 8px; text-decoration: none; font-size: 32px; text-transform: uppercase;color: #818181; display: block; transition: 0.3s;}
.overlay a:hover, .overlay a:focus { color: #f1f1f1;}
.overlay .closebtn {  position: absolute; top: 20px; right: 45px;  font-size: 60px; z-index:9}
@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {  font-size: 40px;  top: 15px; right: 35px;  }
}

@media screen and (max-width: 40em) {
    .overlay a {font-size: 22px}
    .contents-box .box{margin: 40px 0}
    .contents-box .box > div > div{text-align: center; margin-bottom: 15px}
    .contents-box .box .button-bst, .contents-box .box .button-bst a{float: none !important}
    
}

.lang-switcher li a{ text-transform: uppercase; padding: 0 10px; font-weight: 500; color: #cccccc;    font-size: 14px;}
.lang-switcher li.active a{color: #424241;   }

.menu-icon.dark{    background: #fff;  box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;}
.open-menu li a{  padding: 10px; }


.boxed-image{position: relative; overflow: hidden}
.boxed-image img{transform: scale(1);transition: all linear 0.2s}
.boxed-image:hover img{transform: scale(1.02);}
.boxed-image:before{content: ""; opacity: 0; width:100%%; height: 100%; position: absolute; top: 0; left:0; right: 0; margin: 0 auto; background: rgba(0,0,0,0.5) center center no-repeat; background-size: 30px; background-image: url(../img/plus-icon.svg); transition: all linear 0.2s; z-index: 20; pointer-events: none;}
.boxed-image:hover:before{opacity: 1; cursor: pointer}


.footer{font-family: 'Montserrat', sans-serif;background: #4d4d4d; padding: 40px 0;color: #cccccc; text-align: center; font-weight: 400}
.footer h4{font-size: 20px; text-transform: uppercase; color: #fff; text-align: center} 
.footer i{margin-right: 10px}
.footer .widget{position: relative; margin-bottom: 30px; padding-bottom: 20px}
.footer .widget:after{content: ""; height: 1px; width: 80px;background: #fff;   position: absolute;  margin: 0 auto;  left: 0; right: 0;   bottom: 0;}
.footer a{color: #cccccc; font-size: 16px}
.footer a:hover{color: #fff}
.footer .menu-centered{margin-top: 20px}
.footer input{background: transparent; color: #ccc; border: 1px solid #ccc;font-family: 'Montserrat', sans-serif;}
.footer input[type="submit"]{background: #fff; color:#424241; padding: 10px 20px; font-size: 16px; transition: all linear 0.2s; float: none}
.footer input[type="submit"]:hover{cursor: pointer; background: #333; color: #fff}

body:not(.home) #inner-content{margin-top: 50px; margin-bottom: 50px}
.page-title{text-align: center; text-transform: uppercase; position: relative; padding-bottom: 30px; margin-bottom: 30px; font-size: 35px}
.page-title:before{content: ""; width: 30px; height: 2px; background: #424241; margin: 0 auto; right: 0; left: 0; position: absolute; bottom: 20px;}

.vertical-line{height: 100%; min-height: 300px; width: 1px;border-right: 1px solid #424242; margin: 0 auto}

input[type="submit"]{background: #424241;font-family: 'Montserrat', sans-serif; color:#fff; padding: 10px 20px; font-size: 16px; transition: all linear 0.2s; float: right;border: 0}
input[type="submit"]:hover{cursor: pointer; background: #333; color: #fff}

div.wpcf7 .ajax-loader{display: none}
div.wpcf7-validation-errors{border: none; font-size: 13px}
.wpcf7-not-valid{margin-bottom: 0}
span.wpcf7-not-valid-tip{ background: #000; margin-bottom: 10px; color: #fff; font-size: 13px; padding: 4px;display: block;}
div.wpcf7-response-output{margin: 0}
.screen-reader-response{display: none}

.page-navigation{text-align: center;border-top: 1px solid #424241; padding-top: 20px; padding-bottom: 20px;}
.page-navigation .pagination{margin: 0 auto; font-family: 'Montserrat', sans-serif; }
.page-navigation .pagination li a {color: #666;  }
.page-navigation .pagination li a:hover{background: none; color: #424242;font-weight: 500;}
.page-navigation .pagination .current{background: none; font-weight: 700; color: #424242}



.archive article .article-header{ text-align: center;}
.archive article .article-header h2 {text-align: center; font-size: 26px; text-transform: uppercase; margin-bottom: 50px}
.single article .article-header .entry-title{text-align: center; text-transform: uppercase;  position: relative;  padding-bottom: 30px;  margin-bottom: 30px;   font-size: 35px;}
.single article .article-header .entry-title:before { content: ""; width: 30px; height: 2px; background: #424241; margin: 0 auto; right: 0;  left: 0;  position: absolute;   bottom: 20px;}

@media only screen and (min-width: 64.063em) {
body:not(.page) article:not(.type-works) .entry-content  {-webkit-column-count: 2;   -moz-column-count: 2;  column-count: 2 ;    text-align: justify; -webkit-column-gap: 3rem; -moz-column-gap: 3rem;  column-gap: 3rem; padding-bottom: 50px}
}
blockquote, blockquote p{text-align: center; border: none}
blockquote{padding: 20px }

#masonry-container{list-style-type: none; padding: 0; margin: 0}
#masonry-container li{list-style-type: none; margin-bottom: 25px}
#masonry-container a{position: relative; display: block}
#masonry-container a .overlay-text{ position: absolute; top: 0; left: 0 ; background: rgba(51,51,51,0.9); color: #fff; height: 100%; text-align: center; width: 100%; padding: 20px; transition: all linear 0.2s; opacity: 0}
#masonry-container a:hover .overlay-text{opacity: 1}
.overlay-text .cont-table{height: 100%}
.overlay-text .table{display: table; height: 100%; width: 100%}
.overlay-text .table .cell-midd{ display: table-cell; vertical-align: middle}
.overlay-text .title{text-transform: uppercase; font-size: 16px}

.thumbail-gallery.menu>li>a{padding: 0; margin-bottom: 10px}


#worksgallery h1{font-size: 23px; text-align: left;     margin-bottom: 30px;}
#worksgallery p, #worksgallery h1, #worksgallery {color: #fff}
.reveal-overlay{background-color:rgba(51,51,51,0.9);}
#worksgallery.reveal{background-color:rgba(51,51,51,0.9);border: none}


#worksgallery .page-navigation{border-color: #fff;}
#worksgallery .page-navigation a{color: #fff}
#worksgallery #content{max-width: 75rem; margin: 0 auto}


.thumbail-gallery a{border: 2px solid transparent}
.thumbail-gallery .active{border:2px solid #fff;}
.addtoany_shortcode{text-align: center}

.page-subtitle{margin-bottom: 50px}
.loop-exhibitions article > .row > div{color: #666;margin-top: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #999}
.loop-exhibitions article i{font-size: 14px}
.loop-exhibitions article h2{text-align: left;  font-size: 20px; margin-bottom: 0; color: #424242}
.loop-exhibitions article .addtoany_shortcode{text-align: left}

.loop-exhibitions article a{display: block; position: relative; transition: all linear 0.2s; background: url(../img/plus-icon.svg) 110% center no-repeat; background-size: 30px;overflow: hidden; padding:20px 0}
.loop-exhibitions article a:hover{padding-left: 20px;background-color: rgba(51,51,51,0.3); background-position: 95% center ; }

.type-exhibitions .entry-content img{width: 100%; margin-bottom: 30px}

.close-button, .close-button.medium{font-size: 4em}

.zoom-container{position: relative; float: left; height: 100%;  overflow: hidden; padding: 0}
.zoom-container img{width: 100%}
 .photo {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;   background-repeat: no-repeat;  background-position: center;  background-size: cover;
    transition: transform .2s ease-out; transition: opacity .5s ease-out;  }

.textwidget input{height: 30px;font-size: 14px; line-height: 10px}

div.wpcf7-mail-sent-ok{border: none;}
@media only screen and (max-width: 40em) {
    .page-title{    margin-bottom: 20px; font-size: 20px;}
    .archive article .article-header h2{    font-size: 22px;  margin-bottom: 30px;}
    .lang-switcher li a{line-height: 40px; padding-left: 20px}
    .lang-switcher {width: 50%; float: left;}
    .single article .article-header .entry-title{font-size: 26px}
    .wpcf7-form .text-right{text-align: left !important}
    .loop-exhibitions article a:hover{background-image: none}
    #worksgallery.reveal {   background-color: rgba(51,51,51,0.98);}
    #worksgallery.reveal .menu.vertical>li{    display: table-cell;}
}