body{
    background-color: #e9ecf0;
}

.content { float:left; width:100%; margin:0 4%; padding: 20px 0;}

/*HEADER*/
.main_header          { background:#ffffff; border-bottom:1px #f4f4f4 solid; z-index:1; padding: 0.5em 0em; 
}
.main_header .content { float:left; padding:0px 0; }

.fixed            { display:block; position:fixed; z-index:9;}
.main_header_logo { text-align:center; float:none; width:30%; } 
.main_header_logo img { height:80px; width: 100%}

/*Seu Código*/
.section-seu-codigo          {display: flex; width: 50%; position: relative; background-repeat: no-repeat;}
.section-seu-codigo .content { padding:10px 0px; padding:1em 0;}
.section_title { width: 100%; float:left; margin-bottom:1em; font-size:1.3em; font-weight: 300; border-bottom: 1px #eceaea solid; padding-bottom: 1em; }

.box-artigo   { width:100%; float:left; }

.container{
    width: 100%;
    
}

/*Formulário*/

.container_form {
    width: 600px;
    display: flex;
    flex-direction: column;
    margin:0 6%;
    max-width: 100%;
    overflow: auto;
    background:#ffffff; 
    border-radius:10px; 
    padding:1em;
    box-shadow: -1px 0px 10px 3px rgba(0, 0, 0, 0.53);
}

.container_form h1 {
    font-family:'open_sansregular';
    font-size: 1.8em;
    color: black;
    border-bottom: 1px #f0eded solid;
    margin-bottom: 10px;
    padding-bottom: 10px;

}

.container_form button{
    margin: 10px;
}

.container_form_three button{
    margin: 10px ;
}


.bloco{
    /*width: 300px;*/
    height: 100px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow: auto;
    background-color: #ffff;
    padding: 20px;
    border-radius: 20px;
    margin: 0 0 3em 1em; 
    cursor: pointer;
    transition: .4s;
}

.bloco h3{
    font-family:'open_sansregular';
    font-size: 1.5em;
    color: black;
    border-bottom: 1px #f0eded solid;
    margin-bottom: 10px;
    padding-bottom: 10px; 
}

.bloco p{
    display: inline-block;
    font-family:'open_sansregular';
    font-size: 1.0em;
    margin-bottom: 10px;
    padding-bottom: 10px; 
}

.container_form_two {
    width: 350px;
    height: 300px;
    text-align: center;
    margin: 30% 0 0 40%;
    background:#ffffff;
    border-radius: 3px;
    border-radius:25px; 
    padding: 2.4em;
    box-shadow: -1px 0px 10px 3px rgba(0, 0, 0, 0.53);
}

.container_form_two:hover{
    transform: scale(1.1);
    border: 1px solid #000;
}

.container_form_two h2{
    font-family:'open_sansregular';
    font-size: 1.8em;
    color: black;
    border-bottom: 1px #f0eded solid;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.container_form_three{
    width: 800px;
    display: flex;
    flex-direction: column;
    margin:0 7%;
    max-width: 100%;
    overflow: auto;
    background:#ffffff; 
    border-radius:10px; 
    padding:1em;
    box-shadow: -1px 0px 10px 3px rgba(0, 0, 0, 0.53);
}

.container_form_three h1 {
    font-family:'open_sansregular';
    font-size: 1.8em;
    color: black;
    border-bottom: 1px #f0eded solid;
    margin-bottom: 10px;
    padding-bottom: 10px;

}

.form_grupo {
    width: 90%;
    margin: 20px auto;
    margin-bottom: 30px;
    position: relative;
}


.form_grupo .legenda { 

    width: 100%;
    float: left;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* SUBMIT */

.submit { width:100%; float:left; }

.submit_btn {

    float: left;
    display: block;
    padding: 2px 15px;
    border: none;
    outline: none;
    background-color: #1071B5;
    color: #fff;
    text-shadow: 0 0 5px rgb(0, 0, 0);
    font-family: inherit;
    font-size: 20px;
    font-family:'open_sansregular';
    border-radius: 10px;
    margin: 20px auto;
    cursor: pointer;
    transition: all 0.3s;
}

.submit_btn:hover {

    background-color: #444444;
    transform: scale(1.03);

}


.dropdown {
    display: block;
    margin: 0 auto;
    font-size: 16px;
    font-family: inherit;
    color: #222222;
    border-radius: 4px;
    border: 1px #f2f2f2 solid;
    background: #fdfdfd;
    outline: none;
    padding-left: 10px;
    width: 100%;
}

.form_new_input {
    display: none;
}

.radio_label,
.check_label {

    float: left;
    width: 100%;
    padding-left: 30px;
    cursor: pointer;
    margin-bottom: 8px;

}


.radio_new_btn {

    position: absolute;
    left: 0;
    transform: translateY(3px);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 0.2em solid #4c4c4c;

}

.radio_new_btn::after {

    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(17, 75, 161);
    visibility: hidden;

}

.check_new_btn {

    position: absolute;
    left: 0;
    height: 20px;
    width: 20px;
    border: 0.2em solid #4c4c4c;

}

.check_new_btn::after {

    content: "";
    height: 8px;
    width: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #6fcffb;
    visibility: hidden;

}

.form_new_input:checked ~ .radio_label .radio_new_btn::after,
.form_new_input:checked ~ .check_label .check_new_btn::after {
 
    visibility: visible;
}

.form_new_input:checked ~ .radio_label,
.form_new_input:checked ~ .check_label {
    color: black;
}


.form_grupo {

    width: 100%;
    margin-bottom: 20px;
    position: relative;

}

.form_input {

    font-size: 16px;
    font-family: inherit;
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px #f2f2f2 solid;
    background: #fdfdfd;
    outline: none;
    width: 100%;
    transition: all 0.3s;

}

.form_message,
.form_message .message_input {

    width: 100%;
    float:left;

}

.form_message_label {

    width: 100%;
    float: left;
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    
}



/*Formulário*/

/*Começa o Responsivo*/

    @media screen and (max-width: 480px) {
  .main_header {
    padding: 0.3em 0; /* Reduza o espaçamento do cabeçalho para telas menores */
  }

  .main_header_logo {
    width: 40%; /* Aumente um pouco o logotipo para melhor legibilidade em telas pequenas */
  }

  .main_header_logo img {
    height: 50px; /* Reduza ainda mais a altura do logotipo */
  }
}

    @media (min-width:30em){

    .boxBannerTopo { padding:1em 0; }
    
    }
    
    /*600PX BREAKPOINT*/
    /*600 dividido por 16 = 37,5em*/
    @media (min-width:37em){
    
    
    } 
    
    /*768PX BREAKPOINT*/
    /*768 dividido por 16 = 48em*/
    @media (min-width:48em){
    
    
    } 
    
    /*960PX BREAKPOINT*/
    /*960 dividido por 16 = 60em*/
    @media (min-width:60em){
    
     .section-seu-codigo          { padding:20px 0px; }
     .section-seu-codigo .content { width:80%; padding:1em 0; margin:0 10%;}
    
    }
    
    /*1280PX BREAKPOINT*/
    /*1280 dividido por 16 = 80em*/
    @media (min-width:80em){
    
     
    }
    
    /*1366PX BREAKPOINT*/
    /*1366 dividido por 16 = 85,375em*/
    @media (min-width:85em){
    
     .content  { width:80%; margin:0 10%; }
    
    }
    
    /*1600PX BREAKPOINT*/
    /*1600 dividido por 16 = 100em*/
    @media (min-width:100em){
    }
    
    @media (max-width: 768px) {
    .content {
        width: 100%;
        margin: 0;
        padding: 10px;
    }
}
  

  @media screen and (max-width: 480px) {
    .content {
      width: 100%; /* Utilize a largura total da tela */
      margin: 0; /* Remova as margens laterais */
    }
  
    .main_header_logo {
      width: 40%; /* Reduza o tamanho do logotipo para telas menores */
    }
  
    .container_form {
      width: 100%; /* Utilize a largura total da tela */
    }
  
    .container_form_two {
      width: 90%; /* Ajuste a largura do segundo formulário para telas menores */
    }
  
    .section_title {
      font-size: 1em; /* Reduza o tamanho da fonte para telas menores */
    }
  
    /* Outros ajustes necessários para telas menores */
  }