@charset "utf-8";
/* CSS Document - CSS per a dispositius mòbils ( Ajustaments ) */

/* ----------------------------
CSS Ralarsa
http://www.ralarsa.com
Creat per Signia - Octubre 2020
------------------------------- */



/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* TABLETS (portrait) ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

#topbar aside#toplinks ul li                 { margin:0 10px; }
#topbar aside#toplinks ul li:first-child a,
#topbar aside#toplinks ul li:nth-child(2) a,
#topbar aside#toplinks ul li:nth-child(3)    { font-size:14px; padding:5px 0 5px 0; }
#topbar aside#toplinks ul li:first-child a   { background-size: 36px; padding:10px 0 10px 46px; }
#topbar aside#toplinks ul li:nth-child(2) a  { background-size: 36px; padding:10px 0 10px 42px; }
#topbar aside#toplinks ul li:nth-child(3) a  { background-size: 36px; padding:10px 0 10px 42px; }
#topbar aside#toplinks ul li a.btn           { background-size: 26px; padding:10px 0 10px 42px!important; }
#topbar ul li a.btn                          { font-size:14px; }
#topbar aside#toplinks ul li a.btn           { padding:0 0 0 32px; }
#language_selector li.is-dropdown-submenu-parent > a::after  { background-size: 60%; right:-12px!important; }
figure#logo                                  { margin:0 0 0 0!important; }
figure#logo img                              { width:62%; }

#mainnav ul                                  { width:100%; }
#mainnav li                                  { padding:0 0.4rem; }
#mainnav li a                                { font-size:12px; }
.dropdown.menu > li.is-dropdown-submenu-parent > a { padding-right: 1.1rem; position: relative; }

aside#freeseotext                            { padding:10px 60px 15px 60px; }
aside#freeseotext header h1 p                { font-size:18px; }

aside#steps                                  { padding:30px 0; }
aside#whyralarsa                             { padding:30px 0; }
aside#whyralarsa ul                          { margin:0; }
aside#whyralarsa ul li                       { margin:0 0 20px 0; padding: 0 5px; }
aside#whyralarsa ul li p                     { font:normal 700 13px 'Exo 2', sans-serif; }
aside#whyralarsa header h2                   { margin:0 0 20px 0; }

aside#customers                              { padding:30px 40px; }
aside#customers header h2,
aside#customers header h2 em                 { font-size:32px; }

section#homepage aside#form,
section#wecallyouintro aside#form            { padding:30px 0; }
section#homepage aside#form label,
section#wecallyouintro aside#form label      { font:normal 300 12px 'Exo 2', sans-serif; }
section#homepage aside#form form,
section#wecallyouintro aside#form form       { max-width:67%!important; }
section#homepage aside#form p.center,
section#wecallyouintro aside#form p.center   { margin:0 0 0 0; }
section#homepage aside#form input,
section#wecallyouintro aside#form input { height:48px; line-height: 48px; }


aside#blog                                   { padding:30px 30px 50px 30px; }
aside#blog header h2                         { font-size:32px; }
aside#blog ul                                { margin:0; }
aside#blog ul li:nth-child(3),
aside#blog ul li:nth-child(4)                { display: none; }

.slick-next                                  { right:20px!important; top:42%!important; }
.slick-prev                                  { left: 20px!important; top:42%!important; }



/* PIDE CITA */
p.formError                           { font-size:12px!important; margin:10px 0 0 0!important; }
section#appointment aside             { padding:40px 0; }
section#appointment header figure     { margin: 10px 15px 10px 20px; }
section#appointment header figure img { max-width: 62px; }
section#appointment header h1         { font: 300 26px 'Exo 2', sans-serif; margin:20px 0 0 0; }
section#appointment ul.btns           { margin:40px 0 0 0!important; }
section#appointment #modelForm ul     { margin:0 0 10px 0; padding:0 20px; text-align:center; }
section#appointment #modelForm ul li  { display:inline-grid; float:none; margin:0 10px; padding: 25px; width:29.1%; }
section#appointment #modelForm ul li header h3 strong { display: inline-block; }
section#appointment #modelForm ul.btns li a.back { padding:10px 40px; }
section#appointment #modelForm ul.btns li,
section#appointment ul.btns li        { width: 46.35%!important; }
section#appointment header h2         { margin:0 0 40px 0; }
section#appointment aside#damageArea ul   { margin:0; padding:0 30px; width:100%;}
section#appointment aside#damageArea ul li{ height: 37vh; margin-bottom:40px; max-width:100%; min-width: 44.35%; }
section#appointment aside#damageArea ul li:last-child{ margin-bottom:0; }
section#appointment aside#damageSide ul li{ height: 37vh; margin-bottom:40px; min-width: 41.35%; }

section#appointment aside#damageType ul { margin:0; }
section#appointment aside#damageType ul li{ height: 37vh; margin-bottom:40px; min-width: 25.1%; }

section#appointment aside#otherdamageType ul li{ height: 37vh; margin-bottom:40px; max-width:100%; min-width: 44.35%; }
section#appointment .tic_off,
section#appointment .tic_on           { bottom: 4rem; left: 7.65rem; }
section#appointment #modelForm p.small{ margin:40px 13%!important; }
ul#simpleform                         { margin:0!important; width: 100%!important; }
ul#simpleform li                      { margin:0!important; width: 100%!important; }
section#appointment aside#searchCenter ul { margin:0; padding:0 20px; width:100%; }
section#appointment aside#searchCenter ul li { margin:0 10px; }
section#appointment aside#searchCenter ul li:first-child { margin:0 0 20px 0; padding:30px 0 0 0; width:100%; }
section#appointment aside#searchCenter ul li:nth-child(2) { padding:30px 0 0 0; width:46%; }
section#appointment aside#searchCenter ul li:nth-child(3) { padding:30px 0 0 0; width:46%; }

footer                                { padding:30px 0 30px 0; }
footer article                        { background-position: 50% 52px; }
footer aside#nav                      { width:80%!important;  }
footer aside#nav ul li strong         { margin: 0 0 30px 0; }
footer aside#nav ul li ul li          { font:400 12px 'Exo 2', sans-serif; }
footer ul#links_legal li              { padding: 0px 10px 5px 5px; }
footer ul#links_legal li a            { font-size: 12px; }
footer figure                         { margin:-60px 80px 90px 0; }
footer figure img                     { max-width: 75%!important; }

.localizador li#workshopsMap,
.localizador li#workshops             { width: 48.5%!important; }
.localizador .centerLink              { background-size: 42px!important; padding:50px 0 0 0!important; right: -20px!important; }
.sustainability article               { padding:40px; }
}





/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* TABLETS (landscape) ---------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
#topbar                       { padding: 20px!important; }
hr                            { border:2px solid #fced00; width:20%; }
p                             { font-size:16px; }
figure#logo                   { margin:-5px 0 0 30px; }
figure#logo img               { width:53.66667%; }
#mainnav ul                   { width:100%; }

.eupopup-container-bottomleft { left:0; width:45%; }
.eupopup-container            { padding:60px 35px; }
.slick-prev,
.slick-next                   { margin-top: -20px!important; }
.slick-prev                   { left:20px!important; }
.slick-next                   { right:40px!important; }

#topbar aside#toplinks ul li  { margin:0 15px; }
#topbar aside#toplinks ul li:nth-child(3)  { background-size: 18%; font: 900 16px 'Exo 2', sans-serif; padding: 5px 0 5px 30px; }
#topbar aside#toplinks ul li:first-child a { background-size: 22%; font-size:16px; margin:8px 0 0 0 ; padding: 5px 0 5px 30px; }
#topbar aside#toplinks ul li:nth-child(2) a { background-size: 22%; font-size:16px; margin:8px 0 0 0 ; padding: 5px 0 5px 30px; }
#topbar aside#toplinks ul li a.btn { background-position:0% 50%; background-size: 13%; font-size:16px; margin:8px 0 0 0; padding: 5px 0 5px 25px; }

ul#language_selector                   { margin:5px 35px 0 0!important; }
ul#language_selector li:first-child a  { margin:0!important; }
ul#language_selector li.is-dropdown-submenu-parent > a::after { right:-10px!important; }
ul#language_selector li a::after         { background-size: 50%!important; }
ul#language_selector li.is-dropdown-submenu-parent > a { padding:5px!important; }
ul#language_selector li       { margin:0!important; }

aside#freeseotext header h1 p { font:normal 600 18px 'Exo 2', sans-serif; }

aside#steps                   { padding: 40px 0; }
aside#steps header h2         { margin:0 0 20px 0; }
aside#steps header h2 em,
aside#steps header h2 span    { font-size:32px; }
aside#steps header h3         { font:italic 400 22px 'Exo 2', sans-serif; }

aside#whyralarsa              { padding:40px 0 20px 0; }
aside#whyralarsa ul           { margin: 0; }
aside#whyralarsa ul li p      { font-size:14px; }

aside#customers               { background-size:cover; padding:40px 0; }
aside#customers header h2,
aside#customers header h2 em  { font-size:32px; }

section#homepage aside#form   { padding:40px 0; }
section#homepage aside#form header h2 { font-size:32px; }
section#homepage aside#form form { float: right; width:60%; }
section#homepage aside#form ul   { display: inline-block; margin:0; width: 100% }
section#homepage aside#form label,
section#wecallyouintro aside#form label { font:normal 300 14px 'Exo 2', sans-serif; text-align:left; }
section#homepage aside#form label span.required,
section#wecallyouintro aside#form label span.required{ font:normal 300 14px 'Exo 2', sans-serif; text-align:left; }
section#homepage aside#form ul li,
section#wecallyouintro aside#form ul li { padding-left: 0; }
section#homepage aside#form input,
section#wecallyouintro aside#form input { height: 48px; padding:5px 15px; }
section#homepage aside#form p.center,
section#wecallyouintro aside#form p.center { margin:10px 0; }

aside#blog                    { padding:40px 0; }
aside#blog header h2,
aside#blog header h2 em       { font-size:32px; }
aside#blog header h3          { font: normal 600 20px 'Exo 2', sans-serif; margin:0 0 10px 0; min-height: 48px; }
aside#blog ul                 { margin:0!important; }
aside#blog ul li figure       { margin:0 0 20px 0; }
aside#blog ul li p.date       { font-size:12px; }

span.tag                      { font:normal 400 10px 'Exo 2', sans-serif; }



/* PIDE CITA */
section#appointment aside             { padding:40px 0; }
section#appointment header figure img { max-width: 62px; }
section#appointment header h1         { font: 300 26px 'Exo 2', sans-serif; }
section#appointment ul.btns           { margin:40px 0 0 0!important; }
section#appointment #modelForm ul li  { padding: 30px; width:28%!important; }
section#appointment #modelForm ul li header h3 strong { display: inline-block; }

section#appointment header h2               { margin:0 0 40px 0 }
section#appointment aside#damageArea ul     { padding:0 40px; text-align: center; width:100%; }
section#appointment aside#damageArea ul li  { max-width: 17.88%; min-height:40vh; padding-top:25px; }
section#appointment aside#damageArea ul li:nth-child(1) figure  { margin:35px 0 0 0; }
section#appointment aside#damageArea ul li:nth-child(2) figure  { margin:15px 0 0 0; }
section#appointment aside#damageArea ul li:nth-child(3) figure  { margin:15px 0 0 0; }
section#appointment aside#damageArea ul li:nth-child(4) figure  { margin:35px 0 0 0; }
section#appointment aside#damageArea ul li:nth-child(5) figure  { margin:30px 0 0 0; }

section#appointment aside#damageArea ul li:nth-child(1) figure img { width:132px; }
section#appointment aside#damageArea ul li:nth-child(2) figure img { width:105px; }
section#appointment aside#damageArea ul li:nth-child(3) figure img { width:105px; }
section#appointment aside#damageArea ul li:nth-child(4) figure img { width:132px; }
section#appointment aside#damageArea ul li:nth-child(5) figure img { width:70px; }

section#appointment aside#damageSide ul     { padding:0 40px; text-align: center; width:100%; }
section#appointment aside#damageSide ul li{ margin:0 10px; max-width: 17.88%; min-height:40vh; padding-top:25px; }
section#appointment aside#damageSide ul#rightside li:nth-child(1) figure  { margin:20px 0 0 0; }
section#appointment aside#damageSide ul#rightside li:nth-child(2) figure  { margin:25px 0 0 0; }

section#appointment aside#damageSide ul#rightside li:nth-child(1) figure img { width:105px; }
section#appointment aside#damageSide ul#rightside li:nth-child(2) figure img { width:110px; }

section#appointment aside#glassType ul li { margin:0 10px; max-width: 17.88%; min-height:40vh; padding-top:25px; }

section#appointment ul#simpleform         { margin-bottom:0!important; }
section#appointment #modelForm ul#simpleform li { font:normal 400 16px 'Exo 2', sans-serif; margin:0 0 20px 0; padding:0!important; width: 100%!important; }
.mapContainer                                { min-height:inherit; }
section#appointment aside#searchCenter .tallerContainer { max-width:100%; width:100%; }

section#appointment aside#searchCenter ul    { display:inline-block; margin:0; padding: 0 20px; width:100%; }
section#appointment aside#searchCenter ul li:first-child { padding:20px 0 0 0!important; }
section#appointment aside#searchCenter ul li { margin: 0 10px; padding:20px 0 0 0; width: 31.3%; }
section#appointment aside#searchCenter ul li:first-child { margin: 0 10px; padding:30px 0 0 0; }
section#appointment aside#searchCenter ul.workshopListBody { max-height: 55vh; padding:0; }
section#appointment aside#searchCenter ul.workshopListBody li { margin:0; max-width: none!important; padding:15px!important; width:100%!important; }
section#appointment aside#searchCenter ul.workshopListBody li:first-child { padding:15px!important; }
section#appointment aside#searchCenter ul li:last-child div { padding:20px 20px 20px 20px; }
.appointmentTime                 { padding: 0 20px!important; }
section#appointment aside#searchCenter ul li header h3 { padding-bottom:20px; }
section#appointment aside#searchCenter ul.btns li a.btn { display: inline-block; margin:10px 0 0 0; }

section#appointment aside#searchCenter input[type='checkbox'] { margin-bottom:0; }


section#appointment aside#searchCenter p.center { margin:20px 0 40px 0;}
section#appointment aside#searchCenter header h2{ margin:0 0 20px 0; }

section#appointment .tic_off,
section#appointment .tic_on  { bottom: 3rem; height: 54px; left: 3.6rem; width:54px; }

section#appointment ul.btns li { min-height: inherit!important; padding:0 10px!important; width:47%!important; }
section#appointment ul.btns li input.btn { border-radius: 0; font-weight:600; }
.appointmentTime header h3 { margin-top:20px!important; }
section#appointment aside#searchCenter .ui-datepicker .ui-datepicker-title { margin-bottom:10px; }
.ui-datepicker .ui-datepicker-prev span   {}
.ui-datepicker .ui-datepicker-next span   { margin-left: 0!important; margin-top: -6px!important; }


/* SECTION SERVICE */
.servicetitle header h1       { font-size:32px; }
.servicetitle p.subtitle      { font-size:22px; }
.servicetitle p               { font-size:18px; padding:0 100px; }
section#service aside#reasons { padding:40px;}
section#service aside#reasons ul li header h3 { font-size:24px; }
section#service aside#reasons header h2 { margin:0 0 10px 0; }
section#service aside#highlights .content { top:40px; }
section#service aside#highlights .content ul { margin:0 10% 40px; }
section#service aside#highlights .content ul li { font:normal 400 16px 'Exo 2', sans-serif; line-height: 24px; }
section#service aside#highlights .content p.intro { margin:-35px auto 30px auto; }
section#service aside#form    { padding:40px 0 0 0; }
section#service aside#content { padding: 0 60px; }
section#service aside#highlights figure { background: #000; margin:0 0 40px 0; padding:0 0 140px 0; }



/* SECTION OFFICES */
section#offices article form    { margin:20px 0 0 0; padding: 20px 20px 40px 20px; }
section#offices article form ul { margin:0px auto; width: 100%; }
section#offices ul#centros      { margin:0; padding:10px; }
section#offices ul#centros li   { border: 10px solid #fff; }
section#offices ul#centros li a { padding:20px; }
section#offices article form ul li .btn { padding:13px 20px 15px 20px; }
section#offices header h2       { margin:0 0 20px 0; }



/* SECTION US */
section#us aside#proyectos       { padding:40px; }
section#us aside#proyectos ul    { margin:0; }
section#us aside#proyectos ul li { padding:40px; }
section#us aside#proyectos ul li figure img { max-width:90%; }
section#us aside#proyectos hr    { border:2px solid #fced00; width:20%; }
section#blog_single article .row { padding:0 100px; }
section#blog_single p.backto     { margin: 20px 0 10px 0; padding: 20px 0 0 0; }
section#blog_single aside#related{ margin: 40px 0 0 0; padding: 40px; }
section#blog_single aside#related figure { margin:0 0 10px 0; }
section#blog_single ul li p.date { font-size:12px; margin:0 0 10px 0; }
section#blog_single aside#newsletter .box { margin:0 5%; }
section#blog_single aside#newsletter { padding:40px 0; }


/* FOOTER */
footer                        { padding:40px; }
footer ul li                  { font:normal 400 14px 'Exo 2', sans-serif; }
footer ul#links_legal li      { padding:2px 15px 4px 10px; }
footer figure                 { text-align: left; }
footer figure img             { width:30%!important; }
footer aside#nav              { width:80%; }



}





/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------- LAPTOP SCREEN RESOLUTION --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */

@media only screen and (min-device-width : 768px) and (max-device-width : 1366px) {

  .row                          { max-width: 80rem; }
  #topbar                       { padding: 20px!important; }
  figure#logo                   { margin:-2px 0 0 0; }
  #menudesktop figure#logo      { margin: 2px 0 0 0; }
  .eupopup-container-bottomleft { width:40%; }
  .eupopup-container            { padding:30px; }
  aside#customers               { background-size:cover; }
  section#homepage aside#form,
  section#wecallyouintro aside#form      { background-size:50%; padding:40px 0; }
  section#homepage aside#form form,
  section#wecallyouintro aside#form form { float: right; max-width: 60%; }
  section#homepage aside#form ul,
  section#wecallyouintro aside#form ul   { margin:0; }
  section#homepage aside#form p.small,
  section#wecallyouintro aside#form p.small  { margin:20px 0 0 0!important; }
  section#homepage aside#form label,
  section#wecallyouintro aside#form label { text-align:left; }
  section#homepage aside#form header h2,
  section#wecallyouintro aside#form header h2 { margin: 0 0 20px 0; }
  section#appointment aside#searchCenter ul.workshopListBodyLocator   { display:inline-block; margin:0; max-height:70vh; overflow-y: scroll; overflow-x: hidden; }

}


/* MAC BOOK (ISSUES) */

@media only screen and (min-width: 900px) and (max-width: 1440px) {
  #topbar                       { padding: 20px 40px!important; }
  section#appointment aside#damageArea ul li,
  section#appointment aside#damageSide ul li,
  section#appointment aside#glassType ul li,
  section#appointment aside#otherdamageType ul li,
  section#appointment aside#damageType ul li { height:32vh; }
}


/* MAC BOOK PRO 13 INCH (ISSUES) */

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
#topbar                         { /* padding: 20px 40px!important; */ padding: 20px 0!important; }
  figure#logo                   { margin:25px 0 0 0; }
  section#homepage aside#form,
  section#wecallyouintro aside#form      { background-size:54%; padding:40px 0; }
  section#homepage aside#form form,
  section#wecallyouintro aside#form form { float: right; padding-right:60px; width:60%; }
  section#homepage aside#form ul,
  section#wecallyouintro aside#form ul   { margin:0 15px 0 15px; }
  section#homepage aside#form header h2,
  section#wecallyouintro aside#form header h2 { margin: 0 0 20px 0; }
  section#homepage aside#form p.small,
  section#wecallyouintro aside#form p.small  { margin:20px 0 0 0!important; }
  section#homepage aside#form label,
  section#wecallyouintro aside#form label { text-align:left; }

  section#appointment aside#damageArea ul li,
  section#appointment aside#damageSide ul li,
  section#appointment aside#glassType ul li,
  section#appointment aside#otherdamageType ul li,
  section#appointment aside#damageType ul li { height:32vh; }

  section#service aside#highlights .content ul { margin:0 5% 40px; }
}



/* laptop 1920 x 1080 (ISSUES) */
section#appointment .tic_off,
section#appointment .tic_on { bottom: 4.5rem; }
section#appointment aside#damageArea ul li,
section#appointment aside#damageSide ul li,
section#appointment aside#glassType ul li,
section#appointment aside#damageType ul li { height: 37vh; }

}

@media only screen and (min-width: 1080px) and (max-width: 1920px) {

ul.workshopListBodyLocator   { display:inline-block; margin:0; max-height:65vh!important; overflow-y: scroll; overflow-x: hidden; }

}