/*
Theme Name: Roseta Child
Description: Roseta Child Theme
Author: Alexist Ong
Template: roseta
Version: 1.0.0
Text Domain: roseta-child
*/

/* BEGIN CUSTOM FONT FAMILY */
@font-face {
	font-family: 'Big Caslon';
	src: url('resources/fonts/SVN-BigCaslon-Regular.ttf') format('TrueType'), url('resources/fonts/SVN-BigCaslon-Regular.otf') format('OpenType');	
	font-weight: 400;
	font-display: swap;
} 

@font-face {
	font-family: 'Big Caslon';
	src: url('resources/fonts/SVN-BigCaslon-Bold.ttf') format('TrueType'), url('resources/fonts/SVN-BigCaslon-Bold.otf') format('OpenType');
	font-weight: 700;
	font-display: swap;	
} 

@font-face {
	font-family: 'Big Caslon';
	src: url('resources/fonts/SVN-BigCaslon-Black.ttf') format('TrueType'), url('resources/fonts/SVN-BigCaslon-Black.otf') format('OpenType');
	font-weight: 900;
	font-display: swap;	
}

@font-face {
	font-family: 'Big Caslon';
	src: url('resources/fonts/SVN-BigCaslon-Italic.ttf') format('TrueType'), url('resources/fonts/SVN-BigCaslon-Italic.otf') format('OpenType');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Big Caslon';
	src: url('resources/fonts/SVN-BigCaslon-BoldItalic.ttf') format('TrueType'), url('resources/fonts/SVN-BigCaslon-BoldItalic.otf') format('OpenType');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Big Caslon';
	src: url('resources/fonts/SVN-BigCaslon-BlackItalic.ttf') format('TrueType'), url('resources/fonts/SVN-BigCaslon-BlackItalic.otf') format('OpenType');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}
/* END CUSTOM FONT FAMILY */

/* BEGIN GENERAL BUTTON CORRECTION */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
/* END GENERAL BUTTON CORRECTION */

/* BEGIN FIXING SAFARI INPUT STYLING */
input[type="search"] {
  -webkit-appearance: none;
}
/* END FIXING SAFARI INPUT STYLING */

/* BEGIN CHANGING ACTIVE HEADER MENU COLOR */
#access > div > ul > li.current_page_item > a {
    font-weight: 600;    
}

#access > div > ul > li.current_page_item > a > span:before {
    width: 100%;
}
/* END CHANGING ACTIVE HEADER MENU COLOR */

/* BEGIN OVERRIDING ARTICLE OVERFLOW HIDDEN */
article.hentry {
    overflow: visible;
}
/* END OVERRIDING ARTICLE OVERFLOW HIDDEN */

/* BEGIN OVERRIDING LINK COLOR */
#container a {
    color: #8e7467;
}

#container a:hover {
    color: inherit;
}
/* END OVERRIDING LINK COLOR */

/* BEGIN ADDING BOX SHADOW TO FIXED HEADER */
.site-header-bottom.header-fixed .site-header-bottom-fixed {
	box-shadow: 0 0 10px 0 rgba(34, 36, 38, 0.15);
}
/* END ADDING BOX SHADOW TO FIXED HEADER */

/* BEGIN OVERRDING FOOTER STYLE */
.footermenu,
.footermenu ul li {
    float: none;
}

#footer {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
}

#footer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}

#footer a {
    color: inherit;
}

#site-copyright {
    float: none;
    max-width: none;
    font-style: normal;
}

#colophon .widget-container {
    padding-bottom: 0;
}

.cryout #colophon {
    padding: 1em 0;
}

#colophon, #footer {
    font-size: 0.9em;
}

@media only screen and (max-width: 640px) {
    .cryout #colophon {
        padding: 0;
    }
}
/* END OVERRDING FOOTER STYLE */

/* BEGIN MOBILE NAVIGATION MENU CHANGES */
nav#mobile-menu #mobile-nav a {
    color: inherit;
}

nav#mobile-menu #bmobile {
    padding-right: 4.5em;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

nav#mobile-menu ul li {
	line-height: 3;
}

nav#mobile-menu ul li a.toggled-on {
	border-bottom: none;
}

nav#mobile-menu #mobile-nav a {
    font-size: 0.95rem;
}

#mobile-menu > div {
    width: auto;
    max-width: none;
}

nav#mobile-menu .sub-menu, 
nav#mobile-menu .children {
	padding-left: 20px;
	padding-bottom: 10px;
}

#mobile-menu .searchform input.s {
	border-left: none;
	border-right: none;
}
/* END MOBILE NAVIGATION MENU CHANGES */

/* BEGIN INTRO STYLING */
#intro {
    margin-top: 40px;
    margin-bottom: 180px;
    position: relative;
    z-index: 100;
}

#intro_primary_thumbnail,
#intro_secondary_thumbnail {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#intro_primary_thumbnail {
    width: 60%;
    max-width: 700px;
    height: 100%;
    margin-bottom: 60px;
    position: absolute;
    z-index: 50;
}

#intro_secondary_thumbnail {
    width: 30%;
    max-width: 700px;
    height: auto;
    position: absolute;
    z-index: 30;
    top: 180px;
    right: 0;
    bottom: -140px;
}

#intro_primary_image {
    display: none;
}

#intro .page_content_wrap {
    float: right;
    width: 60%;
    max-width: 700px;
    padding: 60px;
    margin: 100px 30px -100px 0;
    background: #fff;
    position: relative;
    z-index: 100;
}

#intro .page_content_wrap .page_content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

#intro .page_content_wrap .page_content h1:after {
    content: "";
    display: block;
    height: 2px;
    width: 200px;
    background: #8e7467;
    margin: 0.3em auto 0;
}

@media only screen and (max-width: 992px) {
    #intro {
        margin-top: 10px;
        margin-bottom: 30px;
    }

    #intro_primary_thumbnail,
    #intro_secondary_thumbnail {
        display: none;
    }
    
    #intro_primary_image {
        display: block;
    }
    
    #intro .page_content_wrap {
        float: none;
        width: auto;
        max-width: none;
        margin: 0 auto;
        padding: 0;
    }
    
    #intro .page_content_wrap .page_content {
        max-width: none;
    }
}
/* END INTRO STYLING */

/* BEGIN HEADER IMAGE CHANGES */
#masthead .header-image {
    background-attachment: scroll;
}
/* END HEADER IMAGE CHANGES */

/* BEGIN POST NAVIGATION COLOR */
#nav-fixed#nav-fixed span {
    color: inherit;
}
/* END POST NAVIGATION COLOR */

/* BEGIN FIXING OVERFLOW NAVIGATION MENU ON MOBILE LANDSCAPE */
#prime_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.site-header-inside {
    /*overflow: hidden;
    overflow-x: auto;*/
	/* Have to revert lines above because this will hide submenu */
}
/* END FIXING OVERFLOW NAVIGATION MENU ON MOBILE LANDSCAPE */

/* BEGIN FIXING CROPPED LOGO ON STICKY MENU ON MOBILE */
@media only screen and (max-width: 800px) {
	.mobile-fixed .site-header-bottom.header-fixed .site-header-inside img.custom-logo {
		max-height: 70px;
	}	
}
/* END FIXING CROPPED LOGO ON STICKY MENU ON MOBILE */

@media (max-width: 800px) {
	.cryout #top-section-menu {
		display: none;
	}
}


/* BEGIN SCROLL DOWN BUTTON */
/* https://gist.github.com/CodeMyUI/cd21b4bcb08a1dfdba8213d982e0893d */
#roseta-child-scroll-bottom-container {
    display: none;
    position: absolute;
    z-index: 12;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
}

#roseta-child-scroll-bottom-container p {
    margin-top: 15px;
    font-size: 0.9em;
    color: #fff;
    -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
            animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
}

#roseta-child-scroll-bottom-container .mouse {
    display: block;
    margin: 0 auto;
    background: #4e5559 -o-linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
    background: #4e5559 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #ffffff), to(#ffffff));
    background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
    position: relative;
    width: 26px;
    height: 44px;
    border-radius: 50px;
    background-size: 100% 200%;
    -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}

#roseta-child-scroll-bottom-container .mouse:before, 
#roseta-child-scroll-bottom-container .mouse:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

#roseta-child-scroll-bottom-container .mouse:before {
    width: 22px;
    height: 40px;
    background-color: #222a30;
    border-radius: 50px;
}

#roseta-child-scroll-bottom-container .mouse:after {
    background-color: #fff;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    -webkit-animation: trackBallSlide 5s linear infinite;
    animation: trackBallSlide 5s linear infinite;
}

@-webkit-keyframes colorSlide {
    0% {
        background-position: 0% 100%;
    }
    20% {
        background-position: 0% 0%;
    }
    21% {
        background-color: #4e5559;
    }
    29.99% {
        background-color: #fff;
        background-position: 0% 0%;
    }
    30% {
        background-color: #4e5559;
        background-position: 0% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    51% {
        background-color: #4e5559;
    }
    59% {
        background-color: #fff;
        background-position: 0% 0%;
    }
    60% {
        background-color: #4e5559;
        background-position: 0% 100%;
    }
    80% {
        background-position: 0% 0%;
    }
    81% {
        background-color: #4e5559;
    }
    90%, 100% {
        background-color: #fff;
    }
}

@keyframes colorSlide {
    0% {
        background-position: 0% 100%;
    }
    20% {
        background-position: 0% 0%;
    }
    21% {
        background-color: #4e5559;
    }
    29.99% {
        background-color: #fff;
        background-position: 0% 0%;
    }
    30% {
        background-color: #4e5559;
        background-position: 0% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    51% {
        background-color: #4e5559;
    }
    59% {
        background-color: #fff;
        background-position: 0% 0%;
    }
    60% {
        background-color: #4e5559;
        background-position: 0% 100%;
    }
    80% {
        background-position: 0% 0%;
    }
    81% {
        background-color: #4e5559;
    }
    90%, 100% {
        background-color: #fff;
    }
}

@-webkit-keyframes trackBallSlide {
    0% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    6% {
        opacity: 1;
        -webkit-transform: scale(0.9) translateY(3px);
        transform: scale(0.9) translateY(3px);
    }
    14% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(20px);
        transform: scale(0.4) translateY(20px);
    }
    15%, 19% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(-10px);
        transform: scale(0.4) translateY(-10px);
    }
    28%, 29.99% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    36% {
        opacity: 1;
        -webkit-transform: scale(0.9) translateY(3px);
        transform: scale(0.9) translateY(3px);
    }
    44% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(20px);
        transform: scale(0.4) translateY(20px);
    }
    45%, 49% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(-10px);
        transform: scale(0.4) translateY(-10px);
    }
    58%, 59.99% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    66% {
        opacity: 1;
        -webkit-transform: scale(0.9) translateY(3px);
        transform: scale(0.9) translateY(3px);
    }
    74% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(20px);
        transform: scale(0.4) translateY(20px);
    }
    75%, 79% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(-10px);
        transform: scale(0.4) translateY(-10px);
    }
    88%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
}

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    6% {
        opacity: 1;
        -webkit-transform: scale(0.9) translateY(3px);
        transform: scale(0.9) translateY(3px);
    }
    14% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(20px);
        transform: scale(0.4) translateY(20px);
    }
    15%, 19% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(-10px);
        transform: scale(0.4) translateY(-10px);
    }
    28%, 29.99% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    30% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    36% {
        opacity: 1;
        -webkit-transform: scale(0.9) translateY(3px);
        transform: scale(0.9) translateY(3px);
    }
    44% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(20px);
        transform: scale(0.4) translateY(20px);
    }
    45%, 49% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(-10px);
        transform: scale(0.4) translateY(-10px);
    }
    58%, 59.99% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
    66% {
        opacity: 1;
        -webkit-transform: scale(0.9) translateY(3px);
        transform: scale(0.9) translateY(3px);
    }
    74% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(20px);
        transform: scale(0.4) translateY(20px);
    }
    75%, 79% {
        opacity: 0;
        -webkit-transform: scale(0.4) translateY(-10px);
        transform: scale(0.4) translateY(-10px);
    }
    88%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(-10px);
        transform: scale(1) translateY(-10px);
    }
}

@-webkit-keyframes nudgeMouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    60% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    80% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes nudgeMouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    60% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    80% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes nudgeText {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    60% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes nudgeText {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    30% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    60% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    80% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes colorText {
    21% {
        color: #4e5559;
    }
    30% {
        color: #fff;
    }
    51% {
        color: #4e5559;
    }
    60% {
        color: #fff;
    }
    81% {
        color: #4e5559;
    }
    90% {
        color: #fff;
    }
}

@keyframes colorText {
    21% {
        color: #4e5559;
    }
    30% {
        color: #fff;
    }
    51% {
        color: #4e5559;
    }
    60% {
        color: #fff;
    }
    81% {
        color: #4e5559;
    }
    90% {
        color: #fff;
    }
}
/* END SCROLL DOWN BUTTON */

@media only screen and (max-width: 1152px) {
    a#logo > img {
        -webkit-filter: invert(100%);
                filter: invert(100%);
    }
    
    .roseta-over-menu.roseta-over-menu #site-title a, 
    .roseta-over-menu.roseta-over-menu #access > div > ul > li, 
    .roseta-over-menu.roseta-over-menu #access > div > ul > li > a, 
    .roseta-over-menu.roseta-over-menu #sheader.socials a::before,
    #nav-toggle {
        color: #888;
    }
    
    #top-section-menu:empty {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    #header-page-title .pretitle-meta:empty,
    #header-page-title .aftertitle-meta:empty,
    #header-page-title .byline:empty {
        display: none;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    #roseta-child-scroll-bottom-container {
        display: block;
    }
}

@media only screen and (max-width: 800px) {
    .cryout #nav-toggle {
        display: block;
        padding-left: 45px;
    }
    
    .roseta-totop-disabled .cryout .footer-inside #toTop {
        display: none;
    }
	
	img.custom-logo {
		max-height: 100px;
	}
}

@media only screen and (max-width: 640px) {
	.roseta-landing-page .lp-text-inside {
		padding-top: 2.5em;
	}
	
    #header-page-title#header-page-title {
        padding-left: 0;
        padding-right: 0;
    }
    
    #header-page-title#header-page-title .entry-title {
        font-size: 8vw;
    }
}

@media only screen and (max-width: 560px) {
    .site-header-top .site-header-inside {
        min-height: 75px;
    }
    
    .roseta-cropped-headerimage.roseta-cropped-headerimage #masthead #header-image-main-inside {
        height: 300px;
		max-height: 33vh;
    }
    
    .roseta-over-menu.roseta-over-menu #header-page-title {
        padding-top: 0;
    }
}