/* MONITOR SIZES */
body{
    margin:0;
    font-family: 'Montserrat', sans-serif;;
    background-color: rgb(224, 230, 219);
    background-image: linear-gradient(#659999,#f4791f );
    background-repeat: none;
    height:100%;
}

.container{
    min-height: 500px;
    max-width: 1024px; 
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top:150px; 

}

a{
    color:black;
    text-decoration: none;
}

.header-container{
/* background-color: rgba(115, 59, 168, 0.459); */
background-color: #568a8a;
min-height: 100px;
position: fixed; 
width: 100%;


}

header{
    max-width: 1024px; 
background-color:#bb754725;
min-height: 100px;
margin: 0 auto;
display:flex;
justify-content: space-between; 
align-items: center;


} 


.footer-container{
    background-color: #000000;
    min-height: 100px;
    flex-shrink: none
    
    }
    
    footer{
        max-width: 1024px; 
    background-color: #00000088;
    min-height: 100px;
    margin: 0 auto;
    position: fixed;
    height:100%;
      
    
    } 

    .rightsidenavbuttons{
        border-style: solid;
        border-width: 2px;
        padding: 10px 25px;
        margin-left: 5px;

    }

    .logo2:last-child{
        padding-right:15px;
    }

.col{
    width: 30%;
    margin-bottom: 40px; 
    background-color: rgba(165, 132, 132, 0.219);
    
    
   
}
 .col p{
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    padding: 20px 20px;
    line-height: 1.5rem;
    word-wrap: break-word;

    

 }  
.hideboxdesktop{
    display: none;
}


.col img{
width: 100%;
height: auto;

}
.col p{
    font-weight: 900;
}

.logo, .logo2{
color: rgb(255, 0, 0);
font-size: 25px; 
font-weight: 400;}

.thickerheader{
    font-weight: 800;
    padding-left: 10px;
}

    .mob-wrapper{
display:none;    
}

.logo2{
    margin-right: 5px;
}
.logo{
    padding-left:5px;
}


/* TABLET SIZES */
@media(max-width: 1000px)
{
    .col{
      
        width: 40%;
    }

    .hideboxdesktop{
        display: block;
    }
   
/* breakpointtoanalyse */
    
        
         nav{

            display:none;  
          }


         /* nav a{
             display: block;
         } */



        .logo{
        padding:40px 0px;
        
        }
        .header-container{
            background-color: rgba(185, 175, 194, 0.616);
            min-height: 100px;
            position: relative; 
            width: 100%;
        }
        
        
        header{
            padding-bottom:100px;}

            .mob-wrapper{
                display:block; 
                padding-right:30px;    
                }

             .mob-nav{
                 display:fixed;
                 position: static;
                 padding-top: 10px;
             }   
             /* The above works because position absolute for .mobnav is only relative in position to the main parent mob-wrapper so it doesnt adjust for its direct parent which is the burger menu!!! */


             .rightsidenavbuttons1{
                 display: block;
                 background-color: rgba(244, 246, 250, 0.63);
                 padding: 15px 30px; 
                 margin-left: -25px;
                 text-align: center;
             }

             .rightsidenavbuttons, a{
color:rgb(0, 0, 0);
font-weight: 500;
}


/* PHONE SIZES ! */

@media(max-width: 361px)
{
    .col{
      
        width: 100%;
    } 
    
    .hide-mobile{
        display: none;
}





    header{
display:block;
text-align: center;

 }


 nav a{
     display: block;
 }
.logo{
padding:40px 0px;

}
.header-container{
    background-color: rgba(115, 59, 168, 0.459);
    min-height: 100px;
    position: relative; 
    width: 100%;
}


header{
    padding-bottom:100px;}

    .mob-wrapper{
        display:block;    
        }

}
.mob-nav{
    margin-left: 155px;
}