/************************************************************************************************************************/

/*
    AUTHOR:         Allthetopbananas.com
    DESCRIPTION:    helper.css stylesheet contains useful helper classes for spacing, arrangement and display. 
    CREATED:        16/11/2017
    LAST UPDATED:   17/07/2018
*/

/************************************************************************************************************************/

/* 
	SPACING IS ALWAYS IN MULTIPLES OF 8
	t = top
	b = bottom
	l = left
	r = right
   tb = top + bottom
   lr = left + right

	0 = 0px
	1 = 8px
	2 = 16px
	3 = 24px
	4 = 32px
	5 = 40px
	6 = 48px
	7 = 56px
    8 = 64px
    9 = 72px
   10 = 80px
*/

/* MARGINS */

.margin-auto {
    margin: 0 auto
}

.margin-0 {
    margin: 0 !important
}

.margin-t-0 {
    margin-top: 0 !important
}

.margin-b-0 {
    margin-bottom: 0 !important
}

.margin-l-0 {
    margin-left: 0 !important
}

.margin-r-0 {
    margin-right: 0 !important
}

.margin-tb-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.margin-lr-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.margin-1 {
    margin: 8px !important
}

.margin-t-1 {
    margin-top: 8px !important
}

.margin-b-1 {
    margin-bottom: 8px !important
}

.margin-l-1 {
    margin-left: 8px !important
}

.margin-r-1 {
    margin-right: 8px !important
}

.margin-tb-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important
}

.margin-lr-1 {
    margin-left: 8px !important;
    margin-right: 8px !important
}

.margin-2 {
    margin: 16px !important
}

.margin-t-2 {
    margin-top: 16px !important
}

.margin-b-2 {
    margin-bottom: 16px !important
}

.margin-l-2 {
    margin-left: 16px !important
}

.margin-r-2 {
    margin-right: 16px !important
}

.margin-tb-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.margin-lr-2 {
    margin-left: 16px !important;
    margin-right: 16px !important
}

.margin-3 {
    margin: 24px !important
}

.margin-t-3 {
    margin-top: 24px !important
}

.margin-b-3 {
    margin-bottom: 24px !important
}

.margin-l-3 {
    margin-left: 24px !important
}

.margin-r-3 {
    margin-right: 24px !important
}

.margin-tb-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important
}

.margin-lr-3 {
    margin-left: 24px !important;
    margin-right: 24px !important
}

.margin-4 {
    margin: 32px !important
}

.margin-t-4 {
    margin-top: 32px !important
}

.margin-b-4 {
    margin-bottom: 32px !important
}

.margin-l-4 {
    margin-left: 32px !important
}

.margin-r-4 {
    margin-right: 32px !important
}

.margin-tb-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important
}

.margin-lr-4 {
    margin-left: 32px !important;
    margin-right: 32px !important
}

.margin-5 {
    margin: 40px !important
}

.margin-t-5 {
    margin-top: 40px !important
}

.margin-b-5 {
    margin-bottom: 40px !important
}

.margin-l-5 {
    margin-left: 40px !important
}

.margin-r-5 {
    margin-right: 40px !important
}

.margin-tb-5 {
    margin-top: 40px !important;
    margin-bottom: 40px !important
}

.margin-lr-5 {
    margin-left: 40px !important;
    margin-right: 40px !important
}

.margin-6 {
    margin: 48px !important
}

.margin-t-6 {
    margin-top: 48px !important
}

.margin-b-6 {
    margin-bottom: 48px !important
}

.margin-l-6 {
    margin-left: 48px !important
}

.margin-r-6 {
    margin-right: 48px !important
}

.margin-tb-6 {
    margin-top: 48px !important;
    margin-bottom: 48px !important
}

.margin-lr-6 {
    margin-left: 48px !important;
    margin-right: 48px !important
}

.margin-7 {
    margin: 56px !important
}

.margin-t-7 {
    margin-top: 56px !important
}

.margin-b-7 {
    margin-bottom: 56px !important
}

.margin-l-7 {
    margin-left: 56px !important
}

.margin-r-7 {
    margin-right: 56px !important
}

.margin-tb-7 {
    margin-top: 56px !important;
    margin-bottom: 56px !important
}

.margin-lr-7 {
    margin-left: 56px !important;
    margin-right: 56px !important
}

.margin-8 {
    margin: 64px !important
}

.margin-t-8 {
    margin-top: 64px !important
}

.margin-b-8 {
    margin-bottom: 64px !important
}

.margin-l-8 {
    margin-left: 64px !important
}

.margin-r-8 {
    margin-right: 64px !important
}

.margin-tb-8 {
    margin-top: 64px !important;
    margin-bottom: 64px !important
}

.margin-lr-8 {
    margin-left: 64px !important;
    margin-right: 64px !important
}

.margin-9 {
    margin: 72px !important
}

.margin-t-9 {
    margin-top: 72px !important
}

.margin-b-9 {
    margin-bottom: 72px !important
}

.margin-l-9 {
    margin-left: 72px !important
}

.margin-r-9 {
    margin-right: 72px !important
}

.margin-tb-9 {
    margin-top: 72px !important;
    margin-bottom: 72px !important
}

.margin-lr-9 {
    margin-left: 72px !important;
    margin-right: 72px !important
}

.margin-10 {
    margin: 80px !important
}

.margin-t-10 {
    margin-top: 80px !important
}

.margin-b-10 {
    margin-bottom: 80px !important
}

.margin-l-10 {
    margin-left: 80px !important
}

.margin-r-10 {
    margin-right: 80px !important
}

.margin-tb-10 {
    margin-top: 80px !important;
    margin-bottom: 80px !important
}

.margin-lr-10 {
    margin-left: 80px !important;
    margin-right: 80px !important
}

/* END OF MARGINS */

/* PADDINGS */

.padding-0 {
    padding: 0 !important
}

.padding-t-0 {
    padding-top: 0 !important
}

.padding-b-0 {
    padding-bottom: 0 !important
}

.padding-l-0 {
    padding-left: 0 !important
}

.padding-r-0 {
    padding-right: 0 !important
}

.padding-tb-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.padding-lr-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.padding-1 {
    padding: 8px !important
}

.padding-t-1 {
    padding-top: 8px !important
}

.padding-b-1 {
    padding-bottom: 8px !important
}

.padding-l-1 {
    padding-left: 8px !important
}

.padding-r-1 {
    padding-right: 8px !important
}

.padding-tb-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.padding-lr-1 {
    padding-left: 8px !important;
    padding-right: 8px !important
}

.padding-2 {
    padding: 16px !important
}

.padding-t-2 {
    padding-top: 16px !important
}

.padding-b-2 {
    padding-bottom: 16px !important
}

.padding-l-2 {
    padding-left: 16px !important
}

.padding-r-2 {
    padding-right: 16px !important
}

.padding-tb-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.padding-lr-2 {
    padding-left: 16px !important;
    padding-right: 16px !important
}

.padding-3 {
    padding: 24px !important
}

.padding-t-3 {
    padding-top: 24px !important
}

.padding-b-3 {
    padding-bottom: 24px !important
}

.padding-l-3 {
    padding-left: 24px !important
}

.padding-r-3 {
    padding-right: 24px !important
}

.padding-tb-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.padding-lr-3 {
    padding-left: 24px !important;
    padding-right: 24px !important
}

.padding-4 {
    padding: 32px !important
}

.padding-t-4 {
    padding-top: 32px !important
}

.padding-b-4 {
    padding-bottom: 32px !important
}

.padding-l-4 {
    padding-left: 32px !important
}

.padding-r-4 {
    padding-right: 32px !important
}

.padding-tb-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.padding-lr-4 {
    padding-left: 32px !important;
    padding-right: 32px !important
}

.padding-5 {
    padding: 40px !important
}

.padding-t-5 {
    padding-top: 40px !important
}

.padding-b-5 {
    padding-bottom: 40px !important
}

.padding-l-5 {
    padding-left: 40px !important
}

.padding-r-5 {
    padding-right: 40px !important
}

.padding-tb-5 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
}

.padding-lr-5 {
    padding-left: 40px !important;
    padding-right: 40px !important
}

.padding-6 {
    padding: 48px !important
}

.padding-t-6 {
    padding-top: 48px !important
}

.padding-b-6 {
    padding-bottom: 48px !important
}

.padding-l-6 {
    padding-left: 48px !important
}

.padding-r-6 {
    padding-right: 48px !important
}

.padding-tb-6 {
    padding-top: 48px !important;
    padding-bottom: 48px !important
}

.padding-lr-6 {
    padding-left: 48px !important;
    padding-right: 48px !important
}

.padding-7 {
    padding: 56px !important
}

.padding-t-7 {
    padding-top: 56px !important
}

.padding-b-7 {
    padding-bottom: 56px !important
}

.padding-l-7 {
    padding-left: 56px !important
}

.padding-r-7 {
    padding-right: 56px !important
}

.padding-tb-7 {
    padding-top: 56px !important;
    padding-bottom: 56px !important
}

.padding-lr-7 {
    padding-left: 56px !important;
    padding-right: 56px !important
}

.padding-8 {
    padding: 64px !important
}

.padding-t-8 {
    padding-top: 64px !important
}

.padding-b-8 {
    padding-bottom: 64px !important
}

.padding-l-8 {
    padding-left: 64px !important
}

.padding-r-8 {
    padding-right: 64px !important
}

.padding-tb-8 {
    padding-top: 64px !important;
    padding-bottom: 64px !important
}

.padding-lr-8 {
    padding-left: 64px !important;
    padding-right: 64px !important
}

.padding-9 {
    padding: 72px !important
}

.padding-t-9 {
    padding-top: 72px !important
}

.padding-b-9 {
    padding-bottom: 72px !important
}

.padding-l-9 {
    padding-left: 72px !important
}

.padding-r-9 {
    padding-right: 72px !important
}

.padding-tb-9 {
    padding-top: 72px !important;
    padding-bottom: 72px !important
}

.padding-lr-9 {
    padding-left: 72px !important;
    padding-right: 72px !important
}

.padding-10 {
    padding: 80px !important
}

.padding-t-10 {
    padding-top: 80px !important
}

.padding-b-10 {
    padding-bottom: 80px !important
}

.padding-l-10 {
    padding-left: 80px !important
}

.padding-r-10 {
    padding-right: 80px !important
}

.padding-tb-10 {
    padding-top: 80px !important;
    padding-bottom: 80px !important
}

.padding-lr-10 {
    padding-left: 80px !important;
    padding-right: 80px !important
}

/* END OF PADDINGS */

/* BORDERS */

.border-0 {
    border: none !important
}

.border-hidden {
    border-color: transparent !important
}

/* END OF BORDERS */

/* float none */

.pull-none {
    float: none !important
}

/* HORIZONTAL AND VERTICAL CENTER  */

/* add this class to the parent container */

.absolute-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    width: 100%;
}

/* END OF HORIZONTAL AND VERTICAL CENTER */

.block {
    display: block !important
}

.iblock {
    display: inline-block !important
}

.flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

/* TWO COLUMNS(DIVs) WITH EQUAL HEIGHT */

/* DIVs container */

.equal-heights {
    width: 100%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

/* DIV's content */

.equal-heights-content {
    width: 50%;
    height: auto
}

@media (max-width: 767px) {
    .equal-heights {
        width: 100%;
        display: block !important;
    }
    .equal-heights-content {
        width: 100%;
    }
}

/* END OF TWO COLUMNS(DIVs) WITH EQUAL HEIGHT */

/* COLUMNS WITH EQUAL HEIGHTS */

/* column container */

.flex-list-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    list-style-type: none;
}

/* individual column wrapper */

.flex-list-item-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* column content */

.flex-list-content-cards {
    width: 100%;
}

/* Safari only hack for flex-list auto wrapping - n.b. leave a 1px gap between the cards only in Safari*/

.flex-list-item-cards:not(:root:root) {
    margin: 0 -1px
}

/* END OF COLUMNS WITH EQUAL HEIGHTS */

/* EQUAL WIDTH ROW DISTRIBUTED DYNAMIC COLUMNS */

.flex-row {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: start;
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-column {
    -ms-flex-order: 0;
    -webkit-box-ordinal-group: 1;
    order: 0;
    -ms-flex: 0 1 auto;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

/* END OF EQUAL WIDTH ROW DISTRIBUTED DYNAMIC COLUMNS */

/* display a not-allowed cursor for any element which is disabled */

.disabled,
:disabled,
[disabled] {
    cursor: not-allowed !important
}

/* default web safe fonts for input type password - used since some custom fonts display smaller */

input[type=password] {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 2px
}

/* wrap text to the next line */

.text-wrap {
    word-wrap: break-word !important;
}

/* For longer content, you can add a .text-truncate class to truncate the text with an ellipsis */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
}

/* capitalise the first character */

.text-capital {
    text-transform: capitalize;
}


/* HYPERLINK AS HAND CURSOR AND BUTTON AS DEFAULT POINTER - Because hyperlink is always represented as a hand cursor */

a {
    cursor: pointer
}

button {
    cursor: default
}

/* in case you can't change the html element and need a class */

.cur-link {
    cursor: pointer
}

.cur-btn {
    cursor: default
}

/* FILE UPLOAD */

/*
    <div class="fileUpload btn btn-primary">upload picture
        <input type="file" id="filecv" class="upload">
    </div>
*/

.fileUpload {
    position: relative;
    overflow: hidden;
    cursor: default
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    height: 100%;
}


/*** MEDIA QUERIES ***/

/*** xs is exclusive | sm, md and lg inherits from sm ***/

/* xs devices <768px  */

@media (max-width: 767px) {

    .text-center-xs {
        text-align: center !important;
    }
    .text-left-xs {
        text-align: left !important;
    }
    .text-right-xs {
        text-align: right !important;
    }
}

/* sm devices 768px - 991px */

@media (min-width: 768px) {
    .text-center-sm {
        text-align: center !important;
    }
    .text-left-sm {
        text-align: left !important;
    }
    .text-right-sm {
        text-align: right !important;
    }
}

/* md devices 992px - 1199px */

@media (min-width: 992px) {
    .text-center-md {
        text-align: center !important;
    }
    .text-left-md {
        text-align: left !important;
    }
    .text-right-md {
        text-align: right !important;
    }

}

/* lg devices >1200px  */

@media (min-width: 1200px) {
    .text-center-lg {
        text-align: center !important;
    }
    .text-left-lg {
        text-align: left !important;
    }
    .text-right-lg {
        text-align: right !important;
    }

}