/*
Theme Name: Hermanos Santiago
Theme URI: www.hermanossantiago.com
Author: Lewis Lopez
Author URI: www.lewislopez.com/
Version: 1.1

*/

/*-------------------------------------------------------------
	IMPORT OF GLOBAL CSS RESET / FOUNDATION CSS DEFAULT
-------------------------------------------------------------*/


/*-------------------------------------------------------------
                        FONT-FACE
-------------------------------------------------------------*/
@font-face {
    font-family:"fetteunzfraktur";
    src: url("css/fetteunzfraktur.ttf");
    src: url("css/fetteunzfraktur.ttf");
    src: url('css/fetteunzfraktur.woff') format('woff');
    }
/*-------------------------------------------------------------
			GLOBAL DEFAULT EDIT CLASS
-------------------------------------------------------------*/
.clear{
    clear: both;
}
.noRight{
    padding-right: 0 !important;  
}
.noLeft{
    padding-left: 0 !important;  
}
p {
    margin: 0;
}
body{
    background-color: #fff;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    font-family: 'Libre Baskerville', serif, "PlainBlackWide", "Open sans";
    height: auto;
    margin: auto;  
}
html{
    background-position: center bottom;
    background-repeat: repeat-x;
    margin: 0;
}
h1, h2, h3, h4, h5, h6{
    font-family: "fetteunzfraktur", "Open sans" !important; 
}

.row{
    max-width: 75rem;
    width: 100%;
}
.button:hover, .button:focus{
    background: #ffa732 none repeat scroll 0 0;
}

/*-------------------------------------------------------------
			HEADER
-------------------------------------------------------------*/
.wrapper{
    margin: 0.5em 0 0 0;
}
.idioms{
    float: left;
    margin: 2em 0 0 3em;
    width: auto;
}
.idioms ul{
    list-style: outside none none;
    margin: auto;
}
.idioms li{
    display: inline;
    margin: 0 0.5em 0 0;
}
.idioms li a{
    color: #000;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.4s ease-out 0s;
}
.idioms li a:hover{
    color: #717171;
}
.logo{
    background-image: url("images/logo.png");
    background-size: cover;
    height: 61px;
    margin: auto;
    text-align: center;
    width: 158px;
}
.cover{
    margin: 0.5em 0 0 0;
}
.cover h1 {
    margin: 0;
}
.cover h1 img {
    text-align: center;
    width: 100%;
}
.cover h1 img.coverDesk{
    display: block;
}
.cover h1 img.coverMob{
    display: none;
}
.menu{
    margin: 3.5em 0 1em;
    text-align: center;
}
.menu ul{
   list-style: none; 
   margin: auto;
}
.menu li{
   display: inline;
   margin: 0 4em;
}
.menu li a {
    color: #000000;
    font-size: 2em;
    font-weight: 500;
    transition: all 0.4s ease-out 0s;
}
.menu li a:hover{
   color: #717171; 
}
.navMobile{
    display: none;
}
.isotopeContainer {
    margin: 0em auto;
    width: 930px;
    margin-left: auto;
    margin-right: auto;
}
/*-------------------------------------------------------------
			WHO IS
-------------------------------------------------------------*/
.whoIs, .artWorks, .diary, .contnews {
    border-top: 1px solid #000;
    margin: 0 auto;
    padding: 5em 2.7em 4.7em;
    text-align: center;
    width: 75%;
}
.whoIs h2, .artWorks h2, .diary h2, .news h2 {
    font-size: 4em;
    margin: 0 0 0.5em;
}
.whoIs p, .artWorks p, .diary p, .news p{
    font-size: 0.9em;
    font-weight: 500;
    text-align: justify;
}

.artWorks p {
    margin: auto;
    width: 90%;
}

.whoIs img{
    
}
.box{
    margin: 1em auto;
    width: 75%;
}
.contThumbnail {
    float: left;
    margin: 0 0 1em;
    position: relative;
    width: 100%;
}
.thumbnailNews{
    background-image: url("images/thumbnail.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    float: left;
    height: 208px;
    width: 356px;
}
.box h3 {
    background-color: #fff;
    bottom: 14px;
    font-family: "Libre Baskerville",serif !important;
    font-size: 2.3em;
    font-weight: 700;
    left: 44%;
    line-height: 1;
    padding: 0.2em 0.4em 0.3em 0.5em;
    position: absolute;
    text-align: left;
    width: 320px;
}
.newsTxt{
   display: block; 
}
.newsTxt p {
    font-size: 0.9em;
    text-align: justify;
}
.isotopeMenu{
    display:none;
}
.instagramFoto {
    margin: auto;
    width: 1018px !important;
}
.paginator {
    height: auto;
    margin: 0 auto 2.7em 0;
    text-align: center;
}
.wp-paginate .current {
    background: transparent none repeat scroll 0 0 !important;
    border: medium none transparent !important;
    color: #000 !important;
    font-family: inherit !important;
    font-size: 0.8em !important;
    margin-right: 4px !important;
    padding: 4px 8px !important;
}
.wp-paginate a {
    background: transparent none repeat scroll 0 0 !important;
    border: medium none transparent !important;
    color: #000 !important;
    font-size: 0.9em !important;
    margin-right: 4px !important;
    padding: 2px 8px !important;
    text-align: center !important;
    text-decoration: none !important;
}
.wp-paginate a:hover, .wp-paginate a:active {
    background: #000 none repeat scroll 0 0 !important;
    color: #fff !important;
    border-radius: 25px 25px 25px 25px !important;
}
.title {
    display: none;
}
/*-------------------------------------------------------------
			FOOTER
-------------------------------------------------------------*/
.bgBlack{
    background-color: #000;
    color: #fff;
    margin: 2.5em auto auto;
    padding: 1em 0;
}
.desciption {
    margin: 2em 0;
    padding: 0 0 0 3em;
    width: 90%;
}
.contacts {
    margin: 2em auto;
    width: 70%;
}
.contacts a{
   color: #fff;
   transition: all 0.4s ease-out 0s;
}
.desciption p, .contacts p {
    font-size: 0.85em;
    font-weight: 600;
}
.desciption p strong, .contacts p strong{
   font-size: 1rem;
}
.contacts a:hover{
    color: #888888;
}
.social{
    margin: 2em auto; 
}
.social a {
    color: #fff;
    margin: 0 1em 0 0;
    transition: all 0.4s ease-out 0s;
}
.social a:hover{
    color: #888888;
}
.fa.fa-star {
    margin: 4em 0;
}
.stella{
    text-align: center;
}
.isotopeItemOverlay{
    background:rgba(255,255,255,0.6) !important;
    padding: 0 1em;
}
.labelBlock {
    font-family: "Libre Baskerville",serif;
    font-size: 1.1em;
    font-weight: 500;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
#ilghtb_controls{
    display:none;
}
#sk_igallery_lightbox{
    background:rgba(255,255,255,0.6) !important;
}
#ilghtb_caption{
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    color: #000;
    text-align: left;
    padding-left: 20px;
}
#ilghtb_img > p {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.1em;
    font-weight: 500;
    margin: 0;
    padding: 0 10px;
}
.header{
	z-index: 1000;
position: relative;
}

.dialog {
	width:100%;
	height:100%;
	background:#fff;
	z-index:99;
	position:fixed;
	top:0;
	left:0;
	transition:all .5s ease;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
}
.transitionTop {
	-webkit-transform:translateY(-1200px);
	-ms-transform:translateY(-1200px);
	transform:translateY(-1200px);
}

.transitionTop.open {
	-webkit-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
}

.wrapBackgroundDialog {
	height:100%;
	position:relative;
	top:0;
}

.transitionBottom {
	-webkit-transform:translateY(1200px);
	-ms-transform:translateY(1200px);
	transform:translateY(1200px);
}

.transitionBottom.open {
	-webkit-transform:translateY(0px);
	-ms-transform:translateY(0px);
	transform:translateY(0px);
}

.img-instagram {
    height: 50vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
	margin-top:40px;
}
.instagramFoto .titolo{
	margin-top:10px;
}
.arrowNext{
    cursor: pointer;
    margin-bottom: 3em;
    margin-top: 5em;
    text-align: center;
}
.instagramFoto .columns{
	margin-left: calc(100% / 18);
}
.instagramFoto .titolo{
    background-image: url("images/avatar.png");
    background-position: 0 2px;
    background-repeat: no-repeat;
    background-size: 20px auto;
    padding: 0 0 0 2em;
}
/*--------------------------------------------------------
		MEDIA QUERYS
-------------------------------------------------------------*/

/*MEDIUM*/
@media only screen and (max-width: 64.063em) {
    .noRight{
        padding-right: 0.9375rem !important; 
    }
    .noLeft{
        padding-left: 0.9375rem !important;
    }
    .noRightTablet{
        padding-right: 0rem !important; 
    }
    .noLeftTablet{
        padding-left: 0rem !important;
    }
    .whoIs {
        width: 80%;
    }
    .fa.fa-star {
        margin: 2em 0;
    }
    .menu {
        display: none;
    }
    .navMobile {
        display: block;
        height: 50px;
        margin: auto auto 0;
        position: relative;
        top: 4px;
        width: 31px;
        z-index: 111111111;
    }
    .box {
        width: 95%;
    }
    .whoIs, .artWorks, .diary, .contnews {
        padding: 1em 0;
        width: 95%;
    }
    .contacts {
        width: 100%;
    }
    .menuMobile, .langMenuMobile {
        list-style: outside none none;
        margin: 7.5em 0 0;
        text-align: center;
    }
    .menuMobile a, .langMenuMobile a {
        color: #000;
        font-family: 'Libre Baskerville', serif;
        font-size: 2em;
    }
    .idioms {
        display: none;
        margin: 1em 0 0;
    }
    .langMenuMobile {
        display: block;
    }
    .menuMobile li {
        margin: 1.5em 0 0;
    }
    .langMenuMobile li {
        display: inline;
        margin: 0 0.7em;
    }
    .menuMobile li a, .langMenuMobile li a{
        transition: all 0.4s ease-out 0s;
    }
    .langMenuMobile li a {
        font-size: 1em;
    }
    .menuMobile li a:hover, .langMenuMobile li a:hover{
        opacity: 0.5;
    }
    .cover {
        margin: 0.5em 0 1em;
    }
    .isotopeContainer {
        margin: auto !important;
        width: 443px !important;
    }
    .instagramFoto {
        padding: 0 1em;
        width: 100% !important;
    }
    .instagramFoto .columns {
        margin-left: 0;
    }
    .whoIs, .artWorks, .diary, .contnews{
        border: 0;
        margin: 0em 0 2em 0;
        padding: 0.5em 0;
        
    }
    .whoIs h2, .artWorks h2, .diary h2, .news h2 {
        margin: 0.3em 0 0.3em;
    }
    .cover h1 img.coverDesk{
        display: none;
        }
    .cover h1 img.coverMob{
        display: block;
    }

}

@media only screen and (max-width: 50.063em) {
    .box h3 {
        font-size: 2.2em;
        width: 40%;
    }
    
}
@media only screen and (max-width: 775px) {
    .isotopeContainer{
        width: 330px;
        margin-left: auto;
        margin-right: auto;
    }
    .bgBlack {
        margin: 0em auto;
        padding: 0.5em 0;
    }
}
/*SMALL*/
@media only screen and (max-width: 40.063em) {
    #sk_igallery_lightbox {
        display: none;
    }
    .whoIs {
        width: 95%;
    }
    .idioms {
        display: none;
    }
    .whoIs, .artWorks, .diary, .contnews{
        text-align: center;
        width: 100%;
    }
    .contThumbnail {
        position: unset;
    }
    .whoIs h2, .artWorks h2, .diary h2, .news h2 {
        font-size: 3em;
    }
    .box h3 {
        font-size: 2.3em;
        margin: 0.5em auto auto;
        padding: 0;
        width: auto;
    }
    .thumbnailNews {
        width: 100%;
        margin: 0 0 1em;
    }
    .box {
        width: 100%;
    }
    .langMenuMobile {
        display: block;
        margin: 2em auto;
    }
    .langMenuMobile li {
        display: inline;
        margin: 0 0.7em;
    }
    .langMenuMobile li a{
        font-size: 1em;
    }
    .isotopeContainer {
        width: 100%;
    }
    .isotopeItem {
        margin: auto !important;
        width: 100% !important;
    }
    .instagramFoto .columns {
        margin: 0;
    }
    .img-instagram {
        margin: auto;
        width: 98%;
    }
    .desciption, .contacts, .social {
        margin: 0.5em 0;
        padding: 0 0 0 0em;
    }
    .isotope .isotope-item {
        height: auto !important;
        margin: 0.5em auto !important;
        position: relative !important;
        top: -4px !important;
        transform: translate(0px, 0px) !important;
    }
     .isotopeContainer.isotope {
		  width: 100% !important;
		  height: auto !important;
     }
	 .isotopeContainer.isotope .isotope-item{
		display: block;
		opacity: 1 !important;
	 }
	 .arrowNextArtwork{
		 display:none;
	 }
	 .spaceArtwork{
		 display:block;
	 }
    .instagramFoto .titolo {
        margin: 14px auto !important;
        width: 97%;
    }
    
    .instagramFoto {
        padding: 0 0.2em !important;
        width: 100% !important;
    }
   .box h3 {
        font-size: 1.7em;
        line-height: 1;
        margin: 0.2em 0;
        position: unset;
    }
    .desciption p, .contacts p {
        font-size: 0.7em;
        font-weight: 600;
    }
    .desciption p strong, .contacts p strong {
        font-size: 0.8rem;
    }
    .social p strong {
        font-size: 0.8rem;
    }
}