* {
    font-family: 'Montserrat', sans-serif;
}

:root {
    --color_1: #693780;
    --color_1_hover: #9b6bb0;
    --color_2: #9b6bb0;
    --color_2_hover: #693780;
    --color_3: #EDC01C;
    --color_4: #A30675;
    --color_5: #fde3ef;
    --color_white: #fff;
    --color_texto: #626163;
}

i {
    margin-right: 8px;
}

.fa-bars {
    font-size: 1.5em;
}

.ds_none {
    display: none !important;
}

.main_header {
    width: 100%;
    background-color: var(--color_1);
}

.main_header .main_header_content {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
}

.main_header .main_header_content .logo {
    flex-basis: 240px;
    max-width: 240px;
    padding: 10px 20px;
}

.main_header .main_header_content .logo img {
    width: 100%;
}

.main_header .main_header_content_menu {
    flex-basis: calc(100% - 340px);
    display: flex;
    justify-content: flex-end;
}

.main_header_content_menu ul {
    display: flex;
    align-items: stretch;
}

.main_header_content_menu ul li {
    list-style: none;
    display: flex;
    align-items: center;
}

.main_header_content_menu ul li a {
    color: var(--color_white);
    padding: 0 25px;
    display: flex;
    align-items: center;
    height: 100%;
    font-weight: normal;

}

.main_header_content_menu ul li a:hover {
    color: var(--color_white);
    background-color: var(--color_2);
    text-decoration: none;
}

.main_header_content_menu_mobile {
    flex-basis: 100%;
    display: none;
    justify-content: flex-end;
}

.main_header_content_menu_mobile ul {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.main_header_content_menu_mobile ul li {
    display: flex;
    align-items: center;
    list-style: none;
    position: relative;
}

.main_header_content_menu_mobile_obj {
    display: flex;
    align-items: center;
    padding: 20px;
    color: var(--color_white);
    border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
}

.main_header_content_menu_mobile_obj:hover,
.main_header_content_menu_mobile_obj_active {
    background-color: var(--color_2);
}

.main_header_content_menu_mobile_sub {
    min-width: 300px;
    background-color: var(--color_2);
    border-radius: 4px 0 4px 4px;
    -moz-border-radius: 4px 0 4px 4px;
    -webkit-border-radius: 4px 0 4px 4px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    position: absolute;
    top: 100%;
    right: -20px;
}

.main_header_content_menu_mobile_sub li {
    flex-basis: 100%;
}

.main_header_content_menu_mobile_sub li a {
    width: 100%;
    color: var(--color_white);
    padding: 20px;
}

.main_header_content_menu_mobile_sub li a:hover {
    background-color: var(--color_1);
    color: var(--color_white);
    border-radius: 4px 0 4px 4px;
    -moz-border-radius: 4px 0 4px 4px;
    -webkit-border-radius: 4px 0 4px 4px;
}

.main_body {
    width: 100%;
}

.main_body .main_body_content {
    max-width: 1150px;
    margin: 0 auto;
    padding: 20px;
}

.main_body .main_body_content header {
    max-width: 1000px;
    padding: 20px;
    margin: 0 auto;
}

.main_body .main_body_content .main_header_title h1 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
    color: var(--color_1);
}

.main_article_header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}

.main_article_header .article_img {
    max-width: 500px;
}

.main_article_header .article_img img {
    width: 100%;
}

.main_article_header .article_content {
    flex-basis: calc(100% - 500px);
    padding-left: 40px;
}

.article_content header h1 {
    font-size: 1.5em;
    color: var(--color_1);
    text-align: center;
}

.main_article_header .article_content .main_text {
    font-size: 1.3em;
    padding: 5px 0;
    color: var(--color_texto);
    text-align: justify;
}

.main_article_header .article_content p a {
    color: var(--color_white);
}

.main_button {
    text-align: center;
    margin-top: 130px;
}

.main_button_edit{
    text-align: center;
    margin-top: 255px;
    color: var(--color_white);
}

.main_button_save{
    text-align: center;
    margin-top: 40px;
    color: var(--color_white);
}

.button {
    padding: 20px 40px;
    background-color: var(--color_1);
    border-radius: 10px;
    font-weight: normal;
    cursor: pointer;
    border: none;
    font-size: 1em;
    color: #fff;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

.button:hover {
    background-color: var(--color_1_hover);
    text-decoration: none;
}

.main_article_img {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main_article_edit_img{
    margin-top: 60px;
    display: block;
}

.main_article_img header {
    flex-basis: 20%;
}

.main_article_img header h2 {
    font-size: 1.2em;
    color: var(--color_1);
}

.main_article_img .main_article_content_img {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--color_5);
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    gap: 10px;
}

.main_article_img .main_article_content_img img {
    max-width: 200px;
    margin-bottom: 15px;
    cursor: pointer;
}

.main_article_img .main_article_content_img img:hover{
    border: 1px solid var(--color_2);
    border-radius: 5px;
}

.img_selected {
    border: 1px solid var(--color_2);
    border-radius: 5px;
}

.main_footer {
    margin-top: 40px;
    width: 100%;
    background-color: var(--color_5);
}

.main_footer_content {
    max-width: 1150px;
    margin: 0 auto;
}

.main_footer_content .logo_footer {
    margin: 0 auto;
    max-width: 300px;
    align-items: center;
}

.main_footer_content header a img {
    width: 100%;
    padding: 20px 0;
}

.footer_copy {
    text-align: center;
    background-color: var(--color_2);
    padding: 10px;
}

.footer_copy p {
    font-size: 0.775em;
    color: var(--color_white);
}

.footer_copy p a {
    color: var(--color_5);
    font-weight: 500;
}

.footer_copy p a:hover {
    text-decoration: underline;
}

.article_img p {
    text-align: center;
    font-size: 1.1em;
    margin-top: 10px;
}

.article_content_text {
    max-width: 400px;
}

.main_button_edit a, .main_button_rotate a {
    color: var(--color_white);
}

.main_button_rotate {
    margin-top: 20px;
    padding: 0 80px;
    color: var(--color_white);
    cursor: pointer;
}

/** Termos de Uso **/

.term{
    height: 100vh;
}

.term_header {
    color: var(--color_2);
    font-size: 1.5em;
    text-align: center;
    padding: 20px;
    text-decoration: underline;
}

.term_content {
    margin: 0 auto;
    max-width: 900px;
}

.term_content p {
    padding: 20px 0;
    font-size: 1.1em;
    color: var(--color_texto)
}

/** ERROR **/
.page_error{
    text-align: center;
    padding-bottom: 40px;
}

.page_error span{
    font-size: 23em;
    color: #b4b4b4;
    font-weight: 700;
}
.page_error h1{
    margin-top: -100px;
    font-size: 4em;
    color: var(--color_texto);
}

.page_error p{
    color: var(--color_texto);
    font-size: 1.1em;
}



/**
* Responsivo
 */

/** 1024px **/
@media (max-width: 64em) {

    .article_content header h1 {
        text-align: center;
    }

    .main_article_header .article_img {
        margin: 0 auto;
    }

    .main_article_header .article_content {
        flex-basis: 100%;
        padding-left: 0px;
        margin: 0 auto;
    }

    .main_button {
        margin-top: 60px;
    }

    .article_content_text {
        margin: 10px auto 0 auto;
        text-align: center;
    }

}

/** 978px **/
@media (max-width: 61em) {

    .main_article_img header {
        flex-basis: 100%;
        text-align: center;
    }

    .main_article_img .main_article_content_img {
        flex-basis: 100%;
    }
}

/** 768px **/
@media (max-width: 48em) {
    .main_header_content_menu {
        display: none !important;
    }

    .main_header_content_menu_mobile {
        display: flex;
    }

}


/** 544px **/
@media (max-width: 34em) {
    .main_body .main_body_content .main_header_title h1 {
        font-size: 1.5em;
    }

    .article_content header h1 {
        font-size: 1.5em;
    }

    .main_article_header .article_content .main_text {
        font-size: 1em;
        padding: 10px 0;
    }

    .button {
        padding: 20px 30px;
        background-color: var(--color_1);
        border-radius: 10px;
        font-size: 0.7em;
    }

    .croppie-container{
        max-width: 250px;
        max-height: 250px;
    }

    .main_article_img .main_article_content_img {
        display: flex;
        justify-content: center;
    }

    .main_article_img .main_article_content_img img {
        max-width: 250px;
    }
    
     .main_button_edit{
        margin-top: 20px;
    }

    .cr-viewport{
        max-width: 300px;
        max-height: 300px;
    }
    .cr-boundary{
        max-width: 330px;
        max-height: 330px;
    }

    .margin-text{
        padding-top: 120px;
    }

}