html,body{
    margin:0;
    padding:0;
    background-color: black;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

a{
    color:white;
    /*text-decoration: none;*/

}

h1{
    margin:0;
    padding:0;
    z-index: 2;
}
.logo-main{
    margin-left:20px;
    margin-top:50px;
    padding: 0;

    height:100%;
    /* position: absolute;*/
    /*    display: flex;*/
    /*
    align-items: center;
    */
    /*
    justify-content: center;
    */

    font-family:poppins-bold;
    font-size:80pt;
}

.motto1{
  /*  position:absolute;*/
    display:inline-block;
    margin-left:20px;
    margin-top:20px;
    height:32px;
    
    background-color:#ff5757;
    
    text-decoration: none;
    text-transform: uppercase;
    font-size:20px;
    font-family: poppins500;
    height:30px;
}

.motto1 > span{
    margin:0 30px;
}


.motto2{
/*    position:absolute;*/
    margin-left:20px;
    margin-top:40px;
    margin-bottom:200px;
    font-family: poppins500;
    font-size:30pt;
}



.h1-page{
    background-color: black;
    position: fixed;
    display: block;
    left:0;
    top:0;
    width:100%;
    height:72px;
    
}
.h1-page div{
    margin:20px;
    padding: 5px;
    width:80px;
    height:20px;
    background-color: white;;
}

.h1-page div img{
    margin:0;
    padding: 0; 
    vertical-align: top;   
    width:82px;
    height: 20px;
}
.h1-main{
    margin:0;
    padding: 0;
    position: absolute;
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
  	visibility:hidden;
    /*background-image: url('../logo-dark.png');*/
}
h1 div{
    width:420px;
    /*height:100px;*/
}
h1 span{
    display:none;
}

.navbar{
    z-index: 2;
    position: absolute;
    display: block;
    top:20px;
    right: 20px;
/*    background-color:red;*/
    height:30px;
}

.navbar ul{
    list-style-type: none;
    margin:0;
    padding:0;
    display: inline;
}

.navbar ul li{
    margin:0;
    padding:0;
    display: inline;
    padding:1px 0;
    margin-left:40px;
}


.navbar ul li:last-child{
/*	background-color:red;*/
}


.navbar ul li a img {
    height:20px;
    vertical-align:middle;
    
}

.navbar ul li a{
    

    text-decoration: none;
    text-transform: uppercase;
    font-size:20px;
    font-family: poppins500;
}
.navbar ul li a:hover{
    /*
    color:black;
    background-color: white;
    */
    border-bottom: 3px solid white;
}
.current-page{
    /*
    color:black;
    background-color: white;
    */
    border-bottom: 3px solid #ff5757;
}
.redd{
    background-color: #ff5757;
    font-size: 24px;
}
.page{
    display:block;
/*    margin:102px 0 0 0;*/
    padding:20px;
/*    width: 100%;*/
    min-width: 800px;
    z-index: 1; 

}


.bg2{
    background-color:#222;
}


.grid-container{
    min-width:800px;
/*    width:100%;*/
    margin:20px 0 0 0;
    align-items: center;
    justify-content: center;
    display: block;

}

.about-container{
    margin:20px;
/*    background-color: #222;*/
    display: grid;
    grid-template-columns: 300px auto;    
}

.about-container > div{
    padding:20px;
}

.about-container > div:first-child{
    background-color: #ff5757;
    
    
    font-size: 36px;
    font-family: poppins300;
}

.about-container > div:nth-child(2){
    background-color: #222;
    margin-left: 10px;
    font-family: poppins300;
}

.about-container > div:nth-child(2) > p{
    margin-top:0;
}

.projects-list{
    width:750px;
    min-width:750px;
    min-height:1200px;
    display: grid;
/*    background-color: #222;*/
    grid-template-columns: auto auto auto;
    list-style-type: none;
    margin-left:auto;
    margin-right:auto;    
    padding:50px;
}

.projects-list li{
    margin:20px;
    width:204px;
    padding: 0;;
    display: inline-block;

}

.projects-list li a{
    margin:0;
    padding:0;
}

.projects-list li a img{
    margin:0;
    padding:0; 
}

.projects-list li a:hover{
    border-bottom:3px solid white;
    margin:0;
    padding:0;
}

.projectDesc{
    position:fixed;
    z-index:3;
/*    top:102px;*/
    top:20px;
    left:0;
    width:100%;
    height:90%;
    
    background-color: #222;    
/*    left:50%;*/
/*    margin-left:-425px;*/
    display:grid;
    grid-template-columns: 300px auto ;
    visibility:hidden;
    padding:20px;

}

.projectDesc > div{
    margin:20px;


}


.projectDesc > div:first-child{
    padding:20px;
    /*margin-left:20px;*/
    background-color: #ff5757;    
    font-size: 36px;
    font-family: poppins300;
    text-transform:lowercase;
}

.projectDesc > div:nth-child(2){
   /* margin: 0 20px 0 10px;*/
    background-color: #222;    
    font-size: 16px;
    font-family: poppins300;
}

.projectClose{
    display:block;
    width:30px;
    height:30px;
    font-size: 19px;
    text-align:center;
    background-color:#333;
    float:right;
    cursor:pointer;
    margin-right:40px;
}

.projectClose:hover{
    background-color:#444;
}


.contact-form{

    margin:20px;


    /*background-color: #131313;*/
    display: grid;
    grid-template-columns: 300px auto;


}

.contact-form > div{
    padding-left:20px;
}

.contact-form > div:first-child{
    background-color: #ff5757;
    
    
    font-size: 36px;
    font-family: poppins300;
}

.contact-form > div:nth-child(2){
    background-color: #222;
    margin-left: 10px;
    font-family: poppins300;
    font-size:14pt;

}

.contact-addresses > div{
    margin-bottom:40px;
}

.contact-addresses > div > p:first-child{ 
    text-transform:uppercase;
    font-size:20pt;
    margin:0 0 5px 0;
}

.contact-addresses > div:first-child{ 
	float:left;
}



.contact-addresses > div:nth-child(2){ 
	position:absolute;
	right:0;
	display:block;	
	margin-right:40px;
	text-align:right;
}

/*
.contact-form > form{
	margin-top:100px;
}
*/
.contact-field label{
    display: block;
    font-family: poppins300;
    clear:left;

}

.contact-field input, .contact-field textarea{
    color:#eeeeee;
    font-family: poppins300;
    /*padding:5px;*/

    font-size:14pt;
    width: 100%;
    height:20px;
    background-color: #222;    
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom: 1px solid #aaaaaa;
    margin:10px 0 20px 0;

}

.contact-field input{
    height:30px;
}

.contact-field textarea{
    height:100px;
}


.contact-field input:focus{
    border-bottom: 1px solid #cccccc;
}

.contact-field input:hover, .contact-field textarea:hover{

    background-color: #333;
}


#contact-submit{
    color:#eeeeee;
    padding:5px;
    font-family: poppins300;
    font-size:14pt;
    width:200px;
    height:auto;
    background-color: #333;    
    border: none;

}

#contact-submit:hover{
    background-color:#444;
}

.footer{
    z-index:2;
    text-align:center;
/*    background-color:red;*/
    color:#aaa;
    margin:15px;
    font-size:10pt;
    font-family:poppins300;
}