@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url('../fonts/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('../fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
    src: local('Roboto Black'), local('Roboto-Black'),
    url('../fonts/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}


html, body {
    height: 100%;

    background-repeat:repeat-x;
    margin: 0; 
    padding: 0; 
    font-family: Roboto, arial;
	font-weight:300;
    font-size:16px;
}

table, tr, td, th {
    font-family: Roboto, arial;
    font-size:16px;
}

.align-right {
 text-align:right;
  
}
.align-center {
  text-align:center;
}
.clear { clear:both; }



* { box-sizing:border-box;    -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }

.team .c33,
img,
.top, .top .main, .nav,
.teaser img, input, .nbar, .st0, .st1,
a, li {
    -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;    
  }
img {
  border:0px;
}


.all {
  width:100%;
  min-width:100%;
  padding-left:40px;
  padding-right:40px;
}
.main {
  max-width:1000px;
  margin: 0px auto;
  padding:0px;
  position:relative;
  text-align: left;
    padding:40px 0
}
.main:after { content:''; display:table; clear:both; }

.c33 { width:33.3333%; float:left; }
.c30 { width:30%; float:left; }
.c70 { width:70%; float:left; }
.c40 { width:40%; float:left; }
.c20 { width:20%; float:left; }
.c50 { width:50%; float:left; }
.c25 { width:25%; float:left; }
.c75 { width:75%; float:left; }
.c30 { width:30%; float:left; }
.c35 { width:35%; float:left; }
.c60 { width:60%; float:left; }


a {color:inherit; text-decoration:none}


a + p,
.main div > *:first-child {margin-top:0px;}


legend {display: none;}
fieldset {border:0px;margin:0px;padding:0px;margin-top:20px;}
label {display: block;}

hr {border:0px; border-bottom:2px solid #225371; margin:30px 0;}

h1 {font-size:30px;font-weight:500;}
h2 {font-size:22px;font-weight:500;}
h3 {font-size:20px;font-weight:500;}
h4 {font-size:18px;font-weight:500;}
h5 {font-size:16px;font-weight:500;}

.btn {display: inline-block; padding:5px; background: #225371; text-display: none; text-decoration:none; color:#fff;line-height:15px !important;}
.btn:hover {background:#000;}
.project,
.client {padding-left:25px; }
.client + .client {padding-top:20px; }

.btn.big {padding:10px 30px;line-height: inherit !important;}
.btn.green {background:darkgreen;}

.project:after {content:'';display: table; clear: both}
.project {padding-bottom:3px;line-height:29px;}
.links {display:inline-block; float:right;}

@media (max-width: 1100px) {

	.projects .c25 {width:33.3333%;}

}

/* Only Phones */
@media (max-width: 900px) {

	.c50, .c40, .c60 {width:100%;}

	.c50.first,
	.c40.first,
	.c60.first {padding-bottom:60px;}
	
	.c50.first,
	.c50.last,
	.c40.first,
	.c40.last,
	.c60.first,
	.c60.last {padding-left:0px;padding-right:0px;}

	.projects .c25 {width:50%;}

	.footer .c35 {
		font-size: 20px;
		line-height: 32px;
	}

	span.big {
		font-size: 30px;
		line-height: 40px;
	}
}

@media (max-width: 650px) {

	.c30, .c35 {width:100%; padding-bottom:20px;}

}


.csc-header-n2,
.csc-header-n3,
.csc-header-n4,
.csc-header-n5,
.csc-header-n6,
.csc-header-n7 {
	margin-top:0px;
}

/* Formulare */


.frame-type-form_formframework p { font-size:90%; }

input[type="checkbox"] { margin-right:15px; }
.control-label { display:none; }
input[type="password"],
input[type="text"],
textarea,
.csc-form-element-textline input {
  font-family:inherit;
  font-size:inherit;
  color:#225371;
  background:transparent;
  width:70%;
  border:2px solid #225371;
  padding:8px 15px;

  margin-bottom:6px;
}
input[type="password"]:focus,
input[type="text"]:focus,
textarea:focus {
  background:#225371;
    color:#fff;
}
input[type="submit"],
button { border:0px; color:#fff; max-width:250px; background:#225371;position:relative; font-size: 16px;  padding:0; cursor:pointer; padding:10px 30px; margin-top:30px; }
input[type="submit"]:hover,
button:hover { background:#000 }


/* The container */
.form-check-label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.form-check-label.av {margin-left:35px;}

.form-check-label + .form-check-label {display:none;}
.form-check-label.checked + .form-check-label {display:block;}

    /* Hide the browser's default checkbox */
.form-check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.form-check-label span {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
  border:2px solid #225371;
}
.form-check-label.av  span { width:20px;height:20px; }

.form-check-label span.required { position:relative;width:auto; height:auto; border:0px; }

/* On mouse-over, add a grey background color */
.form-check-label:hover input ~ span {
  background-color: #225371;
}

/* When the checkbox is checked, add a blue background */
.form-check-label input:checked ~ span {
  background-color: #225371;
}
.form-check-label input:disabled ~ span {
    background-color: #999;
}

/* Create the checkmark/indicator (hidden when not checked) */
span:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.form-check-label input:disabled ~ span:after,
.form-check-label input:checked ~ span:after {
  display: block;
}


/* Style the checkmark/indicator */
.form-check-label span:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.form-check-label.av span:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border-width: 0 2px 2px 0;
}


