@font-face {
    font-family: 'KabelCBold';
    src: url('../fonts/KabelCBold.eot');
    src: url('../fonts/KabelCBold.eot') format('embedded-opentype'),
         url('../fonts/KabelCBold.woff2') format('woff2'),
         url('../fonts/KabelCBold.woff') format('woff'),
         url('../fonts/KabelCBold.ttf') format('truetype'),
         url('../fonts/KabelCBold.svg#KabelCBold') format('svg');
}




.links{
    font-family:Arial;
    font-family:'Arial';
display:none;
 background-color:#667a99;
 opacity:0.6;
 width:200px;
 height:auto;
 margin:0;
 font-size:13px;
 padding-top:1px;

    
}


.links li{
margin-left:-20px;
}

.links ul{
 padding-bottom:10px;
}

.links p{
 margin:0;
 padding:2px;
}

.tel {
    position:absolute;
    top:10px;
    left:150px;
    z-index:4000;
    font-size:17px;
    color:white;
    font-family:Arial;
}	

a { text-decoration: none; color:white;}
a:link { text-decoration: none; color:white;}
a:active { text-decoration: none; color:white;}
a:visited { text-decoration: none;
  color:white;
}



li>a:hover { color:#ffecb3;
     font-size:14px;
     margin:0;
}

  
	.container {
		display:table;
	}
	.img {
		
		left:50px;
		display:inline-table;
		position:relative;
		top:10px;
	width:400px;
	opacity:0.85;
	-khtml-opacity:	.7;
	-moz-opacity:	0.7;
	filter: alpha(opacity=70);
	z-index:4000;
	}
/* ------------------------1024PX------------------------*/
	@media screen and (max-width: 1024px) {
	.img {
		top:5px;
		left:0px;
 -ms-transform: scale(0.8, 0.8); /* IE 9 */
  -webkit-transform: scale(0.8, 0.8); /* Safari */
  transform: scale(0.8, 0.8);

	}
	
	}
/* ------------------------1024PX------------------------*/


/* ------------------------800PX------------------------*/
	@media screen and (max-width: 800px) {
	.img {
		top:30px;
		left:-70px;
 -ms-transform: scale(0.6, 0.6); /* IE 9 */
  -webkit-transform: scale(0.6, 0.6); /* Safari */
  transform: scale(0.6, 0.6);
opacity:1.0;
	}
	
	.coursebox {
		top:25px;
	}

	}
/* ------------------------800PX------------------------*/

	h1 {
	vertical-align:top;
	text-align:top;
	position:absolute;
	left:130px;
	font-family: 'KabelCBold';
	font-size:100px;
	color:white;
	opacity:0.5;
	-khtml-opacity:	.5;
	-moz-opacity:	0.5;
	filter: alpha(opacity=50);
	}
	
	h2 {
	vertical-align:top;
	text-align:top;
	position:absolute;
	top:40px;
	left:330px;
	font-family: 'KabelCBold';
	font-size:50px;
	color:white;
	opacity:0.5;
	-khtml-opacity:	.5;
	-moz-opacity:	0.5;
	filter: alpha(opacity=50);
	z-index:2;
	}
	
	h1>span {
	font-family: 'KabelCBold';
		font-size:29px;
			color:white;
	opacity:0.7;
	-khtml-opacity:	.7;
	-moz-opacity:	0.7;
	filter: alpha(opacity=70);
	
	}
	body {
	background-color:#3ca9fd;
	margin:0;
	padding:0;
	}
      #bg {
position: fixed;
    width:2353px;
    height:800px;

    background-image:url('../img/panorama.png');
    background-position: 100px 0px;
	bottom:0;
	margin-bottom:0;
      }
	  
	 

.ballbox { 
	   	background-image:url('../img/logoweb.png');
		    background-repeat:no-repeat;

			background-size:cover;
		top:25px;
	left:25px;
  display: inline-table;
  width: 100px;
  height: 100px;
  margin: 0;
  border-radius: 50%;
  position: relative;
     z-index:999;
}	
	  .ball {
	top:0px;
	left:0px;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%,  #323232, #0a0a0a 80%, #000000 100%);
   opacity: 0.2;

	-khtml-opacity:	.2;
	-moz-opacity:	0.2;
	filter: alpha(opacity=20);
     z-index:1000;
}

	  .ball:hover {
   opacity: 0.3;
   -khtml-opacity:	.3;
	-moz-opacity:	0.3;
	filter: alpha(opacity=30);;
   cursor:pointer;
}

.ball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%,  rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  bottom: 5%;
  left: 5%;
  opacity: 0.8;
 
	-khtml-opacity:	.8;
	-moz-opacity:	0.8;
	filter: alpha(opacity=80);
  height: 100px;
  width: 80px;
  -webkit-filter: blur(5px);
  z-index: 2;
}
.ball:after {
  width: 120px;
  height: 120px;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,  rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9) 14%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}



.coursebox {
width:100%;
height:auto;
top:30px;
position:relative;
z-index:3000;
vertical-align:top;

display:table;
}


.coursecontainer {
margin-top:3px;
display:inline;


}

.coursename {
-moz-box-shadow:inset 0 1px 0 0 #fce2c1;
	-webkit-box-shadow:inset 0 1px 0 0 #fce2c1;
	box-shadow:inset 0 1px 0 0 #fce2c1;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fbb150), color-stop(1, #fb9e25));
	background:-moz-linear-gradient(top, #fbb150 5%, #fb9e25 100%);
	background:-webkit-linear-gradient(top, #fbb150 5%, #fb9e25 100%);
	background:-o-linear-gradient(top, #fbb150 5%, #fb9e25 100%);
	background:-ms-linear-gradient(top, #fbb150 5%, #fb9e25 100%);
	background:linear-gradient(to bottom, #fbb150 5%, #fb9e25 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25',GradientType=0);
	background-color:#fbb150;

	cursor:pointer;
	
text-align:center;
width:200px;
height:auto;
display:block;
z-index:3000;
color:white;
margin-top:3px;


}

.coursename:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, green), color-stop(1, #00ff00));
	background:-moz-linear-gradient(top, green 5%, #00ff00 100%);
	background:-webkit-linear-gradient(top, green 5%, #00ff00 100%);
	background:-o-linear-gradient(top, green 5%, #00ff00 100%);
	background:-ms-linear-gradient(top, green 5%, #00ff00 100%);
	background:linear-gradient(to bottom, green 5%, #00ff00 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='green', endColorstr='#00ff00',GradientType=0);
	background-color:green;
}

.coursenamegreen {
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, green), color-stop(1, #00ff00));
	background:-moz-linear-gradient(top, green 5%, #00ff00 100%);
	background:-webkit-linear-gradient(top, green 5%, #00ff00 100%);
	background:-o-linear-gradient(top, green 5%, #00ff00 100%);
	background:-ms-linear-gradient(top, green 5%, #00ff00 100%);
	background:linear-gradient(to bottom, green 5%, #00ff00 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='green', endColorstr='#00ff00',GradientType=0);
	background-color:green;

	cursor:pointer;
	
	text-align:center;
width:200px;
height:50px;
display:table;
z-index:3000;
color:white;


}


.coursename > p{
color:white;
font-family:'Arial';
font-size:17px;
margin:2px;
padding:15px;
text-decoration:none;


}

.coursedescription {
width:300px;
height:auto;
display:block;

border: 1px solid white;

background-color:grey;
border-radius:10px;
opacity:0.7;
-khtml-opacity:	.7;
	-moz-opacity:	0.7;
	filter: alpha(opacity=70);
	transition:1s;
}



.coursedescription > p{
color:white;
font-family: Arial;
font-size:14px;
margin:10px;
text-indent: 20px; 

}