body
{
	font-family: Lato, Helvetica, Arial;
	/*font-size:20px;*/
	font-weight: 100;
	line-height:1.5em;
	position:relative;
	color:#333;
}
#pagebody 
{
    min-width: 960px;
}

.global-header {
position: relative;
width: 100%;
z-index: 8000;
}
.top-bar {
box-shadow: 0px -1px 10px #999999;
color: #666;
height: 60px;
padding: 10px 0;
webkit-box-shadow: 0px -1px 10px #999999;
width: 100%;
}
.minwidth {
width: 100%;
min-width: 960px;
}
.wrapper {
clear: both;
display: block;
margin: 0 auto;
width: 940px;
padding-left: 10px;
padding-right: 10px;
}

h2
{
	font-size:48px;
	font-weight: 100;
	line-height: 1.2;
	margin-bottom: 1em;
}

p
{
	margin-bottom:1.5em;
}


.bg-grey
{
	background:#ebeff1;
}

.bg-white
{
	background:#fff;
}

.bg-teal
{
	background: #58686f;
}

.bg-teal h2
{
	color:#fff;
}

.bg-dark-grey
{
	background:#2a3438;
	color:#fff;
}

.bg-black
{
	background: #000;
	color: #fff;
}

h3
{
	font-size:24px;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 100;
	margin:20px 0;
}

h3 a
{
	text-decoration: underline;
	color:#333;
}

.center {
    margin:0 auto;
}
.bg-dark-grey h3, .bg-teal h3
{
	color:#fff;
}

.white
{
	color:#fff;
}

.no-padding
{
	padding:0;
}

.no-top-padding
{
	padding-top:0;
}

.no-bottom-padding
{
	padding-bottom:0;
}

.margin-top-10
{
	margin-top:10px;
}

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

.margin-top-40
{
	margin-top:40px;
}

.margin-top-60
{
	margin-top:60px;
}

.margin-top-80
{
	margin-top:80px;
}

.fbPanel
{
	background:url(../images/Roar-Experience-Social-Media-Facebook_bg.jpg) no-repeat center;
	background-size:cover;
	min-height:500px;
}

.instagramPanel
{
	background:url(../images/Roar-Experience-Social-Media-instagram_bg.jpg) no-repeat center;
	background-size:cover;
	min-height:500px;
}

.twitterPanel
{
	background:url(../images/Roar-Experience-Social-Media-twitter_bg.jpg) no-repeat center;
	background-size:cover;
	min-height:500px;
}

.mediaPanel
{
	background:url(../images/Roar-Experience-Social-Media-Benefits_bg.jpg) no-repeat center;
	background-size:cover;
	min-height:500px;
}


.registerPanel
{
	background:url(../images/Roar-Experience-Social-Media-Register-Clean_bg.jpg) no-repeat center;
	background-size:cover;
	min-height:500px;
}



img.full-width
{
	width:100%;
	max-width:1920px;
}

.section-icon
{
	margin:0px auto 60px auto;
}

table
{
	margin:0 auto;
}

.comparison-table
{
	width:80%;
	max-width:800px;
}

.comparison-table tr
{
	height:64px;
}

.comparison-table td
{
	padding:20px;
	color:#fff;
}

.comparison-table>tbody>tr:nth-of-type(odd)
{
	background-color: #58686f;
}

.comparison-table>tbody>tr:nth-of-type(even)
{
	background-color: #505f66;
}

.comparison-table > tbody > tr > td:first-child
{
	text-align: left;
}

.navbar-default
{
	border:none;
	width:100%;
}

#roar-navbar
{
	padding:0;
	margin-left:-15px;
	border:none;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
{
	background-color: #889197;
	color:#fff;
}

.navbar .container-fluid
{
	padding-left:0;
}

.navbar
{
	margin:0 auto;
}

.navbar li a
{
	padding-top:25px;
	height:74px;
}

.navbar li:last-child a
{
	padding-top:15px;
}

.container920
{
	width:100%;
	max-width:920px;
	margin:0 auto;
	text-align:center;
}

.container940
{
	width:100%;
	max-width:940px;
	float:left;
	text-align:center;
}

.quote-container-left
{
	background:#fff;
	opacity: 0.8;
	position:absolute;
	top:15%;
	left:0;
	text-align: center;
}

.quote-container-right
{
	background:#fff;
	opacity: 0.8;
	position:absolute;
	top:10%;
	right:0;
	text-align: center;
	width:60%;
}

#features .quote-container-right
{
	top:20%;
	width:50%;
}

blockquote
{
	font-size:30px;
	font-weight: 100;
	line-height: 1.6;
	margin:20px auto 0 auto;
	border:none;
	quotes: "\201C""\201D""\2018""\2019";

}

blockquote:before, blockquote:after
{
	font-family: Georgia, Times;
	color: #ccc;
	line-height: 0.1em;
	vertical-align: -0.4em;
	font-size: 3em;
}

blockquote:before
{
	content: open-quote;
}

blockquote:after
{
	content: close-quote;
}

.quote-source
{
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: 400;
	text-align: right;
	margin:20px 40px 40px 0;
}

blockquote p
{
	margin-bottom:1em;
	display:inline;
}

.roar-button
{
	text-transform: uppercase;
	font-size:14px;
	color:#000;
	letter-spacing: 1px;
	text-decoration: none !important;
}

.bg-lion
{
	background:url(../images/lion.png);
	background-position:top center;
	min-height:682px
}

.roar-button-container
{
	margin-top:400px;
}

.roar-button-intro
{
	padding-top: 90px;
}

.codec-section
{
	padding:90px 60px 0 60px;
}

.megastereo-section-container
{
/*	background:url(../images/feature_megastereo.jpg) no-repeat bottom center;
	background-size:contain;
*/
	position:relative;
}

.megastereo-intro-container
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	max-height:944px;
	min-height:700px;
}

.megastereo-intro
{
	padding:4% 60px;
	width:100%;
	max-width:920px;
	margin:0 auto;
}

.speakerphone-section-container
{
/*	background:url(../images/feature_megastereo.jpg) no-repeat bottom center;
	background-size:contain;
*/
	position:relative;
}

.speakerphone-intro-container
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	max-height:944px;
	min-height:700px;
}

.speakerphone-intro
{
	padding:4% 60px;
	width:100%;
	max-width:920px;
	margin:0 auto;
}
	.speakerphone-intro h2
	{
		margin-bottom: 0.8em;
	}

.dual-battery-intro
{
	padding-top: 90px;
}
	.dual-battery-intro .icons
	{
		display: block;
		margin: 0 auto;
	}
		.dual-battery-intro .icons img
		{
			float: left;
			margin: 0 auto;
		}



.orch
{
	background:url(../images/feature_audio_codecs.jpg) no-repeat center;
	background-size:cover;
	min-height:860px
}

.video-thumbnail
{
	width:100%;
	max-width:620px;
	margin-bottom: 20px;
}

.review-video-thumbnail
{
	padding: 20px;
	margin: 0 px 10px;
	min-width: 287px;
	min-height: 220px;
}

.button-small, .button-medium, .button-large, .button-mini,
a.button-small, a.button-medium, a.button-large, a.button-mini,
a.button-small:visited, a.button-medium:visited, a.button-large:visited, a.button-mini:visited
{
    color: #fff;
    display: inline-block;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}

    .button-small:hover, .button-medium:hover, .button-large:hover, .button-mini:hover, .button-hover
    {
        opacity: 0.6;
    }

.button-mini
{
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    letter-spacing: 1px;
    padding: 0 10px;
}

.button-small
{
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    letter-spacing: 1px;
}

.button-medium
{
    font-size: 16px;
    height: 40px;
    letter-spacing: 2px;
    line-height: 40px;
    letter-spacing: 1px;
}

.button-large
{
    font-size: 16px;
    height: 50px;
    letter-spacing: 2px;
    line-height: 50px;
}

.link-button
{
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
}


.bg-red
{
    background-color: #e31721;
}

.bg-red-hover:hover
{
    background-color: #FF8888;
}

.footnote, .footnote a, .footnote a:visited
{
	font-size:14px;
	color:#252525;
}

.footer-social
{
    letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	margin-top:60px;
}

.footer-social a
{
	font-size:10px;
    padding: 6px 20px;
	color:#252525;
}

.footer-social a.facebook
{
    background: url('http://sg.creative.com/Content/Images/icon.png') no-repeat -25px -484px;
    padding-left: 28px;
}

.footer-social a.twitter
{
    background: url('http://sg.creative.com/Content/Images/icon.png') no-repeat -25px -613px;
    padding-left: 28px;
}

.footer-social a.youtube
{
    background: url('http://sg.creative.com/Content/Images/icon.png') no-repeat -25px -545px;
    padding-left: 28px;
}

@media screen and (max-width: 991px) {
	.quote-container-left, .quote-container-right
	{
		position:static;
		width:100%;
	}

	blockquote
	{
		line-height:1.5em;
	}

	blockquote:before, blockquote:after
	{
		font-size:3em;
	}
}

@media screen and (max-width: 768px) {

	.logoTagline
	{
		position:static;
		margin-bottom:30px;
	}

	.roar-logo
	{
		width:90%;
		max-width:538px;
		margin-top:20px;
	}



	.comparison-table
	{
		width:100%;
	}

	.comparison-table tr
	{
		height:60px;
	}

	.comparison-table td
	{
		font-size:14px;
		line-height:20px;
		padding:5px 8px;
	}

	.comparison-table td img
	{
		width:16px;
	}

	section
	{
		padding:30px 0 30px 0;
	}

	.section-icon
	{
		margin:0px auto 20px auto;
	}

	.container920 h2
	{
		text-align:center;
	}

	.container920 p
	{
		text-align: left;
	}

	.quote-container-left, .quote-container-right
	{
		position:static;
		width:100%;
	}

	blockquote
	{
		line-height:1.5em;
	}

	blockquote:before, blockquote:after
	{
		font-size:3em;
	}

	.bg-lion
	{
		background:none;
		min-height:0;
	}

	.roar-button-intro
	{
		padding-top:20px;
	}

	.roar-button-container
	{
		margin:0 auto 40px auto;
		text-align:center;
	}

	.codec-section
	{
		padding:20px;
	}

	.megastereo-intro-container
	{
		position:static;
		padding:20px;
		min-height: 0;
	}

	.megastereo-intro
	{
		position:static;
		min-height:0;
		text-align:left;
		padding:20px;
	}

	.speakerphone-intro-container
	{
		position:static;
		padding:20px;
		min-height: 0;
	}

	.speakerphone-intro
	{
		position:static;
		min-height:0;
		text-align:left;
		padding:20px;
	}}


/*
http://stackoverflow.com/questions/25714852/change-the-order-of-col-12-columns-in-bootstrap-3-by-using-push-pull
*/
@media (min-width: 767px) {

  .row.reorder-md {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

    direction: rtl;
  }

  .row.reorder-md > [class*="col-"] {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);

    direction: ltr;
  }

}

/*Back button*/
div.backBtnWrap{
    height:24px;
    margin:0 0 20px 0
}

div.link_bttm {
    margin: 0 auto;
    height: 20px;
    position: relative;
}

div.back_btn,div.back_btn_bttm{
    background: #232323 url(../images/arrow_left_link.png) 10px 50% no-repeat;
    color: #afafaf;
    font: normal 9px "proxima-nova",sans-serif;
    text-align: center;
    vertical-align: middle;
    float: right;
    letter-spacing: 1px;
    padding: 6px 0;
    margin-right:20px
}


div.back_btn {
    border-radius: 0 0 10px 10px;
    float: left;
}

div.back_btn_bttm {
    border-radius: 10px 10px 0 0;
    bottom: 0;
    right: 0;
}

div.back_btn a,div.back_btn_bttm a {
    margin-left: 2px;
    color: #ccc;
    text-decoration: none;
    padding: 6px 26px;
}

/*Custom Css for SoundBlasterRoar Experience */

.fbPanel
{

}

.fbPanel .icon,  .instagramPanel .icon,  .twitterPanel .icon
{
    float: left;
}

.leftPanel
{
    margin: 140px 0px;
    outline:1px solid green;
}

.fb_listtext 
{
    padding-left:10px;text-align:left;overflow:hidden;
}

.list-group-item 
{
    border: none !important;
    overflow: hidden;
}

.form-control 
{
    font-style: italic;
}
.mhl-container
{
    padding:0;
    position:relative;
    overflow:hidden;
    /*background: url(images/Roar-Experience-Social-Media-Intro_bg.jpg) top no-repeat;*/
    background-size: cover;
    min-height: 480px;
    width:100%;
}

.mhl-container h1
{

}


.logoTagline
{
    position: absolute;
    top:0%;
    text-align: right;
    padding-top: 50px;
          
          
}

.logoTagline h1
{
    text-transform: uppercase;
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 100;
    margin-top:0;
}

.logoTagline p
{
    font-size: 0.8em;
    font-weight: bold;
}