body {
	color:#000000;
	font: 400 17px/1.5 Lato, sans-serif;}

.bgimage {
	background-image:url(...);
	background-position:center;
	background-size:cover;
	height:600px;}
	
.icon {
	max-width: 250px;
	margin: 0 auto;
	display: block;}

.services section {
	text-align: center;}

	
@media(min-width: 1200px) {
	.content-container {
		width: 100%;}
	.content h1 {
		/*font-size: 54px;*/
		margin: 10px 0 30px 0;
	    letter-spacing: 10px;      
	    font-size: 35px;
	    color: #111;}
	.content section h1 {
		font-size: 40px;}
	.content section h2 {
		font-size: 36px;
		margin: 10px 0 30px 0;
    	letter-spacing: 10px;}
	.content section h3 {
		font-size: 28px;
		margin: 10px 0 30px 0;
    	letter-spacing: 2px;}
	.content section h4 {
		color: grey;}
	.content section h5 {
		font-size: 20px;
		margin: 10px 0 30px 0;
    	letter-spacing: 10px;
	}
	.content section p {
		/*font-size: 24px;*/
		font: 400 17px/1.5 Lato, sans-serif !important;
    	color: #000;}
	.content section ul {
		font-size: 400 17px/1.5;
		text-align: left;}
	.content section {
		text-align: center;}}
	/*for button links*/
	/*.content section .btn {
		font-size: 18px;
	    padding: 10px 20px;
	    background-color: #006400;
	    color: #eff1f3;
	    border-radius: .5em;
	    transition: .2s;}
	.content section .btn:hover, .btn:focus {
	    border: 1px solid #333;
	    background-color: #FFF;
	    color: darkblue;}
	*/
	/*dropdown css*/
	.content section .accordion {
	    background-color:#DB7093;
	    color:#000;
	    cursor:pointer;
	    padding:15px;
	    width:100%;
	    border:none;
	    text-align:left;
	    outline:none;
	    font-size:20px;
	    transition:0.4s;
		font-family:Montserrat, sans-serif;}
	.content section .accordion:hover {
	    background-color:#29292c;
		color:#fff;}
	.content section .accordion:active {
	    background-color:#29292c;
		color:#fff;}
	.content section .panel {
	    padding: 0px 18px;
	    display:block;
	    background-color:#f1f1f1;
	    max-height: 0;
	    overflow: hidden;
	    transition: 0.2s ease-out;}
	.content section .panel h3 {
		letter-spacing: 1px;}
	.content section .panel p {
		font-family:400 19px/1.5 Lato, sans-serif;
		color:#000;
		font-size:18px;}
	.content section .panel a {
		font-family:400 19px/1.5 Lato, sans-serif;
		color:#228B22;
		font-size:18px;
		font-weight: bold;}
	/*end dropdown css*/
	.content section .container-fluid {
	  padding-right: 15px;
	  padding-left: 15px;
	  margin-right: auto;
	  margin-left: auto;}

/* Nav bar */
.nav {
	font-family: Montserrat, sans-serif;
	font-size: 20px !important;
	margin-bottom: 0px;
	color: black;
	background-color: #FFB6C1;
	letter-spacing: 4px;
	/*position: fixed;
	width: 100%;
	z-index: 1;*/}
/* Text */
.nav-item a {
	color: #000 !important;}
/* Text when hovering */
.nav-item a:hover {
	color: #fff !important;
	background-color: #DC143C !important;}
/* Text When Clicked */
.nav-item a:active {
	color: #fff !important;
    background-color: #29292c !important;}
.nav>.active>a {
	color: #fff !important;
    background-color: #29292c !important;}
.nav-item.scrolled a {
	color:  #fff !important;
	background-color: #29292c !important;
	transition: background-color 200ms linear;}
/* end of Nav bar */

/* for download button */
.download_btn {
	background-color: #DB7093;
	border: none;
	color: #000;
	padding: 10px;
	cursor: pointer;
	font-size: 20px;
	border-radius: .5em;}
.download_btn a {
	color: #000;
	font-style: bold;}
/* Darker background on mouse-over */
.download_btn:hover {
	background-color: #FFB6C1;}
/* end download button */

/* for skills bars */
.skillbar {
	width: 100%;
	background-color: #FFB6C1;
	border-radius: 3em;
	font-family: Montserrat, sans-serif;}

.skills {
	font-family: Montserrat, sans-serif;
	text-align: right;
	padding-right: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #fff;
	border-radius: 3em 0em 0em 3em;}

.html {width: 95%; background-color: #29292c;}
.css {width: 95%; background-color: #29292c;}
.py {width: 92%; background-color: #29292c;}
.r {width: 92%; background-color: #29292c;}
.sql {width: 81%; background-color: #29292c;}
.jv {width: 65%; background-color: #29292c;}
.js {width: 25%; background-color: #29292c;}

.dw {width: 88%; background-color: #29292c;}
.ex {width: 85%; background-color: #29292c;}
.ps {width: 70%; background-color: #29292c;}
.is {width: 70%; background-color: #29292c;}
.gh {width: 60%; background-color: #29292c;}
.fa {width: 50%; background-color: #29292c;}
.qt {width: 75%; background-color: #29292c;}
/* end skills bar */

/* for thumbnail */
.thumbnail {
	padding: 0 0 15px 0;
	border: none;
	border-radius: 3em;
	background-color: #2d2d30;
	font-size:15px;}
.thumbnail p {
	margin-top: 15px;
	color: #555;}
.thumbnail img {
	border-radius: 3em 3em 0 0;}
.project_btn {
	padding: 10px 20px;
	background-color: #DB7093;
	color: #000;
	border-radius: 2em;
	transition: .2s;
	font-family:Montserrat, sans-serif;}
.project_btn:hover, .project_btn:focus {
	border: 1px solid #333;
	background-color: #DC143C;
	color: #fff;}
/* end thumbnail */

/* for expand more blog */
.content section .expandMoreContent {
  height: 92px;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
  position: relative;}
.content section .expandMoreContent.expand-active {
  height: auto;
  transition: height 0.5s ease-in-out;}
.content section .expandMoreHolder {
  padding: 15px 0px;
  text-align: center;}
.content section .btn-expand-more {
  cursor: pointer;
  border: none;
  display: inline-block;
  color: #DB7093;
  font-size: 18px;
  font-weight: bold;}
.content section .btn-expand-more:hover {
  text-decoration: underline;
  background-color: #29292c;
  color: #FFFFFF;}
/* end expand more blog */

footer {
    font: 400 10px/1.8 Lato, sans-serif;
    background-color: #2d2d30;
    color: #f5f5f5;
    padding: 32px;}
footer p {
	font-size: 10px;}
footer a {
    color: #f5f5f5;}
footer a:hover {
    color: #777;
    text-decoration: none;}