﻿body { background-color: #ffffff; } /* #333333 */

div.background {
    
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    opacity: 0.1; /* 0.3 */
    background-image: url(/_uploads/page-images/Blockchain-Overview.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.page-container { padding: 0px; font-family: 'berlingske_sans_roundlight', sans-serif; } /* 15px */
.overview-container { padding: 85px 85px 85px 85px; position: relative; }
.information-container { padding-left: 10px; padding-right: 10px; padding-top: 50px; }

.overview-container a.page-close-big { top: 30px; right: 30px; }
/*.overview-container .copy { margin-bottom: 50px; }*/

h1.title { font-size: 30px; color: #333333; margin-bottom: 30px; font-family: inherit; } /* #ffffff */
h1.title:after { content: ""; border-bottom: 2px solid rgb(190, 214, 0); display: block; width: 60px; margin-top: 15px; }

div.copy, div.copy p { font-size: 17px; }

.overview-container .copy p { color: #444444; position: relative; } /* #ffffff */

.links-container { position: relative; width: 880px; margin-top: 50px; margin-left: -10px; } /* 880 = (3 * 280) + (2 * 20) ; 280 for slides, 20 for the gaps */

.link-container { width: 280px; background-color: rgb(77, 83, 87); color: #444444; margin: 0px 10px; max-width: 280px; position: relative; } /* #ffffff */

.link-image { background-size: cover; height: 158px; }

.link-content { padding: 28px 28px 70px 28px; height: 250px; overflow: auto; }
.link-content h2.link-title { font-size: 23px; margin-bottom: 28px; color: #ffffff; }
.link-content h2.link-title:after { content: ""; border-bottom: 2px solid #ffffff; display: block; width: 42px; margin-top: 15px; } /* #ffffff */

.link-content p { color: #ffffff; font-size: 13px; margin-bottom: 5px; } /* #ffffff */

.overview-container+.information-container { padding-bottom: 0px; margin-top: 50px; }

img.infographic {  width: 100%; }

video { width: 100%; }

.carousel-nav-2.blockchain-overview { position: relative; /*margin-left: 18px; margin-top: 8px; display: inline-block;*/ width: 100%; }
.carousel-nav-2.blockchain-overview .slick-arrow { font-size: 0; background-color: transparent; width: 20px; height: 36px; background-size: cover; top: 8px; cursor: pointer; }

/*.carousel-nav-2.blockchain-overview .slick-next {background-image: url(/_assets/btn-arrow-white.png); position: absolute; right: -40px; top: 180px;}
.crousel-nav-2.blockchain-overview .slick-prev {background-image: url(/_assets/btn-arrow-white-left.png); position: absolute; left: -40px; top: 180px; }*/

.carousel-nav-2.blockchain-overview .slick-next {background-image: url(/_assets/grey-chevron-right.png); position: absolute; right: -40px; top: 180px;}
.carousel-nav-2.blockchain-overview .slick-prev {background-image: url(/_assets/grey-chevron-left.png); position: absolute; left: -40px; top: 180px; }

.infographic-image { text-align: center; }
.infographic-image img { width: 100%; /* max-width: 640px;*/}

.overview-text { padding: 30px 60px; background-color: #EEF3F8; font-size: 0; }

.overview-text .col-right .intro p { color: #5482ab; font-size: 18px; }

.overview-text .col-left { width: 30%; padding-right: 20px; display: inline-block; vertical-align: top; font-family: 'berlingske_sans_roundlight', sans-serif; font-size: 19px; color: #5e4055; }
.overview-text .col-right { width: 70%; padding-left: 20px; display: inline-block; vertical-align: top; font-family: 'berlingske_sans_roundregular', sans-serif; font-size: 14px; color: #6a6e72; }

.overview-text .col-left.full-width { width: 100%; padding-right: 0; }

.overview-text .col-right.full-width { width: 100%; padding-left: 0; }

.overview-text .col-left p { font-family: 'berlingske_sans_roundlight', sans-serif; font-size: 19px; color: #5e4055; }



.overview-text .col-right p,
.overview-text .col-right ol li,
.overview-text .col-right ul li { font-family: 'berlingske_sans_roundregular', sans-serif; font-size: 16px; color: #4d5357; line-height: 1.4em; margin-bottom:0.75em;}

.overview-text .col-right ol,
.overview-text .col-right ul {margin-left: 20px;}


.overview-text .col-right h1, h2, h3, h4, h5 { margin-bottom: 10px; }
.overview-text .col-right h1 { font-size: 22px; }
.overview-text .col-right h2 { font-size: 20px; }
.overview-text .col-right h3 { font-size: 18px; }
.overview-text .col-right h4 { font-size: 16px; }
.overview-text .col-right h5 { font-size: 15px; }

.overview-text .col-left h3 { font-size: 18px; font-family: 'berlingske_sans_roundregular', sans-serif; color: #4b2942; position: relative; margin-bottom: 20px; }
.overview-text .col-left h3:after { content: ""; border-bottom: 2px solid #4b2942; display: block; width: 42px; margin-top: 15px; }

.overview-infographics-section { margin-top: 50px; }

/** 2018 OVERVIEW PAGE **/

.wrapper-overview	{background-image:url(/_assets/blockchain-bg-header-overview.jpg); background-size: 560px auto; background-position: top right; background-repeat: no-repeat;}

.intro-col { padding-top: 4px; padding-bottom: 50px; }
.intro-col h1 { color: #000000; font-size: 30px; font-family: 'berlingske_sans_roundlight', sans-serif; margin-bottom: 30px; }
.intro-col p { color: #4b2942; font-size: 19px; font-family: 'berlingske_sans_roundlight', sans-serif; }

.bc-overview-panel { position: relative; height: 195px; background-size: 1200px auto; background-repeat: no-repeat; display: table; width: 100%; background-image: url(/_uploads/tool-hero-images/blockchain-hero.jpg); background-position: 0 -100px; }
.bc-overview-panel:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(34, 52, 68,0.9); }

.bc-overview-panel[data-index='2'] { background-position: 25% -100px; }
.bc-overview-panel[data-index='3'] { background-position: 50% -100px; }
.bc-overview-panel[data-index='4'] { background-position: 75% -100px; }
.bc-overview-panel[data-index='5'] { background-position: 100% -100px; }

.table { display: table; width: 100%; height: 100%; }
.cell { display: table-cell; vertical-align: top; padding-top: 10%; height: 100%; text-align: center; width: 100%; font-size: 22px; position: relative; overflow: hidden; }
.cell h2 { color: #ffffff; font-family: 'berlingske_sans_roundlight', sans-serif; padding-left: 20px; padding-right: 20px; line-height: 1.2em; padding-top: 10px; }
.wrapper-overview a.plus-btn { position: relative; left: auto; bottom: auto; margin-top: 15px; }

.bc-overview-panel .cell a { left: 50%; margin-left: -17px; }

.cell:after { position: absolute; bottom: 0; left: -100%; width: 200%; display: block; content: ''; background-image: url(/_assets/bottom-overlay.png); background-position: bottom; z-index: 20; background-size: 100%; height: 17px; background-repeat: no-repeat; }
.cell.active:after { left: 0; }

.col-row-expanded { /*height:650px;*/ }
.overview-expanded { display: none; float: left; width: 100%; }

.wrapper-overview .overview-text					{background-color:#e3dfe3; font-size: 0; padding: 20px; width: 100%;}
.wrapper-overview .overview-text .col-left			{width:40%; padding: 20px; font-size: 16px; display: inline-block; vertical-align: top;}
.wrapper-overview .overview-text .col-left h3		{font-size:16px; font-family: 'berlingske_sans_roundmedium', sans-serif; color: #4b2942; position: relative; margin-bottom: 20px;}
.wrapper-overview .overview-text .col-left h3:after	{content: ""; border-bottom: 2px solid #4b2942; display: block; width: 42px;  margin-top: 15px;}  
.wrapper-overview .overview-text .col-left p		{font-size:19px; color: #4b2942;}

.wrapper-overview .overview-text .col-right		{width:60%; padding: 20px; font-size: 16px; display: inline-block; vertical-align: top;}
.wrapper-overview .overview-text .col-right p	{font-size:14px; color: #4d5357;}

.infographic-panel			{padding-top:140%; background-size: cover; position: relative; overflow: hidden}
.infographic-panel-hover	{position:absolute; left: 0; top: 0; background-color:rgba(75,41,66,0.9); z-index: 20; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.2s ease-out; transform: translateY(20px)}

.infographic-panel:hover .infographic-panel-hover	{opacity:1; visibility: visible; transform: translateY(0)}

.infographic-panel .cell { vertical-align: middle; }
.infographic-panel .cell p		{z-index:10; position: relative; color: #fff; margin-bottom: 5px; font-size: 16px;}
.infographic-panel .cell:after	{display:none !important;}

.infographic-panel .cell a { position: initial; bottom: initial; left: initial; }

.wrapper-overview .infographic-panel .cell a.plus-btn	{margin-top:8px;}

a.page-close-big	{z-index:20}

@media (max-width: 1000px) {
	.cell h2	{font-size:18px; padding-left: 0; padding-right: 0}
}


@media (max-width: 800px) {
	
	.cell h2	{font-size:16px; width: 90%; margin-left: auto; margin-right:auto;}
	.col-5		{width:33.333%;}
	
	.intro-col	{width:70%;}
	.wrapper-overview	{background-size:390px auto;}
	
	
}


@media (max-width: 600px) {
	
	.col-5		{width:50%;}

    .wrapper-overview .overview-text .col-left {width:100%; padding-bottom:0;}
    .wrapper-overview .overview-text .col-right {width:100%; padding-top:5px;}
	
}


@media (max-width: 500px) {
	
	.intro-col			{width:100%; padding-top: 150px;}
	.wrapper-overview	{background-size:70% auto;}
	
}





