/* 
	Blue banner & font: 	#0099da
	PIE = behavior: url(PIE/PIE.php);
*/

@font-face {
    font-family: 'Sofia';
    src: url('webfonts/SofiaProLight-webfont.eot');
    src: url('webfonts/SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/SofiaProLight-webfont.woff2') format('woff2'),
         url('webfonts/SofiaProLight-webfont.woff') format('woff'),
         url('webfonts/SofiaProLight-webfont.ttf') format('truetype'),
         url('webfonts/SofiaProLight-webfont.svg#sofia_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'Circular';
	src: 	url('webfonts/Circular-Bold.eot?#iefix') format('embedded-opentype'),  
			url('webfonts/Circular-Bold.woff') format('woff'), 
			url('webfonts/Circular-Bold.ttf')  format('truetype'), 
			url('webfonts/Circular-Bold.svg#Circular-Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.dontshow {
	display: none;
}

/*Bigger navbar*/
.navbar-brand,
.navbar-nav li a {
    line-height: 70px;
    height: 70px;
    padding-top: 0;
}
button.navbar-toggle {
	margin-top: 20px;
}

.navbar-brand > img {
	max-width:100px; 
	margin-top: 8px;
}



/* Generic */
body {
	font-family: "Circular", "Helvetica Neue", Arial, sans-serif;
    padding-top: 100px;
	color: #2f2463;
}

.signin {
	color: white;
	margin-bottom: 20px;
}

.title {
	padding-bottom: 30px;
}

.titleheader {
	color: #ff0033;
	padding-bottom: 30px;
}

.leadtext {
	line-height: 1.8em;
    text-align: justify;
    text-justify: inter-word;
}


a {
	color: #ee2a31;
}

.spacer {
	padding-top: 20px;
	padding-bottom: 30px;
}


.form-control {
	font-size: 18px !important;
}

.yellowcontainer {
	background: #2f2463;
	background-size: 200px;
	min-height: 300px;
}

.yellowcontainer p {
	color: white;
}

.whitetext {
	color: white;
}
.yellowcontainer input {
	color: #6a1b9a;
/*	min-width: 300px;
*/	width: 100%;
	margin-bottom: 40px;
	font-size: 26px;
	padding: 5px;
}

.yellowcontainer label {
	font-weight: normal;
	font-size: 22px;
}

.yellowcontainer h1 {
	padding-top: 15px;
	padding-bottom: 10px;
}

.yellowcontainer a {
	color: #ee2a31;
}

.yellowcontainer p {
	line-height: 1.5em;
    text-align: justify;
    text-justify: inter-word;
}


.extraspace > li {
	padding-bottom: 0.5em;
}


.purplecontainer {
	background: #2f2463 url("../img/background.png");
	background-size: 200px;
	min-height: 300px;
}

.patterncontainer {
	background: #2f2463 url("../img/background.png");
	background-size: 200px;
	min-height: 300px;
}

.purplecontainer p {
	color: white;
}

.whitetext {
	color: white;
}


.purplecontainer .control-label {
	
}

.purplecontainer label {
	color: white;
	font-weight: normal;
/*	font-size: 22px;
*/}

.purplecontainer h1 {
	padding-top: 15px;
	padding-bottom: 10px;
}

.purplecontainer a {
	color: #ee2a31;
}

.purplecontainer p {
	line-height: 1.5em;
    text-align: justify;
    text-justify: inter-word;
}



.btn-jlcred {
	background-color: #ee2a31;
	border-color: #d43f3a;
	color: #fff;
}

.button {
    background-color: #ff0033;
    border: none;
    color: white;
    padding: 15px 310px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 32px;
    margin: 16px 20px;
    cursor: pointer;
}

.jlclogo {
	padding-top: 30px;
	padding-bottom: 30px;
}

.smalllogo {
	position: relative;
	top: -55px;
	padding-bottom: 0px;
	max-width: 150px;
}

.onebnphoto {
	padding-top: 40px;
	padding-bottom: 40px;
}

img.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

#sign-in > .derror {
	color: white;
}


*::-webkit-input-placeholder {
    color: #d2aaea;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #d2aaea;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #d2aaea;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #d2aaea;
}



.signinbutton {
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.33;
	border-radius: 6px;
	color: #fff;
	background-color: #6a1b9a;
	border-color: #481468;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	font: inherit;
	font-size: 22px;
}

.signinbutton:hover {
	background-color: #521a74;
}

.signinbutton:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}


.signinbutton:active {
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.purplebutton {
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.33;
	border-radius: 6px;
	color: #fff !important;
	background-color: #ee2a31;
	border-color: #ee2a31;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	font: inherit;
	font-size: 22px;
}

.purplebutton:hover {
	background-color: #ee2a31;
}

.purplebutton:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}


.purplebutton:active {
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.linksrow {
	margin-top: 15px;
	min-height: 100px;
	padding-left: 0px !important;
}

.linksrow a {
	color: white;
}

.linksrow a:hover {
	text-decoration: underline solid #ff8f00;
/*	-moz-text-decoration-color: #ff8f00;
	text-decoration-color: #ff8f00;*/
}


@media (min-width: 996px) {
	.container {
		font-size: 18px;
		padding-left: 150px;
		padding-right: 150px;
	}
	
	.container-faq {
		padding-left: 50px;
		padding-right: 50px;
	}
	.featureimage-left {
		padding-right: 50px;
	}
	
	.featureimage-right {
		padding-left: 50px;
	}
	
	.alignright {
		text-align: right;
	}

	.alignleft {
		text-align: left;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	.container {
		font-size: 18px;
		padding-left: 50px;
		padding-right: 50px;
	}
	
}

.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}


.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
}


.yellowcol {
	color: white;
}

.yellowcol p {
	color: white;
}

.yellocol button input {
	color: white;
}

.dividingline {
	padding-left: 15%;
	padding-right: 15%;
	margin-top: 40px;
	margin-bottom: 40px;
}

.dividingline hr {
	border-color: #a3a3a3;
}



.featureheading {
	color: #0099da;
	font-size: 30px;
}

.featuredescription {
    text-align: justify;
    text-justify: inter-word;
}



/*FAQ PAGE*/

.faq-question {
	color: #ff0033;
	font-size: 16px;
}
.faq-question-bullet {
	color: #ff0033;
	font-size: 16px;
	padding-top: 5px;
}

@media (min-width: 996px) {
	.faq-question {
		font-size: 25px;
	}
	.faq-question-bullet {
		font-size: 25px;
	}
	.languagelist ul {
		width: 22%;
		float: left;
	}
}

.faq-item {
	margin-bottom: 25px;
}

.languagelist ul {
	font-size: 14px;
}



/* SIGNIN FORM */
.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


#loginform.invalid {
	 -webkit-animation: shake .5s linear;
 }
	 @-webkit-keyframes shake {
	    8%, 41% {
	        -webkit-transform: translateX(-10px);
	    }
	    25%, 58% {
	        -webkit-transform: translateX(10px);
	    }
	    75% {
	        -webkit-transform: translateX(-5px);
	    }
	    92% {
	        -webkit-transform: translateX(5px);
	    }
	    0%, 100% {
	        -webkit-transform: translateX(0);
	    }
}

#username.invalid {
    border-color: #ee2a31;
}

#password.invalid {
    border-color: #ee2a31;
}

/*CONTACT PAGE*/

.contactbox {
	text-align: center;
	min-height: 250px;
	color: #ee2a31;
	font-size: 25px;
}

.contactbox img {
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10px;

}

@media (max-width: 996px) {
	.contactbox {
		font-size: 16px;
	}
	.contactbox img {
		height: 100px;
	}
}

.contactbox a {
	color: #ee2a31;
}

.footer {
	padding-top: 60px;
	font-size: 12px;
	color: #aaa;
	text-align: center;
	padding-bottom: 30px;
}

.footer a {
	color: #aaa;
}



/*Management Pages*/
.managementContainer {
	background-color: white;
	border-radius: 5px;
	margin: 15px 0px 15px 0px;
}

.managementContainer .nav > li > a:hover {
	background-color: #ee2a31;
	color: white;
}

.managementContainer .nav-tabs>li.active>a {
	color: #2f2463;
}

.managementContainer .nav-tabs>li.active>a:hover {
	color: white;
}

.managementContainer ul.nav.nav-tabs {
	margin-bottom: 15px
}

.managementContainer .tab-content {
	padding: 15px;
}


.formInputError {
	color: #ee2a31 !important;
}

label.error { float: none; color: red; padding-left: 0px; vertical-align: bottom; }

#tableAddPupils td {
	height: 39px;
}

#tableAddPupils tr:last-child{
	border-bottom: 1px solid #ddd
}

.downloadTable td {
	text-align: center;
}


.downloadTable td {
	border: 0px !important;
}
/*GLYPHICON*/

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}


/*NAVBAR*/

.navbar-yellow {
  background-color: #ff0033;
  border-color: #ff0033;
  font-size: 20px;
}
.navbar-yellow .navbar-brand {
  color: #2f2463;
  font-size: 20px;
}
.navbar-yellow .navbar-brand:hover, .navbar-yellow .navbar-brand:focus {
  color: #ee2a31;
}
.navbar-yellow .navbar-text {
  color: #ecf0f1;
}
.navbar-yellow .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-yellow .navbar-nav > li > a:hover, .navbar-yellow .navbar-nav > li > a:focus {
  color: #ee2a31;
}
.navbar-yellow .navbar-nav > .active > a, .navbar-yellow .navbar-nav > .active > a:hover, .navbar-yellow .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #2f2463;
}
.navbar-yellow .navbar-nav > .open > a, .navbar-yellow .navbar-nav > .open > a:hover, .navbar-yellow .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #2f2463;
}
.navbar-yellow .navbar-toggle {
  border-color: #2f2463;
}
.navbar-yellow .navbar-toggle:hover, .navbar-yellow .navbar-toggle:focus {
  background-color: #2f2463;
}
.navbar-yellow .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-yellow .navbar-collapse,
.navbar-yellow .navbar-form {
  border-color: #2f2463;
}
.navbar-yellow .navbar-link {
  color: #ecf0f1;
}
.navbar-yellow .navbar-link:hover {
  color: #2f2463;
}

.nav > li > a:hover {
	background-color: #2f2463;
}

@media (max-width: 767px) {
  .navbar-yellow .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-yellow .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-yellow .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-yellow .navbar-nav .open .dropdown-menu > .active > a, .navbar-yellow .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-yellow .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #2f2463;
  }
}