* {
    box-sizing: border-box;
    margin:0;
    font-family:Rajdhani;
}

body {
    background: #333;
    background-image: url("../imagens/engrenagens_color.jpg");
    background-blend-mode: multiply;
    background-repeat: repeat-y;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    margin-bottom:215px;
}

p {
    text-indent:3vw;
}

sys_message-box[type="ok"] {
    display:none;
    justify-content:flex-start;
    align-items:center;
    width:100%; 
    min-height:100px; 
    background:rgb(0,64,128); 
    color:white; 
    border-radius:10px; 
    margin-top:20px;
    --icone-color:rgb(0,64,128);
}

sys_message-box[type="error"] {
    display:none;
    justify-content:flex-start;
    align-items:center;
    width:100%; 
    min-height:100px; 
    background:rgb(220,48,48); 
    color:white; 
    border-radius:10px; 
    margin-top:20px;
    --icone-color:rgb(220,48,48);
}

sys_message-box[type] i[icone] {
    width:80px;
    height:auto;    
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:50px; 
    margin:15px;
    border-radius:5px; 
    background:white; 
    color:var(--icone-color);
    padding:5px;
}

sys_message-box div[text] {
    margin:15px 15px 15px 0px; 
    font-weight:600;
}

.clear {
    clear: both;
}

#sys_pagina {
    width:100%;   
}

.sys_content {
    background:white; 
    min-height:60vh;
}

.sys_container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 2%;    
}

#sys_menu-viewer { 
    top:0px;   
    position: -webkit-sticky;
    position: sticky;
    z-index:100;
}

#container-menu-principal {
    top: 0;
    border-bottom:3px solid #999;
}

#sys_page-viewer{
    border-bottom:3px solid #999;
}

div[sys_screen-area]{
    display:none;
}

@keyframes anim_page-title {
    from {transform:Scale(2, 2);}
    to {transform:Scale(1,1)}
}

@keyframes anim_escudo-title {
    from {transform:Scale(0,0);}
    to {transform:Scale(1,1);} 
}

#container-page-title {
    font-family:"Anton";
    position:relative;
    height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:130px;
    color:white;
    text-align:center;
    font-style:italic;
    text-shadow: 0 0 10px black, 0 0 20px white; 
}

#container-page-title div {
    position:relative;
    font-family:"Anton";  
    margin-left:-1vw; 
    animation-name: anim_page-title;
    animation-duration:1s;
}

#container-page-title img {
    position:absolute;
    height:90%; 
    z-index:-2;
    animation-name: anim_escudo-title;
    animation-duration:1s;
}

.btn_default-button {
    cursor: pointer;
    padding:10px 20px; 
    min-width:200px; 
    border-radius: 30px;    
    box-sizing: border-box; 
    color: black;
    border:2px solid transparent;
    outline:none;
    background: rgb(248,232,64);
    text-align:center;
    font-size:20px;
    font-weight:bolder;    
}

.btn_default-button:hover {
    color: white;    
    background:rgb(0,0,0);
    border:2px solid white;
}

.btn_default-button:active {
    box-shadow: 0 0 3px 1px black;
}

.btn_default-button:disabled {
    cursor: pointer;
    padding:10px 20px;   
    min-width:200px; 
    border-radius: 30px;     
    box-sizing: border-box;
    outline:none;
    color: #777;
    border:2px solid white;
    background:#ccc;
    text-align:center;
    font-size:20px;
    font-weight:bolder;
}

textarea {
    resize:none;
    border:2px solid transparent;
    border-bottom:2px solid black;
    border-left:1px dotted #aaa;
    padding:5px 10px;    
    font-size:16px;
    font-weight:500;
    margin-bottom:20px;
}

textarea:focus {
    border-bottom:3px solid rgb(248,232,64);
    border-left: 1px solid #777;
    outline: none;       
}

select {
    appearance: none;
    resize:none;
    border:2px solid transparent;
    border-bottom:2px solid black;
    border-left:1px dotted #aaa;
    padding:5px 10px;    
    font-size:16px;
    font-weight:500;
    margin-bottom:20px;  
    color:#777;  
}

select:focus {
    border-bottom:3px solid rgb(248,232,64);
    border-left: 1px solid #777;
    outline: none;
}

select::-ms-expand {
    display: none;
}

select option {
    font-style: italic;
    font-weight:600;
    color:black;
}

input[type="text"] {
    border:2px solid transparent;
    border-bottom:2px solid black;   
    border-left:1px dotted #aaa;    
    padding:5px 10px;    
    font-size:16px;
    font-weight:500;
    margin-bottom:20px;
}

input[type="text"]:focus {
    border-bottom:3px solid rgb(248,232,64);
    border-left: 1px solid #777;
    outline: none;
}

input[type="submit"] {
    cursor: pointer;
    padding:10px 20px; 
    min-width:200px; 
    border-radius: 30px;    
    box-sizing: border-box; 
    color: white;
    border:2px solid white;
    outline:none;
    background: rgb(225,48,48);
    text-align:center;
    font-size:20px;
    font-weight:bolder;
}

input[type="submit"]:hover {
    background:rgb(0,64,128);
}

input[type="submit"]:active {
    box-shadow: 0 0 3px 1px black;
}

.text-on-right{
    text-align: right;
}

.text-on-center{
    text-align: center;
}

.text-on-left{
    text-align: left;
}

.text-justified{
    text-align: justify;
}

.flex-on-right {
    justify-content:flex-end;
}

.flex-on-center {
    justify-content:center;
}

.flex-on-left {
    justify-content:flex-start;
}

.center {
    text-align:center;
}  

.font-bolder {
    font-weight: 600;
}

.flex-box {
    width: 1320px;
    margin: 0 auto; 
    display: flex;
    flex-wrap:wrap; 
    justify-content:flex-start;  
    justify-items: self-start;    
}

/*------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1250px) {
    p {
        text-indent:3.5vw;
    }
}

@media screen and (max-width:1000px) {
    p {
        text-indent:4vw;
    }
}

@media screen and (max-width:800px) {
    #container-page-title {        
        font-size:13vw;
        text-shadow: 0 0 7px black, 0 0 14px white;
    }

    p {
        text-indent:4.2vw;
    }
}

@media screen and (max-width:700px) {
    #container-page-title { 
        height:35vh;       
        font-size:11vw;
        text-shadow: 0 0 7px black, 0 0 14px white;
    }

    .sys_content {        
        min-height:65vh;
    }

    p {
        text-indent:5vw;
    }
}

@media screen and (max-width:600px) {
    #container-page-title {               
        font-size:65px;
        text-shadow: 0 0 7px black, 0 0 14px white;
    }

    p {
        text-indent:7.5vw;
    }
}

@media screen and (max-width:500px) {
    p {
        text-indent:9vw;
    }
}

@media screen and (max-width:390px) {
    #container-page-title {
        height:30vh;        
        font-size:50px;
        text-shadow: 0 0 7px black, 0 0 14px white;
    }

    .sys_content { 
        min-height:70vh;
    }
}

@media screen and (max-width:300px) { 
    #container-page-title {        
        font-size:45px;
        text-shadow: 0 0 7px black, 0 0 14px white;
    }
}