
.amz{
    display: flex;
    flex-direction: column; -webkit-flex-direction: column;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch; align-content: stretch;
    transition: 0.4s ease; -webkit-transition: 0.4s ease;
    margin: auto;
}
.amz-full-height{height: 100%}
.amz-full-width{width: 100%}

.amz-row{
    display: flex; width: 100%; height: auto; vertical-align: top;
    flex-direction: row; -webkit-flex-direction: row;
    justify-content: center; flex: 1;
    flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    align-items: stretch; align-content: stretch;
    transition: 0.4s ease; -webkit-transition: 0.4s ease;
}
.amz-col{
    transition: 0.4s ease; -webkit-transition: 0.4s ease;
    width: 100%;
    /*display: inline-flex; width: 100%; height: auto;
    flex-direction: column; -webkit-flex-direction: column;*/
}

.amz-col.col-1{width: 8.33%}
.amz-col.col-2{width: 16.66%}
.amz-col.col-25{width: 20%}
.amz-col.col-3{width: 25%}
.amz-col.col-4{width: 33.33%}
.amz-col.col-5{width: 41.66%}
.amz-col.col-6{width: 50%}
.amz-col.col-7{width: 58.33%}
.amz-col.col-8{width: 66.66%}
.amz-col.col-9{width: 75%}
.amz-col.col-10{width: 83.33%}
.amz-col.col-11{width: 91.66%}
.amz-col.col-12{width: 100%}

.amz-container{
    display: block; width: 100%; height: 100%;
    vertical-align: top; position: relative;
    transition: 0.4s ease; -webkit-transition: 0.4s ease;
}
.amz-content{
    display: block; width: 100%; max-width: 65%; height: 100%;
    position: relative; margin: auto;
    padding: 10px;
}
.amz-content-wrap{
    max-width: 70%;
    position: absolute; top: 50%; left: 0; right: 0;
    transform: translateY(-50%); margin: auto;
}
.amz-content-wrap p:first-child{margin-top: 0}
.amz-content-wrap p{margin-top: 0.8em}
.amz-bg{
    display: block; width: 100%; max-width: 65%; height: auto;
    position: relative;
}

.amz-arrow-right:after,
.amz-arrow-left:before,
.amz-arrow-up:before,
.amz-arrow-down:after{
    content: '';
    border-style: solid;
    position: absolute; z-index: 1000;
    border-color: transparent;
    pointer-events: none;
    transition: 0.3s ease;
}
.amz-arrow-right:after,
.amz-arrow-left:before{
    top: 50%; transform: translateY(-50%) scale(1);
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
}
.amz-arrow-up:after{
    top: -1.8em;
    border-width: 0 2em 2em 2em;
    border-top-color: #FFF;
    transform-origin: bottom center;
}
.amz-arrow-down:before {
    bottom: -1.8em;
    border-width: 2em 2em 0 2em;
    border-bottom-color: #FFF;
    transform-origin: top center;
}

.amz-arrow-right:after{
    right: -1.8em;
    border-width: 2em 0 2em 2em;
    border-left-color: #FFF;
    transform-origin: left center;
}
.amz-arrow-left:before{
    left: -1.8em;
    border-width: 2em 2em 2em 0;
    border-right-color: #FFF;
    transform-origin: right center;
}

.amz-call-arrow{
    font-size: 24px; margin-top: 0.3em;
    pointer-events: none;
    margin-left: -30px; opacity: 0;
    transition: 0.3s ease;
    animation-name: grid-panel-call-arrow-out;
    animation-duration: 0.3s;
}

.amz-hover:hover .amz-call-arrow{
    opacity: 1; margin-left: 0; pointer-events: all;
    animation-name: grid-panel-call-arrow-in;
    animation-duration: 0.3s;
}

.amz-hover:hover .amz-bg{
    transform: scale(1.1);
}
.amz-input-holder{padding: 1em}
.amz-call-arrow>label{display: block; margin: 0;}
/*.amz-hover{cursor: pointer}*/

.amz-hover:hover .amz-arrow-right:after,
.amz-hover.amz-arrow-right:hover:after,
.amz-hover:hover .amz-arrow-left:before,
.amz-hover.amz-arrow-left:hover:before{
    transform: translateY(-50%) scale(1.4);
    -webkit-transform: translateY(-50%) scale(1.4);
    -moz-transform: translateY(-50%) scale(1.4);
    -ms-transform: translateY(-50%) scale(1.4);
    -o-transform: translateY(-50%) scale(1.4);
}
.amz-regular-icon,
.amz-super-icon,
.amz-hiper-icon,
.amz-mega-icon{
    display: block;
    position: relative; margin: auto;
    text-align: center;
    -o-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.amz-regular-icon{font-size: 5em !important}
.amz-hover:hover .amz-regular-icon{font-size: 6em !important}
.amz-super-icon{font-size: 8em !important}
.amz-hover:hover .amz-super-icon{font-size: 9em !important}

.amz-hiper-icon{font-size: 10em !important}
.amz-hover:hover .amz-hiper-icon{font-size: 12em; !important}

.amz-mega-icon{font-size: 12em !important}
.amz-hover:hover .amz-mega-icon{font-size: 14em; !important}


@media screen and (min-width: 768px) {
    .amz-arrow-right:after,
    .amz-arrow-left:before,
    .amz-arrow-up:before,
    .amz-arrow-down:after {
        content: '';
        border-style: solid;
        position: absolute;
        z-index: 1000;
        border-color: transparent;
        pointer-events: none;
        transition: 0.3s ease;
    }

    .amz-arrow-right:after,
    .amz-arrow-left:before {
        top: 50%;
        transform: translateY(-50%) scale(1);
        -webkit-transform: translateY(-50%) scale(1);
        -moz-transform: translateY(-50%) scale(1);
        -ms-transform: translateY(-50%) scale(1);
        -o-transform: translateY(-50%) scale(1);
    }

    .amz-arrow-up:after {
        top: -1.8em;
        border-width: 0 2em 2em 2em;
        border-top-color: #FFF;
        transform-origin: bottom center;
    }

    .amz-arrow-down:before {
        bottom: -1.8em;
        border-width: 2em 2em 0 2em;
        border-bottom-color: #FFF;
        transform-origin: top center;
    }

    .amz-arrow-right:after {
        right: -1.8em;
        border-width: 2em 0 2em 2em;
        border-left-color: #FFF;
        transform-origin: left center;
    }

    .amz-arrow-left:before {
        left: -1.8em;
        border-width: 2em 2em 2em 0;
        border-right-color: #FFF;
        transform-origin: right center;
    }
}
@keyframes grid-panel-call-arrow-in {
    from {margin-left: -30px; opacity: 0}
    to {margin-left: 0; opacity: 1}
}
@keyframes grid-panel-call-arrow-out {
    from {margin-left: 0; opacity: 1}
    to {margin-left: 40px; opacity: 0}
}

@media screen and (max-width: 980px) {
    /*.amz>.amz-row{
            justify-content: center; flex: 1;
            flex-direction: column; -webkit-flex-direction: column;
            flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
            align-items: stretch; align-content: stretch;
    }*/
}
@media screen and (max-width: 768px) {
    .amz{display: block;}
    .amz-row{
        flex-direction: column; -webkit-flex-direction: column;
    }
    .amz-col.col-1, .amz-col.col-2,
    .amz-col.col-3, .amz-col.col-4,
    .amz-col.col-5, .amz-col.col-6,
    .amz-col.col-7, .amz-col.col-8,
    .amz-col.col-9, .amz-col.col-10,
    .amz-col.col-11, .amz-col.col-12 {
        width: 100%; height: auto;
        min-height: 100vw;
    }


    .amz-arrow-right:after, .amz-arrow-left:before {
        width: 55px;
        right: 0;
        left: 0;
        margin: auto;
    }

    .amz-arrow-right:after {
        border-width: 2em 2em 0 2em;
        top: initial;
        bottom: -2.8em;
        border-top-color: #FFF;
        border-left-color: transparent;
        border-right-color: transparent;
    }

    .amz-arrow-left:before {
        border-width: 0 2em 2em 2em;
        top: -0.8em;
        bottom: initial;
        border-bottom-color: #FFF;
        border-left-color: transparent;
        border-right-color: transparent;
    }
}

main{display: block}

.amz-floater{
    width: 100%; height: auto;
    margin: 0 auto;
    position: relative;
}
.amz-floater-container{
    display: block; margin: 0; padding: 0;
    position: relative;
}
.amz-floater-container:after{
    content: ''; display: table;
    clear: both;
}

.amz-floater-box{
    display: block; position: relative;
    width: 100%; float: left;
}

.amz-floater-box:before{
    content: '' !important;
    display: block; padding-top: 100%;
}
.amz-floater-content{
    display: flex; width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    flex-direction: row;
}
.amz-long-content{
    padding-top: 100%;
}
.amz-floater-box .amz-floater-content-body{
    position: relative; z-index: 200;
    width: 100%; height: 100%;
    align-self: flex-end;
}
.amz-floater-box .amz-floater-content-bg{
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}
.amz-floater-box.amz-floater-wrap .amz-floater-content,
.amz-floater-box.amz-floater-wrap.amz-mobile-invert .amz-floater-content{flex-direction: row}

.amz-floater-body-content{
    display: block; width: 100%; max-width: 70%;
    position: absolute; left: 0; right: 0; margin: auto;
    top: 50%; transform: translateY(-50%);
}

.amz-floater-body-content p{margin-top: 0.8em}
.amz-floater-body-content p:first-child{margin-top: 0}

.amz-floater-box.amz-floater-right{margin-top: 0}

@media screen and (max-width: 992px){
    .amz-floater-box.amz-floater-wrap .amz-floater-content{flex-direction: row}
    .amz-floater-box.amz-floater-wrap.amz-mobile-invert .amz-floater-content{flex-direction: row-reverse}
}
@media screen and (min-width: 992px){
    .amz-floater-box{width: 50%}
    .amz-floater-box.amz-floater-full{width: 100%;}
    .amz-floater-box.amz-floater-full:before{padding-top: 50%;}
    .amz-floater-box.amz-floater-full .amz-floater-content{display: block}
    .amz-floater-box.amz-floater-full .amz-floater-content-bg{position: absolute;}

    .amz-floater-box.amz-floater-right{float: right; margin-top: -50%}
    .amz-half-fix{max-width: 50%}

}
@media screen and (min-width: 768px){
    .amz-floater-box.amz-floater-loner:before{padding-top: 100%}
    .amz-floater-box.amz-floater-wrap:before{padding-top: 50%}

    .amz-floater-box.amz-floater-desloc{margin-right: 50%}

    .amz-floater-box.clear-both{clear: both}

    /*.amz-floater-box.amz-floater-right{float: right; margin-top: -50%}*/

    .amz-floater-box.amz-floater-loner .amz-floater-content-body{align-self: flex-start}
    .amz-floater-box.amz-floater-wrap .amz-floater-content-body{align-self: flex-end}

    .amz-floater-box .amz-floater-content-body,
    .amz-floater-box .amz-floater-content-bg{
        position: relative;
        text-align: left; align-items: flex-start;
    }
    .amz-floater-box.amz-floater-wrap{height: 100%}

}
@media screen and (max-width: 768px){
    .amz-floater-box .amz-floater-content-bg{position: relative !important;}
    .amz-floater-box.amz-floater-wrap .amz-floater-content{flex-direction: column}
    .amz-floater-box.amz-floater-wrap.amz-mobile-invert .amz-floater-content{flex-direction: column-reverse}
    .amz-floater-box.amz-floater-wrap{padding-top: 100%}
    .amz-col-fixed{min-height: auto !important;}
    .amz-content-fixed{position: relative; top: 0; transform: none}
    .amz-content-wrap,
    .amz-floater-body-content{max-width: 80%}
    .amz-mobile-scroller{
        overflow-y: auto;
        padding: 20px 0;
    }
    .amz-mobile-scroller .amz-content-wrap{
        position: relative; top: 0; transform: none;
    }
}
@media screen and (max-width: 672px){
    .amz-mobile-fixed{
        height: auto; top: 0;
        position: relative; transform: none;
        padding: 20px 0;
    }
    .amz-floater-fixed{
        height: auto;
    }
    .amz-floater-box.amz-floater-wrap.amz-mobile-invert .amz-floater-content{flex-direction: column}
}
@media screen and (max-width: 320px){
    .amz-col.col-1,
    .amz-col.col-2,
    .amz-col.col-3,
    .amz-col.col-4,
    .amz-col.col-5,
    .amz-col.col-6,
    .amz-col.col-7,
    .amz-col.col-8,
    .amz-col.col-9,
    .amz-col.col-10,
    .amz-col.col-11,
    .amz-col.col-12{
        min-height: auto;
    }
    .amz-floater-box.amz-floater-wrap.amz-mini-mobile-invert .amz-floater-content{flex-direction: column-reverse}
    .amz-input-holder{padding: 0}
    .amz-long-content{
        padding-top: 0;
    }
}
