@import url('https://fonts.googleapis.com/css?family=Rambla:400,400i,700,700i');

.hidden {
	display: block !important;
}


body {
	font-family: 'Rambla', sans-serif;
    background: url("../images/bk-sm-intro.jpg");
    background-size: 100%;
/*
    min-width:800px;
    width: auto !important;
*/
    background-repeat: no-repeat;
    background-color: #f8f4fd;
    line-height: 2.5rem;
}

img {
    max-width: 100%;
    height: auto;
}




/*Image backgrownd for small size*/

#contact {
        background: url("../images/bk-sm-intro.jpg");
		background-size: contain;
        background-size: 100%;
	    background-repeat: no-repeat;
        background-color: #f8f4fd; 
}
#intro {
        background: url("../images/backgrownd.sm.index.png");
		background-size: contain;
        background-size: 100%;
	    background-repeat: no-repeat;
        background-color: #f8f4fd; 
    
}

#bio {
        background: url("../images/bk-sm-intro.jpg");
		background-size: contain;
        background-size: 100%;
	    background-repeat: no-repeat;
        background-color: #f8f4fd; 
}

#resume {
        background: url("../images/bk-sm-intro.jpg");
		background-size: contain;
        background-size: 100%;
	    background-repeat: no-repeat;
        background-color: #f8f4fd; 
}

/*---------Page index images------*/
.illustration-h1{
    display: none;
}
.illustration-v1{
    display: block;
}

.design-h2{
    display: none;
}
.design-v2{
    display: block;
}

.motion-h3{
        display: none;
    }
.motion-v3{
        display: block;
    }

.perso-h4{
        display: none;
    }
.perso-v4{
        display: block;
    }


/*Image backgrownd for small size close*/



.navbar-right li a:active{
    color: white;
}

.navbar-inverse .navbar-nav>li>a.activeItem{
    color: white;
}
.navbar-right li a #one:focus {
    color: white;
}

.navbar-right li a#two:focus {
    color: white;
}

#three:focus {
    color: white;
}

#four:focus {
    color: white;
}

#cinco:focus {
    color: white;
}

#beast:focus {
    color: white;
}

#seven:focus {
    color: white;
}

.

.navbar{
/*	font-size: 150%;*/
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	background: #193641;
	border-radius: 0;
	padding: 0% 7% 0 7%;
}

.navbar-inverse .navbar-brand {
    font-size: 22px;
    color: #1c94ba;
}
/*-------------------------------*/

.intro{
	text-align: right;
    padding: 63px 0 8px 0;
    font-family: 'Rambla', sans-serif;
}
.contact{
	text-align: left;
	padding: 20px 0 60px 0;
	font-family: 'Rambla', sans-serif;
	font-weight: 700;
}
.resume{
	font-family: 'Rambla', sans-serif;
	font-size: 120%;
	text-align: left;
	padding: 20px 0 60px 0;
}

/*The litte dot!*/
.contact img{
    width: 30%;
}

h2{
	font-size: 300%;
	line-height: 1.1em;
	margin-bottom: 0.4em;
}
h3 {
	font-size: 125%;
	font-family: 'Rambla', sans-serif;
	font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
	color: #193641;
}
h4 {
	font-size: 100%;
	margin-top: 0;
}

h5{
	font-size: 150%
}
.slide01{
		padding: 10px 30px 10px 30px;
	}

p {
	font-family: 'Rambla', sans-serif;
	font-size: 1.45rem;
	font-weight: 400;
}

.illustration img{
	margin: 10px 0 0 0;
	margin-right: 30px;
}
/*
.illustration-r img{
	margin: 0px 0 0px 30px;
    margin-right: 30px;
    border-radius: 10px;
}
*/

/*// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

/*
@media (min-width: 576px) and (max-width: 767px) { 
		background-size: cover;
	}*/

@media only screen and (min-width: 575px){ 
body {
        background: url("../images/bk-sm-intro.jpg");
		background-size: contain;
        background-size: 100%;
	    background-repeat: no-repeat;
        background-color: #f8f4fd;
			}
.intro {
		font-size: 70%;
        padding: 49px 0 2px 0;
		}
 #intro {
        background: url("../images/image-01a.jpg");
		background-size: contain;
        background-size: 100%;
	    background-repeat: no-repeat;
        background-color: #f8f4fd; 
    
}   
    
.resume{
		padding: 30px 30px 60px 143px;
	}
.contact{
	padding: 150px 30px 60px 30px;
	}
  
.slideillustration{
        background: url("../images/bk-sm-intro.jpg");
    background-size: 100%;
    }
.slidedesign{
        background-image: none;
        width: 100%;
        margin-left: auto;
        height: auto;
    }
    
}	


@media (min-width: 768px) {

    .container {
            width: 90%;
            }
    .resume{
		padding: 20px 30px 60px 170px;
			}
    body {
		background-size: 100%;
			}
    .intro {
        text-align: right;
        padding: 5px 0 2px 0;
	}
   .slidedesign {
        width: 80%;
        height: auto;
        margin-left: auto;
    }
    .contact{
	    padding: 90px 30px 60px 30px;
	}
    .illustration-r img{
	    margin: 0px 0 0px 0px;
}
    
/*---------Page index images----------------*/
    
    .illustration-h1{
        display: block;
        margin-top: auto;
    }
    .illustration-v1{
        display: none;
    }
    
    
    .design-h2{
        display: block;
    }
    .design-v2{
        display: none;
    }
    
    .motion-h3{
        display: block;
    }
    .motion-v3{
        display: none;
    }
    .perso-h4{
        display: block;
    }
    .perso-v4{
        display: none;
    }
}

@media (min-width: 992px){
    .container {
            width: 90%;
            }
    .resume{
		padding: 20px 30px 60px 30px;
			}
    body {
		background-size: 100%;
			}
    .intro {
        text-align: right;
        padding: 5px 0 2px 0;
	}
    
    
   .slidedesign {
        width: 130%;
        height: auto;
        margin-left: auto;
    }
/*
    .image1w{
        display: none;
    }
    
    .image2w{
        display: block;
    }
*/
}