/*--------------------------------------------------------------
# Global Styles
--------------------------------------------------------------*/
.section-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
}

h1, h1 + p {
	margin: 0;
}

h2 {
	font-weight: 300;
	text-transform: uppercase;
}

.casestudy-stats > li {
    display: inline-block;
    margin: 15px;
    vertical-align: top;
    text-align: center;
}

.data-statistics span {
	line-height: 1;
}

.data-statistics .count,
.data-statistics .prefix,
.data-statistics .suffix {
	display: inline-block;
    font-size: 3em;
}

.data-statistics .label {
	display: block;
	font-style: italic;
    font-weight: 300;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}


/*--------------------------------------------------------------
# Header Styles
--------------------------------------------------------------*/
body.single-casestudy header.entry-header {
    padding-bottom: 15%;
    padding-top: 8%;
}


header.entry-header h1, header.entry-header h1 + p {
	color: #fff;
}



/*--------------------------------------------------------------
# Content Styles
--------------------------------------------------------------*/
.site-main {
	text-align: center;
}

.data-statistics em {
	color: #999;
	font-weight: 300;
}

/* Section 1 */
#section-1 .container:first-child {
    background-color: #fff;
    padding: 2% 0 0 2%;
    position: relative;
}

#section-1 .container h2 {
	color: #00a2df;
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
}

#section-1 .container:first-child h2 > small {
	color: initial;
    display: block;
    font-weight: 300;
}

#section-1 ul > li > svg {
    font-size: 24px;
    width: 60px;
}

#section-1 ul > li > svg > path {
	fill: #00a2df;
}


/* Section 2 */
#section-2 .container:first-child {
	color: #fff;
}

#section-2 .row.container.brand-identity {
    padding-bottom: 5%;
    padding-top: 5%;
}

#section-2 .row.container.photography {
	background-color: #fff;
	padding: 25px;
}

#section-2 .row.container.photography > .col:last-child {
	padding-bottom: 35px;
	vertical-align: bottom;
}


/* Section 3 */
#section-3 header {
	color: #fff;
	padding-bottom: 5%;
	padding-top: 5%;
}



/* Section 4 */
#section-4 {
	padding-bottom: 5%;
	padding-top: 5%;
}

#section-4 > .container:first-child {
	color: #fff;
	padding-bottom: 5%;
}

#section-4 header svg {
	margin-left: 15px;
	margin-right: 15px;
}

#section-4 header > .social-icons {
	margin-top: 5%;
}

#section-4 .expanding-fanbase {
    background-color: #fff;
    padding: 25px 5%;
    margin-bottom: 5%;
}

#section-4 .expanding-fanbase + .row {
	text-align: center;
}

#section-5 {
    border-top: 1px solid #999;
	border-bottom: 1px solid #999;
    padding-bottom: 100px;
    padding-top: 50%;
}

#section-5 .wrapper {
    background-color: rgba(255,255,255,.85);
    box-shadow: 0 0 10px -5px rgba(0,0,0,.75);
    max-width: 100%;
    padding: 25px 25px 35px;
    position: relative;
    text-align: center;
    width: 750px;
}

#section-5 .play-btn {
    background-color: #ccc;
    border-radius: 50%;
    bottom: -60px;
    left: 50%;
    padding: 7px;
    position: absolute;
    transform: translateX(-50%);
}

#section-5 .play-btn:not(:hover) {
    color: inherit;
}

#section-5 .play-btn:hover {
	background-color: #00a2df;
    color: #fff;
}

#section-5 .wrapper strong {
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
}

#section-5 .wrapper small {
    font-size: 24px;
}

#section-6 > header {
	padding-top: 8%;
	padding-bottom: 10%;
}

#section-7 {
	padding-bottom: 5%;
	padding-top: 8%;
}


/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
@media screen and ( max-width: 1023px ) {
	.section-bg {
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: auto 70%;
	}

	#section-4.section-bg {
		background-size: auto 50%;
	}

	#section-1 ul > li {
	    padding-bottom: 15px;
	    padding-top: 15px;
	    text-align: left;
	}

	#section-1 ul > li:not(:last-child) {
		border-bottom: 1px solid #ccc;
	}

	#section-3.section-bg {
	    background-size: auto 35%;
	}

	#section-4 .row.social-ads .col:last-child img {
	    margin-right: -100px;
	}

	#section-5 .wrapper {
		margin: auto;
	}

	#section-5.section-bg {
	    background-size: 200% auto;
	    background-position: 80% top;
	}

	#section-6.section-bg {
	    padding-top: 50%;
	    background-size: 100% auto;
	}
	
	#section-6 > header,
	#section-6 > .wrapper {
		background-color: #fff;
	}

	#section-6 > header {
		border-top: 1px solid #eee;
		padding-bottom: 5%;
	}

	#section-6 > header > h2 + p {
		margin-bottom: 0;
	}

	#section-6 > .wrapper p {
		margin-top: 0;
	}

}

@media screen and ( min-width: 1024px ) {
	#section-1 .container:first-child,
	#section-2 .container:last-child,
	#section-4 .expanding-fanbase {
	    box-shadow: 1px -10px 10px -5px rgba(0,0,0,.5);
	}

	.row.col-3 > .col {
		max-width: calc(100%/3 - 35px);
	    vertical-align: top;
	}

	#section-1 .row.container:first-child > .col,
	#section-2 .row.container > .col,
	#section-3 .row > .col,
	#section-4 .row:not(.col-3) > .col {
	    max-width: calc(50% - 35px);
	    vertical-align: top;
	}

	#section-2.section-bg,
	#section-3.section-bg {
	    background-size: 2000px auto;
	    background-position: center top;
	}

	#section-1,
	#section-2,
	#section-5,
	#section-6 {
		text-align: left;
	}

	#section-1 > .container:last-child {
	    padding-left: 2%;
	    padding-right: 2%;
	}

	#section-1 .col:last-child {
	    margin-top: -250px;
	}

	#section-1 .col:last-child > img {
		height: unset;
		max-width: unset;
		width: unset;
	}

	#section-1 .container h2 {
	    font-size: 48px;
	    margin-bottom: 0;
	}

	#section-1 ul {
		margin-bottom: 5%;
		margin-top: 5%;
	    position: relative;
		text-align: center;
	}

	#section-1 ul::after {
	    border-top: 4px solid #00a2df;
	    content: "";
	    left: 50%;
	    position: absolute;
	    width: 105%;
	    max-width: 825px;
	    top: 55px;
	    transform: translateX(-50%);
	    z-index: -1;
	}

	#section-1 ul > li {
	    display: inline-block;
	    font-size: 14px;
	    padding: 15px 45px;
	    max-width: 200px;
	    vertical-align: top;
	}

	#section-1 ul > li > svg {
		background-color: #fff;
	    border: 4px solid #00a2df;
	    border-radius: 100%;
	    height: 80px;
	    padding: 20px;
	    margin-bottom: 15px;
	    width: 80px;
	}

	#section-1 ul > li > svg,
	#section-1 ul > li > span {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Section 2 */
	#section-2 {
		padding-bottom: 5%;
		padding-top: 2.5%;
	}

	#section-2 h2,
	#section-3 h2 {
	    font-size: 34px;
	    margin: 0;
	}

	#section-2 .row.brand-identity img {
		max-width: unset;
	}

	/* Section 3 */
	#section-3 .row:not(.concept) > .col:first-child > p:nth-child(2) {
		padding-left: 45px;
		padding-right: 45px;
	}

	#section-3 .col.data-statistics img {
		max-width: unset;
	}

	#section-3 .row.concept > .col {
	    vertical-align: middle;
	}

	#section-3 .row.concept {
		padding-bottom: 5%;
		padding-top: 5%;
	}

	#section-3 .row.concept > .col:first-child {
		border: 1px solid #fafafa;
		box-shadow: 0 0 10px -5px rgba(0,0,0,.75);
	}
	
	/* Section 4 */
	#section-4.section-bg {
	    background-size: auto 48%;
	    background-position: center top;
	}

	#section-4 header {
		padding-left: 5%;
		padding-right: 5%;
	}

	#section-4 .row.col-3 {
		margin-bottom: 5%;
		margin-top: 5%;
	}

	#section-4 .row.col-3 > .col:nth-child(2) {
	    border-left: 2px solid rgba(255,255,255,.25);
	    border-right: 2px solid rgba(255,255,255,.25);
	    padding-left: 25px;
	    padding-right: 25px;
	}

	#section-4 .row.col-3 h3 {
		font-size: 24px;
		text-transform: uppercase;
	}

	#section-4 .row:not(.col-3) .col {
		vertical-align: middle;
	}

	#section-4 .row:not(.col-3) .col:first-child {
		text-align: left;
	}

	#section-4 .row:not(.col-3) .col:first-child > h2 {
		margin: 0;
	}
	
	#section-4 > .container:last-child .row:not(:last-child) > .col:last-child img {
		transform: translateX(150px);
	}

	#section-4 .row:last-child {
	    display: flex;
	    align-items: center;
	}

	#section-4 > .container:last-child .row:not(:last-child) hr, 
	#section-4 .row:last-child hr {
		display: block;
		margin: 0;
	}

	#section-4 > .container:last-child .row:last-child > .col:first-child {
	    order: 1;
	    padding-left: 25px;
	    padding-right: 25px;
	}

	#section-4 > .container:last-child .row:last-child > .col:last-child {
		order: 0;
	}

	/* Section 5 */
	#section-5 {
		padding-bottom: 10%;
		padding-top: 10%;
	}

	#section-5 .wrapper {
	    margin: 15px;
	}

	#section-5 h2,
	#section-6 h2 {
		margin: 0;
	}

	#section-6 > header > h2,
	#section-6 > header > h2 + p {
		margin: 15px;
		max-width: 700px;
	}

	#section-6.section-bg {
	    background-size: 45% auto;
	    background-position: right top;
	}

	#section-6 .wrapper {
	    background-color: #f5f5f5;
	    max-height: 425px;
	}

	#section-6 .wrapper > .container {
		transform: translateY(-150px);
	}

	#section-7 hr {
	    max-width: 900px;
	    background-color: #555;
	    height: 1px;
	    margin-bottom: 5%;
	}

}

@media screen and ( max-width: 1399px ) {
	#section-6 .wrapper {
		text-align: center;
	}

	#section-6 .wrapper img {
	    max-width: calc(50%);
	}
}

@media screen and ( min-width: 1400px ) {
	#section-1 .row.container:first-child {
	    margin-top: -100px;
	}

	#section-1 .col:last-child {
	    margin-top: -300px;
	}

}


@media screen and ( min-width: 2000px ) {
	#section-2.section-bg,
	#section-3.section-bg {
	    background-size: 100% auto;
	    background-position: center top;
	}
}

@media screen and ( min-width: 2300px ) {
	#section-4.section-bg {
	    background-size: auto 53%;
	}
}