@media only screen and (min-width: 300px) {
    /* For mobiles:300-600px */


    /* prevent bootstrap navbar collapse */
    /*************************************/
  .navbar-collapse.collapse{
    display: block !important;
  }

  .navbar-nav>li, .navbar-nav{
    float: left !important;
  }

  .navbar-nav.navbar-right:last-child{
    margin-right: -15px !important;
  }

  .navbar-right{
    float: right !important;
  }
  /*************************************/

    .overlay-content p{
      font-size: 80%;
    }
    .navbar-links>li>a{
      font-size: 10px;
      margin-bottom: 1px;}

    h1{
      font-size: 32px;
      text-align: left;
    }

    h3{
      font-size: 28px;
    }

    .blue-info{
    	font-size: 95%;
    }

    .click-image{
    	margin-left: -20%;
      font-size: 90%; }
    .click-hero-img{visibility: hidden;}
    #click{ width:30px; height:30px;}

    #spin{
      width:97%;
    }

    .download-button{
      margin-top: 10px;
      margin-bottom: 30px; }
    .button{
      zoom: 80%;}

      h2{
        margin-top: 10px;
        margin-bottom: 33px; }
      .jigsaw-img{
        width:90%;
        height:90%}
      .jigsaw-heading {
        margin-top:-50px; }
      .jigsaw-body {
        padding-left: 10%;
        padding-right: 10%;
        font-size: 90%;}

    .learn-more{
      margin-top:8px;}

    .gallery_img{
      width: 40px;
      height: 40px;}


    .to-the-top img{width: 20px;}

    .untangle-height{ height: 85%; }

    #about-the-project {font-size: 13px;}

    #iet{margin-left: 5px;	margin-right: 5px; height:50px;}
    #ucl{margin-left: 5px; height:50px;}
    #bosch{height:30px;margin-bottom: 10px;}
    #hu-berlin{height:50px;}
    #ucl{height:50px;}
}

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

    /* prevent bootstrap navbar collapse */
    /*************************************/
  .navbar-collapse.collapse{
    display: block !important;
  }

  .navbar-nav>li, .navbar-nav{
    float: left !important;
  }

  .navbar-nav.navbar-right:last-child{
    margin-right: -15px !important;
  }

  .navbar-right{
    float: right !important;
  }
  /*************************************/


    /* For tablets:600-900px */

    .overlay-content p{
      font-size: 90%;
    }

    .col-sm-4{
      width: 50%;
    }

    .navbar-links>li>a{
    	font-size: 14px;}

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

    .blue-info{
    	padding-top: 10px;
      font-size: 99%;
    }

    h1{
      font-size: 42px;
    }
    h2{
      margin-top: 10px;
      margin-bottom: 50px;
    }
    h3{
    	margin-left: 25px;
    	margin-bottom: 5px;
    	font-size: 32px;
    }

    .click-image{
    	margin-left: -25%;
      font-size: 100%;}
    #click{ width:40px; height:40px;}


    #spin {width:90%;}


    .learn-more{
    	margin-top:10px;
    }

    .jigsaw-img{
      width:90%;
      height:90%}
    .jigsaw-heading {
    	margin-top:-62px;}
    .jigsaw-body {
      padding-left: 10%;
      padding-right: 10%;
      font-size: 16px;}


  .download-button{
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .button{
    zoom: 100%;
  }

  .untangle-height{
  	height: 600px;
  }

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

  .gallery_img{
  	width: 50px;
  	height: 50px;}


  .to-the-top img{width: 40px;}

  #about-the-project {font-size: 15px;}

    #ucl{
    	margin-left: 20px;
      height:85px; }
    #iet{
      margin-left: 20px;
      margin-right: 20px;
      height:85px;}
    #bosch{height:65px;}
    #hu-berlin{height:85px;}

}

@media only screen and (min-width: 900px) {
    /* For tablets:900-1200px */

    .overlay-content p{
      font-size: 100%;
    }

    h1{
      font-size: 48px;
    }

    .blue-info{font-size: 16px;}

    .click-hero-img{visibility: visible;}
    #spin{
      width:640px;
    }

    #principle1{
       position: relative;
        left:480px;
        top:280px;
    }
    #principle2{
       position: relative;
        left:240px;
        top:250px;
    }
    #principle3{
       position: relative;
        left:440px;
        top:60px;
    }
    #principle4{
       position: relative;
        left:490px;
        top:580px;
    }
    #principle5{
       position: relative;
        left:300px;
        top:520px;
    }
    #principle6{
       position: relative;
        left:280px;
        top:420px;
    }

    .jigsaw-img{
      width:70%;
      height:70%
    }

    .jigsaw-heading {
      margin-top:-70px;
    }

    .jigsaw-body {
      padding-left: 10%;
      padding-right: 10%;
      font-size: 90%;
    }

    .col-sm-4{
      width: 50%;
    }

    .gallery_img{
    	width: 50px;
    	height: 50px;}

    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
      transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
    }
}
@media only screen and (min-width: 1200px) {
    /* For desktop:1200+ */

    .col-sm-4{
      width: 33%;
    }

      body{
      	font-size:16px;
        font-family: Bosch-Regular;
      }

    /* --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); }


    /* --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: 18px;
    	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:500px;
        top:490px;
    }
    #principle6{
       position: relative;
        left:390px;
        top:430px;
    }

    .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-img{
      width:55%;
      height:55%
    }

    .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: 50px;
      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:hover .flipper, .flip-container.hover .flipper {
    		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: red;
    }
     a:hover{
    	 color:red;
     }

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


    .to-the-top img{
      width: 50px;
    }

    .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;
    }

}