body {
    background: rgb(255, 250, 234);
    color: #000;

}

a {
    color: #000;
    text-decoration: none;
}


.Btn {
    width: 150px;
    height: 50px;
    background-color: transparent;
    color: rgb(0, 0, 0);
    font-weight: bold;
    border-width: 2px;
    border-color: rgb(195, 183, 216);
    border-radius: 20px;
    transition: all 0.3s;
}

.Btn:hover {
    transform: translateY(-10px);
    background-color: rgb(195, 183, 216);
}

.Btn::after {
    transform: translateY(0);
}


#poster {

    width: 890px;

    margin: 30px auto;

    font-family: "newcomen-1", "newcomen-2";

}

#poster h1 {

    color: white;

    background: url(https://cdn.pixabay.com/photo/2012/11/21/10/37/flower-66809_1280.jpg) 20px -150px no-repeat;

    font-size: 180px;

    line-height: 0.9;

    text-align: center;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    letter-spacing: -8px;

    -webkit-transition: all 2.5s;

    padding-bottom: 40px;

}

.step-one #poster h1 {

    padding-top: 120px;

}

#poster h1 span {

    -webkit-transition: all 2.5s;

    -moz-transition: all 2.5s;

    -o-transition: all 2.5s;

}

#poster h1 span.char1 {
    margin-left: -1450px;
}

#poster h1 span.char2 {
    margin-left: 200px;
}

#poster h1 span.char3 {
    margin-left: 200px;
}

#poster h1 span.char5 {
    margin-left: 1450px;
}

#poster h1 span.char6 {
    margin-left: 200px;
}

#poster h1 span.char7 {
    margin-left: 200px;
}

#poster h1 span.char8 {
    margin-left: 200px;
}

#poster h1 span.char9 {
    margin-left: 200px;
}

.step-one #poster h1 span {
    margin: 0;
}



#poster p {
    text-align: center;
    font-size: 40px;
    letter-spacing: 20px;
    font-weight: bolder;
}

#poster p span {
    position: relative;
    -webkit-transition: all 2.5s ease;
    color: #987cc8;

}

.step-two #poster p span {
    top: 0 !important;
    left: 0 !important;
}




header h1 {
    margin: 10px 0 0 20px;
    font-size: 100px;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px #fff;
    color: #444;
    font-family: 'Wire One', arial, serif;
}

header span {
    font-style: italic;
    margin: -10px 0 10px 188px;
    display: block;
    color: #555;
    text-shadow: 1px 1px 1px #fff;
}

.iw_wrapper {
    width: 70%;
    margin: 30px auto 100px auto;
    position: relative;
}

.iw_wrapper li {
    list-style: none;
}

ul.iw_thumbs li {
    float: left;
    margin: 5px;
}

ul.iw_thumbs li div {
    position: absolute;
    top: 5px;
    width: 180px;
    padding: 0px 10px;
    display: none;
    color: #fff;
    z-index: 100;
}

ul.iw_thumbs li div h2 {
    font-family: 'Wire One', arial, serif;
    font-size: 38px;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px #fff;
}

ul.iw_thumbs li div p {
    font-size: 11px;
    line-height: 16px;
    font-style: italic;
}

ul.iw_thumbs li:nth-child(1) {
    margin-left: 50px;
}

ul.iw_thumbs li:nth-child(even) {
    margin-top: 30px;
}

ul.iw_thumbs li:nth-child(3n) {
    margin-left: 20px;
}

ul.iw_thumbs li img {
    border: 2px solid #fff;
    cursor: pointer;
    position: relative;
    -moz-box-shadow: 1px 1px 1px #aaa;
    -webkit-box-shadow: 1px 1px 1px #aaa;
    box-shadow: 1px 1px 1px #aaa;
}

ul.iw_thumbs li img:hover {
    -moz-box-shadow: 1px 1px 7px #777;
    -webkit-box-shadow: 1px 1px 7px #777;
    box-shadow: 1px 1px 7px #777;
}

ul.iw_thumbs li:nth-child(even) img {
    height: 40px;
}

ul.iw_thumbs li:nth-child(odd) img {
    height: 60px;
}

ul.iw_thumbs li:nth-child(5n) img {
    height: 70px;
}

ul.iw_thumbs li:nth-child(6n) img {
    height: 110px;
}

ul.iw_thumbs li:nth-child(7n) img {
    height: 40px;
}

.iw_ribbon {
    position: fixed;
    height: 270px;
    /*first 126 then 0 to close and 100% to open (while top goes to 0) */
    width: 0px;
    /*first 0 then animate to 100%*/
    left: 0px;
    /*or right 0*/
    top: 0px;
    /*First, top of thumb, then animate to 0*/
    background: transparent;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    display: none;
}

.iw_close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgb(255, 250, 234);
    width: 18px;
    height: 18px;
    display: none;
    cursor: pointer;
}

.iw_zoom {
    color: rgb(5, 5, 5);
    font-size: 8px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    padding: 14px;
    display: none;
    float: right;
    margin-right: 30px;
}

.iw_ribbon img {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 7px solid #fff;
}





.container1 {
    margin: 0 auto;
    max-width: 1400px;
    margin-top: 200px;
}

.row {
    width: 103%;
    float: left;
    margin: 110px -1.5%;
    margin: 0 auto;
    max-width: 1400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/*= common css to all effects =*/
.single-member {
    width: 320px;
    float: left;
    margin: 30px 2.5%;
    background-color: #fff;
    text-align: center;
    position: relative;
}

.member-image img {
    max-width: 100%;
    vertical-align: middle;
}

h3 {
    font-size: 24px;
    font-weight: normal;
    margin: 10px 0 0;
    text-transform: uppercase;
}

h5 {
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 15px;
    line-height: 22px;
}

p {
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 0 30px;
    margin-bottom: 10px;
}

.social-touch a {
    display: inline-block;
    width: 27px;
    height: 26px;
    vertical-align: middle;
    margin: 0 2px;
    background-image: url(../images/social-icons.png);
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: 0.3s;
}

.social-touch a:hover {
    opacity: 1;
    transition: 0.3s;
}

.fb-touch {
    background-position: 0 0;
}

.tweet-touch {
    background-position: -35px 0;
}

.linkedin-touch {
    background-position: -71px 0;
}

.icon-colored .fb-touch {
    background-position: 0 -27px;
}

.icon-colored .tweet-touch {
    background-position: -35px -27px;
}

.icon-colored .linkedin-touch {
    background-position: -71px -27px;
}

/*= effect-2 css =*/
.effect-2 {
    max-height: 302px;
    min-height: 302px;
    overflow: hidden;
    border: 2px solid white;
}

.effect-2 h3 {
    padding-top: 7px;
    line-height: 33px;
}

.effect-2 .member-image {
    border-bottom: 10px solid #987cc8;
    height: 212px;
    overflow: hidden;
    width: 100%;
    transition: 0.4s;
    display: inline-block;
    float: none;
    vertical-align: middle;
}

.effect-2 .member-info {
    transition: 0.4s;
}

.effect-2 .member-image img {
    width: 100%;
    vertical-align: bottom;
}

.effect-2 .social-touch {
    background-color: #1fb554;
    float: left;
    left: 0;
    bottom: 0;
    overflow: hidden;
    padding: 5px 0;
    width: 100%;
    transition: 0.4s;
}

.effect-2:hover .member-image {
    height: 81px;
    transition: 0.4s;
}

/*= effect-2 css end =*/


/*= Media Query 
=============== */
@media only screen and (max-width: 980px) {
    .row {
        width: 100%;
        margin: 110px 0;
    }

    .team-members {
        text-align: center;
    }

    .single-member {
        float: none;
        display: inline-block;
        vertical-align: bottom;
    }
}








.focus {
    width: 68%;
    height: 400px;
    margin: 0 auto;

}

.focusbox {
    background-color: transparent;
    position: relative;
}

.focusimg {

    width: 990px;
    height: 476px;
    position: relative;
    overflow: hidden;
    -webkit-perspective: 1300px;
}

.fimglist {
    width: 99300px;
    position: relative;

}

.fimglist img {
    display: block;
    margin-left: 50px;
    width: 900px;
    height: 456px;
    cursor: pointer;
}

.fimglist li {
    width: 990px;
    height: 376px;
    float: left;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    list-style: none;
}

.fimglist li.onpre {
    -webkit-animation: onpre .5s ease-in-out;
    animation: onpre .5s ease-in-out;
    opacity: 0;
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
}

@-webkit-keyframes onpre {
    0% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotateY(90deg)
    }
}

@keyframes onpre {
    0% {
        opacity: 1;
        transform: rotateY(0deg);
    }

    100% {
        opacity: 0;
        transform: rotateY(90deg)
    }
}

.focustool {
    width: 935px;
    overflow: hidden;
    padding: 5px 0 10px;
    margin: 0 auto;
    position: relative;
}

.ftoollist {
    width: 4655px;
    position: relative;
    margin-left: -30px;
}

.ftoollist img {
    display: block;
    width: 129px;
    height: 69px;
    margin-bottom: 3px;
}

.ftoollist a {

    display: block;
    width: 129px;
    padding: 4px 0 4px 4px;
    position: relative;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.ftoollist li {
    float: left;
    cursor: pointer;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.ftoollist .imgname {
    line-height: 25px;
    text-align: center;
    color: #FFF;
    font-family: \5FAE\8F6F\96C5\9ED1;
    font-weight: 400;
    font-size: 18px;
    height: 25px;
    overflow: hidden;
    cursor: pointer;
}

.ftoollist .imgshortcat {
    line-height: 20px;
    text-align: center;
    color: #7D7D7D;
    font-size: 12px;
    height: 20px;
    overflow: hidden;
    cursor: pointer;
}

.ftoollist a:hover {
    background-color: #987cc8;
    padding: 4px;
    margin-right: -4px;
    z-index: 100;
    top: -5px;
}

.ftoollist a:hover .imgname {
    color: #DBC98C;
}

.ftoollist a:hover .imgshortcat {
    color: #FFF;
}

.ftoollist .on a {
    background-color: #987cc8;
    padding: 4px;
    margin-right: -4px;
    z-index: 100;
    top: -5px;
}

.ftoollist .on .imgname {
    color: #DBC98C;
}

.ftoollist .on .imgshortcat {
    color: #FFF;
}

.screen {
    position: relative;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.send {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;

    text-align: center;
}

.input {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px -350px;
    font-size: 0;
}

.text {
    float: left;
    width: 600px;
    height: 40px;
    border: none;
    border-radius: 8px 0 0 8px;
}

.s_show div {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
}



.filter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #987cc8;
    animation: colorChange 30s ease-in-out infinite;
    animation-fill-mode: both;
    mix-blend-mode: overlay;
}

@keyframes colorChange {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: .9;
    }
}


.word-container {
    position: relative;
    width: 100%;
    min-height: 50%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.word {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(calc(-50% + (var(--word-index) * -8px)));
    font-family: "Montserrat";
    font-size: 6rem;
    font-weight: 900;
    color: var(--color, #fff);
    display: flex;
    pointer-events: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.word .char {
    animation: jump-and-flip 3s linear infinite;
    animation-delay: calc((var(--word-index) * -0.06s) + (var(--char-index) * 0.1s));
}

@keyframes jump-and-flip {

    0%,
    10% {
        transform: translateY(0) rotate(0deg);
    }

    15% {
        transform: translateY(10%) rotate(0deg);
    }

    18% {
        transform: translateY(-120%) rotate(0deg);
    }

    25% {
        transform: translateY(-180%) rotate(60deg);
    }

    34% {
        transform: translateY(-200%) rotate(120deg);
    }

    37% {
        transform: translateY(-200%) rotate(240deg);
    }

    40% {
        transform: translateY(-200%) rotate(300deg);
    }

    46% {
        transform: translateY(10%) rotate(360deg);
    }

    50%,
    100% {
        transform: translateY(0%) rotate(360deg);
    }
}

/* Footer Style */