/* сброс стилей браузера */
* {
  box-sizing: border-box; 
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* конец кода сброса стилей браузера */



body {
    background: url("images/Фон8.png") no-repeat fixed center;
    background-color: black ;
    background-size: 100% 100%;
    
    
    /*background-attachment: fixed;
    background-color: black; /*hsl(180,70%,70%);*/
    /*background-image: grey; *//*linear-gradient(45deg, hsl(10,99%,50%) , yellow 40%, white 70%, hsl(180,40%,1%));*/
}

h1{
    font-size: 4em;
    color: lightgrey;
}

h2 {
        font-size: 4em;
        color: white;
}

p2 {
        font-size: 1.5em;
        color: hsl(0,1%,75%);
}

p3 {
    font-size: 1em;
    color: hsl(0,1%,75%);
    text-align: center;
    
}

header {
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color:black;
    color: white;
    text-align: center;
    text-shadow: 4px 4px 6px rgba(0,0,0,.75);

    /*margin: 20px auto;
    width: 50%;
    text-align: center;*/
}

.CategoriiInfo {
    border-radius: 4px;
    border: inset 3px grey ;
    background-color: hsl(180,10%,70%);
    background-image: linear-gradient(135deg, hsl(18,40%,5%) 5%, hsl(18,40%,5%));
    background-position: center;
    box-shadow: 0 0 10px 20px hsla(10,5%,17%,.5);
    max-width: 1024px;
    margin: 30px auto;
}

.Categorii {
    /*border-radius: 4px;
    border: inset 3px grey ;*/
    background-color: black;
    /*background-image: linear-gradient(135deg, hsl(18,40%,9%) 5%, white 60%, hsl(18,40%,9%));*/
    background-position: center;
    /*box-shadow: 0 0 10px 20px hsla(10,5%,17%,.5);*/
    max-width: 1024px;
    margin: 30px auto;
    
   
    
}

.Categorii figure {
    
    /*border-radius: 24px;/*8*/
    /*border: inset 8px grey ;
    border-left: inset 2px black ;
    border-right: inset 2px black ;
    border-bottom: inset 2px black ;
    border-right-color: green;
    /*background-image: linear-gradient(90deg, white 5%, black 45%, black
    60%, black);*/
    background:  url(images/кнопки/КнопкаДвигатель.png) no-repeat center; /*url(images/металл5.png);*/
    background-size: 95% 95%;
    display: inline-block;
    width: 300px;
    height: 300px;
    margin: 10px;
    left: 8px;
    position: relative;
    
    /*box-shadow: 0 0 20px 8px hsla(10,5%,17%,.5),10px 0 24px 4px hsla(10,5%,17%,.8);*/
}



.Categorii figure img {
        position: absolute;
        margin: 12px auto;
        top: 10px;
        right: 20px;
        /*background-color: hsl(48,99%,50%);*/
        
}

.Categorii figcaption {
        
        position: absolute;
        margin: 0px auto;
        top: 0px;
        right: 0px;
        opacity: 0;
	    transition: opacity 0.55s ease-out;
}

.Categorii figure:hover figcaption {
	opacity: 1;
}

.Categorii figure:active {
    background:  url(images/кнопки/КДвигательНажата.png) no-repeat center; /*url(images/металл5.png);*/
    background-size: 95% 95%;
    display: inline-block;
    width: 300px;
    height: 300px;
    margin: 10px;
    left: 8px;
    position: relative;
}

.Categorii figure:hover html {
    background-image: linear-gradient(90deg, hsl(10,99%,50%) , yellow 40%, white 70%, hsl(180,40%,1%));
}



#logoPictureContainer {
    width:100%; 
    height:100%;
    position: relative;
}

#imageLogoPicture{
    position: relative;
    top: 0px;
    left: 0px;
}

.Categorii utochnenie {
    
    width: 1024px;
    height: 199px;
}

.Categorii contact {
    /*border-radius: 24px;/*8*/
    /*border: inset 8px grey ;
    border-left: inset 2px black ;
    border-right: inset 2px black ;
    border-bottom: inset 2px black ;
    border-right-color: green;
    /*background-image: linear-gradient(90deg, white 5%, black 45%, black
    60%, black);*/
    background-color:  #CCFFFF; 
    background-size: 95% 95%;
    display: inline-block;
    width: 1024px;
    height: 199px;
    margin-top: 40px;
    position: relative;
    bottom:0px;
   /* background-color: black;*/
    /*box-shadow: 0 0 20px 8px hsla(10,5%,17%,.5),10px 0 24px 4px hsla(10,5%,17%,.8);*/
}

.Categorii line {
    /*border-radius: 24px;/*8*/
    /*border: inset 8px grey ;
    border-left: inset 2px black ;
    border-right: inset 2px black ;
    border-bottom: inset 2px black ;
    border-right-color: green;
    /*background-image: linear-gradient(90deg, white 5%, black 45%, black
    60%, black);*/
     
    background-size: 95% 95%;
    display: inline-block;
    width: 1024px;
    height: 3px;
    margin-top: 80px;
    position: relative;
    bottom:0px;
   /* background-color: black;*/
    /*box-shadow: 0 0 20px 8px hsla(10,5%,17%,.5),10px 0 24px 4px hsla(10,5%,17%,.8);*/
}

.Categorii gruppa {
    /*border-radius: 24px;/*8*/
    /*border: inset 8px grey ;
    border-left: inset 2px black ;
    border-right: inset 2px black ;
    border-bottom: inset 2px black ;
    border-right-color: green;
    /*background-image: linear-gradient(90deg, white 5%, black 45%, black
    60%, black);*/
     
    background-size: 95% 95%;
    display: inline-block;
    width: 200px;
    height: 100px;
    margin-top: 27px;
    margin-right: 132px;
    margin-left: 116px;
    position: relative;
   /* background-color: black;*/
    /*box-shadow: 0 0 20px 8px hsla(10,5%,17%,.5),10px 0 24px 4px hsla(10,5%,17%,.8);*/
}

.Categorii gruppa img{
    /*border-radius: 24px;/*8*/
    /*border: inset 8px grey ;
    border-left: inset 2px black ;
    border-right: inset 2px black ;
    border-bottom: inset 2px black ;
    border-right-color: green;
    /*background-image: linear-gradient(90deg, white 5%, black 45%, black
    60%, black);*/
     
    position: absolute;
    margin: 12px auto;
    top: 10px;
    right: 20px;
    
   /* background-color: black;*/
    /*box-shadow: 0 0 20px 8px hsla(10,5%,17%,.5),10px 0 24px 4px hsla(10,5%,17%,.8);*/
}

.Categorii grupcaption{
        position: absolute;
        margin: 0px auto;
        top: 0px;
        right: 0px;
        opacity: 0;
	    transition: opacity 0.55s ease-out;
    
}


.Categorii gruppa:hover grupcaption {
    opacity: 1;
}

footer {

        margin: 0px -12px 0 0;
        
        color: black;
        text-align: center;
}