* {box-sizing: border-box; margin:0; padding:0;}

body {font-family: 'Raleway', sans-serif; color: #333; background-color: #eee;}

a {text-decoration: none; color: #3C7BCF;}
                                              
a:hover {text-decoration: underline;}

ul {margin:0 0 1.5rem 2rem;}
ul li {margin-bottom: 1rem; line-height: 1.7rem; font-size: 1.2rem;}

span.with {font-size: 1rem;}

div#container {background-color: #fff; width: 100%; max-width: 900px; margin: auto;}

div#sticker {position: sticky; top:0;}

  div#sticker.gran h1 {font-size: 2.2rem; font-weight: normal; margin: 0 0 1rem 0; padding: 0;}
  
  div#sticker.petit h1 {font-size: 1.5rem; font-weight: normal; margin: 0 0 0.5rem 0; padding: 0;}

  div#sticker.gran h1 small {display: block; font-size: 1.3rem; margin-top: 8px;}

  div#sticker.petit h1 small {display: none;}

  header#mainHeader {padding: 1.25rem 1rem 0.8rem 1.25rem; background-color: #eee; position: relative;}

  header#mainHeader a {text-decoration: none; color: #333;}
  
  h1 {font-family: 'Merriweather', serif; display: inline-block; transition: all 0.3s;}

  nav {display: none;}
  
  nav a:hover {color:#f3f3f3; /*text-decoration:underline;*/ }
  
  nav.responsive {display: block; overflow: hidden; font-family: 'Merriweather', serif; background-color: #880000; padding: 0 1rem 0 0; font-size: 1.2rem; margin-bottom: 0;}
  
  nav.responsive div {float:right;}
  
  nav.responsive a {color: #fff; text-decoration: none; display: block; padding: 0; margin: 10px 0;}
  
  div.menuIcon {display: block; position: absolute; right: 20px; bottom: 10px; cursor: pointer;}

  div.menuIcon div {width: 20px; height: 3px; background-color: #880000; margin-bottom: 4px;}

article#home span {color: #e23502; /*white-space: nowrap;*/}

footer#mainFooter {background-color: #333; color: #fff; font-family: 'Merriweather', serif; font-size: 0.88rem; padding: 0.75rem 1.5rem;}

article {padding: 2rem 1.25rem;}

h2 {color: #e23502; font-family: 'Merriweather', serif; font-size: 1.4rem; font-weight: normal; margin-bottom: 2rem; background-image: url("../img/border.png"); background-position:bottom left; background-repeat:no-repeat; padding-bottom: 10px;}

h2:not(:first-of-type), h2.h2home {margin-top: 2.75rem;}

h3 {color: #e23502; font-family: 'Merriweather', serif; font-size: 1.2rem; font-weight: normal; margin: 3rem 0 2rem 0; padding-bottom: 10px; background-image: url("../img/border.png"); background-position:bottom left; background-repeat:no-repeat;}

#fotoCatia {display: block; margin-bottom: 1.5rem; width: 100%; max-width: 286px; height: auto; /*width:286px; height:273px;*/}

p {margin-bottom: 1.5rem; line-height: 1.7rem; font-size: 1.2rem;}
 
article header p {font-size: 1.4rem; margin-bottom: 1.5rem;}
  
div#xxss {margin-bottom: 1rem;} 
 
div#xxss img {margin-right: 2rem;}

/* scaling up */
@media screen and (min-width: 768px) {

    body {padding: 0 2rem;}
        
    div#sticker {position: static;}
    
        div#sticker.gran h1, div#sticker.petit h1 {font-size: 2.8rem; margin: 0 0 1rem 0;}                                                          
    
        div#sticker.gran h1 small, div#sticker.petit h1 small {display: block; font-size: 1.3rem; margin-top: 8px;}
     
    header#mainHeader {padding: 1.25rem 2rem 0.8rem 2rem;}
        
    h2 {font-size: 1.4rem; margin-bottom: 2.5rem;}
    
    h2.h2home {margin-bottom: 2rem;}
    
    nav {font-family: 'Merriweather', serif; background-color: #880000; padding: 0.5rem 2rem; font-size: 1.1rem; margin-bottom: 2rem; display:block;}
    
    nav a {padding-right: 2rem; color: #fff; text-decoration: none;}
    
    article {padding: 1.25rem 2em;}
    
    article#home {position: relative;}
    
    article#home section, article#home header {margin-left: 320px;}
    
    p {font-size: 1.1rem;}
    
    article header p {font-size: 1.8rem; line-height: 2.5rem;}
    
    #fotoCatia {position: absolute; top: 0; left: 1.25rem;}
    
    div.menuIcon {display: none; }
    
    p#contactInfo {font-size: 1rem; line-height: 1.4rem;}
    
    ul li {font-size:1.1rem;}
    
    footer#mainFooter {padding: 0.75rem 2rem; margin: 0;}
}

@media screen and (max-width: 920px) {
    br.brOut {display:none;}
}