/*------------------------------------*\
            import.css
\*------------------------------------*/
/*
    * General.....................General use
    * Import
    * Export
    * Image-sequence
    * Media Query.................RWD Setting
*/







/*------------------------------------
            $General
------------------------------------*/

@media screen and (max-width: 991px){
    .flex-container {
        flex-direction: column !important;
    }
}

/*------------------------------------
            $Import
------------------------------------*/





/*------------------------------------
            $Export
------------------------------------*/
.export{ background-color: #bedfeb; }
.export a{ color: #198da8; }
.export a:hover{ 
    color: #198da8;
    text-decoration: underline; 
}
.export a:focus,
.export a:active,
.export a:active:focus{ color: #198da8; outline: none; }

    .export-format .format{ float: left; }
    .export-format .format:first-child{ width: 35%; }
    .export-format .format:nth-child(2){ width: 35%; }
    .export-format .format:last-child{ width: 30%; }
    .export-format .title{ 
        color: #198da8;
        text-align: center; 
    }





/*------------------------------------
            $Image-sequence
------------------------------------*/
.image-sequence{ background-color: #f8f8f8;}





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 991px){
    /*------------------------------------
                $Export
    ------------------------------------*/
    .export img{ margin: 0 auto; }
    .export-format .format:first-child{ width: 50%; }
    .export-format .format:nth-child(2){ width: 50%; }
    .export-format .format:last-child{ width: 50%; }
}

@media screen and (max-width: 767px){
    /*------------------------------------
                $Export
    ------------------------------------*/
    .export-format .format:first-child{ width: 100%; }
    .export-format .format:nth-child(2){ width: 100%; }
    .export-format .format:last-child{ width: 100%; }
}



/*------------------------------------
            $ae-banner
------------------------------------*/
.ae-banner {
    background-image: url("../../images/features/cartoon maker/AE-banner.jpg");
    background-size: cover;
    background-position: 80%;
    text-align: center;
}

.ae-banner img:first-child{
    margin-right: 7px;
    width: calc(1.125vw + 56.4px);
}

.ae-banner img:last-child{
    margin-left: 7px;
    width: calc(1.125vw + 56.4px);
}

.ae-banner h2 {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(0.3125vw + 34px)
}

@media screen and (max-width: 768px) {
    .ae-banner  {
        background-image: url("../../images/features/cartoon maker/AE-banner-mobile.jpg");
        background-position: 55%;
    }
}