/* BRIEF DESCRIPTION OF STYLESHEET'S PURPOSE.

   developer:   EstevaoT
   requires:    /common/framework/css/framework.css
   ========================================================================== */

main {
	font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', Arial, sans-serif;
           line-break: strict;
}
.wrapper {
	max-width: 1200px;
	padding: 3.125rem 3.125rem 2.5rem 3.125rem;
	margin: 0 auto;
}
/* Page description (What's new in Mathematica X)
   ========================================================================== */

.page-description .wrapper {
	padding-bottom: 0;
}
.page-description .wrapper>div {
	display: grid;
	grid-template-columns: 1fr 320px;
	grid-template-rows: repeat(4, auto);
	grid-column-gap: 100px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 2.5rem;
}
.page-description h1 {
	color: #d51100;
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 2.9375rem;
	margin: 0;
	margin-bottom: 1.25rem;
}
.page-description .subtitle {
	grid-column: 1;
	grid-row: 2;
}
.page-description .subtitle p {
	color: #ef4900;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5;
	padding-bottom: 0;
	margin-bottom: .625rem;
}
.page-description ul {
	grid-column: 2;
	grid-row: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	grid-row-gap: 10px;
}
.page-description .wrapper>ul>li:first-of-type {
	align-self: flex-start;
	padding-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
.page-description ul li {
	flex-basis: 100%;
	position: relative;
}
.page-description ul li>a, .page-description ul li>div {
	display: flex;
	flex-basis: 100%;
	align-items: center;
}
.page-description ul li>a img, .page-description ul li>div img {
	margin-right: 10px;
}
.page-description ul li, .page-description ul li a {
	color: #222;
	font-size: 0.872rem;
}
.page-description  ul > li:first-of-type {
    align-self: flex-start;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}
.page-description ul li.popup a {
	color: #535353;
}
.page-description>ul>li:hover, .page-description .new-features:hover p, .page-description ul>li a:hover, .page-description .popup li:hover a {
	color: #f77700;
}
.page-description .popup {
	cursor: pointer;
}
.page-description .popup .dropdown-wrapper {
	position: absolute;
	left: 35px;
	top: 23px;
	bottom: -30px;
}
.page-description .popup .dropdown-wrapper ul {
	background: #fff;
	border: 1px solid #f77700;
	box-shadow: 0 0 10px #ddd;
	padding-bottom: 10px;
}
.popup:hover ul, .popup>ul:hover {
	display: block;
	bottom: 0;
}
.page-description .popup li {
	padding: 10px 20px;
}
.page-description .popup li:not(:last-of-type):hover {
	background: #f2f2f2;
	color: #f77700;
}
.page-description .popup li:last-of-type{
	border-top: 1px solid #ddd;
	cursor: default;
	font-size: 11px;
	line-height: 1.2;
	padding-top: 15px;
}
.page-description .popup li:last-of-type a{
	display:inline-block;
	font-size:11px;
}
/* Featured areas
   ========================================================================== */

#featured h2 {
	color: #222;
	font-size: 1.875rem;
	font-weight: 300;
	line-height: 2.5rem;
}
#featured .tiles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	grid-row-gap: 50px;
	justify-content: center;
	align-content: center;
	margin-top: 50px;
}
#featured img {
	width: 100%;
	max-width: 300px;
	border: 1px solid #c7c7c7;
	margin-bottom: 5px;
}
#featured h3, #featured h3 a {
	font-size: 1.125rem;
	color: #dd1100;
}
#featured a:hover {
	color: #f77700;
}
#featured li a {
	color: #222;
	font-size: 0.98rem;
}
#featured li {
	margin-top: 10px;
}
#featured li a:hover {
	color: #f77700;
}
/* ================================== 
   Misc
   ================================== */

.invisible {
	visibility: hidden;
}
/* Dropdown and popup */

.dropdown>a::after, .popup div>p::after {
	background: url(/language/img/icon-dropdown-white.png) no-repeat;
	background-size: 10px 7px;
	content: "";
	display: inline-block;
	height: 8px;
	margin-left: 5px;
	width: 10px;
}
.dropdown .dropdown-wrapper, .popup .dropdown-wrapper {
	display: none;
}
.dropdown.active .dropdown-wrapper, .popup:hover .dropdown-wrapper {
	display: block;
	position: absolute;
}
.mobile-dropdown ul, main header.sticky .dropdown ul {
	right: 10px;
}
.popup {
	padding-bottom: 10px;
}
/* buttons */

.btn.btn-red {
	padding: 5px 15px;
	color: #fff;
	background: #dc1001;
	border-radius: 4px;
}
.btn.btn-red:hover {
	background: #ac0000;
}
/* overlay */

.overlay {
	display: none;
	cursor: pointer;
}
/* Colors */

.divider {
	color: #aeaeae;
}
.c-orange, a.c-orange {
	color: #f77700 !important;
}
.c-orange:hover, a.c-orange:hover, a.c-orange:active {
	color: #dd1100 !important;
}
/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
	.page-description .wrapper {
		grid-column-gap: 3.125rem;
		padding: 3.125rem 3.125rem 1.875rem 3.125rem;
	}
	.page-description .wrapper h1 {
		font-size: 2.42rem;
		grid-column: 1/-1;
		grid-row: 1;
	}
	.page-description ul {
		grid-row: 2 / -1;
	}
	.page-description ul li a {
		font-size: 0.872rem;
	}
	/* Featured */
	#featured .tiles-grid {
		grid-gap: 16px;
		grid-row-gap: 40px;
	}
	#featured li h3 {
		font-size: 1.25rem;
	}
	#featured li a {
		font-size: 1rem;
	}
}
/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
	/* Page description */
	.wrapper {
		padding: 2.1875rem 3.125rem 2.5rem 3.125rem;
	}
	.page-description .wrapper>div {
		grid-template-columns: 1fr;
		grid-row-gap: 10px;
		padding-bottom: 8px;
		border-bottom: none;
	}
	.page-description .wrapper>div>ul {
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		grid-row: 3;
		grid-column: 1/-1;
		grid-column-gap: 0;
		grid-row-gap: 0;
		padding: 35px 0 35px 0;
		align-items: flex-start;
		margin-top: 1rem;
	}
	.page-description .wrapper>div>ul>li:nth-of-type(-n+2) {
		margin-bottom: 20px;
	}
	.page-description .wrapper>div>ul>li:nth-of-type(odd) {
		margin-right: 10px;
	}
	.page-description .wrapper>div>ul li {
		flex-basis: 45%;
	}
	.page-description ul li, .page-description ul li a {
		font-size: 0.872rem;
		line-height: 1.2;
	}
	.page-description .wrapper>div>ul>li:first-of-type {
		padding-bottom: 0;
		border-bottom: 0;
	}
	.page-description .wrapper>div>ul>li img {
		align-self: flex-start;
	}
	.page-description div>div>ul>li p {
		position: relative;
	}
	/* Featured  */
	#featured .wrapper {
		padding: 1.5rem 3.125rem;
	}
	#featured .tiles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	#featured li h3 {
		line-height: 1.4rem;
	}
	#featured li a {
		font-size: 1.1rem;
		line-height: 1.5rem;
	}
}
/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
	/* Page description */
	.page-description .wrapper, .wrapper {
		grid-column-gap: 3.125rem;
		padding: 3.125rem 2rem 1.875rem 2rem;
	}
	#featured .wrapper {
		padding: 0 2rem 2rem 2rem;
	}
	.page-description .wrapper>div>ul {
		padding: 25px 0 15px 0;
		margin-top: 0;
	}
	.page-description h1 {
		margin-bottom: 0;
	}
	.page-description .subtitle p {
		margin-bottom: 27px;
	}
	.page-description .popup .dropdown-wrapper {
		top: 42px;
	}
	.page-description .new-features .dropdown-wrapper ul {
		max-height: 300px;
		overflow-y: scroll;
	}
	.page-description ul li, .page-description ul li a {
		font-size: 0.80rem;
	}	
	/* Featured  */
	#featured .tiles-grid {
		margin-top: 2.1875rem;
	}
	#featured li {
		margin-top: 13px;
	}
	#featured li a {
		font-size: 1.13rem;
		line-height: 1.25rem;
	}
}
/* The end
   ========================================================================== */