[class*="h-"] {
  	float: left;
  	width: 100%;
}

[class*="w-"] {
	float: left;
}

.h-1
{
	height: calc((1/12) * 100vh);
}

.h-2
{
	height: calc((2/12) * 100vh);
}

.h-3
{
	height: calc((3/12) * 100vh);
}

.h-4
{
	height: calc((4/12) * 100vh);
}

.h-5
{
	height: calc((5/12) * 100vh);
}

.h-6
{
	height: calc((6/12) * 100vh);
}

.h-7
{
	height: calc((7/12) * 100vh);
}

.h-8
{
	height: calc((8/12) * 100vh);
}

.h-9
{
	height: calc((9/12) * 100vh);
}

.h-10
{
	height: calc((10/12) * 100vh);
}

.h-11
{
	height: calc((11/12) * 100vh);
}

.h-12
{
	height: calc((12/12) * 100vh);
}

.w-1
{
	width: calc((1/12) * 100%);
}

.w-2
{
	width: calc((2/12) * 100%);
}

.w-3
{
	width: calc((3/12) * 100%);
}

.w-4
{
	width: calc((4/12) * 100%);
}

.w-5
{
	width: calc((5/12) * 100%);
}

.w-6
{
	width: calc((6/12) * 100%);
}

.w-7
{
	width: calc((7/12) * 100%);
}

.w-8
{
	width: calc((8/12) * 100%);
}

.w-9
{
	width: calc((9/12) * 100%);
}

.w-10
{
	width: calc((10/12) * 100%);
}

.w-11
{
	width: calc((11/12) * 100%);
}

.w-12
{
	width: calc((12/12) * 100%);
}

@media only screen and (min-width: 576px) {
	.h-sm-1
    {
    	height: calc((1/12) * 100vh);

    }

    .h-sm-2
    {
    	height: calc((2/12) * 100vh);

    }

    .h-sm-3
    {
    	height: calc((3/12) * 100vh);

    }

    .h-sm-4
    {
    	height: calc((4/12) * 100vh);

    }

    .h-sm-5
    {
    	height: calc((5/12) * 100vh);

    }

    .h-sm-6
    {
    	height: calc((6/12) * 100vh);

    }

    .h-sm-7
    {
    	height: calc((7/12) * 100vh);

    }

    .h-sm-8
    {
    	height: calc((8/12) * 100vh);

    }

    .h-sm-9
    {
    	height: calc((9/12) * 100vh);

    }

    .h-sm-10
    {
    	height: calc((10/12) * 100vh);

    }

    .h-sm-11
    {
    	height: calc((11/12) * 100vh);

    }

    .h-sm-12
    {
    	height: calc((12/12) * 100vh);

    }

    .w-sm-1
    {
    	width: calc((1/12) * 100%);
    }

    .w-sm-2
    {
    	width: calc((2/12) * 100%);
    }

    .w-sm-3
    {
    	width: calc((3/12) * 100%);
    }

    .w-sm-4
    {
    	width: calc((4/12) * 100%);
    }

    .w-sm-5
    {
    	width: calc((5/12) * 100%);
    }

    .w-sm-6
    {
    	width: calc((6/12) * 100%);
    }

    .w-sm-7
    {
    	width: calc((7/12) * 100%);
    }

    .w-sm-8
    {
    	width: calc((8/12) * 100%);
    }

    .w-sm-9
    {
    	width: calc((9/12) * 100%);
    }

    .w-sm-10
    {
    	width: calc((10/12) * 100%);
    }

    .w-sm-11
    {
    	width: calc((11/12) * 100%);
    }

    .w-sm-12
    {
    	width: calc((12/12) * 100%);
    }
}

@media only screen and (min-width: 768px) {
	.h-md-1
    {
    	height: calc((1/12) * 100vh);

    }

    .h-md-2
    {
    	height: calc((2/12) * 100vh);

    }

    .h-md-3
    {
    	height: calc((3/12) * 100vh);

    }

    .h-md-4
    {
    	height: calc((4/12) * 100vh);

    }

    .h-md-5
    {
    	height: calc((5/12) * 100vh);

    }

    .h-md-6
    {
    	height: calc((6/12) * 100vh);

    }

    .h-md-7
    {
    	height: calc((7/12) * 100vh);

    }

    .h-md-8
    {
    	height: calc((8/12) * 100vh);

    }

    .h-md-9
    {
    	height: calc((9/12) * 100vh);

    }

    .h-md-10
    {
    	height: calc((10/12) * 100vh);

    }

    .h-md-11
    {
    	height: calc((11/12) * 100vh);

    }

    .h-md-12
    {
    	height: calc((12/12) * 100vh);

    }

    .w-md-1
    {
    	width: calc((1/12) * 100%);
    }

    .w-md-2
    {
    	width: calc((2/12) * 100%);
    }

    .w-md-3
    {
    	width: calc((3/12) * 100%);
    }

    .w-md-4
    {
    	width: calc((4/12) * 100%);
    }

    .w-md-5
    {
    	width: calc((5/12) * 100%);
    }

    .w-md-6
    {
    	width: calc((6/12) * 100%);
    }

    .w-md-7
    {
    	width: calc((7/12) * 100%);
    }

    .w-md-8
    {
    	width: calc((8/12) * 100%);
    }

    .w-md-9
    {
    	width: calc((9/12) * 100%);
    }

    .w-md-10
    {
    	width: calc((10/12) * 100%);
    }

    .w-md-11
    {
    	width: calc((11/12) * 100%);
    }

    .w-md-12
    {
    	width: calc((12/12) * 100%);
    }
}

@media only screen and (min-width: 992px) {
	.h-lg-1
    {
    	height: calc((1/12) * 100vh);

    }

    .h-lg-2
    {
    	height: calc((2/12) * 100vh);

    }

    .h-lg-3
    {
    	height: calc((3/12) * 100vh);

    }

    .h-lg-4
    {
    	height: calc((4/12) * 100vh);

    }

    .h-lg-5
    {
    	height: calc((5/12) * 100vh);

    }

    .h-lg-6
    {
    	height: calc((6/12) * 100vh);

    }

    .h-lg-7
    {
    	height: calc((7/12) * 100vh);

    }

    .h-lg-8
    {
    	height: calc((8/12) * 100vh);

    }

    .h-lg-9
    {
    	height: calc((9/12) * 100vh);

    }

    .h-lg-10
    {
    	height: calc((10/12) * 100vh);

    }

    .h-lg-11
    {
    	height: calc((11/12) * 100vh);

    }

    .h-lg-12
    {
    	height: calc((12/12) * 100vh);

    }

    .w-lg-1
    {
    	width: calc((1/12) * 100%);
    }

    .w-lg-2
    {
    	width: calc((2/12) * 100%);
    }

    .w-lg-3
    {
    	width: calc((3/12) * 100%);
    }

    .w-lg-4
    {
    	width: calc((4/12) * 100%);
    }

    .w-lg-5
    {
    	width: calc((5/12) * 100%);
    }

    .w-lg-6
    {
    	width: calc((6/12) * 100%);
    }

    .w-lg-7
    {
    	width: calc((7/12) * 100%);
    }

    .w-lg-8
    {
    	width: calc((8/12) * 100%);
    }

    .w-lg-9
    {
    	width: calc((9/12) * 100%);
    }

    .w-lg-10
    {
    	width: calc((10/12) * 100%);
    }

    .w-lg-11
    {
    	width: calc((11/12) * 100%);
    }

    .w-lg-12
    {
    	width: calc((12/12) * 100%);
    }
}

@media only screen and (min-width: 1200px) {
	.h-xl-1
    {
    	height: calc((1/12) * 100vh);

    }

    .h-xl-2
    {
    	height: calc((2/12) * 100vh);

    }

    .h-xl-3
    {
    	height: calc((3/12) * 100vh);

    }

    .h-xl-4
    {
    	height: calc((4/12) * 100vh);

    }

    .h-xl-5
    {
    	height: calc((5/12) * 100vh);

    }

    .h-xl-6
    {
    	height: calc((6/12) * 100vh);

    }

    .h-xl-7
    {
    	height: calc((7/12) * 100vh);

    }

    .h-xl-8
    {
    	height: calc((8/12) * 100vh);

    }

    .h-xl-9
    {
    	height: calc((9/12) * 100vh);

    }

    .h-xl-10
    {
    	height: calc((10/12) * 100vh);

    }

    .h-xl-11
    {
    	height: calc((11/12) * 100vh);

    }

    .h-xl-12
    {
    	height: calc((12/12) * 100vh);

    }

    .w-xl-1
    {
    	width: calc((1/12) * 100%);
    }

    .w-xl-2
    {
    	width: calc((2/12) * 100%);
    }

    .w-xl-3
    {
    	width: calc((3/12) * 100%);
    }

    .w-xl-4
    {
    	width: calc((4/12) * 100%);
    }

    .w-xl-5
    {
    	width: calc((5/12) * 100%);
    }

    .w-xl-6
    {
    	width: calc((6/12) * 100%);
    }

    .w-xl-7
    {
    	width: calc((7/12) * 100%);
    }

    .w-xl-8
    {
    	width: calc((8/12) * 100%);
    }

    .w-xl-9
    {
    	width: calc((9/12) * 100%);
    }

    .w-xl-10
    {
    	width: calc((10/12) * 100%);
    }

    .w-xl-11
    {
    	width: calc((11/12) * 100%);
    }

    .w-xl-12
    {
    	width: calc((12/12) * 100%);
    }
}