i{
	font-size:36px!important;
	color: #000;
}
p{
	font-size: 16px;
	line-height: 28px;
}
a {color: #333!important}
a:hover, a {text-decoration: none}

.userImg{
	max-width: 100%;
}
header{
	background-color: #368CFF;
}
/*Business Card Icons*/
.socialIcons img, .contactDetails img
{
float:left; margin-right: 10px;
}
.socialIcons img
{height: 20px; width: 20px; }
.contactDetails img
{height: 28px; width: 28px; }

#makegocardBtnBox .btn-primary {

    padding: 8px 5px;
    font-size: 18px;
	background: #00A3E2;
	min-width: 60%;

}

/*css for Contact form page*/
#contactForm {max-width: 450px; margin: 5px auto}
#contactForm input, #contactForm textarea {width: 300px; float:right; }
#contactForm li {margin: 5px 0;}
#contactForm h1 {
	text-align:center;
color:#368CFF;
font-size: 24px;}
#contactForm .btn.btn-primary {
    margin-top: 50px;
}

#contact a {color:#368CFF!important; font-weight:bold}

#TNSformLogo {

    max-width: 500px;
    padding-top: 10px;
    margin: 5px auto 0px auto;

}

/* for category page e.g. TNS*/
.categoryHeader img {

    max-width: 300px;

}


.lable{
	color: #368CFF;
}
#logo {padding: 5px}
#contactHeader {text-align: right; color: #fff; margin-top: 27px;}
#contactHeader a {color: #fff!important}
#mainForm {padding-top: 20px;}

#makegocard,
#previewgocard,
#success .close,
.shareMeBtns,
.saveBtnFooter button {
    width: 100%;
    padding: 10px;
    font-size: 20px;
	background: #368CFF;
	opacity: 1;
	color: #fff !important;
	border: none;
	text-shadow: none;
	font-weight: normal;
    border-radius: 5px;
    padding: 11px !important;
    margin-top: 5px;
    margin-bottom: 5px;
	line-height: 1.4;
	display: inline-block !important;
}
#homeMain {padding: 5px 0 20px; margin-bottom: 20px;}

footer {background: #368CFF; display:block; clear: both;}
footer p {color: #fff; text-align: center; padding: 30px; font-size: 14px}
footer p a {color: #fff!important}
footer p a:hover {color: #333}
footer button 
{
	border-radius: 5px; 
color: #606879; border: thin #ccc solid; padding: 5px; font-size: 14px;
background: #fefefe; /* Old browsers */
background: -moz-linear-gradient(top, #fefefe 1%, #dedede 35%, #dddddd 57%, #eeeeee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fefefe 1%,#dedede 35%,#dddddd 57%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fefefe 1%,#dedede 35%,#dddddd 57%,#eeeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

}
.shareContact {margin: 0; text-align: center;}
.saveContact {float: right; padding: 5px!important; width: 90%; margin: 0}

label {
	color: #368CFF;
	min-width: 87px;
}

.hidden{
	display: none;
}
.socialInput{
	display: none;
}
.formSocialIcons{
	margin-bottom: 5px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
}
.formSocialIcons input{
	width: 100% !important;
}
.formSocialIcons:hover{
	cursor: pointer;
}
.formSocialInputs{
	margin-bottom: 5px;
}
.formSocialIcons img{
	width: 32px;
	margin-right: 5px;
}
ul[role="alert"]{
	list-style: none;
}
ul[role="alert"] li{
	color: #00A3E2;
}

.carousel-control.left,
.carousel-control.right{
	background-image: none;
}
textarea {padding:6px 12px}
.homePage ul{
	list-style: none;
}
.homePage h1{
	text-align: center;
	color: #444; font-size: 24px;
}
.homePage h2 {font-size: 22px; color: #555; text-align:center;}

#navbarBox li a{
	font-size: 15px;
	color: #fff !important;
}
#navbarBox li:hover{
	background: #fff;
	color: #676767;
}
#navbarBox li:hover a{
	color: #676767 !important;
}
.formBtn
{
	display: block;
	max-width: 100%;
	width: 300px;
	margin: 40px auto;
	padding: 10px;
	text-align: center;
	background-image: linear-gradient(#5EADFF, #3698FF);
	border-radius: 10px;
	color: #fff!important;
	font-size: 17px;
}
.formBtn:hover{
	text-decoration: none;
	background-image: linear-gradient(#3698FF, #5EADFF);
	color: #fff;
}
.formTop {margin-bottom: -20px;}
.emailHeader{
	margin-top: 50px;
	padding-right: 20px;
	font-size: 17px;
	float: right;
	color: #fff;
}
.emailHeader a{
	color: #fff;
}

#userShowPage footer{
	background: #fff;
	min-height: 0;
}
#userShowPage > div{
	padding-top: 20px;
}

.cardSocialIcons {padding: 10px 0}
.contactDetails p a {padding-top: 5px;}

ul{
	margin-bottom: 0;
}

.userImg, #userPhoto,
#companyLogo{
	margin-left: auto;
    margin-right: auto;
    display: block;
    
}
#userPhoto
{
	width:auto; 
	max-height: 200px;
	max-width: 100%;
}



#userPhoto:hover,
#companyLogo:hover{
	cursor: pointer; 
}

#mainForm input{
	width: 100%;
	display: inline-block;
	vertical-align: bottom;
}
#mainForm textarea{
	width: 100%;
	max-width: 100%;
    border-color: #ccc;
    border-radius: 5px;
}
.logoFooter {float:left}

/* hide Share button unless web kit browser on mobile screen*/
.shareBtnFooter {display:none}

@media (max-width: 399px) {
	.shareBtnFooter:not(*:root) {display:block}
		
/* help stop running onto second line */
p {font-size: 14px; word-break: break-word;}
.panel-body {padding: 3px}
.contactDetails  {padding: 0}
.contactDetails img {margin-right: 5px;}
#companyLogo { width: auto}
}

@media (max-width: 330px) { 


.panel-body {padding: 1px}


}

@media (max-width: 1199px) {float:none; margin: 5px auto}
	
	.logoFooter {float:none; width: 135px; margin: 0 auto 5px auto;}
	.shareBtnFooter, .saveBtnFooter {width: 100%;}
	
	.saveBtnFooter button, .shareContact {width: 100%;}
}
@media (max-width: 550px) {
	
	#mainForm input{
		width: 100%;
	}
}



#inputPhoto,
#inputCompanyLogo{
	display: none !important;
}

.panel-primary>.panel-heading {
	background-color: rgba(0,0,0,0);
	border-bottom-color: rgba(0,0,0,0);
}

.list-group-item {
	border-color: rgba(0,0,0,0);
	display: inline-block;
	width: 100%;
}
.inputHalf{
	font-size: 0;
}

.requiredSection{
	padding-left: 0;
}
.photoSection{
	padding: 0;
}
.requiredSection input{
	margin-bottom: 20px;
}

.socialHeading{
	margin: 0;
    margin-bottom: 5px;
    text-align: center;
}
.socialInputs{
	padding-bottom: 0;
	padding-top: 0;
}
.socialBtns{
	padding-bottom: 0;

}
#userShowPage .socialIcons img{
	/*width: 35px;*/
}
.inputHalfWraper input{
	width: 100%
}
.inputHalfWraper{
	display: inline-block;
	width: 50%;
	font-size: 0;
}
.wraper1{
	padding-right: 10px;
}
.wraper2{
	padding-left: 10px;
}


.reveal-if-active {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
}
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 284px; /* little bit of a magic number :( */
  overflow: visible;
}
.reveal-if-active {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: scale(0.8);
	transition: 0.5s;
	input[type="checkbox"]:checked ~ & {
		opacity: 1;
		max-height: 100px;
		overflow: visible;
		padding: 10px 20px;
		transform: scale(1);
	}
}

#logo img {
	width: 180px; 
}

ul {
	list-style-type: none;
}
#mainForm #choice-logo{
	width: 20px;
	vertical-align: text-bottom;
	position: absolute;
    right: 0;
    top: 0;
}

.lbluebg {background: #EFF6FF; width: 100%; padding: 50px;}

#intro {padding: 50px 0; clear:both;}
#intro ul {list-style: disc; }
#intro ul, #howitworks ol {text-align:left; width: 80%; margin: 1% 10%; font-size: 16px;}

#contact p {text-align: center;}

#mainForm #companyLogoBox label,
#mainForm #companyAddressInputBox label,
.socialHeading,
.descriptionLable{
	color: rgb(51, 51, 51);
}
#mainForm #companyLogoBox,
#mainForm #companyAddressInputBox{
	position: relative;
}
#companyLogo{
	max-width: 100%;
	max-height: 200px;
}

/*slideshow override fix*/
.carousel-inner>.item>img {width: 100%; max-width: 1080px; margin: 0 auto!important}
.carousel-indicators li {background: #ccc!important}
.carousel-indicators {bottom: 0!important}

/* Bootstrap overrides */
	.alert-success {
		background: #eee!important; 
		border-color: #ddd!important; 
		font-size: 16px; 
		font-weight:bold;
		display: inline-block;
		width: 100%;
		color: #333;
		text-align:center;
	}
	.alert-success a {color: #337ab7;}
	#success .close {
		position: relative;
		bottom: 10px;
	}


.socilCheckbox{
	display: inline-block;
	width: 35px;
}
.socilCheckbox input[type="checkbox"]{
	pointer-events: none; 
}
.checkboxBox{
	display: inline-block;
	vertical-align: middle;
}
.checkboxLable{
	width: 100%;
    text-align: center;
}

@media (max-width: 1183px) and (min-width: 991px){
	.checkboxBox{
		width: 100%;
	}
 } 

#showUserPhotoBox > img{
	float: right;
	height: auto;
	width: auto;
	max-width: 40%;
}

#success {
	background:  rgba(0,0,0,0);
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 26;
}
#success #userShowBox{
	overflow-y: scroll;
	height: 90vh;
}
#userShowBox p {
	font-size: 16px;
    line-height: 28px;
    color: #333;
    font-weight: normal;
}

.contWrapper{
	margin: 0;
	padding: 0;
}

.help-block{
	font-size: 12px;
	margin: 0;
	display: inline-block;
	vertical-align: top;
}

/*Menu*/
.navbar .navbar-nav {
	display: inline-block;
	float: none;
	vertical-align: top;
}

.navbar .navbar-collapse {
	text-align: center;
}
#navbar a{
	font-size: 15px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 16;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}


@media ( max-width: 650px){
	#companyLogoInputBox,
	#socialMediaInputsBox{
		width: 100%;
	}
}

.homePage{
	width: 100%;
}

#navbarBox{
	position: fixed;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 25;
	background: #368CFF;
}
body{
	margin-top: 50px;
}

.navbar-default .navbar-toggle{
	background-color: #fff;
}

@media ( min-width: 830px){
	ul.nav.navbar-nav{
		margin-left: -180px;
	}
}

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.shareMeBtns,
.saveBtnFooter button{
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 100%;
	text-align: center;

}


#showCompanyLogo{
	max-height: 160px;
}

#userShowPage{
	margin-top: 0;
}


@media (max-width: 767px) and (min-width: 600px) {

	#userShowPage > div {
		padding-top: 20px;
		width: 51%; 
		margin-left: 25%; 
	}
}

/*telegram*/
.web-share-telegram{
	display: none!important;
}

.web-share-container.web-share-grid{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.web-share-container.web-share-grid>a {
  display: inline-block;
  text-align: center;
  flex: 1;
}
.web-share-container.web-share-grid>div {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.successPanel *{
	text-align: center;
}
.successPanel {
	max-width: 1024px;
	margin-right: auto;
	margin-left: auto;
}

/*loading spinner*/
#loadingSpinnerBox{
	position: fixed;
	width: 100%;
	background: #666;
	display: none;
	top: 0;
    height: 100vh;
    z-index: 99;
	
}
.loader {
	margin-top: 43vh;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
	margin-right: auto;
	margin-left: auto;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


li{
	text-align: left;
}

label, 
.socialHeading,
.descriptionLable {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 14px;
}

.scaleUp {
	zoom: 2;
	transform: scale(2);
	-ms-transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2);
	-moz-transform: scale(2);
	transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
}

input.largerCheckbox
{
	width: 20px!important;
	height: 20px!important;
	margin: auto;
	display: block!important;
}

#success #closeBtn,
#makegocard{
	width: 60% !important;
	padding: 3px !important;
	margin: auto;
	display: block!important;
	float: none;
	color: #368CFF!important;
	background: #fff;
}


.burgermenu{
    font-size: 17px;
    width: 90px;
}
.menutext{
	position: absolute;
    top: 4px;
    right: 2px;
	color: #888;
}

#categoryBox{
	display: flex;
	flex-wrap: wrap;
}

#categoryShowPage #userShowBox{
	flex: 1;
	margin: 0;
	flex-basis: 25%;
	max-width: 25%;
	margin-bottom: 30px;
}
@media (max-width: 1200px) {
	
	#categoryShowPage #userShowBox{
		flex-basis: 33.33333%;
		max-width: 33.33333%;
	}
}
@media (max-width: 930px) {
	
	#categoryShowPage #userShowBox{
		flex-basis: 50%;
		max-width: 50%;
	}
}
@media (max-width: 825px) {
	
	#categoryShowPage #userShowBox{
		flex-basis: 100%;
		max-width: 100%;
	}
}

#categoryShowPage #userShowBox .panel-primary{
	height: 100%;
}
.viewCardBtn{
	padding-left: 15px;
	padding-right: 15px;
}
.viewCardBtn a{
	position: absolute;
	background-color: #368CFF;
	border: 1px solid #122b40;
	color: #fff!important;
	padding: 10px;
	border-radius: 5px;
	text-align: center;
	bottom: 14px;
	width: calc(100% - 90px);
}

#categoryShowPage{
	margin-top: 0;
}
.categoryHeader,
#categoryShowPage footer{
	background: rgba(0,0,0,0);
}
.categoryHeader img{
	display: block;
	margin: auto;
	padding: 10px;
	max-width: 330px;
}

.headerTag{
	text-align: center;
}