/* GRID SYSTEM */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {display: block;}

.roward {box-sizing: border-box;display: -ms-flexbox;display: -webkit-box;display: flex; -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; -ms-flex-direction: row;  -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: auto; margin-left: auto;}

.container {padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:50px}
@media only screen and (min-width:100px) and (max-width:767px){
.container {padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:30px}
}


.roward [class^="colard"] {float:left}
@media only screen and (min-width:100px) and (max-width:767px){
.roward {padding-left:0; padding-right:0;}
}
.colard-3{width: 33.33%;}
.colard-4{width: 25%;}
.colard-5{width: 20%;}
.colard-6{width: 50%;}

.colard-7{width: 80%;}
.colard-8{width: 75%;}
.colard-9{width: 66.67%;}
.colard-12{width: 100%;}

.colard-60{width: 60%;}
.colard-40{width: 40%;}

.roward.reverse {-ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse;}

@media only screen and (min-width:100px) and (max-width:767px){
.colard-3,.colard-4,.colard-5,.colard-6,.colard-7,.colard-8,.colard-9,.colard-12,.colard-60,.colard-40{width: 100%;}
.col-mb-6{width: 50%;}
.col-mb-4{width: 25%;}
.col-mb-5{width: 20%;}
.col-mb-3{width: 33.33%;}
}


@media (min-width: 768px) {
.roward {width: 750px;}
}
@media (min-width: 992px) {
.roward {width: 970px;}
}
@media (min-width: 1200px) {
.roward {width: 1122px;}
}

@media (min-width: 1300px) {
.roward {width: 1200px;}
}

.box{min-height:10px; padding:15px;}
@media only screen and (min-width:100px) and (max-width:767px){
.box{padding:0;}
}

/* GRID PART */
.section-part {padding:35px 12px;}/*before roward*/
.section-content {padding:15px;}/*in roward*/
.content-box {padding:15px}/*after colard*/
@media only screen and (min-width:100px) and (max-width:767px){
.section-part {padding:25px 0;}
.section-content {padding:15px;}
.content-box {padding:8px}
}


/* POSITIONING */
.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;margin-left: auto; margin-right: auto;}
.justify {text-align: justify;}