.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}

.container{

    max-width: $container-max-width;
    margin: auto;

    @include padding-left(0.5);
    @include padding-right(0.5);

    @media screen and (min-width: $phablet-breakpoint){
        
        @include padding-left(1);
        @include padding-right(1);
    }
}

.hero-body{
    .container{
        padding-left: 0;
        padding-right: 0;
    }
}

.justify{
    text-align: justify;
    hyphens: auto;
}

.measure{

    max-width: $measure+em;
    
    @include padding-left(2);
    @include padding-right(2);

    
    @media screen and (min-width: $tablet-breakpoint){ 

        h1{
            
            @include margin-left($measure-h1-margin-left);
        }

        h2{
            
            @include margin-left($measure-h2-margin-left);
        }

        h3{
            
            @include margin-left($measure-h3-margin-left);
        }
    }
}

.margin-auto{
    margin-left: auto;
    margin-right: auto;
}

@for $i from 0 through 20{

    .height-#{$i}{
        @include height($i);
    }

    .width-#{$i}{
        @include width($i);
    }
    
    .min-width-#{$i}{
        @include min-width($i);
    }

    .padding-#{$i}{
        @include padding-top($i);
        @include padding-right($i);
        @include padding-bottom($i);
        @include padding-left($i);
    }

    .padding-#{$i}-5{
        @include padding-top($i+0.5);
        @include padding-right($i+0.5);
        @include padding-bottom($i+0.5);
        @include padding-left($i+0.5);
    }

    .margin-#{$i}{
        @include margin-top($i);
        @include margin-right($i);
        @include margin-bottom($i);
        @include margin-left($i);
    }

    .margin-#{$i}-5{
        @include margin-top($i+0.5);
        @include margin-right($i+0.5);
        @include margin-bottom($i+0.5);
        @include margin-left($i+0.5);
    }

    .margin-#{$i}-auto{
        @include margin-top($i);
        @include margin-bottom($i);
        margin-right:auto;
        margin-left:auto;
    }

    .top-#{$i}{
        @include top($i);
    }

    .right-#{$i}{
        @include right($i);
    }

    .left-#{$i}{
        @include left($i);
    }

    .bottom-#{$i}{
        @include bottom($i);
    }

    .padding-top-#{$i}{
        @include padding-top($i);
    }

    .padding-top-#{$i}-5{
        @include padding-top($i+0.5);
    }

    .padding-bottom-#{$i}{
        @include padding-bottom($i);
    }

    .padding-bottom-#{$i}-5{
        @include padding-bottom($i+0.5);
    }

    .padding-left-#{$i}{
        @include padding-left($i);
    }

    .padding-left-#{$i}-5{
        @include padding-left($i+0.5);
    }

    .padding-right-#{$i}{
        @include padding-right($i);
    }

    .padding-right-#{$i}-5{
        @include padding-right($i+0.5);
    }
    
    .margin-top-#{$i}{
        @include margin-top($i);
    }

    .margin-top-#{$i}-5{
        @include margin-top($i+0.5);
    }

    .margin-bottom-#{$i}{
        @include margin-bottom($i);
    }

    .margin-bottom-#{$i}-5{
        @include margin-bottom($i+0.5);
    }

    .margin-left-#{$i}{
        @include margin-left($i);
    }

    .margin-left-#{$i}-5{
        @include margin-left($i+0.5);
    }

    .margin-right-#{$i}{
        @include margin-right($i);
    }

    .margin-right-#{$i}-5{
        @include margin-right($i+0.5);
    }
}

.grid{
    @include grid();
}

.flex-row{
    display: flex;
    flex-direction: row;
}
.flex-col{
    display: flex;
    flex-direction: column;
}

.flex-1{
    flex:1;
}
.flex-2{
    flex:2;
}
.flex-3{
    flex:3;
}
.flex-4{
    flex:4;
}

.fullwidth{
    width: 100%;
    box-sizing: border-box;
}

.fullheight{
    min-height: 100vh;
}

.desktop-only{

    @media not screen and (min-width: $tablet-breakpoint){ 

        display: none;
    }
}

.mobile-only{

    @media screen and (min-width: $tablet-breakpoint){ 

        display: none;
    }
}

.cursor-pointer{
    cursor: pointer;
}


// $phablet-breakpoint: 37em !default;
// $tablet-breakpoint: 48em !default;
// $desktop-breakpoint: 64em !default;
// $large-desktop-breakpoint: 80em !default;

.close-icon{

    &::after{
        cursor: pointer;
        content: '\f057';
        font-weight: 900;
        font-family: "Font Awesome 5 Free";
        position: absolute;
        @include right(0.5);
        top:0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        @if( $hover-animation==true ){
            transition: opacity $hover-animation-duration ;
        }
    }
    

    &:hover{
        &::after{
        opacity: 0.7;
        }
    }
}

.relative{
    position: relative;
}

.text-small{
    @include font-size(0.5);
}

.text-medium{
    @include font-size(2);
    @include line-height(1.25);
}

.text-big{
    @include font-size(3);
    @include line-height(1.5);
}