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

::-webkit-input-placeholder { /* Edge */
    color: #ccc;
}
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ccc;
}
  
::placeholder {
color: #ccc;
}
.help-block {
    /* margin-top: -20px; */
    color: #ff0000 !important;
    font-size: 14px;
    display: block;
    text-align: center;
    margin-top: 2px;
}
input[type="checkbox"][id^="myCheckbox"] {
  display: none;
}
input[type="radio"][id^="myCheckbox"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px 0px;
  display: block;
  position: relative;
  /* margin: 10px; */
  cursor: pointer;
  text-align: left;
}

label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -12px;
    left: -15px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
  width: 30px;
    height: 30px;
    z-index: 999;
}

:checked + label {
    -webkit-box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 15%);
    -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 15%);
    border-radius: 10px;
    padding: 10px 0px;
}

:checked + label:before {
  content: "✓";
  background-color: #335cd1;
  transform: scale(1);
  font-size: 20px;
}

:checked + label img {
  transform: scale(0.9);
  /* box-shadow: 0 0 5px #333; */
  z-index: -1;
}
.padd60.padb0 {padding-bottom:0;}
footer {background:#e0ecff; color:#333; text-align:center;}
footer .left {float:none;}
.lightbox, #head-mobile {display:none;}
.featherlight .featherlight-inner {display:block;}
.featherlight .featherlight-content {width:480px;}
.featherlight .featherlight-content h2 {color:#335cd1; margin-bottom:18px;}
.featherlight .featherlight-content p {margin-bottom:25px;}
.featherlight .featherlight-content .form-control {width:77%; display:inline-block; color:#333;}
.featherlight .featherlight-content .form-group {margin-bottom:0.7rem;}
.featherlight .featherlight-content .form-group .btn {background:#72bf21; vertical-align:top; border:none; color:#fff; cursor:pointer; line-height:1.35;}
header:after,header > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
header #head-mobile{display:none}

.header_img {
    max-width: 100%;
}

.page_title {
    color: #335cd1;
    font-size: 3rem;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-bottom: 2rem;font-weight: 600;}

.heading_text {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 500;
}

.heading_text.pg2 {
    margin-right: 15px;
}
.span_block.heading_text.pg2 {
    margin-right: 0px;
    font-size: 1rem;
    line-height: normal;
}

.heading_text.pg2.popup_text {
    margin-right: 0px;
    font-size: 1.2rem;
}

.select_emoji_title {
    text-align: center;
    /* display: inline-block; */
    width: 100%;
    color: #335cd1;
    font-weight: 600;
    font-size: 1.6rem;
    max-width: 50%;
    line-height: normal;
    margin: 0 auto;
}

.span_block {
    display: inline-block;
    width: 100%;
}

.select_emoji_title.bottom {
    max-width: inherit;
    margin-bottom: 1.5rem;
}

.emoji_container {
    margin: 2rem auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    align-items: center;
}

.emoji_container .emoji_inner_flex {
    width: 20%;
    margin-bottom: 1rem;
    text-align: center;
    justify-content: center;
    margin: 0 0 0rem;
    padding: 0px 10px;
}

img {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }

.emoji_container .emoji_inner_flex img {
   max-width: 100%;
}

.mw-100 {max-width: 100%;}

.emoji_container .emoji_inner_flex label:hover {
    -webkit-box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 15%);
    -moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 15%);
    border-radius: 10px;
    padding: 10px 0px;
    cursor: pointer;
}

.emoji_inner_flex span {
    display: block;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: normal;
}

input[type="text"] {
    height: 50px;
    border: 2px solid #b7b7b7;
    border-radius: 5px;
    font-size: 1.2rem;
    line-height: normal;
    padding: 3px 10px;
}

textarea {
    border: 2px solid #b7b7b7;
    border-radius: 5px;
    font-size: 1rem;
    line-height: normal;
    padding: 8px 10px;
    width: 100%;
}

.other_emotion input[type="text"] {
    min-width: 300px;
    display: block;
    text-align: center;
    margin: 0 auto 0px;
}

.other_emotion button {
    height: 50px;
    border: 5px solid #6bbd20;
    border-radius: 8px;
    background: rgb(202,224,239);
    background: linear-gradient(0deg, rgba(202,224,239,1) 0%, rgba(255,255,255,1) 95%);
    text-transform: uppercase;
    min-width: 130px;
    font-size: 1.2rem;
    color: #335cd1;
    font-weight: 600;
    line-height: normal;
    vertical-align: top;
    margin-top: 20px;
}

.other_emotion button:hover {
    border: 5px solid #335cd1;
    text-transform: uppercase;
    cursor: pointer;
}

header > .container {
    width: auto;
    display: inline-block;
}

header img {
    max-width: 100%;
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

.heading_text {
    margin-bottom: 2rem;
}

.shared {
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35%;
}

.p15 {
    padding: 15px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.popup {
    border: 2px solid #ccc;
    margin-top: 50px;
    border-radius: 10px;
    padding: 30px 10px;
    margin: 50px auto 0px;
}

.g-recaptcha > div {
    margin: 0 auto;
    width: 100% !important;
}

@media (min-width:500px) {
    .popup {
        max-width: 580px;
    }
}
@media (max-width:499px) {
    .popup {
        max-width: 98%;  
    }
}

@media (min-width:1200px) and (max-width:1550px) {
    .heading_text.s_size {
        max-width: 85%;
        margin: 0 auto 2rem;
    }
}

@media (min-width:1200px) {
    header > .container {
        padding-left: 30px;
    }

    .select_emoji_title.pg2 {
        max-width: 78%;
    }
    .select_emoji_title.title2.pg2 {
        max-width: 60%;
    }
    

    .textarea_container {
        max-width: 52%;
    }
}

@media (max-width:1199px) {
    .select_emoji_title.pg2 {
        max-width: 98%;
    }

    .textarea_container {
        max-width: 98%;
    }

    .shared {
        width: 65%;
    }
}

@media (max-width:1024px) {
    .emoji_container {
        max-width: 100%;
    }

    .select_emoji_title {
        max-width: 100%;
    }

    .page_title {
        font-size: 2.4rem;
    }
    .emoji_inner_flex span {
        font-size: 1rem;
        font-weight: 600;
    }
}

@media (max-width:1199px) {
    .select_emoji_title.pg2 {
        line-height: normal;
    }
    
}

@media (max-width:991px) {
#head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
header .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
header .button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #335cd1;border-bottom:2px solid #335cd1;content:''}
header .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease; position:absolute; top:16px; right:20px; display:block; height:4px; width:20px; background:#335cd1; content:''}
header .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#335cd1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
header .button.menu-opened:before{top:23px;background:#335cd1;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg); height:2px;}
header .menuBar, .menuBar li {width:100%;}
.menuBar li {float:none;}
.menuBar li a {background:#444; color:#fff; width:100%; border-bottom:1px solid #5d5d5d;}
.menuBar li a:focus {text-decoration:none;}
.menuBar li a.active {color:#72bf21;}
.menuBar li a.join {border-radius:0;}
.intro-section .col-md-3 {flex:0 0 50%; max-width:50%;}
}

@media (max-width:800px) {
    .home-anim-container, .home-anim-container, #home-anim-section {height:400px;}
    .textReveal {font-size:27px; line-height:31px; bottom:-13px;}
    .padd60.padb0 {padding-top:36px;}
    .shared {
        width: 90%;
    }
}

@media (max-width:768px) {
    .heading_text {
        margin-bottom: 1.5rem;
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .page_title {
        margin-bottom: 1.3rem;
    }

    .select_emoji_title {
        font-size: 1.4rem;
    }
}

@media (max-width:750px) {
    .page_title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    .heading_text {
        margin-bottom: 1.5rem;
        font-size: 1.2rem;
        line-height: normal;
    }
    .select_emoji_title {
        font-size: 1.3rem;
        line-height: normal;
    }
    .select_emoji_title.pg2 {
        font-size: 1.3rem;
    }
    
    .emoji_container .emoji_inner_flex {
        width: 25%;
        /* margin-bottom: 0.5rem; */
        padding: 0px 10px;
    }
    header img{
        max-width: 170px;
    }

    .other_emotion input[type="text"] {
        height: 45px;
        min-width: 280px;
        /* margin-right: 20px; */
    }

    .other_emotion button {
        height: 45px;
        border: 3px solid #6bbd20;
        border-radius: 6px;
        min-width: 100px;
        font-size: 1rem;
        line-height: 2.6rem;
    }
}

@media (max-width:650px) {
    .container {
        width: 100%;
    }
}


@media (max-width:533px) {
    .introbox {min-height:260px;}
    .other_emotion input[type="text"] {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 15px;
    }
}

@media (max-width:532px) and (min-width:376px) {
    .emoji_inner_flex span {
        font-size: 0.7rem;
    }
    .emoji_container .emoji_inner_flex {
        padding: 0px 5px;
    }
}

@media (max-width:500px) {
.featherlight .featherlight-content {width:81%; padding:13px 15px 9px;}
.featherlight .featherlight-content .form-control {width:100%; margin-bottom:9px;}
.featherlight .featherlight-content .form-group {margin-bottom:0;}
header img{
    max-width: 150px;
}
}

@media (max-width:375px) {

    header {
        padding: 15px 0;
    }
    header img{
        max-width: 120px;
    }

    .page_title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .heading_text {
        margin-bottom: 1rem;
        font-size: 1.1rem;
        line-height: normal;
    }
    .select_emoji_title {
        font-size: 1.1rem;
        line-height: normal;
    }
    .emoji_container {
        margin: 1rem auto;
    width: 100%;
    padding: 0px;
    }
    .emoji_inner_flex span {
        font-size: 0.8rem;
        overflow-wrap: break-word;
    }
    .emoji_container .emoji_inner_flex {
        padding: 0px 5px;
        margin-bottom: 0px;
    }
}

@media (max-width:479px) {
.intro-section .col-md-3 {flex:0 0 100%; max-width:100%;}
.intro-section p {font-size:18px; line-height:25px;}
.introbox {min-height:inherit;}
.home-anim-container, .home-anim-container, #home-anim-section {height:360px;}
.textReveal {font-size:22px; line-height:24px;}
.introbox h4 {margin-bottom:0;}
}

@media (max-width: 375px) {
    .g-recaptcha iframe {
        -ms-zoom: 0.90;
        -moz-transform: scale(0.90);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.90);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.90);
        -webkit-transform-origin: 0 0;
        transform: scale(0.90);
        transform-origin: 0 0;
    }
}