@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

body{
    width:100%;
    height:100vh;
	font-size:16px;
	line-height:1.6;
	color:#fff;     
    font-family: 'Open Sans', sans-serif;       
}         

body td{
    color:#fff;     
    
}
div.sfeer{
    display: inline-block;
    width:100%;
    height:100vh;     
    text-align:center;                   
    background-position: center center;
    background-size:cover;
    background-repeat: no-repeat;  
}                    
div.sfeer .holder{
    display:flex;
    width:60%;      
    padding:5%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    color:#fff;
    font-size:30px;
    text-shadow: rgba(0,0,0,1) 1px 0 10px;
}              
div.sfeer .holder p{  
    color:#fff;
    font-size:30px;
    text-shadow: rgba(0,0,0,1) 1px 0 10px;  
}
div.sfeer .shade{
    height:100%;   
}
#f100 .nav{
    position: absolute;
    background-color: transparent;    
}
.nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;     
    justify-content: space-between;
    align-items: flex-start;    
    width: 100%;
    padding: 10px;
    background-color: rgba(0,0,0,1);
}
.nav .logo{
    max-width:50px;
    width:100%;  
    padding:10px; 
}
.nav .logo img{
    width:100%;   
}   
.nav .menu{
    display:inline-block;
}              

.nav ul {
    display: flex;      
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position:relative;    
}
.nav ul li{
    position:relative;
}
.nav ul li a.selected{
 color:orange;   
}
.nav ul li a{
    font-weight:600;   
    color:#fff;
    text-decoration:none;
    display:inline-block;
    padding:10px;
}
.nav ul li ul{   
    display:none;           
    position:absolute;
    left:0px;
    top:40px;
    background-color:#000;
}
.nav ul li:hover ul{
    display:inline-block;
}
.shade{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width:100%;                                                                          
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,1) 100%);  
}    
.shop{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: center;                                                                 
    background: rgb(0,0,0);
    color:#fff;
}
.shop .info{
    padding:60px;
    letter-spacing:1px;
}
.shop .info h2{
    font-size:30px;
}
.shop .info p{
    font-size:22px;
    padding-bottom:15px;
}
.shop .img{
 width:50%;                                                            
    background-image:url(/_img/bg2.jpg);
    background-position: center center;
    background-size:cover;
    background-repeat: no-repeat;     
}
button,
a.btn{
    padding:10px 40px;
    display:inline-block;
    background-color:transparent;
    color:#F18511;
    text-decoration:none;
    border:2px solid rgba(255,255,255,0.4);
    text-transform:uppercase;
}
button:hover,
a.btn:hover{
    color:#000;
    background-color:rgba(255,255,255,0.8);    
    border:2px solid rgba(255,255,255,0.8);
}                 
.co2{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: center;                                                                 
    background: rgba(255,255,255,1);
    color:rgba(0,0,0,1);
}
.co2 .info{
 width:50%;       
    padding:60px;
    letter-spacing:1px;
}
.co2 .info h2{
    font-size:30px;
}
.co2 .info p{
    font-size:22px;
    padding-bottom:15px;
}
.co2 .img{
 width:50%;                                                            
    background-image:url(/_img/bg3.png);
    background-position: center bottom;
    background-size:contain;
    background-repeat: no-repeat;  
}
.co2 a.btn{
    padding:10px 40px;
    display:inline-block;
    background-color:transparent;
    color:#F18511;
    text-decoration:none;
    border:2px solid rgba(0,0,0,0.4);
    text-transform:uppercase;
}
.co2 a.btn:hover{
    color:#fff;
    background-color:rgba(0,0,0,0.8);    
    border:2px solid rgba(0,0,0,0.8);
}
.content {
    background-color:#000;
    display:inline-block;
    width:100%;
    text-align:center;
}
.content .holder a{
    color:#fff;   
}
.content .holder{
    color:#fff;
    width:60%;
    display:inline-block;
    text-align:left;
}                      
#f738 .content .holder,
#f739 .content .holder{
    color:#fff;
    width:100%;
}                  
.content .holder h1{
    font-size:40px;
    font-weight:400;
    margin:0px;
    padding:0px 0px 15px 0px;   
}
.content .holder h2{
    width:100%;
    display:block;
    clear:left;
    font-size:20px;
    font-weight:600;
    margin:0px;
    color:#F08313;
    padding:10px 0px 10px 0px;   
}
.content .holder p{
    margin:0px;
    padding:0px 0px 15px 0px;   
}              
.content .holder a{
    color:#F08313;
}              
.content .holder img[align="left"]{
    margin:0px 10px 10px 0px;
    float:left;
}
.content .holder img[align="right"]{
    margin:0px 0px 10px 10px;
    float:right;
}
.footer{
    background-color: rgb(0,0,0);
    color:#fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
}               
.footer .address,
.footer .contact{
    padding:40px;
}
.footer .contact .logo{
    width:240px;
    display:inline-block;
}
.footer a{
    color:#fff;    
}  
.footer .socials{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}
.footer a.social{
    margin:10px;
    display:inline-block;
    padding:10px;
    line-height:1;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background-color: rgb(255,255,255);
}                 
.footer a.social font{
    color:#000;
    font-size:24px;
}                       
.refs{  
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-evenly;
    align-items: stretch;          
    text-decoration:none;
    color:#fff;   
    background-color:rgba(0,0,0,1);
} 
.refs .ref{      
    position:relative; 
    height:33vh;    
    display:inline-block;
    width:33%;
    margin:0;
    vertical-align:top; 
    text-align:left;       
    z-index:100;
    background-color:#fff; 
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;  
  }   
.ref .text{   
  position:absolute; 
  z-index:20;   
  width:100%;
  text-align:center;
  padding:10px; 
  bottom:0;
  background-color:rgba(0,0,0,0.7);
  color:#fff;
}               
.ref:hover .text{          
  background-color:rgba(0,0,0,1);
}
.icon-menu7{
    padding:20px;
    text-decoration:none;
    font-size:20px;
    color: orange;
    display:none;
    
}
 .head{
             width:100%;
             text-align:center;
             background-color:#000;
             padding:20px;
       }
       .head h1{
            font-size:30px;
            font-weight:300;
            color:#fff;
       }
       .head h2{
            font-size:20px;
            font-weight:800;
            color:#fff;
       }        
       .images{
    display: flex;
    background-color: #000;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: stretch;
    justify-content: center;  
    position:relative;
       }       
       .images a{ 
        z-index:100;
        position:relative;
        display:inline-block;
        width:33%;
        height:33vh;    
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center center; 
        transition: transform .2s; /* Animation */
        border:0px solid #fff;    
        cursor:pointer;
       }           
       .images a:hover{   
            z-index:200;           
            transform: scale(1.1);
            border:10px solid #fff;
       }             
      .back{
        padding:10px;
        text-align:center;
        background-color:#000;
       }
       .back a{
        padding:10px;     
        color:#fff;
        text-decoration:none;
       }
@media (max-width: 800px) { 
    .icon-menu7{             
        display:inline-block;
    }
    .content .holder{
        width:80%;        
    }
    .nav .menu{
        background-color:#000;
        display:none;  
        position:absolute;
        top:50px;
        left:0px;
        width:100%;
        z-index:9999;
    }
    .nav ul {               
        flex-direction: column; 
        align-items: flex-start;
    }
    .nav ul li.selected ul {
        display:inline-block;
        position: relative;
        top:0;
        left:0;               
    }
    .nav ul li.selected ul li a{
        font-size:16px;
        padding-left:20px;
    }
    .refs .ref {
        width:50%;
    }
    div.sfeer .holder p {
        font-size:24px;   
    }
    .images a{
        width:50%;    
        height:40vh; 
        border:10px solid #000;  
    }
    .content .holder h1 {
        font-size:30px;
    }
    
}   
@media (max-width: 480px) {  
    .content .holder h1 {
        font-size:24px;
    }
    .images a{
        width:100%;
        
    }
    button, a.btn {
        padding:10px;
    }         
    .content .holder img[align="right"],
    .content .holder img[align="left"] {
        margin: 10px 0px;
        float: none;
        width:100%;
    }
    .footer .address, .footer .contact{
        text-align:center;
    }
    .content .holder{
        width:90%;        
    }
    .refs .ref {
        width:100%;
        height:40vh;
    }
    div.shop .info,
    div.co2 .info,
    div.sfeer .holder{
        width:90%;
        padding:10px;
    }
    div.sfeer .holder p {
        font-size:18px;   
    }
    
}