/*
Theme Name: Pin Up Candy
Text Domain: pinupcandy
Version: 1.0
Tested up to: 6.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Theme for Pin Up Candy Burlesque Queen
Tags:
Author: Semicolon - Artur Bryłka
Author URI: https://semicolon.pl/
Theme URI: https://semicolon.pl/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/


html,
body {
	width: 100%;
	min-height: 600px;
	padding: 0;
	margin: 0;
}

header{
    z-index: 1;
}

.spinner-wrapper{
    background-color: #C75B7A;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s;
}

.spinner-wrapper .spinner-border{
    width: 6rem; 
    height: 6rem;
}

header h1{
    background: #D7B789;
    background: linear-gradient(to right, #D7B789 30%, #8C7759 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
}

header nav{
    font-family: 'Roboto', sans-serif;
    font-size: .8rem;
    text-transform: uppercase;
}

header .nav-link{
    color: #fefefe;
}

header .nav-link:hover{
    color: #aaaaaa;
}

header .nav-link:before {
    display: block;
    content: "";
    padding-top: 4px;
    border-bottom: 2px solid #d302a6;
    transform: scaleX(0);
    transform-origin: 0 50%;
    bottom: -1.6rem;
    left: 0;
    position: relative;
    width: 100%;
    transition: transform .3s ease-in-out;
}


header .nav-link:hover:before{
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition-delay: .3s;
}

header nav li{
    padding: 0 1rem;
}

header .navbar-brand img{
    max-width: 180px;
}

.transparent-class{
    opacity: 0;
}

.navbar{
    transition: all .5s;
}

.main-menu{
    background-color: rgba(0, 0, 0, 0.801);
    box-shadow: 0 3px 10px #00000079;
}

footer{
	background-color: rgba(0, 0, 0, 0.685);
	color: #fefefe;
	font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
}

footer .social-icons a{
    font-size: 1.5rem;
    padding: .2rem;
    margin-right: 1rem;
}

footer .social-icons a:hover{
    color: #dfc4dade;
}

footer .copy a:hover{
    color: #ececec;
}

footer a{
	color: #fefefe;
	text-decoration: none;
	transition: all .2s ease-in-out;
}

footer nav a{
    text-transform: uppercase;
}

footer nav a:hover{
	color: #ececec;
}

footer nav a:before {
    display: block;
    content: "";
    padding-top: 4px;
    border-bottom: 2px solid #aaaaaa;
    transform: scaleX(0);
    transform-origin: 0 50%;
    bottom: -1.6rem;
    left: 0;
    position: relative;
    width: 100%;
    transition: transform .3s ease-in-out;
}


footer a:hover:before{
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition-delay: .3s;
}

.footer-alignment-div{
    display: flex;
    align-items: center;
}

.footer-menu li{
	list-style-type: none;
    display: inline-block;
    margin-left: 1rem;
}

.footer-menu ul{
	padding: 0;
}

/* Form */

.wpcf7-form input, 
.wpcf7-form textarea{
    background-color: #00000098;
    border-radius: 0;
    border: none;
    outline: none !important;
    padding: 1rem;
    resize: none;
}

.wpcf7-form input:focus, 
.wpcf7-form textarea:focus{
    background-color: #000000;
    outline: none !important;
}

.wpcf7-form input[type="submit"]{
    background-color: #dfc4dade;
    padding: 1rem 4rem;
    border: 2px solid #000000;
}

.wpcf7-form input[type="submit"]:hover{
    background-color: #000000;
    padding: 1rem 4rem;
    color: #fefefe;
}

/* To top button */

.to-top {
    position: fixed;
    bottom: 40px;
    right: 1px;
    color: rgb(210, 125, 149);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
    opacity: 0;
    pointer-events: none;
    transition: all .4s;
}

.to-top:hover{
    color: rgb(193, 70, 105);
}

.to-top-text {
    font-size: .8rem;
}

.to-top-icon {
    font-size: 2rem !important;
}

.to-top.active {
    bottom: 56px;
    pointer-events: auto;
    opacity: 1;
}

/* Curtain */

#starter {
	z-index: 1;
	position: absolute;
	top: 0%;
	left: 50%;
	width: 300px;
	height: 50px;
	margin-top: -25px;
	margin-left: -150px;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 2em;
	font-weight: 600;
	cursor: pointer;
}

#scene {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin-top: 0;
	margin-left: 0;
	background-color: rgb(0,0,0);
}

#curtain {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

#curtain .left,
#curtain .right {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	filter: brightness(180%);
	background-image: url("img/curtain.svg");
	background-size: cover;
	background-repeat: no-repeat;
}

#curtain .left {
	left: 0;
	transform-origin: top right;
}
#curtain .right {
	left: 50%;
	transform-origin: top left;
}

.ground {
	position: absolute;
	left: 50%;
	top: 133%;
	width: 10000px;
	height: 10000px;
	margin-left: -5000px;
	border-radius: 100%;
	box-shadow: 0 0 100px 100px white;
}

/* **********
	opening
********** */

#scene.expand {
	width: 140%;
	left: -20%;
	margin-left: 0;
	background-color: rgb(32,32,32);
	box-shadow: 0 0 0 0 white inset;
	animation-fill-mode: forwards;
	animation-name: expand-scene-horizontaly;
	animation-duration: 2.5s, 1.5s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-delay: 0s, 2.5s;
	animation-iteration-count: 1, 1;
	animation-direction: normal, normal;
}

#curtain.open .left,
#curtain.open .right {
	filter: brightness(100%);
}
#curtain.open .left {
	animation-fill-mode: forwards;
	animation-name: curtain-opening, left-curtain-opening;
	animation-duration: 2s, 4s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-delay: 0s, 0s;
	animation-iteration-count: 1, 1;
	animation-direction: normal, normal;
}
#curtain.open .right {
	animation-fill-mode: forwards;
	animation-name: curtain-opening, right-curtain-opening;
	animation-duration: 2s, 4s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-delay: 0s, 0s;
	animation-iteration-count: 1, 1;
	animation-direction: normal, normal;
}

#scene.expand .ground {
	animation-fill-mode: forwards;
	animation-name: ground-rising;
	animation-duration: 6s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
}

#scene.expand h1 {
	animation-fill-mode: forwards;
	animation-name: text-zoom, text-fade-in, text-glowing;
	animation-duration: 5s, 1s, 1s;
	animation-timing-function: ease-out, ease-in-out, ease-in-out;
	animation-delay: 3s, 3s, 0s;
	animation-iteration-count: 1, 1, infinite;
	animation-direction: normal, normal, alternate;
}

.fade-out {
	animation-fill-mode: forwards;
	animation-name: fade-out;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
}

/* **********
	animations
********** */

@keyframes expand-scene-horizontaly { /* 2.5
	s */
	from {
		width: 1200px;
		left: 50%;
		margin-left: -600px;
		background-color: rgb(0,0,0);
		box-shadow: 0 0 0 2px white inset;
	}
	to {
		width: 140%;
		left: -20%;
		margin-left: 0;
		background-color: rgb(32,32,32);
		box-shadow: 0 0 0 0 white inset;
	}
}

@keyframes curtain-opening { /* 2s */
	from { filter: brightness(180%); }
	to { filter: brightness(100%); }
}

@keyframes left-curtain-opening { /* 4s */
	from { transform: translate(0) rotate(0) scale(1,1); }
	to { transform: translate(-100%) rotate(20deg) scale(0,2); }
}

@keyframes right-curtain-opening { /* 4s */
	from { transform: translate(0) rotate(0) scale(1,1); }
	to { transform: translate(100%) rotate(-20deg) scale(0,2); }
}

@keyframes ground-rising {
	from { top: 133%; }
	to { top: 105%; }
}

@keyframes text-zoom {
	from { transform: scale(0.75); }
	to { transform: scale(1); }
}

@keyframes text-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes text-glowing {
	from { text-shadow: 0 0 10px white; }
	to { text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px dodgerblue; }
}

@keyframes fade-out {
	from { color: black; opacity: 1; }
	to { color: white; opacity: 0; }
}


/* End of curtain */

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

    header nav li{
        background-color: #36221c8e;
    }

}

/* Blog */

.blog-main-page{
	background-color: #fefefe;
	margin: 2rem 0;
	max-width: 100% !important;
	font-family: 'Roboto', sans-serif;
}

.blog-main-page h2{
	font-size: 1.4rem;
	font-weight: 500;
}

.blog-main-page h3{
	font-size: 1.4rem;
	font-weight: 400;
	color: #9E0C0C;
}

.blog-main-page h4{
	font-size: 1rem;
	font-weight: 400;
}

.blog-main-page a{
	color: #1c1c1c;
	text-decoration: none;
	transition: all .2s ease-in-out;
}

.blog-main-page a:hover{
	color: #d302a6;
}

.posts-list{
	padding: 5% 15% !important;
}

.post-thumbnail img{
	max-height: 200px !important;
    object-fit: cover;
}

.author-photo img{
	border-radius: 50%;
}

.latest-post{
	padding: 20% 15% 3% 15% !important;
	color: #fefefe;
}

.latest-post a{
	color: #fefefe;
}

.blog-post-page{
	background-color: #fefefe;
	margin: 2rem 0;
	max-width: 100% !important;
	font-family: 'Roboto', sans-serif;
}

.post-area{
	padding: 3% 15% 3% 15% !important;
}


.post-area .post-thumbnail img{
	max-height: 600px !important;
    object-fit: cover;
}

.comments-area{
	padding: 3% 15% 3% 15% !important;
	font-family: 'Roboto', sans-serif;
}

.comments-area a{
	color: #00000090;
}

hr.commnet-hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

ol.comment-list{
	padding-left: 0 !important;
}

ol.comment-list li{
	list-style-type: none;
	margin-bottom: 1rem;
}

ol.comment-list li .comment-body{
	border-radius: 10px;
	padding: 2%;
	-webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 0.15);
	-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 0.15);
	box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 0.15);
}

ol.children{
	margin-top: 1rem;
}

footer.comment-meta{
	background-color: transparent;
}


.comment-author img{
	border-radius: 50%;
	margin-right: .6rem;;
}

.comment-content{
	margin-top: 1rem;
}

.comment-form textarea,input{
	display: block;
	border: 1px solid #00000032;
	border-radius: 10px;
	width: 100%;
	padding: .5rem 1rem;
}

.comment-form input[type=checkbox]{
	display: inline-block;
	width: 1rem;
}

.comment-form input[type=submit]{
	border: none;
    background-color: transparent;
    color: #00000090;
    transition: all .2s ease-in-out;
}

.comment-form input[type=submit]:hover{
	color: #d302a6;
}

.navigation .pagination{
	margin-top: 2rem;
	padding: 0;
}

.nav-links{
	width: 100%;
    text-align: end;
}