@charset "utf-8";
/* CSS Document */
#navcontainer
{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 30%;
}

#navlist li
{
display: inline;
padding-bottom: 14px;
padding-left: 110px;
background-repeat: no-repeat;
}

#navlist a
{
padding-left: 20px;
padding-bottom: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}

#navlist a:link, #navlist a:visited
{
padding-left: 20px;
color: #4A596D;
background-position: 0 -28px;
background-repeat: no-repeat;}

#navlist a:hover
{
color: black;
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0 -14px;
}

body{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
}

main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    margin-top: 10%;   
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
}


main p{
    grid-column: 3/5;
    grid-row:2/5;
    margin-left: -30%;
    margin-right: 25%;
}

main h1{
    margin-left: 70px;
    grid-column: 3/4;
}



article{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    margin-top: 100px;
    height: 100vh;
}

span{
    color: #AC8951;
}

article img{
    width: 90%;
    grid-column: 1/3;
    grid-row: 1/3;
    margin-left: 10%;
    border-radius: 30px;
    background: #e0e0e0;
    box-shadow:  22px 22px 44px #8f8f8f,
                -22px -22px 44px #ffffff
}

article >section{
    z-index: 1;
    width: 80%;
    grid-column: 2/3;
    grid-row: 2/3;
    margin-top: -30%;
    margin-left: 40%;
}

article h1{
    color: white;
    z-index: 1;
    font-size: 150px;
    grid-column: 1/3;
    grid-row: 1/3;
    margin-left: 25%;
}

article p{
    grid-column: 3/5;
    margin-left: 10%;
    margin-top: 25%;
   
}

footer{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 1%;
}



section{
    text-align: center;
    margin-top: 5%;
    font-size: 20px;
}

.fitness{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr ;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    height: 70vh;
}

.fitness img{
        width: 100%;
        grid-column: 4/6;
        grid-row: 1/3;
        margin-left: -35%;
        border-radius: 30px;
        margin-top: -90px;
        background: #e0e0e0;
        box-shadow:  22px 22px 44px #8f8f8f,
                    -22px -22px 44px #ffffff
}

.fitness >section{
    z-index: 1;
    width: 70%;
    grid-column: 2/3;
    grid-row: 2/3;
    margin-top: 10%;
    margin-left: 135%;
}

.fitness :nth-child(2){
    width:85%;
    grid-column: 1/2;
    grid-row: 1/3;
    margin-left: 20%;

}

.fitness h1{
    color: white;
    z-index: 1;
    font-size: 150px;
    grid-column: 4/6;
    grid-row: 1/3;
    margin-left: -29%;
    margin-top: 12px;
}

.fitness p{
    grid-column: 2/4;
    margin-left: 5%;
    margin-right: 35%;
    margin-top: 12%;
}

.CRM{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
}

.CRM h1{
    text-align: center;
    grid-row: 1/2;
    grid-column: 1/2;
    color: black;
}

.CRM img{
    width: 50%;
    grid-row: 1/2;
    grid-column: 1/2;
    margin-top: 15%;
    margin-left: 25%;
    border-radius: 37px;
    background: #e0e0e0;
    box-shadow:  22px 22px 44px #8f8f8f,
                -22px -22px 44px #ffffff
}

.CRM p{

    grid-row:2/3;
    grid-column: 1/2;
}

.LO{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
}

.LO h1{
    text-align: center;
    grid-row: 1/2;
    grid-column: 2/3;
    margin-top: -53%;
    color: black;
}

.LO img{
    width: 50%;
    grid-row: 1/2;
    grid-column: 2/3;
    margin-top: -42%;
    margin-left: 25%;
    border-radius: 37px;
    background: #e0e0e0;
    box-shadow:  22px 22px 44px #8f8f8f,
                -22px -22px 44px #ffffff
}

.LO p{
    grid-column:2/3;
    margin-top: -9%;
}

.dier{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr ;
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    margin-top: 10%;
    margin-bottom: 5%;
}
.dier img{
    width: 100%;
    margin-left: 20px;
    grid-row: 1/3;
    grid-column: 1/3;
    border-radius: 37px;
    background: #e0e0e0;
    box-shadow:  22px 22px 44px #8f8f8f,
                -22px -22px 44px #ffffff
}

.dier h3{
    margin-left: 20px;
    margin-top: 40%;
}

.dier p{
    grid-column: 3/4;
    grid-row: 2/3;
}

.dier :nth-child(5){
    grid-column: 4/5;
    grid-row: 2/3;
}

.CRM, .LO p{
    margin-left: 1%;
    margin-right: 1%;
}


.quote{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.quote{
    text-align: center;
    color: #AC8951;
    font-size: 15pt;
    margin-top: 5%;
}

.quote :nth-child(2){
    color: black;
}