html, body {
	margin:0;
	padding:0;
	height:100%;
	background-color:#FFFFFF;
	font-family:'Sofia Sans', Tahoma, Geneva, sans-serif;
	margin-right: auto;
	margin-left: auto;
	width:100%;


}
#wrap {
	min-height:100%;
	position:relative;
}
.bodytext {
	font-size: 1.2rem;
	font-weight: 200;
}

.bodytext .h3 {

	font-weight: 200 !important;
	text-align: center;
}

.h1 {
	font-family:'Sofia Sans', Tahoma, Geneva, sans-serif;
	padding-left: 15px;
	font-weight:400  !important ;
	text-align:left;

}
.h2 {
	font-family:'Sofia Sans', Tahoma, Geneva, sans-serif;
	padding-left: 15px;
	font-weight:700;
	text-align:left;

}
#footer {
	width:100%;
	height:40px;
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background-color:#E3E3E6;
	padding-top:5px;
	border-top:#000000 5px solid;
	margin: 0px 0px -40px 0px;
}
*, *:after, *:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
img {
	width: auto;
	max-width: 100%;
	height: auto !important;
}
.wrapper {
	width: 100%;
	margin: 0 auto;
}
.wrapper:after, .row:after {
	content: "";
	display: table;
	clear: both;
}
 [class*='column-'] {
 float: left;
 padding: 0;
 width: 100%;
 min-height: 1px;
}
.lanks:link {
	text-decoration: none;
	padding:0px 10px 0px 10px;
}
.lanks:visited {
	text-decoration: underline;
}
.lanks:hover {
	border-color:#B85F5C;
	text-decoration: none;
}
.lanks:active {

	border-color:#C60000;
}
.selected {
	border-color:#C60000;
	text-decoration: none;
}
/*[class*='column-'] {

background-color:#F4F4F4;
padding:5px;
border:#FFFFFF thin solid;
}*/
 @keyframes slideInTop {
    0% {
      transform: translateY(50%);
      opacity: 0;

    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
 @keyframes fadeIn {
    0% {
      opacity: 0;

    }
    100% {
      opacity: 1;
    }
  }
 @keyframes slideDown {
    0% {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-150%);
/*  transform:  rotate(0deg) scaleX(1) scaleY(0) ;*/


    }
    100% {
    opacity: 1;
    	filter: blur(0);
    transform: translateY(0);
/*      transform:  rotate(0deg) scaleX(1) scaleY(1) ;*/

    }
  }



.project-images {
  height: 265px;
  border-radius: 10px;
  box-shadow: 21px 21px 40px rgba(0, 0, 0, 0.15);
}


.project-images img{
    width: 100% !important;
  height: 100% !important;
  object-fit: cover; ;
  object-position: top ;
    border-radius: inherit;
     transition: all 02s ease;
}

.project-images img:hover {
  transform: ;
    object-position: bottom ;
      transition: all 05s ease;
}

	
.t3 {
	padding: 5px;
	width: 95%;
	text-align:left;
	font-size:1.5rem;
	background-color: #000000;
	margin: 0px auto;
	color: #ffffff;

}

.t3 div {
	font-size:15px;
	color: #ffffff;
}

.tp3 {
	padding-top: 5px;
	padding-left:15px;
	padding-bottom:20px;
	width: 95%;
	margin: 0px auto;
	text-align:left;
	font-size:1.4rem;
	line-height: 1.8rem;
	font-weight: 200;
	animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: fadeIn;
}

.tp3 ul li:nth-child(0){
	animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(2){
	animation-duration: 200ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(3){
	animation-duration: 300ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(4){
	animation-duration: 400ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(5){
	animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(6){
	animation-duration: 600ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(7){
	animation-duration: 700ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}

.tp3 ul li:nth-child(8){
	animation-duration: 800ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: slideDown;
}




.fadeIn {
	animation-duration: .7s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
	animation-name: fadeIn;

}

.tp2 {
	padding: 5px;
	padding-left:15px;
	padding-bottom:20px;
	width: 95%;
	background-color: #ffffff;
	margin: 0px auto;
	text-align:left;
	font-size:1.3rem;
	line-height: 2rem;
}

.c9 {text-align:left; 
font-weight:700;
 padding-left:15px;
 font-size:24px;
 
 }

 .text-bgc{

 }
 
 
.c9d {text-align:left; 
font-weight:700;
 padding-left:10px;
 
 }

.try {
	padding-top:10px;
}
@media only screen and (min-width: 30em) {
 .wrapper {
 width: 95%;
 max-width: 65em;
}
 .column-1 {
 width: 8.33333%;
}
 .column-2 {
 width: 16.66667%;
}
 .column-3 {
 width: 25%;
}
 .column-4 {
 width: 33.33333%;
}
 .column-5 {
 width: 41.66667%;
}

 .column-6 {
 width: 50%;
}
 .column-7 {
 width: 58.33333%;
}
 .column-8 {
 width: 66.66667%;
}
 .column-9 {
 width: 75%;
}
 .column-10 {
 width: 83.33333%;
}
 .column-11 {
 width: 91.66667%;
}
 .column-12 {
 width: 100%;
}
		
/*   */		
		.try {
 padding-top:0px;
}


/* Destop Styling  */

#myname {
font-size: 25px;
text-align: left;
padding-left: 20px;
}
}
/*demo styling*/	
* {
	color: #000000;
}
span {
	display: block;
 background:;
	padding: 0;
	text-align: center;
}
#stuff {
	display: inline;
 background:;
	padding: 0;
	text-align: center;
}

.pr-6,
.px-6 {
  padding-right: 3rem !important;
}

.h3 {
  font-weight: 400 !important;
}

.tp3 ul {
  --icon-space: 1.3em;
  list-style: none;
  padding: 0;
}

.tp3 li {
  padding-left: var(--icon-space);
}

.tp3 li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc( var(--icon-space) * -1 );
  width: var(--icon-space);
}

.hidden {
	opacity: 0;
	transition: all 1s; 
	filter: blur(5px);
	transform: translateX(-100%);
}

.show {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0);
}