@charset "utf-8";
/* CSS Document */

/*--Import GLOBAL CSS--*/
@import url('global.css');

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: var(--text-color);
}
.page-background{min-height:100vh; background:url(../images/crumpled-paper-bg.jpg) -25px -50px no-repeat; background-attachment:fixed; background-size: calc(100% + 50px);}
.wrapper{padding:15px; position:relative;}
   
.pages {
    min-height: 100vh;
    border: 4px solid #1a1a1a;
    position: relative;
}

.wrapper:after{position:absolute; left:50%; top:0; width:2px; height:100%; content:""; background-color:rgba(63,63,63,0.15); z-index:0;}
.pages:before{position:absolute; right:calc((100vw / 12) * 2 - 5px); top:-19px; width:2px; height:calc(100% + 38px); content:""; background-color:rgba(63,63,63,0.15); z-index:0;}
.pages:after{position:absolute; right:calc((100vw / 12) * 5 - 3px); top:-19px; width:2px; height:calc(100% + 38px); content:""; background-color:rgba(63,63,63,0.15); z-index:0;}
.wrapper:before{position:absolute; left:calc((100vw / 12) * 2 + 15px); top:0; width:2px; height:100%; content:""; background-color:rgba(63,63,63,0.15); z-index:0;}


.header {
    padding: 30px 0;
    min-height: 350px;
}
.logo{font-style:italic}
.logo:before{position:absolute; left:0; bottom:0; transform:translateY(35%); content:"web mag"; font-weight:900; font-style:italic; color:var(--yellow-color); z-index:0; mix-blend-mode:multiply;}
.contents{padding:50px 0;}
.page-headding, .section{margin-bottom:100px;}
.page-headding:last-child, .section:last-child{margin-bottom:0;}

.yellow-box{background-color:var(--yellow-color); padding:40px 0; mix-blend-mode:multiply; position:relative;}

    .yellow-box:before {
        width: calc(100vw / 12 * 1);
        height: 100%;
        background-color: var(--yellow-color);
        mix-blend-mode: multiply;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-100%);
    }
.intro p{padding:0 15px;}
.section-header{margin-bottom:50px;}
.section-header:last-child{margin-bottom:0;}
.section-header-1 h5:after{position:absolute; left:0; bottom:0; transform:translateY(15px); content:"spirito libero"; font-size:120px; font-weight:900; font-style:italic; color:var(--yellow-color); z-index:0; mix-blend-mode:multiply; font-family: 'Playfair Display', serif;}
.footer{background-color:var(--dark-gray-color); min-height:800px;}
.footer-block{padding:50px 0;}
.footer-block h5{color:var(--yellow-color);}
.footer-block p{color:#fff; margin-bottom:20px;}

.animation-item{opacity:0; transform:translateY(5%); -o-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -khtml-transition: all 0.8s linear; -webkit-transition: all 0.8s linear; -ms-transition: all 0.8s linear; transition: all 0.8s linear;}
.animation-item.visible{opacity:1; transform:translateY(0);}

@media(max-width:1199px){
	.header{min-height:auto;}
	.page-headding, .section{margin-bottom:70px;}
	.yellow-box{padding:30px 0;}
	.footer{min-height:600px;}
	.logo img, .footer-logo img{max-width:100px;}
	.wrapper:before{left:calc((100vw / 12) * 1 + 15px);}
	.pages:before{right:calc((100vw / 12) * 1 - 5px);}
	.section-header-1 h5:after{font-size:80px;}
}
@media(max-width:991px){
	.header{min-height:auto; padding:15px;}
	.yellow-box{padding:30px 0;}
	.footer{min-height:600px;}
	.logo img, .footer-logo img{max-width:100px;}
	.wrapper:before, .wrapper:after, .pages:before, .pages:after{display:none;}
	.yellow-box{padding:20px;}
	.intro p{padding:0;}
	.yellow-box:before{display:none;}
	.contents{padding:30px 15px;}
	.page-headding, .section{margin-bottom:50px;}
	.footer-block{padding:30px 15px;}
	.footer{min-height:auto;}
	.section-header{margin-bottom:30px;}
	.section-header-1 h5:after{font-size:70px;}
}
@media(max-width:767px){

    .page-background {
        min-height: 100vh;
        background: url(../images/crumpled-paper-bg.jpg) -25px -50px no-repeat;
        background-attachment: fixed;
        background-size: auto;
    }
	.page-headding h1 br{display:none;}
	.page-headding, .section{margin-bottom:30px;}
	.section-header-1 h5:after{font-size:50px;}
	.pages{border-width:2px;}
	.logo img, .footer-logo img{max-width:80px;}
}