@charset "utf-8";
/* CSS Document */
/*Desktop with smaller screens*/
@media only screen and (min-width: 1199px) and (max-width: 1366px) {
	
	.container{		
	}
	#animation_h img{
		height:750px;
		margin:-180px 0 0 280px;
	}	
	
}
/*big tablets landscape mode */
@media only screen and (min-width: 960px) and (max-width: 1199px) and (orientation:landscape){
	 #lightfixtop, #lightfixbottom, .curtain, #spotlight{
		display:none;
	}		
	#animation_h img{
		height:700px;
		margin:-15% 0 0 20%;	
	}
	#penobj{
		width:10%;
		height:10%;
		left:10%;
		top:65%;
	}
	#menupen1{		
		width:240%;
		height:100%;	  
	}
	.navigation{
		width:28%;
		height:54%;
		font-size:100%;
		top:20%;
	}	
	#gallery{
		left:15%;	
	}		
	input, textarea{
		width:66%;
		height:34px;
		font-size:18px;
	}	
	input.name, input.email, textarea, .select-field {
		background-position: 10px 10px;
		margin-bottom:15px;
	}	
	select{		
		width:100%;
		height:34px;
		font-size:18px;		
	}
	textarea{
		height:40px;
	}
	.formhead{
		margin-top:7%;
	}
	.abt_content p{
		font-size:18px;
	}
	#website{
		width:40%;
		height:65%;	
		margin-top:20%;
		margin-right:-7%;
	}	
	#apps{
		width:25%;
		height:30%;
		margin-top:45%;
		margin-right:6%;
		-ms-transform: rotate(-25deg);
		-webkit-transform: rotate(-25deg);
		-moz-transform:rotate(-25deg);
		-o-transform: rotate(-25deg);
		transform: rotate(-25deg);
		
	}
	#marketing{
		width:30%;
		height:40%;
		margin-left:25%;		
	}
	#values{	
		width:35%;
		height:50%;	
	}
	#aboutme{
		width:40%;
		height:45%;	
		margin-top:30%;
		margin-left:63%;
		position:absolute;
		z-index:3;
	}
}
/*big tablets portrait*/
@media only screen and (min-width: 960px) and (max-width: 1199px) and (orientation:portrait){
	.container{
		
		
	}
	#animation_h img{
		height:700px;
		
	}
	#vcards{
		height:500px;
		margin:-55px 0 0 -325px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 959px) and (orientation:portrait) {
	#lightfixtop, #lightfixbottom, .curtain, #spotlight, #gallery, #contactform{
		display:none;
	}
	#contactus{
		background:url(../img/Tile%20for%20Website.png) repeat !important;
	}
	#gallery_browse{
		display:block;
		font-size:larger;		
	}
	#rg-gallery{
		display:block;
		width:55%;
		margin-left:35%;
		margin-top:1%;
		height:100%;
	}
	#animation_h img{
		height:600px;
		margin:-10% 0 0 25%;	
	}
	#penobj{
		width:10%;
		height:10%;
		left:10%;
		top:65%;
	}
	#menupen1{
		margin-left:30%;
		margin-top:-35%;
		width:220%;
		height:100%;	  
	}
	.navigation{
		width:35%;
		height:55%;
		font-size:100%;
		top:20%;
	}	
	#socialicons{
		left:45%;
		top:2%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
		margin-left:-20%;
		font-size:20px;
					
	}	
	#emailus{
		display:block;
	}
	.abt_content p{
		font-size:18px;
	}
	#website{
		width:45%;
		height:65%;	
		margin-top:17%;
		margin-right:-10%;
	}
	#apps{
		width:27%;
		height:30%;
		margin-top:43%;
		margin-right:-7%;
	}
	#marketing{
		width:30%;
		height:30%;
		margin-left:25%;		
	}
	#values{	
		width:40%;
		height:50%;	
	}
	#aboutme{
		width:40%;
		height:45%;	
		margin-top:35%;
		margin-left:60%;
		position:absolute;
		z-index:3;
	}
}
@media only screen and (min-width: 768px) and (max-width: 959px) and (orientation:landscape) {
	#lightfixtop, #lightfixbottom, .curtain, #spotlight, #gallery, #contactform{
		display:none;
	}
	#contactus{
		background:url(../img/Tile%20for%20Website.png) repeat !important;
	}
	#gallery_browse{
		display:block;
		font-size:larger;		
	}
	#rg-gallery{
		display:block;
		width:55%;
		margin-left:35%;
		margin-top:1%;
		height:100%;
	}
	#animation_h img{
		height:600px;
		margin:-10% 0 0 25%;	
	}
	#penobj{
		width:10%;
		height:10%;
		left:10%;
		top:65%;
	}
	#menupen1{
		margin-left:30%;
		margin-top:-35%;
		width:220%;
		height:100%;	  
	}
	.navigation{
		width:35%;
		height:55%;
		font-size:100%;
		top:20%;
	}	
	#socialicons{
		left:45%;
		top:2%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
		margin-left:-20%;
		font-size:20px;
					
	}	
	#emailus{
		display:block;
	}
	.abt_content p{
		font-size:18px;
	}
	#website{
		width:45%;
		height:65%;	
		margin-top:17%;
		margin-right:-10%;
	}
	#apps{
		width:27%;
		height:30%;
		margin-top:43%;
		margin-right:-7%;
	}
	#marketing{
		width:30%;
		height:30%;
		margin-left:25%;		
	}
	#values{	
		width:40%;
		height:50%;	
	}
	#aboutme{
		width:40%;
		height:45%;	
		margin-top:35%;
		margin-left:60%;
		position:absolute;
		z-index:3;
	}
}
@media only screen and (min-width: 721px) and (max-width: 767px){
		#lightfixtop, #lightfixbottom, .curtain, #spotlight, #gallery, #contactform{
		display:none;
	}
	#contactus{
		background:url(../img/Tile%20for%20Website.png) repeat !important;
	}
	#gallery_browse{
		display:block;
		font-size:larger;		
	}
	#rg-gallery{
		display:block;
		width:55%;
		margin-left:35%;
		margin-top:1%;
		height:100%;
	}
	#animation_h img{
		height:600px;
		margin:-10% 0 0 25%;	
	}
	#penobj{
		width:10%;
		height:10%;
		left:10%;
		top:65%;
	}
	#menupen1{
		margin-left:30%;
		margin-top:-35%;
		width:220%;
		height:100%;	  
	}
	.navigation{
		width:35%;
		height:55%;
		font-size:100%;
		top:20%;
	}	
	#socialicons{
		left:45%;
		top:2%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
		margin-left:-20%;
		font-size:20px;
					
	}	
	#emailus{
		display:block;
	}
	.abt_content p{
		font-size:18px;
	}
	#website{
		width:45%;
		height:65%;	
		margin-top:17%;
		margin-right:-10%;
	}
	#apps{
		width:29%;
		height:30%;
		margin-top:-3%;
		margin-right:-7%;
	}
	#marketing{
		width:32%;
		height:30%;
		margin-left:30%;		
	}
	#values{	
		width:40%;
		height:50%;	
	}
	#aboutme{
		width:43%;
		height:45%;	
		margin-top:40%;
		margin-left:63%;
		position:absolute;
		z-index:3;
	}
}
/*Note2 size phones :landscape*/
@media only screen and (min-device-width: 720px) and (max-device-width: 720px) and (orientation:landscape){
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg,  #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask, #gallery_browse{
		display:block;
	}		
	.pages{		
		padding-left:10px;		
		width:95%;	
		height:90%;	
		overflow:auto;	
	}
	.pagename{				
		height:20%;	
		font-size:30px;
		margin-top:13%;
	}						
	#aboutus{
		top:100%;
		left:0%;
		width:100%;
		height:100%;		
	}
	#mobile_content_abt
	{
		width:95%;
		margin-top:30%;	
	}
	#mobile_content_abt h2
	{
		font-weight: 900;
		font-size: 28px;	
		margin: 10px;
		padding: 10px;	
	}
	#mobile_content_abt p{		
		font-weight: 600;
		font-size: 25px;	
		margin: 7px;
		padding: 7px;
	}
	#contactus{
		top:200%;
		left:0%;
		padding-left:0;
		padding-right:0;		
	}
	#socialicons h1{
		font-weight:900;
		font-size:38px;
		line-height:40px;
	}
	
	#socialicons{
		left:25%;
		top:12%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
		top:80%;
		left:150%;
		font-size:26px;
		position:absolute;
		z-index:3;			
	}
	#emailus{
		margin-top:5%;
		font-size:26px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:30%;	
	}	
	#gallery_browse{
		font-size:28px;
		font-weight:600;
		line-height:30px;
	}
	#footer{
		font-size:26px;
	}		
	
}
/*Note2 size phones :portrait*/
@media only screen and (min-device-width: 720px) and (max-device-width: 720px) and (orientation:portrait){
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg,  #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask, #gallery_browse{
		display:block;
	}		
	.pages{		
		padding-left:10px;		
		width:95%;			
	}
	.pagename{				
		height:12%;	
		font-size:30px;
		margin-top:13%;
	}						
	#aboutus{
		top:100%;
		left:0%;
		width:100%;
		height:100%;		
	}
	#mobile_content_abt
	{
		width:95%;
		margin-top:30%;	
	}
	#mobile_content_abt h2
	{
		font-weight: 900;
		font-size: 28px;	
		margin: 10px;
		padding: 10px;	
	}
	#mobile_content_abt p{		
		font-weight: 600;
		font-size: 25px;	
		margin: 7px;
		padding: 7px;
	}
	#contactus{
		top:200%;
		left:0%;
		padding-left:0;
		padding-right:0;		
	}
	#socialicons h1{
		font-weight:900;
		font-size:38px;
		line-height:40px;
	}
	
	#socialicons{
		left:25%;
		top:12%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
		top:150%;
		left:0%;
		font-size:26px;
		position:absolute;
		z-index:3;			
	}
	#emailus{
		margin-top:5%;
		font-size:26px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:30%;	
	}	
	#gallery_browse{
		font-size:28px;
		font-weight:600;
		line-height:30px;
	}
	#footer{
		font-size:26px;
	}		
	
}
/*Smart phones iphone,s2,.. sizes :portrait*/
@media only screen and (min-width: 480px) and (max-width: 719px) and (orientation:portrait){	
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg, #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask ,#gallery_browse{
		display:block;
	}
	.pages{
		padding-left:10px;							
		height:90%;
		width:95%;
		overflow:auto;		
	}
	#aboutus{
		top:100%;
		left:0%;								
	}
	#mobile_content_abt p{				
		font-size: 20px;	
	}
	#contactus{
		top:200%;
		left:0%;		
	}	
	#socialicons{
		left:20%;
		top:8%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;		
		font-size:15px;
		margin-top:-10%;
		margin-left:-10%;
		background:none;
	}
	#emailus{
		margin-top:-1%;
		font-size:15px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:17%;
	}
	#portfolioname{
		font-size:15px; 
		margin-top:1%;
	}
	#portfolio_name{
		height:10%; 
		margin-top:0%;
	}
}
/*Smart phones iphone,s2,.. sizes :landscape*/
@media only screen and (min-width: 480px) and (max-width: 719px) and (orientation:landscape){	
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg, #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask ,#gallery_browse{
		display:block;
	}
	.pages{
		padding-left:10px;							
		height:90%;
		width:95%;
		overflow:auto;		
	}
	.pagename{
		height:25%;
	}
	#aboutus{
		top:100%;
		left:0%;								
	}
	#mobile_content_abt p{				
		font-size: 16px;	
	}
	#contactus{
		top:200%;
		left:0%;		
	}	
	#socialicons{
		left:20%;
		top:8%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;		
		font-size:15px;
		margin-top:-10%;
		margin-left:-10%;
		background:none;
	}
	#emailus{
		margin-top:-1%;
		font-size:15px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:17%;
	}
	#portfolioname{
		font-size:15px; 
		margin-top:1%;
	}
	#portfolio_name{
		height:18%; 
		margin-top:0%;
	}
}
/*smart phones portrait*/
@media only screen and (min-width: 320px) and (max-width: 479px) and (orientation:portrait){	
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg, #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask ,#gallery_browse{
		display:block;
	}
	.pages{
		padding-left:10px;	
		padding-top:10px;		
		height:90%;
		width:95%;
		overflow:auto;		
	}
	#aboutus{
		top:100%;
		left:0%;								
	}
	#mobile_content_abt p{				
		font-size: 14px;	
	}
	#contactus{
		top:200%;
		left:0%;		
	}	
	#socialicons{
		left:20%;
		top:8%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;		
		font-size:15px;
		margin-top:-10%;
		margin-left:-10%;
		background:none;
	}
	#emailus{
		margin-top:-1%;
		font-size:15px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:17%;
	}
	#portfolioname{
		font-size:15px; 
		margin-top:1%;
	}
	#portfolio_name{
		height:10%; 
		margin-top:-1%;
	}
}
/*Small Screen landscape*/
@media only screen and (min-width: 320px) and (max-width: 479px) and (orientation:landscape){	
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg, #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask ,#gallery_browse{
		display:block;
	}
	.pages{
		padding-left:10px;							
		height:90%;
		width:95%;
		overflow:auto;		
	}
	.pagename{
		height:25%;
	}
	#aboutus{
		top:100%;
		left:0%;								
	}
	#mobile_content_abt p{				
		font-size: 14px;	
	}
	#contactus{
		top:200%;
		left:0%;		
	}	
	#socialicons{
		left:20%;
		top:8%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;		
		font-size:15px;
		margin-top:-10%;
		margin-left:-10%;
		background:none;
	}
	#emailus{
		margin-top:-1%;
		font-size:15px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:17%;
	}
	#portfolioname{
		font-size:15px; 
		margin-top:1%;
	}
	#portfolio_name{
		height:18%; 
		margin-top:0%;	
	}
}
/*Small Screen portrait*/
@media only screen and (max-width: 320px) and (orientation:portrait){	
	.container, #animation_h, .navigation, #logoanim1, #penobj, #lightfixtop, #lightfixbottom, .curtain, #spotlight, .abt_content, #extra_a, #extra_p, #extra_h, #extra_c, #gallery, #contactform, #contact_bg, #map{
		display:none;
	}	
	.top-bar, .nav, .pagename, #mobile_content_abt, #rg-gallery, #socialicons, #call, #emailus, #logo, #mask ,#gallery_browse{
		display:block;
	}
	.pages{
		padding-left:10px;			
		height:90%;
		width:95%;
		overflow:auto;		
	}
	#aboutus{
		top:100%;
		left:0%;								
	}
	#contactus{
		top:200%;
		left:0%;		
	}	
	#socialicons{
		left:10%;
		top:8%;										
	}	
	#call{
		font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;		
		font-size:15px;
		margin-top:-15%;
		margin-left:-10%;
		background:none;
	}
	#emailus{
		margin-top:-1%;
		font-size:15px;
	}
	#portfolio{
		top:300%;
		left:0%;
	}
	#rg-gallery{		
		margin-top:17%;
	}
	#about_name{		
		font-size:12px;
		margin-top:14%;
	}
	#contact_name{		
		font-size:12px;
		margin-top:14%;
	}
	#portfolioname{
		font-size:12px; 
		margin-top:1%;
	}
	#portfolio_name{
		height:11%; 
		margin-top:0%;
	}
}