@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; }

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1024px) {

/*    .container { width: 90%; }
    .header .nav { margin-top: -1px; }
    .banner .bongo,
    .banner .bongo-drumming { right: 0px;  }
    .credentials .heading { width: 80%; }
    .credentials .logos > div img { width: 210px; }
    .content .side, .standard .side { width: 50%; }
    .content .main, .standard .main { width: 45%; }
    .content .side .circle { width: 300px; height: 350px; padding: 121px 100px 0 80px; font-size: 53px; background-size: 410px; }
*/
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 1023px) {

     html { -webkit-text-size-adjust: none; }
    .mobile-only { display: block; }
    .desktop-only,
    .mobile-nav { display: none; }

    .container { width: 90%; }
    .header .nav { margin-top: -1px; }
    .banner .bongo,
    .banner .bongo-drumming { right: 0px;  }
    .credentials .heading { width: 80%; }
    .banner .container { height: 350px; }
    .banner .words .bongosays { font-size: 42px; }
    .banner .bongo, .banner .bongo-drumming { right: -30px; width: 400px; }
    .content .side .circle { width: 240px; height: 290px; padding: 112px 90px 0 80px; font-size: 43px; background-size: 350px; margin-left: -30px; }
    .standard .side h2 { font-size: 100px; }
    .credentials h2 { font-size: 100px; }
    .credentials .logos > div img { width: 160px; }
    .padded { padding: 80px 0; }
    .credentials.padded { padding: 80px 0; }

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

    .container { width: 90%; }

    .header .nav { display: none; }
    .menu { position: fixed; right: 3%; top: 37px; z-index: 99999; background: url(../images/menu.png) center center no-repeat; background-size: 50px; width: 50px; height: 50px; display: block; }
    .menu-close { position: fixed; right: 3%; top: 37px; z-index: 999999; background: url(../images/menu-close.png) center center no-repeat; background-size: 50px; width: 50px; height: 50px; display: none; }
    .menu.stuck { top: 5px; background-size: 40px; }
    .menu-close.stuck { top: 5px; background-size: 40px; }
    .mobile-nav { background: rgba(255,214,0,0.95); width: 100%; height: 100%; display: none; position: fixed; float: none; z-index: 99999; text-align: center; }
    .mobile-nav ul { padding-top: 60px; margin: 0 15%; }
    .mobile-nav a { padding: 15px 0; text-decoration: none; display: block; color: #521d75; font: normal 26px/26px 'Lemon', 'Open Sans', sans-serif; letter-spacing: -0.05em; border-top: 2px solid #521d75; }
    .mobile-nav li:first-child a { border: 0; }
    .banner { padding-top: 80px; }

    .banner .container { height: 300px; }
    .banner .words .bongosays { font-size: 32px; margin: 80px 0 0 80px; }
    .banner .bongo, .banner .bongo-drumming { width: 280px; right: 0; bottom: -50px; }

    .content.padded { padding: 70px 0; }
    .padded { padding: 70px 0; }
    .credentials.padded { padding: 70px 0; }
    .content .side, .standard .side,
    .content .main, .standard .main,
    .footer .logo,
    .footer .nav,
    .footer .copyright { float: none; width: auto; }
    .content .side .circle { width: 170px; height: 208px; padding: 72px 60px 0 50px; font-size: 34px; background-size: 280px; margin-left: 0; margin-bottom: 35px; }
    .standard .side h2 { font-size: 80px; margin-bottom: 35px; text-align: center; padding-right: 0; }
    .standard .main { text-align: center; }
    .credentials .heading { width: 100%; text-align: center; }
    .credentials h2 { font-size: 80px; }
    .credentials h3 { font-size: 28px; }
    .credentials .logos > div img { width: 130px; }
    .standard.contact .respect { top: 30px;  }
    .footer,
    .footer .copyright { text-align: center; }
    .footer .logo,
    .footer .nav { margin: 0 0 35px 0; }
    .credentials .logos { text-align: center; }
    .credentials .logos > div { float: none; display: inline-block; }

    .rotate { margin-right: 10px;}

    .fruit.padded { padding-top: 50px; padding-bottom: 50px; }
    .fruit h2 { font-size: 80px; }
    .fruit h3 { font-size: 28px; width: 100%; }
    .fruit .project { width: 100%; margin-top: 30px; text-align: center; }
    .fruit .side { float: none; width: 100%; }
    .fruit .main { float: none; width: 100%; }
    .fruit .side,
    .fruit .main .item { margin: 0; }
    .fruit .main .item { float: none; }
    .fruit .side .about { padding-bottom: 30px; margin-bottom: 30px; background: url(../images/fruit/dots.png) center bottom no-repeat; }
    .fruit .side .testimonial:before { display: none; }
    .fruit .side .testimonial blockquote { font-size: 24px; }
    .fruit .side .testimonial p { text-align: center; margin-bottom: 30px; }
    .fruit .side .logo img, .fruit .main img { margin: auto; }

    .fruit .main.fullwidth .item { width: 100%; margin: 0 0 50px; }
    .fruit .main.fullwidth .item .info { min-height: 1px; }

    .announcement .logo { float: none; max-width: 320px; margin: 0 0 25px 0; }

}

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

    .banner .bongo, .banner .bongo-drumming { width: 280px; bottom: -35px; }
    .flexslider .slides > li > img { width: 140%; }

}


@media only screen and (max-height: 320px) {

    .mobile-nav a { padding: 10px 0; font-size: 24px; line-height: 24px; }
    .mobile-nav ul { padding-top: 30px; }

}