/* 
Custom styles for about page 

Version  1.0
Last change: fresh migrate to separate stylesheet from theme styles
*/

/* General and non categoriesed */
.about-big-titles {
	text-transform: capitalize;
	font-size: 3em;
}
.page-template-wp-custom-template-bendie-about .page-section {
	position: relative;
	z-index: 0;
}	
.page-template-wp-custom-template-bendie-about .page-section > div {
	position: relative;
	z-index: 10;
}

/* about page  background imgs */
	.about-background-squiggle {
		position: absolute;
		z-index: 2;	
		opacity: 0.5;
		width: 600px;
		height: auto;
		right: 0px;
		top: 0px;
		transform: rotate(+90deg);
	}
	.about-background-spiral {
		position: absolute;
		z-index: 2;	
		opacity: 0.5;
		width: 500px;
		height: auto;
		left: -120px;
		bottom: -100px;
	}
	.about-background-starflower {
		position: absolute;
		z-index: 2;	
		opacity: 0.5;
		width: 600px;
		height: auto;
		right: 20px;
		top: 0px;
	}
	.about-background-widesquiggle {
		position: absolute;
		z-index: 2;
		opacity: 0.5;
		width: 600px;
		height: auto;
		left: 20px;
		bottom: 0px;
	}
	.about-background-dots {
		position: absolute;
		z-index: 2;	
		opacity: 0.5;
		width: 400px;
		height: auto;
		right: 0px;
		top: 0px;
		transform: rotate(+90deg);
	}
	.about-background-stripes {
		position: absolute;
		z-index: 2;	
		opacity: 1;
		width: 600px;
		height: auto;
		left: 20px;
		top: 0px;
	}
	

/* about doggy section */
	.doggy-section-background {
		position: absolute;
		z-index: 3;
		margin-left: auto;
		margin-right: auto;
		width: 100vw;
		top: -40px;
	}
	.doggy-section-background img {
		width: 100%;
		height: 450px;
		opacity: 0.5;
	}
	.about-cop-doggy-text-container {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 100%;
		z-index: 5;
		margin-top: 50px !important;
		margin-bottom: 50px !important;
	}
	.about-pirate-doggy-text-container {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 100%;
		z-index: 5;
		margin-bottom: 50px !important;
	}
	.about-among-us-container {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 100%;
		z-index: 5;
		margin-bottom: 140px !important;
	}
	.about-cop-doggy-text-container p {
		display: inline-block;
		text-align: center;
		transform: rotate(+5deg);
		font-size: 1.5em !important;
		font-family: lazydog !important;
		line-height: 1.0;
	}
	.about-pirate-doggy-text-container p {
		display: inline-block;
		text-align: center;
		font-size: 1.5em !important;
		transform: rotate(-3deg);
		font-family: lazydog !important;
		line-height: 1.0;
	}
	.about-among-us-container p {
		display: inline-block;
		text-align: center;
		transform: rotate(+3deg);
		font-size: 1.5em !important;
		font-family: lazydog !important;
		line-height: 1.0;
	}
	.about-cop-doggy-text-container .about-cop-doggy {
		position: absolute;
		display: block;
		z-index: 4;
		margin-block-start: 0;
		margin-top: -20px;
		right: 20px;
		top: -10px;
		width: 14vw;
		height: auto;
	}
	.about-pirate-doggy-text-container .about-pirate-doggy {
		position: absolute;
		display: block;
		z-index: 4;
		margin-block-start: 0;
		left: calc( 20vw - 356px );
		top: -90px;
		width: 17vw;
		height: auto;
	}
	.about-among-us-container .about-killer-doggy {
		position: absolute;
		display: block;
		z-index: 4;
		top: -60px;
		right: -100px;
		transform: rotate(-5deg);
		margin-block-start: 0;
		width: 22vw;
		height: auto;
	}
	.about-among-us-container .about-killer-doggy img {
		border-radius: 35%;
	}
	.about-pirate-doggy-text-container .about-pirate-doggy img {
		border-radius: 7%;
	}

/* about me section */
	.about-me-section figure.about-me-img {
		display: flex;
		justify-content: center;
	}
	.about-me-section figure.about-me-img img {
		width: 80%;
		height: auto;
	}
	
	
/* Tablet and transition styles */
@media only screen and (max-width: 1300px) and (min-width: 551px) {
	.page-template-wp-custom-template-bendie-about .about-title-section.page-section {
		min-height: 60vh !important;
		padding-top: 0px !important;
	}
	.page-template-wp-custom-template-bendie-about .page-section {
		padding-top: 30px !important;
		overflow: hidden !important;
	}
	.about-responsive-text-container {
		max-width: 95% !important;
	}
	.about-responsive-text-container h1 {
		font-size: 4.6vw !important;
	}
	.about-responsive-text-container .about-big-titles {
        font-size: 12vw !important;
	}
	/* doggy section */
	.about-cop-doggy-text-container p {
		transform: rotate(-5deg) !important;
	}
	.about-pirate-doggy-text-container p {
		transform: rotate(+4deg) !important;
	}
	.about-among-us-container p {
		transform: rotate(-3deg) !important;
	}
	.about-cop-doggy-text-container .about-cop-doggy {
		width: 16vw !important;
		right: -20px !important;
		top: 0px !important;
	}
	.about-pirate-doggy-text-container .about-pirate-doggy {
		left: -60px !important;
		top: -70px !important;
	}
	.about-me-section div:first-child {
		flex-basis: 62% !important;
	}
	.about-me-section figure {
		flex-basis: 38% !important;
	}
	
	/* background pictures */
	.about-background-squiggle {
        width: calc( 18vw + 200px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-spiral {
		width: calc( 20vw + 300px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-starflower {
		width: calc( 25vw + 180px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-widesquiggle {
		width: calc( 20vw + 300px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-dots {
		width: calc( 25vw + 180px ) !important;
		opacity: 0.3 !important;
		right: 24% !important;
	}
	.about-background-stripes {
		width: calc( 18vw + 300px ) !important;
		opacity: 0.5 !important;
	}
}


/* Overwrites for transition to phone */
@media only screen and (max-width: 980px) and (min-width: 551px) {
	.about-squiggle-container p {
		padding: 0px !important;
	}
	.about-cop-doggy-text-container .about-cop-doggy {
		left: -35px !important;
		right: unset !important;
		top: 50px !important;
		width: calc( 15vw + 20px ) !important;
	}
	.about-pirate-doggy-text-container .about-pirate-doggy {
		right: -45px !important;
		left: unset !important;
        top: 20px !important;
		width: calc(17vw + 20px) !important;
	}
	.about-among-us-container .about-killer-doggy {
		left: -25px !important;
		right: unset !important;
		top: 40px !important;
		width: calc(20vw + 50px) !important;
	}
	.about-cop-doggy-text-container p {
		font-size: 1.3em !important;
		transform: rotate(+5deg) !important;
	}
	.about-pirate-doggy-text-container {
		white-space: nowrap !important;
		overflow: visible !important;
	}
	.about-pirate-doggy-text-container p {
		font-size: 1.3em !important;
		transform: rotate(-4deg) !important;
		white-space: nowrap !important;
		overflow: visible !important;
	}
	.about-among-us-container p {
		font-size: 1.3em !important;
		transform: rotate(+3deg) !important;
	}
} 


/* Phone screen styles */
@media only screen and (max-width: 550px) {
	.page-template-wp-custom-template-bendie-about .about-title-section.page-section {
		min-height: 60vh !important;
		padding-top: 0px !important;
	}
	.page-template-wp-custom-template-bendie-about .page-section {
		padding-top: 30px !important;
		overflow: hidden !important;
	}
	.about-squiggle-container p {
		padding: 0px !important;
	}
	.about-responsive-text-container {
		max-width: 100% !important;
	}
	.about-responsive-text-container h1 {
		font-size: 2em !important;
	}
	.about-responsive-text-container .about-big-titles {
        font-size: 2em !important;
		line-height: 1.0 !important;
	}
	.about-me-section {
		flex-direction: column !important;
	}
	
	/* doggy section */
	.about-cop-doggy-text-container p {
        font-size: 5.5vw !important;
		white-space: nowrap !important;
		overflow: visible !important;
	}
	.about-pirate-doggy-text-container p {
        font-size: 4.8vw !important;
		transform: rotate(-9deg) !important;
		white-space: nowrap !important;
		overflow: visible !important;
	}
	.about-among-us-container p {
        font-size: 5.5vw !important;
		white-space: nowrap !important;
		overflow: visible !important;
	}
	.about-cop-doggy-text-container {
		flex-direction: column !important;
		align-items: center !important;
	}
	.about-cop-doggy-text-container .about-cop-doggy {
		position: relative !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: -10px !important;
		margin-bottom: -50px !important;
		right: unset !important;
		left: unset !important;
		top: unset !important;
		width: 38vw !important;
	}
	.about-pirate-doggy-text-container {
		flex-direction: column-reverse !important;
		align-items: center !important;
	}
	.about-pirate-doggy-text-container .about-pirate-doggy {
		position: relative !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: -10px !important;
		margin-bottom: -45px !important;
		right: unset !important;
		left: unset !important;
		top: unset !important;
		width: 42vw !important;
	}
	.about-among-us-container {
		flex-direction: column !important;
		align-items: center !important;
	}
	.about-among-us-container .about-killer-doggy {
		position: relative !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: -10px !important;
		margin-bottom: -100px !important;
		right: unset !important;
		left: unset !important;
		top: unset !important;
		width: 55vw !important;
	}
	.doggy-section-background {
		height: calc( 150vw + 70px ) !important;
	}
	.doggy-section-background img {
		height: 100% !important;
	}
	
	/* background pictures */
	.about-background-squiggle {
        width: calc( 18vw + 200px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-spiral {
		width: calc( 20vw + 300px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-starflower {
		width: calc( 25vw + 180px ) !important;
		opacity: 0.3 !important;
	}
	.about-background-widesquiggle {
		width: calc( 15vw + 300px ) !important;
		opacity: 0.3 !important;
		left: unset !important;
		right: 0px !important;
		bottom: unset !important;
		top: 0px !important;
	}
	.about-background-dots {
		width: calc( 25vw + 180px ) !important;
		opacity: 0.3 !important;
		right: 0px !important;
	}
	.about-background-stripes {
		width: calc( 22vw + 300px ) !important;
		opacity: 0.5 !important;
	}
}


/* Overwrites for small display and older phones */
@media only screen and (max-width: 380px) {
	
}