/* CSS Document */

/*==================================================

top-contents
=================================================*/

.top-image {
	width: 100%;
    max-width: 100%;
    position: relative;
    background: linear-gradient(90deg, #e62e52, #d10e1d);
    padding-bottom: 120px;
}
.top-image.bl {
	width: 100%;
    max-width: 100%;
    position: relative;
    background: linear-gradient(90deg, #00bace, #008aa7);
}
.top-image.db {
	width: 100%;
    max-width: 100%;
    position: relative;
    background: linear-gradient(90deg, #0052c4, #001f99);
}
.top-image img {
    width: 100%;
	max-width: 100%;
	height: auto;
}
.top-image::before {
    content: " ";
	display: block;
    position: absolute;
    width: 100%;
    height: 20%;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 1;
}
.top-image::after {
    content: " ";
	display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .2;
    mix-blend-mode: screen;
    background-image: url("../../images/efect_2.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: auto;
    top: 0;
    left: 0;
    z-index: 1;
    animation: blink 2s ease-in-out infinite 0s alternate;
}

@keyframes blink {
    0% {
        opacity: .1;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: .1;
    }
}

.top-image .mv {
    width: 90%;
    max-width: 1500px;
    position: relative;
    margin: 0 auto;
    z-index: 2;
}
.top-image .txt {
    width: 100%;
    position: absolute;
    color: #FFF;
    left: 0;
    bottom: 0;
    padding: 0 5% 6%;
    z-index: 2;
}
.top-image .txt h1 {
    color: #e21631;
    text-align: right;
    font-size: clamp(3rem, 10vw, 16rem);
    line-height: 100%;
}
.top-image.lf .txt h1 {
    text-align: left;
}
.top-image.bl .txt h1 {
    color: #35cce3;
    text-align: left;
}
.top-image .txt h1 span {
    display: block;
    font-size: 20%;
    line-height: 100%;
    margin-bottom: .5em;
}
.top-image .photo {
    background-color: #fff;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

.section-title {
    width: 100%;
    text-align: center;
    letter-spacing: .2em;
    color: #00a6bf;
    position: relative;
}
.section-title.rd {
    color: #e21631;
}
.section-title span {
    position: relative;
    display: inline-block;
    background-color: #fff;
    padding: 0 .8em;
    z-index: 2;
}
.section-title::before {
    content: " ";
	display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #00a6bf;
    top: 50%;
	left: 0;
	-webkit-transform: translate(0, -50%); 
	transform: translate(0, -50%);
    z-index: 1;
}
.section-title.rd::before {
    background-color: #e21631;
}


.block-title {
    width: 100%;
    text-align: center;
    color: #00a6bf;
    position: relative;
    border: 4px solid #00a6bf;
    border-radius: 60px;
    padding: .3em 1em;
}
.block-title.rd {
    color: #e21631;
    border: 4px solid #e21631;
}


@media only screen and (min-width:1px) and (max-width: 768px) {
	
	.top-image {
        width: 100%;
        margin-top: 80px;
        padding-bottom: 10%;
	}
    .top-image::before {
        content: " ";
        display: block;
        position: absolute;
        width: 100%;
        height: 20%;
        background-color: #fff;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .top-image::after {
        background-position: left bottom;
        background-repeat: repeat-x;
        background-size: 200%;
        z-index: 1;
    }
    .top-image .mv {
        display: flex;
        flex-flow: column-reverse wrap;
    }
    .top-image .txt {
        position: relative;
        padding: 6% 3% 0;
        z-index: 2;
    }
    .top-image .txt h1 {
        color: #FFF;
        font-size: clamp(5rem, 10vw, 16rem);
        text-align: left;
    }
    .top-image .txt h1 span {
        font-size: 20%;
    }
    .top-image.bl .txt h1 {
        color: #FFF;
    }
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	

}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	

}