/* red color= #F61C3B
  grey = #B7BDC1
	blue = #04AAAA */




/* --FONTS-- */
@font-face {
   font-family: Bosch-Regular;
   src: url(fonts/BoschSans-Regular.otf);
}

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

@font-face {
   font-family: Bosch-Serif;
   src: url(fonts/BoschSerif-Regular.otf);
}

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


body{
  font-family: Bosch-Regular;
 }





/* --NAV-BAR-- */
.container-navbar-info{
	float: right !important;
	margin-top: 25px;
	font-size: 12px;
}

.navbar-info>li>a {
	transition-duration: 0.3s;
	font-size: 12px;
	color:black !important;
	text-transform: uppercase !important;
}

.navbar-info>li>a:hover{
	margin-bottom: -25px;
	color: #e10a14 !important;
}

#lang_de{
  margin-right: -23px;
}

#lang_en{
  margin-left: -23px;
}
.navbar-default{
	background-color:white;
	margin-bottom: 0px;
  border-style: none;
}

#kalimera{
    width: 100%;
    text-align: center;
    margin-bottom: -5px;
  }

#kalimera>li {
  float: none;
  display: inline-block;
}

.navbar-links>li>a{
	border-bottom: 3px solid transparent;
	transition-duration: 0.3s;
	font-size: 14px;
	color:black !important;
	text-transform: uppercase;
	font-family: BoschSans-Bold;
  margin-bottom: 3px;
}

.navbar-links>li>a:hover{
	margin-bottom: 3px;
	border-bottom: 3px solid #e10a14;
}


/* --HEADINGS-- */
h1{
	font-size:51px;
	font-family: Bosch-Serif;
}

/* --BLUE INFO-- */


.blue-info{
	font-size: 16px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 50px;
	padding-bottom: 50px;
	line-height: 1.6;
	text-align: justify;
  margin-bottom: 20px;
}
.initial{
	text-align: justify !important;
	background-color: #EAEBED;
}

#click-image{
	margin-left: -50%;
}
.dimensions{
	background: #04AAAA;
}

.implementation{
	background-color: #FBEC17;
}

.things-question{
	background-color: #04AAAA;
}

.recommendations{
	background: #F9ED09;
}

.learn-more{
	font-size: 80%;
	margin-top:20px;
	float: right;
}

.enumeration{
  padding-left:18px !important;
}

/* --BUTTON-- */


.button{
	width: 300px;
	background-color: white;
	border:	4px solid #e10a14;
	color: #e10a14;
	font-weight: bold;
	font-size: 14px;
	margin-bottom:10px;
	transition-duration: 0.2s;
	padding-top: 9px;
	padding-bottom: 9px;
	font-family: "BoschSans-Bold";
	display: inline-block;
  justify-content: center;
  text-decoration:none !important;
  text-decoration-line:none !important;
}

.button:hover{
	border-bottom: 7px solid #e10a14;
  color: #e10a14;
}


.download-button{
  margin-top: 50px;
  margin-bottom: 60px;
  text-align: center;
}


.explanatory-image{
  padding-top: 50px;
}



.to-the-top{
  background-color: #f9f9f9;
  margin-top: -34px;
}
/* --- THE PRINCIPLES OF TEPL ---*/

.principles{
	text-align: center;
}

#spin{
  width:640px;
}

#spin{
	margin-bottom: 30px;
}

#principle1{
   position: relative;
    left:580px;
    top:280px;
}
#principle2{
   position: relative;
    left:340px;
    top:250px;
}
#principle3{
   position: relative;
    left:540px;
    top:60px;
}
#principle4{
   position: relative;
    left:590px;
    top:580px;
}
#principle5{
   position: relative;
    left:300px;
    top:520px;
}
#principle6{
   position: relative;
    left:280px;
    top:420px;
}

.spinning
{
	-webkit-animation: rotation 1s 1 linear;
}

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

/* --- UNTANGLING THE EVIDENCE ---*/

h5{
	font-size: 120%;
	color: #F70829;

}
.ask{
	font-size: 130%;
	margin-top: 80px;
}

.untangle-height{
	height: 600px;
}

.col-sm-8{
	margin-top: 30px;
	margin-bottom: 30px;
}

.carousel-control.left, .carousel-control.right {
    background-image: none
}

.carousel-inner > .item > img {
    margin: 0 auto;
}

.carousel-indicators li{display:none;}

.fadein {
	 position:absolute;
   top:10px;
   left:15%;
   margin:auto;
}

.fadein img {
   position:absolute;
   left:-65px;
   top:0;
}

.animating {
   -webkit-animation-name: fade;
   -webkit-animation-iteration-count: 0;
   -webkit-animation-duration: 20s;
   animation-name: fade;
   animation-iteration-count: 0;
   animation-duration: 20s;
}

@-webkit-keyframes fade {
   0% {opacity: 0;}
   20% {opacity: 1;}
   33% {opacity: 1;}
   53% {opacity: 0;}
   100% {opacity: 0;}
}
@keyframes fade {
   0% {opacity: 0;}
   20% {opacity: 1;}
   33% {opacity: 1;}
   53% {opacity: 0;}
   100% {opacity: 0;}
}

#f1 {
   -webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#f2 {
   -webkit-animation-delay: 12s;
	animation-delay: 12s;
}
#f3 {
   -webkit-animation-delay: 12s;
	animation-delay: 12s;
}

/* --- JIGSAW --- */

.jigsaw{
	background-color: white;
}

.jigsaw-default{
	border-style: none;
}
.jigsaw-title{
	text-align:center;
}

.jigsaw-heading {
	margin-top:-70px;
	border-style:none;
	background-color: white !important;
}

.jigsaw-body {
	border-style:none !important;
	font-size: 120%;
	text-align: justify;
	padding-left: 25%;
	padding-right: 25%;
}


/* --- TEPL TOOLS --- */


.tool-gallery{
	margin-top: 50px;
}

h2{
	margin-left: 20%;
	margin-top: 50px;
	margin-bottom: 35px;
  font-family: Bosch-Serif;
}


h3{
	margin-left: 25px;
	margin-bottom: 10px;
	font-size: 32px;
	font-family: Bosch-Serif;
}

.gallery_img{
	width: 50px;
	height: 50px;
  margin-left: 10px;
  margin-right: 10px;
}

.list {
	margin-left: 1px;
	list-style: none;
}

.description-line{
	border-top: 1px dotted red;
  margin-bottom: 5px;
	margin-left: 30px;
	margin-right: 30px;
}

.description{
	margin-left: 10px;
	margin-right: 10px;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
  font-family: BoschCond-Regular;
}
	/* flip the pane when hovered */

  .flip-container:active .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
	}


.flip-container, .front, .back {
	width: 320px;
	height: 493px;
}

/* flip speed goes here */

.flipper {
  transition: 1.5s;
	transform-style: preserve-3d;
	position: relative;
	height: 100%;
	width: 100%;
	background: transparent;
	font-size: 15px;
  margin-top: 40px;
  z-index: 1;
}

.glyphicon{
	color: #e10a14;
}

/* hide back of pane during swap*/
.front, .back {
  border-radius: 7%;
  background-color: #EAEBED;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding:10px;
	width:auto;
	text-align: left;
}
/* front pane, placed above back*/
.front {
  z-index: 2;
	/* for firefox 31*/
	transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
}
/* back, initially hidden pane*/
.back {
  z-index: 2;
	transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}

iframe{
	border-style: none;
	border-radius: 15px;
	margin-bottom: 5px;
}

a{
	color: #e10a14;
}
 a:hover{
	 color:#e10a14;
 }

.glyphicon-menu-up{
	font-size:300%;
	color: #373e33;;
}




.to-the-top{
	text-align:center;
}



/* --- FOOTER ---*/
footer{
  padding: 30px;
}

.light-grey{
	background-color: #EAEBED;
}

#about-the-project{
	font-size: 120%;
	color: #373e33;
	text-transform: uppercase;
}

#about-the-project:hover{
	color: red;
}

.logos{
	margin-top: 50px;
	margin-bottom: 50px;
  text-align: center;
}

#iet{
	margin-left: 100px;
	margin-right: 100px;
}

#ucl{
	margin-left: 100px;
}

.dark-grey{
  background-color: #707b84;
  color: white;
  text-align: center;
}

.share-social{
  word-spacing: 30px;
}

.trexp{
  text-align: right;
  padding-top: 30px;
}