@import url(fonts.css);

body { font: 400 15px/1.4 'Open Sans', sans-serif; color: #521d75; }
.container { width: 1000px; margin: auto; position: relative; }
.button { display: inline-block; text-decoration: none; border: 2px solid #fff; color: #fff; cursor: pointer; background: url(../images/arrow-button.png) right center no-repeat; padding: 3px 50px 3px 20px; }
.button:hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); }
.button.noborder { border: 0; }
.button.purple { color: #521D75; border-color: #521D75; background-image: url(../images/arrow-button-purple.png); }
.header-transition,
.transition { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.mobile-only { display: none; }
.fancybox-skin a.fancybox-close { background: url(../images/fancybox-close.png) 0 0 no-repeat; width: 30px; height: 30px; top: 0; right: -36px; }

/* All elements using Lemon font */
.header .nav li a,
.banner .words .word,
.banner .bongosays,
.content .main h1,
.content .side .circle,
.standard .side h2,
.standard .main,
.credentials h2,
.footer .nav h2,
.footer .copyright h2,
.credentials h3,
.fruit h2,
.fruit h3,
.fruit .main.fullwidth .item h4,
.fruit .side .testimonial:before,
.fruit .side .testimonial blockquote,
.radiopopup h2,
.radiopopup h3,
.button { font-family: 'Lemon', 'Open Sans', sans-serif; letter-spacing: -0.05em; font-weight: normal; }


/* header */
.banner-container { background-color: #ffd600; }
.header { text-align: center; position: fixed; width: 100%; z-index: 1; }
.header .logo { padding: 35px 0; background-color: #ffd600;  }
.header .logo img { width: 168px; }
.header .nav { background-color: #ffd600; padding-bottom: 15px; }
.header .nav li { display: inline-block; }
.header .nav li a { color: #521d75; font-size: 26px; display: block; padding: 0 15px; text-decoration: none; }
.header .nav li a:hover { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); }
.header .shadow { width: 100%; height: 14px; background: url(../images/shadow.png) center top no-repeat; }


/* sticky header resized */
.header.stuck .logo { padding: 15px 0 10px; }
.header.stuck .logo img { width: 100px; }
.header.stuck .nav li a { font-size: 20px; }


/* banner */
.banner { padding-top: 160px; }
.banner .bongo { cursor: pointer; }
.banner .bongo,
.banner .bongo-drumming { position: absolute; bottom: -66px; right: 80px; }
.banner .bongo-drumming { display: none; }
.banner .words .bongosays { color: #fff; font-size: 52px; margin: 40px 0 0 210px;  }


/* global element margins and padded sections */
.text h1, .text h2, .text h3, .text h4, .text ul, .text ol, .text p { margin-bottom: 20px; font-weight: normal; }
.padded { padding: 180px 0; }
.rotate { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); }


/* content */
.content .side, .standard .side { float: left; width: 50%; }
.content .main, .standard .main { float: right; width: 42%; }
.content.padded { padding: 100px 0; }
.content .main h1 { font-size: 36px; line-height: 1.2; }
.content .main li { background: url(../images/bongo-bullet.png) left 10px no-repeat; padding: 5px 0 0 50px; margin-bottom: 20px; }
.content .side .circle { width: 360px; height: 410px; padding: 80px 100px 0 80px; background: url(../images/circle-yellow.png) center center no-repeat; font-size: 72px; line-height: 1.1; color: #fff; text-align: right;  }

/* announcement */
.announcement { border: 3px solid #FFD600; border-radius: 10px; -webkit-border-radius: 10px; padding: 20px 30px 10px; margin-top: 60px; }
.announcement .logo { float: right; width: 200px; margin: 0 0 15px 15px; }
.announcement h2 { font-family: 'Lemon', 'Open Sans', sans-serif; letter-spacing: -0.05em; font-weight: normal; font-size: 56px; line-height: 1.2; }
.announcement img { max-width: 100%; }
.announcement .readmore { text-align: center; }
.announcement .button { font-size: 36px; margin-bottom: 30px; }

/* standard content strips */
.standard.name { background-color: #521d75; }
.standard.team { background-color: #ffd600; }
.standard .side h2 { font-size: 130px; line-height: 0.9; text-align: right; }
.standard.name .side h2 { color: #ffd600; }
.standard.team .side h2 { color: #521d75; }
.standard.contact .side h2 { color: #ffd600; }
.standard.name .main { color: #fff; }
.standard.team .main { color: #fff; }
.standard.contact .main { color: #521d75; }
.standard .side h2 { padding-right: 50px; }
.standard .main { font-size: 36px; line-height: 1.2; }
.standard.contact .main a { color: #521d75; text-decoration: none; display: inline-block; }
.standard.contact .main a:hover { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); }
.standard.contact .respect { text-align: center; font-size: 11px; position: relative; top: 100px; }


/* credentials */
.credentials.padded { padding: 100px 0 0; }
.credentials .heading { width: 70%; text-align: right; margin-bottom: 40px; }
.credentials h2 { font-size: 130px; line-height: 1; color: #ffd600; }
.credentials h3 { font-size: 36px; color: #521d75; }
.credentials .logos > div { float:left; line-height: 0; margin: 5px; }


/* fruit */
.fruit.padded { padding-top: 100px; padding-bottom: 100px; }
.fruit h2 { font-size: 130px; line-height: 1; color: #ffd600; text-align: center; margin-bottom: 30px; }
.fruit h3 { font-size: 36px; line-height: 1.2; text-align: center; margin: 0 auto 25px; width: 75%; }
.fruit h3.more { font-size: 72px; margin-bottom: 65px; }
.fruit .project { margin-top: 140px; }
.fruit .project.first { margin-top: 120px; }
.fruit .side { float: left; width: 304px; }
.fruit .main { float: left; width: 666px; }
.fruit .side .logo { margin: 45px 0 40px 0; }
.fruit .side .logo img { width: 300px; }
.fruit .main img { width: 300px; border: 2px solid #FFD600; border-radius: 150px; display: block; }
.fruit .side,
.fruit .main .item { margin: 0 14px; }
.fruit .main .item { float: left; }
.fruit .main .item a:hover img { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); }
.fruit .main .item h4 { padding: 15px 0 0; font-size: 12px; text-align: center; min-height: 60px; font-weight: 400; text-transform: uppercase;  }
.fruit .main .item p { text-align: center; }
.fruit .side .about { padding-bottom: 50px; margin-bottom: 50px; background: url(../images/fruit/dots.png) center bottom no-repeat; }
.fruit .side .about.no-testimonial { padding: 0; margin: 0; background: none; }
.fruit .side .testimonial { position: relative; }
.fruit .side .testimonial:before { content: '"'; color: #FFD600; font-size: 110px; position: absolute; top: -10px; left: -40px; line-height: 1; }
.fruit .side .testimonial blockquote { font-size: 28px; line-height: 1.2; margin-bottom: 20px; }
.fruit .side .testimonial p { text-align: right; font-size: 12px; }

.fruit .main.fullwidth { float: none; width: 100%; }
.fruit .main.fullwidth .item { width: 27.3333%; margin: 0 3%; }
.fruit .main.fullwidth .item img { max-width: 100%; }
.fruit .main.fullwidth .item h4 { font-size: 36px; line-height: 1; text-align: center; margin: 10px auto 0; }
.fruit .main.fullwidth .item .info { min-height: 210px; }



/* footer */
.footer { background-color: #521d75; padding: 60px 0; }
.footer .logo { float: left; margin-right: 50px; }
.footer .logo img { width: 120px; }
.footer .nav { float: left; }
.footer .nav h2 { font-size: 30px; margin-bottom: 5px; color: #ffd600; }
.footer .nav a { color: #fff; opacity: 0.7; text-transform: uppercase; font-size: 13px; text-decoration: none;  }
.footer .nav a:hover { opacity: 1; }
.footer .copyright { float: right; text-align: right; color: #ffd600; font-size: 13px; }
.footer .copyright h2 { font-size: 30px; margin-bottom: 5px; color: #fff; }


/* radio popup */
.radiopopup { padding: 15px; }
.radiopopup h2 { font-size: 36px; line-height: 36px; margin-bottom: 0; color: #521D75; }
.radiopopup h3 { font-size: 24px; line-height: 26px; margin-bottom: 4px; color: #521D75; }
.radiopopup .content { padding-top: 50px; }
.radiopopup audio { margin-bottom: 25px; }