html, body{
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
img{display: block;}
.bd{
background: #ccc;
}
.clear{
clear: both;
}
.inline-block{display: inline;}
.fl{float: left;}
.fr{float: right;}
.fl-lg{float: left;}
.fr-lg{float: right;}
/* Containers */
.con-1200{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.con-960{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.con-720{
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.con-clear{
}
/* Columns */
.col-lg-w100{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-lg-w75{
width: calc(75% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-lg-w50{
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-lg-w33{
width: calc(33.33333333333333% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-lg-w25{
width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-lg-w20{
width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-lg-w16{
width: calc(16,66666666666667% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
/* Blocks */
.w100{
width: 100%;
}
.w50{
width: 50%;
}
.w33{
width: 33.33333333333333%;
}
.w25{
width: 25%;
}
.w20{
width: 20%;
}
.w16{
width: 16,66666666666667%;
}
/* md */
@media screen and (max-width: 1200px)
{
.clear-md{clear: both;}
.con-1200{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
}
.con-clear{
width: calc(100% + 30px);
margin-left: -15px;
}
.col-md-w100{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-md-w75{
width: calc(75% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-md-w50{
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-md-w33{
width: calc(33.33333333333333% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-md-w25{
width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-md-w20{
width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-md-w16{
width: calc(16,66666666666667% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
}
@media screen and (max-width: 960px)
{
.con-960{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
}
}
/* */
@media screen and (max-width: 768px)
{
}
@media screen and (max-width: 720px)
{
.con-720{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
}
}
@media screen and (max-width: 480px)
{
.col-lg-w100, .col-lg-w75, .col-lg-w50, .col-lg-w33, .col-lg-w25, .col-lg-w20, .col-lg-w16
.col-md-w100, .col-md-w75, .col-md-w50, .col-md-w33, .col-md-w25, .col-md-w20, .col-md-w16{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
float: none;
}
.col-xs-w100{
width: calc(100% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-xs-w75{
width: calc(75% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-xs-w50{
width: calc(50% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-xs-w33{
width: calc(33.33333333333333% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-xs-w25{
width: calc(25% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-xs-w20{
width: calc(20% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
.col-xs-w16{
width: calc(16,66666666666667% - 30px);
margin-left: 15px;
margin-right: 15px;
float: left;
}
}