body {
	padding:0;
	margin:0;
	background: rgb(21,20,103);
	background: linear-gradient(90deg, rgba(21,20,103,1) 0%, rgba(11,10,54,1) 0%, rgba(5,4,23,1) 50%, rgba(13,12,61,1) 100%, rgba(21,20,103,1) 100%);
	/*background: rgb(21,20,103);
	background: linear-gradient(90deg, rgba(21,20,103,1) 0%, rgba(5,4,23,1) 0%, rgba(11,10,54,1) 47%, rgba(9,8,41,1) 100%, rgba(10,9,46,1) 100%, rgba(13,12,61,1) 100%, rgba(21,20,103,1) 100%);*/
}
.bg {
	position:fixed;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background: rgba(10, 34, 62, 0.90);
	z-index:9;
}

.videOne {
	position: fixed;
	width: 50%;
	height: 100%;
	top:0;
	left:0;
	overflow:hidden;
}

.videoTwo {
	position: fixed;
	width: 50%;
	height: 100%;
	top:0;
	right:0;
	overflow:hidden;
}

.main {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	height:100vh;
	z-index:10;
	overflow:hidden;
}
.main > .col {
	display: inline-block;
	width: 50%;
}

.main > .col > .inner {
	display:table;
	width:100%;
	height:100%;
	text-align:center;
}

.main > .col > .inner > .inner-logo {
	display:table-cell;
	vertical-align:middle;
}

.main > .col > .inner > .inner-logo >.front-back {
	background-color: transparent;
	width: 235px;
	height: 200px;
	perspective: 1000px;
	display: block;
	margin: 0 auto;
}

.main > .col > .inner > .inner-logo > .front-back > .front-back-inner{

	position: relative;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.main > .col > .inner > .inner-logo >.front-back > .front-back-inner > .inner-front {
	background-color: #bbb;
	color: black;
}

.main > .col > .inner > .inner-logo >.front-back:hover .front-back-inner {
	transform: rotateY(180deg);
}

.main > .col > .inner > .inner-logo >.front-back > .front-back-inner > .inner-back {
	color:#fff;
	background: #f16b27;
	border-radius: 100%;
	transform: rotateY(180deg);
	width: 200px;
	height: 200px;
	display:table;

}

.inner-front, .inner-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: table-cell;
}

.main > .col > .inner > .inner-logo >.front-back > .front-back-inner > .inner-back > .name {
	font-family:'Titillium Web', sans-serif;
	display:block;
	text-align:center;
	color:#fff;
	display: table-cell;
	vertical-align: middle;
}

.main > .col > .inner > .inner-logo >.front-back > .front-back-inner > .inner-back > .name span {
	display:block;
	font-weight: 600;
}

.main > .col > .inner > .inner-logo >.front-back > .front-back-inner > .inner-back > .name a {
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    border: solid 1px;
    padding: 5px;
    border-radius: 30px;
    min-width: 110px;
    margin-top: 15px;
    font-size: 15px;
}

.main > .col > .inner > .inner-logo >.front-back > .front-back-inner > .inner-back > .name a:hover {
	border-color: #0a223e;
	color:#0a223e;
}

.main > .col img {
	max-height:200px;
}

.main > .logo {
	position: absolute;
	display: block;
	width: 110px;
	top: -35px;
	left: 50%;
	transform: translate(-50%,0%);
	z-index:1;
}

.main > .logo > img {
	width:auto;
	max-width:100%;
}

.main > .logo2 {
	position: absolute;
	display: block;
	width: 186px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index:1;
}

.main > .logo2 > img {
	width:auto;
	max-width:100%;
}

.main > .border {
	display: block;
	width: 0px;
	height: 100%;
	position: absolute;
	top: 10%;
	border-right: 1px solid #18385d;
	left: 50%;
	z-index: 0;
}

footer{
	position: absolute;
	display: block;
	text-align: center;
	top:96%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 9px;
	color: #ffffff;
	font-family:'Titillium Web', sans-serif;

}


/*#region Responsive Style By Beyza Erol */

@media only screen and (max-width: 992px) {
 	.main > .col {
 		display:block;
 		width:100%;
 	}
 }

/*#endregion */