/*
Layers CSS 1.0.2 
Released by Jerry Jäppinen under the MIT license
http://eiskis.net/layers
2013-10-25 14:56 Europe/Helsinki
*/
p{font-size:1.0rem;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, a, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	clear: both;
	outline: 0;
	border-width: 0;
	border-style: solid;
	border-color: transparent;
	background: transparent;
	outline-style: solid;
	vertical-align: baseline
}



body {
    background-color: #222;
    color: #333;
    font-size: 1.125em; /* font-size: 18px; */
    font-family: 'Open Sans', sans-serif;
    line-height: 1.8;
}

.image_border{
	width:90%;
	margin:auto;
	border:solid black 1px;
	padding:2px;
}


img.linkedin_position {
    display: block;
    margin:auto;
	margin-top:20px;
}


.original_article a{
	color: yellow;
text-decoration: none;
background-color: transparent;
}

.blockquotex {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8em;
	color: #ffffff;
    /*padding: 30px 0;*/
    z-index: 1;
    /*margin: 80px auto;*/
    align-self: center;
 
}


.blockquotex:before {
    position: absolute;
    content: "”";
    color: rgba(255, 255, 255, 1);
    font-size: 10rem;
    line-height: 0;
    top: 20px;
    left: -5px;
}
.blockquote2{
	content:open-quote;
	position: relative;
font-family: 'Montserrat', sans-serif;
font-size:6em;
color: #ffffff;
width: 100%;

z-index: 1;



}


.media_quotes{
	font-size:1em;
	font-weight:bold;
}

img.ziglu{margin-top:0px;}

.small-list{
	text-decoration:none;
    font-size:16px;
	text-align:left;
	list-style:none;
	padding-left: 1em;
	line-height:30px;
}
.guidance_notes{
	position: relative;
	
	margin-left:auto;
	margin-right:auto;
}

.guidance_notes_text{
	position:absolute;
	bottom:-16px;
	left:10px;
	color:yellow;
	font-size:0.8em;
	font-style: italic;
	padding-top:40px;
	padding-right:5px;
}


.guidance_notes_text2{
	/*position:absolute;*/
	bottom:-16px;
	left:10px;
	color:yellow;
	font-size:0.8em;
	font-style: italic;
	padding-top:40px;
	padding-right:5px;
}
.small-list_customer_care{
	text-decoration:none;
    font-size:16px;
	text-align:left;
	margin:0 30px;
	line-height:30px;
}

.regulations_page{
	text-decoration:none;
    font-size:16px;
	text-align:left;
	list-style: none;
	margin:0 30px;
	line-height:30px;
}

.pop-up_list{
	list-style:none;
}

.regulations_text{color:yellow;}

*{padding: 0; box-sizing: border-box;}
html {
    font-size: 100%;
 /* font-size: 16px; */;
}

figure, button, input, select, textarea {
	margin: 0
}
img, iframe, button, input, select, textarea {
	max-width: 100%;
}
iframe {
	width: 100%
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block
}
audio, canvas, video {
	display: inline-block;
	*display: inline;
	*zoom: 1
}
audio:not([controls]) {
	display: none
}
[hidden] {
	display: none
}


.url_wrap{
	overflow-wrap: break-word;
    word-wrap: break-word;
}

form input{
    font-size: 1em;
	width:250px;
}

img.linkedin{
	font-size:1em;
	}

.first_para{
	margin-top:25px;
	}
/*distance between the text and the regulatory principles cards*/
.reg_principles_gap{
	margin-bottom:-20px;
	}

h3.panelheading {
    font-family: "GothamBold";
    color: white;
    border-radius: 5px;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
}

/*wrapper contains logo and intro text*/
.wrapper{
	margin: 0 auto;
	position: relative;
	width: 80.2%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/*min-height: 100vh;*/
	justify-content: center;
}

.wrapper .card
{	border-bottom:solid #C0C0C0 1px;
	position: relative;
	width: 96.5%;
	margin: auto;
	padding: 15px;
	display: flex;
}

.wrapper .card .imgBx
{
	max-width: 150px;
	flex: 0 0 150px;
	margin-top:37px;
	margin-right: 15px;
}

.wrapper .card imgBx img
{
	max-width: 100%;
}

.wrapper .card .content
{
	margin-left: 20px;
}
/*end wrapper*/



/*contact form*/
.formbox{
	
	width:90%;
	margin:auto;
	}

.form{
	width:50%;
	margin-left:20px;
}

.blockchain_gif{
	margin-left:44px; 
	margin-top:8px;
}

.blockchain_gif img{
	width:500px;
	height:370px;
}

.row{width:90%}
/*contact form*/


@media (max-width: 991px)
{
	.wrapper
	{
		flex-direction: column;
	}
}

@media (max-width: 768px)
{
	.wrapper
	{
		width:100%;
	}
	.wrapper .card
	{
		flex-direction: column;
		/*width:100%;*/
	}
	.wrapper .card .imgBx
	{
		max-width: 100%;
		margin:auto;
	}
	.wrapper .card .content
	{
		margin-left: 0px;
	}
}


/*send button, contact form*/
#btn{
	background: green;
	padding:5px 10px 5px 10px;
	border-radius:3px;
}

#btn_regs{
	background: red;
	padding:5px 10px 5px 10px;
	border-radius:5px;
	color: white;
    font-weight: 900;
	font-size:1em;
}

/*not needed*/
.link{
	color:white;
	font-weight: 900;
}

/*BlockChain regulatory principles section*/
.panel_holder {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  
  padding:10px;
}


/*section beneath videos*/
.messages2{
	color:yellow;
	text-decoration:none;
}

.fintech {
font-weight:bold;
font-size:24px;
color:red;
}

.video_title{
	color:white;
	font-size:1.0em;
	font-weight:bold;
	margin:20px 10px 20px 25px;
	text-align:center;
}

/*Contact area message box*/
.comment {
            float: left;
            width: 100%;
            height: auto;
        }
        .commenter {
            float: left;
        }
        .commenter img {
            width: 35px;
            height: 35px;
        }
        .comment-text-area {
            float: left;
            width: 100%;
            height: auto;
        }

        .textinput {
            float: left;
            /*width: 75%;*/
            min-height: 75px;
            outline: none;
            resize: none;
            border: 1px solid grey;
        }
/*Contact area message box*/	


/*grant james images*/
.internalcontainerL{
      display:flex;flex: 1;
      background: #C0C0C0;
      padding: 0px 30px 0px 30px;
      font-size: 12px;
      font-family: 'Roboto', sans-serif;
      margin: 3px 10px 3px 3px;
    }

.internalcontainer{
      flex: 1;
      background: #ADA996;  /* fallback for old browsers */
	  background: -webkit-linear-gradient(to top, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to top, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      padding: 20px 30px 20px 30px;
      font-size: 12px;
      font-family: 'Roboto', sans-serif;
      margin: 3px;
	  height:95.6%;
    }

.internalcontainerjames{
      display:flex;flex: 1;
      background: #ADA996;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to top, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to top, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      padding: 20px 30px 20px 30px;
      font-size: 12px;
      font-family: 'Roboto', sans-serif;
      margin: 3px;
	  height:99%;
    }
	
figure {
    /*border: thin #36454F solid;*/
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
	border-radius:3px;
	border: thin #c0c0c0 solid;
}

ul.piclist{
	list-style-type: none;
	margin-left:10px;
	color:black;
	font-weight:bold;
	font-size:1.1em;
	padding:0 30px 0 22px;
}

.test{padding-left:10px;}

ul.piclistjames{
	list-style-type: none;
	margin-left:13px;
	color:black;
	font-weight:bold;
	font-size:1.1em;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
	font-weight:bold;
	font-size:1.5em;
}

.taxgi-img {
	margin-top: 15px;
}
img.grant{
	height:220px;
	width:220px;
	margin:auto;
}

img.blockchain{
	/*height:96%; */
	
	margin:12px auto;
}

.blockchain_intro{
	color:white;
}

.presentation_intro{
	color:white;
	line-height:1em;
	
}

.main_title{
	color:white;
	margin-top:30px;
}
	
/*grant - james images*/	
	
h1, h2, h3, h4, h5, h6 {
    color: white;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.34;
    text-rendering: auto; /* Android browser */
}
/*----------------------------------------------------------------
    General Rules
----------------------------------------------------------------*/

@font-face{
	font-family: "GothamBold";
	src: url("GothamBold.woff");
	src: url("GothamBold.otf");
	src: url("GothamBold.ttf");
}

/* Some default styles to make each box visible */
.box {
  color:white;
  text-align: left;
  /*text-shadow:4px 4px 0 rgba(0,0,0,0.1);*/
  padding:10px 20px 0px 20px;
  margin:5px;
  display:block;
  text-decoration:none;
}

.gib_gov_website_box {
  color:white;
  text-align: left;
  /*text-shadow:4px 4px 0 rgba(0,0,0,0.1);*/
  padding:5px 10px 0px 10px;
  margin:5px;
  display:block;
  text-decoration:none;
}

/* Colours for each box */
.box1 {background: #333;}
.box2 {background: #333;}
.box3 {background: #333;}
.box4 {background: #333;}

.box5 {background: #333;}
.box6 {background: #333;}
.box7 {background: #333;}
.box8 {background: #333;}
.box9 {background: #333;}
.box10 {background:#333;}


.dlt_list{
	
	list-style-type: none;
	
}

/* We start writing out flexbox here. The above is just page setup */
.holder {
  width:78%;
  display:flex;
  flex-flow: wrap row;
  flex-wrap:wrap;
  margin:auto;
  /*flex-wrap:wrap;*/
  /*al ign-items:flex-start;*/
}

.box {  
    /*flex-flow: wrap row;*/
	flex:1;
	flex-grow:1;
	min-width:200px;
	border-radius:3px;
}

.box1{flex-basis: 30%;display:flex;}
.box2{flex-basis: 30%;padding:0px;}
.box3{flex-basis: 30%;}
.box4{flex-basis: 100%;}
.box5{flex-basis: 100%;}
.box6{flex-basis: 40%;}
.box7{flex-basis: 100%;}
.box8{
	flex-basis: 100%;
	padding-top:10px;
}

.box9{
	flex-basis: 100%;
	padding-top:10px;
}

.box10{flex-basis: 100%;}
/*.box1{width:100%;}*/

/*img {
    display: block;
}*/

section {
    overflow-x: hidden;
}

/*----------------------------------------------------------------
    Perfect Fourth (http://type-scale.com)
----------------------------------------------------------------*/



/*----------------------------------------------------------------
    320px Breakpoint - Fix some mockups
----------------------------------------------------------------*/

@media only screen and (min-width:20em) and (max-width:20em) {

    .side-mockup .ipad-slider {
        margin-left: -21px;
    }

    .side-mockup .iphone-slider {
        margin-left: -18px;
    }

    .side-mockup .dasktop-slider {
        margin-left: -29px;
    }
  
}       

/*----------------------------------------------------------------
    Layers CSS 1.0.2  responsive adjustments
    Released by Jerry Jäppinen under the MIT license
    http://eiskis.net/layers
    2013-10-25 14:56 Europe/Helsinki
----------------------------------------------------------------*/

@media only screen and (max-width:48em) {
    .column.one,.column.two,.column.sixth,.column.three,.column.fourth,.column.four,.column.twosixths,.column.third,.column.five,.column.six,.column.half,.column.threesixths,.column.twofourths,.column.seven,.column.eight,.column.foursixths,.column.twothirds,.column.nine,.column.threefourths,.column.ten,.column.fivesixths,.column.eleven {
        float: none !important;
        clear: both !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: auto !important;
    }

ul.piclist{
	list-style-type: none;
	margin-left:10px;
	color:black;
	font-weight:bold;
	font-size:1.1em;
	padding:0 10px 0 10px;
}

.holder{width:100%;}	
	
	.box {
    color: white;
    font-size: 2.2em;
    text-align: left;
    /*text-shadow: 4px 4px 0 rgb(0 0 0 / 10%);*/
    
    margin: 5px;
    display: block;
    text-decoration: none;
}
.video_title{
	color:white;
	font-size:0.85em;
	text-align: left;
	}



.video_title2{
	color:white;
	font-size:0.24em;
	margin-top:-5.0em;
}

 .textinput {
            float: left;
            width: 100%;
            min-height: 75px;
            outline: none;
            resize: none;
            border: 1px solid grey;
        }

img.blockchain {
    margin: auto;
	width:100%;
	height:22vh;

}

.presentation{
	display:block;
	margin:auto;
}

.imgBx img{
	width:200px;
	height:160px;
}

.box2{
	flex-basis: 30%;
	padding:0px;}
}

@media only screen and (max-width:48em) {
    body {
        font-size: 0.9em;
        -webkit-text-size-adjust: none;
    }
			.box {
    padding:0 10px 0 10px;
}
	
.gib_gov_website_box {
  color:white;
  text-align: left;
  /*text-shadow:4px 4px 0 rgba(0,0,0,0.1);*/
  padding:5px 0px 0px 0px;
  margin:5px;
  display:block;
  text-decoration:none;
}	
	
	
.vidcontainer{
	width:100%;
	max-width:900px;
	height:0;
	padding-bottom:56.25%;
	border:solid 4px orange;
	position:relative;
	/*margin-bottom:-110px;*/
}
	
.box {
    
    font-size: 1.2em;
    text-align: left;
    
}

.box2{
	display:none;
}	
	
	/*Contact area message box*/
.comment {
            float: left;
            width: 100%;
            height: auto;
        }
        .commenter {
            float: left;
        }
        .commenter img {
            width: 35px;
            height: 35px;
        }
        .comment-text-area {
            float: left;
            width: 100%;
            height: auto;
        }

        .textinput {
            float: left;
            width: 100%;
            min-height: 75px;
            outline: none;
            resize: none;
            border: 1px solid grey;
        }

	
/*Contact area message box*/ 	
	
/*label {
font-weight: bold;
display: block;
width: 150px;
float: left;
font-size:0.5em;
}
label:after { content: ": " }	*/
	
	.listbox_intro{margin-top:50px;}

	h3.panelheading {
    font-family: "GothamBold";
    
    color: white;
    border-radius: 5px;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
}

.contact_heading{font-family: "GothamBold";
    
    color: white;
    border-radius: 5px;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.6);}

	h3.panelheading_listbox
{
	font-family: "GothamBold";
    font-size: 0.6em;
    /*background-color: rgba(16, 15, 19, 0.59);*/
    color: white;
    border-radius: 5px;
    text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
}

figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}



figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}

.dlt_list{
	margin:0px;
	padding:0px;
	line-height:1.6em;
	list-style-type: none;
	font-size:0.2em;
}



ul.piclistjames{
	list-style-type: none;
	margin-left:13px;
	color:black;
	font-weight:bold;
	font-size:1.1em;
}



 .textinput {
            float: left;
            width: 100%;
            min-height: 75px;
            outline: none;
            resize: none;
            border: 1px solid grey;
        }
		
.formbox{
	
	width:90%;
	margin:auto;
	}

.form{
	width:100%;
	margin-left:0px;
}

.blockchain_gif{
	margin:auto; 
	margin-top:20px;
}

.blockchain_gif img{
	width:500px;
	height:380px;
}

.row{width:90%}
}
      
	  
	  
.top-left {
    background: blue;
    top: 8px;
    left: 0px;
    text-align: left;
    padding-left: 4px;
    padding: 5px 0 5px 5px;
    font-size: 2rem;
    color: white;
}	  

/*#rgba_example {
    background-color: rgba(16, 15, 19, 0.59);
	border-radius:6px;padding:10px;
}*/


.columns {
	display:flex;
	flex-flow: row wrap;
	justify-content: left;
	margin: 5px 0;
	column-gap:30px;
}

.column {
	
	flex:1;
	flex-grow:1;
	min-width:100px;
	margin: 2px;
	transition: 0.3s;
}

.column {
	flex-basis: 50%;flex:1;flex-grow:1;min-width:200px;
	margin: 2px;
	transition: 0.3s;
}

.column_press {
	flex-basis: 30%;
	flex:1;
	flex-grow:1;
	width:150px;
	margin: 2px;
	transition: 0.3s;
}

/* center the blockquote in the page */
.blockquote-wrapper {
   display: flex;
   height: 100vh;
   padding: 0 20px;
}

/* Blockquote main style */
.blockquote {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #ffffff;
    padding: 30px 0;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    margin: 80px auto;
    align-self: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
}





.guardian{margin-top:40px;}


/* Blockquote header */
.blockquote h1 {
    position: relative;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
    position: absolute;
    content: "”";
    color: rgba(255, 255, 255, 1);
    font-size: 10rem;
    line-height: 0;
    bottom: -43px;
    right: 30px;
}


/* increase header size after 600px */
@media all and (min-width: 600px) {
    .blockquote h1 {
        font-size: 30px;
   }

}

/* Blockquote subheader */
.blockquote h4 {
    position: relative;
    color: yellow;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
    padding-top: 20px;
    z-index: 1;
}



.vidwrapper{
	width:100%;
	max-width:900px;
	margin:0em auto;
	/*border:solid 4px green;*/
}

.vidwrapper2{
	width:100%;
	max-width:900px;
	margin:0em auto;
	/*border:solid 4px green;*/
}

.vidcontainer{
	width:100%;
	max-width:900px;
	height:0;
	padding-bottom:56.25%;
	border:solid 4px orange;
	position:relative;
	/*margin-bottom:-100px;*/
}

.vidcontainer video{
	width:100%;
	max-width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	
}

:root {
  --cardWidth: 240px;
  
  --cardMargin: 16px;
}




.panel {
  width: var(--cardWidth);
  height: var(--cardHeight);
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #3C3B3F;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #605C3C, #3C3B3F);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #605C3C, #3C3B3F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  box-sizing: border-box;
  padding:0 13px 0 13px;
}

.list_items{
	color:white;
	margin-bottom:55px;
	}


/*Contact area send button*/
button, input, optgroup, select {
    margin: 0px 0 10px 0; 
	/*width:160px;*/
	height:40px;
	border-radius:3px;
    }
	 textarea{
	height:80px;
	margin-bottom:5px;
	}
	
a {
    color: black;
    text-decoration: none;
    background-color: transparent;
}
/*Contact area send button*/
.pb-5, .py-5 {
    padding-bottom: 0.9rem !important;
}


@media only screen and (max-width: 1460px) {
  
  img.blockchain {
    margin: auto;
	/*height:50%;*/
	margin-top:15px;

}
  img.lowerpic{
	  height:50%;
	  }
  .wrapper .card .content
{
	margin:auto;
}
}


/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: white;
  text-decoration: none;
  cursor: pointer;
  font-size:16px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  /*position: fixed;*/
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  overflow: auto;
  height:300px;
  padding:10px 15px 10px 15px;
}

/* Add styles to the form container */
.form-container {
  max-width: 100%;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}



/*Phore logo in testimonials*/
.flex {
        display: flex;
        align-items: center;
		line-height: 1.1;
    }

.flex img {
        width: auto;
        max-height: 100px;
        margin-right: 8px;
		margin-top:4px;
    }

.ceo{color: yellow;
    font-size: 1.4rem;
    font-weight: normal;}
	
	
.h-captcha{width:100%;}