.startScreen
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
    height: 100%;
    background-color:black;
    z-index:10;
}



.mainmenu
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
    height: 100%;
    background-color:black;

    background-image:url('../images/menu_back.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
}


.infoMenu{
	position: absolute;
    right: 30px;
    top: 20px;
    height: 64px;
    width: 120px;
    font-family: Typewond_demi;
    font-size: 36px;
    line-height: 57px;
    color: white;
	text-align: center;
	text-shadow: 3px 3px 4px rgb(30,30,30);
	background-image:url('../images/backButton.png');
}


.route_title
{
    position: absolute;
    top:50px;
    left:50%;
    width:800px;
    margin-left:-400px;
    height:auto;
    text-align:center;
	font-size:48px;
    line-height: 100px;
	color:white;
	font-family: Typewond_demi; 
}

.instructions{
    position: absolute;
    top:145px;
    left:50%;
    width:1000px;
    margin-left:-500px;
    height:auto;
    text-align:center;
	font-size:36px;
    line-height: 100px;
	color:white;
	font-family: Typewond_demi;
}

.buttonContainer{
    position: absolute;
    top:280px;
    left:50%;
    margin-left:-500px;
    width:1000px;
    height: 432px;
}

.startMenuButton{
    position: absolute;
	width:1000px;
    height:84px;
	font-size:36px;
    line-height: 100px;
	color:white;
	font-family: Typewond_demi;
    text-align: center;
    background-image:url('../images/redLine.png');
    background-position-y: top;
    background-repeat:repeat-x;
}

#start_0{
    top:0px;
}

#start_1{
    top:84px;
}

#start_2{
    top:168px;
}

#start_3{
    top:252px;
}

#start_4{
    top:336px;
}


.menuInfoBtn{
    position:absolute;
    right:30px;
    top:28px;
    width:42px;
    height: 42px;
    font-family: Typewond_demi;
    font-size:32px;
    line-height: 35px;
    border-radius:50%;
    border:2px solid white;
    z-index:10;
}

.lastmenuline{
	position:absolute;
    top:420px;
	width:1000px;
    height:12px;
	background-image:url('../images/redLine.png');
}



.startButtonContainer{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-321px;
    margin-top:-48px;
    width:642px;
    height:96px;
}


.startButton{
    position: absolute;
    width:642px;
    height:84px;
    font-size:24px;
    line-height: 100px;
    color:white;
    font-family: Typewond_demi;
    text-align: center;
    background-image:url('../images/redLine.png');
    background-position-y: top;
    background-repeat:repeat-x;
}

.startlastmenuline{
    position:absolute;
    top:84px;
    width:642px;
    height:12px;
    background-image:url('../images/redLine.png');
}



.routeOverlay{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: auto;
	background: rgba(0,0,0,0.8); /* Just to visualize the extent */
    z-index:20;
    display:none;
}

.routeImage{

    position: absolute;
    top:50%;
    left:50%;
    width:590px;
    height: 800px;
    margin-top:-400px;
    margin-left:-295px;
    background-image:url('../images/route_0.jpg');
    background-size: contain;
}







  
@media screen and (min-width: 1025px) and (max-width: 1200px)  {

    .mainMenuContainer{
        position: absolute;
        top:50%;
        left:50%;
        width: 642px;
        height: 690px;
        margin-left: -321px;
        margin-top: -345px;
    }

    .route_title
    {
        position: absolute;
        top:40px;
        left:50%;
        width:512px;
        margin-left:-256px;
        height:auto;
        text-align:center;
        font-size:30px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
    }

    .instructions{
        position: absolute;
        top:96px;
        left:50%;
        width:642px;
        margin-left:-321px;
        height:auto;
        text-align:center;
        font-size:24px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
    }


    .buttonContainer{
        position: absolute;
        top:200px;
        left:50%;
        margin-left:-321px;
        width:642px;
        height: 432px;
    }
    
    .startMenuButton{
        position: absolute;
        width:642px;
        height:84px;
        font-size:24px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }


    .lastmenuline{
        position:absolute;
        top:420px;
        width:642px;
        height:12px;
        background-image:url('../images/redLine.png');
    }

    .startButtonContainer{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-321px;
        margin-top:-48px;
        width:642px;
        height:96px;
    }


    .startButton{
        position: absolute;
        width:642px;
        height:84px;
        font-size:24px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }
    
    .menuInfoBtn{
        position:absolute;
        right:30px;
        top:28px;
        width:42px;
        height: 42px;
        font-family: Typewond_demi;
        font-size:32px;
        line-height: 35px;
        border-radius:50%;
        border:2px solid white;
        z-index:10;
    }

    .startlastmenuline{
        position:absolute;
        top:84px;
        width:642px;
        height:12px;
        background-image:url('../images/redLine.png');
    }






    
    .routeImage{

        position: absolute;
        top:50%;
        left:50%;
        width:413px;
        height: 560px;
        margin-top:-280px;
        margin-left:-206px;
        background-image:url('../images/route_0.jpg');
        background-size: contain;

        font-family: Typewond_demi;
        font-size:18px;
        line-height: 36px;
        color:white;
        text-align: center;
        text-shadow: 2px 2px 2px rgb(30,30,30);

    }




}


@media screen and (min-width:1201px) and (max-width:1600px) {


    .mainMenuContainer{
        position: absolute;
        top:50%;
        left:50%;
        width: 786px;
        height: 690px;
        margin-left: -392px;
        margin-top: -345px;
    }


    .route_title
    {
        position: absolute;
        top:0px;
        left:50%;
        width:628px;
        margin-left:-314px;
        height:auto;
        text-align:center;
        font-size:38px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
    }

    .instructions{
        position: absolute;
        top:100px;
        left:50%;
        width:785px;
        margin-left:-379px;
        height:auto;
        text-align:center;
        font-size:28px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
    }


    .buttonContainer{
        position: absolute;
        top:250px;
        left:50%;
        margin-left:-379px;
        width:785px;
        height: 432px;
    }
    
    .startMenuButton{
        position: absolute;
        width:785px;
        height:84px;
        font-size:28px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }


    .lastmenuline{
        position:absolute;
        top:420px;
        width:785px;
        height:12px;
        background-image:url('../images/redLine.png');
    }

  

    .startButtonContainer{
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-48px;
        margin-left:-379px;
        width:785px;
        height:96px;
    }



	
	
    .startButton{
        position: absolute;
        width:785px;
        height:84px;
        font-size:28px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }

    .menuInfoBtn{
        position:absolute;
        right:30px;
        top:28px;
        width:42px;
        height: 42px;
        font-family: Typewond_demi;
        font-size:32px;
        line-height: 35px;
        border-radius:50%;
        border:2px solid white;
        z-index:10;
    }


    .startlastmenuline{
        position:absolute;
        top:84px;
        width:785px;
        height:12px;
        background-image:url('../images/redLine.png');
    }





    
    .routeImage{

        position: absolute;
        top:50%;
        left:50%;
        width:413px;
        height: 560px;
        margin-top:-280px;
        margin-left:-206px;
        background-image:url('../images/route_0.jpg');
        background-size: contain ;

        font-family: Typewond_demi;
        font-size:18px;
        line-height: 36px;
        color:white;
        text-align: center;
        text-shadow: 2px 2px 2px rgb(30,30,30);
    }


}

@media screen and (min-width:1601px) and (max-width:2000px) {

    .mainMenuContainer{
        position: absolute;
        top:50%;
        left:50%;
        width: 1000px;
        height: 690px;
        margin-left: -500px;
        margin-top: -345px;
    }

    
 
    .route_title
    {
        position: absolute;
        top:0px;
        left:50%;
        width:800px;
        margin-left:-400px;
        height:auto;
        text-align:center;
        font-size:48px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
    }

    .instructions{
        position: absolute;
        top:100px;
        left:50%;
        width:1000px;
        margin-left:-500px;
        height:auto;
        text-align:center;
        font-size:36px;
        line-height: 100px;
        color:white;
        font-family: Typewond_demi;
    }

    .buttonContainer{
        position: absolute;
        top:250px;
        left:50%;
        margin-left:-500px;
        width:1000px;
        height: 432px;
    }
    
    .startMenuButton{
        position: absolute;
        width:1000px;
        height:84px;
        font-size:36px;
        line-height: 92px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }

	.lastmenuline{
        position:absolute;
        top:420px;
        width:1000px;
        height:12px;
        background-image:url('../images/redLine.png');
    }


    
    .startButtonContainer{
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-48px;
        margin-left:-500px;
        widows: 1000px;
        height:96px;
    }



    .startButton{
        position: absolute;
        width:1000px;
        height:84px;
        font-size:36px;
        line-height: 92px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }

    .menuInfoBtn{
        position:absolute;
        right:30px;
        top:28px;
        width:42px;
        height: 42px;
        font-family: Typewond_demi;
        font-size:32px;
        line-height: 35px;
        border-radius:50%;
        border:2px solid white;
        z-index:10;
    }

    .startlastmenuline{
        position:absolute;
        top:84px;
        width:1000px;
        height:12px;
        background-image:url('../images/redLine.png');
    }

    .routeImage{

        position: absolute;
        top:50%;
        left:50%;
        width:590px;
        height: 800px;
        margin-top:-400px;
        margin-left:-295px;
        background-image:url('../images/route_0.jpg');
        background-size: contain;

        font-family: Typewond_demi;
        font-size:22px;
        line-height: 40px;
        color:white;
        text-align: center;
        text-shadow: 2px 2px 2px rgb(30,30,30);

    }

}




@media screen and (min-width:2001px) and (max-width:3000px) {


    .mainMenuContainer{
        position: absolute;
        top:50%;
        left:50%;
        width: 1300px;
        height: 897px;
        margin-left: -650px;
        margin-top: -448px;
    }

    
 
    .route_title
    {
        position: absolute;
        top:0px;
        left:50%;
        width:1300px;
        margin-left:-650px;
        height:auto;
        text-align:center;
        font-size:65px;
        line-height: 130px;
        color:white;
        font-family: Typewond_demi;
    }

    .instructions{
        position: absolute;
        top:130px;
        left:50%;
        width:1300px;
        margin-left:-650px;
        height:auto;
        text-align:center;
        font-size:48px;
        line-height: 130px;
        color:white;
        font-family: Typewond_demi;
    }

    .buttonContainer{
        position: absolute;
        top:325px;
        left:50%;
        margin-left:-650px;
        width:1300px;
        height: 562px;
    }
    
    .startMenuButton{
        position: absolute;
        width:1300px;
        height:110px;
        font-size:48px;
        line-height: 118px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }

	.lastmenuline{
        position:absolute;
        top:546px;
        width:1300px;
        height:12px;
        background-image:url('../images/redLine.png');
    }



    .startButtonContainer{
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-62px;
        margin-left:-650px;
        widows: 1300px;
        height:124px;
    }



    .startButton{
        position: absolute;
        width:1300px;
        height:110px;
        font-size:48px;
        line-height: 118px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }


    .menuInfoBtn{
        position:absolute;
        right:40px;
        top:36px;
        width:55px;
        height: 55px;
        font-family: Typewond_demi;
        font-size:42px;
        line-height: 46px;
        border-radius:50%;
        border:2px solid white;
        z-index:10;
    }


    .startlastmenuline{
        position:absolute;
        top:110px;
        width:1300px;
        height:12px;
        background-image:url('../images/redLine.png');
    }


    #start_0{
        top:0px;
    }
    
    #start_1{
        top:110px;
    }
    
    #start_2{
        top:220px;
    }
    
    #start_3{
        top:330px;
    }
    
    #start_4{
        top:440px;
    }

    .routeImage{

        position: absolute;
        top:50%;
        left:50%;
        width:805px;
        height: 1100px;
        margin-top:-550px;
        margin-left:-295px;
        background-image:url('../images/route_0.jpg');
        background-size: contain;

        font-family: Typewond_demi;
        font-size:28px;
        line-height: 50px;
        color:white;
        text-align: center;
        text-shadow: 2px 2px 2px rgb(30,30,30);
    }


}


@media screen and (min-width:3001px)  {

    .infoMenu{
        position: absolute;
        right: 60px;
        top: 40px;
        height: 128px;
        width: 240px;
        font-family: Typewond_demi;
        font-size: 72px;
        line-height: 114px;
        color: white;
        text-align: center;
        text-shadow: 6px 6px 8px rgb(30,30,30);
        background-image:url('../images/backButton_XL.png');
    }



    .mainMenuContainer{
        position: absolute;
        top:50%;
        left:50%;
        width: 2000px;
        height: 1380px;
        margin-left: -1000px;
        margin-top: -690px;
    }

    
 
    .route_title
    {
        position: absolute;
        top:0px;
        left:50%;
        width:1600px;
        margin-left:-800px;
        height:auto;
        text-align:center;
        font-size:96px;
        line-height: 200px;
        color:white;
        font-family: Typewond_demi;
    }

    .instructions{
        position: absolute;
        top:200px;
        left:50%;
        width:2000px;
        margin-left:-1000px;
        height:auto;
        text-align:center;
        font-size:72px;
        line-height: 200px;
        color:white;
        font-family: Typewond_demi;
    }

    .buttonContainer{
        position: absolute;
        top:500px;
        left:50%;
        margin-left:-1000px;
        width:2000px;
        height: 864px;
    }
    
    .startMenuButton{
        position: absolute;
        width:2000px;
        height:168px;
        font-size:72px;
        line-height: 186px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }

    .menuInfoBtn{
        position:absolute;
        right:60px;
        top:52px;
        width:84px;
        height: 84px;
        font-family: Typewond_demi;
        font-size:64px;
        line-height: 70px;
        border-radius:50%;
        border:4px solid white;
        z-index:10;
    }

	.lastmenuline{
        position:absolute;
        top:840px;
        width:2000px;
        height:12px;
        background-image:url('../images/redLine.png');
    }


    
    .startButtonContainer{
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-96px;
        margin-left:-1000px;
        width: 2000px;
        height:192px;
    }



    .startButton{
        position: absolute;
        width:2000px;
        height:168px;
        font-size:72px;
        line-height: 186px;
        color:white;
        font-family: Typewond_demi;
        text-align: center;
        background-image:url('../images/redLine.png');
        background-position-y: top;
        background-repeat:repeat-x;
    }

    .startlastmenuline{
        position:absolute;
        top:168px;
        width:2000px;
        height:12px;
        background-image:url('../images/redLine.png');
    }



    #start_0{
        top:0px;
    }
    
    #start_1{
        top:168px;
    }
    
    #start_2{
        top:336px;
    }
    
    #start_3{
        top:512px;
    }
    
    #start_4{
        top:672px;
    }


    .routeImage{

        position: absolute;
        top:50%;
        left:50%;
        width:1033px;
        height: 1400px;
        margin-top:-700px;
        margin-left:-516px;
        background-image:url('../images/route_0.jpg');
        background-size: contain;

        font-family: Typewond_demi;
        font-size:40px;
        line-height: 70px;
        color:white;
        text-align: center;
        text-shadow: 2px 2px 2px rgb(30,30,30);
    }


}