@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
html {
	height : 100%;
}
body
{
	background-color:white;
	height: 100%;
	color: #000;
	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.rainbow-text {
 background-image: linear-gradient(to left, #529722, #195788, #529722,);
}

.blink{
	animation:blinkingText 1.0s infinite;
}
@keyframes blinkingText{
	0%{		color: green;	}
	49%{	color: red;	}
	50%{	color: red;	}
	99%{	color: red;	}
	100%{	color: red;	}
}
/* START scrolling*/
.scrolling-box {
  background-color: #eaeaea;
  display: block;
  width: 1140px;
  height: 300px;
  padding: 1em;
  overflow-y: scroll;
  text-align: center;
}
section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* END scrolling*/
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 360px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
.img round {
  border-radius: 50%;
}

/* START Tooltip */
.tooltip1 {
  position: relative;
  display: inline-block;
}

.tooltip1 .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  font-size: 12px;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -150px;
}

.tooltip1 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip1:hover .tooltiptext {
  visibility: visible;
}
/* END Tooltip */

/* START parallax */
.parallax1 {
  /* The image used */
  background-image: url("https://asl.airbuysell.com/img/back.png");

  /* Full height */
  height: 50%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax2 {
  /* The image used */
  background-image: url("https://barcodetag.org/images/banner2.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax3 {
  /* The image used */
  background-image: url("https://barcodetag.org/img/wireless-barcode-scanners.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax4 {
  /* The image used */
  background-image: url("https://barcodetag.org/img/barcode-banner.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax5 {
  /* The image used */
  background-image: url("https://barcodetag.org/img/barcode_footer.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax6 {
  /* The image used */
  background-image: url("https://barcodetag.org/img/barcodes-internet.jpg");

  /* Full height */
  height: 50%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax7 {
  /* The image used */
  background-image: url("https://barcodetag.org/img/gs1-us-data-hub.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax8 {
  /* The image used */
  background-image: url("https://barcodetag.org/img/introducing-new-employee.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax9 {
  /* The image used */
  background-image: url("https://i.imgur.com/xWTVsVn.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax10 {
  /* The image used */
  background-image: url("https://i.imgur.com/sSrmdYm.jpg");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax11 {
  /* The image used */
  background-image: url("https://i.imgur.com/OxkAM5O.png");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax12 {
  /* The image used */
  background-image: url("https://i.imgur.com/zSdICjB.png");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax13 {
  /* The image used */
  background-image: url("https://i.imgur.com/saHLHug.png");

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* END parallax */

html {
  height: 100%;
}
body1 {
  display: flex;
  height: 100%;
  background-color: #333;
}
.word {
  margin: auto;
  color: white;
  font: 700 normal 2.5em 'tahoma';
  text-shadow: 5px 2px #222324, 2px 4px #222324, 3px 5px #222324;
}


/* START SOCIAL MEDIA */
.icon-bar1 {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar1 a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */

.icon-bar1 a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.whatsapp {
  background: #06d755;
  color: white;
}

#feedback { 
				height: 0px; 
				width: 65px; 
				position: fixed; 
				right: 0;
				top: 60%; 
				z-index: 1000;
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg); 
				-moz-transform: rotate(-90deg); 
				-o-transform: rotate(-90deg); 
				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			}

			#feedback a { 
				display: block; 
				background: #ff6500; 
				height: 35px; 
				width: 115px; 
				padding: 8px 16px;
				color: #fff; 
				font-family: Arial, sans-serif; 
				font-size: 17px; 
				font-weight: bold; 
				text-decoration: none; 
				border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;
			}

			#feedback a:hover { 
				background: #CCC; 
			}
			
			
#ouroffers { 
				height: 0px; 
				width: 65px; 
				position: fixed; 
				right: 0;
				top: 40%; 
				z-index: 1000;
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg); 
				-moz-transform: rotate(-90deg); 
				-o-transform: rotate(-90deg); 
				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
			}

			#ouroffers a { 
				display: block; 
				background: #fc0; 
				height: 35px; 
				width: 107px; 
				padding: 8px 16px;
				color: #fff; 
				font-family: Arial, sans-serif; 
				font-size: 17px; 
				font-weight: bold; 
				text-decoration: none; 
				border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;
			}

			#ouroffers a:hover { 
				background: #CCC; 
			}
			
			
#offers { 
				height: 0px; 
				width: 120px; 
				position: fixed; 
				right: 0;
				top: 30%; 
				z-index: 1000;
				transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg); 
				-moz-transform: rotate(-360deg); 
				-o-transform: rotate(-90deg); 
				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			}

			#offers a { 
				height: 35px; 
				width: 135px; 
				padding: 8px 16px;
				color: #fff; 
				font-family: Arial, sans-serif; 
				font-size: 17px; 
				font-weight: bold; 
				text-decoration: none; 
			}
/* END social media */

/* START DEMO */
header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}
/* END DEMO */

/* start slider video animation */
* {
    margin: 0;
    padding: 0;
}

#wrapper {
    position: relative;
    overflow: hidden;
    background: #182431;
}


/* === Text effect === */
#svg {
    width: 100%;
    height: 90vh;
    display: block;
    transform: scale(.8);
}


/* === Video === */
video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* === Background === */
.bg {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2)
}
/* END slider video animation */

/* start slider hover*/
.btn1 {
  background-color: #fff;
  border: none;
  color: black;
  padding: 4px 8px;
  text-align: center;
  font-size: 10px;
  margin: 4px 2px;
  opacity: 0.15;
  transition: 0.3s;
}

.btn1:hover {opacity: 1}
/* Green */
.success {
  color: #fff;
}

.success:hover {
  background-color: #d62c1a;
  color: black;
}

/* Blue */
.info {
  border-color: #2196F3;
  color: dodgerblue;
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.danger {
  border-color: #f44336;
  color: red;
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Gray */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
/*end slider hover*/

/*START TEXT GLOW*/
.glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #d62c1a, 0 0 40px #d62c1a, 0 0 50px #d62c1a, 0 0 60px #d62c1a, 0 0 70px #d62c1a;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #d62c1a, 0 0 60px #d62c1a, 0 0 70px #d62c1a, 0 0 80px #d62c1a;
  }
}
/*END TEXT GLOW*/

/*START background shapes*/
.skewed-bg {
    background: #830024;
    color: #FFF;
    padding: 2em;
    position: relative;
    min-height:300px;
    overflow:hidden;
}
.skewed-bg:after {
  content: '';
  position: absolute;
  bottom: -75%; left: 0; right: 0;
  height:100%;
  background:#FFF;
  transform: skew(0deg, -9deg);
}
/*END background shapes*/

/*Open https://bootsnipp.com/snippets/nNoMz*/
.row.heading h2 {
    color: #fff;
    font-size: 52.52px;
    line-height: 95px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 0px;
    padding-bottom: 0px;
    text-transform: uppercase;
}
ul{
  margin:0;
  padding:0;
  list-style:none;
}
.heading.heading-icon {
    display: block;
}
.padding-lg {
	display: block;
	padding-top: 60px;
	padding-bottom: 20px;
}
.practice-area.padding-lg {
    padding-bottom: 55px;
    padding-top: 55px;
}
.practice-area .inner{ 
     border:1px solid #999999; 
	 text-align:center; 
	 margin-bottom:28px; 
	 padding:40px 25px;
}
.our-webcoderskull .cnt-block:hover {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border: 0;
}
.practice-area .inner h3{ 
    color:#3c3c3c; 
	font-size:24px; 
	font-weight:500;
	font-family: 'Poppins', sans-serif;
	padding: 10px 0;
}
.practice-area .inner p{ 
    font-size:14px; 
	line-height:22px; 
	font-weight:400;
}
.practice-area .inner img{
	display:inline-block;
}

.our-webcoderskull{
  background: url("http://www.webcoderskull.com/img/right-sider-banner.png") no-repeat center top / cover;
  
}
.our-webcoderskull .cnt-block{ 
   float:left; 
   width:100%; 
   background:#d62c1a; 
   padding:10px 10px; 
   text-align:center; 
   border:2px solid #d5d5d5;
   margin: 0 0 28px;
}
.our-webcoderskull .cnt-block figure{
   width:148px; 
   height:148px; 
   border-radius:100%; 
   display:inline-block;
   margin-bottom: 15px;
}
.our-webcoderskull .cnt-block img{ 
   padding:30px 30px;
   border-radius:0%;
}
.our-webcoderskull .cnt-block h3{ 
   color:#2a2a2a; 
   font-size:20px; 
   font-weight:500; 
   padding:6px 0;
   text-transform:uppercase;
}
.our-webcoderskull .cnt-block h3 a{
  text-decoration:none;
	color:#2a2a2a;
}
.our-webcoderskull .cnt-block h3 a:hover{
	color:#337ab7;
}
.our-webcoderskull .cnt-block p{ 
   color:#2a2a2a; 
   font-size:13px; 
   line-height:20px; 
   font-weight:400;
}
.our-webcoderskull .cnt-block .follow-us{
	margin:20px 0 0;
}
.our-webcoderskull .cnt-block .follow-us li{ 
    display:inline-block; 
	width:auto; 
	margin:0 5px;
}
.our-webcoderskull .cnt-block .follow-us li .fa{ 
   font-size:24px; 
   color:#767676;
}
.our-webcoderskull .cnt-block .follow-us li .fa:hover{ 
   color:#025a8e;
}
/*end https://bootsnipp.com/snippets/nNoMz*/

/*START ZOOM AND CIRCLE*/
.zoom {
  padding: 13px;
  transition: transform .2s;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}
    
.zoom:hover {
  -ms-transform: scale(2.5); /* IE 9 */
  -webkit-transform: scale(2.5); /* Safari 3-8 */
  transform: scale(1.2); 
}
.circle {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  font-size: 25px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #000
}
.circle1 {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  font-size: 25px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: #d62c1a
}
/*END ZOOM AND CIRCLE*/

/*START Fade in Effect*/
.btn2 {
  background-color: #000;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
}

.btn2:hover {opacity: 1}
}
/*END Fade in Effect*/

/* START circlehover*/
.circle3 {
  height: 100px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
  opacity: 0.5;
}
.circle3:hover {opacity: 1}
}
/* END circlehover*/

/* start footer info*/
.div2 {
  width: 500px;
  height: auto;  
  padding: 15px;
  border: 1px solid red;
  background: #fff;
}
/* END footer info*/

.img25 {
  -webkit-filter: drop-shadow(5px 5px 5px #222 );
  filter: drop-shadow(0px 25px 0px #fcfcfc80);
}
h1,h2,h3,h4,h5,h6,p,li,span
{
	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

:focus {
    outline: none;
}

.top-container
{
	background-color:red;
}

.main-contents
{
	margin-top:20px;
}

.enq-form-title
{
	font-size: 25px;
	margin-bottom:5px;
	text-align:center;
  	text-transform: uppercase;
}

.enq-form-subtitle
{
	text-align:center;
}

.plan-title
{
	font-size: 20px;
	margin-bottom:5px;
	text-align:center;
  	text-transform: uppercase;
}

.plan-subtitle
{
	text-align:center;
	font-size: 30px;
}

.plan-order
{
	margin-bottom:10px;
	text-align:center;
}

.back-to-top {
	background: none;
	margin: 0;
	position: fixed;
	bottom: 10px;
	right: 25px;
	width: 45px;
	height: 50px;
	z-index: 100;
	display: none;
	text-decoration: none;
	color: #d62c1a;
}

.back-to-top:hover,.back-to-top:active,.back-to-top:focus,.back-to-top:visited {
  color: #d62c1a;
}

.back-to-top i {
  font-size: 50px;
}

/*footer*/
.page-wrap {
  	min-height: 100%;
    	margin-bottom: -300px; 
}
.page-wrap:after {
  content: "";
  display: block;
  height : 300px;
}

#footer 
{
	height : 100%;
	background-color: #333;
	width:100%;
}

#footer table
{
	margin-top : 20px;
}

#footer p
{
	margin : 0px 0px 0px 0px;
	color : white;
	text-align : center;
}

#footer a
{
	text-decoration : none;
	color : #333;
	font-size: 15px;
}
.midfooter a
{
	color:#fff !important;
}

.midfooter table
{
	margin-top:10px !important;
	margin-bottom:20px !important;
}

#footer a span
{
	color : #fff;
}


#footer h5
{
	color : white;
	font-size: 20px;
}

.footercol1
{
	height: 235px;
}

.footercol2
{
	height: 150px;
}
/* Bootstrap Mods */
.navbar
{
	margin-bottom:0px;
	border-radius:0px;
	min-height: 75px;
	background-color: #333;
}

.navbar-nav>li>a:hover, .navbar-nav>li>a:focus
{
	color : #d62c1a !important;
	outline: none;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus
{
	outline: none;
}


.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
    background-color: #2c4285 !important;
    color: #d62c1a !important;
}

.navbar-nav>li>.dropdown-menu
{
	margin-top:4px;
}


.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus
{
    background-color: #d62c1a !important;
}

.container-banner
{
	;
}

.alert-caption
{
	border-color:#fff;
	color: #fff;
	margin-bottom:0px;
	text-align:center;
	height: 80px;
}

.btn-buynow
{
	background-color: #ffcc00;
	color:#000;
	
}

.list-group-item
{
	padding:2px 15px;
}


@media only screen and (max-width: 767) {	
	.footercol1 {
		height:215px;
	}
	#footer
	{
		height: 745px;
	}
}

@media only screen and (max-width: 991px) {
	#banner-caption{
		font-size: 27px !important;
		line-height:28px !important;
	}
	.footercol1 {
		height:295px;
	}
	#footer
	{
		height: 745px;
	}
}



@media only screen and (max-width: 540px) {
	#banner-caption{
		font-size: 22px !important;
		line-height:25px !important;
	}
	#footer
	{
		height: 1000px;
	}
	.footercol1 {
		height:295px;
	}
}

@media only screen and (max-width: 360px) {
	#banner-caption{
		font-size: 18px !important;
		line-height:20px !important;
	}
}
