/* ----- FONTS AND TILES/TEXTS ---- */
title-content-01 {font-family: 'Cairo', sans-serif; font-weight: 700; color: rgb(13, 83, 132);}
subtitle-content-01 {font-family: 'Montserrat', sans-serif; font-weight: 400; color: rgb(72, 72, 72);}
text-content-01 {font-family: 'Muli', sans-serif; color: rgb(72, 72, 72);}
text-content-02 {font-family: 'Muli', sans-serif; color: rgb(255, 255, 255);}

title-content-02 {font-family: 'Cairo', sans-serif; font-weight: 700; color: rgb(255, 255, 255);}
title-content-03 {font-family: 'Cairo', sans-serif; font-weight: 700; color: rgb(13, 83, 132);}
subtitle-content-02 {font-family: 'Montserrat', sans-serif; font-weight: 400; color: rgb(72, 72, 72);}

bottom-text-01  {font-family: 'Montserrat', sans-serif; font-weight: 400; color: rgb(255, 255, 255);}

.form-control-text {font-family: 'Muli', sans-serif; font-weight: 400; color: rgb(72, 72, 72);}
.form-control-message {font-family: 'Muli', sans-serif; font-weight: 400; color: rgb(72, 72, 72);}

title-services  {font-family: 'Cairo', sans-serif; font-weight: 700; color: rgb(255, 255, 255);}
text-services {font-family: 'Muli', sans-serif; color: rgb(255, 255, 255);}


/* ----- END FONTS AND TITLES/TEXTS ---- */

@media screen and (min-width: 320px)
{
    txt-sl-t {font-size: 16px;}
    txt-sl-st   {font-size: 12px;}
    
    /* TITLES / SUBTITLES / TEXTS AND FONTS */
    title-content-01 {font-size: 26px; text-align: left; position: relative; bottom: -8px;}
    subtitle-content-01 {font-size: 14px; text-align: left;}
    text-content-01 {font-size: 12px; position: relative; top: 30px;}
    
    title-content-02 {font-size: 26px;}
    title-content-03 {font-size: 26px; position: relative; bottom: -8px;}
    subtitle-content-02 {font-size: 14px; text-align: center;}
    
    title-services  {font-size: 16px; position: relative; width: 100%; padding: 0px 5px 0px 5px;}
    text-services  {font-size: 12px; position: relative; text-align: justify;  width: auto; padding: 0px 15px 0px 15px; display: block;}
    
    bottom-text-01 {font-size: 12px;}
    
    /* CONTENTS RESPONSIVE */
    .content-left-sn {text-align: left; display: block; margin-top: 0px; padding: 0px 20px 20px 20px;}
    .content-right-sn {padding: 0px 0px 0px 0px;}
    
    .content-service {width: 90%; margin: 0% 5% 5% 5%;}
    .icon-service {width: 96%; margin: 0% 2% 0% 2%;}
    .description-service{width: auto;}
    
    .content-contactos {width: 80%; padding: 20px 10% 5px 10%;}
    .content-contactos-formulario {width: 80%; padding: 20px 10% 20px 10%;}
    .form-int {width: 100%; padding: 0px 0px 10px 0px;}
    .icon-contactos {}
    .text-int-contactos {}
    text-content-02 {font-size: 12px;}
    
    .form-control-text {font-size: 12px;}
    .form-control-message {font-size: 12px;}
    
    .rgpd-01    {width: 80%; padding: 0px 10% 0px 10%; font-size: 12px;}
    .title-content-modal-01 {font-size: 20px;}
    .text-content-modal-01 {font-size: 10px;}
    .bt-hyper-02 {font-size: 12px;}
    .bt-hyper-03 {font-size: 12px;}
    
     /* BUTTONS */
    .btn-primary {font-size: 12px;}
    
    
}

@media screen and (min-width: 568px)
{
    txt-sl-t {font-size: 22px;}
    txt-sl-st   {font-size: 16px;}
    
    /* TITLES / SUBTITLES / TEXTS AND FONTS */
    title-content-01 {font-size: 30px; text-align: left; position: relative; bottom: -10px;}
    subtitle-content-01 {font-size: 16px; text-align: left;}
    text-content-01 {font-size: 13px; position: relative; top: 40px;}
    
    title-content-02 {font-size: 30px;}
    title-content-03 {font-size: 30px; position: relative; bottom: -10px;}
    subtitle-content-02 {font-size: 16px; text-align: center;}
    
    title-services  {font-size: 18px; position: relative; width: 100%; padding: 0px 5px 0px 5px;}
    text-services  {font-size: 12px; position: relative; text-align: justify;  width: auto; padding: 0px 15px 0px 15px; display: block;}
    
    bottom-text-01 {font-size: 12px;}
    
    /* CONTENTS RESPONSIVE */
    .content-left-sn {text-align: left; display: block; margin-top: 0px; padding: 0px 20px 0px 60px;}
    .content-right-sn {padding: 0px 0px 0px 10px; }
    
    .content-service {width: 90%; margin: 0% 5% 5% 5%;}
    .icon-service {width: 96%; margin: 0% 2% 0% 2%;}
    .description-service{width: auto; min-height: 405px;}
    
    .content-contactos {width: 90%; padding: 20px 2% 5px 8%;}
    .content-contactos-formulario {width: 90%; padding: 20px 2% 20px 8%;}
    .form-int {width: 100%; padding: 0px 0px 10px 0px;}
    .icon-contactos {}
    .text-int-contactos {}
    text-content-02 {font-size: 12px;}
    
    .form-control-text {font-size: 12px;}
    .form-control-message {font-size: 12px;}
    
    
    .rgpd-01    {width: 96%; padding: 0px 0px 0px 4%;}
    .title-content-modal-01 {font-size: 24px;}
    .text-content-modal-01 {font-size: 10px;}
    .bt-hyper-02 {font-size: 12px;}
    .bt-hyper-03 {font-size: 12px;}
    
     /* BUTTONS */
    .btn-primary {font-size: 12px;}
    
}

@media screen and (min-width: 1100px)
{
    txt-sl-t {font-size: 34px;}
    txt-sl-st   {font-size: 24px;}
    
    /* TITLES / SUBTITLES / TEXTS AND FONTS */
    title-content-01 {font-size: 36px; text-align: left; position: relative; bottom: -14px;}
    subtitle-content-01 {font-size: 20px; text-align: left;}
    text-content-01 {font-size: 15px; position: relative; top: 60px;}
    
    title-content-02 {font-size: 36px;}
    title-content-03 {font-size: 36px; position: relative; bottom: -14px;}
    subtitle-content-02 {font-size: 20px; text-align: center;}
    
    title-services  {font-size: 20px; position: relative; width: 100%; padding: 0px 5px 0px 5px;}
    text-services  {font-size: 14px; position: relative; text-align: justify;  width: auto; padding: 0px 15px 0px 15px; display: block;}
    
    bottom-text-01 {font-size: 14px;}
    
    /* CONTENTS RESPONSIVE */
    .content-left-sn {display: block; margin-top: 0px; padding: 0px 20px 0px 90px;}
    .content-right-sn {padding: 0px 0px 0px 10px; }
    
    
    .content-service {width: 90%; margin: 0% 5% 5% 5%;}
    .icon-service {width: 96%; margin: 0% 2% 0% 2%;}
    .description-service{width: auto; min-height: 465px;}
    
    .content-contactos {width: 90%; padding: 20px 2% 5px 8%;}
    .content-contactos-formulario {width: 90%; padding: 20px 2% 20px 8%;}
    .form-int {width: 100%; padding: 0px 0px 10px 0px;}
    .icon-contactos {}
    .text-int-contactos {}
    text-content-02 {font-size: 14px;}
    
    .form-control-text {font-size: 14px;}
    .form-control-message {font-size: 14px;}
    
    .rgpd-01    {width: 96%; padding: 0px 0px 0px 4%;}
    .title-content-modal-01 {font-size: 26px;}
    .text-content-modal-01 {font-size: 12px;}
    .bt-hyper-02 {font-size: 14px;}
    .bt-hyper-03 {font-size: 12px;}
    
    /* BUTTONS */
    .btn-primary {font-size: 14px;}
    
}