/**FONTS**/
@font-face {
	font-family: REFSAN;
	src: url(fonts/REFSAN.TTF)
}
@font-face {
	font-family: Garishing_Worse;
	src: url(fonts/Garishing_Worse_FREE.ttf)
}



html, body, p, ul{
	margin: 0;
	padding: 0;
}
body{
	background-color: #BFBFBF;
	font-family: 'Alegreya Sans', sans-serif;
}
h1, h2 {
	font-family: Roboto Slab;
}

.vebinar-main-wrapper{
}
/**TOP**/

.vebinar-top{
	background: url(img/chess_header.jpg) no-repeat center center;
	background-size: cover;
	position: relative;
}
.vebinar-top::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(-90deg, #44445754, #444457cc);
	z-index: 0;
}
.vebinar-top-content {
	color: #fff;
	padding: 1em 2em 2em;
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(12, minmax(auto, 63.3px));
	grid-template-rows: [head] 100px [body] minmax(500px, auto);
	grid-gap: 5em 24px;
	grid-template-columns: repeat(12, 1fr);
	max-width: 1000px;
	margin: auto;
	box-sizing: content-box;
}
.vebinar-top-header-logo {
    height: 60px;
    grid-column: 1 / span 6;
	align-self: center;
	z-index: 1;
}
.vebinar-top-header-text {
	grid-column: 8 / span 4;
	align-self: center;
	z-index: 1;
}
.vebinar-top-header-text p {
	border-left: 1px #fff dashed;
	padding: .3em 1em;
}
.vebinar-top-utp {
	z-index: 1;
	grid-row: body;
	grid-column: 1 / span 6;
}
.vebinar-top-utp-content p {
	font-weight: 400;
	margin: 0 0 1.4em;
	font-size: 18px;
}
.vebinar-top-utp-content h1 {
	font-weight: 800;
	font-size: 48px;
	margin: 18px 0 0;
}
.vebinar-top-utp-content h1 b {
	background: linear-gradient(45deg, #f46162, #f34f50);
	padding: 0 .2em;
}
.vebinar-top-utp-content h3 {
	font-family: Roboto;
	font-weight: 400;
	margin: 1em;
}
.vebinar-top-utp-content-mark {
	font-family: Open Sans;
	background: linear-gradient(45deg, #212237, #232325);
	padding: .3em 1em;
	display: inline-block;
}

.vebinar-top-form {
	z-index: 1;
	grid-row: body;
	grid-column: 8 / span 5;
}
.vebinar-top-form-hlabel {
	margin: 18px auto 30px;
	font-size: 20px;
}
.vebinar-top-form-content {
	margin: 30px auto;
	padding: 1.6em;
	border-radius: 3px;
	border: 1px dashed #fff;
	border-bottom: 1px dashed #f7aa11;
	background: linear-gradient(135deg, #444457, #232325);
}
.vebinar-top-form-content h4 {
	font-size: 22px;
	margin: 0;
}
.vebinar-top-form-content .cost {
	font-size: 22px;
	margin-top: .5em;
}
.cost-after, .cost-before {
	padding: .1em .4em;
	border-radius: 3px;
	color: #fff;
	font-weight: 600;
}
.cost-after {
	background: #1cd22c;
}
.cost-before {
	background: #f35455;
}
.vebinar-top-form-content button {
	background: #f7aa11;
	display: block;
	border: none;
	font-size: 24px;
	color: #ffffff;
	cursor: pointer;
	padding: .5em 2em;
	margin-top: 1.4em;
	border-radius: 3px;
}



.vebinar-program {
	background: #fff;
	display: grid;
	grid-template-columns: repeat(2, minmax(auto, 500px));
	grid-template-rows: auto 1fr;
	align-content: stretch;
	grid-gap: 2em 1.6em;
	justify-content: center;
	padding: 4em 2em;
}
.vebinar-program h2 {
	margin: 3.8em 0 0;
	grid-column: 2;
	grid-row: 1;
	font-size: 28px;
}
.vebinar-program img {
	width: 100%;
	grid-column: 1;
	grid-row: 1 / span 2;
}
.vebinar-program-content {
	grid-column: 2;
	grid-row: 2;
}
.vebinar-program-content ul {
	list-style: none;
	font-size: 18px;
	grid-column: 1 / span 2;
}
.vebinar-program-content li {
	margin-bottom: .4em;
}



.vebinar-leading {
	background: url(img/background_leaders.png) center center no-repeat;
    background-color: rgba(0, 0, 0, 0);
	background-size: cover;
	background-color: #6FAF37;
	color: #ffffff;
	display: grid;
	grid-template-columns: minmax(0, calc(500px - 1.5em)) minmax(0, calc(500px - 1.5em));
	justify-content: center;
	padding: 4em 3em;
	grid-gap: 2em 4em;
}
.vebinar-leading h2 {
	font-size: 28px;
	font-weight: 400;
	grid-column: 1 / span 2;
	margin: 1em auto 0;
	max-width: 1000px;
}
.vebinar-leading h3 {
	font-size: 24px;
}
.vebinar-leading ul {
	list-style-image: url(img/arrow.png);
}
.vebinar-leading li {
	font-family: arial;
	font-size: 18px;
	margin-bottom: .4em;
}
.vebinar-leading img {
	max-width: 330px;
	width: 100%;
	border-radius: 10px;
	box-shadow: 3px 3px 10px #3a710a;
}
.vebinar-leading-kis {
	max-width: 500px;
	margin-left: auto;
}
.vebinar-leading-mos {
	max-width: 500px;
}









.vebinar-application {
	background-color: #fff;
	padding: 4em 2em;
	text-align: center;
}
.vebinar-application-content {
	max-width: 800px;
	margin: auto;
}
.vebinar-application-content h2 {
	text-transform: uppercase;
	text-decoration: underline;
	margin: 1em 0 0;
	font-size: 32px;
}
.vebinar-application-content p {
	font-size: 24px;
	margin: 5px 0px 15px;
}
.vebinar-application-content button {
	border: none;
	margin-top: 20px;
	font-size: 24px;
	color: #ffffff;
	cursor: pointer;
	background: #f7aa11;
	padding: .6em 3em;
	background: #f7aa11;
	border-radius: 3px;
}








.vebinar-footer {
	padding: 3em 2em;
	background: linear-gradient(45deg, #212237, #232325);
	font-size: 16px;
	color: #ffffff;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(auto, 333.3px));
	grid-gap: 2em;
	justify-content: center;
}
.vebinar-footer h3 {
	margin: 0px;
	margin-bottom: 10px;
	color: #FEC400;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
}
.vebinar-footer ul {
	list-style: none;
	margin-bottom: 1em;
}
.vebinar-footer a {
	color: #ffffff;
	text-decoration: none;
}
.vebinar-footer a:hover {
	text-decoration: underline;
}
.vebinar-footer li {
	margin-bottom: .3em;
}
.vebinar-footer-projects img{
	margin-right: 5px;
	position: absolute;
}
.vebinar-footer-projects li{
	position: relative;
}
.icon-margin{
	margin-left: 30px;
}



.vebinar-copyrigts{
	padding: 2em;
	text-align: center;
	background-color: #222026;
	color: #fff;
	font-size: 14px;
	font-family: arial; 
}



/*Bubbly Button*/
.bubbly-button {
  --button-bg: #f7aa11;

  font-family: 'Helvetica', 'Arial', sans-serif;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--button-bg);
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(247, 170, 17, .3);
  z-index: 0;
}
.bubbly-button:focus {
  outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--button-bg) 20%, transparent 30%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--button-bg) 15%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--button-bg) 15%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%), radial-gradient(circle, var(--button-bg) 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
  transform: scale(0.9);
  background-color: #fa0;
  box-shadow: 0 2px 25px rgba(247, 170, 17, .16);
}
.bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}





@media only screen and (max-width: 800px){
	.vebinar-top-utp-content h1 {
		font-size: 40px;
	}
}



@media only screen and (max-width: 700px){
	.vebinar-top-content {
		grid-template-rows: 100px;
		grid-gap: 2em 24px;
	}
	.vebinar-top-header-logo, .vebinar-top-header-text {
		grid-column: 1 / -1;
	}
	.vebinar-top-utp {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.vebinar-top-form-hlabel {
		max-width: initial;
	}
	.vebinar-top-form-content {
		margin: 0 auto 30px ;
		max-width: initial;
	}
	.vebinar-top-form {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.vebinar-program h2 {
		grid-column: 1 / span 2;
		grid-row: 2;
		margin: 0;
	}
	.vebinar-program img {
		grid-column: 1 / span 2;
		grid-row: 1;
	}
	.vebinar-program-content {
		grid-column: 1 / span 2;
		grid-row: 3;
	}
	.vebinar-leading {
		grid-template-columns: 1fr;
	}
	.vebinar-leading h2 {
		grid-column: 1;
	}
	.vebinar-leading-kis {
		margin: auto;
	}
	.vebinar-footer {
		grid-template-columns: 1fr;
	}
}