body,
html {
  width: 100%;
  height: 100%;
}

body {
  font-family: Calibri, sans-serif; 
}

hr {
  max-width: 50px;
  border-width: 3px;
  border-color: #F05F40;
}

hr.light {
  border-color: #fff;
}

a {
  color: #F05F40;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

a:hover {
  color: #f05f40;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Calibri, sans-serif;  text-transform: uppercase;
}

.bg-primary {
  background-color: #F05F40 !important;
}

.bg-dark {
  background-color: #212529 !important;
}

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}

section {
  padding: 8rem 0;
}

.section-heading {
  margin-top: 0;
}

::-moz-selection {
  color: #fff;
  background: #212529;
  text-shadow: none;
}

::selection {
  color: #fff;
  background: #212529;
  text-shadow: none;
}

img::selection {
  color: #fff;
  background: transparent;
}

img::-moz-selection {
  color: #fff;
  background: transparent;
}

#mainNav {
  border-bottom: 1px solid rgba(33, 37, 41, 0.1);

  background-color: #f8f8f8;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

#mainNav .navbar-brand {
  font-weight: 700;
  text-transform: uppercase;
  color: #F05F40;
  font-family: 'brandon_grotesquebold' !important;
}

#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: #f05f40;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #3939e2;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
  color: #fff !important;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
  color: #F05F40 !important;
  background-color: transparent;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
  background-color: transparent;
}

@media (min-width: 992px) {
  #mainNav {
    border-color: transparent;
    background-color: transparent;
  }
  #mainNav .navbar-brand {
    color: rgba(255, 255, 255, 0.7);
  }
  #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
    color: #fff;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link {
    padding: 0.5rem 1rem;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
    color: rgba(57, 57, 226, 0.9);
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: #fff;
  }
  #mainNav.navbar-shrink {
    border-bottom: 1px solid rgba(33, 37, 41, 0.1);
    background-color: #fff;

  }
  #mainNav.navbar-shrink .navbar-brand {
    color: #F05F40;
  }
  #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
    color: #f05f40;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
    color: #3939e2;
  }
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
    color: #36aeea !important;
  }
}

/* header.masthead {

  
} */

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px;
}

header.masthead h1 {
  font-size: 2rem;
}

header.masthead p {
  font-weight: 300;
}



.service-box {
  max-width: 400px;
}

.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(240, 95, 64, 0.9);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  text-align: center;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  padding: 0 15px;
  font-family: 'Lato', sans-serif;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-box:focus {
  outline: none;
}

@media (min-width: 768px) {
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 16px;
  }
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 22px;
  }
}

.text-primary {color: #000000 !important;}
.btn {font-weight: 700;text-transform: uppercase;border: none;border-radius: 300px;}
.btn-xl {padding: 1rem 2rem;}


/* staycreative */


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {min-height: 0px !important;}


/* navbar */
.navbar.navbar-expand-lg.navbar-light.fixed-top {height: auto ;}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink {height: 90px !important;}

.logo-header {background-image: url(../img/logo-header.png); width: 100px;height:100px; background-size: contain;background-position: left center; background-repeat: no-repeat; }
.logo-header {background-image: url(../img/logo-header.png); width: 100px;height:100px; background-size: contain;background-position: left center; background-repeat: no-repeat; margin-bottom: 5px;}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-header {background-image: url(../img/logo-header-c.png); width: 80px;height:80px; background-size: contain;background-position: center; background-repeat: no-repeat;  margin-bottom: 5px;}
.logo-ajuntament {width: 220px;height:110px; background-size: contain;background-position: center; background-repeat: no-repeat; background-image: url(../img/logo-palma-w.svg);}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament{background-image: url(../img/logo-palma.svg); width: 200px;height:90px; background-size: contain;background-position: center; background-repeat: no-repeat;margin-top: 7px; }
.logo-ajuntament {top: 0;}
.logo-ajuntament-footer {background-image: url(../img/logo-palma-w.svg); width: 100%; height: 40px; background-size: contain; background-position: right; background-repeat: no-repeat; float: right; margin-top: 10px; margin-bottom: 0px; }

    /* PLATGES */
    .platges .logo-header {background-image: url(../img/logo-header.png); width: 100px;height:100px; background-size: contain;background-position: left center; background-repeat: no-repeat; }
    .platges .logo-header {background-image: url(../img/logo-header.png); width: 100px;height:100px; background-size: contain;background-position: left center; background-repeat: no-repeat; margin-bottom: 5px;}
    .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-header {background-image: url(../img/logo-header-c.png); width: 80px;height:80px; background-size: contain;background-position: center; background-repeat: no-repeat;  margin-bottom: 15px;}
    .logo-ajuntament {width: 220px;height:110px; background-size: contain;background-position: center; background-repeat: no-repeat; background-image: url(../img/logo-palma-w.svg);}
    .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament{background-image: url(../img/logo-palma.svg); width: 200px;height:90px; background-size: contain;background-position: center; background-repeat: no-repeat;margin-top: 7px; }
    .platges .logo-ajuntament {top: 0;}
    .platges .logo-ajuntament-footer {background-image: url(../img/logo-palma-w.svg); width: 100%; height: 40px; background-size: contain; background-position: right; background-repeat: no-repeat; float: right; margin-top: 10px; margin-bottom: 0px; }


        /* nav */
       .platges #mainNav .navbar-nav > li.nav-item > a.nav-link, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {color:#3939e2;}
        #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link, #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {color: #3939e2 !important;}
        .platges #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {color: rgba(54, 174, 234, 1);}
    

        .platges #mainNav {padding-left: 0;}
        .platges #mainNav .navbar-brand {width: 100%;}
        .platges .navbar .menu-left {background-color: rgba(255, 255, 255, 1); height: 90px; width: 24%;}
        .platges .navbar .menu-left .logo-ajuntament  {background-image: url(../img/logo-palma.svg); background-repeat: no-repeat;  margin: 0 auto; max-width: 260px; background-size: contain; height: 90px;}
        .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament img {display: none;}
        .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament {height: 75px; margin-left: 20px;}
        .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .menu-left {width: 250px;}
        .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .left-logo {margin-left: 0;}
        .platges .left-logo {margin-left: 5%;margin-top: 25px;}
        .platges .navbar .left-logo .logo-header {position: relative; float: right;} */

/* button */
.btn-light {background-color: #36aeea !important; border-radius:0 !important; color: white !important; border: 0 !important;  width: 100%; padding: 2rem 4rem !important;}
.btn:hover {background-color: #daed24 !important; color: #3939e2 !important;}
.btn-md{padding: 10px 20px !important;border-radius: 30px !important;font-family: Calibri, sans-serif; }
.btn-primary:hover{border-color:#daed24 !important;}
.btn-primary {background-color: #3939e2 !important;border-color: #3939e2 !important;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {color: #fff !important;background-color: #daed24 !important;}
.btn-secondary {background-color: #3939e2 !important;border-color: #3939e2 !important;}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {color: #3939e2 !important;background-color: #fff !important;border-color: #fff !important;}

/* CAROUSEL */
.carousel-control-next {background-color: #3939e2; opacity: 0.8 !important;}
.carousel-control-next:hover {opacity: 1 !important;}
.carousel-control-prev {background-color: #3939e2; opacity: 0.8 !important;}
.carousel-control-prev:hover {opacity: 1 !important;}
.carousel-item {height: 75vh; background-size: cover; background-position: center;}
.carousel-arrows {height: 80px;;}
a.carousel-btn {background-color: #daed24; width: 100%; height: 100%; border: 0; border-radius: 0; color: #3939e2;-webkit-transition: ease-in-out,  .35s ease-in-out;transition: ease-in-out, .35s ease-in-out;}
a.carousel-btn:hover {background-color: #36aeea !important; color: white !important;}
a.carousel-btn > div {padding-top: 20px;}

/* icons */
.icon{background-image: url('../img/assets-sprite.svg');display: inline-block; background-size: 1000px 500px;-webkit-transition: ease-in-out,  .35s ease-in-out;transition: ease-in-out, .35s ease-in-out;}
.icon.fam { width: 100px; height: 100px; background-position: 0px -170px; margin-left: calc(50% - 50px);  }
.icon.sno { width: 100px; height: 100px; background-position: -100px -170px; margin-left: calc(50% - 50px); margin-top: 20px; }
.icon.nat { width: 100px; height: 100px; background-position: -200px -170px; margin-left: calc(50% - 50px); margin-top: 20px; }

.icon.acc { width: 61px; height: 61px; background-position: 0px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px; }
.icon.ban { width: 61px; height: 61px; background-position: -61px -100px;margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.cru { width: 61px; height: 61px; background-position: -122px -100px;margin-left: calc(50% - 30px); margin-bottom: 30px; }
.icon.dut { width: 61px; height: 61px; background-position: -183px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.pap { width: 61px; height: 61px; background-position: -244px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.far { width: 61px; height: 61px; background-position: -305px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.dog { width: 61px; height: 61px; background-position: -366px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.res { width: 61px; height: 61px; background-position: -427px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.paj { width: 61px; height: 61px; background-position: -488px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.lea { width: 61px; height: 61px; background-position: -549px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.car { width: 61px; height: 61px; background-position: -610px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.hou { width: 61px; height: 61px; background-position: -671px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.ase { width: 61px; height: 61px; background-position: -732px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.ale { width: 61px; height: 61px; background-position: -793px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.not-tulli { width: 61px; height: 61px; background-position: -366px -100px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.map { width: 18px; height: 25px; background-position: -210px 0px; vertical-align: middle;margin-right: 5px;margin-top: -6px;}
.icon.acc-w { width: 61px; height: 61px; background-position: 0px -280px;  }
.icon.ban-w { width: 61px; height: 61px; background-position: -61px -280px; }
.icon.cru-w { width: 61px; height: 61px; background-position: -122px -280px; }
.icon.dut-w { width: 61px; height: 61px; background-position: -183px -280px;  }
.icon.dog-w { width: 61px; height: 61px; background-position: -244px -280px; }
.icon.res-w { width: 61px; height: 61px; background-position: -305px -280px; }
.icon.acc-w { width: 61px; height: 61px; background-position: 0px -280px;  margin-bottom: 0px; }
.icon.ban-w { width: 61px; height: 61px; background-position: -61px -280px; margin-bottom: 0px;}
.icon.cru-w { width: 61px; height: 61px; background-position: -122px -280px; margin-bottom: 0px; }
.icon.dut-w { width: 61px; height: 61px; background-position: -183px -280px;  margin-bottom: 0px;}
.icon.pap-w { width: 61px; height: 61px; background-position: -244px -280px;  margin-bottom: 0px;}
.icon.far-w { width: 61px; height: 61px; background-position: -305px -280px;  margin-bottom: 0px;}
.icon.dog-w { width: 61px; height: 61px; background-position: -366px -280px;  margin-bottom: 0px;}
.icon.res-w { width: 61px; height: 61px; background-position: -427px -280px;  margin-bottom: 0px;}
.icon.paj-w { width: 61px; height: 61px; background-position: -488px -280px;  margin-bottom: 0px;}
.icon.lea-w { width: 61px; height: 61px; background-position: -549px -280px;  margin-bottom: 0px;}
.icon.car-w { width: 61px; height: 61px; background-position: -610px -280px;  margin-bottom: 0px;}
.icon.hou-w { width: 61px; height: 61px; background-position: -671px -280px;  margin-bottom: 0px;}
.icon.ase-w { width: 61px; height: 61px; background-position: -732px -280px;  margin-bottom: 0px;}
.icon.ale-w { width: 61px; height: 61px; background-position: -793px -280px; margin-bottom: 0px;}

.icon.flo-w { width: 141px; height: 61px; background-position: -793px -280px; margin-bottom: 0px;}
.icon.flot-w { width: 141px; height: 61px; background-position: -793px -280px; margin-bottom: 0px;}
.icon.azu-w { width: 61px; height: 61px; background-position: -725px -351px; margin-bottom: 0px;}

.icon.acc-p { width: 61px; height: 61px; background-position: 0px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px; }
.icon.ban-p { width: 61px; height: 61px; background-position: -61px -280px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.cru-p { width: 61px; height: 61px; background-position: -122px -280px; margin-left: calc(50% - 30px); margin-bottom: 30px; }
.icon.dut-p { width: 61px; height: 61px; background-position: -183px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.pap-p { width: 61px; height: 61px; background-position: -244px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.far-p { width: 61px; height: 61px; background-position: -305px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.dog-p { width: 61px; height: 61px; background-position: -366px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.res-p { width: 61px; height: 61px; background-position: -427px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.paj-p { width: 61px; height: 61px; background-position: -488px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.lea-p { width: 61px; height: 61px; background-position: -549px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.car-p { width: 61px; height: 61px; background-position: -610px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.hou-p { width: 61px; height: 61px; background-position: -671px -280px;  margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.ase-p { width: 61px; height: 61px; background-position: -732px -280px; margin-left: calc(50% - 30px); margin-bottom: 30px;}
.icon.ale-p { width: 61px; height: 61px; background-position: -793px -280px; margin-left: calc(50% - 30px); margin-bottom: 30px;}

.icon.flo-p { width: 141px; height: 61px; background-position: -305px -351px; margin-left: calc(50% - 70px); margin-bottom: 30px;}
.icon.flot-p { width: 141px; height: 61px; background-position: -450px -351px; margin-left: calc(50% - 70px); margin-bottom: 30px;}
.icon.azu-p { width: 61px; height: 61px; background-position: -725px -351px; margin-left: calc(50% - 30px); margin-bottom: 30px;}

.icon.not-tulli-w { width: 61px; height: 61px; background-position: -366px -280px; }
.icon.del { width: 61px; height: 61px; background-position: 0px -351px; margin-left: calc(50% - 30px); margin-top: 30px; margin-bottom: 15px; }
.icon.hoj { width: 61px; height: 61px; background-position: -61px -351px; margin-left: calc(50% - 30px); margin-top: 30px; margin-bottom: 15px;}
.icon.man { width: 61px; height: 61px; background-position: -122px -351px; margin-left: calc(50% - 30px); margin-top: 30px; margin-bottom: 15px;}
.icon.gri { width: 61px; height: 61px; background-position: -183px -351px;  margin-left: calc(50% - 30px); margin-top: 30px; margin-bottom: 15px;}
.icon.bic { width: 61px; height: 61px; background-position: -244px -351px; margin-left: calc(50% - 30px); margin-top: 30px; margin-bottom: 15px;}



/* personal */
.section {padding: 10vh;}
.section-text {padding: 5vh;}
.section-intro {padding: 10vh 10vh; }
.section-footer {padding: 10vh 10vh 5vh 10vh; }
.sense-marge {margin-right: 0px !important; margin-left: 0px !important;} 
.light-blue {color: #36aeea !important;}
.dark-blue {color: #3939e2 !important;}
.green {color: #daed24 !important;}
.overlay-header {background-color: rgba(57,57,226,0.8);position: absolute;top: 0;left:0;width: 25%;height: 75vh; z-index: 1;}
.dark-overlay {background-color: rgba(0,0,0,0.1);position: absolute;top: 0;left:0;width: 100%; height: 100%; z-index: 1;}
.blue-overlay {background-color: rgba(57,57,226,0.6);position: absolute;top: 0;left:0;width: 100%;height: 100%; z-index: 1;}
.sky-overlay {background-color: rgba(54,174,234,0.6);position: absolute;top: 0;left:0;width: 100%;height: 100%; z-index: 1;}
.white-overlay {background-color: rgba(255,255,255,0.8);position: absolute;top: 0;left:0;width: 100%;height: 100%; z-index: 1;}
.left-right {padding-left: 5px; padding-right: 5px;}
.clear {clear: both;}
.overlay-gallery {background-color: rgba(218,237,36,0.9);position: absolute;top: 0;left:0;width: 100%;height: 100%; z-index: 1;opacity: 0;-webkit-transition: ease-in-out,  .35s ease-in-out;transition: ease-in-out, .35s ease-in-out;}
.overlay-gallery:hover {opacity: 1  ;}
.bootom-0 {bottom: -10px !important; position: absolute;}
.white {color: white !important;}
.block {display: block !important;}


li {list-style: none !important; list-style-type: none !important; font-family: Calibri, sans-serif;}
header.masthead {font-family: Calibri, sans-serif; text-transform: uppercase;}
#mainNav.navbar-shrink {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); }
.navbar-light .navbar-toggler {border: 0; position: absolute; right: 30px; top: 25px;}
.dropdown-menu {border: 0 !important; border-radius: 0 !important; background-color: rgba(248, 248, 248, 0.8) !important; }
.dropdown-item {color: #007bff !important;}
.dropdown-item:hover {color: #3939e2 !important;}
.navbar .menu-left {float: left; width: 360px;}
.navbar .menu-right {float: right; width: calc(100% - 360px);}
.navbar-expand-lg .navbar-nav {background-color: rgba(255, 255, 255, 0.5); padding-right: 40px;}
#mainNav {padding-right: 0;}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .dropdown-menu {background-color: rgba(248, 248, 248, 1) !important;}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .dropdown-item {color: #3939e2 !important;}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .dropdown-item:hover {background-color: #daed24 !important;}
.navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-header {}
.navbar-brand {padding-top:0 !important; padding-bottom: 0 !important;}
.navbar-toggler.navbar-toggler-right .navbar-brand {margin-top: 100px;}



h1, h2, h3, h4, h5, h6 { font-family: Calibri, sans-serif ; text-transform: uppercase; display: block;}
h3 span { display: block;}
p {color: #000000; font-family: Calibri, sans-serif; }
.header h1 {font-family: Calibri, sans-serif;  text-transform: uppercase;}



/* footer */
footer {background-color: #000000;}
.logo-footer {background-image: url(../img/logo-header.png); width: 140px;height:140px; background-size: contain;background-position: left center; background-repeat: no-repeat; margin-bottom: 40px;}
footer p {color: white; font-weight: 400; font-size: 0.9rem;}
footer p b{text-transform: uppercase;}
ul.footer-menu {float: right; text-align: right; padding-top: 5px;}
ul.footer-menu a {color: white; float: right; display: block; width: 100%; padding-bottom: 5px;}
ul.footer-menu-legal a {color: white; float: right;} 
ul.footer-menu a:hover {color: #36aeea; text-decoration: none !important; }
ul.footer-menu li.nav-item.dropdown {display: block !important; width: 100%;}
footer .legal a {color: white; float: right;}
footer .nav-link {padding: 0;}
footer .dropdown-menu {background-color: rgba(0, 0, 0, 0.6  ) !important;}
/*.legal {margin-left: 20px;}*/


/* home */
.home {position: relative;}
.home .header {background-image: url(../img/01_header.jpg) !important; background-size: cover; min-height: 90vh; background-position: bottom; margin-bottom: -5px; position: relative;}
.home .header h1 {padding-top: 30vh; text-align: center;width: 100%;font-size: 4rem;text-shadow: 1px 1px 10px rgba(0,0,0,0.4);}
.home .intro {position: relative; margin-top: 0; border-bottom: 50px solid #000000;}
.home .bg-primary.intro {background-color: #fff !important;}
.home .intro-left {position: relative;}
.home .intro-left h3 span {color: #36aeea; display: block; font-size: 70%; margin-bottom: 2vh;}
.home .intro-left h3 {color: #3939e2; max-width: 500px; width: 100%; margin-bottom: 20px;}
.home .intro-left .direction {float: right; margin-right: -15px;}
.home .intro-left .direction .line-right {width: 200px; border: 1px solid #000;}
.home .intro-left .direction p {float: right; margin-top: 10px; padding-right: 15px;}
.home .intro-right {background-color: #0000c2; padding-top: 10vh; margin-top: -30vh; text-align: right;}
.home .intro-right h4 {color: white;}
.home .intro-right p {color: white;}
.home .intro-right .map {position: absolute; bottom: 0; right: 0;}
.home .intro-right .map img {background-size: cover; height: 100%; width: 100%;}
.home .intro-right .map svg {background-size: cover; height: 100%; width: 100%;margin-bottom: -6px;}
.home .beach {position: relative;}
.home .beach h3 span {color: #36aeea; display: block; font-size: 70%; margin-bottom: 2vh;}
.home .beach h3 {color: #3939e2; ; margin-bottom: 20px;}
.home .beach .bg-green {background-color: #daed24; height: 115px;}
span.rounded-b-l {width: 8px; height: 8px; border-radius: 4px; background-color: #000000; float: left; margin-top: -4px; margin-left: -1px;}
span.rounded-w-b {width: 8px; height: 8px; border-radius: 4px; background-color: #ffffff; margin-top: -4px; margin-left: -4px; position: absolute; top: 100px;}
span.rounded-w-t {width: 8px; height: 8px; border-radius: 4px; background-color: #ffffff; margin-top: -2px; margin-left: -4px; position: absolute; bottom: 98px;}

  /* owl-carousel */
  .owl-carousel .owl-nav.disabled {display: inline-block !important; position: absolute; right: 30px;  margin-top: 110px;}
  .owl-carousel .owl-item img {cursor: pointer;}
  .owl-carousel .owl-nav .owl-prev {display: none;}
  .owl-carousel .owl-nav .owl-next {display: none;}
  .con-slider {position: relative;}
  .home .owl-carousel .owl-prev { content: ""; display: inline-block; width: 40px; height: 40px; background-image: url(../img/assets-sprite.svg); background-position: -27px -48px; position: absolute; bottom: -60px; right: 90px; background-size: 1000px 500px; color: transparent;}
  .home .owl-carousel .owl-next {content: ""; display: inline-block; width: 40px; height: 40px; background-image: url(../img/assets-sprite.svg); background-position: -65px -48px; position: absolute; bottom: -60px; right: 40px; background-size: 1000px 500px; color: transparent;}

/* que */
    /* nav */
    .que #mainNav .navbar-nav > li.nav-item > a.nav-link, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {color: rgba(57, 57, 226, 1);}

.que {position: relative;}
.que .header {background-image: url(../img/bg-que-01.jpg) !important; background-size: cover; min-height: 70vh; background-position: bottom center; position: relative;}
.que .header h1 {max-width: 650px; position: relative; z-index: 2;text-shadow: 1px 1px 10px rgba(0,0,0,0.4);}
.que .intro {position: relative;}
.que .intro h3 {color: #3939e2; ; margin-bottom: 20px; text-align: center;}
.que .intro h3 span {color: #36aeea; display: block; font-size: 70%; margin-bottom: 2vh;}
.que .intro p {text-align: center;}
.que .beach {background-color: #36aeea; min-height: 45vh;} 
.que .beach h3 {color: white; padding: 10vh 5vh 0; font-size: 2.4rem;}
.que .beach .names{padding-left: 5vh;}
.que .beach .names li {color: white; display: inline-block; font-size: 2rem;padding: 20px 0;}
.que .beach .names li a {color: white; text-decoration: none;}
.que .beach .names li a:hover {color: #daed24;}
.que .beach .icons {background-color: #3939e2; padding-top: 10vh; margin-top: -25vh; padding-bottom: 10vh;}
.que .beach .icons p {color: white;  text-align: center; text-transform: uppercase;}
.que .img {background-image: url(../img/bg-que-02.jpg) !important; background-size: cover; min-height: 70vh; background-position: bottom right; position: relative; z-index: -1;}


/* platges */
.platges {position: relative;}
.platges .section-intro {padding: 20vh 10vh;}
.platges .header {background-image: url("../img/2_Passeig-Molinar_Header.jpg"); background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headerpetrolera {background-image: url("../img/1_Sa Petrolera_Header.jpg") !important; }
.platges .headermolinar {background-image: url("../img/2_Passeig-Molinar_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headercjardi {background-image: url("../img/3_Ciutat-Jardi_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headerpenyo {background-image: url("../img/4_Es-Penyo_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headercgamba {background-image: url("../img/5_Cala-Gamba_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headercarnatge {background-image: url("../img/6_Es-carnatge_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headersoncaios {background-image: url("../img/7_Son-Caios-i-Illot-de-Sa-Galera_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .headercestancia {background-image: url("../img/8_Cala-Estancia_Header.jpg") !important; background-size: cover; min-height: 70vh; background-position:  center; position: relative;}
.platges .header h1 {position: relative; z-index: 2; padding-top: 50vh; padding-left: 60px; padding-right: 10px; width: 30%;text-shadow: 1px 1px 10px rgba(0,0,0,0.4);}
.platges .intro {position: relative;}
.platges .intro img{max-width: 100%;}
.platges .intro h3 {color: #3939e2; ; margin-bottom: 20px; }
.platges .intro h3 span {color: #36aeea; display: block; font-size: 70%; margin-bottom: 2vh;}
.platges .tecnics {position: relative;}
.platges .tecnics .indication {background-color: #000000; width: 5vh; height: 100%; position: absolute; right: 0;}
.platges .tecnics .line-right {width: 200px; border: 1px solid #000; float: right; height: 1px;  margin-top: 15vh;}
.platges .tecnics p {color: #3939e2; text-transform: uppercase; text-align: center;}
.platges .animal .img  {background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgmolinar {background-image: url(../img/46_arena.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgcjardi {background-image: url(../img/47_arena.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgpenyo {background-image: url(../img/48_roques.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgcgamba {background-image: url(../img/49_roques-arena.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgcarnatge {background-image: url(../img/50_arena-posidonia.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgcarnatge2 {background-image: url(../img/47.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgsoncaios {background-image: url(../img/51_posidonia.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .imgcestancia {background-image: url(../img/52_arena.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animal .text-left {border: 10px solid white; position: relative; z-index: 1; padding: 10vh;}
.platges .animal .section-left {padding: 10vh 10vh 10vh 30vh; margin-right: -20vh;}
.platges .animal .text-left h3 {color: white;}
.platges .animal .text-left p {color: white;}
.platges .animal .text-right {background-color: #36aeea; color: white;}
.platges .animal .text-right .section-right {padding: 10vh 10vh 10vh 20vh; }
.platges .animal .text-right .section-right p {color: white; text-align: left;}
.platges .centreblau{background-color:#3939e2;}
.platges .centreblau 
.platges .centreblau h3.white{color: white;}
.platges .centreblau h3.white span{font-size: 60%;}
.platges .centreblau p{color: white;}
.platges .activities {position: relative;;}
.platges .activities .bg-green {width:calc(100% - 5vh); background-color: #daed24; position: relative}
.platges .activities .edu {position: relative; z-index: 3;}
.platges .activities .edu .icons{margin-bottom: 50px;}
.platges .activities .bg-green h3, .platges .activities .bg-green p {color: #3939e2}
.platges .activities .bg-green .icons p {color: #3939e2; text-align: center;}
.platges .img-centre-blau{background-size:cover;background-position: center;background-repeat: no-repeat;min-height: 70vh !important; background-image: url("../img/1_Sa Petrolera_SecciO_centre_blau.jpg") !important;}
.platges .security {position: relative;}
.platges .security .bg-black {background-color: #000000;}
.platges .security h3 {color: white;margin-bottom: 40px;}
.platges .security h3 span{font-size: 60%;}
.platges .security p {color: white;}
.platges .vegetation {position: relative;}
.platges .vegetation .img {background-image: url(../img/bg-playa-03.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .vegetation .line-right {width: 1px; height: 5vh; border: 1px solid #000; position: absolute; margin-top: -10vh; margin-bottom: 10vh;}
.platges .vegetation span.rounded-b-l {width: 8px; height: 8px; border-radius: 4px; background-color: #000000; float: left; margin-top: calc(5vh - 2px); margin-left: -4px;}
.platges .animals {position: relative;}
.platges .animals .img {background-image: url(../img/bg-playa-02.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .animals .line-right {width: 1px; height: 5vh; border: 1px solid #000; position: absolute; margin-top: -10vh; margin-bottom: 10vh;}
.platges .animals  span.rounded-b-l {width: 8px; height: 8px; border-radius: 4px; background-color: #000000; float: left; margin-top: calc(5vh - 2px); margin-left: -4px;}
.platges .geomorfology {position: relative;}
.platges .geomorfology .img {background-image: url(../img/bg-playa-04.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center; position: relative;}
.platges .geomorfology .text-right {border: 10px solid #daed24; position: relative; z-index: 1; padding: 10vh;}
.platges .geomorfology .section-right {padding: 10vh 30vh 10vh 10vh; margin-left: -20vh;;}
.platges .geomorfology .text-right h3 {color: white; word-wrap: break-word;}
.platges .geomorfology .text-right p {color: white; text-align: right;}
.platges .geomorfology .text-left {background-color: #36aeea; color: white;}
.platges .geomorfology .text-left .section-left {padding: 10vh 20vh 10vh 10vh; }
.platges .geomorfology .text-left .section-left p {color: white; text-align: left;}
.platges .dogs{position: relative;}
.platges .dogs .img {background-image: url(../img/bg-perros.jpg) !important; background-size: cover; min-height: 50vh; height: 100%; background-position: center bottom; position: relative;}
.platges .dogs .img {border: 10px solid #daed24; position: relative; z-index: 1; padding: 5vh;}
.platges .dogs .section-right {padding: 0vh;}
.platges .dogs .section-right h3 {color: #fff; text-shadow: 1px 1px 10px rgba(0,0,0,0.4); margin-bottom: 20px;font-size: 2rem;text-align: right;    text-align: left; float: left; border: 10px solid white; padding: 3vh; }
.platges .dogs h3 {color: white; word-wrap: break-word;}
.platges .dogs p {color: white;}
.platges .dogs .text-left {background-color: #36aeea; color: white;}
.platges .dogs .text-left .section-left {padding: 10vh 20vh 10vh 10vh; }
.platges .dogs .text-left .section-left p {color: white; text-align: left;}

.beach-ind {position: relative;}
.beach-ind .row{height:100%;}
.beach-ind ul {margin-left: 0;  padding-left: 0;}
.beach-ind .img-beach-ind {background-image: url(../img/bg-home-02.jpg) !important; background-size: cover; background-position: center; min-height: 75vh; position: relative; height: 100%;}
.beach-ind h3 span {color: #36aeea; display: block; font-size: 70%; margin-bottom: 2vh;}
.beach-ind h3 {color: #fff;text-shadow: 1px 1px 10px rgba(0,0,0,0.4); margin-bottom: 20px;font-size: 4rem;text-align: right;}
.beach-ind h3 a{color: #fff;text-shadow: 1px 1px 10px rgba(0,0,0,0.4);}
.beach-ind h3 a:hover{color: #fff;text-shadow: 1px 1px 10px rgba(0,0,0,0.4);text-decoration: none;}
.beach-ind .bg-blue {background-color:rgba(57, 57, 226, 0.8); opacity: 0.8; height: 100%; top: 0;}
.beach-ind .bg-blue .icons {padding: 40px 0px;;}
.beach-ind .bg-blue .icons p {color: white; display: block; }
.beach-ind .line-top {height: 100px; width: 1px; border: 1px solid #fff; margin: 0 auto; display: none;}
.beach-ind .line-bottom {height: 100px; width: 1px; border: 1px solid #fff; margin: 0 auto; position: absolute; left: calc(50% - 1px); bottom: 0; display: none;}
.beach-ind .arrows {float: right; display: inline-flex;  margin-top: 34px; margin-right: 40px;}
.beach-ind .arrows .arrow-left {display: inline;}
.beach-ind .arrows .arrow-right {display: inline;margin-left: 20px;}


/* informacio */
.informacio {position: relative;}
.informacio .intro {position: relative; margin-top: 10vh; border-bottom: 50px solid #000000;}
.informacio #mainNav {background-color: #36aeea; }
.informacio #mainNav.navbar-shrink {background-color: #f8f8f8;}





/* gallery */
.gallery-container {position: relative; margin-bottom: 10vh;}
.gallery-container p{color: white;margin-bottom: 40px;max-width: 650px;}
.gallery-container .overlay-gallery p {color: #3939e2; text-align: center; text-transform: uppercase; margin-top: 14vh;}
.gallery-container .overlay-gallery p span {display: block; margin-top: 10px; font-size: 140%;}
.gallery-container .text {background-color: #36aeea; min-height: 30vh;}
.gallery-container .text h3 {font-size: 3rem; color: white; margin-top: 10vh; margin-bottom: 5vh;  font-family: Calibri, sans-serif; }
.gallery-container .play {margin-top: -10vh;}
.gallery-item{margin: 5px; background-size: cover;background-position: center; height: 30vh;}
.gallery-item.col-md-4 {  flex: 0 0 33.333333%; max-width: calc(33.333333% - 10px);}



/* legal */
.legal {position: relative;}
.legal .header {background-image: url(../img/bg-playa-01.jpg) !important; background-size: cover; min-height: 50vh; background-position: center; margin-bottom: -5px; position: relative;}
.legal .header h1 {padding-top: 30vh; text-align: center;width: 100%;font-size: 4rem;}

/* legal */
.cookies {position: relative;}
.cookies .header {background-image: url(../img/bg-playa-01.jpg) !important; background-size: cover; min-height: 50vh; background-position: center; margin-bottom: -5px; position: relative;}
.cookies .header h1 {padding-top: 30vh; text-align: center;width: 100%;font-size: 4rem;}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  

}

@media (max-width: 1199px) { 
  
  .navbar.navbar-expand-lg.navbar-light.fixed-top {height: 150px; }
  .navbar-collapse.collapse.show .navbar.menu-right #navbarResponsive{width: 100%;}
  .navbar-expand-lg.navbar-nav {width: 100%;}
  

  /* home */
  .home .intro-right {margin-top: 0;}
  .home .beach-ind .arrows {height: 70px; margin-top: 0;}

  /* platges */
  .platges .geomorfology .text-right
  .platges .activities .bg-green {width: 100%;}
  .platges .geomorfology .text-left .section-left {padding:10vh;}
  .platges .geomorfology .section-right { padding: 10vh; margin-left: 0;}
  .platges .geomorfology .text-left .section-left {padding: 5vh;} 
  .platges .animal .section-left { padding: 10vh; margin-right: 0;}
  .platges .animal .text-right .section-right {padding:10vh;}
  .platges .geomorfology .text-right {padding: 5vh;}
  .platges .animal .text-left {padding: 5vh;}
  .platges .activities .bg-green {width: 100%;}
  .platges .security .bg-black {width: 100%;}
  .que .beach .names li{width: 50%;}


}
 /* Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  


} */

@media (max-width: 991px) { 
  
  .section {padding: 5vh;}
  .section-intro {padding: 5vh;}
  .platges .section-intro {padding: 10vh 5vh;}
  .home .beach .bg-green {height: 60px;}
  .platges .header h1 {position: relative; z-index: 2; padding-left: 60px; padding-right: 20px; bottom: 6vh; position: absolute; width: 90%;}
  #navbarResponsive {background-color: #f8f8f8; width: 100%; margin-left: -20px; margin-right: -20px; padding: 40px 30px;  margin-top: -15px;}
  .logo-header {height: 80px; width: 80px; background-image: url(../img/logo-header-c.png);} 
  .platges .vegetation .line-right {display: none;}
  .platges .animals .line-right {display: none;}
  .que .beach .icons {margin-top: 0;}
  /* .overlay-header { height: 20vh; top: auto; bottom: 0; width: 100%; } */
  .home .beach-ind .bg-blue .icons {padding: 40px 0px 10px;}
  .platges .beach-ind .bg-blue .icons {padding: 40px 0px 10px;}
  .none {display: none;}
  .min-0 {min-height: 0 !important;}
  .navbar-collapse.collapse.show .dropdown-item {color: rgba(57, 57, 226, 1) !important;}
  .navbar-collapse.collapse.show .dropdown-item:hover {color: #36aeea !important;}
  .platges .geomorfology .text-left {order: 1; -webkit-order:1;}
  .platges .dogs .section-right h3 {font-size: 2rem; padding: 3vh;}
  .platges .dogs .section-right {padding: 5vh;}
  .navbar .menu-right {float: left; margin-top: -22px; padding-right: 0; margin-right: 0;}
  .navbar .menu-right #navbarResponsive {margin-right: 0; margin-left: 0;}
  
  .logo-ajuntament { background-image: url(../img/logo-palma.svg); width: 200px; height: 90px; background-size: contain; background-position: center; background-repeat: no-repeat; margin-top: 5px;}
  .logo-header {margin-top: 5px;}
  .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament {margin-top: 0;}
  .navbar.navbar-expand-lg.navbar-light.fixed-top {height: 90px; }

  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {color: #36aeea !important;}
  #mainNav .navbar-brand {height: 90px; margin-top: 0px;}
  .menu-right .navbar-toggler.navbar-toggler-right {}
  .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament {height: 90px;}
  .platges .left-logo {float: left; margin-top: 0px; margin-left: 230px; position: absolute;}
  .platges .navbar .menu-left {background-color: #f8f8f8; width: 260px;}
  .platges .logo-ajuntament { background-image: url(../img/logo-palma.svg); width: 200px; height: 90px; background-size: contain; background-position: center; background-repeat: no-repeat;}
  .platges .logo-header {margin-top: 5px;}
  .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .left-logo {margin-left: 230px;}
  .platges .navbar .left-logo .logo-header {background-image: url(../img/logo-header-c.png); height: 80px; margin-top: 8px;}
  .platges #mainNav .navbar-nav > li.nav-item > a.nav-link, #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {color: #191962;}
  .platges .navbar-expand-lg .navbar-nav {padding: 0 10px 0 20px;}
  .informacio #mainNav {background-color: #f8f8f8; }



}

/* Medium devices (tablets, 768px and up) 
@media (min-width: 768px) {
  


}*/

@media (max-width: 767px) { 
  
  .section-footer {padding: 5vh;}
  .home .intro-right .map img {width:50%;}
  .home .beach-ind .bg-blue {background-color: rgba(57, 57, 226, 1);  min-height: 10vh; height: auto; position: absolute; top: 0;}
  .platges .beach-ind .bg-blue, .home .beach-ind .bg-blue {background-color: rgba(57, 57, 226, 1); min-height: 10vh; height: auto; position: relative; top: 0;width: calc(100% + 15px);margin-bottom: 200px;}
  .carousel-control-next, .carousel-control-prev {margin-top: -88px;}
  .home .beach-ind .line-top {display: none;}
  .home .beach-ind .line-bottom {display: none;}
  .platges .beach-ind .line-top {display: none;}
  .platges .beach-ind .line-bottom {display: none;}
  .platges .activities .bg-green {width: 100%;}
  .gallery .gallery-item.col-md-4 {max-width: 100%; flex: 0 0 100%;}
  ul.footer-menu a {text-align: left; float: left;}
  .footer-menu {margin-top: 20px;  padding-left: 0;}
  .home .intro-right .map {position: relative; max-width: 320px; float: right;}
  .order-1 {order: -1 !important; -webkit-order:-1 !important;}
  .order {order: 1 !important; -webkit-order:1 !important;}
  .beach-ind h3 {position: relative; bottom: 10vh;}
  .logo-ajuntament-footer {background-position: left;}
  .platges .navbar .menu-left .logo-ajuntament {margin-left: 20px;}
  .platges .left-logo {margin-left: 205px;}
  .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament {width: 170px; margin-top: 10px;}


}


/*Small devices (landscape phones, 544px and up)
@media (min-width: 544px) {
     


}*/


@media (max-width: 575px) { 

  .home .beach-ind .bg-blue {display: none;}
  .platges .beach-ind .bg-blue {display: none;}
  /* .beach-ind h3 {position: none; bottom: 0} */
  .beach-ind h3 {display: none; bottom: 0}
  .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-ajuntament { margin-top: 5px; height: 90px; width: 160px; margin-bottom: 0px;}
  .home .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .logo-header {margin-bottom: 0;}
  .platges .navbar.navbar-expand-lg.navbar-light.fixed-top.navbar-shrink .left-logo {margin-left: 190px;}


}


@media (max-width: 543px) { 

  .section-intro {padding: 3vh;}
  .section-footer {padding: 3vh;}
  .section {padding: 3vh;}
  .section-text {padding: 3vh;}
  .home .intro-right .map img {width:100%;}
  .platges .tecnics .indication {display: none;}
  .platges .tecnics .line-right {display: none;}
  .h1, h1 {font-size: 2rem !important; padding-top: 15vh; }
  .platges .header h1 {font-size: 2rem !important; padding-top: 15vh; padding-left: 5vh !important;}
  .overlay-header {width: 100%; height: 20vh; position: absolute; bottom: 0;}
  .overlay-header {display: none;}
  .home .beach-ind .bg-blue {position: relative;}
  .platges .beach-ind .bg-blue {position: relative;}
  .platges .animal .section-left {padding: 2vh;}
  .platges .animal .text-right .section-right {padding: 3vh;}
  .platges .geomorfology .text-right {padding: 3vh;}
  .platges .geomorfology .section-right {padding: 3vh;}
  .gallery .gallery .text h3 {font-size: 2.2rem;}
  .gallery .gallery .play {margin-top: -15vh; margin-left: -10px !important;}
  .platges .geomorfology .text-left .section-left {padding: 3vh;}
  .platges .animal .text-left {padding: 3vh;}
  .carousel-item {order: -1; -webkit-order: -1;}
  .carousel-item {order: 10; -webkit-order: 10;}
  .icon-ind {width: 33.33333% !important;}
  .platges .beach-ind .bg-blue.order-1 {display: none;}
  .carousel-inner {height: 60vh;}
  .platges .dogs .section-right {padding: 0;}
  .home .logo-ajuntament {width: 180px;}
  .platges .logo-ajuntament {width: 180px;}
  .navbar-light .navbar-toggler {right: 20px;}
  .navbar-light .navbar-brand {margin-right: 0px;}
  .navbar .menu-left {width: 280px;}
  .informacio .navbar .menu-left {width: 290px;}
  
  

}