/*------------------------------------------
Document: axiduez.css (Style Sheet)
Dated	: 01-Nov-2018
Company	: Axiduez Systems (OPC) Pvt. Ltd.
Purpose	: CSS Styles for Look & Feel
--------------------------------------------*/
@charset "utf-8";

*, ul {
	margin:0; padding:0; border:0;
}

*:focus, button:focus {
	outline:none;
	box-shadow:none;
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}


/*___________________ FONTS ______________________*/

@font-face{
	font-family:"OpenSans-Regular";
	src:url("../fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face{
	font-family:"OpenSans-Light";
	src:url("../fonts/OpenSans-Light.ttf") format("truetype");
}

h1, h2, h3, h4, h5, h6 {
	
}

h1{
	/* page heading */
}

h2{
	/* main heading */
}

h3{
	/* sub heading */
}

h4{
	/* form header */
}

h5{
	/* section note */
}

h6{
	/* customized header */
}

font{
}

span{
}

em{
}

small {
	display:block; font-size:7pt;
}

strong{
}

p{
	font-family:"OpenSans-Regular";
	font-size:13pt;
	line-height:19pt;
	text-indent:20pt;
	padding-bottom:30px;
	text-align:justify;
	clear:both;
}

blockquote{
	/* testimonial quotes */
	font-style:italic; line-height:16pt;
	padding-bottom:12px;
}

.red-star{
	color:#bb3333;
	font-size:13pt;
}

a, a:hover{
	text-decoration:none; color:#000000;
}




/*_________________ ELEMENTS ___________________*/


ul, li {
	list-style:none;
}

ul.arrow-bullets li {
	background:url(../icon/arrow-bullet.png) no-repeat left 8px;
	background-size:cover;
	padding:3px 0px 3px 14px; line-height:16pt;
}

/*
img {
	max-width:100%;
	height:auto;
}
*/



/*___________________ PAGE ______________________*/

body {
	font-family:"OpenSans-Light";
	font-size:13pt; color:#000;
	overflow-x:hidden;
}

.container {
	
}

#content {
	margin-bottom:40px;
}

main {
}



/*___________________ HEADER ______________________*/

header {
	background-image:url('../images/slider/computer-desk.jpg');
	background-repeat:no-repeat;
	background-size: cover;
	background-position:bottom;
}

.logo {
}


.tagline{
	color:#FFFFFF;
	font-size:40pt;
	position:relative;
	text-align:right;
	right:150px;
	padding:130px 0px 300px 0px;
	line-height:1.4;
	border:0px solid red;
}

.tagline > span{
	display:block;
}

.tagline > .webs {
	padding-right:120px;
}

.tagline > .and {
	padding-right:325px;
}

#ybar {
	background-color:#f9ce3a;
	position:relative;
	z-index:20;
	left:-10px;
	bottom:80px;
	width:105%;
	height:70px;
	transform: rotate(-4deg);
}


/*___________________ NAV MENU ______________________*/


.navbar {
	background-color:rgba(0, 0, 0, 0.1);
}

.nav-link {
	color:#EEEEEE;
	font-size:15.5pt;
	text-align:right;
	text-shadow:none;
	transition: all 0.5s ease;
}

.nav-link:hover  {
	color:#FFFFFF;
	text-shadow:0px 0px 13px rgba(255, 255, 200, 1);
}

.nav-link::after {
	content: "\002F";
	color:#FFFFFF;
	opacity: 0.3;
	font-size:28pt;
	vertical-align: sub;
	padding-left:17px;
	text-shadow:none;
}

.nav-link:hover::after {
	text-shadow:none;
}

.nav-item:last-child .nav-link::after {
	content: "";
	padding-left:0px;
}


/*___________________ ABOUT ______________________*/

#about {
	background: #e6e6e6;
	background: -webkit-linear-gradient(#ffffff, #e6e6e6);
	background: -o-linear-gradient(#ffffff, #e6e6e6);
	background: -moz-linear-gradient(#ffffff, #e6e6e6);
	background: linear-gradient(#ffffff, #e6e6e6);
	background: linear-gradient(#ffffff, #e6e6e6);	
	padding:10px 0px 80px 0px;
}

.intro-note {
	padding-top:80px;
	opacity: 0;
}

.craft-cut {
	opacity: 0;
}

.social-icons {
	margin:auto;
	width: 245px;
}

.social-icons a {
	display:inline-block;
	background-repeat:no-repeat;
	filter:grayscale(100%);
	transition: all 0.5s ease;
}

.social-icons a:hover {
	filter:grayscale(0%);
}

.facebook {
	background-image:url('../icon/social/facebook.png');
	width:11px; height:21px; padding-right:30px;	
}

.twitter {
	background-image:url('../icon/social/twitter.png');
	width:26px; height:21px; padding-right:41px;
}

.google {
	background-image:url('../icon/social/google+.png');
	width:28px; height:18px; padding-right:41px;
}

.linkedin {
	background-image:url('../icon/social/linkedin.png');
	width:20px; height:19px; padding-right:37px;
}

.youtube {
	background-image:url('../icon/social/youtube.png');
	width:30px; height:21px; padding-right:48px;
}

.instagram {
	background-image:url('../icon/social/instagram.png');
	width:22px; height:22px;
}


/*___________________ SERVICES ______________________*/

#services {
	padding: 110px 180px 75px 180px;
	background-color: #FFF;
	
}

#particle-canvas {
	width: 100%;
	height: 100%;
}

.servhead {
	font-size: 40px;
	padding-bottom: 60px;
	text-align: center;
}

.focussing {
	font-size: 10.5pt;
	display: block;
	color: #676767;	
}


.ecommerce {
	background: url('../images/services/ecommerce.png') no-repeat;
	padding: 70px 0px 70px 310px;
	position: relative;
	right: 1500px;
}

.webdev {
	background: url('../images/services/webdev.png') no-repeat right;
	padding: 70px 310px 80px 0px;
	text-align: right;
	position: relative;
	left: 1500px;
}

.digital {
	background: url('../images/services/digital.png') no-repeat;
	padding: 70px 0px 70px 310px;
	position: relative;
	right: 1500px;
}

.graphics {
	background: url('../images/services/graphics.png') no-repeat right;
	padding: 70px 310px 90px 0px;
	text-align: right;
	position: relative;
	left: 1500px;
}


/*___________________ PORTFOLIO ______________________*/

#portfolio {
	
}

.flexbox {
	display:flex;
	flex-wrap: wrap;
	padding:8px 10px;
}

.overlay {
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
	left:0px;
	z-index: 2;
	overflow:hidden;
	
	text-align:center;
	display:block;
	transition: all 1s ease;
}

.blk {
	background-color: rgba(0, 0, 0, 0.85);
}

.ylw {
	background-color: rgba(249, 206, 58, 0.88);
}

.item:hover .Dright {
	right:1000px;
}

.item:hover .Dleft {
	left:1000px;
}

.item:hover .Dtop {
	top:1000px;
}

.item:hover .Ddown {
	bottom:1000px;
}

figcaption {
	position:relative;
	top:45%;
}

.groupA {
	flex-grow: 2; height:820px;
	border:0px solid red;
}

#spokenarabic {
	background-image:url('../images/portfolio/SpokenArabicKochi.jpg');
	height:820px; position:relative;
	color:#d9d9d9; font-size:30pt;
}

.groupB {
	flex-grow: 4; height:820px;
	padding-left:12px;
	border:0px solid blue;
}

#stelsie {
	background-image:url('../images/portfolio/Stelsie.jpg');
	height:440px; position:relative;
	color:#787878; font-size:40pt;
}

.splitroom {
	display:flex;
	padding-top:14px;
}

#felucca {
	flex-grow: 2;
	background-image:url('../images/portfolio/FeluccaTours.jpg');
	height:365px; background-position:95% 0%;
	background-size: cover;	position:relative;
	color:#787878; font-size:30pt;
}

#healtouch {
	flex-grow: 2;
	background-image:url('../images/portfolio/HealingTouch.jpg');
	height:365px; position:relative;
	background-size: cover;
	margin-left:12px;
	color:#d9d9d9; font-size:30pt;
}

#healtouch figcaption {
	top:35%;
}


.groupC {
	flex-grow: 4; height:650px;
	padding-right:12px;
	border:0px solid green;
}

#breton {
	background-image:url('../images/portfolio/Breton.jpg');
	height:320px; background-size: cover;
	margin-bottom:14px; position:relative;
	color:#d9d9d9; font-size:30pt;
}

#ansar {
	background-image:url('../images/portfolio/AnsarHealingTouch.jpg');
	height:320px; background-size: cover; position:relative;
	color:#787878; font-size:30pt; border: 1px solid #bdae98;
}

.groupD {
	flex-grow: 3; height:650px;
	border:0px solid red;
}

#madrasa {
	background-image:url('../images/portfolio/MadrasaSecular.jpg');
	height:650px; background-size: cover; position:relative;
	color:#787878; font-size:30pt;
}


/*___________________ TECHNOLOGIES ______________________*/

#technologies {
	padding: 120px 0px 120px 0px;
}

.webtech {
	font-size: 37px;
	text-align: center;
	padding-bottom: 80px;
}

.redweb {
	color: #dd0808;
}

.skillset {
	padding: 0px 80px;
	opacity: 0;
}

.skillset img {
	filter:grayscale(100%);
	opacity:0.6;
}

.flex-1set {
	display: flex;
	justify-content: space-between;	
	align-items: flex-start;
}

.flex-2set {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	padding-top:40px;
}



/*___________________ FOOTER ______________________*/

footer {
	background-image: url('../images/slider/beo-screen.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	padding: 230px 0px 110px 0px;
}

#zbar {
	background-color: #cfcfcf;
	position: relative;
	z-index: 20;
	left: -10px;
	top: 85px;
	width: 105%;
	height: 70px;
	transform: rotate(4deg);
}

.copyright {
	background-color: #333;
	color: #EFEFEF;
	font-size: 10pt;
	text-align: center;
	padding: 25px 0px;
}



/*_________________ ENQUIRE FORM ____________________*/

input {
	padding: 2px 5px; outline:none;
}

label {
	font-weight: normal;
	display: inline;
}

footer {
	position: relative;
}

#frmEnquiry {
	opacity: 0;
}

.form-group {
	margin-bottom: 50px;
}

.form-control, .form-control:focus {
	background-color:rgba(255, 255, 255, 0.13);
	-webkit-box-shadow: none;
	box-shadow:none;
	color:#EAEAEA;
	padding: 20px 20px;
	border-radius: 5px;
	border:1px solid #d3c4a8;
}

textarea.form-control {
	height:134px;
	resize:none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0; 
}

.form-control::placeholder {
	color:#acacac;
}

.formgap {
	padding:30px 0px;
}

.button-row {
	text-align:center;
	padding-top:10px;
}

#btnEnquiry {
	background-color:#f9ce3a;
	font-family:"OpenSans-Regular";
	padding: 8px 70px;
}

.formscreen {
	display:none;
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
	left:0px;
	
	background-color:rgba(0, 0, 0, 0.4);
	text-align:center;
	background-image:url('../icon/led.svg');
	background-repeat:no-repeat;
	background-position:center 32%;
}

.msgcard {
	display:none;
	margin: auto;
	width:300px;
	top:20%;
	font-size: 10.5pt;
	border-radius: 4px;
	background-color: #e4e4e4;
	padding: 11px 10px;
	position:relative;
	z-index:100;
}

#closepin {
	cursor:pointer;
}



/*_________________ MISCELLANEOUS ___________________*/

.new {
}

.noborder {
	border:0px;
}

.nomargin {
	margin:0px;
}

.nopad {
	padding:0px;
}

.yellower {
	color: #e2ba2f;
	text-shadow: 0px 0px 1px
}

p.last, .last {
	padding-bottom:0px;
}

.preloader { 
	background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; 
}