/* Add here all your css styles (customizations) */

:root {
    
    --techmo-yellow: rgba(255,198,1);
    --techmo-orange: rgba(255, 154, 0, 1)}

 @font-face {
    font-family: 'Komika';
    src: url('../font/KOMTXT__-webfont.woff');
    font-weight: normal;
    font-style: normal;
}

.g-techmo-overalap {
    position:relative;
    z-index:100!important;
	background-color:#010312;
    /*margin-top:-5%!important; /* Adjust this to your needs   PASEK POD GRAFIKĄ  */  
    }

a:hover {
    color: var( --techmo-yellow);}

a:focus{
    color: var( --techmo-orange);}



.g-bg-banana-darkblue{
    background-color: #100f1e;
}

.g-bg-banana-yellow{
    background-color: #fee400;
}

.g-color-banana-yellow{
    color: #fee400;
}

.maine-image{
    background-color: #010312;
}

.BI-graphics{
    padding-left: 350px;
    margin-top: -110px;
    margin-bottom: -10px;
    transform: scale(0.7);
}


/* bananas animations  */ 

/*WSPÓLNE DLA BANANÓW*/
.bananaL1, .bananaL2, .bananaL3, .bananaP1, .bananaP2, .bananaP3 {
	position: absolute;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	animation-duration: 3s;
	z-index: -1;
	transform:  scale(0.1);
	
}
@keyframes bananaL1, @keyframes bananaL2, @keyframes bananaL3, @keyframes bananaP1, @keyframes bananaP2, @keyframes bananaP3 {
    0%   {opacity: 1; transform:  scale(0.1);}
    95% { opacity: 1;}
    100% { opacity: 0; }
}

/*LEWE BANANY*/
.bananaL1{
    top: 10%;  /* Początkowe pozycje bananów. W keyframie podaje potem tylko ich końcową pozycję. */
    left: 17%;
    animation-name: bananaL1;
    animation-delay: 1s;
}
.bananaL2{
    top: 35%;
    left: 16%;
    animation-name: bananaL2;
    animation-delay: 0.3s;
}
.bananaL3{
    top: 60%;
    left: 17%;
    animation-name: bananaL3;
    animation-delay: 0.6s;
}	
	
@keyframes bananaL1 {
    100% { left: -50%; top: 50%; transform: rotate(40deg) scale(4); }
}
@keyframes bananaL2 {
    100% { left: -50%; top: 90%; transform: rotate(-450deg) scale(3); }
}
@keyframes bananaL3 {
    100% { left: -30%; top: 150%; transform: rotate(-280deg) scale(3.5); }
}


/* PRAWE BANANY */
.bananaP1{
    top: 10%;
    left: 70%;
    animation-name:bananaP1;
    animation-delay: 0.7s;
}
.bananaP2{
    top: 30%;
    left: 77%;
    animation-name:bananaP2;
    animation-delay: 1.1s;
}
.bananaP3{
    top: 60%;
    left: 75%;
    animation-name:bananaP3;
    animation-delay: 0.3s;
}

@keyframes bananaP1{
    100% { left: 140%; top: 20%; transform: rotate(-540deg) scale(2.5); }
}
@keyframes bananaP2{
    100% { left: 140%; top: 80%; transform: rotate(540deg) scale(3.5); }
}
@keyframes bananaP3{
    100% { left: 130%; top: 120%; transform: rotate(-450deg) scale(4); }
}

/* end bananas animations */ 


.btn1, .btn2, .btn3, .btn4{  /*Wartości dla wszystkich buttonów*/
	width: 200px;
    color: #fee400;
	border: 3px solid #fee400;
    margin-top: 22px;
    margin-bottom: 20px;
    margin-right: 20px;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 1px;
	font-family:'Komika';
}
.btn1, .btn2, .btn3 { /*Wartości dla buttonów OCULUS, VIVEPORT i STEAM*/
	background-color: #100f1e;
}
.btn4{ /*Wartości dla buttonu PRESS KIT*/
	background-color: #fee400;
	color: #100f1e;
}

/*HOVERY*/
.btn1:hover, .btn2:hover, .btn3:hover{
    background-color: #fee400;
    color: #100f1e;
}
.btn4:hover{
	background-color: #fee400;
    color:#ff0000;
}



.instructions{
    color: #fee400; 
    font-size: 26px;
    padding-right: 100px;

}

.instructions:hover{
    color:#ff0000;
}

.about-box{
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 100px;
    height: 700px;
}

.text-box{
    width: 100%;
    background-color: #010312;
    margin-bottom: 10%;  
    color: #fee400;
    font: space 2; 
    font-size: 55px;
    font-weight: bold;
    border: 3px solid #fee400;
    box-shadow: #ddc7038e 0 0 10px 10px;
    padding: 100px 50px;
    font-family:'Komika';
    letter-spacing: 1px;
  
}
/*
.image-text{
    width: 260px;
    color: #fee400;
    background-color: #010312;
    border: 5px solid #fee400;
    margin-bottom: -5px;
    
    margin-left: 300px;
    font-size: 55px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Komika Bold';
    padding-left: 40px;
}
*/
.about-text{
    margin-top: 10%;
     color: azure; 
     font-size:26px; 
     font-weight: normal;
     font-family:'Komika';   /*uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu*/
     

}

.box-left{
  color:#fff;
  font-size: 20px;
  font-weight: semibold;
  
}

.gallery-container{
   padding-top: 250px;
   padding-bottom: 250px;
   margin-left: 15%;
   margin-right: 15%;
}

.gallery-box{
    border: 3px solid #fee400;
    box-shadow: #ddc7038e 0 0 10px 10px;
}

.heading{
    font-family: 'Komika';
    font-size: 36px;
    padding-top: 25px;
    margin-bottom: -50px;
    letter-spacing: 1px;
}

.logo{
    margin-top: 20px;
    margin-right: 10%;
    margin-left: 10%;
}

.info-box{
    padding: 15px;
    margin-bottom: 85px;
}

.line{
    
    height: 5px;
    background-color: #fee400;
    box-shadow: #ddc7038e 0 0 5px 5px;
}

.line2{
    height: 5px;
    background-color: #fee400;
}

.line-black{
    
    height: 5px;
    background-color:#000;

}

.banana-box{
    margin-top: 20px;
    margin-right: 10%;
    margin-left: 10%;
    color: #fee400; 
    font-size: 15px; 
    font-family: 'Komika'; 
    
}

.email2{    
    font-size: 26px;
}

.presskit2{
    color: #fee400; 
    font-size: 26px;
    padding-left: 30px;
    
}
.presskit2:hover{
    color: #ff0000;
}

.fb2{
    color: #fee400; 
    
    font-size: 26px;
    margin-left: 15px;
    
    
}

.fb2:hover{
    color: #3b5998;
}

.twitter2{
    color: #fee400; 
     
    font-size: 26px;
    margin-left: 25px;
}

.twitter2:hover{
    color: #00aced;
    
}

.yt2{
    color: #fee400; 
     
    font-size: 26px;
    margin-left: 25px;
}

.yt2:hover{
    color: #c4302b;
    
}

.contact-box{
    width: 80%;   
    margin-left: 16%;
    
    margin-bottom: 70px;
    margin-top: 10px;
}

.poczta{
   height: 25px;
}

.media-body{
    color:#fee400; 
    font-size: 24px;    
}

.banana-ring{
    margin-left:800px; 
    padding-bottom: 5%;
  
    
}

.banana-ring2{
    margin-left:800px; 
    padding-bottom: 5%;
    margin-top: -350px;
    
}

.tut-box{
    width: 70%;   
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 200px;
    padding-bottom: 80px;
    
}



@media screen and (max-width: 1910px){
    .contact-box{
        width: 100%;   
        margin-left: 10%;
        margin-bottom: 70px;
        margin-top: 10px;
    }

}

@media screen and (max-width: 1605px){
    .contact-box{
        width: 95%;   
        margin-left: 10%;
        margin-bottom: 50px;
        margin-top: 10px;
    }
    .BI-graphics{
        padding-left: 195px;
        margin-top: -170px;
        margin-bottom: -180px;
        transform: scale(0.6);
    }

    .banana-ring{
        margin-left:600px; 
        padding-bottom: 5%;
        margin-top: -60px; 
    }
    
    .banana-ring2{
        margin-left:600px; 
        padding-bottom: 5%;
        margin-top: -350px;  
    }
}


@media screen and (max-width: 1450px){
    .BI-graphics{
        padding-left: 115px;
        margin-top: -190px;
        margin-bottom: -200px;
        transform: scale(0.6);
		height: 820px;
    }
}

@media screen and (max-width: 1366px){

    .BI-graphics{
        padding-left: 1px;
        margin-top: -210px;
        margin-bottom: -230px;
        transform: scale(0.5);
    }
 
    

    .text-box{
        font-size: 40px;
    }

    .about-text{
        font-size: 20px; 
        }

    .banana-ring{
        margin-left:480px; 
        padding-bottom: 5%;
        margin-top: -160px; 
    }

    .heading{
        font-size: 26px;
        margin-bottom: -25px;
    }
    .banana-ring2{
        margin-left:480px; 
        padding-bottom: 5%;
        margin-top: -280px; 
    }

    .contact-box{
        width: 100%;   
        margin-left: 3%;
        margin-bottom: 70px;
        margin-top: 10px;
        font-size: 20px;
    }

        .media-body{ 
            font-size: 19px;    
        }

        .email2{    
            font-size: 22px;
            
        }

        .presskit2{
            font-size: 22px;  
        }

        .fb2{
            font-size: 22px; margin-left: 5px;
        }

        .twitter2{
             font-size: 22px;
        }

        .yt2{
            font-size: 22px;
        }

        .poczta{
            height: 20px;
         }

}


@media screen and (max-width: 1250px){

    .BI-graphics{
        padding-left: 10px;
        margin-top: -190px;
        margin-bottom: -200px;
        transform: scale(0.5);
    }
 

    .text-box{
        font-size: 40px;
    }

    .about-text{
        font-size: 20px; 
        }

    .banana-ring{
        margin-left:480px; 
        padding-bottom: 5%;
        margin-top: -160px; 
    }

    .heading{
        font-size: 26px;
        margin-bottom: -25px;
    }
    .banana-ring2{
        margin-left:480px; 
        padding-bottom: 5%;
        margin-top: -280px; 
    }

    .contact-box{
        width: 100%;   
        margin-left: 3%;
        margin-bottom: 70px;
        margin-top: 10px;
        font-size: 20px;
    }

        .media-body{ 
            font-size: 19px;    
        }

        .email2{    
            font-size: 22px;
            
        }

        .presskit2{
            font-size: 22px;  
        }

        .fb2{
            font-size: 22px; margin-left: 5px;
        }

        .twitter2{
             font-size: 22px;
        }

        .yt2{
            font-size: 22px;
        }

        .poczta{
            height: 20px;
         }

}


@media screen and (max-width: 1024px){
    .BI-graphics{
        margin-left: -70px;
        margin-top: -190px;
        margin-bottom: -200px;
        transform: scale(0.4);
    }


    .text-box{
        font-size: 38px;
    }

    .about-text{
        font-size: 18px; 
        }

    .banana-ring{
        margin-left:30%; 
        margin-right:30%;
        padding: 5%;            
        margin-top: -220px;
    }

    .banana-ring2{
        margin-left:30%; 
        margin-right:30%;
        padding: 5%;            
        margin-top: -300px;
    }

    .instructions{
        padding-right: 70px;
    
    }

    .contact-box{
        width: 100%;   
        margin-bottom: 70px;
        margin-top: 10px;
        font-size: 18px;
    }

    
}


@media screen and (max-width: 995px){
    .contact-box{
        width: 80%;   
        margin-left: 10%;
        margin-bottom: 50px;
        margin-top: 5px;
        font-size: 20px;
    }

    .banana-ring{
        margin-left:30%; 
        margin-right:30%;
        padding: 5%;   
        
        margin-top: 150px;        
        
    }

    .media-body{ 
        font-size: 26px;    
    }

    .email2{    
        font-size: 26px;
        
    }

    .presskit2{
        font-size: 26px;  
    }

    .fb2{
        font-size: 26px; margin-left: 20px;
    }

    .twitter2{
         font-size: 26px;
    }

    .yt2{
        font-size: 26px;
    }

    .poczta{
        height: 26px; margin-left: 20px;
     }


}


@media screen and (max-width: 768px){
    .BI-graphics{
        margin-left: -140px;
        margin-top: -110px;
        margin-bottom: -150px;
        transform: scale(0.5);
    }


    .banana-ring{
        margin-left:25%; 
        margin-right:25%;
        padding: 5%;            
        margin-top: 70px;
    }

    .banana-ring2{
        margin-left:25%; 
        margin-right:25%;
        padding: 5%;            
        margin-top: -300px;
    }

    .poczta{
    margin-left:10px;
    }

    
}


@media screen and (max-width: 660px){
    .BI-graphics{
        margin-left: -170px;
        margin-top: -260px;
        margin-bottom: -280px;
        transform: scale(0.4);
    }

    .banana-ring{
    margin-left:20%; 
    margin-right:20%;
    padding: 5%;            
    margin-top: 90px;
}

.banana-ring2{
    margin-left:20%; 
    margin-right:20%;
    padding: 5%;            
    margin-top: -270px;
}

    

    
}

@media screen and (max-width: 570px){
    .BI-graphics{
        margin-left: -200px;
        margin-top: -230px;
        margin-bottom: -250px;
        transform: scale(0.4);
    }

    .banana-ring{
        margin-left:18%; 
        margin-right:18%;
        padding: 5%;            
        margin-top: 110px;
    }

    .banana-ring2{
        margin-left:18%; 
        margin-right:18%;
        padding: 5%;            
        margin-top: -260px;
    }

    

        .contact-box{
            width: 100%;   
            margin-left: 2%;
            margin-bottom: 50px;
            margin-top: 5px;
            font-size: 20px;
        }
    
        .poczta{
            margin-left:5px;
            }
    

    
}

@media screen and (max-width: 500px){
    .BI-graphics{
        margin-left: -215px;
        margin-top: -300px;
        margin-bottom: -270px;
        transform: scale(0.4);
    }

    .text-box{
        font-size: 28px;
    }

    .about-text{
        font-size: 16px; 
        }

        .banana-ring{
            margin-left:15%; 
            margin-right:15%;
            padding: 5%;            
            margin-top: 30px;
        }
        .banana-ring2{
            margin-left:15%; 
            margin-right:15%;
            padding: 5%;            
            margin-top: -250px;
        }

        .heading{
            font-size: 20px;
        }

    .poczta{
       height: 24px; margin-left: -1px;
       }
}

@media screen and (max-width: 426px){
    .BI-graphics{
        margin-left: -200px;
        margin-top: -300px;
        margin-bottom: -250px;
        transform: scale(0.35);
    }
    
    .text-box{
        font-size: 28px;
    }

    .about-text{
        font-size: 16px; 
        }

        .banana-ring{
            margin-left:10%; 
            margin-right:10%;
            padding: 5%;            
            margin-top: 20px;
        }

        .banana-ring2{
            margin-left:10%; 
            margin-right:10%;
            padding: 5%;            
            margin-top: -250px;
        }

        .contact-box{
            width: 100%;      
            margin-bottom: 70px;
            margin-top: 10px;
        }


    .poczta{
       height: 20px; margin-left: -1px;
       }
}



@media screen and (max-width: 375px){
    .BI-graphics{
        margin-left: -200px;
        margin-top: -280px;
        margin-bottom: -280px;
        transform: scale(0.3);
    }

  
    .text-box{
        font-size: 28px;
    }

    .about-text{
        font-size: 16px; 
        }

        .banana-ring{
            margin-left: 18px;
            padding: 5%;            
            margin-top: 110px;
            transform: scale(0.7);
        }

        .banana-ring2{
            margin-left: 18px;
            padding: 5%;            
            margin-top: -250px;
            transform: scale(0.7);
        }

        .heading{
            font-size: 24px;
            margin-bottom: 5px;
        }

        .instructions{
            font-size: 24px;
            padding-right: 50px;
        }

        .contact-box{
            margin-left: -10px;
            margin-bottom: 60px;
            margin-top: 15px; 

           
        }

        .col-lg-3{
            padding: 5px;
        } 
        .g-mb-30{
            padding: 5px;
        }

        .email2{  
            margin-left: 30px;  
            font-size: 26px;
        }
    .poczta{
       height: 24px; margin-left: -80px;
       }
}

@media screen and (max-width: 320px){
    .BI-graphics{
        margin-left: -200px;
        margin-top: -280px;
        margin-bottom: -250px;
        transform: scale(0.28);
    }

  
  
    .text-box{
        font-size: 28px;
    }

    .about-text{
        font-size: 16px; 
        }

        .banana-ring{
            margin-left: 2px;
            padding: 5%;            
            margin-top: 170px;
            transform: scale(0.7);
        }

        .banana-ring2{
            margin-left: 2px;
            padding: 5%;            
            margin-top: -250px;
            transform: scale(0.7);
        }

        .heading{
            font-size: 24px;
            margin-bottom: 5px;
        }

        .instructions{
            font-size: 24px;
            padding-right: 50px;
        }

        .contact-box{
            margin-left: -10px;
            margin-bottom: 60px;
            margin-top: 15px; 

           
        }

        .col-lg-3{
            padding: 5px;
        } 
        .g-mb-30{
            padding: 5px;
        }

        .email2{  
            margin-left: 30px;  
            font-size: 26px;
        }
    .poczta{
       height: 20px; margin-left: -80px;
       }
}