body, html {
	height: 100%;
	background-repeat: no-repeat;    /*background-image: linear-gradient(rgb(12, 97, 33),rgb(104, 145, 162));*/
	background:black;
	position: relative;
	direction: rtl;
}

body {
	background-image: url(../elements/back2.jpg);
    background-position: center;
    background-size: cover;
}

#particles-js{
  	width: 100%;
  	height: 100%;
  	background-size: cover;
  	background-position: 50% 50%;
  	position: fixed;
  	top: 7vh;
  	z-index:1;
}

.main-body {
	height: 93vh;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}

.plate-div {
	position: absolute;
    width: 100%;
    height: 80vh;
    top: 50%;
    margin-top: -40vh;
}

.inner-palte {
	position: relative;
    width: 1300px;
    z-index: 2;
    border-radius: 100% 0;
    margin: 0 auto;
}

.sun-img {
	width: 100%;
	overflow: hidden;
    border-radius: 77% 0;
}

.flag-div {
	position: absolute;
    width: 12%;
}

.flag-div:hover .flag-img {
	width:35%;
	transition: 0.25s
}

.flag-div a {
	text-decoration: none;
}

.flag-img {
	width: 32%;
	display: block;
	margin: 0 auto;
	transition: 0.25s
}

.flag-title {
	text-align: center;
    margin: 0;
    margin-top: 2px;
    color: white;
}

.flag-link {
	text-align: center;
    margin: 0;
    font-size: 13px;
    color: #1e81ef;
}

.uae {
	top: 13%;
    right: 30%;
}

.egy {
	top: 17%;
    right: 10%;
}

.sau {
	top: 36%;
    right: 28%;
}

.bah {
	top: 50%;
    right: 39%;
}

.sud {
	top: 50%;
    right: 23%;
}

.alg {
	top: 60%;
    right: 12%;
}

.kuw {
	top: 58%;
    right: 54%;
	
}

.mor {
	top: 66%;
    right: 40%;
}

.oman {
	top: 43%;
    right: 71%;
}

.jor {
	top: 36%;
    right: 80%;
}

.leb {
	top: 64%;
    right: 83%;
}

.iraq {
	top: 76%;
    right: 65%;
}

.tuni {
	top: 90%;
    right: 50%;
}

.mauri {
	top: 90%;
    right: 86%;
}

.mobile-div {
	margin: 3% 0;
	display: none;
	position: absolute;
    z-index: 2;
    width: 80vw;
    height: 90%;
    right: 50%;
    margin-right: -40vw;
    overflow: scroll;
}

.country-div {
	height: 70px;
	overflow: hidden;
	cursor: pointer;
}

.mob-flag-div {
	width: 20%;
    float: right;
}

.mob-flag-img {
	width: 80%;
}

.mob-detail-div {
	width: 80%;
	height: 100%;
    float: right;
    color: white;
    display: flex;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
}

.mob-name {
	margin: 0;
	font-size: 22px;
}

.mob-link {
	margin: 0;
}

.separate {
	border: 0.5px solid #9c9c9c;
    width: 80%;
    float: left;
}

@media screen and (max-width: 1440px) {
	.inner-palte {
		width: 1200px;
	}
}

@media screen and (max-width: 1200px) {
	.inner-palte {
		width: 1000px;
	}
	
	.flag-title {
		font-size: 0.7em;
	}
	
	.flag-link {
		font-size: 0.7em;
	}
}

@media screen and (max-width: 1000px) {
	.inner-palte {
		width: 800px;
	}
}

@media screen and (max-width: 800px) {
	.inner-palte {
		width: 600px;
	}
	
	.flag-title {
		font-size: 0.5em;
	}
	
	.flag-link {
		font-size: 0.5em;
	}
}

@media screen and (max-width: 600px) {
	.inner-palte {
		width: 500px;
	}	
}

@media screen and (max-width: 500px) {
	.mobile-div {
		display: block;
	}
	
	.plate-div {
		display: none;
	}
}