/* fonts */

@font-face {
    font-family: panton;
    src: url(/fonts/panton.otf);
}

@font-face {
    font-family: panton;
	font-style: italic;
    src: url(/fonts/panton-regular-italic.otf);
}

@font-face {
    font-family: panton;
	font-weight: bold;
    src: url(/fonts/panton-semibold.otf);
}

@font-face {
    font-family: panton;
	font-weight: 600;
    src: url(/fonts/panton-extrabold.otf);
}

h1,h2,h3,h4,div,p,input,textarea,button {
	font-family: panton, "Helvetica Neue",Helvetica,Arial,sans;
}


/* general styles */

h1 {
	margin-top: 80px;
	margin-bottom: 44px;
	font-size: 40px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 600;
}

h2{
	font-weight: 600;
	text-transform: uppercase;
	font-size:30px;
}

p {
	font-size: 18px;
}

@media screen and (max-width: 767px) {
	img {
		max-width: 100%;
	}
}
@media screen and (min-width: 768px) {
	#notebook_glasses{
		left: 00px;
	}
}


ul.tick {
	list-style-image: url("tick.png");
	font-size: 18px;
	padding-left: 20px;
}


button {
	border: 0px;
	background-color: #00ace5;
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	padding: 13px;
}
button:hover {
	background-color: #009dd1;	
}

/* nav */

nav#menu  {
	background-size:100%;
	/*background-color: #f7cb17;*/
	background-image:url(image_big.png);
	border: 0px;
	box-shadow:none;
	padding-top: 15px;
}

#nav .nav {
	background-color: #f7cb17;
	
}

#menu a {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	text-decoration: underline;
}

#menu a:hover {
	text-decoration:none;
	color: #fff;
}

#menu {
	height: 70px;
}

/* course abstract */

#abstract button {
	width: 270px;
}

/* course headlines */
.headlines {
	background-color: #f7971e;
	color: #252525;
	margin-top: 10px;
}
.headlines .col-lg-5 {
	position: relative;
}

.headlines .dummy {
	padding-top: 100%;
}

.headlines button {
	width: 300px;
	font-weight:bold;
}
.headlines img {
	position: absolute;
	bottom: 0px;
	max-height:100%;
}

/* take a chance message */
#takeachance {
	margin-top: 80px;
	text-align: left;
	color: #fff;
	background-image: url("pexels_photo.png");
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 301px;
}

#clock>div {
	width:90px; float: left; padding: 5px;
}

#clock>div>p {
	font-size:56px; font-family: panton; font-weight: 600; background-color: #00ace5; color: #eee;
}

#clock>div>span{
	font-size:24px; font-family: panton; color: #252525;
}

#takeachance h1 {
	margin-top: 40px ;
	margin-bottom: 30px ;
}

#takeachance button {
	background-color: #024c64;
}

#takeachance button:hover {
	background-color: #013e56;
}

#gall img {
	width: 100%;
	margin-top: 20px;
}

img.rounded {
	border-radius:50px;
}

#prettywoman {
	background-image: url(exponential_gradient.png);
	background-size: 100%;
	background-repeat: repeat-y;
	margin-top: 80px;
}

#prettywoman h1 {
	margin-top: 40px;
	margin-bottom:0px;
}

#prettywoman .col-sm-5 {
	position: relative;
	height: 480px;
}

#prettywoman .col-sm-7 {
	padding-top: 60px;
	height: 480px;

}

#prettywoman img {
	position: absolute;
	bottom: 0px;
	left: 0px;
	
}


/* feedback form */ 

#feedback {
	background-image: url('bluebackground.png');
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
}
#form {
	background-image: url('iPad.png');
	height: 407px;
	width: 579px;
	padding: 50px 80px;
	margin: 0px auto;
}
form>* {
	margin-bottom: 15px;
}


/* callback button */

#top{
	width:100%;
	background: #222;
	text-align:center;
	height:35px;
	line-height:35px;
	}
#top a{color:#00FF00;text-decoration:none;}
.logo{
	width:200px;
	font: 22px/125% Tahoma;
	float:left;
	line-height:35px;
	}
.logo span{font: 12px/125% Tahoma;}
 

 #popup_toggle{bottom:25px;right:10px;position:fixed;}
.img-circle{background-color:#fff;box-sizing:content-box;-webkit-box-sizing:content-box;}
.circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #0f0;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#0f0;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;}
.img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(/images/icons/makecall.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
.img-circle:hover{opacity: 1;}
@keyframes pulse {0% {transform: scale(0.9);opacity: 1;}
  50% {transform: scale(1); opacity: 1; }   
  100% {transform: scale(0.9);opacity: 1;}}
 @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;}
  50% {-webkit-transform: scale(1);opacity: 1;}   
  100% {-webkit-transform: scale(0.95);opacity: 1;}}
@keyframes tossing {
  0% {transform: rotate(-8deg);}
  50% {transform: rotate(8deg);}
  100% {transform: rotate(-8deg);}}
@-webkit-keyframes tossing {
  0% {-webkit-transform: rotate(-8deg);}
  50% {-webkit-transform: rotate(8deg);}
  100% {-webkit-transform: rotate(-8deg);}}
@-moz-keyframes circle-anim {
  0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;}
  30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;}
  100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}}
@-webkit-keyframes circle-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;}
  30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;}
  100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}}
@-o-keyframes circle-anim {
  0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;}
  30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;}
  100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}}
@keyframes circle-anim {
  0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;}
  30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;}
  100% {transform: rotate(0deg) scale(1) skew(1deg);
opacity: .1;}}
@-moz-keyframes circle-fill-anim {
  0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;}
  100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-webkit-keyframes circle-fill-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;  }
  50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;  }
  100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-o-keyframes circle-fill-anim {
  0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@keyframes circle-fill-anim {
  0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

/* end callback button */