/*---- Body ----*/
body{
    background: url("../image/background1.png");
}
/*---- padding top & bottom ----*/
.my-padding-tb-mini{
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
}
.my-padding-tb-small-xx{
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
}
.my-padding-tb-small-x{
    padding-top: 0.6em !important;
    padding-bottom: 0.6em !important;
}
.my-padding-tb-small{
    padding-top: 0.8em !important;
    padding-bottom: 0.8em !important;
}
.my-padding-tb{
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
.my-padding-tb-big{
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}
.my-padding-tb-bigger{
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}
.my-padding-tb-large{
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}
.my-padding-tb-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

/*---- padding left & right ----*/
.my-padding-lr-mini{
    padding-left: 0.2em !important;
    padding-right: 0.2em !important;
}
.my-padding-lr-small-xx{
    padding-left: 0.4em !important;
    padding-right: 0.4em !important;
}
.my-padding-lr-small-x{
    padding-left: 0.6em !important;
    padding-right: 0.6em !important;
}
.my-padding-lr-small{
    padding-left: 0.8em !important;
    padding-right: 0.8em !important;
}
.my-padding-lr{
    padding-left: 1em !important;
    padding-right: 1em !important;
}
.my-padding-lr-big{
    padding-left: 2em !important;
    padding-right: 2em !important;
}
.my-padding-lr-bigger{
    padding-left: 3em !important;
    padding-right: 3em !important;
}
.my-padding-lr-large{
    padding-left: 4em !important;
    padding-right: 4em !important;
}
.my-padding-lr-massive{
    padding-left: 5em !important;
    padding-right: 5em !important;
}

/*---- padding ----*/
.my-padding-mini {
    padding: 0.2em !important;
}
.my-padding-small-xx {
    padding: 0.4em !important;
}
.my-padding-small-x {
    padding: 0.6em !important;
}
.my-padding-small {
    padding: 0.8em !important;
}
.my-padding {
    padding: 1em !important;
}
.my-padding-big {
    padding: 2em !important;
}
.my-padding-bigger {
    padding: 3em !important;
}
.my-padding-large {
    padding: 4em !important;
}
.my-padding-massive {
    padding: 5em !important;
}

/*---- Margin ----*/
.my-margin-mini{
    margin: 0.2em !important;
}
.my-margin-small-xx{
    margin: 0.4em !important;
}
.my-margin-small-x{
    margin: 0.6em !important;
}
.my-margin-small{
    margin: 0.8em !important;
}
.my-margin{
    margin: 1em !important;
}
.my-margin-big{
    margin: 2em !important;
}
.my-margin-bigger{
    margin: 3em !important;
}
.my-margin-large{
    margin: 4em !important;
}
.my-margin-massive{
    margin: 5em !important;
}

/*---- Margin Top & Buttom ----*/
.my-margin-tb-mini{
    margin-top: 0.2em !important;
    margin-bottom: 0.2em !important;
}
.my-margin-tb-small-xx{
    margin-top: 0.4em !important;
    margin-bottom: 0.4em !important;
}
.my-margin-tb-small-x{
    margin-top: 0.6em !important;
    margin-bottom: 0.6em !important;
}
.my-margin-tb-small{
    margin-top: 0.8em !important;
    margin-bottom: 0.8em !important;
}
.my-margin-tb{
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}
.my-margin-tb-big{
    margin-top: 2em !important;
    margin-bottom: 2em !important;
}
.my-margin-tb-bigger{
    margin-top: 3em !important;
    margin-bottom: 3em !important;
}
.my-margin-tb-large{
    margin-top: 4em !important;
    margin-bottom: 4em !important;
}
.my-margin-tb-massive{
    margin-top: 5em !important;
    margin-bottom: 5em !important;
}

/*---- Font ----*/
.my-text-thin {
    font-weight: 300 !important;
}
.my-text-spaced {
    letter-spacing: 1px !important;
}
.my-text-lined {
    line-height: 1.8 !important;
}
.my-text-searchKeyword {
    font-weight: 300 !important;
    font-size: 18px !important;
}
.my-text-childComment {
    color: teal !important;
    font-weight: 300 !important;
}
.my-text-footer {
    opacity: 0.6 !important;
    color: rgba(255,255,255,.9) !important;
    font-weight: 300 !important;
    margin: 3px auto !important;
}

/*---- opacity ----*/
.my-opacity-mini {
    opacity: 0.8 !important;
}
.my-opacity-small {
    opacity: 0.6 !important;
}
.my-opacity-middle {
    opacity: 0.4 !important;
}
.my-opacity-almost {
    opacity: 0.2 !important;
}
.my-opacity-hide {
    opacity: 0 !important;
}

/*---- Display ----*/
.my-inline-block {
    display: inline-block !important;
}

/*---- Container ----*/
.my-container-small {
    max-width: 60em !important;
    margin: auto !important;
}
.my-container {
    max-width: 72em !important;
    margin: auto !important;
}

/*---- Position ----*/
.my-top-right {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}
.my-bottom-right-fixed {
    position: fixed !important;
    right: 10px !important;
    bottom: 20px !important;
    z-index: 1 !important;
}

/*---- Mobile ----*/
.my-mobile-show {
    display: none !important;
}
.my-padding-bigger-mobile {
    padding: 3em !important;
}

@media screen and (max-width: 768px) {
    .my-mobile-hide {
        display: none !important;
    }
    .my-mobile-show {
        display: block !important;
    }
    .my-padding-lr-mobile {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .my-padding-lr-clear {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .my-mobile-wide {
        width: 100%;
    }
}