/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html{
	scroll-behavior: smooth;
}
body{
	margin: 0px;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
}


br{
	display: block;
	margin-bottom: 18px;
}

.no-scroll{
	overflow: hidden;
}

.flex-help{
	width: 70px;
}

.full-height{
	height: 100vh;
}






/* Fonts */
@font-face{
	font-family: 'Neutra Display';
	src: url('media/fonts/Neutra_Display.ttf') format("opentype"), url('media/fonts/neutra_display-webfont.woff') format("woff");
}

@font-face{
	font-family: 'malstyoor';
	src: url('/media/fonts/Malstyoor.OTF');
}


h1{
	margin: 0;
	text-transform: lowercase;
}

h2{
	text-transform: lowercase;
}


p{
	margin-top: 0;
	font-family: 'Neutra Display';
	font-weight: 600;
	font-size: 1.3rem;
	letter-spacing: 1px;
	line-height: 1.5rem;
	text-transform: lowercase;
}

.uppercase{
	text-transform: uppercase;
	font-size: 1.5rem;
	-webkit-text-stroke-width: 1.2px;
 	-webkit-text-stroke-color: white;
}

.aboutbiggerfont{
	font-size: 3.6rem;
	margin-left: 3px;
}

.malstyoor{
	font-family: malstyoor;
	font-weight: 100;
	font-size: 8rem;
	line-height: 100px;
}



.justified{
	text-align: left;
	height: 80vh;
	padding-left:30px;
	padding-right: 30px;
	padding-top: px;
}

.justified-forbidden{
	margin-top:10px; 
	height: 82vh;
	text-align: left;
	padding-left:30px;
	padding-right: 30px;
	padding-top: px;
}

.justified-poem{
	text-align: center;
	height: 80vh;
	padding-left:30px;
	padding-right: 30px;
}

.rlineheight{
	line-height: 1.8rem;
	text-transform: lowercase;
}

#scroll{
	overflow-y:auto
}

.ln-thin{
	padding-left:30px;
	padding-right: 30px;
}


/* links */

a:active {
}

a:hover {
	color: #BDBEBF;
}

a{
	color: #BDBEBF;
	text-decoration: none;
}


/* Navigation */

.header-name{
	font-family: malstyoor;
	font-weight: 100;
	padding-left: 42px;
	font-size:53px;
	margin-top: 1rem;
	letter-spacing: .5px;
}

.header-title{
	font-family: 'Neutra Display'; 
	font-weight:600; 
	font-size: 2rem; 
	letter-spacing: 4.5px;
	margin-left: 20px;
	margin-top: 41px;
}

.navigation{
	list-style: none;
	margin-top: -1px;
}

#navbar{
	padding-left: 77px;
    position: fixed;
    margin-top: 4em;
}
#navbar li{
	font-family: 'Neutra Display'; 
	font-weight:600;
	color: #768180;
	font-size: 30px;
	letter-spacing: 4.8px;
	line-height: 3rem;
	margin-left: 5px;
}

.malstyoor-small{
	font-family: malstyoor;
	font-size: 54px;
	font-weight: 100;
	padding-left: 42px;
	margin-bottom: 0px; 
	margin-top: -16px; 
	letter-spacing: 11.5px;

}

.banner{
	height: 25px;
	width: 100%;
	position: relative;
	z-index: 50 !important;
}

.white{
	color: white;
}

.white a:hover{
	color: #BDBEBF !important;
}

.red{
	color: #ab3e24;
}

.gray{
	color: #777;
}


/*sliding navigation*/


.visible-mobile{
	display:none;
}

.menu-button{
	border: none;
	background: none;
	border-radius: 5px;
	cursor: pointer;
	position: absolute;
	z-index: 999;
	padding: 0px !important;
	margin: 20px;
}

.menu-icon{
	height: 2rem;
	width: 2rem;
	padding: 2px;
	color:black;
}

.menu-icon[name="close-outline"]{
	display: block;

}


.menu-icon[name="menu-outline"]{
	display: none;
}

.open #navbar{
	opacity: 1;
	pointer-events: auto !important;
	visibility: visible !important;
	-webkit-transition: all 0.5s !important;
	-o-transition: all 0.5s !important;
	transition: all 0.5s !important;
	background-color: white;
	padding-right: 40px; 
	height:100%; 
	margin-top: 0px; 
	padding-top: 4em;
	position:fixed;
	z-index: 50;
}

.nav #navbar{
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	        transform: translateX(-100%);
	-webkit-transition: all 0.8s ease-out;
	-o-transition: all 0.8s ease-out;
	transition: all 0.8s ease-out;
}

.nav .menu-icon[name="menu-outline"]{
	display: block;
}

.nav .menu-icon[name="close-outline"]{
	display: none;
}



/* full screen banner */

.fullscreen{
	height: auto;
	min-height:100vh;
	width: 100vw;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}



/* right Pannel */

.right-pannel{
	width: 425px; 
	height: auto; 
	paddingleft: 30px; 
	padding-right:  15px;
	color:white; 
	text-align: center;
	min-height: 100vh;
}

.inner-right-pannel{
	height: auto;
	padding-right: 15px;
	padding-left: 15px;
}

.right-pannel-wide{
	width: 30vw; 
	height: auto; 
	padding: 0px 50px; 
	color:white; 
	text-align: center;
}

.whiteheader{
	font-family: malstyoor;
	color: white;
	font-weight: 100;
	letter-spacing: 5px;
	font-size: 2.6rem;
	margin-bottom: .01rem;
	}

.grayheader{
	font-family: malstyoor;
	color: #7f7f7f;
	font-weight: 200;
	letter-spacing: 5px;
	font-size: 2.6rem;
	margin-bottom: .01rem;
	}

	#top{
		padding-top: 30px;
	}


/*logos page*/
.logo{
	width: 65%;
	height: auto;
	padding-bottom: 20px;
}

.column-33{
	width: 33%;
	padding-top: 21.5vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-animation: three 1.5s linear 1 forwards;
	        animation: three 1.5s linear 1 forwards;
	visibility: hidden;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}

.client-p{
	margin-top: -39px;
	color: #7f7f7f; 
	font-size: 1.5rem; 
	padding: 0px 28px;
	line-height: 1.9rem;
}

.clients-flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.clientmenu{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.logo-left{
	margin-left: 95px;
}

.logo-mid{
	-webkit-animation-delay: 1.5s !important;
	        animation-delay: 1.5s !important;
}

.logo-right{
	margin-right: 95px;
}

/****************************************/
/* Life narratives */
.tanbooks{
	background-image: url(./media/images/tan-books.jpg);
}

.hand{
	background-image: url(./media/images/writing.jpg);
}

.storyblue{
	background-image: url(./media/images/sitting.jpg);
}

.process{
	background-image: url(./media/images/books.jpg);
}

.number{
	font-family: malstyoor;
	color: white;
	font-weight: 100;
	letter-spacing: 5px;
	font-size: 2rem;
	margin-bottom: 0rem;
	margin-top: 39px;
}

.lifepage-main{
	font-family: malstyoor;
	color: white;
	font-weight: 100;
	letter-spacing: 5px;
	font-size: 2.2rem;
	margin-bottom: .01rem;
	line-height: 3rem;
}

.lifepage-body{
	padding: 0px 45px; 
	font-size: 1.6rem; 
	line-height: 3rem; 
	padding-top: 20px; 
	-webkit-animation-delay:1.5s; 
	        animation-delay:1.5s; 
	letter-spacing: 1px;
}

.lifepage-group1{
	width: 44vw; 
	text-align: center; 
	color: white; 
	padding-right: 8vw; 
	padding-bottom: 18vh;
	max-width: 780px;
}

.group-lnpage{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
	height: 100%; 
	width: 100%; 
	-webkit-box-pack: end; 
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}

.quote-speaker{
	text-align: right; 
	margin-top:-10px;
	margin-bottom: -15px;
}


.lifen-arrow{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex; 
	-webkit-box-pack: center; 
	    -ms-flex-pack: center; 
	        justify-content: center; 
	margin-left: 39vw 
	position:relative; 
	z-index: 10; 
	overflow-y: hidden; 
	-webkit-animation-delay:3.2s!important; 
	        animation-delay:3.2s!important; 
	margin-top: -9vw;
}

.left-blue{
	width: 42vw; 
	background-color:rgb(123, 133, 153);
	background-color:rgba(123, 133, 153, .31);
	min-width: 541px;
}

.process-color{
	margin-top: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
	height: auto;
	padding:13px;
	width:68vw; 
	background-color: rgba(251, 253, 255, 0.5);
}

.process-txt{
	width:23vw; 
	padding: 0px; 
	color:#7f7f7f;
}


/****************************************/
/*about page */
.contact-background{
	background-color:rgba(87, 61, 33, .6); 
	padding: 40px 50px; 
	letter-spacing: 4px;
}

.about-width{
	width: 100%;
	display: flex;
	justify-content: center;
}

.package{
	background-image: url(./media/images/package.jpg);
}

.aboutwords{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	-webkit-box-pack: center; 
	    -ms-flex-pack: center; 
	        justify-content: center; 
	height: 100%; 
	width: 100%; 
	text-align: center; 
	-webkit-animation-delay: .3s; 
	        animation-delay: .3s;
}

.contact-font{
	font-family: malstyoor; 
	font-weight: 100; 
	font-size: 2.6rem; 
	letter-spacing: 2px;
	line-height: 90px;
	padding:0px;
	margin: 0px; 
	color: white;
}

.flourish-about{
	width: 30px;
	margin-bottom: 1rem;
	padding-top:10px;
	padding-bottom: -5px;
}

.contact-name{
	font-family: malstyoor; font-weight: 100; font-size: 3.4rem; margin-top:-2px;
}

.contact-writer{
	font-family:'Neutra Display'; font-weight: 600; font-size: 2rem; letter-spacing: 4px; margin-left: 10px;
}

.contact-content{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	-webkit-box-pack: justify; 
	    -ms-flex-pack: justify; 
	        justify-content: space-between; 
	height: 100%; 
	width: 100%; 
	-webkit-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center; 
	text-align: center;
}

.contact-group{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align:center; color:#ab3f25; margin-bottom: -5.9rem; 
}


.contact-top-txt{
	font-family:'Neutra Display'; 
	font-weight: 600; 
	font-size: 2.rem; 
	letter-spacing: 4px; 
	color:#ab3f25; 
	margin-bottom: 1rem; 
	-webkit-animation-delay: .5s!important; 
	        animation-delay: .5s!important;
}

.contact-bottom{
	font-family: malstyoor; font-weight: 100; color:#ab3f25; margin-bottom: 7vh; word-spacing: 5px;
}

.contact-mid-txt{
	font-family:'Neutra Display'; 
	font-weight: 600; 
	font-size: 1.8rem; 
	letter-spacing: 4px; 
	color:#7f8080; 
	margin-bottom: -1rem; 
	-webkit-animation-delay: 1.7s; 
	        animation-delay: 1.7s;
}

.pen{
	background-image: url(./media/images/pen.jpg);
}


/*SHORT STORIES*/

.itsmeordog{
	background-image: url(./media/images/web-v-2.jpg);
}

.kinderimg{
	background-image: url(./media/images/child.jpg);
}

.coffee{
	background-image: url(./media/images/coffee.jpg);
}

.nest{
	background-image: url(./media/images/nest.jpg);
}


/*annoying stuff*/
.annoying1{
	width:100%; 
	height:100%; 
	display:-webkit-box; 
	display:-ms-flexbox; 
	display:flex; 
	-webkit-box-orient:vertical; 
	-webkit-box-direction:normal; 
	    -ms-flex-direction:column; 
	        flex-direction:column; 
	-webkit-box-pack:end; 
	    -ms-flex-pack:end; 
	        justify-content:flex-end;
}

.annoying2{
	position:fixed; 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex; 
	height: 100%;
	width: 75%; 
	-webkit-box-pack: end; 
	    -ms-flex-pack: end; 
	        justify-content: flex-end;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start; 
	margin-top: -69.3vh;
}

.annoying3{
	width: 44vw; 
	text-align: right; 
	color: white; 
	padding-right: 8vw;
}

.scrolldown{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex; 
	-webkit-box-pack: center; 
	    -ms-flex-pack: center; 
	        justify-content: center; 
	justify-items: flex-end; 
	position:relative; 
	z-index: 1; 
	overflow-y: hidden; 
	-webkit-animation-delay:0.5s!important; 
	        animation-delay:0.5s!important; 
	margin-left:-500px; 
	padding-bottom: 100px;
}




.ss-sub{
	font-size: 1.8rem; 
	letter-spacing: 3px;
}


/*novels pages*/

.beyond-beauty{
	background-image: url(./media/images/web-v-1.jpg);
	background-position: left;
}
.wine{
	background-image: url(./media/images/wine.jpg);
}

.novel{
	line-height: 2.2rem;
	font-size: 1.2rem;
}

.flourish{
	width: 5%;
	margin-bottom: 1rem;
}



#novel-thin{
	padding-left: 2rem;
	padding-right: 2rem;
}

#novel-thinner{
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

.rpan-wide{
	width: 475px;
}


/*writer management page */
.writer-management{
	background-image: url(./media/images/letters.jpg);
}


/* index page */
.type{
	background-image: url(./media/images/typewriter.jpg); 
	background-size: cover;
}

.indexarrow{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex; 
	padding-top: 15vh; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	    -ms-flex-direction: column; 
	        flex-direction: column; 
	-webkit-box-align: center; 
	    -ms-flex-align: center; 
	        align-items: center; 
	padding-right: 15vw;
}

.index-arrow{
	width: 25.5px;
	height: 15.5px;
}

.arrow-container{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 90%; position:relative; z-index: 10; overflow-y: hidden; -webkit-animation-delay:4s!important; animation-delay:4s!important;
}

.indexwriter{
	font-size: 2.5rem; 
	color:white; 
	letter-spacing: .7rem;
}



/*animations*/

.feather-ani{
	-webkit-animation: feather 1s ease-out 1;
	        animation: feather 1s ease-out 1;
}
@-webkit-keyframes feather{
	0%{
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
		opacity: 0;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
	}
}
@keyframes feather{
	0%{
		-webkit-transform: translateY(-100%);
		        transform: translateY(-100%);
		opacity: 0;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
	}
}


.name-ani{
	-webkit-animation: name 1s ease-in 1 forwards;
	        animation: name 1s ease-in 1 forwards;
	-webkit-animation-delay: 1.3s;
	        animation-delay: 1.3s;
	visibility: hidden;
}
@-webkit-keyframes name{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}
@keyframes name{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}

.fade{
	-webkit-animation: fade 0.5s linear 1 forwards;
	        animation: fade 0.5s linear 1 forwards;
	visibility: hidden;
	-webkit-animation-delay: 3s;
	        animation-delay: 3s;
}
@-webkit-keyframes fade{
	0%{
		opacity: 0;
		visibility: visible;
	}

	100%{
		opacity: 1;
		visibility: visible;
	}
}
@keyframes fade{
	0%{
		opacity: 0;
		visibility: visible;
	}

	100%{
		opacity: 1;
		visibility: visible;
	}
}

.name-ani2{
	-webkit-animation: name2 1s linear 1 forwards;
	        animation: name2 1s linear 1 forwards;
	-webkit-animation-delay: 2.3s;
	        animation-delay: 2.3s;
	visibility: hidden;
}
@-webkit-keyframes name2{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}
@keyframes name2{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}

.fade{
	-webkit-animation: fade 0.5s linear 1 forwards;
	        animation: fade 0.5s linear 1 forwards;
	visibility: hidden;
	-webkit-animation-delay: 3s;
	        animation-delay: 3s;
}
@keyframes fade{
	0%{
		opacity: 0;
		visibility: visible;
	}

	100%{
		opacity: 1;
		visibility: visible;
	}
}


.contact-mid{
	-webkit-animation: contact-mid 0.8s linear 1 forwards;
	        animation: contact-mid 0.8s linear 1 forwards;
	visibility: hidden;
	-webkit-animation-delay: 0s;
	        animation-delay: 0s;
}
@-webkit-keyframes contact-mid{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}
@keyframes contact-mid{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}


.contact-top{
	-webkit-animation: contact-top 0.8s linear 1 forwards;
	        animation: contact-top 0.8s linear 1 forwards;
	visibility: hidden;
	-webkit-animation-delay: .8s;
	        animation-delay: .8s;
}
@-webkit-keyframes contact-top{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}
@keyframes contact-top{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}
}



@-webkit-keyframes three{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}

}



@keyframes three{
	0%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 0;
		visibility: visible;
	}

	100%{
		-webkit-transform: translateY(0px);
		        transform: translateY(0px);
		opacity: 1;
		visibility: visible;
	}



}

/*
.rpannel{
	animation: right-ani 1s linear 1 forwards;
	animation-delay: .3s;
	visibility: hidden;
}


@keyframes right-ani{
	0%{
		transform: translateX(100%);
		opacity: 0;
		visibility: visible;
	}

	100%{
		transform: translateX(0%);
		opacity: 1;
		visibility: visible;
	}
}

*/









/****************************************/
/*all things */

.margin-top-small{
	margin-top: 15px;
}