*{
  box-sizing:border-box !important;
}
body {
  background-color: #f2f2f2;
    font-family: "Roboto";
    font-weight: 300;
    font-size: 16px;
    color: #555;
  height: 100vh !important;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}
/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #333;
}

.jumbotron_my {
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0.3rem;
}

/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 10px;
}

.bg-index{
  background: linear-gradient(rgba(60, 60, 60, 0.5), rgba(0, 0, 0, 0.3)), url("/static/img/background.jpg") no-repeat top;
  background-size: cover;
  top: 0;
  height: 600px;
  width: 100vw;
  z-index: -1;
  overflow-x: hidden;
}

.ms-footer {
  background-color: #4e4e4e;
}
.ms-footer p {
   color: #7F7F7F;
  font-size: 16px;
}
.ms-footer a:hover {
  text-decoration: none;
}
.ms-footer-bottom {
  background-color: #af1d1d;

}
.ms-footer-bottom span{
  font-size: 14px;
  line-height: 38px;
}

/* Links */
a {
    color: #f85c37;
    word-wrap: break-word;

    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #7b7b7b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}


/* ======================

----- FIRST SECTION------

=======================*/
.first-section {
	/* background-image: url(../img/first-section-bg.png); */
	background-color: #af1d1d;
	background-size: cover;
	width: 100%;
	background-repeat: no-repeat;
	padding: 2% 0px 2% 0px;

}

.first-section .text-content {
	text-align: right;
	color: #fff;

}

.first-section .text-content h2 {
	font-size: 44px;
	/* text-transform: uppercase; */
	font-weight: 900;
	letter-spacing: 1px;
	color: #fff;

}

.first-section .text-content .line-dec {
	width: 360px;
	height: 3px;
	background-color: #fff;
	margin: 25px 0px 25px auto;
}



.first-section .text-content span {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 1px;
}



/* Bootstrap Modifications */
 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
/* WRAP SECTIONS */

/* hello */
#hello {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
}

#hello h1 {
	font-size: 3em important!;
	font-weight: 400;
	letter-spacing: 3px;
	color: #af1d1d;
}

#hello h2 {
	color: #c0c0c0;
	font-weight: 200;
}

/* Green */
#green {
	background-color: #af1d1d;
	padding-top: 50px;
	margin-bottom: 0px;
}

#green h3 {
	color: white;
	font-weight: 200;
	font-size: 1.5em;
	margin-bottom: 35px;
}

#green p {
	color: white;
	font-weight: 400;
	font-size: 20px;
}

/* Skills */
#skills {
	background-color: #4e4e4e;
	padding-top: 50px;
	padding-bottom: 50px;
	margin-top: 50px;
}

#skills h3 {
	color: white;
}

#skills p {
	color: white;
	font-weight: 400;
}
.page-link:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
    background-color: rgb(250,250,250);
}

/* Social Links */
#social {
	width: 100%;
	padding-top: 40px;
	padding-bottom: 20px;
}

#social i {
	font-size: 50px;
	color: #af1d1d;
}

#social .col-md-3:hover {
	background-color: #f5f5f5;
}

#social .col-md-3 {
	padding:30px;
}

/* Footer */
#f {
	padding-top: 20px;
	background-color: #af1d1d;
}

#f p {
	color: white;
	text-align: right;
	font-weight: 400;
}

/* Image Opacity */
.grid img {
    opacity: .7;
}
.grid img:hover {
    opacity: 1;
}

.img-fluid {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.padding {
    padding-bottom: .5em;
}
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0.25rem;
}
.card-img {
    max-width: 95%;
}
.card-header a {
    color: #f85c37;
}
.card-title a {
    color: #f85c37;
}
.card-text a {
    color: #f85c37;
}