@charset "UTF-8";
/* CSS Document */

:root {
    --cultura: #ea5b0b; /*234,91,11*/
    --esports: #94C11F; 
    --participacio: #e02020;
    --solidaria: #53A333; 
    --igualtat: #82358b; 
    --saludable: #007fc6; 
    --white: #fff; 
    --upf: #ea5b0b; /*200,16,46*/
    }
    
.general  {background: var(--upf)}
.cultura  {background: var(--cultura)}
.esports  {background: var(--esports)}
.participacio  {background: var(--participacio)}
.solidaria  {background: var(--solidaria)}
.igualtat  {background: var(--igualtat)}
.saludable  {background: var(--saludable)}

/* heade */
.header {width: 100%; font-family: Verdana, Geneva, "sans-serif"; background: var(--white); font-size: 1em;font-weight: 400!important; line-height: 1.5em; margin: 0px; padding: 0px; display: block;  border:  0px solid #ee0000; height: 98px; }  

.dropdown-item i {color: var(--upf)!important; margin-right: 5px;}
.navbar-toggler-icon {background: var(--upf)!important; border: 0px solid #f89; height: 30px!important; width: 30px!important; background-image: url("https://storage.googleapis.com/inscribirme.appspot.com/media/upf/ham_bg.png")!important; background-size: cover!important; background-repeat: no-repeat!important; background-position: center center!important}
    
.headerwrapper {
    display: grid;
  grid-gap: 0px;
  grid-template-columns: 80% 20% ; padding: 0px; font-family: Verdana, Geneva, "sans-serif"; color: var(--white); font-size: 1em;
  font-weight: 400!important; margin: 0px auto; width: 1240px; line-height: 1.5em; -webkit-font-smoothing: antialiased!important; }
    
.headerwrapper a {text-decoration: none; color: var(--white)!important; }
.headerwrapper ul {list-style-type: none; margin: 0px}
.headerwrapper li {margin-left: -2.5em}

.headerbox {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}
.h1 {grid-row: 1;  grid-column: 1; position: relative} 
.h2 {grid-row: 1;  grid-column: 2; position: relative} 

.headerbox  .nav-link  {background: none!important; }
.headerbox  .navbar-toggler-icon  {background: var(--upf); float: right; margin-top: 25px; height: 30px; width: 30px;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.headerbox .dropdown-menu { margin-top: 50px}
.headerbox .dropdown-menu .dropdown-item {color: #000!important;}

.upf_logo  {height: 58px; margin: 15px 0px}  

.headerwrapper  .create_new  {color: var(--upf)!important; display: inline-block; font-size: 14px; padding: 0px; margin:  45px 0px 0px; transform: translateY(-5px); float: left}
.headerwrapper nav {display: inline-block; float: right}

.dropdown-menu {transform: translateX(-230px) translateY(25px)!important}
.dropdown-menu  .create_new1 {display: none}

.headerwrapper .h1 .langs {color: var(--upf); float: right; font-size: 12px; right: 20px; position: absolute; top: 42px; white-space: nowrap}
.headerwrapper .h2 .langs {color: var(--upf); ; font-size: 12px; right: 0px; position: absolute; top: 42px; white-space: nowrap}

.headerwrapper .langs form {display: inline-block!important}
.headerwrapper .langs input {background: none; border: none; display: inline-block!important; margin: 0px 0px!important; padding: 0px!important; opacity: 0.8; color: #ccc}
.langs  .active {font-weight: 500!important; opacity: 1!important; color: var(--upf)!important }
.langs .sep {color: #ccc!important; opacity: 1!important; transform: translateY(-1px); display: inline-block}

/* heade */

.btn-pink, .btn-block {background: var(--upf)!important; border: none!important}
.text-pink {color: var(--upf)!important}

/* footer */
    
.footer {width: 100%; font-family: Verdana, Geneva, "sans-serif"; color: var(--white); font-size: 1em;font-weight: 400!important; line-height: 1.5em; margin: 0px; padding: 20px 0px 30px; display: block}    
    
.footwrapper {
    display: grid;
  grid-gap: 0px;
  grid-template-columns: 20% 20% 25% 5% 10% 20% ; padding: 0px; font-family: Verdana, Geneva, "sans-serif"; color: var(--white); font-size: 1em;
  font-weight: 400!important; margin: 0px auto; width: 1240px; line-height: 1.5em; -webkit-font-smoothing: antialiased!important; }
    
.footwrapper a {text-decoration: none; color: var(--white)!important; }
.footwrapper ul {list-style-type: none; margin: 0px}
.footwrapper li {margin-left: -2.5em}

.footbox {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.f1 {grid-row: 1;  grid-column: 1; padding-right: 10px}  
.f2 {grid-row: 1;  grid-column: 2; padding-right: 10px}  
.f3 {grid-row: 1;  grid-column: 3; padding-right: 10px}  
.f4 {grid-row: 1;  grid-column: 4; padding-right: 10px}  
.f5 {grid-row: 1;  grid-column:5; padding: 0px 10px; position: relative}  
.f6 {grid-row: 1;  grid-column:6; padding-left: 10px}  

.footbox i {color: var(--upf); background: #fff; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 24px; margin: 4px 4px 0px 0px}
.footbox .smaller {font-size: 12px; margin-left: -11px}

.footer h3 {margin-top: 10px;
  font-size: 19px;
  font-weight: normal;
  text-transform: uppercase;
  padding-left: 0;}

.footer .fa-stack {display: inline-block; margin-bottom: 8px;
  height: 1.8em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.1em;}

.footer .fa-stack .fa-brands, .footer .fa-stack .fa-plus {color: var(--upf)!important}

.footer .excellence {position: absolute; top: 50%; transform: translateY(-70%); height: 97px}

/* end footer */
    
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
.headerwrapper {
    max-width: 100vw!important;
    width: 100vw!important;
  grid-template-columns: 80% 20% ; }
    
.headerbox {
  padding: 0px 0px;
  margin: 0px;
  border: 0px solid #ee0000;
}

.h1 {grid-row: 1;  grid-column: 1; } 
.h2 {grid-row: 1;  grid-column: 2; white-space: nowrap}     
    
.headerwrapper  .create_new {display: none}
.dropdown-menu  .create_new1 {display: block}
    
/* footer */
.footwrapper {
    display: grid;
  grid-gap: 0px;
  grid-template-columns: 50% ; padding: 0px;  font-size: 1em;
    margin: 0px 20px; width: calc(100% - 40px); line-height: 1.5em;  }

.f1 {grid-row: 1;  grid-column: 1; padding-right: 5px}  
.f2 {grid-row: 1;  grid-column: 2; padding-left: 5px; padding-right: 0px}  
.f3 {grid-row: 2;  grid-column: 1 / span 2; padding-right: 0px; padding-top: 20px}  
.f4 {grid-row: 2;  grid-column: 2; padding-left: 5px; padding-right: 0px}  
.f5 {grid-row: 3;  grid-column: 1 / span 2; padding: 0px 10px; position: relative; min-height: 150px}  
.f6 {grid-row: 4;  grid-column: 1 / span 2; padding-left: 0px; text-align: center; padding-top: 20px}  
    
.footer .excellence {position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%}
    
/* end footer */
}