﻿
/* GLOBAL STYLES
-------------------------------------------------- */
/* In order to override bootstrap-responsive.css these should have the same specific selectors or a higher priority, and be imported after bootstrap.css */
	
	
/* RESPONSIVE CSS
-------------------------------------------------- */
	
/* LAPTOPS
-------------------------------------------------- */

@media (max-width: 1199px) {

	/* NAVBAR
    -------------------------------------------------- */



	
    /* CAROUSEL
    -------------------------------------------------- */		

    .carousel .item {
        height: 450px;
    }
	
    .carousel img {
	    min-width: 100%;
        height: 450px;
	    width: auto;
	    vertical-align: middle; 
    }
	
    .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 50px;
	    margin-left: 10px;
    }


	/* FEATURETTES (Psyche images)
------------------------- */

	.featurette-psyche-image {
		width: 65%;
	}

}
	

/* TABLETS
-------------------------------------------------- */

@media (max-width: 979px) {

	/* NAVBAR
	-------------------------------------------------- */

	
	/* CAROUSEL
	-------------------------------------------------- */	

	.carousel {
		width: 95%;  
	}

	.carousel .item {
		height: 400px;
	}
      
	.carousel img {
		min-width: 100%;
		height: 400px; 
		width: auto;
		vertical-align: middle;
	}

	/* BREADCRUMBS
	------------------------- */
	
	.breadcrumbs .container{
		margin: 120px auto;
		margin-bottom: 30px;
		width: 85%; 
	}
	
	/* FEATURETTE
	-------------------------------------------------- */	
	
	.featurette-divider {
		margin: 30px auto; /* Space out the Bootstrap <hr> more */
		width: 95%; 
	}

	.featurette {
		height: auto;
		padding: 0;
		width: 95%;
		margin: auto;
	}
	.featurette-image.pull-left,
	.featurette-image.pull-right {
		display: block;
		float: none;
		max-width: 40%;
		margin: 0 auto 20px;
	}
	
	.featurette .text-muted{
		margin-top: 10px;
	}	
	
	.featurette .nav {
		margin-top: -120px;
	}

	/* FEATURETTES (Psyche images)
------------------------- */

	.featurette-psyche-image {
		width: 80%;
	}
	
}

/* SMALLER TABLETS & SMARTPHONES (Landscaped)
-------------------------------------------------- */
	
@media (max-width: 767px) {

	/* NAVBAR
	-------------------------------------------------- */
	
		
	/* CAROUSEL
	-------------------------------------------------- */		

	.carousel {
		width: auto;
		margin-left: 0px;
		margin-right: 0px;
  		padding: 0 0;
	}
      
	.carousel .item {
		height: 300px;
	}
	
	.carousel img {
		min-width: 100%;
		height: 300px;
		width: auto;
		vertical-align: middle; 
	}
	
	.carousel-caption {
		width: 65%;
		padding: 0 70px;
		margin-top: 100px;
		margin-left: 10px;
	}
	
	.carousel-caption h1 {
		font-size: 20px;
	}
	
	.carousel-caption .lead,
	.carousel-caption .btn {
		font-size: 14px;
	}

	/* BREADCRUMBS
	------------------------- */
	

	/* FEATURETTE
	-------------------------------------------------- */	

	.featurette-divider {
		margin: 30px auto; /* Space out the Bootstrap <hr> more */
		width: 95%; 
	}

	.featurette {
		height: auto;
		padding: 0;
		width: 95%;
		margin: auto;
	}		

	.featurette-heading {
		font-size: 20px;
	}
      
	.featurette .lead {
		font-size: 14px;
		line-height: 1.5;
	}
	
	.featurette .text-muted{
		margin-top: 10px;
	}

	.featurette .text-muted-models {
		margin-top: 0px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.featurette .text-essays {
		margin: 20px 10px 20px;
	}
	
	.featurette .nav {
		margin-top: -120px;
	} 	  
	
	.featurette .embed-responsive-item{
		width: 95%;
	}
	
	.table-condensed {
		margin-left: 20px;
	}
	
	.featurette .aiiss {
		height: 660px;
		width: 330px;
		display: block;
	}
	
	.featurette .future-panel {
		height: 200px;
		width: 100px;
		border-radius: 25px 25px 25px 25px;
	}
	
	.featurette .future-panel.top {
		border-radius: 50px 50px 25px 25px;
		margin-bottom: 15px;
	}
	.featurette .future-panel.left {
		border-radius: 50px 25px 25px 50px;
		margin-right: 15px;
	}
	.featurette .future-panel.right {
		border-radius: 25px 50px 50px 25px;
		margin-left: 15px;
	}
	.featurette .future-panel.bottom {
		border-radius: 25px 25px 50px 50px;
		margin-top: 15px;
	}


	/* FEATURETTES (Psyche images)
------------------------- */

	.featurette-psyche-image {
		width: 100%;
	}

	
	/* FEATURETTES (Index only part)
	------------------------- */

	.featurette-index-divider {
		margin: 30px auto; /* Space out the Bootstrap <hr> more */
		width: 95%; 
	}

	.featurette-index {
		height: auto;
		padding: 30;
		width: 95%;
		margin: auto;
	}		

	.featurette-index-heading {
		font-size: 28px;
	}
	
	.featurette-index .muted {
		font-size: 22px;
	}	
	    
	.featurette-index .lead {
		font-size: 18px;
		line-height: 1.5;
	}
	
	.featurette-index .text-muted{
		font-size: 18px;
		margin-top: 10px;
	}
	
}
	
/* SMARTPHONES (Portraited)
-------------------------------------------------- */
	
@media (max-width: 480px) {

	/* NAVBAR
	-------------------------------------------------- */

		
	/* CAROUSEL
	-------------------------------------------------- */		

	.carousel .item {
		height: 200px;
	}
	
	.carousel img {
		min-width: 100%;
		height: 200px;
		width: auto;
		vertical-align: middle; 
	}
	
	.carousel-caption {
		width: 65%;
		padding: 0 70px;
		margin-top: 50px;
		margin-left: 10px;
	}	
	
}