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

$baseFontSize: 16;

$green: #009688;
$blue: #5677fc;
$blueDark: #3b50ce;

$slideDistance: 100;
$slideDuration: .4s;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}
html ::-webkit-scrollbar { 
    display: none; 
    transition:ease .2s;
}
body {
    transition:ease .2s;
    background:#F5F5F5;
    background-size: 1800px;
    background-position: center;
    background-attachment: fixed;
    font-family:Product Sans, Segoe UI, Arial, sans-serif;
}
header {
    transition:ease .2s;
    margin-left:auto;
    margin-right:auto;
    width:95%;
    padding:10px;
    padding-top:0;
	background-color:#eeeeee;
	color:#2196F3;
    font-size:20px;
    border-top:1px solid #f5f5f5;
    border-bottom:1px solid #e0e0e0;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.header2 {
    transition:ease .2s;
    margin-left:auto;
    margin-right:auto;
    width:95%;
    padding:10px;
    padding-top:0;
	background-color:#2196F3;
	color:#fafafa;
    font-size:24px;
    margin-bottom:10px;;
    border-top:1px solid #64B5F6;
    border-bottom:1px solid #1976D2;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
h4 {
    margin-bottom:0px;
}
.note {
    color:#000;
    font-size:12px;
}
#navlogo {
    width:100%;
    height:0;
    position:fixed;
    z-index:9999999999;
    transition:ease .2s;
}
#navlogoimg {
    height:75px;
    z-index:9999999999;
    border-radius:100%;
    transition:ease .2s;
}
#navlogoimg:hover {
    filter:brightness(120%);
    transition:ease .2s;
}
.footleft {
    width:100%;
    font-size:12px;
    margin:0;
    transition:ease .2s;
}
footer {
    width:100%;
    background: #212121;
    position: fixed;
    z-index: 9999999999999;
    bottom:0;
    text-align:right;
    color:#ffffff;
    margin:0;
    height:50px;
    transition:ease .2s;
    padding:10px;
}
.foot {
    width:100%;
    position:fixed;
    bottom:3px;
    right:20px;
    transition:ease .2s;
}
#info {
    background:rgba(255,255,255,1);
    height:auto;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    margin-top:10px;
    margin-bottom:70px;
    padding:10px;
    border-top:1px solid #eeeeee;
    border-bottom:1px solid #9e9e9e;
    box-shadow:0 1px 1px rgba(0,0,0,.3);
    text-align:center;
    transition:ease .2s;
}
.need {
    width:100%;
    margin-top:-40px;
}
#need {
    background:rgba(255,255,255,1);
    height:auto;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    margin-top:10px;
    margin-bottom:70px;
    padding:10px;
    border-top:1px solid #eeeeee;
    border-bottom:1px solid #9e9e9e;
    box-shadow:0 1px 1px rgba(0,0,0,.3);
    text-align:center;
    transition:ease .2s;    
}
.welcome { 
    background:#eeeeee;
    text-align:center;
    margin:auto;
    width:1210px;
    border-radius:10px;
    padding-top:9px;
    padding-bottom:1px;
    border-top:1px solid #f5f5f5;
    border-top:1px solid #e0e0e0;
    transition:ease .2s;
}
@media (max-width: 767px) {
    .welcome {
        width:300px;
    }
}
@media (max-width: 1314px) {
    .welcome {
        width:904px;
    }
}
@media (max-width: 995px) {
    .welcome {
        width:604px;
    }
}
@media (max-width: 676px) {
    .welcome {
        width:300px;
    }
}
.message {
    background:#eeeeee;
    text-align:center;
    width:90%;
    margin:auto;
    border-radius:10px;
    padding-top:9px;
    padding-bottom:1px;
    border-top:1px solid #f5f5f5;
    border-top:1px solid #e0e0e0;
    margin-bottom:10px;
    font-size:24px;
    transition:ease .2s;
}
@media (max-width: 767px) {
    #info {
        margin-top:20px;
        margin-bottom:50px;
        transition:ease .2s;
    }
}
.para { 
    background:#eeeeee;
    text-align:center;
    width:90%;
    margin:auto;
    margin-top:350px;
    border-radius:10px;
    padding-top:9px;
    padding-bottom:1px;
    transition:ease .2s;
}
@media (max-width: 1600px) {
    .para {
        margin-top:360px;
    transition:ease .2s;
    }
}
@media (max-width: 1200px) {
    .para {
        margin-top:510px;
    transition:ease .2s;
    }
}
@media (max-width: 767px) {
    .para {
        margin-top:1015px;
    transition:ease .2s;
    }
}
article .even {
    width:33%;
    transition:ease .2s;
}
@media (max-width: 1200px) {
article .even {
    width:100%;
    transition:ease .2s;
}
}
@media (max-width: 1600px) {
    form {
    width:90%;
    transition:ease .2s;
    }
}
/**********************/
/*******FORM CSS*******/
/**********************/
form {
    height:380px;
    padding:0px;
    margin:0 auto;
    width:95%;
    transition:ease .2s;
}
form textarea {
    font-family:"Segoe UI";
    background:#448AFF;
    float:right;
    border-radius:20px;
    height:90px;
    color:white;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
	box-shadow:0 2px 5px rgba(0,0,0,0.26) inset;
    border-width:0;
    width:85%;
    resize:none;
    transition:ease .2s;
}
form input.btn {
    position:fixed;
    z-index:9;
    margin:10px;
    right:10px;
    bottom:50px;
    font-weight:bold;
    background:#2196F3;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    width:102px;
    color:#fafafa;
    transition:ease .2s;
}
form input.btn:hover {
    color:#fafafa;
    box-shadow:0 2px 2px rgba(0,0,0,.3);
}
form input.btn:visited {
    color:#fafafa;
}
form input.btn:active {
    color:#fafafa;
	box-shadow:0 2px 2px rgba(0,0,0,0.26) inset;
    transition:ease .2s;
}
form input.clr {
    right:120px;
}
#ptitle {
    background:#448AFF;
    border-radius:20px;
    height:29px;
    color:white;
    padding-left:10px;
    padding-right:10px;
	box-shadow:0 2px 5px rgba(0,0,0,0.26) inset;
    border-width:0;
    width:85%;
    transition:ease .2s;
}
#ptitle option {
    background:#448AFF;
    float:right;
    border-radius:20px;
    height:29px;
    color:white;
    padding-left:10px;
    padding-right:10px;
	box-shadow:0 2px 5px rgba(0,0,0,0.26) inset;
    border-width:0;
    width:85%;
    transition:ease .2s;
}
center {
    height:0;
    transition:ease .2s;
}
.menuname {
    font-size:19px;
    transition:ease .2s;
}/* form starting stylings ------------------------------- */
.group { 
  position:relative; 
  margin-bottom:45px; 
}
input {
    margin-top:20px;
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid rgba(117,117,117,1);
}
input:focus {
    outline:none;
}

/* LABEL ======================================= */
label {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:30px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top:0px;
  font-size:14px;
  color:#2196F3;
}

/* BOTTOM BARS ================================= */
.bar { 
    position:relative;
    display:block;
    width:100%;
}
.bar:before, .bar:after {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#2196F3; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:after {
  right:50%; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.left {
    width:45%;
    display: inline-block;
    margin:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.right {
    width:45%;
    display: inline-block;
    margin:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.full {
    width:93.4%;
    display: inline-block;
    margin:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
@media (max-width: 767px) {
    .left {
        width:100%;
        margin:0;
    }
    .right {
        width:100%;
        margin:0;
    }
    .full {
        width:100%;
        margin:0;
    }
    input {
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    .highlight {
        margin-left:auto;
        margin-right:auto;
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }
    .bar {
        width:100%;
        margin-left:auto;
        margin-right:auto;
        transition:0.2s ease all; 
        -moz-transition:0.2s ease all; 
        -webkit-transition:0.2s ease all;
    }
form input.clr {
    right:120px;
}
}
.needlist {
    list-style:none;
    display:block;
    float:none;
    width:100%;
    height:auto;
    text-align: center;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.needlist label {
    position:static;
    width: 100px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.needlist input {
    float:none;
    display:inline-block;
    position:inherit;
    pointer-events: all;
    cursor: pointer;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.checkbox {
    -webkit-appearance: none;
    width:50px;
    height:50px;
    background-color: #eeeeee;
    box-shadow:0 1px 5px rgba(0,0,0,.3);
  transition:0.2s ease all; 
    border-bottom:0;
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.checkbox:focus {
    outline:none;
}
.checkbox:active, .checkbox:checked:active {
    box-shadow:0 2px 5px rgba(0,0,0,.3);
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.checkbox:checked {
	background-color: #2196F3;
    box-shadow:0 2px 5px rgba(0,0,0,.3);
	color: #99a1a7;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.checkbox:checked + .checkname {
    font-size:16px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.checkname {
    text-align: center;
    height:30px;
    max-width: 100px;
    margin-top:0px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.checksub {
    text-align: center;
    margin-top:-5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.notice {
    width:100%;
    text-align: center;
    position:initial;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bold {
    font-weight: bold;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.edate input {
    z-index: 2;
    background-color:#ffffff;
}
.edate .bar {
    position:relative;
    top:1px;
}
.date {
    z-index: 1;
    position:realtive;
    width:100%;
    height:30px;
    background-color:#ffffff;
    text-align:left;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.label-checkbox {
    width:150px;
    height:auto;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
form {
    height:auto;
    margin-bottom:80px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.drawing {
    width:100%;
    margin-top:-40px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
#drawing {
    background:rgba(255,255,255,1);
    height:auto;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    margin-top:10px;
    padding:10px;
    border-top:1px solid #eeeeee;
    border-bottom:1px solid #9e9e9e;
    box-shadow:0 1px 1px rgba(0,0,0,.3);
    text-align:center;
    transition:ease .2s;    
}
#drawing .my-drawing label {
    color:rgba(0,0,0,1);
    font-size:10px;
    position:relative;
    top:5px;
    left:0;
}
.colorbox {
    -webkit-appearance: none;
    width:50px;
    height:50px;
    background-color: #eeeeee;
    box-shadow:0 1px 5px rgba(0,0,0,.3);
    border-bottom:0;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
#color-picker-wrapper, #color-picker-wrapper2 {
    border-radius:100%;
    overflow:hidden;
    box-shadow:0 1px 5px rgba(0,0,0,.3);
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
input[type="color"] {
	opacity: 0;
    width:100px;
    height:100px;
	display: inline-block;
    margin-top:0;
    border-radius:100%;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.colorname {
    margin-top:10px;
}
.label-colorbox {
    width:50px;
    height:auto;
    margin:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.label-radios {
    padding-top:0px;
    margin-top:-30px;
}
.toplist {
    margin-top:30px;
}
@media (max-width: 767px) {
    .label-radios {
        margin:-20px;
        padding-top:20px;
    }
    .toplist {
        margin-top:-10px;
    }
}
#deadline {
    background:rgba(255,255,255,1);
    height:auto;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    margin-top:10px;
    margin-bottom:70px;
    padding:10px;
    border-top:1px solid #eeeeee;
    border-bottom:1px solid #9e9e9e;
    box-shadow:0 1px 1px rgba(0,0,0,.3);
    text-align:center;
    transition:ease .2s;    
}