/*
body {

	color: #000;
	font-weight: 400;	
	font-size:18px;
	line-height:1.4em;
	font-weight:500;
	font-family: 'Roboto', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
*/
html, body{
	height: 100%;
	background: #fff;
}

h1{font-family: 'AlteHaasGrotesk', sans-serif;font-size:40px;font-weight:700;}
h2 {font-family: 'AlteHaasGrotesk', sans-serif;font-size:36px;font-weight:700;}
h3{font-family: 'Roboto', sans-serif; font-size:22px; font-weight:700;}
h4{font-family: 'Roboto', sans-serif; font-size:18px; font-weight:500;}

.font-weight700{font-weight:700;}
.font-weight500{font-weight:500;}
.font-weight300{font-weight:300;}

.xsh1 {font-size:30px;}
.xsh2 {font-size:22px;}
a:hover, a:focus{
	text-decoration:none;
}
#top-artspan {width::100%; background:#E8E9EC;}
.navbar-default {
    background-color: #D1D2D2;
    border-color: #D1D2D2;
}
#menuF {
	height:60px !important;
	background:#D1D2D2;
	}
#menuF ul {
	margin:0;
	padding:0;
	width:100%;
}
#menuF  ul:before {display:table;}
#menuF  ul a li  {
	display:inline-table;
	list-style-type:none;
	width:15%;
	font-size:16px;
	text-align:center;
	margin:0 -4px;
	height:60px;
	font-weight:500;
	background-color: #d1d2d2;
}

#menuF  ul a li:hover, #menuF  ul a li:focus {
	background:#fff;	
	color:#000;
}
#menuF  ul a li {
	color:#000;
	height:60px;
	line-height:60px;
}

#menuF .active a:link {
    outline: none;
    border: none;
}
#menuF a li.active {
   	background:#fff;
	color:#000;
}
#menuF li.active a{
    border: 0;
    color: #000;		
}
/* quotes zone*/
#artspan-quote {
width: 100%;
background-color: transparent;
background-image: url('/images/joinUs/bg2.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
overflow: hidden;
}
.bg-overlay {
    background-color: rgba(85,60,59,0.86);
    padding-top: 60px;
    padding-bottom: 90px;
}
div.quote {
	width:100%;
	background-image: url(/images/joinUs/quotes.svg);
	background-size: 60px auto;
	background-repeat: no-repeat;
	background-position: center center;		
	text-align:center;
	height:57px;
	margin: 60px 0 30px 0;
}
h2.quote {
	color:#fff;
	font-style:italic;
	text-align:center;
	}
	
/*text versions*/	
.yellow-b{
	padding:6px;
	border:2px solid #5B909D;
	background: #DCD74B;
	float:right;
}
.fat {
	font-weight:700;
	color:#000;
	padding:10px;
	font-style:italic;
	}
	.fat i{
	margin-left:14px;
	}

	
.sub-headline  {
	text-transform:uppercase;
	color:#000;	
}
p.reduce {font-size:.8em;}
/*backgrounds*/
.bg-transparent  {
	background: rgba(0,0,0,.5);
}
.bg-transparent h2,  .bg-transparent p{
	color:#fff;
}
.bg-light  {background:#efedf3;}
.bg-grey  {background:#F8F8F8;}

/*colors*/

.grey {color:#68657f;}
.black {color:#000 !important;}
.price-primary {color: #5B909D ;}
.price-warning {color: #5B909D ;}
.price-danger {color: #FF5252 ;}
.price-success {color: #67A974 ;}

/*margins & paddings*/
.ptb30 {
	padding-top:30px;
	padding-bottom:30px;
	}
.ptb50 {
	padding-top:50px;
	padding-bottom:50px;
	}	
.plr80{
	padding-left:80px;
	padding-right:80px;
}
.pr60{	
	padding-right:60px;
}
.pb15 {padding-bottom:15px !important;}
.pb30 {padding-bottom:30px !important;}
.pt30 {padding-top:30px !important;}
.mt12per{margin-top:12%;}
.mt6per{margin-top:6%;}
.mt8per{margin-top:8%;}
.mt3per{margin-top:3%;}
.p10 {padding:10px;}
.pb60 {padding-bottom:60px;}
.pb4per {padding-bottom:4%;}
.mr100 {margin-right:100px;}
.mbm15{ margin-bottom:-15px !important;}
.mb15 {margin-bottom:15px;}
.ml15per {margin-left:15%;}
.mr15per {margin-right:15%;}
.mt15per {margin-top:15%;}
.mtm5 {margin-top:-5px;}
.mb20 {margin-bottom:20px;}
.mt30 {margin-top:30px;}
.mt50 {margin-top:50px;}
.mtbI20	{
	margin-top:20px !important;
	margin-bottom:20px !important;
	}
.mt120 {margin-top:120px;}
.mb50 {margin-bottom:50px;}
.mt60 {margin-top:60px;}
.mb30 {margin-bottom:30px !important;}
.mt40 {margin-top:40px;}


/*vantages section*/
.vantages > .panel {
	padding:8px 6px;
	margin-bottom:12px !important;
	background:#fff;
	color:#000;
	font-weight:700;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);	
}
.vantages > .panel .panel-heading {
    height: inherit;
    position: relative;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
	border-bottom:none;
    box-shadow: none !important;
    padding: 0;
    text-align: left;
	font-size:16px;
}
.vantages > .panel .panel-body {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 0px solid transparent;
    border-top: none;
    background-color: inherit;   
}
.vantages > .panel .panel-body p { 
	padding-left:12px;
	padding-top:10px;
	font-size:1em;
	font-weight:400;
	color:#000;
}
.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 1px solid transparent;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 0;
}
span.right-b button {
	margin-top:10px;
	margin-right:12px;
	}
.panel-heading {
    padding: 4px 4px;
    border-bottom: 0 solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.panel-heading a {
	color:#000;
	cursor:default;
	}
.panel-heading a:hover, .panel-heading a:focus {
	text-decoration:none;
	}
span.right-b {
	float:right;
	margin:-2px 4px 0 10px;
}
.vantage-target {
	color:#fff;
	font-weight:400;
	font-size:16px;
}
.check {
	font-weight:700;
	font-size:1.4em;
	margin-right:16px;
	margin-left:8px;
	color:#FF5C5C;
}		

/*panels*/
.panel {
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
    margin-bottom: 25px;
    border: none !important;
    border-radius:0;
}

.panel .panel-heading {
    height: auto;
    position: relative;    
    box-shadow: 0 1px 0px #ffffff;
    padding: 0;
	text-align:center;
	border-radius:0;
	border:none;
}
.store-heading {
	width:100%;
	height:60px;
	background-image: url(/images/joinUs/store-h.jpg);
	background-repeat:no-repeat;
	background-position: middle center;
}
.prime-head {
	border-top:10px solid #B6DAE2;
	border-bottom:10px solid #B6DAE2;
	padding:12px 0;
	background:#fff;
	color: #6CA1AD;
	}
	
.pro-heading {
	width:100%;
	height:60px;
	background-image: url(/images/joinUs/pro-h.jpg);
	background-repeat:no-repeat;
	background-position: middle center;
}
.danger-head {
	border-top:10px solid #F38F7D;
	border-bottom:10px solid #F38F7D;
	padding:12px 0;
	background:#fff;
	color: #F38F7D;
	}
.proplus-heading {
	width:100%;
	height:60px;
	background-image: url(/images/joinUs/proplus-h.jpg);
	background-repeat:no-repeat;
	background-position: middle center;
}
.success-head {
	border-top:10px solid #BAD983;
	border-bottom:10px solid#BAD983;
	padding:12px 0;
	background:#fff;
	color: #BAD983;
	}
	
.panel .panel-body {
    border:0 !important;
    background-color: #F6F6F6;
    position: relative;	
	border-radius:0;	
	padding:0;
}
h4.panel-title{
	font-size:26px;
	font-weight:700;
	text-transform:uppercase;
}
h5.panel-title {
	font-size:14px;
	font-weight:400;
}

h5.price-primary, h5.price-warning , h5.price-danger , h5.price-success {font-size: 16px ;}

.panel.panel-primary .panel-body:hover, .panel.panel-primary .panel-body:focus {
    background-color: #B6DAE2;
}
.panel.panel-primary .panel-body:hover h5.price-primary, .panel.panel-primary .panel-body:focus h5.price-primary, .panel.panel-danger .panel-body:focus h5.price-danger,.panel.panel-danger .panel-body:hover h5.price-danger, .panel.panel-success .panel-body:focus h5.price-success, .panel.panel-success .panel-body:hover h5.price-success  {
    color: #000;
}
.panel.panel-danger .panel-body:hover, .panel.panel-danger .panel-body:focus {
   background-color:#F38F7D;
}
.panel.panel-success .panel-body:hover, .panel.panel-success .panel-body:focus {
    background-color:#BAD983;
}

.panel.panel-danger .panel-heading {
    background: #FF5B5B;    
    border-color: #FF5B5B;
}
.panel.panel-success .panel-heading {
    background: #67A974;  
    border-color: #67A974;
}
.equals-i h4, .equals-i h3, .equals h4, .equals h3 {
	background:#fff;
	padding:10px;
	width:100%;
	font-size:18px;
}
.equals h3.price-primary {
	background:transparent;
	padding:10px;
	width:100%;
	font-size:26px;
	color: #5B909D;
	line-height:26px;
	}
.equals h3.price-danger {
	background:transparent;
	padding:10px;
	width:100%;
	font-size:26px;
	color: #FF5C5C;
	letter-spacing:-1px;
	line-height: 26px;	
	}
	.equals h3.price-success {
	background:transparent;
	padding:10px;
	width:100%;
	font-size:26px;
	color: #67A974;
	letter-spacing:-1px;
	line-height: 26px;	
	}
.equals p.price-primary, .equals p.price-danger, .equals p.price-success {
	margin-bottom:-15px;
	margin-top:30px;
	line-height:1em;
	}	
.equals-i h3.price, .equals h3.price {
	background:transparent;
	color:#000;	
	font-size:26px;
	font-weight:700;
}
p.price-success {line-height:1em; 
}
div.equal-hi {height:960px;}
div.equal-ji {height:960px;}
div.equals-i, div.panel-foot, div.equals {
	padding:0 35px 35px 35px;
	}
div.equal-h {height:390px;}
div.equal-j {height:390px;}


/*buttons*/
.btn {
	border-radius:6px;
	text-transform:uppercase;
	font-weight:700;
	font-size:20px;
	}
.btn-primary {
	background:#5C909E;
	border-color:#5C909E;
	color:#fff;
}
.btn.btn-round.btn-xs {
    width: 18px;
	height: 18px;
	line-height: 0.7;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	border-radius:18px;
}

.btn-primary:hover, .btn-primary:focus {
   	background:#5C909E;
	border-color:#5C909E;
	}
	
.btn-danger, .btn-danger:hover, .btn-danger:hover {
   	background:#FF5C5C;
	border-color:#FF5C5C;
	color:#fff;
	}
.btn-success, .btn-success:hover, .btn-success:hover {
   	background: #67A974 !important;
	border-color: #67A974;
	color:#fff;
	}


.pricing h3, .pricing h4 {
	color:#000;
	font-size:inherit;
	line-height:1.6em;
}
i.special {
	font-weight:700;
	padding-left:10px;
}

/*image  over div	*/
.over-it {
	text-align:center;
	margin-bottom:-40px;
}
 .over-it img {
	 width:38%;
	 height:auto;
	 margin:30px 28% 0 28%;
	 position:inherit;
	 z-index:120;
 }  
 ul.create-v {margin-left:-20px;}
 /*FAQ*/
 .faquestion {
	 padding:15px;	
 }
 div.faquestion:hover, div.faquestion:focus {background:#E8E9EC;}
 
 div.divider {
	width:30%;
	height:1px;
	border-bottom: 2px solid #D7C959;
	margin: 0 0 10px 30px;
	padding:5px 0;
 }

 /*POD*/
.artspanPodBand{
	background-color: #F6F6F6;
	padding:40px;
	margin:0 0 60px 0;
}

.podInfoTextLeft{
	height: 100%;
	position: absolute;
	right: 0;
	text-align: left;
}
.podInfoTextRight{
	height: 100%;
	position: absolute;
	left: 0;
	text-align: right;
}

.verticle-align-block{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
/*media*/

@media (max-width:992px){
	.xsh1{
		font-size:20px;
	}

}

@media only screen and (min-width:768px) and (max-width:991px) {
	#menuF ul {margin:0 auto;}
	#menuF a li.lt1 {width:22%;}
	#menuF a li.lt2 {width:15%;}
	#menuF a li.lt3 {width:21%;}
	#menuF a li.lt4 {width:16%;}
	#menuF a li.lt5 {width:7%;}
}

@media (max-width:768px){
	.podInfoTextRight, .podInfoTextLeft{
		text-align: center;
		position: relative;
		margin-top: 10px;
	}

	.podImage{
		margin:0 auto;
	}

	.verticle-align-block{
		top:inherit;
		-webkit-transform: initial;
		-moz-transform:  initial;
		-ms-transform:  initial;
		-o-transform:  initial;
		transform:  initial;
	}
}


@media only screen and (min-width:320px) and (max-width:767px) {

	#menuF{
		height:unset !important;
	}

	#menuF ul a li {
		display:block;
		width:100%;
	}
}

@media only screen and (min-width:320px) and (max-width:340px) {
	.check {
	font-weight:500;
	font-size:.9em;
	margin-right:6px;
	margin-left:-8px;
}	
	span.right-b button {
    margin-right: -6px;
	margin-top: 6px;	
}
.check {
	font-weight:500;
	font-size:.9em;
	margin-right:6px;
	margin-left:-4px;
}
.btn {
    font-size: 12px !important;
}	
.pricing h3, .pricing h4 {
    line-height: 1.2em;
}
.fat {
padding: 0;  } 
h2.quote {
    font-size:26px;
	font-weight:500;
}
.vantages > .panel .panel-heading {
		font-size:.66em !important;		
		}
}
@media screen and (max-width: 740px){
	.mt120i {margin-top:60px;}
/*	#menuF ul a li {
	font-size:10px;	
	margin:0 -3px;	
	padding:0 2px;
	}
	#menuF ul {margin:0 auto;}
	#menuF a li.lt1 {width:28%;}
	#menuF a li.lt2 {width:19%;}
	#menuF a li.lt3 {width:20%;}
	#menuF a li.lt4 {width:23.5%;}
	#menuF a li.lt5 {width:7%;} */
	.bg-transparent h2  {
	font-size:1.1em;
	}
	.bg-transparent p{
	font-size:.8em;
	}
	.ptb30 {
	padding-top:10px;
	padding-bottom:10px;
	}
	.ptb50 {
	padding-top:5%;
	padding-bottom:5%;
	}	
	.plr80{
	padding-left:8%;
	padding-right:8%;
	}
	.over-it  {
	 margin-bottom:-42px;
	} 
	.mr100  {margin-right:3%;}
	.mt6per {margin-top:16% !important;}
	.over-it img {
	 width:96%;
	 margin:0 auto;
	 padding-top:60px;
	} 
	.extramob {padding-bottom:50px !important;}
	.vantages > .panel .panel-heading {
		font-size:.8em;
		font-weight:400;
		padding:4px 3px;
		}
	.check {
	font-weight:500;
	font-size:.9em;
	margin-right:6px;
	margin-left:-2px;
}	
	span.right-b {	
	position: relative;
    top: -10px;
    right: -2px;
    margin: 0; 
	}
	
	div.equals, div.equals-i {
		height:inherit;
	}
	.yellow-b {
		margin:0 auto;
		margin-bottom:20px;
		float:none;
	}
	.mtbI20	{
	margin-top:20px;
	margin-bottom:20px;
	}
	div.quote {
	background-size: 50px auto;	}
	div.equals, div.equals-i {
		height:inherit;
	}
	.yellow-b {
		margin:0 auto;
		margin-bottom:20px;
		float:none;
	}
	.mtbI20	{
	margin-top:20px;
	margin-bottom:20px;
	}
	div.quote {
	background-size: 50px auto;	
	}
	.btn {
      font-size: inherit;
	}
	.pricing h3, .pricing h4 {
        line-height: 1.2em !important;}
	.i-small h1 {font-size:32px;}
	div.divider-b {
	width:30%;
	height:1px;
	border-bottom: 2px solid #D7C959;
	margin: 0 0 10px 30px;
	padding:5px 0;
 }
}


@media only screen and (min-width:750px) and (max-width:1100px) {
	h4.panel-title {font-size:22px;}
	div.equals-i {height:220px;}
	div.equals {height:910px;}
	div.equal-ji {height:988px;}
	.equals h4 {
    font-size: 18px !important;
    padding: 4px 6px;
	}
	.panel-body h3.price {
    font-size: 20px;
    font-weight: 700;
    padding: 0px;
	text-align:center;
	}
	.pricing h3, .pricing h4 {
    font-size: 18px;
    line-height: 1.4em;	
	}
	.vantages > .panel .panel-heading {
		font-size:.72em;
		font-weight:400;
		padding:4px 3px;
		}
		
	.sample-intro {
		width:76%;
		left:11%;
	}
	.check {
	font-weight:500;
	font-size:.85em;
	margin-right:4px;
	margin-left:-2px;
}	
span.right-b {	
	position: relative;
    top: -10px;
    right: -6px;
    margin: 0; 
	}
.mtbI20	{
	margin-top:20px;
	margin-bottom:20px;
	}
	
div.quote {
	background-size: 50px auto;	
}

.btn {
   font-size: 11px;
}
.pricing h3, .pricing h4 {
	font-size:14px;
	font-weight:400;	
}
.equals h3.price-primary, .equals h3.price-success, .equals h3.price-danger {
    font-size: 16px;
	padding-top:18px;
    }
div.equals-i, div.panel-foot, div.equals {
    padding: 10px 10px 30px 10px;
}
.minus {margin-top:-18px;}
div.equals-i {
    height: 280px;
}
div.equal-h {
    height: 280px;
}
div.divider-b {
	width:30%;
	height:1px;
	border-bottom: 2px solid #D7C959;
	margin: 0 0 10px 30px;
	padding:5px 0;
 }
}