html,body { height:100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; } 
body { background:#fff; color:#000; margin:0; padding:0; }
     
     
:root {
    --highlight: #cc0000;
    --hover: #cc0000;
}

header { display:flex; flex-wrap:wrap; flex-direction:column; position:fixed; left:0; top:0; align-items:center; justify-content:center; z-index:50; background:#fff; width:100%; padding:20px 40px ;  }
header h3 { color:#000; }
@media screen and (min-width:500px) {
    header {  flex-direction:row;justify-content:space-between;  }
}        
/* == burger ==== */

.burger { display:none; }

@media screen and (max-width:480px) {
    .burger { display:block; background:none; border:none; cursor: pointer; transition: all 0.3s ease; position: fixed; width:50px; height:50px;  right:12px; top:6px;  z-index: 300; }
    .burger span {  transition: all 0.4s ease; display: block;  background: #fff; width:60%;  height: 4px;  margin-top: -2px;  position: absolute;  left: 20%;  top: 50%; }
    
    
    .burger:before,
    .burger:after {  content: "";  display: block;  background: #fff;  width: 60%;  height: 4px;  position: absolute;  left: 20%;
      transform-origin: center center;  transform: rotate(0deg);  transition: all 0.3s ease;}
    
    .burger:before {  top: 30%;  margin-top: -2px;}
    .burger:after {  bottom: 30%;  margin-bottom: -2px;}
    
    /* == burger onclick ==== */
    
    .menuOpen .burger span { left:100%; opacity: 0;  background: #fff;}
    .menuOpen .burger:before {  top: 50%;  transform: rotate(45deg); background: #fff; }
    .menuOpen .burger:after {  bottom: 50%;  transform: rotate(-45deg);  background: #fff;}
}

/* == nav ==== */

nav ul { display:flex; }
nav ul ul { display:none; }
nav ul li a { text-decoration:none; padding:6px 12px; font-weight:700;letter-spacing: 0;    font-size: 16px;    text-transform: none;}
nav ul li a:hover { color:var(--hover); }
nav ul li.active a { color:var(--highlight); }

h3 { font-size:24px; letter-spacing:-1px; }

@media screen and (max-width:480px) {
    header h3 { margin-bottom:12px;  font-size:17px;  }

    nav { transition:all 0.3s ease; display:flex; width:100%; height:100%; left:0; top:0; opacity:0; pointer-events:none; position:fixed; background:#fff; background-size: 150%;
    background-position: -200px -100px; z-index:200;padding:40px; }
    
    nav ul { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; }
    
    nav ul li a { color:#fff; text-align:center; display:block; text-decoration:none; font-size:28px; padding:10px; text-decoration:none;
    letter-spacing: -1px;font-weight:700; }

    .menuOpen header nav { opacity:1; pointer-events:inherit; }
}
main { padding:160px 40px; 
   
}
@media screen and (max-width:768px) {
            section { margin-bottom:20px;}

}
@media screen and (min-width:769px) {
            main { display: grid; grid-template-columns: auto auto; gap: 20px;}

}

@media screen and (min-width:1024px) {
    main { grid-template-columns: auto auto auto ;}
}

section { padding: 40px 40px 20px 40px; border: 1px solid #666;}
p { font-size:16px; line-height:26px; margin-bottom:20px; }

h2 { font-size:50px; line-height:100%; margin-bottom:20px;letter-spacing:-2px; font-weight:bold;}
img { width:80%; max-width:400px; height:auto; }


.btn { background:#000; cursor:pointer;  border:none; font-size:16px;color:#fff; border-radius:30px; padding:12px 24px; text-decoration:none; display:inline-block; }
.btn:hover { background:#cc0000; }

.bgBlack .btn { background:#fff; color:#000; position:relative; top:unset; right:unset; }
.bgBlack .btn:hover { background:#cc0000; color:#fff; }


#popupClose { background:none; color:#fff; font-size:33px; position:absolute; right:20px; top:20px; border:none;  cursor:pointer;}

header a { text-align:center; }

@media screen and (min-width:500px) {
.btn {  }
header a { text-align:left; }


}


footer { width:100%; padding:40px; background:#fff; color:#000; text-align:center; }