*{
	box-sizing: border-box;
}

body {
	color:rgb(20,20,20);
	background: white;;
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;
	line-height:1.5;
	-webkit-font-smoothing: antialiased;
	padding:0; margin:0 auto; 
	max-width:1400px;
}

h2 { font-size:20px; }

.i-highlight-green {
    padding: 0 2px;
    display: inline;
    background-image: linear-gradient(0deg, rgba(0,255,159,.5) 0%, rgba(0,255,159,.1) 100%);
    background-position: left bottom;
    background-size: 100% 40% !important;
    background-repeat: no-repeat;
}

input { font-family: 'Ubuntu', sans-serif; font-size: 18px; color:black; margin:24px 0 0 0; padding:6px 12px; border:solid 1px rgba(100,100,100,.5); outline:none; transition:all .1s; }
input:hover { border:solid 1px rgba(100,100,100,.75); }
input:focus, input:active { border:solid 1px rgba(100,100,100,1); }
button { font-family: 'Ubuntu', sans-serif; font-size: 18px; color:black; margin:16px 0 0 0; background-color:rgba(100,100,100,.2); outline:none; border:none; padding:6px 12px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; cursor:pointer; transition:all .1s;  }
button:hover { background-color:rgba(100,100,100,.25); }
html { scroll-behavior: smooth; }

a { text-decoration:none; }
#header-btn { background-color:rgba(61,167,255,.85); color:white; display:inline-block; padding:6px 12px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; transition:all .2s cubic-bezier(.17,.67,.41,.62); }
#header-btn:hover, #header-btn:focus, #header-btn:active { background-color:rgba(61,167,255,1); color:white; text-decoration:none; }

.header-btn { background-color:rgba(61,167,255,.85); color:white; display:inline-block; padding:6px 12px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; transition:all .2s cubic-bezier(.17,.67,.41,.62); }
.header-btn:hover, .header-btn:focus, .header-btn:active { background-color:rgba(61,167,255,1); color:white; text-decoration:none; }


#load-inline-btn { cursor:pointer; background-color:rgba(61,167,255,.85); color:white; display:inline-block; padding:6px 12px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; transition:all .2s cubic-bezier(.17,.67,.41,.62); }
#load-inline-btn:hover, #load-inline-btn:focus, #load-inline-btn:active { background-color:rgba(61,167,255,1); color:white; text-decoration:none; }

#workspace-selection { opacity:0; z-index:99; text-align;center; position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(255,255,255,.95); transition:all .2 cubic-bezier(.17,.67,.41,.62); }
#workspace-form-wrap { margin:25vh 0 0 0; }

#workspace-input { width:100%; }

#cached-url-display { display:none; background-image:url('../img/icon_fingerprint.svg'); background-size:24px; background-position:4px center; background-repeat:no-repeat; display:inline-block; height:36px; line-height:36px; margin:0 0 24px 0; padding:0 6px 0 30px; background-color:white; color:rgba(100,100,100,1); border-radius:6px; }
#cached-url-display span { display:inline-block; float:left; }
#cached-url-display img { display:inline-block; float:right; height:24px; width:24px; margin:6px 0 6px 6px; cursor:pointer; transition:all .15s; opacity:.5; }
#cached-url-display img:hover { opacity:1; }

#switch-lang-dd { position:absolute; z-index:9; right:24px; top:24px; height:18px; width:auto; display:inline-block; text-decoration:none; cursor:pointer; transition:all .25s; }


[class*="col-"] {
    float: left;
    padding: 0;
    width: 100%;
}

.col-0 {width: 0%;}
.col-0_5 {width: 4.16%;}
.col-1 {width: 8.33%;}
.col-0_5 {width: 4.16%;}
.col-1_5 {width: 12.5%;}
.col-1_75 {width: 14.5775%; }
.col-2 {width: 16.66%;}
.col-2_5 {width: 20.83%;}
.col-2_7_5 { width:22.92%; }
.col-3 {width: 25%;}
.col-3_5 {width: 29.17%;}
.col-4 {width: 33.33%;}
.col-4_5 {width: 37.5%;}
.col-5 {width: 41.66%;}
.col-5_5 {width: 45.84%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%; }
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%; }

#my-inline-target-id { margin:48px 48px; }

.marg-128-top { margin-top:128px; }
.marg-96-top { margin-top:96px; }
.marg-48-top { margin-top:48px; }

.col-s {height:1px;}
.col-center { text-align:center; }
.clear-col { clear:both; }

.center-col { text-align:center; }
.padding-col { padding:5%; }
.ribbon-padding { padding:36px; }


@media only screen and (max-width : 1024px) {
	
	.navbar-entry-first { margin-left:32px; }
	.button--menu { margin-left:16px; }
	.padding-col { padding:5%; }
	.col-0-s {width: 0%;}
	.col-0_5-s {width: 4.16%;}
	.col-1-s {width: 8.33%;}
	.col-0_5-s {width: 4.16%;}
	.col-1_5-s {width: 12.5%;}
	.col-2-s {width: 16.66%;}
	.col-2_5-s {width: 20.83%;}
	.col-3-s {width: 25%;}
	.col-4-s {width: 33.33%;}
	.col-4_5-s {width: 37.5%;}
	.col-5-s {width: 41.66%;}
	.col-6-s {width: 50%;}
	.col-7-s {width: 58.33%;}
	.col-8-s {width: 66.66%; }
	.col-9-s {width: 75%;}
	.col-10-s {width: 83.33%;}
	.col-11-s {width: 91.66%;}
	.col-12-s {width: 100%; }
	.clear-col-s { clear:both; }
	
	#my-inline-target-id { margin:48px 12px; }
	
	.marg-96-top-s { margin-top:96px; }
	.marg-48-top-s { margin-top:48px; }
	.ribbon-padding { padding:16px 8px; }
	.ribbon-padding-s { padding:16px 32px;  }
}


@media only screen and (max-width : 640px) {
	
	.col-0-xs {width: 0%;}
	.col-0_5-xs {width: 4.16%;}
	.col-1-xs {width: 8.33%;}
	.col-0_5-xs {width: 4.16%;}
	.col-1_5-xs {width: 12.5%;}
	.col-2-xs {width: 16.66%;}
	.col-2_5-xs {width: 20.83%;}
	.col-3-xs {width: 25%;}
	.col-4-xs {width: 33.33%;}
	.col-4_5-xs {width: 37.5%;}
	.col-5-xs {width: 41.66%;}
	.col-6-xs {width: 50%;}
	.col-7-xs {width: 58.33%;}
	.col-8-xs {width: 66.66%; }
	.col-9-xs {width: 75%;}
	.col-10-xs {width: 83.33%;}
	.col-11-xs {width: 91.66%;}
	.col-12-xs {width: 100%; }
	.clear-col-xs { clear:both; }
	
	.marg-96-top-xs { margin-top:96px; }
	.marg-48-top-xs { margin-top:48px; }
	.marg-0-top-xs { margin-top:0px; }
	.ribbon-padding { padding:16px 8px; }
	.ribbon-margin { margin:16px 8px;  }
	
	#my-inline-target-id { margin:24px 0; }
}