@import url("news.css");

.buttons {
    text-align:right !important;
}

/* Fader */
.bx-wrapper {
  margin: 0 !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}
.bxslider {
	position: relative;
}
.bxslider img{
    width: 100% !important;
    height: auto !important;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: 20px !important;
  width: 100%;
  z-index:100;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff !important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #50A1C9 !important;
}
.bx-wrapper .bx-controls-direction a {
    z-index:3000 !important;
}

/* Banner */
main #banner {
    background:#007bbb url(../_img/index/wall_banner.png);
    padding:50px 0;
}
main #banner ul {
    padding:0;
    margin-bottom:0;
    list-style:none;
}
main #banner ul li {
    padding:0;
    margin-bottom:0;
}
main #banner ul li a {
    display:block;
    padding:30px 20px 30px 90px;
    color:#fff !important;
    position:relative;
}
main #banner ul li a:after {
    content:"〉";
    position:absolute;
    right:15px;
    top:50%;
    transform: translateY(-50%);
}
main #banner ul li:nth-of-type(1) a {
    background:#839b5c url(../_img/index/present.svg) left center / contain no-repeat;
}
main #banner ul li:nth-of-type(2) a {
    background:#1e50a2 url(../_img/index/voice.svg) left center / contain no-repeat;
}
main #banner ul li:nth-of-type(3) a {
    background:#ee827c url(../_img/index/sakura.svg) left center / contain no-repeat;
}
main #banner ul li a:hover {
    box-shadow:0 0 6px 3px rgba(0,0,0,0.2);
}

/* News */
main #news-list {
    background:#eee url(../_img/index/wall_news.svg) center center / cover no-repeat;
}

/* Events */
main #events {
    background:#50a1c9;
}
main #events h1 {
    color:#fff;
}
main #events .button {
    color:#fff !important;
    border-color:#fff !important;
}

main #events > div > a {
    margin-bottom:40px;
    background:#fff;
}
main #events > div > a:hover {
    box-shadow:0 0 6px 3px rgba(0,0,0,0.2);
}
main #events > div > a h2 {
    padding:40px;
    line-height:1.6;
}


/* About us */
main #aboutus {
    background:url(../_img/index/sakura.png) left center / contain no-repeat;
    padding:100px 0;
}
main #aboutus .width-limitter {
    padding-left:26%;
}
main #aboutus h1 {
    text-align:left;
    font-size:1.6em;
    margin-bottom:20px;
    color:#000;
}

/** Media Query **/
@media only screen and (max-width : 900px) {
    main #banner ul li a {
        padding:120px 20px 20px 20px;
        text-align:center;
    }
    main #banner ul li a:after {
        display:none;
    }
    main #banner ul li:nth-of-type(1) a {
        background:#839b5c url(../_img/index/present.svg) center top 20px / 80px no-repeat;
    }
    main #banner ul li:nth-of-type(2) a {
        background:#1e50a2 url(../_img/index/voice.svg) center top 20px / 80px no-repeat;
    }
    main #banner ul li:nth-of-type(3) a {
        background:#ee827c url(../_img/index/sakura.svg) center top 20px / 80px no-repeat;
    }

    main #events > div > a h2 {
        padding:10px;
        line-height:1.2;
    }

    main #aboutus {
        background:url(../_img/index/sakura.png) right top / cover no-repeat;
        padding:60px 0;
    }
    main #aboutus .width-limitter {
        padding-left:20px;
    }
    main #aboutus h1 {
        text-align:center;
    }
    main #aboutus p {
        color:#000;
    }
}
@media only screen and (max-width : 640px) {
    .buttons {
        text-align:center !important;
    }
    main #banner ul li {
        width:100% !important;
        margin-bottom:10px;
    }
    main #banner ul li a {
        text-align:left;
        padding:30px 20px 30px 90px;
    }
    main #banner ul li a:after {
        display:block;
    }
    main #banner ul li:nth-of-type(1) a {
        background:#839b5c url(../_img/index/present.svg) left center / contain no-repeat;
    }
    main #banner ul li:nth-of-type(2) a {
        background:#1e50a2 url(../_img/index/voice.svg) left center / contain no-repeat;
    }
    main #banner ul li:nth-of-type(3) a {
        background:#ee827c url(../_img/index/sakura.svg) left center / contain no-repeat;
    }
    
    main #events > div > a h2 {
        width:100%;
    }
}