/*
Media queries in this document
(min-width: 1049px)
(max-width: 440px)
max-width: 1048px
*/


/* columns */
.content {
	padding: 0px;
}

/*.columns,*/ /*footer,*/ .tabview {
	max-width: 1153px;
}
.columns {
	max-width: 1153px;
	margin: auto;
	display: flex;
	margin-bottom: 20px;
	/*font-size: 0.9em;*/
}
.left img {
	max-width: 80%;  /* TODO media query for smaller screens */
}
.left .introimg {
	max-width: 60%;
}
/*@media (min-width: 1040px) {
	body {
		background-color: lightgreen;
	}
}*/
/* tidigare: 904px gräns*/
@media (min-width: 1049px) {
	.columns {
		flex-direction: row;
	}
	.columns .left {
		flex: 2 2 100px;
		margin-right: 64px;
		/*background-color: orange;*/
	}
	.columns .summary { /*right column*/
		flex: 1 1 100px;
		margin-top: 36px;
		/*background-color: silver;*/
	}
}
.columns h1 { font-size: 2.3em; line-height: normal; font-weight: normal; }
.columns h2 { font-size: 1.5em; line-height: normal;}
.columns h3 { font-size: 1.4em; }


.summary {
	font-size: 0.9em;
}
.summary strong {
	font-size: 1.11em;
	z-index: 1;
}

.summary > div:nth-child(2) {
	min-height: 40px;
	vertical-align: bottom;
	padding: 44px 4px 20px 16px;
	/*background-color: lime;*/
	position: relative;
}

.social {
	position: absolute;
	display: inline-block;
	right: 8px;
	bottom: 4px;
}
.social a {
	text-decoration: none;
}
.social a:hover {
	opacity: 0.7;
}
.social img {
	padding-top: 10px;
	width: 32px;
}


.summary .profile {
	width: 80px;
	float: left;
	margin-right: 16px;
	margin-top: -32px;
}



.summary h2 {
	color: white;
	font-weight: normal;
	background-color: #708a9d;
	padding: 16px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.summary h2.themehighschool {
	background: linear-gradient(to right, #c9007f, #470f60);
}
.summary > div:last-child { margin-bottom: 0px; }
.summary > div {
	background-color: #EEF6F7;
	margin-bottom: 4px;
	padding: 8px 16px 8px 16px;
}
.summary button, .summary .button {
	background-color: #70a366;
	border-radius: 6px;
	color: white;
	display: inline-block;
	font-size: 1.2em;
	margin: 8px 0px 8px 0px;
	padding: 12px;
}
.summary button.themehighschool, .summary .button.themehighschool {
	background: linear-gradient(to right, #c9007f, #470f60);
}
.summary button {
	width: 100%;
}
.summary .button {
	text-decoration: none;
	width: calc(100% - 24px);
}
.summary button:hover, .summary .button:hover {
	/*background-color: #ddd;*/
	opacity: 0.7;
	cursor: pointer;
}

.summary > div {
	position: relative;
	/*background-color: beige;*/
	/*margin-bottom: 12px;*/
	padding-top: 16px;
	padding-bottom: 16px;
}


@media (max-width: 540px) {
	.summary > div:nth-child(2) {
		padding: 24px 4px 40px 16px;
	}
	.summary img {
		position: relative;
		top: 20px;
	}
	.social {
		bottom: 14px;
		/*background-color: red;*/
	}
}

@media (max-width: 1048px) {
	/* Flex and margins */
	.columns {
		flex-direction: column;
	}
	.columns .left, .columns .summary {
		flex-basis: auto;
	}
	.columns .summary {
		margin-top: 36px;
	}

	/* larger text on smaller screens */
	.mobile .columns .left, .mobile .columns .summary {
		font-size: 1.5em;
		line-height: 1.6em;
	}
	.mobile .columns h1 {
		font-size: 2.2em;
	}
	.mobile .columns button {
		font-size: 1.4em;
	}
}