@charset "UTF-8";

/*MOBILE layout first*/

/*Page and grid structure rules*/

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
img {
    width: 100%;
    height: auto;
    padding: 20px;
}
.container {
  margin: 0 auto;
  max-width: 900px;
}
.row::before,
.row::after {
  display: table;
  content: ' ';
  clear: both;
}
.one2,.one-third,
.two-thirds,
.one-fourth,
.half {
  width: 100%;
}
/*END MOBILE layout*/



/*TABLET grid layout*/ 
@media only screen and (min-width: 560px) {
  .one {
    width: 100%;
  }
  .half {
    width: calc(100% / 2);
  }
  .one-third {
    width: calc(100% / 3);
  }
  .one-fourth {
    width: calc(100% / 4);
  }
  .two-thirds {
    width: calc(100% / 3 * 2);
  }
  .column {
    float: left;
  }
  .container {
    max-width: 760px;
  }
}
/*END TABLET grid layout*/   


/*DESKTOP grid layout*/ 
@media only screen and (min-width: 1024px) {
  
  .container {
    max-width: 1140px;
  }
}
/*END DESKTOP grid layout*/  


/*4k grid layout*/ 
@media only screen and (min-width: 1920px) {

  .container {
    max-width: 1440px;
  }
}
/*END 4k grid layout*/