html, 
body {
	margin: 0;
	padding: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #222833;
	background-size: cover;
	overflow: hidden;}

.c1h_img01, .c1h_img02, .c1h_img03, .c1h_img04, .c1h_img05 {
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;}

.c1h_img01 {
	background: url("../images/home/img_01.jpg") no-repeat;
	background-size: cover;
	animation: h_img_one 24s linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;}

.c1h_img02 {
	background: url("../images/home/img_02.jpg") no-repeat;
	background-size: cover;
	animation: h_img_two 24s linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both}

.c1h_img03 {
	background: url("../images/home/img_03.jpg") no-repeat;
	background-size: cover;
	animation: h_img_three 24s linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;}

.c1h_img04 {
	background: url("../images/home/img_04.jpg") no-repeat;
	background-size: cover;
	animation: h_img_four 24s linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;}

.c1h_img05 {
	background: url("../images/home/img_05.jpg") no-repeat;
	background-size: cover;
	animation: h_img_five 24s linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;}

@keyframes h_img_one {	
	0%  {opacity:0.0;} 
	05% {opacity:1.0;} 
	15% {opacity:1.0;} 
	20% {opacity:0.0;} 
	25% {opacity:0.0;} 
	35% {opacity:0.0;} 
	40% {opacity:0.0;} 
	45% {opacity:0.0;} 
	55% {opacity:0.0;} 
	60% {opacity:0.0;} 
	65% {opacity:0.0;} 
	75% {opacity:0.0;} 
	80% {opacity:0.0;} 
	85% {opacity:0.0;} 
	95% {opacity:0.0;} 
	100%{opacity:0.0;}}   		 

@keyframes h_img_two {	
	0%  {opacity:0.0;} 
	05% {opacity:0.0;} 
	15% {opacity:0.0;} 
	20% {opacity:0.0;} 
	25% {opacity:1.0;} 
	35% {opacity:1.0;} 
	40% {opacity:0.0;} 
	45% {opacity:0.0;} 
	55% {opacity:0.0;} 
	60% {opacity:0.0;} 
	65% {opacity:0.0;} 
	75% {opacity:0.0;} 
	80% {opacity:0.0;} 
	85% {opacity:0.0;} 
	95% {opacity:0.0;} 
	100%{opacity:0.0;}}  	 

@keyframes h_img_three {	
	0%  {opacity:0.0;} 
	05% {opacity:0.0;} 
	15% {opacity:0.0;} 
	20% {opacity:0.0;} 
	25% {opacity:0.0;} 
	35% {opacity:0.0;} 
	40% {opacity:0.0;} 
	45% {opacity:1.0;} 
	55% {opacity:1.0;} 
	60% {opacity:0.0;} 
	65% {opacity:0.0;} 
	75% {opacity:0.0;} 
	80% {opacity:0.0;} 
	85% {opacity:0.0;} 
	95% {opacity:0.0;} 
	100%{opacity:0.0;}}  

@keyframes h_img_four {	
	0%  {opacity:0.0;} 
	05% {opacity:0.0;} 
	15% {opacity:0.0;} 
	20% {opacity:0.0;} 
	25% {opacity:0.0;} 
	35% {opacity:0.0;} 
	40% {opacity:0.0;} 
	45% {opacity:0.0;} 
	55% {opacity:0.0;} 
	60% {opacity:0.0;} 
	65% {opacity:1.0;} 
	75% {opacity:1.0;} 
	80% {opacity:0.0;} 
	85% {opacity:0.0;} 
	95% {opacity:0.0;} 
	100%{opacity:0.0;}}  

@keyframes h_img_five {	
	0%  {opacity:0.0;} 
	05% {opacity:0.0;} 
	15% {opacity:0.0;} 
	20% {opacity:0.0;} 
	25% {opacity:0.0;} 
	35% {opacity:0.0;} 
	40% {opacity:0.0;} 
	45% {opacity:0.0;} 
	55% {opacity:0.0;} 
	60% {opacity:0.0;} 
	65% {opacity:0.0;} 
	75% {opacity:0.0;} 
	80% {opacity:0.0;} 
	85% {opacity:1.0;} 
	95% {opacity:1.0;} 
	100%{opacity:0.0;}}  

.c1pl_img01, .c1ar_img01, .c1in_img01, .c1pr_img01, .c1ab_img01 {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0; 
	left: 0;}

.c1pl_img01 { 
	background: url("../images/planning/01.jpg");
	background-size: cover;
	opacity: .25;
	animation: bkgrd_img 4s linear;}

.c1ar_img01 {
	background: url("../images/architecture/01.jpg");
	background-size: cover;
	opacity: .25;
	animation: bkgrd_img 4s linear;}

.c1in_img01 {
	background: url("../images/interiors/01.jpg");
	background-size: cover;
	opacity: .25;
	animation: bkgrd_img 4s linear;}

.c1pr_img01 {
	background: url("../images/products/01.jpg");
	background-size: cover;
	opacity: .25;
	animation: bkgrd_img 4s linear;}

.c1ab_img01 {
	background: url("../images/about/01.jpg");
	background-size: cover;
	opacity: .25;
	animation: bkgrd_img 4s linear;}

@keyframes bkgrd_img {
	0%		{opacity:0.00;}
	12.5%	{opacity:0.25;}
	25%	{opacity:0.50;}
	37.5% {opacity:0.75;}
	50%	{opacity:1.00;}
	62.5%	{opacity:1.00;}
	75%	{opacity:0.75;}
	87.5%	{opacity:0.50;}
	100%	{opacity:0.25;}}

.c2 {
	float: left;
	height: 504px;
	width: 310px;
	text-align: left;
	padding: 0px;
	min-width: 310px;
	max-width: none;
	margin: none;
	background-color: none;
	opacity: 100;}

.c3 {
	position: static;
	height: 103px;
	width: 652px;
	text-align: left;
	margin: 0px 0px 0px 310px;
	background-color: blue;
	opacity: 0;} 

.c4pl_img02, .c4pl_img03, .c4pl_img04, .c4pl_img05,
.c4ar_img02, .c4ar_img03, .c4ar_img04, .c4ar_img05,
.c4in_img02, .c4in_img03, .c4in_img04, .c4in_img05,
.c4pr_img02, .c4pr_img03, .c4pr_img04, .c4pr_img05,
.c4ab_bkgrd {
	position: absolute; 
	left: 0;
	height: 400px; 
	width: 650px;
	border-radius: 54px;
	border: solid white 1px;
	margin: 0px 0px 0px 310px;}
	
.c4pl_img02 {
	background: url("../images/planning/02.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_one 24s linear; 
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pl_img03 {
	background: url("../images/planning/03.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_two 24s linear; 
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pl_img04 {
	background: url("../images/planning/04.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_three 24s linear; 
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pl_img05 {
	background: url("../images/planning/05.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_four 24s linear; 
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4ar_img02 {
	background: url("../images/architecture/02.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_one 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4ar_img03 {
	background: url("../images/architecture/03.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_two 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4ar_img04 {
	background: url("../images/architecture/04.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_three 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4ar_img05 {
	background: url("../images/architecture/05.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_four 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4in_img02 {
	background: url("../images/interiors/02.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_one 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4in_img03 {
	background: url("../images/interiors/03.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_two 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4in_img04 {
	background: url("../images/interiors/04.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_three 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4in_img05 {
	background: url("../images/interiors/05.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_four 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pr_img02 {
	background: url("../images/products/02.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_one 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pr_img03 {
	background: url("../images/products/03.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_two 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pr_img04 {
	background: url("../images/products/04.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_three 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c4pr_img05 {
	background: url("../images/products/05.jpg") no-repeat;
	background-size: 100% 100%;
	animation: img_four 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

@keyframes img_one {
	0%		{opacity:0.0;} 5%		{opacity:1.0;} 20%	{opacity:1.0;} 
	25%   {opacity:0.0;} 30%	{opacity:0.0;} 45%	{opacity:0.0;} 
	50%	{opacity:0.0;} 55%	{opacity:0.0;} 70%	{opacity:0.0;} 
	75%	{opacity:0.0;} 80%	{opacity:0.0;} 95%	{opacity:0.0;}
	100%	{opacity:0.0;}}

@keyframes img_two {
	0%	 	{opacity:0.0;} 5%		{opacity:0.0;} 20%	{opacity:0.0;} 
	25%   {opacity:0.0;} 30%	{opacity:1.0;} 45%	{opacity:1.0;}
	50%	{opacity:0.0;} 55%	{opacity:0.0;} 70%	{opacity:0.0;}
	75%	{opacity:0.0;} 80%	{opacity:0.0;} 95%	{opacity:0.0;}
	100%	{opacity:0.0;}}
		
@keyframes img_three {
	0%	 	{opacity:0.0;} 5%		{opacity:0.0;} 20%	{opacity:0.0;}
	25%	{opacity:0.0;} 30%	{opacity:0.0;} 45%	{opacity:0.0;}
	50%	{opacity:0.0;} 55%	{opacity:1.0;} 70%	{opacity:1.0;}
	75%	{opacity:0.0;} 80%	{opacity:0.0;} 95%	{opacity:0.0;}
	100%	{opacity:0.0;}}

@keyframes img_four {
	0%	 	{opacity:0.0;} 5%		{opacity:0.0;} 20%	{opacity:0.0;}
	25%	{opacity:0.0;} 30%	{opacity:0.0;} 45%	{opacity:0.0;}
	50%	{opacity:0.0;} 55%	{opacity:0.0;} 70%	{opacity:0.0;}
	75%	{opacity:0.0;} 80%	{opacity:1.0;} 95%	{opacity:1.0;}
	100%	{opacity:0.0;}}

@keyframes bkgrd {
	0%   {opacity:0.00;}
	25%  {opacity:0.25;}
	50%  {opacity:0.50;}
	75%  {opacity:0.75;}
	100% {opacity:1.0;}}	

.c4ab_bkgrd {
	background-size: 100% 100%;
	animation: bkgrd 4s linear;
	animation-delay: 4s; 
	background-color: #222833;
	animation-fill-mode: both;}

.c4ab_txt {
	position: absolute;
	height: 290px; 
	width: 510px;
	margin: 55px 80px 55px 80px;
	font-family: arial;
	font-size: 80%;
	font-weight: normal;
	color: white;
	text-align: justify;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: .25px;
	word-spacing: .5px;
	line-height: 17px;
	overflow-y: auto; 
	padding: 0px 80px 0px 0px;
	opacity: 1.0;
	background-size: 100% 100%;
	animation: bkgrd 4s linear;
	animation-delay: 5s; 
	animation-fill-mode: both;}

#ind_1 {
	font-size: 125%; 
	font-weight: bold;
	text-indent: 42px; 
	line-height: 1;}

#ind_2 {
	text-indent: 42px;}

#ind_3 {
	padding: 0px 0px 0px 42px;
	font-style: none;
	margin: 0em;}

#ind_4 {
	font-size: 100%;
	padding: 0px 0px 0px 42px;}

#ind_5 {
	font-size: 100%;
	padding: 0px 0px 0px 42px;}

.c5h1,  .c5h2,  .c5h3,  .c5h4,  .c5h5,
.c5pl1, .c5pl2, .c5pl3, .c5pl4, .c5pl5,
.c5ar1, .c5ar2, .c5ar3, .c5ar4, .c5ar5,
.c5in1, .c5in2, .c5in3, .c5in4, .c5in5,
.c5pr1, .c5pr2, .c5pr3, .c5pr4, .c5pr5,
.c5ab1 {
	position: absolute;
	left: 139px;
	top: 375px;
	height: 63px;
	width: 63px;
	background-color: none;
	color: none;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
	color: red;}

.c5h1 {
	animation: h_img_one 24s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	color: white;}

.c5h2 {
	animation: h_img_two 24s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	color: white;}

.c5h3 {
	animation: h_img_three 24s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	color: white;}

.c5h4 {
	animation: h_img_four 24s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	color: white;}

.c5h5 {
	animation: h_img_five 24s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	color: white;}

@keyframes number {
	0%   {opacity:0.0;}
	30%  {opacity:1.0;}
	50%  {opacity:1.0;}
	70%  {opacity:1.0;}
	100% {opacity:0.0;}}	

.c5pl1, .c5ar1, .c5in1, .c5pr1 {
	animation: number 4s linear;
	animation-fill-mode: forwards;	
	animation-iteration-count: 1;}

.c5pl2, .c5ar2, .c5in2, .c5pr2 {
	animation: img_one 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;	
	animation-iteration-count: infinite;}

.c5pl3, .c5ar3, .c5in3, .c5pr3 {
	animation: img_two 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c5pl4, .c5ar4, .c5in4, .c5pr4 {
	animation: img_three 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;	
	animation-iteration-count: infinite;}

.c5pl5, .c5ar5, .c5in5, .c5pr5 {
	animation: img_four 24s linear;
	animation-delay: 4s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;}

.c5ab1 {
	animation: bkgrd 4s linear;
	animation-fill-mode: both;}

.homep, .home, .home:hover{
	left: 50px;
	top: 50px;
	position: absolute;
	border-radius: 14px;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;}

.homep{
	border: solid white 1px;
	color: white;
	padding: 11px 15px 11px 14px;
	min-width: 180px;
	max-width: 300px;
	background-color: #222833;}

.home{
	border: solid white 1px;
	color: white;
	padding: 11px 15px 11px 14px;
	min-width: 180px;
	max-width: 300px;
	background-color: #222833;	}

.home:hover{
	color: #222833;
	border: solid #222833 1px; 
	background-color: white;
	padding: 09px 13px;}

.planp, .plan, .plan:hover{
	position: absolute;
	border-radius: 14px;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;}

.planp{
	left: 139px;
	top: 125px;
	color: red;}

.plan{
	left: 139px;
	top: 125px;
	color: white;}

.plan:hover{
	left: 125px; 
	top: 115px;
	color: #222833;
	border: solid #222833 1px; 
	background-color: white;
	padding: 09px 13px;}

.archp, .arch, .arch:hover{
	position: absolute;
	border-radius: 14px;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;}

.archp{
	left: 139px;
	top: 175px;
	color: red;}

.arch{
	left: 139px;
	top: 175px;
	color: white;}

.arch:hover{
	left: 125px;
	top: 165px;
	color: #222833;
	border: solid #222833 1px;
	background-color: white;
	padding: 09px 13px;}
	
.intep, .inte, .inte:hover{
	position: absolute;
	border-radius: 14px;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;}

.intep{
	left: 139px;
	top: 225px;
	color: red;}

.inte{
	left: 139px;
	top: 225px;
	color: white;}	

.inte:hover{
	left: 125px;
	top: 215px;
	color: #222833;
	border: solid #222833 1px;
	background-color: white;
	padding: 09px 13px;}

.prodp, .prod, .prod:hover{
	position: absolute;
	border-radius: 14px;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;}

.prodp{
	left: 139px;
	top: 275px;
	color: red;}

.prod{
	left: 139px;
	top: 275px;
	color: white;}
	
.prod:hover{
	left: 125px;
	top: 265px;
	color: #222833;
	border: solid #222833 1px;
	background-color: white;
	padding: 09px 13px;}

.aboup, .abou, .abou:hover{
	position: absolute;
	border-radius: 14px;
	font-family: arial;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;}

.aboup{
	left: 139px;
	top: 325px;
	color: red;}

.abou{
	left: 139px;
	top: 325px;
	color: white;}

.abou:hover{
	left: 125px;
	top: 315px;
	color: #222833;
	border: solid #222833 1px;
	background-color: white;
	padding: 09px 13px;}

.logo{
	background: url("logo.jpg") no-repeat;
	background-size: contain;
	position: absolute;
	left: 64px;
	top: 400px;
	height: 63px;
	width: 63px;
	background-color: none;
	border: solid white 1px;
	border-radius: 50px;}