﻿/*
Simple Responsive Template

primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.

BASE (MOBILE) SIZE
	These are the mobile styles. It's what peo on their phones.
	Remember, keep it light: Speed is Important.
*/

/* typography */

body { background-color: #686767;color: #000;font-family: Arial, Helvetica, sans-serif; }


.gradient-box {
    min-height: 220px;
    border-radius: 12px;
    padding: 24px;
    color: #fff;
    background-image: linear-gradient(to right, #001f3f, #0074D9, #7FDBFF);
    background-size: cover;
}

h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; color: #000} 
a{text-decoration:none;}
p{font-family: Arial, Helvetica, sans-serif;color: #000;right: 0;top: 0;}
a.Lnkmenu{text-decoration:none;}
a.Lnkmenu:link{color:#FFF;}
a.Lnkmenu:visited{color:#FFF;}
a.Lnkmenu:active{color:#FFF;}
a.Lnkmenu:hover{color:#FFF;}

/* Password progress bar */
.progress { height: 8px; border: 1px solid #ddd; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); border-radius: 4px }
.progress-bar { height: 2px; box-shadow: none; border-right: 1px solid rgba(0,0,0,.1) /* Gives a "cut" effect */ }
.progress-bar-weak { background-color: #d9534f; /* Red */ width: 25% !important }
.progress-bar-medium { background-color: #f0ad4e; /* Yellow */ width: 50% !important }
.progress-bar-strong { background-color: #5cb85c; /* Green */ width: 75% !important }
.progress-bar-very-strong { background-color: #5bc0de; /* Blue */ width: 100% !important; }

/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{box-sizing:border-box;}
/* structure */
.login {width: 100%;margin: 0 auto;padding-top: 25px;position: relative;float: left;text-align: right;color: White;font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bold;}
.wrapper {
    margin: 0 auto;
    padding-left: 15px; /* was 10 */
    padding-right: 15px; /* was 10 */
    max-width: 1170px; /* optional: mimic .container at lg */
    /* add responsive max-widths if you like, or just use .container */
}header{ padding:15px 0;}
#banner{ text-align:center;}	
#hero,
#page-header{background:#f3f3f3;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;padding:20px 0;font-size:1.1em;}
#page-header h1{margin:0;}
.flexslider{display:none;}
#content,
aside,
.vertical-padding{padding:40px 0;}

/* RESPONSIVE IMAGES  */
img{ max-width:100%; height:auto;}

/*MAIN MENU*/
.menu-toggle{display:block;padding:10px;margin:20px 0 0;background:#666;color:#fff;cursor:pointer;text-transform:uppercase;font-size:20px;}
.menu-toggle.toggled-on{}
.srt-menu{display:none;}	
.srt-menu.toggled-on{display:block;position:relative;z-index:10;}
.srt-menu{clear:both;margin-bottom:60px;}
.srt-menu li a {color:#fff;background:#dadada;display:block;margin:1px 0; padding:10px;text-decoration:none;font-size:.9em;font-weight:bolder;}
.srt-menu li a:hover{color:#fff;}
.srt-menu li li a {color:#fff;background:#e8e8e8;padding-left:40px;}
.srt-menu li li li a {color:#fff;background:#efefef;padding-left:80px;}

/*SECONDARY MENU*/
#secondary-navigation{margin-bottom:-60px;}
#secondary-navigation ul{margin:0;padding:0;}
#secondary-navigation ul li a{ background:#E6E6E6;color:#666;display:block;margin:5px 0; padding:10px;text-decoration:none;}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{background:#5ec79e;color:#fff;}

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-bottom:40px;
}

/*FOOTER*/
footer{ background:#333;color:#ccc;font-size:80%;padding:20px 0;}
footer ul{margin:0 0 0 8%;padding:0;}

/*Some more colored elements*/
a.buttonlink{ background:#000099; border-radius:7px; color:#fff;display:block;float:left; margin:10px 15px 10px 0; padding:10px;text-decoration:none;}
a.buttonlink:hover{background:#C80000;}
a.buttonlink-right{ background:#000099; border-radius:7px; color:#fff;display:block;float:right; margin:10px 0px 10px 15px; padding:10px;text-decoration:none;}
a.buttonlink-right:hover{background:#C80000;}
li{padding-top:7px}
.greenelement{background:#0033CC;color:#fff;}
.violetelement{background:#606060;color:#fff;}

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/****************************************
*****************************************
MEDIAQUERIES
*****************************************
****************************************/

h1.policy {color: #00243d}
h2.policy {color: #00243d}
h3.policy {color: #00243d}
h4.policy {color: #00243d}
h5.policy {color: #00243d}
h5.policy {color: #00243d}
h6.policy {color: #00243d}
h1.policy {color: #00243d}
p.policy {font-size: 16px;color: #8D918D; line-height:30px}
ul.policy {font-size: 16px;color: #8D918D; line-height:30px}

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
    #banner{float:left;text-align:left;margin-bottom:-20px;/*this depends on the height of the logo*/}
    .menu-toggle{/*make menu float right, instead of sitting under the logo*/ margin-top:10px; /*this depends on the height of the logo*/ float:right;}
} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {

.wrapper{max-width: 1500px; margin: .25em auto;}
.container{width:1350%}
header{padding:0;}
#banner{ float:left; text-align:left;margin-bottom:0px;margin-top:0px;}
#hero{padding:0;}
#hero .grid_4 { width: 100%; }
#hero .grid_8 { width: 80%; margin:40px 10% 0;}
#content { float:left;width:65%;}
#content.wide-content{float:none;width:100%;}

.flexslider{display:block; /*demo 1 slider theme*/	margin: 0; }
.flex-control-nav {bottom: 5px;}
aside { float:right;width:30%;}

/*** MAIN MENU - ESSENTIAL STYLES ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}

.srt-menu, .srt-menu * {margin:	0;padding:0;list-style:none;}
.srt-menu ul {position:	absolute;display:none;width: 12em; /* left offset of submenus need to match (see below) */}
.srt-menu ul li {width: 100%;}
.srt-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
.srt-menu li {float:left;position:relative;margin-left:1px;height:25px;}
.srt-menu li li {margin-left:0px;height:auto;}
.srt-menu a {display:block;position:relative;}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {display:block;left:0;top:25px; /* match top ul list item height */z-index:99;-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {top:-999em;}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {left:12em; /* match ul width */top:0;}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {top:-999em;}
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {left:10em; /* match ul width */top:			0;}

/*** DEMO2 SKIN ***/
#topnav, .srt-menu {margin: .15em 0 0 0;}
.srt-menu a {text-decoration:none;}
    .srt-menu li a {background: #979595;margin: 0;padding: 0px 20px;color: White;font-family: Arial, Helvetica, sans-serif;font-size: 14px;text-align: center;}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/ color:White;}
.srt-menu li li a {border-top: 1px solid rgba(255,255,255,.2);background:#333; /*fallback for old IE*/ background:rgba(0,0,0,.6); color:	#fff;padding-left:20px;}
.srt-menu li li a:visited{color:#fff;}
.srt-menu li li li a,
.srt-menu li.current * li a{padding-left:20px;background:rgba(0,0,0,.6);}
.srt-menu li:hover > a,
.srt-menu li.current a{color:#C80000;}
.srt-menu li li:hover > a{color:#fff;}

/*GRID*/
/*
 & Columns : 12 

 */
.grid_1 {width: 5%; }
.grid_2 {width: 13.333333333333%;}
.grid_3 {width: 21.666666666667%;}
.grid_4 {width: 31%; padding:25px 25px 25px 25px}
.grid_5 {width: 38.333333333333%;}
.grid_6 {width: 50%; padding:25px 25px 25px 25px}
.grid_7 {width: 45%; padding:25px 25px 25px 25px}
.grid_8 {width: 63.333333333333%;}
.grid_9 {width: 71.666666666667%;}
.grid_10 {width: 80%;}
.grid_11 {width: 88.333333333333%;}
.grid_12 {width: 100%;}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	float: left;
	margin-bottom:0px;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.rightfloat{float:right;}
/* @
 * tinyfluidgrid.com
 & girlfriendnyc.com
 */

}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1024px) {
    #hero .grid_4 { width: 30%; }
    #hero h1{ font-size:1.4em;}
    #hero .grid_8 { width: 63.333333333333%; margin:0 1.6666666666667%; }
} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
    #hero h1{ font-size:2em;}
} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 1.5) { }

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
form{margin:0 auto;}
.search { padding:6px 15px 6px 30px;margin:3px; background: url('../images/zoom.png') no-repeat 8px 6px; }
.rounded { border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; }
select.ddlstyle{height:40px;color:#bcbcbc;font-size:18px;padding-top:5px;padding-bottom:5px;padding-left:15px}
textarea {width: 100%;height: 150px;padding: 12px 20px;box-sizing: border-box;border: 1px solid #AAA;border-radius: 4px;background-color: #f8f8f8;resize: none;}
.selectBox{border-radius:4px;border:1px solid #AAAAAA;height:40px;width:450px;margin-top:15px;font-size:18px;padding-top:5px;padding-bottom:5px;padding-left:10px}
a.footer{text-decoration:none}
a.footer:link {color:#D8D8D8; }      /* unvisited link */
a.footer:visited {color:#D8D8D8; }  /* visited link */
a.footer:hover {color:#FFF;}  /* mouse over link */
a.footer:active {color:#D8D8D8; }  /* selected link */
#stripe1,
#page-header{background:#fff;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;padding-top:35px;}
#stripe2,
#page-header{color:#fff;background:#474747;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe3,
#page-header{background:#ebebeb;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe4,
#page-header{color:#fff;background:#474747;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe5,
#page-header{background:#ebebeb;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe6,
#page-header{color:#fff;background:#474747;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;padding-top:25px;}
#stripe7,
#page-header{background:#ebebeb;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe8,
#page-header{background:#D8D8D8;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe9,
#page-header{background:#fff;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
#stripe10,
#page-header{background:#ebebeb;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;font-size:1.1em;}

#menu,
#page-header{background:#979595;border-bottom:1px solid #e2e2e2;font-size:1.1em;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}
 .video-container iframe,
	.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
 tr.rowhighlight{background-color:#D8D8D8}
.title{	font-size:1.2em;}
.features{font-size:1em;}
.subtitle{font-size:0.8em;}
.graydarkfont{color:rgb(56,56,56)}
.buttonmedium{font-size:1em;line-height:150%;font-weight:bold}
p.justify{text-align:justify}
.bg-image {position: relative;}
.bg-image img 
{display: block;overflow: hidden;display: block;width: 100%;max-width: 100%; /* corresponds to max height of 450px */ margin: 0 auto;}
    .bg-image h1 {position: absolute;align: left;top: 20px;bottom: 0;left: 450px;right: 0px;color: white;font-weight: 400;font-family: Arial, Helvetica, sans-serif;font-size: 2.2em;line-height: 1.2em;margin: .45em 0;padding: 0;}
.nav, .main {background-color: #f6f6f6;text-align: center;}
.price1 {font-family: Arial, Helvetica, sans-serif;padding-right: 20px;font-size: 1.5em;}
.price2 {font-family: Arial, Helvetica, sans-serif;color: #000;padding-right: 20px;font-size: 2em;font-weight: normal;font-style: italic;}
.price3 {font-family: Arial, Helvetica, sans-serif;padding-right: 20px;font-size: 1.2em;font-weight: normal;font-style: italic;}
.textbig{font-size:1.5em}
.textbig2{font-size:1.8em}
.textbig5{font-size:3.3em}
.textmedium{font-size:1em}
.textmedium2{font-size:1.15em}
.textnormal{font-size:0.8em}
.textsmall{font-size:0.7em}
.bold{font-weight:bold}
.notbold {font-weight:normal !important}
.special{color:#707070;text-decoration: line-through;font-size:12px}
.special-3{color:#000;text-decoration: line-through;font-size:12px}
.special-2{color:#980000; font-size:16px}
.price{color:#707070; font-size:16px}
.UpgradeSubText{width:500px;padding-left:50px}
.error{color:#F00000;}
.errorbig{color:#F00000;font-size:1.3em;font-weight:bold;line-height: 170%;}
.center{text-align:center}
.maxwidth{width:100%}
.spacer100{padding-left:100px;}
.spacer50{padding-left:50px;}
.spacer25{padding-left:25px;}
.spacer10{padding-left:10px;}
.spacertop65{padding-top:65px;}
.spacertop45{padding-top:45px;}
.spacertop15{padding-top:15px;}
.spacertop25{padding-top:25px;}
.spacertop35{padding-top:35px;}
.spacertop20{padding-top:20px;}
table.userproject td{padding-left:20px;padding-bottom:20px}
table, td, tr {vertical-align: top;}
td.middle{vertical-align: middle;}
td.bottom{vertical-align: bottom;}
img.pochette{width:400px}
th.vinyl_cutter{padding:15px;text-align:left}
td.vinyl_cutter1{padding:15px;text-align:center}
td.vinyl_cutter2{width:90%;padding:15px;}
td.feature2{padding:15px;text-align:center}
th.feature2{padding:15px;text-align:center}
td.feature1{width:90%;padding:15px;}
th.feature1{width:90%;padding:15px;}
tr.featureCateg{background-color:#0000CC;color:#FFF}
table.softprice td{text-align:center;padding-left:20px;padding-bottom:10px;padding-top:5px}
.textvinylcutterlist{font-size:1.5em;padding:15px;line-height:1.2em;text-align:center}
table.border {border: 1px solid black;border-collapse: collapse;width: 100%;color: #000;}
div.accountbox{width: 200px;height: 200px;border: 1px solid #A7A6AA;text-align: center;display: flex;align-items: center;justify-content: center;font-weight:bold;font-size:1.3em}
div.accountbox:hover{background:#FFFAFA;}
div.shipping_addr{height:350px;padding: 25px;margin: 25px;border: 1px solid #A7A6AA;text-align: center;align-items: center;justify-content: center;font-weight:bold;font-size:1.3em}
div.shipping_addr:hover{background:#FFFAFA;}
.pannel{padding-top:125px;padding-bottom:105px}
.pannel2{padding-bottom:75px}
.pannelnavmenu{padding-bottom:0px}
.pannelnavmenu a{color:White;font-size:85%;}
.right{text-align:right}
.emailerror{text-align:right;line-height:1.8em}
table.register, td{padding-bottom:15px;}
table.reseller td  {padding: 15px 0px 15px 40px; }
table.wide {width:100%}

body{background:#555;}
header{position:relative;width:100%;background:#333;}
.logo{position:relative;z-index:2;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:35%;}
.logo a{color:#6DDB07;}
img.logo {width:65%;}
div.activation_status{padding: 55px;text-align:center;border: 1px solid #A7A6AA;}
div.activation_status:hover{background:#FFFAFA;}
ol.instruction{padding-left:45px}
ol.instruction li{padding-bottom:5px}
i.account_ico{font-size:4.5em}
nav{position:relative;margin:0 auto;}
.square {border-radius: 0 !important;}

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {z-index: 1;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu {font-family: Arial, Helvetica, sans-serif;background: #333}
#cssmenu > ul{float:left}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:14px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:14px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:1000px){
    .logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
    .logo2{display:none}
    img.logo {width:25%;margin-left:20px;}
    nav{width:100%;}
    #cssmenu{width:100%}
    #cssmenu ul{width:100%;display:none}
    #cssmenu ul li{width:100%;border-top:1px solid #444}
    #cssmenu ul li:hover{background:#363636;}
    #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
    #cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
    #cssmenu > ul > li{float:none}
    #cssmenu ul ul li a{padding-left:25px}
    #cssmenu ul ul li{background:#333!important;}
    #cssmenu ul ul li:hover{background:#363636!important}
    #cssmenu ul ul ul li a{padding-left:35px}
    #cssmenu ul ul li a{color:#ddd;background:none}
    #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
    #cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
    #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
    #cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
    .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
    .button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
    .button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
    .button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
    .button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    #cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
    #cssmenu .submenu-button.submenu-opened{background:#262626}
    #cssmenu ul ul .submenu-button{height:34px;width:34px}
    #cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
    #cssmenu ul ul .submenu-button:after{top:15px;right:13px}
    #cssmenu .submenu-button.submenu-opened:after{background:#fff}
    #cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
    #cssmenu ul ul .submenu-button:before{top:12px;right:16px}
    #cssmenu .submenu-button.submenu-opened:before{display:none}
    #cssmenu ul ul ul li.active a{border-left:none}
    #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}

img.small-icon{width: 35px;height: 35px;}
.panel-hover:hover {background-color: #f5f5f5 !important;}
.panel-hover2:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.panel-hover2:hover a {text-decoration: none;color: 	#808080;}
.panel-hover2 a {text-decoration: none;color: #484848;}
.panel-hover-faq:hover a {text-decoration: none;color: 	#C0C0C0;}
.panel-hover-faq a {text-decoration: none;	color: #FFF;}
.carousel-caption-center{top: 40%;transform: translateY(-50%);bottom: initial;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
.accountbox:hover a {text-decoration: none;}
.navbar .navbar-nav{background-color: #000;}
.navbar .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:focus {background-color: #000;font-weight:bold;color: #FFF;}
.navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {background-color: #000;color: #1E90FF;}
.navbar .navbar-toggle {background-color: #000;background-color: #fff;}
.navbar .navbar-toggle .icon-bar {background-color: #000;color:#000;}
.navbar-toggle {background-color: #fff;color:#fff;}
.dropdown:hover .dropdown-menu {display: block;margin-top: 0; /* remove the gap so it doesn't close */}
 
blockquote {padding: 6px 16px;border: none;quotes: "\201C" "\201D";display: inline-block;position: relative;}
blockquote:before { content: open-quote;font-weight: bold;position:absolute;top:0;left: 0;} 
blockquote:after { content: close-quote;font-weight: bold;position:absolute;bottom:0; right: 0;}
.round {display: inline-block;height: 120px;width: 120px;line-height: 120px;-moz-border-radius: 60px;border-radius: 60px;background-color: #222;    color: #FFF;text-align: center;  }
.round.hollow {display: inline-block;height: 120px;width: 120px;line-height: 120px;-moz-border-radius: 60px;border-radius: 60px;background-color: #FFF;    color: #222;text-align: center;-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.75);box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.75);}
hr.dark{border: 0;height: 0;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.box-shadow {border:0px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {border: none;}

/*gridview*/
.table table tbody tr td a, .table table tbody tr td span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;background-color: #fff;border: 1px solid #ddd;}
.table table > tbody > tr > td > span {z-index: 3;color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
.table table > tbody > tr > td:first-child > a,
.table table > tbody > tr > td:first-child > span {margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
.table table > tbody > tr > td:last-child > a,
.table table > tbody > tr > td:last-child > span {border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.table table > tbody > tr > td > a:hover,
.table   table > tbody > tr > td > span:hover,
.table table > tbody > tr > td > a:focus,
.table table > tbody > tr > td > span:focus {z-index: 2;color: #23527c;background-color: #eee;border-color: #ddd;}
/*end gridview */

.fa-check {color: green;}
.fa-pencil-square-o{color: black;}
.fa-television{color: black;}

a.panel-button:hover  { text-decoration: none; }
a.panel-button:hover .panel-footer { background-color: #003366; /* Dark blue */ }
a.panel-button:hover .panel-footer { color:#FFF }
a.panel-button .panel-body { color: #000; /* Dark blue */ }

h1.panel-title {
    font-size: 36px;
}
h2.panel-title {font-size: 30px;}
h3.panel-title {font-size: 24px;}
h4.panel-title {font-size: 18px}
h5.panel-title {font-size: 14px}
h6.panel-title {font-size: 10px;}

.ftw {color: #D8D8D8}

.hovereffect {width: 100%;height: 100%;float: left;overflow: hidden;position: relative;text-align: center;cursor: default;}
.hovereffect .overlay {width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;padding: 50px 20px;}
.hovereffect img {display: block;position: relative;max-width: none;width: calc(100% + 20px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.hovereffect:hover img {opacity: 0.4;filter: alpha(opacity=40);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.hovereffect h2 {text-transform: uppercase;color: #fff;text-align: center;position: relative;font-size: 1.3em;overflow: hidden;padding: 0.5em 0;background-color: transparent;opacity: 0;filter: alpha(opacity=0);}
.hovereffect h2:after {position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background: #fff;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);}
.hovereffect:hover h2:after {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.hovereffect a, .hovereffect p, .hovereffect h2 {color: #FFF;opacity: 0;filter: alpha(opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2  {opacity: 0.6;filter: alpha(opacity=100);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);background: #808080;}
.no-spacing {margin: 0px;padding: 0px}
input.imgbutton:hover {opacity: 0.5;}

.btn-xl {
    font-size: 2.75em; /* default for desktop */
    font-weight: bold;
}

@media (max-width: 991px) {
    .btn-xl {
        font-size: 1.5em;
    }

    @media (max-width: 767px) {
        .btn-xl {
            font-size: 1.5em;
        }
    }

    @media (max-width: 480px) {
        .btn-xl {
            font-size: 1.5em;
        }
    }
}

/* Make only this outer row equal-height */
.row.equalize-cols {
    display: flex;
    flex-wrap: wrap; /* keep Bootstrap’s wrapping at small screens */
    align-items: stretch; /* columns match tallest column */
}

    /* Make columns flex containers so their child fills */
    .row.equalize-cols > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

        /* Left panel should fill its column’s height */
        .row.equalize-cols > [class*="col-"] > .panel {
            display: flex;
            flex-direction: column;
            flex: 1; /* stretch to full column height */
        }

/* Optional: keep image scaling sane */
.panel-body img.img-responsive {
    max-width: 100%;
    height: auto;
}

div.centered {
    width: 50%; /* Or any other fixed width */
    margin: 0 auto;
}

/* Left-align on md+; will be centered by default below */
@media (min-width: 992px) {
    .text-md-left {
        text-align: left !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .clearfix.visible-sm-block ~ .col-sm-6 {
        margin-top: 20px; /* adjust to taste */
    }
}

 /* Phones only (<768px) */
@media (max-width: 767px) {
    .xs-pt-20 {
        padding-top: 15px;
    }
    /* adjust value as you like */
}

