@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);


html, body{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: Roboto Condensed,sans-serif;
    
}

#app{
   min-width: 700px;
   min-height: 900px;
   height: 100%;
   background-image: url('../img/samolet2.jpg')!important;
   background-repeat: no-repeat;
   position: relative;
   background-position: 10% -300px!important;
   transition: 0.4s;
}

.project{
    width:500px;
    color:#fff;
    font-size:23px;
    line-height:30px;
    margin:30px 0;
    letter-spacing:2px;
    position:absolute;
    left:40%;
}

.project b{
    font-size:37px;
}

.moving_map{
    display: none;
    top:1150px;
    margin:0 15px 0 85%;
    height: 90px;
    width: 90px;
    background-image: url('../img/course.png');
    background-size: cover;
    position: absolute;
    transform: rotate(180deg);
    transition: 0.4s;
    cursor: pointer;

}

.logo1{
    position: absolute;
    width: 200px;
    bottom: 0;
    max-width: 30vw;
    margin:25px 30px;
}

.point, .point_off{
    min-height: 30px;
    min-width: 25px;
    position: absolute;
    cursor: pointer;
    -webkit-transition: .15s;
    transition: .15s;
}

#p4 {
    left: calc(10% + 36px);
    top: 570px;
}

#p4:before {
    -webkit-transform: rotate(217deg);
    -moz-transform: rotate(217deg);
    -ms-transform: rotate(217deg);
    -o-transform: rotate(217deg);
    transform: rotate(217deg);
}

#p5 {
    left: calc(10% + 72px);
    top: 618px;
}

#p5:before {
    -webkit-transform: rotate(265deg);
    -moz-transform: rotate(265deg);
    -ms-transform: rotate(265deg);
    -o-transform: rotate(265deg);
    transform: rotate(265deg);
}

#p7 {
    left: calc(10% + 63px);
    top: 605px;
}

#p7:before {
    -webkit-transform: rotate(211deg);
    -moz-transform: rotate(211deg);
    -ms-transform: rotate(211deg);
    -o-transform: rotate(211deg);
    transform: rotate(211deg);
}

#p8 {
    left: calc(10% + 53px);
    top: 595px;
}

#p8:before {
    -webkit-transform: rotate(212deg);
    -moz-transform: rotate(212deg);
    -ms-transform: rotate(212deg);
    -o-transform: rotate(212deg);
    transform: rotate(212deg);
}

#p10 {
    left: calc(10% + 43px);
    top: 581px;
}

#p10:before {
    -webkit-transform: rotate(256deg);
    -moz-transform: rotate(256deg);
    -ms-transform: rotate(256deg);
    -o-transform: rotate(256deg);
    transform: rotate(256deg);
}

#p12 {
    left: calc(10% + 62px);
    top: 642px;
}

#p12:before {
    -webkit-transform: rotate(325deg);
    -moz-transform: rotate(325deg);
    -ms-transform: rotate(325deg);
    -o-transform: rotate(325deg);
    transform: rotate(325deg);
}

#p16 {
    left: calc(10% + 32px);
    top: 617px;
}

#p16:before {
    -webkit-transform: rotate(51deg);
    -moz-transform: rotate(51deg);
    -ms-transform: rotate(51deg);
    -o-transform: rotate(51deg);
    transform: rotate(51deg);
}

.logo1mob {
    display: none;
}

.reklama {
	display: none;
}

.vhod {
    width: 100px;
    height: 50px;
    position: absolute;
    background: orange;
    text-align: center;
    vertical-align: middle;
    color: white;
    border: white solid 1px;
    margin: 16px;
    transition: 0.2s;
    top: 0;
}

.vhod:hover {
    background: #ffc04d;
}

.vhod:active {
    margin-top: 18px;
}

@media (max-width: 1000px)
{
		.reklama {
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 1307px;
    background: url(/img/reklama.png);
    height: 131px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    }
    .reklamaimg {
    	width: 80%;
    }
}

@media (max-width: 1024px)
{
    
    #aper{
        height:100%!important;
        min-height: 1280px!important;
        background-position: 10% 0!important;
    }
    #app {
        height:100%!important;
        min-height: 1280px!important;
        background-position: 10% 0!important;
    }
    .point-wrapper {
        top: 300px;
    }
    .project{
        left:30%!important;
    }
    .logo1{
        width:150px!important;
        margin:15px!important;
        top:1150px;
    }
    .moving_map{
        display: block;
    }
    #p1{
        top:785px;
    }
}


@media (max-width: 800px)
{
    .logo1 {
        display: none;
    }
    .logo1mob {
    display: block;
    position: absolute;
    width: 200px;
    bottom: 0;
    max-width: 30vw;
    margin:25px 30px;
		}



}