/* Structure */
body { background: #FFF; color: #6e6e6e; }
.mobileonly { display: block; }


/* Auxillary Navigation */
.masthead .auxnav { background: #273033; padding: 7px 0; z-index: 3; position: relative; }
.masthead .auxnav a.language { float: right; color: #9e9e9e; text-transform: uppercase; font-size: 13px; font-size: .813rem; text-decoration: none; }
.masthead .auxnav a.language:after { content: ""; border: 4px solid transparent; border-top-color: #686f71; display: inline-block; vertical-align: middle; margin-left: 10px; }
.masthead .auxnav a.language span { color: #1ea7be; }
.masthead .auxnav ul { display: none; position: absolute; right: 0; top: 125%; border-radius: 3px; background: #FFF; border: 1px solid #CFCFCF; padding: 5px 15px; width: 125px; }
.masthead .auxnav ul li { margin: 0; float: none; font-size: 14px; font-size: .875rem; }
.masthead .auxnav ul li a { display: block; line-height: normal; padding: 10px 0; border-bottom: 1px solid #EEE; text-decoration: none; color: #7e7e7e; }
.masthead .auxnav ul li:last-child a { border-bottom: 0; }

/* Main Navigation */
a.logo { position: absolute; left: 0; top: 0; }
.menu { background: #FFF; padding: 22px 0; box-shadow: 0 0 5px rgba(0,0,0,.1); z-index: 2; position: relative; }
.menu ul { float: right; }
.menu ul li { display: none; float: left; font-size: 18px; font-size: 1.125rem; }
.menu ul li.mobileonly { display: block; }
.menu ul li a { display: block; color: #9e9e9e; text-decoration: none; line-height: 40px; }
.menu ul li a.button { line-height: 24px; }
.menu ul li a:hover, .menu ul li a:active { color: #1ea7be; }


/* Hero Ad */
.hero { background: #f8f8f8; }
.hero .container { width: 100%; }
.hero img { margin: 0 auto; }
.hero .hero-text { display: right; padding: 25px; }
.hero-text a { display: inline-block; width: 48%; }

/* Hero2 Ad */
.hero2 { background: #f8f8f8; }
.hero2 .container { width: 100%; }
.hero2 img { margin-right: -60px; width: 45%; }
.hero2 .hero2-text { padding: 25px; width: 50%; }
.hero2-text a { /*display: inline-block; width: 48%;*/ }
.hero2-text h1 { margin-left: 100px; }
.hero2-text p { margin-left: 100px; }


/* Sections */ 
.spacer { padding: 50px 0; }
.mini-spacer { border-bottom: 1px solid #EEE; }
.mini-spacer .container { padding: 25px 0; }
section header h2 { margin: 0; }
section header p { margin-bottom: 30px; }
section header a.button.absolute { right: 0; top: 12px; }


/* Page Title */
.page-title { background: #333; padding: 70px 0 40px; }
.page-title h1 { text-transform: uppercase; color: #FFF; margin: 0; }
.page-title h1 sup { vertical-align: super; border-radius: 3px; font-size: 14px; background: #1ea7be; padding: 2px 7px; }
.page-title p { color: #b3e1e9; margin: 0; }
.page-title blockquote { color: #b0b0b0; font-size: 18px; margin: 2em 0; }
.page-title .author { display: block; color: #FFF; font-weight: bold; font-size: 16px; }
.page-title input.service-search { border-radius: 50em; margin-top: 2em; padding: 10px 15px 10px 35px; background: #FFF url("../images/icon-search.jpg") 12px center no-repeat; border: 0; outline: none; font-size: 16px; width: 100%; }


/* News Feed */
.recent-news { box-shadow: 0 0 5px rgba(0,0,0,.1); }
.owl-item > div h3 a, .recent-news .fourcol h3 a { text-decoration: none; font-weight: 600; }
.owl-pagination { text-align: center; margin-top: 50px; }
.owl-page { display: inline-block; margin: 0 3px; border-radius: 50%; width: 12px; height: 12px; border: 2px solid #CCC; border: 2px solid rgba(0,0,0,.3); }
.owl-page.active { border: 0; background: #21272a; }


/* Blog Feed */
.from-our-blog { background: #1d9fb5; }
.from-our-blog h2, .from-our-blog h3 a { color: #FFF; }
.from-our-blog p { color: #c4eff6; }
.from-our-blog a.button { display: block; max-width: 225px; margin: 0 0 30px; }
.from-our-blog h3 a { text-decoration: none; }
.from-our-blog h3 a:hover { text-decoration: underline; }
.from-our-blog article { margin-bottom: 30px; }
.from-our-blog img { max-width: 50px; }


/* Call 2 Action */
.call-to-action { background: #273033; padding: 25px 0; }
.call-to-action h3 { color: #FFF; margin: 0 0 15px; text-align: center; }
.call-to-action form { max-width: 350px; margin: 0 auto; }
.call-to-action form input[type="email"] { width: 100%; max-width: 100%; border: 0; padding-right: 100px; }
.call-to-action form input[type="submit"] { font-size: 13px; font-size: .813rem; position: absolute; outline: none; right: 7px; top: 7px; line-height: normal; padding: 7px 10px; }


/* Subpage Tabs */
.tabs { background: #273033; padding: 10px 0; }
.tabs ul li { font-weight: 600; font-size: 14px; font-size: .875rem; }
.tabs ul li a { display: block; color: #a6a6a6; border-radius: 3px; text-decoration: none; padding: 10px 15px; }
.tabs ul li.active a { background: #FFF; color: #273033; }


/* Product Page */
.product { border-bottom: 1px solid #EEE; text-align: center; }
.product img { display: block; margin: 0 auto 30px; max-width: 50%; }
.cross-platform img { max-width: 75%; }
.product.open-source, .product.docs { background: #F9F9F9; }
.product h2.hasTagline { margin: .5rem 0 0; line-height: 30px; }
.product p.tagline { color: #1ea7be; text-transform: uppercase; font-size: 13px; font-size: .813rem; }
.product p:last-of-type { margin-bottom: 0; }
.product .buttons { margin-top: 35px; }
.product .buttons > a.button { display: inline-block; margin-right: 10px; }
.product .buttons > a.button:last-child { margin: 0; }


/* Learn Page */
#features { border-bottom: 1px solid #EEE; }
#features img { display: block; margin: 0 auto 20px; }
#features h3 a { text-decoration: none; font-weight: 600; }
#tutorials, #screenshots { background: #f9f9f9; border-bottom: 1px solid #EEE; }
#tutorials li { float: left; width: 25%; padding-right: 10px; }
#tutorials li a { display: block; }
#tutorials li img { display: block; margin: 0 auto; }
.mini-spacer .fourcol { margin-top: 25px; }
.mini-spacer .fourcol a { float: left; margin-right: 10px; }


/* Services Page */
span.downloads { color: #932830; text-transform: uppercase; font-size: 10px; margin-left: 0px; font-weight:bold;
vertical-align: 5px;}
#no-service { background: #F9F9F9; }


/* API Details */
#api-details h2 { margin: 0; }
#api-details a.button { display: inline-block; margin-top: 10px; }
#api-details .alignRight { text-align: left; }
#api-details p.api-links { font-size: 14px; }
#api-details span.divider { margin: 0 15px; color: #eee; font-size: 12px; }
p.small-details { font-size: 13px; color: #787878; margin: 0 0 1.5em; }
p.small-details span { margin: 0 10px; color: #d0d0d0; }
.screenshots .owl-item > div { padding-right: 10px; }
#system-requirements { padding: 30px 0 0; }
#system-requirements h3 { font-size: 1em; }
#system-requirements ul { margin-top: 1em; }
#system-requirements ul li { float: left; width: 25%; color: #787878; text-align: center; }
#system-requirements ul li img { display: block; margin: 0 auto 15px; max-height: 75px; }
ul.version-table ul { list-style: none; margin: 0; padding: 0; }
ul.version-table > li { border-bottom: 1px solid #EEE; }
ul.version-table > li:nth-child(even) { background: #F9F9F9; }
ul.version-table li li { margin-top:0 !important; padding: 15px 10px; }
ul.version-table li li img {  display: inline-block; vertical-align: middle; margin-right: 5px; }
ul.app-list li { float: left; width: 18%; margin: 0 1%; }
ul.app-list li img { border-radius: 10px; }


/* Footer */
.footer { padding: 25px 0; }
.footer ul { margin: 0 0 30px; text-align: left; }
.footer ul li { font-size: 14px; font-size: .875rem; line-height: 24px; }
.footer ul li.title { font-weight: bold; text-transform: uppercase; color: #273033; }
.footer ul li a { color: #6e6e6e; border-bottom: 1px solid #EEE; display: block; padding: 10px 0; text-decoration: none; }
.footer ul li a:hover, .footer ul li a:active { color: #1ea7be; text-decoration: underline; }
.footer ul li.socials a { text-align: left; border: 0; padding: 0; margin-top: 10px; display: inline-block; text-indent: -9999em; width: 36px; height: 36px; background: url("../images/icon-socials.jpg") 0 0 no-repeat; opacity: .5; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; }
.footer ul li.socials a:hover { opacity: 1; }
.footer ul li.socials a.facebook { background-position: 0 0; }
.footer ul li.socials a.twitter { background-position: -40px 0; }
.footer ul li.socials a.weibo { background-position: -81px 0; }


/* Typography */
body, p, h1, h2, h3, h4, h5, input, select, textarea, button { font-family: "proxima-nova", "Open Sans", Arial, sans-serif; font-weight: normal; line-height: 28px; }

h1, h2, h3, h4, h5 { margin: 10px 0; margin: .5rem 0; font-weight: normal; line-height: normal; }
h1 { color: #21272a; font-size: 28px; font-weight: bold; text-transform: uppercase; }
h2 { color: #212729; font-size: 24px; }
h3 { color: #454545; font-size: 18px; }
h4 { color: #216470; font-size: 16px; }

p { font-size: 16px; font-size: 1rem; margin-bottom: 15px; }
li, table { font-size: 16px; font-size: 1rem; }

a, a:visited, a:link, a:active { text-decoration: underline; color: #1ea7be; }
a:hover { color: #343434; text-decoration: none; }


@media all and (min-width: 768px) {
/* Structure */
.mobileonly { display: none; }

/* Main Navigation */
.menu ul li { display: block; margin-left: 40px; position: relative; }
.menu ul li:first-child { margin-left: 0; }
.menu ul li a:after { content: ""; border: 4px solid transparent; border-top-color: #b2b2b2; display: inline-block; margin-left: 10px; margin-top: 4px; }
.menu ul li a:only-child:after { display: none; }
.menu ul li a sup { color: #565656; font-size: 9px; border-radius: 3px; border: 2px solid #565656; margin-left: 3px; padding: 0 3px 1px; font-weight: bold; transform: rotate(15deg); -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); top: -1.5em; display: inline-block; line-height: normal; }
.menu ul ul { display: none; position: absolute; left: 0; top: 125%; border-radius: 3px; background: #FFF; border: 1px solid #CFCFCF; padding: 5px 15px; width: 225px; }
.menu ul li li { margin: 0; float: none; font-size: 14px; font-size: .875rem; }
.menu ul li li a { line-height: normal; padding: 10px 0; border-bottom: 1px solid #EEE; }
.menu ul li li:last-child a { border-bottom: 0; }

/* Hero Ad */
/*.hero { padding: 15% 0; background: #F8F8F8 url("../images/bg-portrait.jpg") left center no-repeat; background-size: auto 100%; }*/
/*.hero { padding: 15% 0; background: #F8F8F8 url("../images/bg-portrait-pc_creator.jpg") left center no-repeat; background-size: auto 100%; }*/
.hero { padding: 15% 0; background: #F8F8F8 url("../images/CocosCreator_v180_921_830.jpg") left center no-repeat; background-size: auto 100%; }
.hero-text { float: right; width: 49%; }
.hero-text p { font-size: 21px; font-size: 1.313rem; color: #878787; line-height: 32px; font-weight: 300; }
.hero-text a { margin-top: 25px; margin-right: 10px;  width: auto;}
/* Landscape */
.hero.landscape { padding: 4% 0 30%; }
.hero.landscape .hero-text { float: none; text-align: center; width: 75%; margin: 0 auto; }

/* Hero2 Ad */
.hero2 { padding: 15% 0; background: #F8F8F8 url("../images/CocosCreatorV2-0_921_830.jpg") left center no-repeat; background-size: auto 100%; }
.hero2-text { float: right; width: 49%; }
.hero2-text p { font-size: 21px; font-size: 1.313rem; color: #878787; line-height: 32px; font-weight: 300; }
.hero2-text a { margin-top: 25px; margin-right: 10px;  width: auto;}
/* Landscape */
.hero2.landscape { padding: 4% 0 30%; }
.hero2.landscape .hero2-text { float: none; text-align: center; width: 75%; margin: 0 auto; }


/* Sections */
.spacer { padding: 100px 0; }
.mini-spacer .container { padding: 40px 0 0 0; }
section header p { margin-bottom: 65px; }

/* News Feed */
.owl-item > div { padding:  0 40px 0 0; }
.owl-item > div img { margin-bottom: 20px; }

/* Blog Feed */
.from-our-blog { background: url("../images/bg-blogfeed.jpg") center no-repeat; background-size: cover; }
.from-our-blog a.button { position: absolute; right: 0; top: 15px; }
.from-our-blog img { float: left; max-width: 20%; margin-right: 5%; }
.from-our-blog .blog-post { float: left; max-width: 75%; }
.from-our-blog .blog-post h3 { margin: 0 0 .5rem; }
.from-our-blog .blog-post p { line-height: 24px; }

/* Call 2 Action */
.call-to-action h3 { max-width: 60%; text-align: left; margin: 0; }
.call-to-action form { float: right; }

/* Footer */
.footer { padding: 50px 0; }
.footer ul { float: left; width: 15%; }
.footer ul.featured-games, .footer ul.connect { width: 20%; }
.footer ul.latest-discussion { width: 30%; }
.footer ul li a { border: 0; padding: 0; }
.footer ul.connect { text-align: right; }

/* Subpage Titles */
.page-title { padding: 75px 0; }
.page-title.notabs { margin-bottom: 70px; }
.page-title blockquote { max-width: 85%; margin: 2em auto; }
.page-title blockquote strong {  text-transform: uppercase; color: #fff; font-size:1.1em;}
.page-title input.service-search { max-width: 550px; margin-top: 2em; }
#products { background: #1ea7be url("../images/title-products.jpg") right center no-repeat; background-size: auto 100%; }
#learn { background: #1ea7be url("../images/title-learn.jpg") right center no-repeat; background-size: auto 100%; }
#plugin { background: #1ea7be url("../images/title-plugin.jpg") right center no-repeat; background-size: auto 100%; }
#service { background: #273033 url("../images/title-service.jpg") right center no-repeat; background-size: auto 100%; }

/* Subpage Tabs */
.tabs.sticky { position: fixed; width: 100%; top: 0; z-index: 3; }
.tabs ul li { float: left; width: 20%; font-size: 16px; font-size: 1rem; text-align: center; }
.tabs ul li a { padding: 10px 0; }
.tabs ul li a:hover { background: rgba(0,0,0,.25); }
.tabs ul li.active a:hover { background: #FFF; }

/* Product page */
.product { text-align: left; }
.product .container > img { max-width: 35%; top: 0; margin: 0; }
.product img.left { float: left; }
.product img.right { float: right; }
.cross-platform .container > img { margin: 20px 0; }
.open-source .text { margin-top: 25px; }
.speed .text { margin-top: 60px; }
.docs .text { margin-top: 60px; }
.product .text { max-width: 62%; margin-right: 3%; }
.cross-platform .text, .cross-platform .container > img { max-width: 50%; }
.product .open-source .text, .product.docs .text { float: right; margin-right: 0; margin-left: 3%; }
.product .twocol img { max-width: 155px; margin: 0; }
.product .tencol { padding-left: 3%; }


/* Learn Page */
#features img { margin: 0 0 20px; height: 200px}
#tutorials li { float: left; width: auto; margin: 0 1% 0 0; }
#tutorials li a { opacity: .7; transition: .25s; -moz-transition: .25s; -webkit-transition: .25s; -ms-transition: .25s; -o-transition: .25s; }
#tutorials li a:hover { opacity: 1; }
.mini-spacer .fourcol { margin-top: 30px; }
.mini-spacer .fourcol a { float: none; display: inline-block; }

/* Services Page */
#api-details .alignRight { text-align: right; }
ul.api-links li { 
float: left; 
margin-right: 50px; 
margin-bottom: 15px; 
padding: 10px 0 0px 20px; 
width: 42%;
}
.mini-spacer .onecol img { max-width: 90%; margin-top: 20px; }
#no-service h2 { padding: 0 10%; margin: 0 0 2em; }

/* API Details */
#system-requirements h3 { margin: 0; }
#system-requirements ul li { width: auto; margin-right: 35px; font-size: 13px; font-size: .813rem; }
#system-requirements ul li img { max-height: 50px; }
ul.app-list { float: right; width: 49%; }
ul.app-list li { width: 15%; margin: 0 0 0 1.5%; }

/* Typography */
h1 { font-size: 48px; }
h2 { font-size: 32px; }
p, li, table { font-size: 18px; font-size: 1.125rem; line-height: 30px; }
}

@media all and (min-width: 1199px) {
.hero { padding: 150px 0; background-size: 60% auto; }
}

ul.api-links li img { float: left; width:75px ! important; margin-right: 10px ! important}
ul.api-links li a { font-weight: 500; text-decoration: none; font-family: Arial;}
ul.api-links li p.tagline { font-size: 13px; color: #787878; margin: 0 0 1em 85px; line-height: 18px; }
ul.api-links li { height: 140px;}