/* Theme Name: TemaSpring site Version: 1.0 Author: Jess Quirino Author URI: http://www.qrno.com.br */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&family=DM+Serif+Display:ital@0;1&display=swap');
 :root {
     --off-white: #FBF7F2;
     --beige: #F4EFEA;
     --medium-dark: #333333;
     --dark: #111111;
     --black: #050505;
     --white: #FEFCFA;
}
 * {
     padding: 0px;
     margin: 0px;
     box-sizing: border-box;
}
 @keyframes showContainer {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes marquee {
     0% {
         left: 0;
    }
     100% {
         left: -250%;
    }
}
 .showPage{
}
 .fade{
     animation: fadeIn 1s ease-in 0s 1 normal forwards;
}
 html {
     scroll-behavior: smooth;
     scroll-margin-top: 200px;
}
 body {
     margin: 0;
     padding: 0;
     background: var(--off-white);
     font-family: 'DM Sans', sans-serif;
     color: var(--medium-dark);
     font-size: 1em;
     line-height: 28px;
}
 ::selection {
     background: var(--beige);
}
 ::-moz-selection {
     background: var(--beige);
}
 img {
     border: 0 
}
 h1 {
     font-family: 'DM Serif Display', serif;
     font-size: 2.5em;
     font-weight: 400;
     margin: 0 auto .75em;
     line-height:45px;
   padding: 20px 0 10px 0;
}
 h2 {
     font-family: 'DM Serif Display', serif;
     font-size: 2em;
     line-height: 40px;
     font-weight: 400;
   padding: 20px 0 10px 0;
}
 h2 span{
     font-weight: 400;
     border-bottom: 1px solid;
     border-color: var(--dark);
}
 h3 {
     font-family: 'DM Serif Display', serif;
     font-size: 1.6em;
     font-weight: 400;
padding: 20px 0 10px 0;
}
 h4 {
     font-size: 1.1em;
     font-weight: 700;
padding: 10px 0 5px 0;
}
 p {
     margin-bottom: 1.6em 
}
 b, strong {
     font-weight: 700 
}
 a {
     text-decoration: none;
     color: #000;
     font-weight: 700 
}
 a:hover {
     color: #444 
}
 #align {
     width: 85vw;
     margin: 20px auto;
     max-width:1440px;
}
 #align-margin{
     margin: 5% 0;
     max-width:1440px;
}
 #align-row {
     width: 90vw;
     margin: 0 auto;
     display:flex;
     justify-content:space-between;
     align-items:center;
     flex-wrap:wrap;
     max-width:1400px;
}
 #align-archive {
     width: 90vw;
     margin:150px auto 30px auto;
     display:flex;
     justify-content: space-between;
     flex-wrap:wrap;
     max-width:1440px;
}
 #align-archive h2, #align-archive p{
     width:100%;
}
 #align-recipe {
     width:90vw;
     margin: 0 auto;
     padding:10% 0 0 0 ;
     display:flex;
     justify-content:space-between;
     align-items:flex-start;
     flex-wrap:wrap;
     max-width:1440px;
}
 #section{
     margin:50px 0;
}
 #section h2{
     font-size:2.4em;
     margin: 5px 0;
}
 .menu{
     position: fixed;
     width: 100%;
     top: 0;
     background-color: var(--off-white);
     transition: 0.9s ease;
     z-index:1;
}
.menuButtonScrolled{
     padding: 5px 0;
     transition: 0.9s ease;
     font-size:16px;
     font-weight:400;
     font-style:italic;
     font-family: 'DM Sans', sans-serif;
     padding:5px 10px;
     transition: 0.9s ease;
}
 #button-blog {
     margin: 20px 0 20px 0;
     display:flex;
     align-items:center;
     transition: 0.9s ease;
}
 .menuButton{
     font-size:16pxm;
     font-weight:400;
     font-style:italic;
     font-family: 'DM Sans', sans-serif;
     padding:5px 10px;
     transition: 0.9s ease;
}
 .menuButton a{
     font-weight:400;
}
 .menuButton svg{
     width:30px;
     height:auto;
     margin: 0 6px -7px 6px;
}
 .menuButtonScrolled svg{
     width:20px;
     height:auto;
     margin: 0 6px -5px 6px;
}
 #button-blog a {
     font-size:1.1em;
     font-weight:400;
     font-style:italic;
     font-family: 'DM Sans', sans-serif;
     padding:5px 10px;
     transition: 0.9s ease;
}
 .menuButtonScrolled a{
     font-size:0.90em;
     font-weight:400;
     font-style:italic;
     font-family: 'DM Sans', sans-serif;
     padding:5px 10px;
}
 .menuButton a:hover, #button-blog a:hover{
}
 #button-blog::before {
     content: "------------------";
     letter-spacing: -5px;
     font-weight:700;
}
 .categories{
     width:auto;
     padding: 15px 40px;
     border:2px solid;
     border-color: var(--dark);
     transition: 0.9s ease;
}
 .categories a, #menu-mob a{
     font-size:1.1em;
     font-weight:400;
     font-family: 'DM Serif Display', serif;
     padding:5px 10px;
}
 .categoriesScrolled{
     padding: 8px 15px;
     border:2px solid;
     border-color: var(--dark);
     transition: 0.9s ease;
}
 .categoriesScrolled a{
     font-size:0.90em;
     font-weight:400;
     font-family: 'DM Serif Display', serif;
     padding:3px 5px;
}
 .logo{
     width:10%;
     transition: 0.9s ease;
     text-align:center;
}
 .logo svg{
     margin:0 auto;
     width:60%;
     height:150px;
}
 .logoScrolled svg{
     width:40%;
     height:70px;
}
 .sazonal-section{
     width: auto;
     display:flex;
     align-items:center;
}
 #myBtn{
     cursor: pointer;

}
 .modal {
     display: none;
     position: fixed;
     z-index: 99999999999999999999999999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background: rgba(244,239,234,0.8);
     transition: all 8s ease-in;
}
 .modal-content {
     background: var(--white);
     margin:20% auto;
     padding: 20px;
     width: 40%;
     height:auto;
     box-shadow: -7px 9px 20px -7px rgba(0,0,0,0.55);
}
 textarea:focus, input:focus, select:focus {
     box-shadow: 0 0 0 0;
     border: 0 none;
     outline: 0;
}
 .modal-content input{
     background: transparent;
     border:0;
     height:60px;
     font-size:18px;
     font-style:italic;
}
 .close {
     float: right;
     font-size: 40px;
     font-weight: 700;
}
 #align-post {
     margin:140px 0 50px 0;
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     flex-wrap: wrap;
     align-items: flex-start;
}
 #align-post h3, #align-post p{
     width:100%;
     text-align:center;
     margin: -50px 0 60px 0;
     display:flex;
     align-items:center;
     font-size:1.2em;
     gap: 0 10px;
     justify-content: center;
}
 #align-post h3 svg{
     max-width:50px;
}
 #align-post-single {
     margin:150px auto 60px auto;
     width:90%;
     max-width:1150px;
     display: flex;
     justify-content: space-around;
     flex-direction: row-reverse;
     flex-wrap: wrap;
     align-items: flex-start;
}
 #align-archive-posts {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     gap: 0 4%;
     flex-wrap: wrap;
     align-items: flex-start;
     animation: showContainer 0.9s ease-in 0s 1 normal forwards;
}
 #align-archive-recipe {
     width: 80%;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     gap: 0 4%;
     flex-wrap: wrap;
     align-items: flex-start;
     animation: showContainer 0.9s ease-in 0s 1 normal forwards;
}
 #align-read-too {
     margin: 20px 0;
     padding: 10px 0;
     width: 100%;
     background:var(--beige);
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     flex-wrap: wrap;
     align-items: center;
}
 #open-button{
     display:none;
}
 #open-button span{
     font-size:20px;
     padding-top:20px;
}
 #close-button span {
     font-size:18px;
     padding-top:20px;
}
 #box-retratil{
     width: 18%;
     padding:1%;
     margin:20px 0 10px 0;
     position: sticky;
     top: 120px;
     background: var(--beige);
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     gap: 10px 5px;
}
 #box-retratil ul{
     width:100%;
     animation: showContainer 0.5s ease;
}
 #box-retratil h3{
     font-size:18px;
     margin:0 0 0 5px;
}
 #box-retratil li{
     list-style:none;
     margin: 3px;
 
}

 #box-retratil ul li {
  position: relative;
  padding-left: 2em; 
  counter-increment: item;  

}

#box-retratil ul li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 18px;
  transform: translateY(-50%);

  width: 1.5em;
  height: 1.5em;

  border-radius: 50%;       
     background: var(--beige);  
  color: var(--black);  
 
  border: 2px solid;
   border-color: var(--black);
  display: flex;
  align-items:center;
  justify-content: center;
  font-size: 0.8em;
  font-weight: bold;
}

 #box-retratil li a{
     font-weight:300;
     font-size:14px;
}

 #box-retratil-recipe{
     width: 18%;
     padding:1%;
     margin:20px 0 10px 0;
     position: sticky;
     top: 120px;
     background: var(--beige);
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     gap: 10px 5px;
}
 #box-retratil-recipe ul{
     width:100%;
     animation: showContainer 0.5s ease;list-style:none;
   padding-left:5px;
}
 #box-retratil-recipe h3{
     font-size:18px;
     margin:0 0 0 5px;
}

 #box-retratil-recipe li a{
     font-weight:300;
     font-size:14px;
   
}
 #filter{
     width: 100%;
     margin: 30px 0;
     position: sticky;
     z-index:2;
     bottom: 0px;
     background: var(--beige);
     padding:20px 0 
}
 #filter ul{
     bottom: 0px;
     display:flex;
     flex-direction:row;
     justify-content: space-around;
     align-items:flex-end;
     gap: 15px 3px;
}
 #filter li{
     list-style:none;
     width:120px;
     display:flex;
     flex-direction:column;
     justify-content: flex-start;
     align-items:center;
     flex-wrap:wrap;
}
 #filter a{
     font-weight:300;
     font-size:12px;
     text-align:center;
}
 #filter svg{
     max-width:28px;
     height: auto;
}
 #archive-post {
     width: 48%;
     margin: 2vw 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
     flex-wrap:wrap;
}
 #thumb {
     width: 50% 
}
 #thumb img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     animation: fadeIn 1s ease-in 0s 1 normal forwards;
}
 #excerpt {
     width: 45%;
     padding: 5px;
     font-size:14px;
}
 #archive-recipe {
     width:20%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap:wrap;
}
 #archive-post-principal {
     width:30%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap:wrap;
}
 #thumb-principal {
     width: 100%;
}
 #thumb-principal img {
     width: 100%;
     height: 450px;
     object-fit: cover;
     animation: fadeIn 1s ease-in 0s 1 normal forwards;
}
 #thumb-recipe {
     width: 100%;
}
 #thumb-recipe img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     animation: fadeIn 1s ease-in 0s 1 normal forwards;
}
 #archive-info{
     width: 100%;
     border-bottom: 2px solid;
     border-color: var(--black);
     background: var(--beige);
     font-size: 13px;
     display:flex;
     align-items:center;
     gap: 0 8px;
}
 #archive-info svg{
     max-width: 22px;
}
 #archive-post-principal h3 {
     margin: 20px 0;
     font-size:2em;
     text-align:left;
}
 #excerpt-principal {
     width: 100%;
     padding: 5px;
     font-size:14px;
     text-align:left;
}
 #align-celebration {
     width: 100%;
     margin: 2% auto;
     height:500px;
     background: no-repeat center center ;
     background-size: cover;
     display:flex;
     justify-content: flex-end;
     align-items:center;
}
 #celebration-info{
     width: 25%;
     background: var(--white);
     padding:50px;
     margin-left:10%;
}
 #celebration-info p {
     line-height:25px;
     margin:10px 0;
}
 #side-content{
     width:20%;
     margin-top:50px;
}
 .ez-toc-title {
     display:none !important;
}
 #ez-toc-container{
     background: var(--beige) !important;
     border: none !important;
     box-shadow:none;
}
 #side{
     width:40%;
}
 #side img{
     max-width:100%;
     height:auto;
}
 #content-recipe{
     width:90% 
}
 #content-recipe h1{
     font-size:40px;
     margin:20px 0;
}
 #content-recipe h2{
     margin:30px 0;
}
 #content{
     width:70% 
}
 #content h3{
     scroll-margin-top: 200px;
}
 #content img{
     width:100%;
     height:auto;
}
 #post{
     width:45%;
     font-size:14px;
}
 #post h3{
     font-family: 'DM Sans';
     font-size:16px;
     font-weight:700;
     margin:30px 0 20px 0;
}
#date{  margin-top:40px;
  font-size: 0.8em;
  padding-bottom:3px;
  margin-bottom:-10px;
}
#date span{border-bottom: 2px solid;
border-color: --var(black);}
 #titulo{
     margin: 0px 0 20px 0;
}
 #titulo h1{
     font-size:40px;
}
 #content h2{
     margin:10px 0;
}
 #content blockquote, #content-recipe blockquote{
     background: var(--beige);
     padding:2%;
     width:100%;
     margin: 20px 0 10px 0;
}
 #content ol {
     counter-reset: li;
     list-style: none;
     *list-style: decimal;
     padding: 0;
     font-size: 13px 
}
 #content ol li {
     position: relative;
     display: block;
     padding: .4em .4em .4em 4em;
     *padding: .4em;
     margin: .5em 0;
     text-decoration: none 
}
 #content ol li:before {
     content: counter(li);
     counter-increment: li;
     position: absolute;
     left: 10px;
     top: 50%;
     margin-top: -1.1em;
     height: 2em;
     width: 2em;
     line-height: 2em;
     color: #ffffff;
     background: #000000;
     text-align: center;
     font-weight: 700;
     border-radius: 2em 
}
 #content ul, #content-recipe ul {
     margin-top: 10px;
     margin-bottom: 10px;
}
 #content li, #content-recipe li {
     list-style: disc;
     margin-left: 30px;
     padding-left: 5px;
     font-size:0.9em;
}
 img.alignleft, div.alignleft {
     float:left;
     margin:0 0.5em 0.5em 0;
}
 img.alignright, div.alignright {
     float:right;
     margin:0 0 0.5em 0.5em;
}
 img.aligncenter, div.aligncenter {
     text-align:center;
     margin:0 auto;
}
 #content-footer{
     width:100%;
}
 #about-author {
     margin: 50px 0 20px 0;
     width:100%;
     display:flex;
     justify-content:center;
     align-items:center;
     gap: 0 20px;
}
 #about-author-image {
     width:150px;
}
 #about-author-image img{
     border-radius:50%;
}
 #about-author-text {
     width: 40%;
}
 .share svg{
     width:12px;
     height:12px;
     margin-bottom:-2px;
     fill: white !important;
     stroke: white !important;
}
 .share{
     transform: rotate(-90deg);
     transition: 0.8s ease;
     position:fixed;
     bottom:100px;
     left:-50px;
     background: var(--black);
     border-radius: 10px;
     display:flex;
     width: auto;
     justify-content: center;
     align-items:center;
     font-size:11px;
     color: var(--white);
     padding:2px 8px;
     gap: 0 8px;
}
 .share:hover{
     font-size:14px;
}
 .share:hover svg{
     width:14px;
     height:14px;
}
 .share a{
     color: var(--white);
     font-size:12px;
     padding: 2px 7px;
}
 #navigation{
     width:100%;
}
 .elm-button {
     background: none !important;
     font-family: 'DM Serif Display', serif;
     font-size:24px;
     color:black;
     margin: 3vw 0;
     border:none;
}
 .block-title{
     margin:80px 0 40px 0 
}
 #block-sazonal{
     margin-top: 150px;
     padding: 30px;
     background: var(--beige) 
}
 .block-manifest{
     margin: 40px 0 0 0;
     padding: 30px;
     background: var(--beige) 
}
 .block-manifest ul{
     margin:20px 0 
}
 .block-manifest li{
     list-style:none;
     display:flex;
     align-items:center;
     gap: 0 5px;
}
 .block-manifest h1{
     padding-top:80px;
}
 .block-page{
     margin: 20px 0;
     padding: 5% 20%;
     background: var(--beige) 
}
 #page{
     margin:150px 0 40px 0;
}
 #page ul{
     width: 80%;
     margin:50px auto;
}
 #page li{
     list-style:none;
     margin: 10px 0;
}
 #page li a{
     display: block;
     width:100%;
     margin: 5px 0;
     border: 2px solid;
     border-color: var(--black);
     padding:3px 10px;
     font-weight:300;
     transition:0.8s ease;
}
 #page li a:hover{
     background: var(--black);
     color: var(--white) 
}
 #footer{
     width: 85vw;
     margin: 0 auto;
     padding:2% 0;
     display:flex;
     flex-direction: row;
     justify-content:space-between;
     align-items:center;
     flex-wrap:wrap;
     font-size: 0.7em;
     gap:10px 0;
}
 #menu-footer{
     width:40%;
     display:flex;
     justify-content:flex-start 
}
 #social-footer{
     width:40%;
     display:flex;
     justify-content:flex-end;
     align-items:center;
}
 #menu-footer a{
     font-weight: 400;
     font-size:1.4em;
     padding: 10px;
     transition: 0.8s ease-in;
     font-family: 'DM Serif Display', serif;
}
 #social-footer a{
     font-weight: 400;
     font-size:1.1em;
     padding: 10px;
     transition: 0.8s ease-in;
}
 #social-footer svg{
     width:10px;
     height:10px;
}
 #page-left{
     width:50%;
}
 #page-left img{
     max-width:100%;
     height: 100%;
     object-fit:cover;
}
 #page-right{
     width:48%;
}
 #box-decoration{
     width:100%;
     display:flex;
     flex-wrap:wrap;
}
 #box-cta{
     width:30%;
     background-color: var(--beige);
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:flex-start;
     padding:20px;
     gap: 10px;
}
 #box-cta svg, #box-celebre-cta svg{
     width: 40px;
     margin-right:10px;
     margin-bottom:-10px 
}
 #box-img{
     width:40%;
     height:600px;
}
 #box-img img{
     max-width:100%;
     height:100%;
     object-fit:cover;
}
 #box-posts{
     padding:20px;
     width:30%;
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:center;
     border-right: 3px solid;
     border-top: 3px solid;
     border-bottom: 3px solid;
     border-color: var(--beige) 
}
 #box-posts ol li {
     counter-increment: li;
     display:flex;
     align-items:flex-start;
     gap: 0 20px;
     margin:20px 0;
}
 #box-posts ol li:before {
     content: counter(li) ;
     display:flex;
     justify-content:center;
     align-items:center;
     height:30px;
     width:30px;
     display:flex;
     color: var(--white);
     background: var(--black);
     text-align: center;
     font-weight: 700;
     border-radius: 50%;
     margin-top:10px;
}
 #box-posts ol {
     list-style: none;
     counter-reset: li;
}
 #box-posts li a{
     max-width:80%;
     font-family: 'DM Serif Display', serif;
     font-size: 1.2em;
     line-height: 40px;
     font-weight: 400;
}
 #box-celebre{
     width:47%;
}
 #box-celebre-cta{
     width:100%;
     background-color: var(--beige);
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:flex-start;
     padding:20px;
     gap: 10px;
}
 #box-celebre-img{
     width:100%;
     height:350px;
     object-position: center;
}
 #box-celebre-img img{
     max-width:100%;
     height:100%;
     object-fit:cover;
}
 #menu-mob{
     display:none;
}
 @media (min-width:300px) and (max-width:890px) {
     #menu-mob{
         display:block;
         background: var(--beige);
         width:100%;
         padding: 10px 0;
         display:flex;
         justify-content: space-around;
         position: fixed;
         bottom:0;
         z-index:1;
    }
     #align-post-single {
         margin:50px auto;
         width:95%;
         flex-direction: row;
    }
     #align-archive {
         margin-top:80px;
    }
     #section{
         margin:10% 0;
    }
     .menu{
         position: fixed;
         width: 100%;
         padding: 0.3% 0;
    }
     .categories{
         display:none 
    }
     .logo{
         width:15%;
    }
     .logo svg{
         width:100%;
         height:70px;
    }
     .menuButton svg{
         width:18px;
         height:auto;
         margin: 0 3px -3px 3px;
    }
     .modal-content {
         width: 60%;
    }
     .modal-content input{
         font-size:14px;
    }
     #page {
         margin:80px 0 0 0;
    }
     #page h1{
         text-align:center;
         margin: 40px auto;
    }
     .block-title{
         margin: 40px 0;
         width:80%;
         margin: 0 auto;
    }
     #archive-post {
         width: 98%;
         display: flex;
    }
     #archive-recipe {
         width:98%;
    }
     #box-retratil {
         width:98%;
         z-index: 1;
         top:70px;
         padding:3%;
         margin:40px 0 0 0;
    }
     #box-retratil ul{
         display:none 
    }
     #open-button{
         display:block 
    }
     #close-button{
         display:none 
    }
     #box-retratil h3{
         font-size:18px;
    }
     #box-retratil li{
         font-size:12px 
    }
     #open-button span{
         font-size:22px;
         padding-top:5px;
    }
     #close-button span {
         font-size:20px;
         padding-top:5px;
    }
     #filter{
         width: 100%;
         margin: 30px 0;
         position: sticky;
         z-index:2;
         bottom: 40px;
         background: var(--beige);
         padding:45px 0 50px 0;
         
           overflow-x: auto;   
  -webkit-overflow-scrolling: touch; 
  scroll-behavior: smooth; 
         scrollbar-width: none;
    }
     #filter ul{
         justify-content: center;
         position: absolute;
        
       
     
         animation: marquee 20s linear infinite alternate;
         animation-delay:1s;
         padding-bottom:10px;
    }
     #filter li{
         min-width:70px;
    }
     #filter a{
         font-weight:300;
         font-size:10px;
         text-align:center;
    }
     #filter svg{
         max-width:20px;
         height: auto;
    }
     #archive-post-principal, #box-celebre,   #box-celebre-img , #box-celebre-cta {
         width:95%; 

    }
     #thumb {
         width: 45% 
    }
     #thumb img {
         width: 100%;
         height: 330px;
         object-fit: cover;
    }
     #thumb-principal img {
         height: 400px;
    }
     #excerpt {
         width: 51%;
    }
     #button-blog::before {
         content: "-------";
    }
     #celebration-info{
         width: 50%;
         padding:20px;
         margin:0;
    }
     #side, #content, #content-recipe{
         width:90%;
         margin: 0 auto;
    }
     #side{
         margin:30px 0 
    }
     #content-recipe h1{
         font-size:35px;
    }
     #side-content, #side-recipes{
         width:100%;
    }
     .ez-toc-title {
         display:none !important;
    }
     .share svg{
         width:11px;
         height:11px;
         margin-bottom:-2px;
    }
     .share{
         bottom:140px;
         left:-50px;
         font-size:10px;
         padding:2px 4px;
         gap: 0 4px;
    }
     #about-author-text{
         font-size:0.8em;
    }
     #footer{
         width: 90vw;
         margin-bottom: 60px;
    }
     #menu-footer, #social-footer{
         width:100%;
         justify-content:center;
    }
     #menu-footer a{
         font-size:1em;
    }
     #social-footer svg{
         width:15px 
    }
     #align-archive-recipe, #align-archive-posts, #about-author-text, #box-cta, #box-img, #box-posts, #page-left, #page-right{
         width:100%;
    }
     #page-left{
         margin-bottom: 20px 
    }
     #box-img{
         height:400px;
    }
     #content{
         width:90% 
    }
}