<!-- Styling the entire website -->
html, body { color: #434242; font-family: 'Open Sans', sans-serif !important; height: 100%; }
body { background: #F3EFE0; font-size: 15px; line-height: 1.64; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, strong, b { font-family: 'Open Sans', sans-serif !important; margin-bottom: 20px; }
h1,h4 { font-weight: 700; margin-bottom: 10px; }
h2,h3 { font-weight: 300; color: #22A39F; }
h2 { font-size: 54px; text-align: center; }
h3 { font-size: 28px; }

p.lead { text-align: center; color: #727878; }
p.lead a { color: #FFFFFF; text-decoration: underline; }
p.lead a:hover { text-decoration: none; }
ul.no-bullets { list-style-type: none; margin: 0px; padding: 0px; }
hr { margin: 40px 0px; border-color: #727878; opacity: 0.2; filter:alpha(opacity=20); }

.resume{
    height: 30px;
    width: 110px;
    border-radius: 5px;
    background-color: #69D2E7;
    margin-left: auto;
    margin-right: auto;
    color: #FFFFFF;
    opacity: 0.5;
    margin-bottom: 5%;
}


#myCarousel:hover{
    pause;
}

.resume a{
    font-size: 15px;
}

.jumbotron {
	background: no-repeat center right fixed url(images/background.jpg);
    background-color:#22A39F;
	-webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale')";
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
	
	margin-bottom: 0px;
	padding: 0px;
}  

.jumbotron .container { position: relative; top: 28%; z-index: 4; text-align: center; }
.jumbotron .container > * { text-align: center; color: #FFFFFF; }
.jumbotron .container h1 { padding-bottom: 20px; border-bottom: 1px solid #FFFFFF; border-bottom-color: rgba(255,255,255,0.35); display: inline-block; }
.jumbotron .container .lead { font-size: 28px; }

.background-white { background: #FFFFFF; }
.background-gray { background: #434242; }
.container { max-width: 1280px; padding: 40px 180px; }

#profile .row > div { margin-bottom: 20px; }
#profile .row > div img { width: 100%; max-width: 246px; height: auto; }

.item *{
    text-align: center;
}

.carousel-inner{
    width:100%;
    max-height: 500px !important;
}

#projects{
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
    text-align: center;
    min-width: 100%;
    padding: 0;
}

#projects img{
    width: 400px;
    height: 300px;
    margin: auto;
    margin-bottom: 2%;
}

#projects h4{
    margin-top:5%;
}

.profile p{
    text-align: center;
}

/*
#projects .row > div { margin-bottom: 30px; }
#projects figure { position: relative; overflow: hidden; }
#projects figure h3 { color: #FFF; font-weight: 600; margin-bottom: 5px; }
#projects figure p > strong { width: 60px; display: inline-block; margin: 0px; }
#projects figure img { width: 110%; }
#projects figure figcaption {
    padding: 20px 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
#projects figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
#projects figure .icon { 
	background: #22A39F;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 48px;
	height: 48px;
}
#projects figure .icon span {
	font-size: 18px;
	line-height: 18px;
	padding: 15px;
}*/

#experiences .experience { margin-bottom: 20px; }
#experiences .experience p > strong { display: block; padding-top: 8px; margin-bottom: 10px; }
#experiences .experience .experience-details { display: block; margin-top: 6px; }
#experiences .experience .experience-details * { color: #22A39F; }
#experiences .experience .experience-details .seperator { color: #BCBCBC; }

#contact { padding-bottom: 200px; }
#contact h2, #contact .row * { color: #FFFFFF; }
#contact a { display: block; line-height: 32px; margin-bottom: 20px; opacity: 0.6; filter:alpha(opacity=60);  }
#contact a .icon { float: left; margin-right: 20px; }
#contact a:hover { opacity: 1; filter:alpha(opacity=100); text-decoration: none; }

@media (max-width: 767px) { 
	.jumbotron:before {
		bottom: 100px;
		left: 20px;
		right: 20px;
		top: 20px;		
	}
	.jumbotron .container { top: 20%; padding-top: 0px; }
	.jumbotron .scroll-down { width: 100%; right: 0px; }
	
	.container { padding: 60px 20px; min-width: 280px; }
    
    /*keep following line if you want no text to display on the mobile version*/ 
	/*.hidden-phone { display: none; }*/
	
    #experiences .experience .experience-details > span { display: block; margin-bottom: 6px; }
	#experiences .experience .experience-details .seperator { display: none; }
    
	#profile .row * { text-align: center; }
	
	#contact { padding-bottom: 60px; }
	#contact a .icon { float: left; margin-right: 10px; }
}