*{
  margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

html{
    /* background-image: url(img/background_2018.jpg);*/
     background-size: cover;
     background-position: center;
     
    
    color: #222021;
    font-family:  'Anton','Bungee Inline', 'Arial', sans-serif;
    font-weight: 200;
    font-size: 24px;
    text-rendering: optimizeLegibility;
    
}
header{
  
   background-size: cover;
   background-position: center;
   height: 80vh;
    
}
* {box-sizing: border-box;}


 /*company and contact page*/

ul {
    width: 80%;
    height: 100%;
    margin-left: 13%;
    margin-top: 65px;
    text-align: left;
}

h3{
   
    font-family: 'Roboto','Arial', sans-serif;
    background-color: rgba(245, 245, 245, 0.80);
    margin-left: 3%;
    margin-right: 3%;
    color:  #000000;
    font-size: 80%;
    font-weight: 500;
    vertical-align: top;
    
 }
h4{
  
    font-family: 'Roboto','Arial', sans-serif;
    background-color: rgba(245, 245, 245, 0.82);
    height: 770%;
    margin-left: 5%;
    color:  #363535;
    font-size: 65%;
    font-weight: 100;
    
 }


h7{
    
    color: rgb(248, 231, 198);
    font-size: 30;
    font-weight: 10;
    letter-spacing: 4px;
    word-spacing: 3px;
    margin-left: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
}
h8{
    color: rgb(248, 231, 198);
    font-size: 20; 
}

.text-box{    
    position: fixed ;
    width: 100%;
    z-index: 2;
    top: 5px;
    left: 0x;
    background-color: rgba(37, 34, 75, 0.99);
}

.designtext-box{    
    position: fixed ;
    width: 100%;
    z-index: 6;
    top: 60px;
    left: 20x;
    font-family: 'Roboto','Arial', sans-serif;
    color: rgb(255, 255, 255);
    background-color: rgb(87, 87, 87);
}

.companyphilosophy{    
    position:absolute;
    z-index: 2;
    width: 80%;
    top: 10%;
    left: 2%;
}


.board-box{         
    position: absolute;
    left: 1%;
}

  /*navigation*/
.navigation{
    position: fixed;
    z-index: 5;
    top: 40px;
    left:0px;
     
}
boarddesign{
    position: fixed;
    z-index: 5;
    font-family: 'Roboto','Arial', sans-serif;
    top: 60px;
    left:-10px;
    margin-left: 2%;
    color:  #000000;
   
    
     
}
.models_navigation{
    position: absolute;
    z-index: 5;
    top: 176px;
    left: 60px;
    transform: translate(-50%,-50%);  
}

.model_information{
    /*position absolute;*/
    z-index: 2;
    width: 300px;
    transform: translate(100%,100%);
    background-color: rgb(250, 250, 250);
}

.border { border-width: 7px; border-color: rgba(227, 230, 250, 0.99); border-style:groove;}

.img:hover {
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.btn:link{
    text-transform: uppercase;
    width: 100px;
    font-family: 'Roboto','Arial', sans-serif;
    font-size: 13;
    display:inline-block;
    padding: 1px 15px; 
    font-weight: 100;
    text-decoration:none;
    border-radius: 4px;
    border:1px solid rgba(255, 255, 255, 0.96);  
    transition: background-color 0.4s, border 0.4s, color 0.4s;
}

.btn:hover,
.btn:active{
 background-color: rgba(114, 134, 152, 0.99); 
    border:1px solid  rgba(227, 230, 250, 0.99);
     color:  #400d0d;
    
    
}


.btn1{
  background-color: rgba(1, 5, 52, 0.99);
     /*border:1px solid rgb(248, 180, 73);*/
     color: #b7e3e5;
    
}
.btn2{
  background-color: rgba(239, 239, 239, 0.69);
     border:1px solid rgb(0, 0, 0);
     color: #363636;
     font-size: 16px;
     width: 100%;
    
}
.btn3{
  background-color: rgb(0, 0, 0);
     /*border:1px solid rgb(248, 180, 73);*/
     color: #b7e3e5;
    
}