@font-face {
    font-family: 'Museo Sans';
    src: url("font/museosans.otf") format("opentype");
}
* {
    margin: 0;
    padding: 0;
    font-family: 'Museo Sans';
    font-style: normal;
    font-weight: 400;
    outline:none !important;
}
body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1d1d1d;
}
#video-container {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121112;
    cursor: pointer;
}
#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#container {
    position: relative;
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: 100%;
    height: 100%;
}
#map-container {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    overflow: hidden; 
}
#logo{
    position: absolute;
    z-index: 2;
    display: block;
    top: 1.9%;
    left: 2.1%;
    width: 9.948vw;
    height: auto;
}
#logo img{
   position: relative;
   width: 100%;
   height: auto;
}
#world-map {
    position: relative; 
    width: 100%;
    height: auto;
    display: block;
}

.continent {
   position: relative;
   /*display: none;*/
}
.continent.active {
    display: inline-block;
 }
 map{
    position: absolute;
 }
map area{
    cursor: pointer;
}
.world {
    position: absolute;
    padding: 4%;
    display: none;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #EE7F00;
    font-weight: 600;
    font-size: 1.25vw;
    letter-spacing: 0.05em;
    line-height: 1vw;
}
.world.active {
    display: block;
}
.world span{
    color: #FFFFFF;
    font-size: 0.833vw;
}
#Europe{
    top: 10.5%;
    left: 43.1%;
}
#Africa{
    top: 34.9%;
    left: 42.8%;
}
#America{
    top: 18.1%;
    left: 4.2%;
}
#Latin{
    top: 56.5%;
    left: 14.7%;
}
#Asia{
    top: 22.6%;
    left: 68.8%;
}
#Oceania{
    top: 65.2%;
    left: 83.4%;
}
#content-info {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 33.333333%;
    height: 100%;
    background: #FFFFFF;
}
#content-info.active {
    display: block;
}
#content-info #back-world{
    position: relative;
    display: block;
    background: #878588;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.833vw;
    line-height: 1.111vw;
    text-align: center;
    height: 2.778vw;
    line-height: 2.778vw;

}
#continent-info {
    position: relative;
    display: block;
    background: #EEEEEE;
    color: #878588;
    font-size: 0.833vw;
    line-height: 1.111vw;
    text-align: center;
    height: 5.556vw;
    line-height: 5.556vw;
}
#continent-info span{
    position: absolute;
    top:0px;
    display: block;
    width: 100%;
    font-size: 0.833vw;
    text-align: center;
    height: 2.222vw;
    line-height: 2.222vw;
}
#continent-info .selected-info p{
    font-size: 1.667vw;
    font-weight: 600;
    letter-spacing: 0.06em;
}
#school-info,#tat-info {
    position: relative;
    display: block;
    color: #878588;
    font-size: 0.833vw;
    text-align: center;
}
#school-info span,#tat-info span{
    position: relative;
    display: block;
    width: 100%;
    font-size: 0.833vw;
    text-align: center;
    height: 2.222vw;
    line-height: 2.222vw;
}
#school-info .selected-info p{
    color:#EE7F00;
    font-size: 6.25vw;
    font-weight: 600;
    line-height: 6.3vw;
}
#tat-info .selected-info p{
    color:#EE7F00;
    font-size: 5vw;
    font-weight: 600;
    line-height: 4vw;
}
#tat-info .selected-info span{
    color:#EE7F00;
    font-size: 1.5vw;
    font-weight: 600;
}
#partner-info {
    position: relative;
    margin: auto;
    width: 87%;
    display: block;
    margin-top: 2vw;
    border: none;
    border-top: 1px;
    color: #878588;
    border-top: #878588 solid 1px;
}
#partner-info span{
    position: relative;
    display: block;
    width: 100%;
    font-size: 0.833vw;
    text-align: center;
    height: 3.222vw;
    line-height: 3.222vw;
    text-transform: uppercase;
}
#partner-info .selected-info img{
    width: 100%;
}
#country-info {
    position: relative;
    display: block;
    /*background: #EEEEEE;*/
    color: #878588;
    font-size: 0.833vw;
    line-height: 1.111vw;
    text-align: center;
    height: 6.944vw;
    line-height: 6.944vw;
}
#country-info span{
    position: absolute;
    top: calc(50% - 1.111vw);
    display: block;
    width: 100%;
    font-size: 0.833vw;
    text-align: center;
    height: 2.222vw;
    line-height: 2.222vw;
}
#country-info span.active{
    top: 8%;
}
.selected-info .arrow-left{
    position: absolute;
    display: block;
    width: 1.667vw;
    height: 1.667vw;
    background: url(img/Arrow_Left.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: calc(50% - 0.833vw);
    left: 2vw;
    z-index: 1;
    cursor: pointer;
}
.selected-info .arrow-right{
    position: absolute;
    display: block;
    width: 1.667vw;
    height: 1.667vw;
    background: url(img/Arrow_Right.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: calc(50% - 0.833vw);
    right: 2vw;
    z-index: 1;
    cursor: pointer;
}
#country-info .selected-info p{
    text-transform: uppercase;
    color: #3E3D40;
    font-size: 2.083vw;
    font-weight: 600;
    letter-spacing: 0.02em;
}
#see-all-button{
    display: block;
    width: 50%;
    height: 2.5vw;
    border-radius: 4px;
    border: none;
    margin: auto;
    margin-top: 1vw;
    font-size: 0.9vw;
    background: #EE7F00;
    cursor: pointer;
    color: #3E3D40;
}
#see-all-button:hover {
   color:#FFFFFF;
}
/*Modal*/
.modal-overlay {
    display: none;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    background-color: white;
    padding: 6vw;
    border-radius: 8px;
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.close-button {
    position: absolute;
    top: 2%;
    right: 2%;
    cursor: pointer;
    color: #878588;
    font-size: 1.6vw;
}

.modal-left, .modal-right {
    width: 45%;
}
.modal-left {
   text-align: center;
}
.modal-left h2{
    font-size: 2.083vw;
    font-weight: 300;
    line-height: 2.344vw;
    color: #EE7F00;
    text-align: left;
    margin-bottom: 1vw;

 }
 .modal-left p{
    font-size: 1.042vw;
    font-weight: 400;
    line-height: 1.458vw;
    color: #3E3D40;
    text-align: left;


 }
.modal-right form {
    display: flex;
    flex-direction: column;
}

.modal-right form input,
.modal-right form button {
    box-sizing: border-box;
    width: 100%;
    height: 3vw;
    border-radius: 4px;
    border: 1px solid #C3C2C5;
    padding: 0 0.417vw 0 0.417vw;
    margin-bottom: 1.5vw;
    font-size: 0.9vw;
    color: #878588;
}
.modal-right form button {
    background: #EE7F00;
    cursor: pointer;
    color: #3E3D40;
    border: none;
}
.modal-right form button:hover {
    color:#FFFFFF;
 }