@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.body{
	width:100%;
	height:100%;
    background:#222 url(bg.png) no-repeat top right;
}
.wrapper{
    position:absolute;
    width:80vw;
    height:600px;
    top:15vh;
    left:50%;
    transform: translateX(-50%);  
    font-family: Verdana;
    font-size:11px;
    background-color: none; 
}
.images img{
    display:none;
    position:absolute;
    left:50%;
    transform: translateX(-50%);  
    top:6px;
}
.circleBig{
    position:absolute;
    width:40vw;
    height:100%;
    top:0px;
    left:50%;
    transform: translateX(-50%);  
    background-color: none;
}

.circleBig img{
    position:absolute;
    left:50%;
    transform: translateX(-50%);  
    background:transparent url(../images/circlemenu/circlebg.png) no-repeat top left;
    background-color: none;
}


.menu_circle{
    position:absolute;
   	width:400px;
    height:400px;
    top:0px;
    left:-25%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 4.0em;
	color:#FFF;
    background-color: none;
    z-index:999;
}

.menu_circle a{
    position:relative;
    font-size: 2em;
	line-height: 10px;
	color:#FFF;
    top:20px;
	padding:0px 0px 0px 0px;
	text-decoration:none;
    text-shadow: -1px 0 0.4px #222, 0 1px 0.4px #222, 1px 0 0.4px #222, 0 -1px 0.4px #222;	
}


.menu_circle ul {
	margin-top:0px;
	
}
.menu_circle ul li {
	display: inline-block;
	font-size: 1.0em;
	color:#FFF;
}
.menu_circle ul li a{
	display: inline-block;
    float:left;
	font-size: 2.0em;
	color:#FFF;
	text-decoration:none;
    text-shadow: -1px 0 0.4px #222, 0 1px 0.4px #222, 1px 0 0.4px #222, 0 -1px 0.4px #222;	
}

.circle{
    position:absolute;
    width:336px;
    height:336px;
    margin-top:0;
    margin-left:0%;
    z-index:10;
    opacity:0;
    transform: translate(-190%,40%);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    background-color: none;
}
.description{
    position: relative;
    width:100%;
    margin:20px auto;
    text-align:center;
    background-color: none;
}
.description ul{
    list-style:none;
    text-align:center;
}
.description ul a{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 3.5em;
    line-height:40px;
    font-weight:bold;
    color:#35CBF9;
    opacity:0.77;
    text-decoration:none;
    text-transform:uppercase;
    text-shadow: -1px 0 0.4px #222, 0 1px 0.4px #222, 1px 0 0.4px #222, 0 -1px 0.4px #222;	
}
.description ul a:hover{
    color:#35CBF9;
	opacity:1.0;

}

.thumbs a img{
    border:3px solid #f9f9f9;
    -moz-box-shadow:1px 1px 2px #999;
    -webkit-box-shadow:1px 1px 2px #999;
    box-shadow:1px 1px 2px #999;
}

@media screen and (max-width: 2560px) { 

.wrapper{

}



}

@media screen and (max-width: 1960px) { 

.wrapper{

    
}

.circle{
    margin-top:0;
    margin-left:0%;
    transform: translate(-180%,40%);
}

.description ul a{
    font-size: 3.5em;
    line-height:40px;
    color:#35CBF9;	
}

}


@media screen and (max-width: 1700px) { 

.wrapper{


}

.menu_circle{
   	width:300px;
    height:400px;
    top:0px;
    left:-25%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 3.0em;
}

.circle{
    margin-top:0;
    margin-left:0%;
    transform: translate(-150%,40%);
}

.description ul a{
    font-size: 3.5em;
    line-height:40px;
    color:#35CBF9;	
}

}


@media screen and (max-width: 1400px) { 

.wrapper{

}

.menu_circle{
   	width:300px;
    height:400px;
    top:0px;
    left:-33%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 3.0em;
}

.circle{
    margin-top:0;
    margin-left:0%;
    transform: translate(-140%,50%);
}

.description ul a{
    font-size: 3.5em;
    line-height:40px;
    color:#35CBF9;	
}



}


@media screen and (max-width: 1300px) { 

.wrapper{

}
.menu_circle{
   	width:300px;
    height:400px;
    top:0px;
    left:-50%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 3.0em;
}

.circle{
    margin-top:0;
    margin-left:0%;
    transform: translate(-115%,40%);
}

}

@media screen and (max-width: 1040px) { 

.wrapper{
    width:90vw;

}

.menu_circle{
   	width:300px;
    height:400px;
    top:0px;
    left:-50%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 2.0em;
}

.circle{
    margin-top:0;
    margin-left:0%;
    transform: translate(-110%,15%);
}

.description ul a{
    font-size: 2.6em;
    line-height:40px;
    color:#35CBF9;	
}


/*
.images img{
    display:none;
    position:absolute;
    width:340px;
    height:340px;
    left:6px;
    top:46px;
}
.circleBig{
    position:absolute;
    width:77%;
    height:77%;
    top:40px;
    left:0px;
    background:transparent url(../images/circlemenu/circlebg.png) no-repeat top left;
    background-size: 350px 350px;
}
*/



}

@media screen and (max-width: 860px) { 

.wrapper{
    top: 20vh;

}

.menu_circle{
   	width:300px;
    height:400px;
    top:-12vh;
    left:-50%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 3em;
}

.circle{
    margin-top:0;
    margin-left:0%;
    transform: translate(-110%,45%);
}

.description ul a{
    font-size: 4em;
    line-height:50px;
    color:#35CBF9;	
}

/*
.images img{
    display:none;
    position:absolute;
    width:290px;
    height:290px;
    left:6px;
    top:86px;
}

.circleBig{
    position:absolute;
    width:77%;
    height:77%;
    top:80px;
    left:0px;
    background:transparent url(../images/circlemenu/circlebg.png) no-repeat top left;
    background-size: 300px 300px;
}
    */



}

@media screen and (max-width: 600px) { 

.wrapper{
    top: 13vh;

}

.menu_circle{
   	width:300px;
    height:400px;
    top:-3vh;
    left:-55%;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 2.8em;
}

.circle{
    width: 100vw;
    margin-top:0;
    margin-left:0%;
    transform: translate(-125%,60%);
}

.description{
    position: relative;
    width:100%;
    margin:20px auto;
    text-align:center;
}

.description ul a{
    font-size: 3.5em;
    line-height:50px;
    color:#35CBF9;	
}

.description ul li{
    margin: 4px 0px;
    background-color: #FFF;
}


/*

.images img{
    display:none;
    position:absolute;
    width:420px;
    height:420px;
    left:6px;
    top:236px;
}

.circleBig{
    position:absolute;
    width:100%;
    height:100%;
    top:230px;
    left:0px;
    background:transparent url(../images/circlemenu/circlebg.png) no-repeat top left;
    background-size: 430px 430px;
}
*/


}