* {
    /* outline: 1px solid #000; */
}

.container {
    width: 74%;
    margin: auto;
}

/* ---------------------Header------------------------- */
header {
    background-color: #535151;
    padding: 25px 0 34px 0;
}

.index {
    font-size: 0;
}

.index__logo {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
}

.index__logo>img {
    width: 100%;
}

.index__menu {
    display: inline-block;
    vertical-align: middle;
    width: 76%;
}

.index__menu>li {
    display: inline-block;
    margin-left: 10%;
}

.index__menu a {
    font-size: 0.95rem;
    font-family: Raleway;
    color: #d3d2d2;
}

.index__menu a:hover {
    color: #fff;
}

.index__checkout {
    display: inline-block;
    vertical-align: middle;
    width: 4%;
}

.index__checkout>img {
    width: 100%;
}

/* ----------------------main-------------------------- */

/*-------------banner-------------*/

.banner {
    height: 90vh;
    background-image: url('../images/banner.png');
    background-size: cover;
    background-position: top center;
    position: relative;
}

.banner__placecard {
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 60%;    
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 30px 44px;
}

.banner__title { 
    font-size: 3.5rem;
    color: #2f3032;
    font-family: 'Times New Roman';
    font-weight: 600;
    letter-spacing: 0.1rem;
    margin-bottom: 15px;
}

.banner__action {
    font-family: Raleway;
    font-size: 1.2rem;
    font-weight: lighter; 
    background-color: #2f3032;
    color: #fcfafa;
    padding: 10px 63px;
    border: 0;
}

.banner__action:active{
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0,35);
}

.banner-postscript {
    background-color: #e3e3e3;
    font-size: 0.8rem;
    font-family: Raleway;
    letter-spacing: 0.2rem;
    color: #3b3c3f;
    text-align: center;
    padding: 15px 0;
}

/*-------------stage-------------*/

.stage__placecard {
    text-align: center;
    padding: 50px 0;
}

.stage__title {
    font-family: "Times New Roman";
    font-size: 2.4rem;
    letter-spacing: 0.5rem;
    margin: 30px 0;
    color: #3d3e3f;
}

.stage__placecard>hr {
    width: 30px;
}

.stage__description {
    font-family: Raleway;
    font-weight: 100;
    font-size: 1.2rem;
    margin: 30px 0;
    letter-spacing: 0.3rem;
    color: #3d3e3f;
}

.stage__showcase {
    padding-bottom: 82px;
    font-size: 0;
    text-align: center;
}

.stage__production {
    display: inline-block;
    margin: 0 0.73%;
    width: 31.87%;
    overflow: hidden;
    /* background-color: #303132; */
    vertical-align: top;
}

.stage__showcase>.left {
    background-image: url(../images/origin/p1.png);
    background-size: cover;
    background-position: top center;
    position: relative;
}

.stage__showcase>.center {
    background-image: url(../images/origin/p2.png);
    background-size: cover;
    background-position: top center;
}

.stage__showcase>.right {
    background-image: url(../images/origin/p3.png);
    background-size: cover;
    background-position: top center;
    position: relative;
}

.stage__production>img {
    width: 100%;
    opacity: 0;
}

.stage__production p {
    font-size: 16px;
    width: 100%;
    color: #fff;
    font-family: raleway;
    text-align: center;
    padding: 15px 0;
    background-color: #303132;
    position: absolute;
    bottom: 0;
}

/* ---------------------footer------------------------- */

footer {
    background-color: #535151;
    font-size: 0;
    padding: 7% 0;
}

footer>.container {
    text-align: center;
}

.footer__link {
    display: inline-block;
    text-align: center;
    width: 15%;
    /* margin-left: 5%; */
}

.footer__icon {
    display: inline-block;
    margin: 0 6%;
}

.footer__icon .fab {
    font-size: 1.2rem;
    color: #f2f2f2;
}

.footer__title {
    font-family: raleway;
    color: #d3d2d2;
    font-size: .8rem;
    letter-spacing: 0.09rem;
    margin-bottom: 6px;
}

.footer__join {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 31.87%;
    margin-left: 14%;
    margin-right: 13%;
} 

.footer__join::after {
    content:"";
    clear: right;
}

.footer__input-email {
    vertical-align: top;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    background-color: transparent;
    color: #f2f2f2;
    border: 1px solid #f2f2f2;
    margin-bottom: 5px;
    padding-left: 2px;
}

.footer__input-email::placeholder {
    color: #f2f2f2;
    font-family: raleway;
    /* padding-left: 2px; */
}

.footer__submit {
    float: right;
    font-family: raleway;
    font-size: 0.65rem;
    background-color: #d3d3d3;
    color: #535151;
    padding: 5px 10px;
}

.footer__join>div {
    background-color: pink;
    font-size: 16px;
}

.footer__contact {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 16%;
    /* margin-right: 5%;  */
}

.footer__info {
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    font-family: raleway;
    color: #f2f2f2;
    margin-bottom: 6px;
}

.footer__copyright {
    font-size: 0.85rem;
    color: #d3d2d2;
    letter-spacing: 0.07rem;
    font-family: raleway;
    text-align: center;
    margin-top: 7%;
}