:root {
   --page_bg: rgb(255, 255, 255);
   --margin_left_right: linear-gradient(0deg, rgb(48,48,48), rgb(48,48,48) 10%,rgb(170, 157, 159));
   --inner_margin_left_right: rgb(224,224,224);
   --content_devider_vertical: rgb(224,224,224);
   --content_left: rgba(224,224,224);
   --content_left_right_devider_horizontal: rgba(193, 158, 125, 0.608);
   --content_left_right_devider_horizontal_height: 10px;
   --content_right: rgb(198, 198, 198);
}
*{
   box-sizing: border-box;
   margin: 0px;
   padding: 0px;   
}

body{
   display: flex;
   flex-direction: row;
   background-color: var(--page_bg);
}

.margin-left{
   background: rgb(2,0,36);
   background: var(--margin_left_right);   
   flex: 1 1 10%;   
}

.margin-right{
   background: rgb(2,0,36);
   background: var(--margin_left_right); 
   flex: 1 1 10%;   
}

.bodywrapper{
   background-color: bisque;
   flex: 1 0 80%;   
}

main{
   display: flex;
   flex-direction: row;
}

.inner-margin-left{
   background-color: var(--inner_margin_left_right);
   flex: 1 1 5%;   
}

.inner-margin-right{
   background-color: var(--inner_margin_left_right);
   flex: 1 1 5%;   
}

.inner-bodywrapper{   
   background-color: bisque;
   flex: 1 0 90%;   
}

.contentwrapper{
   background-color: rgb(123, 141, 180);
   display: flex;
   flex-direction: row;   
}

.content-left{
   background-color: var(--content_left);   
   flex: 1 1 65%; 
   min-width: 600px;
}

.content-devider-vertical{
   background-color: var(--content_devider_vertical);   
   flex: 1 1 2%;
}

.content-left-devider-horizontal{
   background-color: var(--content_left_right_devider_horizontal);   
   height: var(--content_left_right_devider_horizontal_height);
}

.content-right-devider-horizontal{
   background-color: var(--content_left_right_devider_horizontal);   
   height: var(--content_left_right_devider_horizontal_height);;
}

.content-right{
   background-color: var(--content_right);   
   flex: 1 1 35%; 
   min-width: 400px;
}

.content-left-container{
   display: flex;
   flex-direction: column; 
   min-height: 100px; 
   font-family: 'Montserrat', sans-serif; 
   font-size: 20px;
}

.content-right-container{
   display: flex;
   flex-direction: column;
   min-height: 100px;
   font-family: 'Montserrat', sans-serif;
   font-size: 20px;
}

.navwrapper{
   display: flex;  
   flex-direction: row;   
   position: sticky;
   top: 0;
   width: 100%; 
   min-height: 60px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-right: 11px;
   background-color: rgb(48,48,48);   
}

.nav-left{  
   display: flex;  
   flex-direction: row;
   background-color: rgb(48,48,48);
   justify-content: left;
   align-items: center;
   width: 100%;
}

.logo{
   padding-left: 75px;
}

.img-logo{
   vertical-align: bottom;
   height: 60px;
   width: 100%;
   object-fit: contain;
}

.nav-right{
   justify-content: right;
   align-items: center;     
}

.nav-links{
   justify-content: right;  
   white-space: nowrap;   
}

.nav-links a{
   color: rgb(219, 217, 217);
   text-decoration: none;
   font-family: 'Montserrat', sans-serif;
   font-size: 24px;   
   letter-spacing: 3px;
   font-weight: bold;   
   min-width: 75px;   
   padding-right: 50px;
}

.active-link{
   color: rgb(224, 154, 88);      
}

.mobile-nav{
   display: none;
   cursor: pointer;
   padding-right: 10px;
}

.mobile-nav div{
   width: 25px;
   height: 3px;
   background-color: rgb(212, 212, 212);
   margin: 5px;
   transition: all 0.3s ease;
}

a:hover{
   color: rgb(223, 188, 75);
}

img{
   width: 400px;
   height: auto;
}

footer{
   width: 100%;
   display: flex;  
   flex-direction: row;  
   justify-content: center;
   align-items: center;
   min-height: 70px;
   background-color: rgb(48,48,48);;
   font-family: 'Montserrat', sans-serif;
   color: rgb(212, 212, 212);
   font-size: 1.2rem;
}

.footer-left-container{
   width: 50%;
   display: flex;  
   flex-direction: row;  
   justify-content: center;
   align-items: center;
   font-style: italic;
   
}

.footer-right-container{
   width: 50%;
   display: flex;  
   flex-direction: row;  
   justify-content: left;
   align-items: center;
}

@media screen and (max-width:1400px){
   
   .margin-left{
      flex: 1 1 8%;
   }
   .margin-right{
      flex: 1 1 8%;
   }
   .bodywrapper{
      flex: 1 1 84%;
   }
   .inner-margin-left{
      flex: 1 1 8%;
   }
   .inner-margin-right{
      flex: 1 1 8%;
   }
   .inner-bodywrapper{
      flex: 1 1 84%;
   }
   .logo{
      width: 100%;
      justify-content: left;
      padding-left: 5px;
   }
}

@media screen and (max-width:1200px){
   
   .nav-links a{
      padding-right: 20px;
   }
   .content-devider-vertical{
      display: none;
   }
   .margin-left{
      flex: 1 1 5%;
   }
   .margin-right{
      flex: 1 1 5%;
   }
   .bodywrapper{
      flex: 1 1 90%;
   }
   .inner-margin-left{
      flex: 1 1 2%;
   }
   .inner-margin-right{
      flex: 1 1 2%;
   }
   .inner-bodywrapper{
      flex: 1 1 96%;
   } 
   .navwrapper{
      padding-right: 0px;
   }  
   .logo{
      width: 100%;
      justify-content: left;
      padding-left: 5px;
   }
   .content-left{
      min-width: 530px;
   }
   
}

@media screen and (max-width:900px){
   
   .nav-links a{
      padding-right: 10px;
   }   
   .contentwrapper{
      flex-wrap: wrap;
   }    
   .margin-left{
      display: none;
   }
   .margin-right{
      display: none;
   }
   .inner-margin-left{
      display: none;
   }
   .inner-margin-right{
      display: none;
   }
   .content-devider-vertical{
      display: none;
   }
   .navwrapper{
      padding-right: 0px;
   }
   .logo{
      width: 100%;
      justify-content: left;
      padding-left: 5px;
   }
   .content-left{
      min-width: 500px;
   }
   
}


@media screen and (max-width:768px){
         
   .margin-left{
      display: none;
   }
   .margin-right{
      display: none;
   }
   .inner-margin-left{
      display: none;
   }
   .inner-margin-right{
      display: none;
   }
   .content-devider-vertical{
      display: none;
   }
   .content-left{
      min-width: 400px;;
   }
   .content-left-devider-horizontal{
      display: none;
   }
   .content-right-container{
      display: none;
   }
   .logo{      
      justify-content: left;
      padding-left: 5px;
   }
   .nav-links{
      /* display: none;
      position: absolute; */
      position: fixed;
      right: 0px;
      height: 230px;
      top: 70px;
      display: flex;
      background-color: #5d4954;      
      flex-direction: column;             
      width: 30%;  
      transform: translateX(100%); 
      transition: transform 0.3s ease-in;    
   }
   .nav-links a{          
      padding-left: 25px;
      padding-top: 10px;
      padding-bottom: 15px;      
   }   
   .mobile-nav{
      display: block;          
   }
}

.nav-active{   
   transform: translateX(0%);
   /* display: flex; */   
}

@keyframes navLinkFade{
   from{
      opacity: 0;
      transform: translateX(50px);
   }
   to{
      opacity: 1;
      transform: translateX(0px);
   }
}

.toggle .line1{
   transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
   opacity: 0;
}
.toggle .line3{
   transform: rotate(45deg) translate(-5px,-6px);
}