/*
Theme Name: J-Smith theme 1.0
Author: Cloudbird Studio
Description: J-Smith.co.uk theme 
Version: 1.0
*/

h1{
    font-weight: 700;
}

.wp-block-post-title{
    font-size:1.4rem;
}

.wp-block-heading a{
    text-decoration: none;
}

@media screen and (max-width: 740px) {
    .wp-block-post-title{
    font-size:10vw;
    }
}

.current-menu-item{
    text-decoration: underline;
    text-underline-offset: 3px;
}

:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover){
    text-underline-offset: 3px;
}

.wp-block-navigation :where(a), .wp-block-navigation :where(a:active), .wp-block-navigation :where(a:focus) {
    text-decoration-line: none!important;
}

.name-mobile a{
	font-weight: 700;
	padding-bottom: 10px;
}

.name-mobile{
    display: none!important;
}

.has-modal-open .name-mobile{
    display: block!important;
}

.wp-element-caption{
    margin-top:0;
}
.wp-element-caption a{
    font-size:.8rem;
}

.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close{
    position: fixed;
    top: 50px;
    right: 30px;
}

.is-menu-open .wp-block-navigation__responsive-container-content{
    
}

.is-menu-open .wp-block-navigation__responsive-container-content{
    align-items:center!important;
    margin-top:30%;
}

.is-menu-open .wp-block-navigation__responsive-container-content ul{
    font-size: var(--wp--preset--font-size--large);
}

.home .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%!important;
    max-height: 100%!important;
}

.home :where(.wp-block-group.wp-block-group-is-layout-constrained) {
    position: static;
}

.home :where(figure) {
    margin: 0 0;
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.container > .text{
    position: absolute;
    opacity: 0;
}


.bgIm{
    opacity: 1;
}

.container, .container img{
      width:100%;
      height: auto;
    max-height:100vh;
	object-fit: cover!important;
    }



 @media (orientation: landscape) {
    .text h1 {
        font-size: max(28vh, 2em, 2rem)!important;
    }
}

@media (orientation: portrait) {
    .text h1 {
        font-size: max(28vw, 2em, 2rem)!important;
    }
}

.fadeOut{
    opacity:0; 
	-webkit-animation:fadeOut ease-in;  
	-moz-animation:fadeOut ease-in;
	animation:fadeOut ease-in;

	-webkit-animation-fill-mode:forwards; 
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:.6s;
	-moz-animation-duration:.6s;
	animation-duration:.6s;
}

@-moz-keyframes fadeOut { 
    from { 
        opacity:1; } 
    to { 
        opacity:0; 
    } 
}
@keyframes fadeOut { 
    from { 
        opacity:1;  
    } to { 
        opacity:0; 
    } 
}


.titleAnim{
    animation: titleAn .6s ease-in-out forwards;
}

@keyframes titleAn {
  0%   { opacity:0;}
  50%  { opacity:0.9;}
  100% { opacity:0;}
}

.fade-in {
	opacity:0; 
	-webkit-animation:fadeIn ease-in;  
	-moz-animation:fadeIn ease-in;
	animation:fadeIn ease-in;

	-webkit-animation-fill-mode:forwards; 
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:.6s;
	-moz-animation-duration:.6s;
	animation-duration:.6s;
}

.fade-in.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}

@-moz-keyframes fadeIn { 
    from { 
        opacity:0; } 
    to { 
        opacity:1; 
    } 
}
@keyframes fadeIn { 
    from { 
        opacity:0;  
    } to { 
        opacity:1; 
    } 
}

#essays{
    padding: 60px 0;
}

.essay_linksGrp{
    padding: 0 .5rem;
}

.commissions{
    align-items: flex-start;
}

@media screen and (max-width: 700px) {
    .commissions{
        flex-wrap: wrap;
    }
}

#cv > .cv-section{
    max-width: 100%;
    display:grid;
    grid-column-gap: 18px;
    grid-template-columns: 0.5fr 2fr 3fr;
    padding: 0;
    margin: 0;
    align-items: flex-start;
}

@media screen and (max-width: 740px) {
    #cv > .cv-section{
        display:block;
    }
    .info{
        padding-bottom: 30px;
    }
}

.date{
    font-style: italic;
    
}

.title{
    font-weight: 700;
}

.footer{
    position: absolute;
    bottom: 0;
    padding-bottom: 1rem;
}

.footer p{
    padding-right:1rem;
}