/* CSS Document */
/*!
Theme Name: Francisco Almeida
Author: Manuel Barbosa
Author URI: http://www.manuelbarbosa.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: muralisto
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/

@font-face {
    font-family: HelveticaRoman;
    src: url(fonts/Helvetica-Roman) format('truetype');
    font-weight: 400;
    font-style: normal;

}

*{
    font-family: HelveticaRoman, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

body {
	width: 100%;
    font-family: HelveticaRoman, Helvetica, sans-serif;
    margin: 30px auto;
    padding: 0 30px;
    font-size: 100%;
    background: #ffffff;
    font-weight: 100;
}

p, ul {
    color: #000000;
    padding: 0;
    margin: 0;
    font-size: 15px;
}

li {
    text-align: left;
    list-style-type: none;
    color: #000000;
    padding: 0;
    margin-bottom: 0;
}

a {
    cursor: pointer;
	text-decoration: none;
	color: #000000;
}

embed, object {
	max-width: 100%;
}

iframe{
    max-width: 100%;
}

figure {
    margin: 0 auto;
}

.site-branding {
	position: fixed;
	top: 30px;
	left: 10px;
}

#site-navigation {
	position: fixed;
	bottom: 30px;
	
}

#site-navigation ul ul{
	/* margin-top: -15px;*/
	margin-left: 70px;
	position: absolute;
	bottom: 0;
	left: -999em;
}

  #site-navigation  ul li:hover > ul,
  #site-navigation  ul li.focus > ul {
	  left: auto;
  }

#site-navigation ul li a{
	color: #b3b3b3;
	font-size: 16px;
	line-height: 25px;
}

.children a {
	color:#b3b3b3;
}

#site-navigation ul .current_page_item a {
	color: #000000;
}

#site-navigation ul .current_page_item ul a {
	color:#b3b3b3;
}

#site-navigation ul li:nth-child(1) a {
	cursor: pointer;
	padding: 50px 82px 2px 0;
}

#site-navigation ul li a {
	cursor: pointer;
	padding: 2px 82px 2px 0;
}

#site-navigation ul ul li:nth-child(1) a {
	cursor: pointer;
	padding: 50px 50px 2px 50px!important;
}

#site-navigation ul ul li a {
	cursor: pointer;
	padding: 2px 50px 2px 50px!important;
}

#site-navigation a:hover, #site-navigation a:active {
	color:#000000;
}

#site-navigation .current_page_item ul li a:hover, #site-navigation .current_page_item ul li a:active  {
	color:#000000;
}

.projects-grid {
	margin: 0 0 0 auto;
	padding-left: 25vw;
	/* width: calc(100vh - -190px); */
	gap: 30px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
}

.projects-grid li{
	  position: relative;
	  /* max-width: 605px;*/
	  width: calc(50vh - 45px);
	  /* desired width */
	  margin: 0px;
	  height: calc(50vh - 45px);
	  aspect-ratio: 1 / 1;
	  background-color: #000000;
	
}

.projects-grid li:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}

.projects-grid li img{
	 object-fit: cover;
	 position: absolute;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
	 /*   display: flex;
	  align-items: center; */
	 line-height:100%;
	 height: 100%;
	 width: 100%;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	z-index: 1;
}

.projects-grid li h4 {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50%);
	z-index: 2;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 100;
	color: #ffffff;
	margin: 0;
	padding: 0;
	text-align: center;
}

.projects-grid li:hover img {
	opacity: 0.68;
}

.projects-grid li:hover h4 {
	opacity: 1;
}

#wrapper{
	display: flex;
	width: 58vw;
	gap: 30px;
	margin: 0 0 0 auto;
	align-items: flex-end;
	flex-wrap: nowrap;
	flex-direction: column;
	align-content: flex-end;
}

#wrapper .entry-header {
	display: none;
}

#wrapper div{
	position: relative;
    font-size: 16px;

}

#wrapper p {
    width: 50%;
    max-width: 1500px;
    margin: 0 0 24px;
    color: #333333;
    line-height: 24px;
}

#wrapper img{
	 height: auto;
	 width: 100%;
	 max-width: 1500px;
}

#wrapper .post-thumbnail {
	margin-bottom: 30px;
}

#wrapper .wp-block-gallery {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px 0;
	margin-top: 30px;
	align-content: flex-end;
}

#wrapper .wp-block-gallery img{
	 width: 100%;
	 max-width: 1500px;
}
#post-11 .entry-content {
	min-height: calc(100vh - 160px);
	
}

#post-11 p {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	font-size: 24px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0.7px;
}

.page-id-13 #wrapper{
	width: 58vw;
	height: calc(100vh - 160px);
	overflow: hidden
	
}

.page-id-13 iframe {
	width: 58vw;
	height: calc(100vh - 160px);
	filter: grayscale(100%) contrast(95%);
	margin-top: 0px;
	border: 0;
	overflow: hidden;
}


body.home footer div {
	margin: 30px 0 0 auto;
	padding: 0;
	width: calc(100vh - 30px);
	gap: 30px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
}

body.home #page footer div section {
	  position: relative;
	  max-width: 605px;
	  width: calc(50vh - 45px);
	  /* desired width */
	  margin: 0px;
}


footer div {
	margin: 30px 0 0 auto;
	padding: 0;
	width: 58vw;
	max-width: 1500px;
	gap: 30px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
}

footer div section {
	  position: relative;
	  width: calc(50% - 15px);
	  /* desired width */
	  margin: 0px;
}

footer li {
	text-align: left;

}

footer section:nth-child(2) {
	display: none;
	
}

.page-id-13 footer div {
	margin: 30px 0 0 auto;
	padding: 0;
	width: 58vw;
	gap: 30px;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
}

.page-id-13 footer div section {
	  position: relative;
	  width: calc(33.33% - 20px);
	  /* desired width */
	  margin: 0px;
}

.page-id-13 footer section:nth-child(2) {
	display: block;
	
}

@media only screen and (max-width: 1230px) {

	.page-id-13 footer div {
		justify-content: flex-start;
	}
	
	.page-id-13 footer div section {
	  position: relative;
	  width: calc(28% - 20px);
}

}

@media only screen and (max-width: 940px) {

       /*  burger_add
========================================== */

    .burger_add {
      width: 55px;
      height: 55px;
      position: fixed;
      top: 46px;
      right: 31px;
      /* border-radius: 4px; */
      z-index: 160;
    }

    .burger_add span {
      position: relative;
      margin-top: 0;
      margin-bottom: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .burger_add span, .burger_add span::before, .burger_add span::after {
      display: block;
      width: 20px;
      height: 55px;
      background-color: #222427;
      outline: 0px solid transparent;
      -webkit-transition-property: background-color, -webkit-transform;
      -moz-transition-property: background-color, -moz-transform;
      -o-transition-property: background-color, -o-transform;
      transition-property: background-color, transform;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
    }

	.burger_add span::before {
		transform: rotate(-90deg);
		margin-top: 0px;
		
	}

	.burger_add span::after {
		transform: rotate(90deg);
		margin-top: 0px;
	}

    .burger_add span::before, .burger_add span::after {
      position: absolute;
      content: "";
    }

    .burger_add span::before {top: 0px;}

    .burger_add span::after {top: 0px;}

    .burger_add.clicked span {background-color: transparent;}

    .burger_add.clicked span::before {
      -webkit-transform: translateY(0) rotate(45deg);
      -moz-transform: translateY(0) rotate(45deg);
      -ms-transform: translateY(0) rotate(45deg);
      -o-transform: translateY(0) rotate(45deg);
      transform: translateY(0x) rotate(45deg);
    }

    .burger_add.clicked span::after {
      -webkit-transform: translateY(0) rotate(-45deg);
      -moz-transform: translateY(0) rotate(-45deg);
      -ms-transform: translateY(0) rotate(-45deg);
      -o-transform: translateY(0) rotate(-45deg);
      transform: translateY(0) rotate(-45deg);
    }

    .burger_add.clicked span:before, .burger_add.clicked span:after {background-color: #000000;}

    .burger_add:hover { cursor: pointer; }

    /*  NAV
    ========================================== */

    nav {
      position: fixed;
      z-index: 9;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      padding: 30px 0 30px;
      background-color: #ffffff;
      overflow-y: auto;
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
      transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

    nav.show {
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px);
    }

    nav.show ul.menu li {
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
    }

    nav.show ul.menu li:nth-child(1) { transition-delay: 0.15s; }

    nav.show ul.menu li:nth-child(2) { transition-delay: 0.3s; }

    nav.show ul.menu li:nth-child(3) { transition-delay: 0.45s; }

    nav.show ul.menu li:nth-child(4) { transition-delay: 0.6s; }

    nav.show ul.menu li:nth-child(5) { transition-delay: 0.75s; }

    nav.show ul.menu li:nth-child(6) { transition-delay: 0.9s; }

    nav.show ul.menu li:nth-child(7) { transition-delay: 1.05s; }

    nav.show ul.menu li:nth-child(8) { transition-delay: 1.2s; }

    nav.show ul.menu li:nth-child(9) { transition-delay: 1.35s; }

    nav.show .about, nav.show .social, nav.show ul.sub {
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px);
      opacity: 1;
      transition-delay: .85s;
    }
    @media (min-width: 667px) {

    nav {/* padding: 26px 0px; */}
    }

    #primary-menu li {
		display: block;
		list-style-type: none;
		width: 100%;
		text-align: center;
		margin: 0 auto;
		padding: 30px 0;
		float: none;
		text-transform: lowercase;
		/* border-bottom: 0.5px solid #000000; */
		/* border-left: 0.5px solid #000000; */
		/* border-right: 0.5px solid #000000; */
	}


        #primary-menu ul {
            margin-top: 100px;
            padding: 0;
            background-color: #ffffff;
     }

	header nav li a{
		font-size: 15px;
		padding: 16.5px 30%;
	}

	header nav:before {
        border: none;
    }

    header nav:after {
        border-bottom: none;
    }

    header nav ul ul li:nth-child(1) {
        margin: 0;
    }

    header nav ul ul {
        top: 4.2em;
        width: 100%;
        z-index: 99999;
        background: #fff;
        padding: 0;
        margin: 0;
    }
    

    nav ul.menu { list-style-type: none; }

    nav ul.menu li {
      margin-bottom: 10px;
      -webkit-transform: translateX(40px);
      -moz-transform: translateX(40px);
      -ms-transform: translateX(40px);
      -o-transform: translateX(40px);
      transform: translateX(40px);
      opacity: 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    nav ul.menu li:last-of-type {margin-bottom: 10px;}

    nav ul.menu li a {
      color: #ffffff;
      text-decoration: none;
      text-transform: none;
      font-size: 1.5rem;
      display: block;
      font-weight: bold;
      padding: 0 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }


    nav ul.menu ul li a{
            font-family: Scotch Modern;
            margin: 0;
        font-weight: normal;
        list-style-type: none;

    }

    nav ul.menu ul{
        list-style-type: none;
        padding: 0;
    }        

    nav .social a:last-of-type { margin-right: 0px; }

    nav .social a:hover svg path, nav .social a:hover svg circle { fill: #8B7662; }

    nav .social a svg {
      width: 100%;
      height: 100%;
    }

    nav .social a svg path, nav .social a svg circle {
      fill: #ffffff;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    nav ul.sub {
      list-style-type: none;
      margin-top: 40px;
      -webkit-transform: translateY(30px);
      -moz-transform: translateY(30px);
      -ms-transform: translateY(30px);
      -o-transform: translateY(30px);
      transform: translateY(30px);
      opacity: 0;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;
    }

    nav ul.sub li { margin-bottom: 10px; }

    nav ul.sub li:last-of-type { margin-bottom: 0px; }

    nav ul.sub li a {
      color: #ffffff;
      letter-spacing: 1px;
      font-size: 0.9rem;
      text-decoration: none;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    nav ul.sub li a:hover { color: #8B7662; }




    /*  overlay_added
    ========================================== */

    .overlay_added {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      background-color: transparent;
      opacity: 0;
      visibility: hidden;
    }

    .overlay_added.show {
      opacity: 0.8;
      visibility: visible;
    }
    
    body.home #primary-menu li:nth-child(3), body.home #primary-menu li:nth-child(4), body.home #primary-menu li:nth-child(5) {
    /* display: block; */
}


#site-navigation {
	position: fixed;
	top: 0;
	bottom: auto;
}


#site-navigation ul li a{
	color: #b3b3b3;
	font-size: 16px;
	line-height: 25px;
	padding: 16.5px 30%;
}

#site-navigation ul ul{
	display: none;
}

#site-navigation ul li:nth-child(1) a {
    cursor: pointer;
    padding: 16.5px 30%;
}

.projects-grid {
	margin: 130px auto 0;
	padding-left: 0;
	width: calc(100vw - 60px);
	gap: 30px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column-reverse;
	justify-content: center;
	align-content: center;
}

.projects-grid li{
	  position: relative;
	  width: calc(100vw - 60px);
	  margin: 0px;
	  height: calc(100vw - 60px);
	
}

.projects-grid li img{
	opacity: 1;
}

.projects-grid li h4 {
	opacity: 0;
}

.projects-grid li:hover img {
	opacity: 1;
}

.projects-grid li:hover h4 {
	opacity: 0;
}

.site-branding {
	position: fixed;
	top: 30px;
	left: 30px;
	margin-left: -18px;
	z-index: 10;
}

.site-branding img {
	width: 100%;
	max-width: 90px;
}

	body.home footer div {
		margin: 30px 0 0 0;
		padding: 0;
		width: calc(100vw - 60px);
		gap: 30px;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-end;
	}
	
	body.home #page footer div section {
		  position: relative;
		  max-width: 100%;
		  width: calc(50vw - 45px);
		  margin: 0px;
	}

	#wrapper{
		width: 100%;
		gap: 30px;
		margin: 130px auto 0;
	}
	
	#wrapper p {
	    width: 100%;
	    margin: 0 auto 30px;
	}

	footer div {
		margin: 30px auto;
		padding: 0;
		width: calc(100vw - 60px);
		max-width: 1500px;
		gap: 30px;
	}
	
	footer div section {
		  position: relative;
		  width: calc(50% - 15px);
		  /* desired width */
		  margin: 0px;
	}
	
	footer li {
		text-align: left;
	
	}
	
	footer section:nth-child(2) {
		display: none;
		
	}

	#post-11 .entry-content {
		min-height: calc(100vh - 257px);
	}
	
	#post-11 p {
		width: 100%;
		max-width: 1500px;
		margin: 0 auto;
		font-size: 22px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 0.7px;
	}

	.page-id-13 #wrapper{
		width: 100%;
		height: calc(100vh - 305px);
		overflow: hidden
	}
	
	.page-id-13 iframe {
		width: calc(100vw - 60px);
		height: calc(100vh - 257px);
		filter: grayscale(100%) contrast(95%);
		margin-top: 0px;
		border: 0;
		overflow: hidden;
	}

	.page-id-13 footer div {
		width: 100%;

	}
	
	.page-id-13 footer div section {
		  position: relative;
		  width: calc(29.33% - 20px);
		  /* desired width */
		  margin: 0px;
	}

}

@media only screen and (max-width: 660px) {
	.page-id-13 footer div section {
		  position: relative;
		  width: 100%;

	}
}


@media only screen and (max-width: 550px) {

	body {
	    width: 100%;
	    font-family: HelveticaRoman, Helvetica, sans-serif;
	    margin: 20px auto;
	    padding: 0 20px;
	    font-size: 100%;
	    background: #ffffff;
	    font-weight: 100;
	}

	.site-branding {
		position: fixed;
		top: 20px;
		left: 20px;
		margin-left: -12px;
		z-index: 10;
	}

	.site-branding img {
		width: 100%;
		max-width: 60px;
	}

	.burger_add {
	    width: 36px;
	    height: 36px;
	    position: fixed;
	    top: 33px;
	    right: 20px;
	    /* border-radius: 4px; */
	    z-index: 160;
	}

	.burger_add span, .burger_add span::before, .burger_add span::after {
	    display: block;
	    width: 12px;
	    height: 36px;
	}

	.projects-grid {
		margin: 88px auto 0;
		gap: 20px;
	}
	
	.projects-grid li{
		  /* max-width: 605px;*/
		  width: calc(100vw - 40px);
		  /* desired width */
		  height: calc(100vw - 40px);
	}
	
	.projects-grid li:before {
	  content: "";
	  display: block;
	  padding-top: 100%;
	  /* initial ratio of 1:1*/
	}
	
	#wrapper{
		width: 100%;
		gap: 20px;
		margin: 88px auto 0;
	}
	
	#wrapper p {
	    width: 100%;
	    margin: 0 auto 20px;
	}

	footer div {
		margin: 20px auto 0;
		width: 100%;
		display: block;
	}
	
	footer div section {
		  position: relative;
		  max-width: none;
		  width: 100%;
		  /* desired width */
		  margin: 0px auto 20px;
	}

	
	#post-11 .entry-content {
		min-height: calc(100vh - 257px);
	}
	
	#post-11 p {
		margin: 0 auto;
		font-size: 18px;
		line-height: 25px;
		letter-spacing: 0.7px;
	}
	
	.page-id-13 iframe {
		width: calc(100vw - 40px);
		height: calc(100vh - 305px);
	}
	
	
	body.home footer div {
		margin: 20px auto 0;
		width: 100%;
		display: block;
	}
	
	body.home #page footer div section {
		  position: relative;
		  max-width: none;
		  width: 100%;
		  /* desired width */
		  margin: 0px auto 20px;
	}
	
	.page-id-13 footer div {
		margin: 20px auto;
		gap: 20px;
	}
	
	.page-id-13 footer div section {
		  position: relative;
		  width: 100%;
	}
	
	.page-id-13 footer section:nth-child(2) {
		display: block;
		
	}


}