@import url(http://fonts.googleapis.com/css?family=Ubuntu:100,300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);

html{height: 100%}
body{font-family: 'Ubuntu', sans-serif;margin:0;padding:0;height: 100%}
h1, h2{font-family: inherit}
h3{font-family: 'Roboto', sans-serif;font-weight: 300}
ul {font-weight: 300}
li {font-family: 'Roboto', sans-serif;font-size: 24px;list-style-type: none}

header{background: url(../img/background3.jpg);height:1000px;display: block;background-size: cover;position: relative}
header .logo{display: block;background: url(../img/logo.png) no-repeat;width: 173px;height: 315px;margin-left:53px}
header .title{background: rgba(226,223,214,0.7);text-align: center;position: absolute;bottom: 86px;left:20%;right: 20%;height: 414px;font-family: 'Ubuntu Condensed', sans-serif}
header .title h1{color:#232228;font-size:176px;font-weight: 400;line-height: 111px;margin: 0;padding-top:50px}
header .title h1 small{font-family: 'Roboto', sans-serif;color:#606060;font-size:45px;font-weight: 300;display: block}
header .title .button{font-size:32px;text-decoration:none;display: inline-block;position: absolute;padding:30px 10px;font-family: 'Ubuntu Condensed', sans-serif}
header .title .button.start{color:#232228;background: #f49b25;bottom:16px;left:16px;right:52%}
header .title .button.demo{color:white;background: #41414b;bottom:16px;right:16px;left:52%}

section h2, footer h2{font-weight: 300;text-align: center;font-size: 48px;padding-top:70px;color:#1F1F2D}
.section1 {min-height: 1178px;position: relative;top:60px}
.section1 h2{padding-top:10px; max-width: 1180px;margin: 0 auto}
.section1 .slider{position: relative;background: url(../img/slider.png) no-repeat bottom center;min-height: 1040px;max-width: 1170px;margin: 0 auto}
.section1 .slider a{position: absolute;display: block;text-indent: -5000px;overflow: hidden;}
.section1 .slider #Choco_numsetIndex_1{top:5%;left: 1%;width: 37%;height: 42%}
.section1 .slider #Choco_numsetIndex_2{top:1%;right: 2%;width: 35%;height: 40%}
.section1 .slider #Choco_numsetIndex_3{bottom:12%;left: 19%;width: 36%;height: 39%}
.section1 .slider #Choco_numsetIndex_4{bottom:1%;right: 2%;width: 39%;height: 44%}

.section2 {color:#B6B5BA;background: #232228;text-align: center;padding-bottom:90px}
.section2 .col{display: inline-block;width: 300px;text-align: left;margin:0 40px}
.section2 h2{color:#B6B5BA;margin-bottom: 90px}
.section2 h3{color:#FF9000;font-size:28px;font-weight: 100}
.section2 h3:before{content:"";display: inline-block;vertical-align: middle;margin-right:13px}
.section2 h3.kansha:before{background: url(../img/icon-kansha.png);width: 24px;height: 41px}
.section2 h3.board:before{background: url(../img/icon-board.png);width: 48px;height: 39px}
.section2 h3.card:before{background: url(../img/icon-card.png);width: 44px;height: 33px}
.section2 ul{padding-left:40px}
.section3 {background: #f9a825;text-align: center;padding-bottom:90px}
.section3 h2{font-size: 42px;text-align: left}
.section3 .col{width: 300px;display: inline-block;vertical-align: top;text-align: left}
.section3 .button{width:25%;font-size:32px;text-decoration:none;display: inline-block;padding:30px 10px;vertical-align: top;text-transform: uppercase;background: #fddca9;border:1px solid #fbf0d4;margin:0 120px;position: relative;top:150px}
.section3 ul{padding-left:0}
footer{text-align: center}
footer h2{margin-bottom: 50px}
footer .part{display: inline-block;margin:0 50px 50px 0}
footer .part1{background: url(../img/part1.jpg);width:100px;height: 100px}
footer .part2{background: url(../img/part2.png);width:224px;height: 100px;background-size: 224px 100px;filter: grayscale(1)}
footer .part3{background: url(../img/part3.png);width:227px;height: 100px;background-size: 227px 100px;filter: grayscale(1)}
footer .part4{background: url(../img/part4.jpg);width:92px;height: 100px}
footer .part5{background: url(../img/part5.png);width:92px;height: 100px;background-size: 92px 100px;filter: grayscale(1)}
footer .copyright{margin:20px 10% 70px 10%;padding-top:38px;border-top:1px solid #faa725;font-family: 'Roboto', sans-serif}

.body-login .wrap{background:#F5F5F5;color:#1f1f2d;position: relative;padding: 0;margin-top: 10%}
.body-login .wrap .message{text-align: center;font-size: 21px;background: white;padding:15px}   
.body-login .wrap .container{display: table;margin: auto}
.body-login .wrap #application_title{display: table-cell;background: url(../img/logo.png) no-repeat;width: 173px;height: 315px;margin-left:53px}
.body-login .wrap #application_title h1{display: none}
.body-login .wrap #application{display: table-cell;vertical-align: top;width: 680px;padding-left: 20px}
.body-login .wrap #application{position: relative}
.body-login .wrap #application h1{padding-top: 15px;font-size: 37px; font-weight: 300}
.body-login .wrap #application form{position: relative}
.body-login .wrap #application label{display: block;font-size: 22px;font-weight: 300}
.body-login .wrap #application input[type="text"],
.body-login .wrap #application input[type="password"]{border:0;padding:10px}
.body-login .wrap #application .btn{background: #F49B25;color:#333;border: 0;display: inline-block;font-size: 17px;padding: 20px 30px;position: relative;text-decoration: none;   text-transform: uppercase;position: absolute;top:63px;left:260px}
.body-login .error {position: absolute;top: -25px;background: rgba(0, 0, 0, 0) url("../img/warning.png") no-repeat left center;color: #c22e2e;padding-left: 25px}
.body-login .notyet {padding-top:10px}
.body-login .or {font-size:37px;font-weight: 300;position: relative;display: block;text-align: center;position: absolute;top:35px;bottom: 35px;left: 450px}
.body-login .or:after {content:"";display: block;height: 100%;width: 1px;background:#1f1f2d;position: absolute;top:0}
.body-login .or .text {position: relative;z-index: 20;background: #F5F5F5;padding: 0;top:40%;position: absolute;left: -20px}
.body-login #oauthLogin img {display: block;margin: 0 auto;width: 170px;position: absolute;left: 500px;top:44%}
.body-login .credits{text-align: center}



@media (max-height: 925px) {
    header{height:100%;min-height: 500px}
   
}

@media (max-height: 600px) {
    header .title{bottom: 0}   
}

@media (max-width: 600px) {
    header .title .button{font-size: 20px}
    header .title h1 small{line-height: 29px;padding-top: 12px}
    .body-login .wrap{margin-top: 0} 
    .body-login .wrap .message{font-size: 18px;background:#b42121;color: white}  
    .body-login .wrap .container{width: 88%}
    .body-login .wrap #application_title{display: block;margin: 0 auto}
    .body-login .wrap #application{display: block;width: 100%;padding: 10px;box-sizing: border-box}
    .body-login .wrap #application h1{text-align: center}
    .body-login .wrap #application form{padding-right:0px}    
    .body-login .wrap #application input[type="text"],
    .body-login .wrap #application input[type="password"]{width: 100%}    
    .body-login .wrap #application .btn{position: static;width: 100%;margin: 20px 0;width: 100%}
    .body-login .or {font-size:37px;font-weight: 300;position: relative;display: block;text-align: center;top:0;left:0;right: 0}
    .body-login .or:after {content:"";display: block;height: 1px;width: 100%;background:#1f1f2d;position: absolute;top:32px}
    .body-login .or .text {position: relative;z-index: 20;padding: 0 20px;left: inherit}    
    .body-login #oauthLogin img {position: static}
}


@media (max-width: 1200px) {    
    header .logo{width: 106px;height: 195px;background-size: 100%}
    .section1{min-height: inherit}
    .section1 .slider{min-height: inherit;background-size: 100%;padding-bottom:90%}
    .section2 h2{margin-bottom: 10px}
    .section2 .col{width: 100%;text-align: center;padding:20px;margin: 0}
    .section2 ul{padding-left:0}
    .section3 h2{text-align: center}
    .section3 .col{width: 100%;text-align: center;padding:20px;margin: 0}
    .section3 .button{top:30px;width: 90%;margin: 0;max-width:340px}    
}

@media (max-width: 1080px) {    
    header .title{height:284px;left: 0;right: 0;}    
    header .title h1{font-size: 106px;padding-top: 20px;line-height: 61px}
    header .title h1 small{font-size: 27px}
}