html{
    margin-top: 0;
}
main{
    max-width: 1440px;
    margin: 0 auto;
    margin-top: 0;
}
body{
    margin-top: 0;
}
.hero{
    max-width: 1440px;
    margin: 0;
}
img{
    width: 100%;
    height: auto;
}
.header{
    max-width: 1440px;
    height: 150px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-bottom: 0;
}
.logo{
    width: 15%;;
    align-content: center;
    margin-left: 20px;
}
.logo img{
    max-height: 150px;
    min-height: 70px;
}
.header input[type=search]{
    margin: 0 auto;
    display: block;
}
.nav-box{
    height: 50px;
}
.nav-page{
    display: flex;
    list-style: none;
    margin: 0;
    justify-content: center;
    align-items: center;
}
.nav-page li{
    margin-top: 15px;
}
.nav-page li a{
    padding: 10px 25px;
}
.leading{
    margin: 0 auto;
    max-width: 1600px;
    padding: 10px;
    grid-gap: 10px;
    display: grid;
    grid-template-columns: auto 320px;
    justify-content: center;
    grid-template-areas: 
    "art1 art2"
    "art1 art3"
    ;
}

.art1{
    grid-area: art1;
    height: 100%;
}
.leading .title{
    z-index: 10;
    position: absolute;
    transform: translate(0%, -500%); 
    margin-left: 10px;
    font-family: Merriweather;
    color: white;
    word-wrap: break-word;
}
.leading .tagline{
    z-index: 10;
    position: absolute;
    transform: translate(0%, -350%); 
    margin-left: 10px;
    font-family: Merriweather;
    color: white;
    font-weight: 200;
    word-wrap: break-word;
}
.art2{
    grid-area: art2;
    width: 310px;
}
.art3{
    grid-area: art3;
    width: 310px;
}
.header form{
    width: 100%;
    background-color: transparent;
    align-content: center;
    margin-left: 10px;
}
.emph{
    font-weight: 700;
}
.img-box{
    max-height: 420px;
    max-width: 420px;
    text-align: center;
    margin: 15px;
}
.img-box h3{
    text-align: center;
    transform: translateY(-300%);
    color: white;
}
.img-box img:hover{
    opacity: 50%;
}
.linkpic:hover{
    opacity: 50%;
}
.pop-frame{
    background-color: #aaaddd;
    display: flex;
    padding: 10px;
    justify-content: space-between;
}
.pop-link{
    border: 10px solid #dadada;
    margin: 10px;
    height: 450px;
    width: 450px;
}
.pop-link h4{
    margin-top: 70%;
    font-family: oxanium;
}
.trend-frame{
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}
.trend-card{
    width: 300px;
    height: 380px;
    margin: 5px;
}

.card-sm{
    max-width: 420px;
    height: 620px;
    overflow: hidden;
    margin: 15px;
}
.card-sm img{
    max-height: 420px;
    max-width: 420px;
}
.trend-card h4{
    margin-left: 10px;
}
.trend-card .tag{
    margin: 10px;
    text-align: right;
}
.header input[type="search"]{
    width: 70%;
}
.editor{
    min-width: 80px;
    margin: 15px;
    text-align: center;
}
.editor img{
    border-radius: 50%;
    width: 80px;
    margin: 0 auto;
}
.footer{
    align-content: center;
    margin: 0 auto;
    padding: 25px;
    margin-top: 20px;
}
.flex-frame{
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 15px;
}
.edit-frame{
    display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.vert-box{
    margin: 0 auto;
    text-align: center;
}
.footer-nav{
    display: flex;
    margin: 0 auto;
    width: 80%;
    flex-wrap: wrap;
    justify-content: space-around;
}
.footer-nav ul{

    flex-direction: column;
    margin-right: 20px;
}
ul h5{
    margin-bottom: 5px;
}
.scl-med{
    margin: 10px 25px;
    height: 60px;
    width: 60px;
}
#nav-toggle{
    margin: 20px;
}
.article{
    margin: 0 auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 45% 45%;
    grid-template-areas: 
    "titl titl"
    "subt subt"
    "col1 col2"
    ;
}
.trend-grid{
    margin: 0 auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 50% auto auto;
    grid-template-areas: 
    "hghlght tr-01 tr-02"
    "hghlght tr-03 tr-04"
    ;
    align-items: center;
    padding: 20px;
}
.trend-grid-rvrs{
    margin: 0 auto;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: auto auto 50%;
    grid-template-areas: 
    "tr-01 tr-02 hghlght"
    " tr-03 tr-04 hghlght"
    ;
    align-items: center;
    padding: 20px;
    word-wrap: break-word;
}
.hghlght{
    grid-area: hghlght;
    height: 100%;
    width: auto;
}
.tr-01{
    grid-area: tr-01;
}
.tr-02{
    grid-area: tr-02;
}
.tr-03{
    grid-area: tr-03;
}
.tr-04{
    grid-area: tr-04;
}
.tr-01, .tr-02, .tr-03, .tr-04{
    height: 310px;
    width: 310px;
}
.chrono{
    display: flex;
    max-width: 1300px;
    height: 300px;
    margin: 0 auto;
    margin-bottom: 15px;
}
.chrono img{
    max-height: 300px;
    max-width: 420px;
    margin: 0;
    padding: 0;
}

.chrono .vert-box{
    max-height: 300px;
    max-width: 850px;
    margin: 0;
    padding: 20px 10px;
}
.tltl{
    grid-area: titl;
}
.subt{
    grid-area: subt;
}
.col1{
    grid-area: col1;
    
}
.col2{
    grid-area: col2;
}
.article img{
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    display: block;
}
.trend-grid .title, .trend-grid-rvrs .title{
    z-index: 10;
    position: absolute;
    transform: translate(0%, -500%); 
    margin-left: 10px;
    font-family: Merriweather;
    color: white;
    max-width: 300px;
    word-wrap: break-word;
    margin: 10px;
}
.trend-grid .tagline, .trend-grid-rvrs .tagline{
    z-index: 10;
    position: absolute;
    transform: translate(0%, -350%); 
    font-family: Merriweather;
    color: white;
    font-weight: 200;
    max-width: 300px;
    word-wrap: break-word;
    margin: 10px;

}