/*google*/
@import  url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

/*fontsquirrel*/
@font-face {
   font-family: 'montserratthin';
   src: url('../fonts/montserrat-variablefont_wght-webfont.eot');
   src: url('../fonts/montserrat-variablefont_wght-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/montserrat-variablefont_wght-webfont.woff2') format('woff2'),
        url('../fonts/montserrat-variablefont_wght-webfont.woff') format('woff'),
        url('../fonts/montserrat-variablefont_wght-webfont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

/*everythingfonts*/

@font-face {
   font-family: 'MontserratVariableFont_wght';
   src: url('../fonts/MontserratVariableFont_wght.eot');
   src: url('../fonts/MontserratVariableFont_wght.eot') format('embedded-opentype'),
        url('../fonts/MontserratVariableFont_wght.woff2') format('woff2'),
        url('../fonts/MontserratVariableFont_wght.woff') format('woff'),
        url('../fonts/MontserratVariableFont_wght.ttf') format('truetype'),
        url('../fonts/MontserratVariableFont_wght.svg#MontserratVariableFont_wght') format('svg');
}

html, body, div, span, applet, 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%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*************************************************************************************/
html {
   scroll-behavior: smooth;
}

.mainContent {
    width: 1200px;
    padding: 20px 30px;
    margin: 0 auto;
    color: #485E88; 
    background: wheat; 
    font-size: 16px; 
    font-weight: 600; 
    text-align: justify; 
    line-height: 24px; 
    border: 5px solid black;
    position: relative;
}    

h1 {
   text-align: center; 
   color: blue;
   font-size: 28px;
}

h2 {
   text-align: center; 
   color: blue;
   font-size: 22px;
}

h3 {
   color: blueviolet;
   font-size: 18px;
}

h2 + p, h3 + p {
   font-size: 16px;
   border: 2px solid white;
   font-style: italic;
}

a {
   color: #485E88;
   font-size: 20px;
}

.gotoTop {
    font-size: 16px;
    padding: 0 100px;
 }

#songs_fcdk, #songs_fcdk2 {
   text-align: center; 
   color: blue;
   font-size: 22px;
}
/***********************************************/
.wrapper_cell, .wrapper_block {
   width: 1200px;
   margin: 0 auto; 
   background: wheat; 
   border: 5px solid black;
   padding: 20px 30px;
   font-size: 30px;
   font-weight: 600; 
}

.one, .two, .three {
   width: 400px;
   display: table-cell;
   outline: 1px solid green;
}


.second_one, .second_two {
   display: table-cell;
}

.second_one {
   width: 800px;
}

.second_two {
   width: 400px;
}

.four, .five, .six, .seven, .nine, .twelve, .eight, .thirteen, .fourteen, .fifteen, .sixteen, .seventeen  {
   outline: 1px solid green;
}

.third_one, .twelve {
   display: table-cell;
   width: 600px;
}

.ten, .eleven {
   display: table-cell;
   outline: 1px solid green;
   width: 300px;
}

.fourth_two {
   width: 800px;
}

.seventeen {
   width: 400px;
}

.fourteen, .fourth_one {
   width: 400px;
   display: table-cell;
}

.fourth_two, .seventeen {
   display: table-cell;
}

.first_1, .second_1, .third_1, .fourth_1, .fourth_one_1 {
   font-size: 0;
}

.one_1, .two_1, .three_1 {
   font-size: 30px;
   width: 400px;
   display: inline-block;
   outline: 1px solid green;
}

.second_one_1, .second_two_1 {
   display: inline-block;
}

.four_1, .five_1 {
   outline: 1px solid green;
   width: 800px;
   font-size: 30px;
}

.six_1, .seven_1, .eight_1 {
   outline: 1px solid green;
   width: 400px;
   font-size: 30px;
}

.third_one_1, .twelve_1 {
   display: inline-block;
   width: 600px;
}
 .nine_1 {
   outline: 1px solid green;
   font-size: 30px;
}

.ten_1, .eleven_1 {
   outline: 1px solid green;
   font-size: 30px;
   width: 300px;
   display: inline-block;
}

.twelve_1 {
   outline: 1px solid green;
   font-size: 30px;
}

.fourth_two_1, .seventeen_1  {
   display: inline-block;
}

.fourth_two_1{
   width: 800px;
}

.seventeen_1 {
   width: 400px;
}

.thirteen_1 {
   font-size: 30px;
   outline: 1px solid green;
}

.fourteen_1, .fourth_one_2 {
   display: inline-block;
   width: 400px;
   font-size: 30px;
}

.fourteen_1, .fifteen_1, .sixteen_1 {
   outline: 1px solid green;
}

.seventeen_1 {
   outline: 1px solid green;
   font-size: 30px;
}

/*___________________________________________________________________*/

.wrapper_div {
   width: 1200px;
   margin: 0 auto; 
   background: red; 
   border: 5px solid black;
   padding: 20px 30px;
   font-size: 30px;
   font-weight: 600; 
}

.clr {
   clear: left;
}

.one_f, .two_f, .three_f, .four_f, .five_f, .six_f, .seven_f, .eight_f, .nine_f, .ten_f, .eleven_f, .twelve_f, .thirteen_f, .fourteen_f, .fifteen_f, .sixteen_f, .seventeen_f {
   outline: 1px solid darkblue;
} 

.one_f, .two_f, .three_f, .fourteen_f, .fourth_one_f {
   width: 400px;
   float: left;
}

.second_one_f, .fourth_two_f  {
   width: 800px;
}

.second_two_f, .seventeen_f{
   width: 400px;
}

.second_one_f, .second_two_f, .fourth_two_f, .seventeen_f {
   float: left;
}

.third_one_f, .twelve_f {
   width: 600px;
   float: left;
}

.ten_f, .eleven_f {
   width: 300px;
   float: left;
}

/*---------------------------------------------------*/

.wrapper_after, .wrapper_flex, .wrapper_columns, .wrapper_areas {
   width: 1200px;
   margin: 0 auto; 
   background: sandybrown; 
   border: 5px solid black;
   padding: 20px 30px;
   font-size: 30px;
   font-weight: 600;
}

.restriction:after {
   content: "";
   display: block;
   clear: left;
}

.one_a, .two_a, .three_a, .four_a, .five_a, .six_a, .seven_a, .eight_a, .nine_a, .ten_a, .eleven_a, .twelve_a, .thirteen_a, .fourteen_a, .fifteen_a, .sixteen_a, .seventeen_a {
   outline: 1px solid white;
} 

.one_a, .two_a, .three_a, .fourteen_a, .fourth_one_a  {
   width: 400px;
   float: left;
}

.second_one_a, .fourth_two_a {
   width: 800px;
}

.second_two_a, .seventeen_a {
   width: 400px;
}

.second_one_a, .second_two_a, .fourth_two_a, .seventeen_a {
   float: left;
}

.third_one_a, .twelve_a {
   width: 600px;
   float: left;
}

.ten_a, .eleven_a {
   width: 300px;
   float: left;
}

/**********************************************************************************/

.one_af, .two_af, .three_af, .fourteen_af, .fourth_one_af, .seventeen_af, .second_two_af  {
   flex: 0 1 400px;
   outline: 1px solid white;
}

.thirteen_af, .fourteen_af, .fifteen_af, .sixteen_af, .seventeen_af, .four_af, .five_af, .six_af, .seven_af, .eight_af, .nine_af, .ten_af, .eleven_af, .twelve_af {
   outline: 1px solid white;
}

.second_one_af, .fourth_two_af {
   flex: 0 1 800px;
}

.first_af, .second_af, .fourth_af, .fourth_three_af, .third_af, .third_two_af {
   display: flex;
}

.third_one_af, .twelve_af {
   flex: 0 1 600px;
}

.ten_af, .eleven_af {
   flex: 0 1 300px;
}


/***************************************************************************/

.text {
   outline: 1px solid white;
}

.first_ac {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

.second_ac {
   display: grid;
   grid-template-columns: 800px 400px;
}

.third_two_ac {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

/*****************************************************************/

.thirteen_aa, .fourteen_aa, .fifteen_aa, .sixteen_aa, .seventeen_aa, .nine_aa, .ten_aa, .eleven_aa, .twelve_aa, .one_aa, .two_aa, .three_aa, .four_aa, .five_aa, .six_aa, .seven_aa, .eight_aa {
   outline: 1px solid white;
}

.first_aa{
   display: grid;
   grid-template-areas: "A B C";
}

.one_aa {
   grid-area: A;
}

.two_aa {
   grid-area: B;
}

.three_aa {
   grid-area: C;
}

.second_aa {
   display: grid;
   grid-template-areas: "A1 B1";
}

.second_one_aa {
   grid-area: A1;
}

.second_two_aa {
   grid-area: B1;
}

.third_aa {
   display: grid;
   grid-template-areas: "A2 B2";
}

.third_one_aa {
   grid-area: A2;
}

.twelve_aa {
   grid-area: B2;
}

.third_two_aa {
   display: grid;
   grid-template-areas: "A3 A4";
}

.ten_aa {
   grid-area: A3;
}

.eleven_aa {
   grid-area: A4;
}

.fourth_aa {
   display: grid;
   grid-template-areas: "A5 B3";
}

.fourth_two_aa {
   grid-area: A5;
}

.seventeen_aa {
   grid-area: B3;
}

.fourth_three_aa {
   display: grid;
   grid-template-areas: "A6 A7";
}

.fourteen_aa {
   grid-area: A6;
}

.fourth_one_aa {
   grid-area: A7;
}

/******************************************************************************/
.mainContent_photo {
   width: 1200px;
   padding: 20px 0px;
   margin: 0 auto;
   color: darkblue; 
   background: wheat; 
   border: 5px solid black;
   font-weight: 600; 
   }

#ukrPremierLiga, #lChampions {
   text-align: center;
   font-size: 0;
}

.photo { 
   display: inline-block;
   position: relative;
}

.insert {
   background: red; 
   width: 100%;
   height: 50px;
   position: absolute;
   top: 50%;
   left: 0;
   margin-top: -25px;
   line-height: 50px;
   font-size: 30px;
   visibility: hidden;
}

.photo:hover > .insert {
   visibility: visible;
}

.left_bar {
   display: flex;
   position: fixed;
   outline: 1px solid darkblue;
   top: 50%;
   margin-top: -80px;
   background: pink;
   width: 120px;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.left_bar a {
   width: 100%;
   outline: 1px solid darkblue;
   padding: 10px 0;
   text-align: center;
}

/**************************************************************************/


.menu {
   text-align: center;
   font-size: 0;
   line-height: 24px;
   margin-bottom: 20px;
   z-index: 5;
   position: relative;
}

.menu > li {
   display: inline-block;
   position: relative;
   font-size: 14px;
}

.menu a {
   text-decoration: none;
   text-transform: uppercase;
   color: black;
   display: block;
   font-family: 'Montserrat', sans-serif;
}

.block {
   position: absolute;
   padding: 10px 0 0;
   top: 0;
   left: 0;
   width: 100%;
   pointer-events: none;
   opacity: 0;
   transition: all .5s linear;
}

.menu > li:hover .block {
   pointer-events: all;
   top: 100%;
   opacity: 100%;
}

.menu li:last-child ul a {
   font-size: 10px;
   background-color: aliceblue;
   color: black;
   padding: 3px 0px;
}

.block li a {
   font-family: 'montserratthin';
}

.block > .b_float, .block > .b_grid {
   position: relative;
}

.b_float > ul {
   width: 120px;
   position: absolute;
   right: 100%;
   bottom: 0;  
   padding: 0 10px 0 0;
   overflow: hidden;
   height: 0;
   transition: height .3s steps(2, end);
}

.b_grid > ul {
   width: 120px;
   position: absolute;
   left: 100%;
   top: 0;
   padding: 0 0 0 10px;
   overflow: hidden;
   height: 0;
   transition: height .3s steps(2, end);
}

.b_float ul li a, .b_grid ul li a {
   font-family: 'MontserratVariableFont_wght';
}

.menu li:hover > a, .menu li:last-child ul a:hover {
   color: white;
   background-color: #485E88;
}

.b_float:hover > ul, .b_grid:hover > ul {
   height: 60px;
}
/**********************************/

.menu > li:nth-child(-n+2) a:before, 
.menu > li:last-child > a:before,
.b_float > a:before, .b_grid > a:before,
.socialnetwork li a:before, .networks li a:before {
   content: "";
   background: url('../img/css_sprites.png');
   position: absolute;
   top: 0;
   left: 0;
   width: 30px;
   height: 30px;
}

.menu > li:nth-child(-n+2) a:before{
   background-position: -90px 0;
}

.menu > li:nth-child(2) a:before {
   background-position: -120px 0;
}

.menu > li:last-child > a:before {
   background-position: -150px 0;
   left: auto;
   right: 0;
}

.b_float > a:before {
   background-position: -180px -30px;
}

.b_grid > a:before {
   background-position: -180px 0;
   left: auto;
   right: 0;
}
/******************HOVER******************/

.b_float:hover > a:before {
   background-position: -180px 0;
}

.b_grid:hover > a:before {
   background-position: -180px -30px;
}

.menu > li:last-child:hover > a:before {
   background-position: -150px -30px;
}

/******************************************/

.menu > li > a {
   padding: 4px 27px 4px 45px;
}

.menu > li:last-child > a {
   padding: 4px 45px 4px 27px;
}

/***********SOCIAL NETWORK************/

.socialnetwork {
   font-size: 0;
   text-align: center;
}

.socialnetwork li {
   display: inline-block;
   font-size: 14px;
}

.socialnetwork li a{
   display: block;
   padding: 2px 20px 13px 49px;
   position: relative;
}

.socialnetwork li a:before {
   transition: all .3s ease;
   position: absolute;
   left: 0;
   top: 0;
}

.socialnetwork li+li a:before, .networks li+li a:before  {
   background-position: -30px 0;
}

.socialnetwork li+li+li a:before, .networks li+li+li a:before {
   background-position: -60px 0;
}

.networks li+li+li+li a:before {
   background-position: 0 -60px;
}

.networks li+li+li+li:hover a:before {
   background-position: 0 -90px;
}

.socialnetwork li:hover a:before, .networks li:hover a:before { 
   background-position: 0 -30px;
}

.socialnetwork li+li:hover a:before, .networks li+li:hover a:before  {
   background-position: -30px -30px;
}

.socialnetwork li+li+li:hover a:before, .networks li+li+li:hover a:before  {
   background-position: -60px -30px;
}

/************************************/

.right_bar { 
   position: fixed;
   width: 0;
   height: 230px;
   top: calc(50% - 115px);
   right: 0;
   transition: all 1.5s ease;
   border-left: 25px solid orange;
   animation: shake 1.5s 1.5s infinite;
}

@keyframes shake {
   0% { transform: rotate(0deg); }
   25% { transform: rotate(5deg); }
   50% { transform: rotate(0eg); }
   75% { transform: rotate(-5deg); }
   100% { transform: rotate(0deg); }
 }

.right_bar p {
   position: absolute;
   width: 230px;
   bottom: -25px;
   left: 0;
   transform: rotate(-90deg);
   transform-origin: 0 0;
   text-transform: uppercase;
   margin-left: -25px;
   text-align: center;
   font-size: 25px;
   color: blue;
}

.networks {
   width: 0;
   height: 100%; 
   background: pink;
   overflow: hidden;
   transition: all 1.5s ease;
}

.right_bar:hover {
   right: 225px;
   animation: none;
}

.right_bar:hover .networks {
   width: 225px;
}

.networks li {
  border: 3px solid #485E88;
  width: 30px;
  overflow: hidden;
}

.networks li a {
  display: block;
  padding: 30px 0 0 30px;
}

.networks li a:before {
  transition: all .3s ease;
  transform: rotate(-45deg);
}

.networks li:last-child {
  transform: translate(126px, -13px) rotate(45deg);
}

.networks li+li+li {
  transform: translate(97px, 53px) rotate(45deg);
}

.networks li+li {
  transform: translate(66px, 59px) rotate(45deg);
}

.networks li:first-child {
  transform: translate(97px, 65px) rotate(45deg);
}
/******************************************************************/

.first_graf, .gear, .nut, .ship {
   width: 1200px;
   height: 250px;
   display: flex;
   position: relative;
   margin: 0 auto;
   padding: 200px 0 ;
   justify-content: center;
   align-items: center;
}

.first_graf {
   background: #6ae0ce;
}

.clincher {
   width: 300px;
   height: 120px;
   border: 8px solid grey;
   position: absolute;
   right: 155px;
   background: repeating-linear-gradient(45deg, transparent, transparent 20px, gray 20px, grey 40px);
}

.clincher_cirkul {
   height: 50px;
   width: 50px;
   border-top: 8px solid grey;
   border-right: 8px solid grey;
   border-bottom: 8px solid grey;
   position: absolute;
}

.clincher_cirkul::after {
   content: "";
   height: 150px;
   width: 150px;
   position: absolute;
   border-left: 8px solid grey;
   border-top: 8px solid grey;
   border-right: 8px solid grey;
   border-top-left-radius: 100%;
   top: -158px;
}

.clincher_cirkul::before {
   content: "";
   height: 150px;
   width: 150px;
   position: absolute;
   border-left: 8px solid grey;
   border-bottom: 8px solid grey;
   border-bottom-left-radius: 100%;
   border-right: 8px solid grey;
   top: 51px;
}
/***********************************GEAR***************************/
.gear {
   background: #b8b63f;
}

.hexagon {
	width: 120px;
	height: 180px;
	background: radial-gradient(circle, transparent 55px, grey 0);
	position: relative;
}

.hexagon:before, .hexagon:after {
	content: "";
	position: absolute;
	top: 0; 
	left: -55px;
	border-top: 90px solid transparent;
	border-right: 55px solid gray;
	border-bottom: 90px solid transparent;
}

.hexagon:after {
   transform: rotate(180deg); 
   left: auto;
   right: -55px;
}

/*************************************************/

.nut {
   background: #6ba04d;
}

.nut_1 {
   width: 400px;
   height: 80px;
   position: absolute;
   border-radius: 0 25px 25px 0;
   transform: rotate(45deg);
   background: radial-gradient(circle at 90%, transparent 5%, gray 5%);
}

.nut_1::before {
   content: "";
   position: absolute;
   width: 150px;
   height: 160px;
   right: 95%;
   top: -50%;
   background-image: linear-gradient(to bottom, gray 25%, transparent 25%),
      linear-gradient(to top, gray 25%, transparent 25%),
      radial-gradient(ellipse at left, transparent 55%, gray 50%);
   border-radius: 50% 15% 15% 50%;
}

/***********************ship*******************************/

 .ship {
   background: #b09e52;
}

.ship_1 {
   position: relative;
   width: 300px;
   height: 60px;
   background: blue;
}

.ship_1::before {
   content: "";
   position: absolute;
   left: -60px;
   top: -40px;
	border-top: 50px solid transparent;
	border-right: 60px solid blue;
	border-bottom: 50px solid transparent;
}

.ship_1::after {
   content: "";
   position: absolute;
   border-bottom: 40px solid blue;
	border-left: 45px solid transparent;
	height: 0;
	width: 100px;
   right: -35%;
   transform: rotate(-48deg);
   bottom: 47px;
}

.ship_2 {
   height: 232px;
   position: absolute;
   border-left: 10px solid  #6ae0ce;
   bottom: 55%;
   left: 50%;   
}

.ship_2::before {
   content: "";
   position: absolute;
   height: 172px;
   width: 172px;
   border-radius: 50%;
   background-image: radial-gradient(circle at right, transparent 58%,  yellow 30%);
   left: -103px;
   top: 27%;
}

.ship_2::after {
   content: "";
   position: absolute;
   height: 130px;
   transform: rotate(45deg);
   width: 130px;
   border-radius: 13% 0% 13% 0% / 13% 0% 13% 0%;
   background-image: radial-gradient(10em at bottom left, transparent 119px,  red 58px);
   bottom: 8%;
   left: -58px;
}

.ship_3{
   position: absolute;
   height: 0;
   width: 38px;
   border-top: 23px solid blue;
   border-bottom: 23px solid blue;
   border-right: 13px solid transparent;
   top: 61px;
   right: 45%;
}
/*/////////////////////////FORM/////////////////////*/

.mainform {
   position: relative;
   display: flex;
   margin: 0 auto;
   justify-content: center;
}


#Name {
   width: 200px;
   height: 40px;
   background: #033157;
   font-size: 20px;
   font-family: cursive;
   font-weight: 600;
   border-radius: 2% / 20%;
   margin-bottom: 5px;
   color: white;
   font-family: Georgia, 'Times New Roman', Times, serif;
}

#Name:hover {
   background: rgb(46, 12, 124);
}

.box_select {
   position: relative;
   width: 206px;
   height: 46px;
   line-height: 2;
   background: #033157;
   display: flex;
   overflow: hidden;
}

select {
   flex: 1;
   padding: 3px;
   color: #FFFFFF;
   cursor: pointer;
   border: 0 !important;
   background: #033157;
   background-image: none;
   outline: none;
   appearance: none;
   box-shadow: none;
   font-size: 20px;
}


.box_select::after {
   content: "\e7cd";
   font-family: 'Material Icons';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 14px;
   pointer-events: none;
   background: #021525;
   cursor: pointer;
   transition: .25s all ease-in;
   font-size: 23px;
}

.box_select:hover::after {
   color: darkgoldenrod;
}

/* switch */
.switch_container {
   position: relative;
   display: flex;
   align-content: stretch;
   justify-content: space-between;
   align-items: center;
   width: 206px;
   height: 24px;
   cursor: pointer;
}

label, .number {
   margin-top: 7px;
}

label > p {
   font-size: 20px;
}

.slider {
   position: absolute;
   cursor: pointer;
   width: 50px;
   height: 24px;
   top: 0;
   right: 0;
   background-color: #033157;
   transition: .4s;
   border-radius: 34px;
 }

 .slider:before {
   position: absolute;
   content: "";
   height: 20px;
   width: 20px;
   left: 2px;
   bottom: 2px;
   background-color: white;
   transition: .4s;
   border-radius: 50%;
 }

 input:checked + .slider {
   background-color: darkgoldenrod;
 }
 
 input:checked + .slider:before {
   transform: translateX(26px);
 }

/*NUMBER*/

.too {
   position: relative;
   margin-top: 25px;
   margin-bottom: 25px;
   display: flex;
   align-items: center;
}

input[type="number"] {
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
   position: absolute;
   width: 199px;
   background: #033157;
   color: #FFFFFF;
   font-size: 29px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
   opacity: 0%;
   margin: 5px;
}


.button {
   position: absolute;
   background: darkgoldenrod;
   width: 15px;
   text-align: center;
   pointer-events: none;
   height: 15px;
}
 
#plus {
   left: 89%;
   top: -15px;
   line-height: 18px;
}
 
#minus {
   left: 89%;
   top: 0;
   line-height: 13px;
}