/*
 apujadas@eina.cat
 gener 2023
 cc by-nc
 */


@import url("https://use.typekit.net/aqy6axy.css");
@font-face {
font-family: "marginalia_maju";
src: url("../fonts/marginalia_maju.woff") format("woff");
}

@font-face {
font-family: "marginalia_minu";
src: url("../fonts/marginalia_minu.woff") format("woff");
}


@media (max-width: 800px) {
  .destacats {
    flex-direction: column;
  }
}

/* Estils generals */
body {
  font-family: 'myriad-pro', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  background-color:#0a0a35;
}

main {
  padding-top: 50px;
}


.header_main{
    background:#0a0a35;
    background-size:100% 100%;
    min-height:200px;
    padding:100px 0 20px 0;
    box-sizing:border-box;
}

.peufoto {
  font-family: 'myriad-pro', sans-serif;
  color: #0a0a35;
  font-size: 3vmin;
  line-height: 0.1em;
  font-weight: lighter;
  text-align: center;

}

span { background: #f2e2ce; }


h1.title {
  font-family:'marginalia_maju', Arial, Verdana, sans-serif;
  font-weight: 300;
  font-size: 12vw;
  line-height:0.8em;
  margin:0 0 15px 5%;
  color: #f2e2ce;
  text-align: center;
}

h2 {
  font-family:'marginalia_maju', Arial, Verdana, sans-serif;
  font-weight: 300;
  font-size: 9vw;
  text-align: center;
  color: #a65233;
  text-decoration: none;
}

h4 {
  font-family:'marginalia_maju', Arial, Verdana, sans-serif;
  font-weight: 300;
  font-size: 9vw;
  text-align: center;
  color: #a65233;
  text-decoration: none;
}

h5 {
  font-family: 'myriad-pro', sans-serif;
  font-size: 7vmin;
  color: #a65233;
  text-decoration: none;
  line-height:6.5vmin;
  padding: 15px;
  width: 55%;
  text-align: center;
  margin: auto;
}

.box_h4 {
  position: relative;
  z-index:1
  width: 100px;
  height: 0px;
  left: 5px;
  top: 5px;
  text-align: center;
}

a {
  font-size: 1.2em;
  text-decoration: none;
  color: #a65233;
  font-weight: bold;
  line-height:0.4em;
}

a:hover {
  color: #f2e2ce;
}

.cos a{
  font-family: 'myriad-pro', sans-serif;
  font-style: italic;
}

.titols a{
  font-family: 'myriad-pro', sans-serif;
  font-weight: 300;
}

.subtitol{
    font-family:'marginalia_minu', Arial, Verdana, sans-serif;
    font-size: 9vmin;
    font-weight: 100;
    color: #f2e2ce;
    text-decoration: none;
    line-height:2vmin;
    text-align: center;
}


.work{
    font-family:'marginalia_minu', Arial, Verdana, sans-serif;
    font-weight: 600;
    box-sizing:border-box;
    background: #a65233;
    min-height:200px;
    width: 100%;
    border:25px solid #a65233;
    padding-right: 80px;
    padding-left: 80px;
    overflow:hidden;
    margin:20px auto;
    color: #0a0a35;
    text-decoration: none;
    font-size: 4vmin;
    line-height:5.5vmin;
    text-align: center;
}


.fora{
    background: #0a0a35 url("../images/kareem.png") no-repeat left center;
    background-size:cover;
    min-height:200px;
    padding:200px 0 20px 0;
    box-sizing:border-box;
}

.marginalia{
    background: #a65233 url("../images/marginalia.png") no-repeat left center;
    background-size:cover;
    min-height:200px;
    padding:200px 0 20px 0;
    box-sizing:border-box;
}

.cura{
    background: #0a0a35 url("../images/lacura02.png") no-repeat left center;
    background-size:cover;
    min-height:200px;
    padding:200px 0 20px 0;
    box-sizing:border-box;

}



/*destacats*/

.destacats {
  display: flex;
  margin:0 0 0 5%;
  position: relative;
  width: 90%;
  gap: 25px;
}


.destacats-item-left {
  flex-wrap: nowrap;

}

.destacats-item-right {
  flex-wrap: nowrap;
}


.destacats h3{
  font-family: 'myriad-pro', sans-serif;
  color:#f2e2ce; 
  font-size: 2em; 
}


.destacats p {
  font-family: 'myriad-pro', sans-serif;
  color:#f2e2ce;
  font-size: 1em; 
  margin-bottom:0.5em; }


blockquote {

  font-size: 4vmin;
  color: #a65233;
  font-weight: light;
  padding: 15px;
  width: 55%;
  text-align: right;
  margin: auto;
}

blockquote:before {
  color: #a65233;
  content: "\201C";
  left: 0;
  top: 0;
  font-size: 6vmin;
  line-height: 0.1vmin;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote:after {
  color: #a65233;
  content: "\201D";
  right: 0;
  bottom: 0;
  font-size: 6vmin;
  line-height: 0.1vmin;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}

.correu {
    color: #0a0a35;
    position: absolute; 
    top: 0; 
    right: 0;
}

footer {
  background-color: #0a0a35;
  text-align: center;
  color: #f2e2ce;
  font-size: 2vmin;
  line-height: 0.1vmin;
  font-weight: lighter;
  margin-top: 8em;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-centre, .flex-item-left {
    flex: 100%;
  }
}