/* gramofon-queries */
/* 20.04.15 */
/* V3 */

/* =============================================================================
   Reset
   ========================================================================== */
   
* { margin: 0; padding: 0; }
html, body, object, iframe, h1, h2, h3, h4, select,h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	}
ul {list-style-type: none;}

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1;}

video{width: 100%; height: 100%;}

a {color: inherit;}
/* =============================================================================
  Utility
   ========================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
::-moz-selection { background: #26d07c; color: #fff; text-shadow: none; }
::selection { background: #26d07c; color: #fff; text-shadow: none; }
b, strong { font-weight: bold; }
small { font-size: 85%; display:block;}
img { border: 0; -ms-interpolation-mode: bicubic; }
button, .button {cursor: pointer;border: none;	}
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
.alignLeft {text-align:left;}
.alignRight {text-align:right;}
.alignCenter {text-align:center;}
.displayNone {display:none;}
.block {display:block;}
.clr {clear:both; width:100%;}
.left {float:left;}
.right {float:right;}



/* =============================================================================
   Common styles
   ========================================================================== */
   
a.orderNow {transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s;}

.faqsPanel h3, .faqsPanel div, .skippr, .hero, .skippr > div {box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

/* =============================================================================
   Layout
   ========================================================================== */

body {
	background:#fff;
	font-family:Helvetica, "Myriad Pro", Arial, Tahoma, Geneva, sans-serif;
	text-align:center;
	font-size:100%;
	color:#333;
	margin:0; padding:0;
	position:relative;
}
html, body {height:100%;-webkit-font-smoothing: antialiased; margin:0;}
.wrap {width:86%; max-width:1138px; height: auto !important; margin:0 auto;}

.main {height: auto !important;}

h1 {font-size:2.5em; color:#333; letter-spacing:-1px; padding:30px 0;}
h2 {font-size:1.7em; font-weight:400; letter-spacing:-1px; padding:20px 0;}
h3 {font-size:1.4em; color:#333; font-weight:400; letter-spacing:-1px; padding:20px 0;}


/* =============================================================================
   Sprite
   ========================================================================== */

.logoGramofon, .logoSpotify, .spotifyIco, .gramofonIco, .playStoreIco, .appStoreIco, a.fb, a.tw, a.vm, a.gg {background-image:url("../images/fonSprite.png"); background-repeat:no-repeat;}


/* =============================================================================
   Header
   ========================================================================== */

.header {display:block; width:100%; background:#000000; min-height:90px; position:fixed; top:0; color:#fff; z-index:99994;}

img.logoGrSp {margin-top:17px;}

.logoGramofon {width:180px;height:45px; background-position:-5px -6px; margin-top:25px; float:left;}
.logoSpotify {width:180px;height:55px; background-position:-220px 1px; margin-top:20px;float:left;}

/*.priceContainer{display:inline-block;}
.underline{display:inline;}
.price{display:inline;}
.infoSpecial{display:block;}
*/

.header .right{display:table; padding:10px 0;}
.priceContainer{display:table-cell;}
.underline{display:inline;}
.price{display:inline;}
.infoSpecial{display:block; margin-top:-9px;font-size:0.8em;}
a.orderNow {display:inline-block; background:#000; border:1px solid #e1e1e1; padding:10px 30px; color:#fff; text-decoration:none; margin-top: -22px; margin-left: 10px; vertical-align: middle;font-weight:bold; text-transform: uppercase; width:90px;}

/*a.orderNow {display:inline-block; background:#000; border:1px solid #e1e1e1; padding:10px 30px; color:#fff; text-decoration:none; margin:27px 0 10px 0;}*/
a.orderNow span {text-decoration:line-through; padding:0 10px;}
a.orderNow strong {font-weight:400; color:#26d07c;transition:color 0.3s; -moz-transition:color 0.3s; -webkit-transition:color 0.3s; -o-transition:color 0.3s;}

a.orderNow:hover {background:#26d07c;}
a.orderNow:hover strong {color:#000;}

/* =============================================================================
   Main
   ========================================================================== */
   
.grDescription, .grWatchVideo, .grHowItWorks, .grSlogans, .grFaqs, .grGet, .grDownload {display:block; width:100%; margin:0 auto; position:relative; overflow:auto;}

/* ============================================= */
.grTestimonialTop{margin-top:90px;}
.grTestimonialTop .hero{height:90px; min-height:90px;}
.grTestimonialTop .skippr{height:90px;}

/* ============================================= */
.grDescription {background:url("../images/bgUpdateGramofon01.jpg") no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;	background-size: cover; min-height:550px; text-align:left;}
.grDescription .left {width:45%; margin:5% 0;}
.grDescription h2 {font-size:1.8em; letter-spacing:0; line-height:35px;}
.grDescription p {margin-bottom:20px; line-height:20px; color:#999999; width:90%;}

/*.grWatchVideo{top:-25px; text-align:center; clear:both;}
.watchVideo{}*/
.watchVideo.buttonTransparent{background: #26d07c;border: 1px solid #e1e1e1; color:#ffffff;}
.watchVideo.buttonTransparent:hover{background:#52c691;}
.buttonTransparent{display:inline-block; border:1px solid #000000; padding:10px 30px; color:#000000; text-decoration:none; margin:10px 0;}
.buttonTransparent:hover{background: #26d07c; border: 1px solid #e1e1e1; color:#ffffff;}

/* ============================================= */
.grStreamon{background:#f2f2f2; min-height:350px;}
.grStreamon .wrap {padding:4% 0;}
.grStreamon p{padding-top:30px;}
.grStreamon .wrap h2:first-child{padding-bottom:20px; padding-top:20px;}
.Aupeo{width:8%; max-width:75px; margin: 15px 11px;}
.Double-Twist{width:3%; max-width:38px; margin: 15px 11px;}
.Rhapsody{width:9%; max-width:130px; margin: 15px 11px;}
.Spotify{width:9%; max-width:114px; margin: 15px 11px;}
.Napster{width:9%; max-width:148px; margin: 15px 11px;}
.Tuenin{width:8%; max-width:112px; margin: 15px 11px;}
.Somafm{width:7%; max-width:78px; margin: 15px 11px;}
.Darfm{width:7%; max-width:74px; margin: 15px 11px;}
.Astroplayer{width:4%; max-width:38px; margin: 15px 11px;}
.WahWah{width:7%; max-width:62px; margin: 15px 11px;}
.Tidal{width:11%; max-width:112px; margin: 15px 11px;}
.QQmusic{width:4%; max-width:41px; margin: 15px 11px;}
.StyleJukebox{width:8%; max-width:81px; margin: 15px 11px;}
.KTmusic{width:8%; max-width:82px; margin: 15px 11px;}
.iHeartradio{width:13%; max-width:133px; margin: 15px 11px;}
.SoundCloud{width:7%; max-width:72px; margin: 15px 11px;}
.Soundmachine{width:13%; max-width:130px; margin: 10px;}


/* ============================================= */
.grMultiroom {background:url("../images/bgMultiroom.png") no-repeat bottom right; min-height:363px; text-align:left;}
.grMultiroom .left {width:30%; margin:4% 0;}
.grMultiroom p{line-height:20px; color:#999999;}
.grMultiroom img{margin-top:15px;}

/* ============================================= */
.grHarmony {background:url("../images/bgUpdateHarmony.jpg") no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  min-height:200px; color:#fff; display:block; width:100%; margin:0 auto; position:relative; overflow:auto;}  
.grHarmony .step{position: relative; min-height: 100%; margin:10% 0% 6% 0%;}
.grHarmony p {color:#fff;}
.stepTitle{position:relative}
.stepTitle h2{position: absolute; bottom: 0; width: 100%; padding-bottom:0;}
.grTestimonialMobile{display:none;}
.logoTestimonial{display:table;}
.infoTestimonial{display:table-cell; vertical-align:middle; padding:0 30px;}
.textTestimonial{margin-left:10px;}


/* ============================================= */
.serifFont {font-size:1.1em; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}
.sansSerifFont {font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; letter-spacing:-1px;}
.sansSerifFontBis {font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}

.textTestimonial::before { content: open-quote; font-size:2em; letter-spacing:-5px;}
.textTestimonial::after { content: close-quote; font-size:2em;}

.grOrderNow {width:45%; float:right; min-height:300px; margin-left:40px;}
.grPricing {width:400px; min-height:100px;}
.grPricing span {display:block; float:left; margin-right:15px;}
.lineThrough {position:relative;font-size:1.5em;vertical-align:super; background:url('../images/redLine.png') no-repeat center;}
.lineThrough img {position:absolute; top:11px; width:100%;}
.price {color:#26d07c; letter-spacing:-2px; /*line-height:20px;*/}
.buyNow a.orderNow {padding:15px 25px; font-size:1.1em;}
.grPricing small {display:block; clear:both; text-align:left; padding-left:100px; text-transform:uppercase; font-size:1em;}
.specialOffer {display:block; clear:both; text-align:left; font-size:.9em; color:#fd0006; margin:20px 0;}
ul.advantages {margin:20px 0; font-size:.9em; text-align:left; color:#666;}
ul.advantages li {list-style-image:url("../images/check.png"); line-height:20px;}

/* ============================================= */
.grHowItWorks {background:#26d07c; color:#ffffff; padding:30px 0 50px 0;}
.grHowItWorks h2{margin-bottom: 40px;}
.step {width:33%; float:left; min-height:260px;}
.step h3 {padding:20px 0 0 0; font-size:1.6em; margin:20px auto 0 auto; color:#ffffff;}
.step p {line-height:20px; padding:0 42px;}
.separator {
  background: #ffffff;
  width: 35px;
  text-align: center;
  margin: 15px auto;
  height: 1px;
}

/* ============================================= */

.grSlogans {min-height:1250px;}

.grSlogans .alignLeft, .grSlogans .alignRight {width:76%; max-width:530px; margin:40px;}

.grSlogans .alignLeft {float:right;}
.grSlogans .alignRight {float:left;}

.grSlogans p{font-size:1.1em;}
.grSlogans .alignLeft p:nth-child(2), .grSlogans .alignRight p:nth-child(2) {margin-top:20px;}

.slogRow {width:50%; min-height:300px; text-align:center;} 
.bgBlack {background:#181818; color:#fff;}
.bgWhite {background:#fff; color:#333;}

.slogan1 {background:url("../images/slogan1.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.slogan2 {background:url("../images/slogan2.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.slogan3 {background:url("../images/slogan3.png") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.slogan4 {background:url("../images/slogan4.png") no-repeat center right; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

/* ============================================= */

.grFaqs {background:#fff; min-height:200px;}

.mention {position:absolute; top:0; left:0; font-size:1.2em; font-style:italic; margin:30px auto; color:#666; text-align:right; width:100%;}
h2.faqsTitle {color:#999; cursor:pointer; padding-bottom:40px; margin-bottom:20px;}

h2.arrowDown {background:url("../images/arrowDown.png") no-repeat center bottom;}
h2.arrowUp {background:url("../images/arrowUp.png") no-repeat center bottom;}

.ui-state-default {background:#f5f6f6 url("../images/accorIcoDown.png") no-repeat right center;}
.ui-state-active {background:#f5f6f6 url("../images/accorIcoUp.png") no-repeat right center;}

.grFaqs .left, .grFaqs .right {width:45%; margin:0 2%;}

.faqsPanel {height:auto; margin-bottom:20px;display:none;}
.faqsPanel h3 {font-size:1em; letter-spacing:0; text-align:left; padding:10px 35px 10px 20px; border-left:4px solid #2e2d2d; border-top:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:20px; cursor:pointer; outline: none;} 
.faqsPanel .faq {padding:10px 20px; background:#fff; font-size:.9em; border-left:4px solid #2e2d2d; border-top:0; border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left;}
.grFaqs p.moreInfo {text-align:left; padding-top:40px; display:block; clear:both;}

/* ============================================= */

.grGet {background:url("../images/bgGramofon02.png") no-repeat center center; -webkit-background-size: cover; 	-moz-background-size: cover; -o-background-size: cover;	background-size: cover; min-height:530px;}
.grGet h2 {font-size:2.5em;}
.grGet p {position:absolute; bottom:15px; color:#666;}
.grGet p a, .grFaqs p a {color:#26d07c; text-decoration:none;}
.grGet p a:hover, .grFaqs p a:hover {color:#333;}
.getNow{float:left; padding:10px 30px !important; font-weight: bold; text-transform: uppercase; width:90px;}

/* ============================================= */
.grDownload {background:#fff; min-height:80px;}
.grDownload .left div, .grDownload .right div {display:inline;}
.grDownload .left {margin-top:8px;}
.grDownload .right {margin-top:20px;}
.grDownload .right div {margin-right:10px;}
.grDownload a {text-decoration:none;}
.grDownload img{margin-top:5px;}

/* =============================================================================
   Footer
   ========================================================================== */

.footer {display:block; width:100%; background:#d4d3d3; color:#999; margin:0px; height:auto; padding-bottom:20px; overflow:auto;}

.footer small {padding-top:20px; text-align:left; display:block;}

ul.footerLinks {margin:5px 0;}
ul.footerLinks li {display:inline-block; margin-right:20px;}
ul.footerLinks li a {color:#999; text-decoration:none;}
ul.footerLinks li a:hover {color:#333;}

a.stayTuned {display:block; float:left; background:#666 url("../images/emailIco.png") no-repeat right; color:#fff; text-decoration:none; font-size:.8em; padding:7px 35px 7px 7px; margin-top:2px;}
a:hover.stayTuned {background:#333 url("../images/emailIco.png") no-repeat right;}


.socialLinks {float:left; margin-left:40px;}
a.fb, a.tw, a.vm, a.gg {display:inline-block; width:31px; height:31px; margin:0 5px;}
a.fb {background-position: -123px -131px;}
a.tw {background-position: -48px -131px;}
a.vm {background-position: -11px -131px;}
a.gg {background-position: -86px -131px;}
a:hover.fb {background-position: -123px -161px;}
a:hover.tw {background-position: -48px -161px;}
a:hover.vm {background-position: -11px -161px;}
a:hover.gg {background-position: -86px -161px;}

.copy {display:block; float:right; font-size:.9em; margin-left:30px; line-height:30px;}

/* =============================================================================
   Modal
   ========================================================================== */
   
.overlay{display: none; position:fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index:99996; 	opacity:.75; -moz-opacity: 0.75; filter: alpha(opacity=75);}
 
.modal {display: none; text-align:center; background:transparent; position: fixed; top: 5%; left: 3%; width: 90%; z-index:99997; padding-top:40px;}
.closeIco {position:absolute; top:0px; right:10px; background:url("../images/closeIco.png") no-repeat center center; height:40px; width:40px; cursor:pointer;}

iframe#fon_video {width:100%; height:562px;}
iframe#madMini {width:300px; height:300px; margin-top:50px;}

/* =============================================================================
   Slider
   ========================================================================== */

.hero {width: 100%; height: 140px; min-height: 140px; position: relative;}
.skippr {width:100%; height: 140px; position: absolute; overflow:hidden; }
.skippr > div {position: absolute; width:100%; height: 100%;}
.skippr-nav-container {position: absolute; right:0; bottom:25px;	overflow: auto; z-index:999;}
#testimonial .skippr-nav-container{display:none;}
#testimonialTop .skippr-nav-container{display:none;}
.skippr-nav-arrow{  position: relative; height: 100%; background: #ffffff; width: 40px;}
.skippr-nav-element {cursor:pointer; float:left; background-color:#ddd;	-webkit-transition: all .25s linear; transition: all .25s linear;}
.skippr-nav-element-bubble {width:12px;	height:12px; border-radius: 50%; margin:0 4px;}
.skippr-nav-element-block {width:60px; height:10px;}
.skippr-nav-element:hover, .skippr-nav-element-active {	background-color:#26d07c;}
.skippr-arrow {
	position: absolute;
	z-index:999;
	top:50%;
	-webkit-transform:translate(0%,-50%);
	-moz-transform:translate(0%,-50%);
	-ms-transform:translate(0%,-50%);
	transform:translate(0%,-50%);
	width:30px;
	height:30px;
	/*background-color: white;*/
	transform-origin:center center;
	-webkit-transform-origin:top left;
	cursor: pointer;
}

.skippr-previous {
	left:2.5%;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	border-top:2px solid #cccccc;
	border-left:2px solid #cccccc;
	margin-left:7px\0; /* IE */
}

.skippr-next {
	right:3.5%;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	border-bottom:2px solid #cccccc;
	border-right:2px solid #cccccc;
	margin-right:13px;
}

@-moz-document url-prefix(){
	.skippr-previous{
		margin-left:7px;
	}
}

/* =============================================================================
                                                          David G. Nogueira 2014
   ========================================================================== */