/* LESS Document */

#main{background-image: url('images/background.jpg');	background-size: cover;	background-repeat: no-repeat;	background-attachment: fixed;	background-color: #fff;	margin: 0px 0px 0px 0px;}
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
/**** Isotope CSS3 transitions ****/

.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
/* End: Recommended Isotope styles */



/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/**** Isotope styles ****/

.element * { margin: 0; }
.element { width: 150px; height: 210px; margin: 0px; float: left; overflow: hidden; position: relative; }
.variable-sizes .element.col1 { width: 150px; }
.variable-sizes .element.row1 { height: 100px; overflow: hidden; }
.variable-sizes .element.col2 { width: 310px; }
.variable-sizes .element.row2 { height: 210px; overflow: hidden; }
.variable-sizes .element.col3 { width: 470px; }
.variable-sizes .element.row3 { height: 320px; overflow: hidden; }
.variable-sizes .element.col4 { width: 630px; }
.variable-sizes .element.row4 { height: 430px; overflow: hidden; }
/**** Horizontal ****/

.horizontal #container { height: 80%; }
#copy { max-width: 640px; }
/**** Infinite Scroll ****/

#infscr-loading { position: fixed; text-align: center; bottom: 30px; left: 42%; z-index: 100; background: white; background: hsla( 0, 0%, 100%, 0.9 ); padding: 20px; color: #222; font-size: 15px; font-weight: bold; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#promo-wrapper { width: 100%; max-width: 1220px; padding: 0px; margin: 0px auto; }
#promo { width: 100%; background-color: #333; padding: 10px 25px; text-align: center; color: #fff; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 24px; margin: 0px 0px 0px -30px; }
#promo:hover { background-color: #00a0d3; }
#promo a { display: block; width: 100%; color: #fff; }
#promo:hover a, #promo a:hover { color: #fff; }

@media all and (max-width: 479px) {
#promo-wrapper { width: 255px; }
#promo { margin-left: -20px; font-size: 14px; }
}

@media all and (min-width: 480px) and (max-width: 650px) {
#promo-wrapper { width: 415px; }
#promo { margin-left: -20px; font-size: 18px; }
}

@media all and (min-width: 651px) and (max-width: 810px) {
#promo-wrapper { width: 580px; }
#promo { margin-left: -35px; }
}

@media all and (min-width: 811px) and (max-width: 970px) {
#promo-wrapper { width: 740px; }
#promo { margin-left: -35px; }
}

@media all and (min-width: 971px) and (max-width: 1450px) {
#promo-wrapper { width: 900px; }
}

@media all and (min-width: 1451px) and (max-width: 3210px) {
#promo-wrapper { width: 1060px; }
}
/* Page Styles */

.ie8 body { background-image: none; }
a { text-decoration: none; color: #000; }
#fancybox-content h3 { font-size: 16px; font-weight: bold;  }
#fancybox-content p { font-size: 14px; line-height: 18px; f }
.header { width: 980px; padding: 25px 0px; /* Left/Right Padding Needs to be ZERO */ text-align: center; color: #fff; margin: 0px auto; }
.header h1 {  text-align: left; color: #000624; font-size: 32px; text-transform: uppercase; margin-bottom: 20px; }
.header h1 span { display: none; }
.header h2 { font-size: 18px;  text-align: left; margin: 0px 0px 20px 0px; color: #000624; }
.header p { font-size: 16px; line-height: 20px; text-align: left; margin: 0px 0px 18px 0px; color: #000624; max-width: 85%; }
#content { padding: 8px 10px 10px 55px; }
#container { padding: 5px; margin-bottom: 20px; border-radius: 5px; clear: both; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#holder { display: none; }
#container .element { margin: 0px 0px 10px 0px; padding: 0px; font-size: 16px; line-height: 24px; font-family: Arial, Helvetica, sans-serif; float: left; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
#container .element p { margin: 0px; padding: 0px; }
#container .element span.bottom { display: block; position: relative; left: 0px; bottom: 0px; background-image: url('images/box-bg.png'); background-position: top center; background-repeat: no-repeat; width: 100%; margin: 0px; padding: 25px 0px 6px 0px; margin-top: -60px; height: 160px; transition: margin 0.3s ease-in; -moz-transition: margin 0.3s ease-in; -webkit-transition: margin 0.3s ease-in; -o-transition: margin 0.3s ease-in; z-index: 100; }
#container .element span.bottom-nohover { display: block; position: relative; left: 0px; bottom: 0px; background-image: url('images/box-bg.png'); background-position: bottom center; background-repeat: no-repeat; width: 100%; margin: 0px; padding: 10px 0px 6px 0px; margin-top: -50px; height: 160px; z-index: 100; }
#container .element span.bottom span, #container .element span.bottom-nohover span { padding-right: 10px; }
#container .element:hover span.bottom { background-position: bottom center; padding: 20px 0px 0px 0px; margin-top: -100px; transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -webkit-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; }
#container .element .bottom .title, #container .element .bottom-nohover .title { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; padding: 0px; margin: 0px; text-transform: uppercase; }
#container .element:hover .bottom .title, #container .element:hover .bottom-nohover .title { color: #00a0d3; }
#container .element .bottom .description {font-size: 14px; text-align: center; padding: 10px 10px 60px 10px; color: #fff; }
#container .element span.regular { display: block; position: absolute; left: 0px; top: 0px; width: 100%; margin: 0px; padding: 10px; }
#container .element .regular .title {  font-size: 16px; padding: 20px 5px 0px 0px; text-transform: uppercase; }
#container .element .regular .title.left { padding: 20px 20px 0px 10px; }
#container .element .regular .title.right { padding: 20px 25px 0px 0px; font-size: 14px;}
#container .element .regular h3{ font-size: 14px; padding: 10px 14px 60px 10px; margin-left: 0px; line-height: 20px; }
#container .element.smaller-text .regular h1, #container .element.smaller-text .regular h2, #container .element.smaller-text .regular h3, #container .element.smaller-text .regular h4, #container .element.smaller-text .regular h5, #container .element.smaller-text .regular h6 { font-size: 14px; line-height: 18px; padding: 10px 30px 60px 5px; }
#container .element .left { text-align: left; }
#container .element .right { text-align: right; float: none; }
#container .element .center { text-align: center; margin: 0px 0px 0px 0px; }
.darktext { #color: #000624;
}
h3.darktext { margin-top: 42px; }
#container a .element .light-bg, #container .element:hover .bottom .title .blue, #container .element:hover .bottom-nohover .title .blue { color: #fff; }
#container .element .title.blue, #container a .element .title.blue, #container .element .bottom .title .blue, #container .element .bottom-nohover .title .blue { color: #00a0d3; }
#container .element .dark-bg, #container a .element .dark-bg { color: #fff; }
ul.action-items { margin-top: 24px;  font-size: 12px; width: 260px; text-align: left; background-color: #00a0d3; padding: 5px 20px 20px 20px; }
ul.action-items a { color: #fff; margin-top: 14px; text-decoration: none; display: block; border: #fff solid 2px; text-align: center; padding: 10px; text-transform: uppercase; }
ul.action-items a:hover { background-color: #fff; color: #000624; }
.action-items li { list-style: none; margin: 0px 0px 5px 0px; padding: 0px; }
.action-items h3 { color: #fff; font-size: 20px; }
.action-itemsspan .text { color: #fff; width: 100%; }
ul.top-level-sort { margin: 30px 0px 0px 0px; padding: 0px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; text-transform: uppercase; float: left; white-space: nowrap; text-align: left; }
ul.top-level-sort a { background-color: #fff; color: #00a0d3; border: #00a0d3 2px solid; padding: 15px 35px; margin: 0px -4px 0px 0px; text-decoration: none; margin-right: 5px; }
.ie7 ul.top-level-sort a { display: inline-block; }
ul.top-level-sort a:hover, ul.top-level-sort a.selected { background-color: #00a0d3; color: #fff; }
ul.top-level-sort li { display: inline; list-style: none; margin: 0px; padding: 0px; }
ul.top-level-sort ul { margin: 30px 0px 20px 0px; padding: 0px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; /*float: left;*/ }
ul.top-level-sort ul span { text-transform: uppercase; color: #000624; }
ul.top-level-sort ul a { color: #000624; text-decoration: none; padding: 0px 10px; white-space: nowrap; background-color: transparent; border: none; }
ul.top-level-sort ul a:hover, ul.top-level-sort ul a.selected { color: #008eb9; background-color: transparent; }
ul.top-level-sort ul li { display: inline; list-style: none; margin: 0px; padding: 0px; }
ul.social { margin: 0px 25px 0px 0px; padding: 0px; float: right; }
ul.social img { border: 0px; }
ul.social li { margin: 0px; padding: 0px; display: inline; list-style: none; }
/* TOOLTIP */

.tooltip { color: #000000; outline: none; text-decoration: none; position: relative; }
.tooltip span { margin-left: -999em; position: absolute; }
.custom { padding: 10px; }
* html a:hover { background: transparent; }
.info { color: #fff; font-size: 14px; }
span.info span { border: 10px solid #333333; background: #000000; padding: 10px; margin-top: 16px; }

.popLink a: {color:#fff;text-decoration:none;}
.popLink:hover { color: #fff; text-decoration: none; }
.crump { background-image: url('http://webdocs.commvault.com/css/next-generation/images/crump2.jpg'); background-repeat: no-repeat; wdith: 650px; height: 450px; padding: 10px; }
.popButtonDark { border: 2px solid #00a0d3; padding: 10px; font-size: 14px; text-transform: uppercase; color: #00a0d3; width: 240px; text-align: center; text-decoration:none; }
.poptextBuff {    width: 300px;    color: #000624;    font-size: 18px;    margin-left: 290px;    margin-top: 120px;    font-family: tahoma;    padding-bottom: 40px;    line-height: 24px;}
.popButtonDark:hover { border: 2px solid #00a0d3; padding: 10px; font-size: 14px; text-transform: uppercase; color: #fff; width: 240px; text-align: center; text-decoration:none;  background-color:#00a0d3}
.buff{background-image: url('http://webdocs.commvault.com/css/next-generation/images/Buffington2.jpg'); background-repeat: no-repeat; wdith: 650px; height: 450px; padding: 10px;}
.poptext { width: 280px; color: #fff; font-size: 18px; margin-left: 320px; margin-top: 120px; font-family: tahoma; padding-bottom: 40px; line-height: 24px; }
.popButton { border: 2px solid #fff; padding: 10px; font-size: 16px; text-transform: uppercase; color: #fff; width: 240px; text-align: center }
.popButton:hover { border: 2px solid #fff; padding: 10px; font-size: 16px; text-transform: uppercase; color: #000624; width: 240px; text-align: center; text-decoration:none; background-color:#FFFFFF}
.wc{background-image: url('http://webdocs.commvault.com/css/next-generation/images/webcast-bg2.jpg'); background-repeat: no-repeat; wdith: 650px; height: 450px; padding: 10px;}
.poptextWC {
    width: 339px;
    color: #fff;
    font-size: 20px;
    margin-left: 250px;
    margin-top: 135px;
    font-family: tahoma;
    padding-bottom: 40px;
    line-height: 24px;
}
@media all and (max-width: 822px) {
#container .element .regular h3 {
    font-size: 14px;
    padding: 10px 14px 60px 10px;
    margin-left: 0px;
    line-height: 20px;
}
#container .element .regular .title.right {
    padding: 20px 25px 0px 0px;
    font-size: 14px !important;
}
#content {
  padding: 10px 10px 0px 5px;
}


variable-sizes .element.col4 {
    width: 636px !important;
}
ul.action-items {
    margin-top: 300px;
    font-size: 12px;
    width: 364px;
    text-align: left;
    background-color: #00a0d3;
    padding: 5px 20px 20px 20px;
    margin-left: -46px;
}
.header {
    width: 270px;
    padding: 10px 0px;
    text-align: center;
    color: #fff;
    margin: 0px auto;
}

.header p {
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    margin: 0px 0px 0px 0px;
    color: #000624;
    max-width: 100%;
}


.variable-sizes .element.col2 {
    width: 280px;
}

#container .element p {
    margin: 0px;
    padding-right: 8px;
    font-size: 14px;
}

container .element span.bottom {
    display: block;
    position: relative;
    left: 0px;
    bottom: 0px;
    background-image: url('images/box-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    width: 280px;
    margin: 0px;
    padding: 25px 0px 6px 0px;
    margin-top: -60px;
    height: 160px;
    transition: margin 0.3s ease-in;
    -moz-transition: margin 0.3s ease-in;
    -webkit-transition: margin 0.3s ease-in;
    -o-transition: margin 0.3s ease-in;
    z-index: 100;

}

.learnmore{display:none;}

ul.top-level-sort {
    margin: 30px 0px 0px 0px;
    padding: 0px;
    /* padding-top: 50px; */
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    white-space: normal;
    text-align: left;
}
ul.top-level-sort li {
    margin: 40px 5px 0px 0px;
    padding: 0px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    white-space: normal;
    text-align: center;
    width:100px;
}
#filterby{margin-left:-180px; width:280px; margin-bottom:50px; white-space: normal; 
}
ul.top-level-sort ul a {
    color: #000624;
    text-decoration: none;
    padding: 0px 0px;
    white-space: normal;
    background-color: transparent;
    border: none;
    font-size:10px
}
ul.top-level-sort ul li {
    width: 100%;
    margin-left: -12px;
}
ul.top-level-sort a {
    background-color: #fff;
    color: #00a0d3;
    border: #00a0d3 2px solid;
    padding: 14px 28px;
    margin: 0px -4px 0px 0px;
    text-decoration: none;
    margin-right: 5px;
}
}
@media all and (max-width: 479px) {

#content {
  padding: 10px 10px 0px 5px;
}


.variable-sizes .element.col4 {
    width: 330px;
}

ul.action-items {
    margin-top: 300px;
    font-size: 12px;
    width: 330px;
    text-align: left;
    background-color: #00a0d3;
    padding: 5px 20px 20px 20px;
    margin-left: -28px;
}
.header {
    width: 270px;
    padding: 10px 0px;
    text-align: center;
    color: #fff;
    margin: 0px auto;
}

.header p {
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    margin: 0px 0px 0px 0px;
    color: #000624;
    max-width: 100%;
}


.variable-sizes .element.col2 {
    width: 280px;
}

#container .element p {
    margin: 0px;
    padding-right: 8px;
    font-size: 14px;
}

container .element span.bottom {
    display: block;
    position: relative;
    left: 0px;
    bottom: 0px;
    background-image: url('images/box-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    width: 280px;
    margin: 0px;
    padding: 25px 0px 6px 0px;
    margin-top: -60px;
    height: 160px;
    transition: margin 0.3s ease-in;
    -moz-transition: margin 0.3s ease-in;
    -webkit-transition: margin 0.3s ease-in;
    -o-transition: margin 0.3s ease-in;
    z-index: 100;

}

.learnmore{display:none;}

ul.top-level-sort {
    margin: 30px 0px 0px 0px;
    padding: 0px;
    /* padding-top: 50px; */
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    white-space: normal;
    text-align: left;
}
ul.top-level-sort li {
    margin: 40px 5px 0px 0px;
    padding: 0px;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    float: left;
    white-space: normal;
    text-align: center;
    /* width: 106%; */
}
#filterby{margin-left:-180px; width:280px; margin-bottom:50px; white-space: normal; 
}
ul.top-level-sort ul a {
    color: #000624;
    text-decoration: none;
    padding: 0px 0px;
    white-space: normal;
    background-color: transparent;
    border: none;
    font-size:10px
}
ul.top-level-sort ul li {
    width: 100%;
    margin-left: 70px;
}
ul.top-level-sort a {
    background-color: #fff;
    color: #00a0d3;
    border: #00a0d3 2px solid;
    padding: 14px 28px;
    margin: 0px -4px 0px 0px;
    text-decoration: none;
    margin-right: 5px;
    /* width: 203px; */
}
}