body,html{ padding:0; margin:0; font-family: 'Raleway', sans-serif; color:#444; }
input, textarea, select, button { font-family: 'Raleway', sans-serif;  }
* {
  box-sizing: border-box;
}
p { line-height:30px; }

a { color:#ca0000; }

.clearfix::after { content: ""; clear: both; display: table; }

.header-area { position:relative; width:100%; height:100vh; background:url('../images/tokyo-bg.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment: fixed; overflow:hidden; }

#logo { max-width:400px; max-height:400px; background-color:transparent; background:url(../images/logo-text.png); background-position:center; background-size:cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

#brush {width:100%; height:100%; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 35%, 0% 35%, 0% 65%, 100% 65%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 35%, 0% 35%, 0% 65%, 100% 65%, 100% 100%, 0% 100%);}

#brush img { width:100%; height:100%; -webkit-animation:spin 40s linear infinite; -moz-animation:spin 40s linear infinite; animation:spin 40s linear infinite; }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.down-arrow {  position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:1.5em;  cursor:pointer;}
.down-arrow i { padding:15px;transition:all 0.2s ease-out; color:#444;}

.down-arrow:hover i { padding-bottom:30px; }



.main-area { padding:100px 0; background-color:#222; color:white; }
h1.section-header, h2.section-header { font-size:2em; margin-top:0; text-align:center; /*text-shadow: 2px 2px #000;*/ margin-bottom:50px; }
.col-left { float:left; width:50%; padding-right:15px; }
.col-right { float:right; width:50%; padding-left:15px; }

.upcoming-events { background-color:#ddd; padding:30px; color:#444; border-radius:20px; }
.upcoming-events h2 { margin-top:0; margin-bottom:0px; padding-bottom:30px; }

.contact-area { background-color:#ddd; padding:100px 0; text-align:center; }

.contact-area a { font-size:1.8em; text-decoration:none; display:inline-block; margin-top:15px; margin-bottom:15px; }
.contact-area i { margin-right:5px; }
.contact-area p:last-child { margin-bottom:0; }

.contact-area form { width:100%; max-width:600px; margin:0 auto; padding:15px 0; }
.contact-area form input[type="text"], .contact-area form input[type="email"] { padding:10px; width:47%; margin-left:1.5%; margin-right:1.5%; margin-bottom:3%;}
.contact-area form textarea { width:97%; height:200px; padding:10px; resize:none; margin-bottom:3%; }
.contact-area form input[type="submit"] { padding:10px 20px; color:white; text-transform:uppercase; letter-spacing:1px; background-color:#ca0000; border:0; font-weight:600; }

.container { max-width:1000px; width:100%; padding:0px 30px; margin:0 auto; }

.event-item { padding:20px; margin-bottom:15px; background-color:white; border-radius:20px;     box-shadow: 0px 2px 2px #aaa;}
.event-item:last-child { margin-bottom:0; }
.event-item .event-date { margin-bottom:10px; font-weight:600; }
.event-item .event-name { margin-bottom:10px; }
.event-item .event-venue { margin-bottom:0px; }
.event-item .event-links { margin-top:10px; }

.footer-area { background-color:#ddd; text-align:center; }
.footer-area .container { border-top:1px solid #999; padding-top:30px; padding-bottom:30px; }

@media(max-width:800px){
.col-left, .col-right { float:none; width:100%; padding-right:0; padding-left:0; }
.col-left { margin-bottom:50px; }
.main-area, .contact-area { padding:50px 0; }
.header-area { height:90vh; }
}