/*general*/ 
html, body {margin:0; padding:0; position: relative;}
body {margin:0; width: 100%; height: 100vh; overflow-x: hidden;}
ul, li {list-style: none; padding: 0; margin: 0; display: inline-block;}
input {padding: 0; margin: 0; margin: 0; border: 0;}
img {vertical-align: bottom; max-width: 100%;}

.click {cursor: pointer;}
.noselect {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

*:fullscreen,
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

.hide-scrollbar::-webkit-scrollbar {display: none;}
/*::-webkit-scrollbar {display: auto;}*/

body {font-family: 'Helvetica Neue', 'Arial', sans-serif; font-weight: 500; background-color: #ebe8e1;}
#outer {width: 100%; height: 100%; max-width: 1200px; margin: 0 auto;}

/*-- top --*/
#top {display: flex; align-items: center; background-color: #fff; padding: 12px 35px;}
#logo {flex: 8 8 80%;}
#hashtag {flex: 2 2 20%;}

#logo img {width: 225px;}
#hashtag {padding-top: 20px;}
#hashtagTxt {font-size: 24px; color: #881c55;}

/*-- header --*/
#header {background-color: #891c55; color: #fff; display: flex; justify-content: center; padding: 30px;}

#headerTxt {flex: 6.5 6.5 65%;}
#share {flex: 3.5 3.5 35%;}

#headerBody {font-size: 15px; line-height: 25px; font-weight: normal;}
#shareTxt {text-align: center; margin-bottom: 23px; font-size: 21px; font-weight: normal;}

/*share*/
#shareIcons {display: flex; align-items: center; justify-content: center;}
.shareIcon {height: 35px; }
#fbShare, #twShare {margin-right: 10px;}


/*-- info --*/
#info {background-color: #891c55; color: #fff; padding: 30px; display: flex; align-items: center; justify-content: center;}
.infoBlock {display: flex; flex-direction: column; align-items: center; flex: 5 5 50%; width: 100%;}
.infoTxt {display: flex; flex-direction: column; width: 80%; margin: 0 auto; text-align: center; font-size: 17px; line-height: 22px; font-weight: normal;}
.infoHeader {text-transform: uppercase; margin-bottom: 15px;}
.infoBtn { background-color: #e49f49; width: 225px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 12px; margin-top: 24px; font-weight: normal;}
.infoBtn a {color: #fff;}

/*-- footer --*/
#footer { padding: 24px 24px 30px; display: flex; align-items: center;}
#stamp {margin-left: 40px; width: 50px;}
#stamp img {height: 50px; max-width: none;}
#copyRight {font-size: 13px; line-height: 17px; margin-left: 30px; width: 100%;}


/*-- mosaic --*/
#mosaic {background-color: #891c55;}

/*
 *
 * Responsiveness
 *
 *
 */

@media (max-width: 767px) {
    #top {flex-direction: column;}
    #logo, #hashtag {flex: auto;}
    #hashtag {padding-bottom: 10px;}
    #header {flex-direction: column; padding: 20px; }
    #headerTxt, #share {flex: auto;}
    #headerTxt {text-align: center; margin-bottom: 20px;}
    #shareTxt {margin-bottom: 14px;}

    #info {flex-direction: column; padding: 24px 5vw;}
    .infoBlock {flex: auto;}
    #signUp {margin-bottom: 25px;}
    .infoTxt {width: 100%;}
    .infoHeader {margin-bottom: 10px;}
    #footer {padding: 15px 15px 30px; flex-direction: column;}
    #stamp {margin: 0; margin-bottom: 15px;}
    #copyRight {margin-left: 0; text-align: center;}
}

@media (max-width: 420px) {
    #header {padding: 14px;}
    #info {padding: 28px 5vw;}
    #footer {padding: 12px 12px 25px;}
    #copyRight {font-size: 12px;}
}