Template:Intro to/styles.css

/*  */
.introto__main {
	display:        flex;
	position:       relative;
	box-sizing:     border-box;
	box-shadow:     2px 2px 2px #CCC;
	flex-direction: row;
	flex-wrap:      wrap;
	max-width:      1100px;
	max-width:      100%;
	overflow:       hidden;
	border:         1px solid black;
	margin:         auto;
}
.introto__main-title {
	font-size:       250%;
	background:      #777;
	color:           #FFF;
	text-align:      center;
	align-items:     center;
	justify-content: center;
}
.introto__lead {
	background:    #EEE;
	padding:       30px 60px;
	margin-bottom: 30px;
}
.introto__base {
	max-width:  1060px;
	min-height: 55px;
	margin:     auto;
	padding:    5px 20px;
	font-size:  1.1em;
	background: #EEE;
	border:     1px solid lightgrey;
}
.introto__tabs-main {
	height: auto;
}
.introto__tabs-title {
	font-size:   1.5em;
	font-weight: bold;
}
.introto__columns {
	display:         flex;
	flex-direction:  row;
	flex-wrap:       wrap-reverse;
	justify-content: center;
}
.introto__columns-left {
	display:        inline-block;
	flex:           0 1 0;
	position:       relative;
	vertical-align: top;
	min-width:      260px;
	padding-bottom: 50px;
}
.introto__columns-left-button {
	position:     absolute;
	bottom:       0;
	padding-left: 2em;
}
.introto__columns-right {
	display:        inline-block;
	flex:           1 1 0;
	padding:        1em;
	min-width:      250px;
	vertical-align: top;
	border-left:    1px solid #c9c9c9;
}

.introto__columns-right p {
    margin-bottom: 2.0em; /* between paragraphs */
}

@media screen and (min-width: 1100px) {
	.introto__main {
		max-width: 1100px;
	}
}

@media screen and (min-width: 800px) {
	.introto__tabs-main {
		padding: 0.5em;
	}
	.introto__columns-right{
		padding: 40px;
	}
	.introto__columns-left {
		padding-bottom: 80px;
	}
	.introto__columns-left-button{
		padding-bottom: 33px;
	}
}