/**
 * This file should get overwritten if Method 1 is used. If Method 2 is chosen,
 * remove this comment and start adding your styles to this file.
 */
.view-portfolio-per-plaats .node-portfolio{
	margin-bottom: 35px;
}
/*Typografie*/
.fa{
	color: #0bcd0b;
}
body,
p,
a,
h1,
h2,
h3,
table{
	font-family: "Lato";
}
h1{
	font-size: 3.2vw;
	font-weight: 100;
}
body,
p{
	font-weight: 300;
}
h2{
	font-weight: 100;
}
.blok1 h2,
.blok2 h2,
.blok3 h2,
.blok4 h2{
  min-height: 45px;
  font-weight: 300;
  vertical-align: middle;
}
#block-block-8 h1,
#block-block-13 h1,
#block-block-14 h1{
	text-align: center;
	font-size: 2.7vw;
	margin-top: 3%;
}
#block-block-8,
#block-block-13,
#block-block-14{
}
.front h1,
.submenuportfolio,
.subtitelfront,
.subtitelcontact{
	text-align: center;
	font-weight: 100;
	display: block;
  font-size: 3.2vw;
}
.front h1{
  padding-top: 5%;
  font-weight: 300;
}
.front .subtitelfront{
  font-weight: 200;
}
.submenuportfolio{
	font-size: 14px;
}
#block-block-8 a,
#block-block-13 a,
#block-block-14 a{
	color: #000;
	margin: 0 auto;
}
.telefoon{
	text-align: center;
	margin-top: 15px;
}
.submenuportfolio a{
  font-weight: 300;
}
.blok1 p,
.blok2 p,
.blok3 p,
.blok4 p{
  color: #777;
}
.sideline::before {
  margin: 0 25px 0 0;
}
.sideline::after{
  margin: 0 0 0 25px;
}
.sideline::before,
.sideline::after {
    border-bottom: 1px solid #c6cace;
    content: " ";
    display: inline-table;
    position: relative;
    top: -6px;
    width: 4px;
}
/* End typografie */

.navbar-header{
	float: none;
}
.logo-zoekmachine{
	float: left;
	padding: 5%;
	text-align: center;
}
.tekstzoekmachine{
	clear: both;
}
.field-name-field-afbeelding-portfolio img{
	width: 100%;
	height: auto;
	margin-bottom: 50px;
}
.page-portfolio .field-name-body p{
	font-size: 1.5vw;
	color: #666;
	padding-top: 50%;
	font-weight: 300;
}
.page-portfolio .field-name-body{
	height: 100%;
}
ul li{
	list-style-type: none;
}
#block-block-4{
	margin: 25px 0px 25px 0px;
}
.logoworkatweb{
	border: 2px solid #000;
	padding: 10px 15px;
	width: 150px;
	display: block;
	margin: 15px auto 0;
	text-align: center;
  color: orange;
  font-weight: bold;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
}
.logoworkatweb:hover {
  background-color: #000;
  text-decoration: none;
  background-attachment: scroll;
  background-clip: border-box;
  background-image: none;
  background-origin: padding-box;
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto auto;
  color: #fff;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
   transition: all 0.3s ease 0s;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
}
.show-mobile{
	display: none;
}
#block-block-2{
	text-align: center;
}
.blok1,
.blok2,
.blok3,
.blok4{
  margin: 9px;
	padding: 0% 0% 5% 0%;
	float: left;
	width: 48%;
}
.blok1,
.blok2{
	border-bottom: 1px solid #ccc;
}
#block-block-1 ul,
#block-block-8 ul,
#block-block-13 ul,
#block-block-14 ul{
    width: 100%;
    text-align: center;
}
#block-block-1  li,
#block-block-8 li,
#block-block-13 li,
#block-block-14 li {
    display: inline-block; /* the key bit */
    *display: inline; /* IE7 hack */
    *zoom: 1; /* IE7 hack */
}
#block-block-1 a:hover{
  background-color: #fff;
  color: #000;
}
.buttonfront{
	margin-right: 5px;
}
.navbar-default,
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	background-color: transparent;
	border: none;
}
.nav > li{
  float: left;
  width: 20%;
  text-align: center;
}
.nav > li a{
	text-transform: uppercase;
	font-weight: 300;
	color: #000;
	text-align: center;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  vertical-align: middle;
}
.nav > li a:hover{
	background: transparent;
}
.nav > li a::before, .nav > li a::after {
    bottom: 2px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}
.nav > li a::before {
    background: #d9d9d4 none repeat scroll 0 0;
}
.nav > li a::after {
    background: #1a1a18 none repeat scroll 0 0;
    transform: translateX(-102%);
    transition: transform 0.2s ease-out 0s;
}
.nav > li a:hover::after {
    transform: translateX(0%);
}
#block-system-main-menu{
	margin: 5px 0px 25px 0px;
}
#block-system-main{
	margin: 50px 0px;
}
.page-portfolio .page-header{
	text-align: left;
}
.page-portfolio .node-portfolio{
	padding: 15px 0px;
}
.node-portfolio .views-row-last{
	border: none !important;
}
.compact-form-label{
	top: 15px;
}
/* Afbeelding voorpagina */
#block-block-1 img{
  margin: 0px 25px;
}
#block-block-1 .block-title{
  text-align: center;
  font-size: 3vw;
  font-weight: 100;
  margin-top: 10%;
  text-transform: uppercase;
  margin-bottom: 35px;
}

#block-block-1{
	background-image: url(/sites/all/themes/workatweb/images/webdesign-bureau-websites-hoogezand-sappemeer-groningen-veendam-winschoten.jpg);
	height: 500px;
}
/* Afbeelding portfolio */
#block-block-8{
	background-image: url(/sites/all/themes/workatweb/images/portfolio-fotografie-hoogezand-sappemeer.jpg);
	min-height: 250px;
}
/* Afbeelding portfolio */
#block-block-13{
	background-image: url(/sites/all/themes/workatweb/images/portfolio-drukwerk-hoogezand-sappemeer.jpg);
	min-height: 250px;
}
#block-block-1,
#block-block-8,
#block-block-13{
	background-repeat: no-repeat;
	overflow: hidden;
	background-position:  center center;
	-moz-background-position: center center;
	-webkit-background-position: center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px 5px;
}
/* Afbeelding abonnementen */
#block-block-9{
	background-image: url(/sites/all/themes/workatweb/images/webdesign-bureau-hoogezand-sappemeer-groningen.jpg);
	min-height: 350px;
}
#block-block-14{
	background-image: url(/sites/all/themes/workatweb/images/portfolio-websites-webshops-hoogezand-sappemeer.jpg);
	min-height: 250px;
}
#block-block-9,
#block-block-14,
#block-block-24,
#block-block-28{
	background-repeat: no-repeat;
	overflow: hidden;
	background-position: center bottom !important;
	-moz-background-position: center bottom !important;
	-webkit-background-position: center bottom !important;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px 10px;
}
#block-block-1 img{
  margin: 0px 25px;
}
#block-block-1 .block-title{
  text-align: center;
  font-size: 3vw;
  font-weight: 100;
  margin-top: 10%;
  text-transform: uppercase;
  margin-bottom: 35px;
}
#block-block-24,
#block-block-28{
	min-height: 350px;
}
#block-block-1 img{
  margin: 0px 25px;
}
#block-block-1 .block-title{
  text-align: center;
  font-size: 3vw;
  font-weight: 100;
  margin-top: 10%;
  text-transform: uppercase;
  margin-bottom: 35px;
}

/* Afbeelding prijs */
#block-block-10,
#block-block-16,
#block-block-17,
#block-block-18{
	background-image: url(/sites/all/themes/workatweb/images/offerte-website-hoogezand-sappemeer-veendam-winschoten-groningen.jpg);
}
#block-block-25{
	background-image: url(/sites/all/themes/workatweb/images/website-webdesign-bureau-veendam.jpg);
}
#block-block-10,
#block-block-16,
#block-block-17,
#block-block-18,
#block-block-25,
#block-block-27{
	background-repeat: no-repeat;
	overflow: hidden;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	min-height: 350px;
  margin: 0px 10px;
}
#block-block-1 img{
  margin: 0px 25px;
}
#block-block-1 .block-title{
  text-align: center;
  font-size: 3vw;
  font-weight: 100;
  margin-top: 10%;
  text-transform: uppercase;
  margin-bottom: 35px;
}
/* Afbeelding mobiel geschikt maken */
#block-block-27{
	background-image: url(/sites/all/themes/workatweb/images/website-mobiel-geschikt-laten-maken.jpg);
}
/* Afbeelding contact */
#block-block-11{
	background-image: url(/sites/all/themes/workatweb/images/contact.jpg);
}
#block-block-15{
	background-image: url(/sites/all/themes/workatweb/images/goedgevonden-zoekmachine-optimalisatie-hoogezand-sappemeer-kolham-winschoten-veendam.jpg);
}
#block-block-11,
#block-block-15{
	background-repeat: no-repeat;
	overflow: hidden;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	min-height: 350px;
  margin: 0px 10px;
}
#block-block-15 .subtitelcontact{
	color: #000;
}
#block-block-9 h1,
#block-block-10 h1,
#block-block-11 h1,
#block-block-15 h1,
#block-block-16 h1,
#block-block-17 h1,
#block-block-18 h1,
#block-block-25 h1,
#block-block-27 h1{
  color: #fff;
  text-align: center;
  margin-top: 10%;
}
#block-block-11 h1,
.subtitelcontact{
	color: #babb10;
}
#block-block-25 h1{
	color: #000;
}
.subtitelcontact{
  font-weight: 200;
}
#block-block-11 strong{
	font-weight: 300;
}
#block-block-15 h1{
	color: #000;
}
.region-sidebar-first{
  margin: 15% 0px 25px 0px;
}
#block-block-1 img{
  margin: 0px 25px;
}
#block-block-1 .block-title{
  text-align: center;
  font-size: 3vw;
  font-weight: 100;
  margin-top: 10%;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.btn-default{
	margin-top: 15px;
}
.navbar-default .navbar-toggle{
	border: none;
	border-radius: 0px;
}
.navbar-toggle{
	margin-top: -75px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
  background-color: #000;
}
.footer,
.page-header{
	border-bottom: none;
	border-top: none;
}
.footer{
	text-align: center;
}
.page-node-43 h1,
.page-webdesign-bureau-hoogezand-sappemeer h1{
	margin-top: -15%;
	color: #000;
	text-align: center;
	font-weight: bold;
}
h1.page-header,
.submitted{
  display: none;
}
#block-block-1 a,
#block-block-8 a,
#block-block-13 a,
#block-block-14 a{
  border: 2px solid #fff;
  color: #fff;
  display: block;
  float: left;
  padding: 5px;
  text-align: center;
  width: 200px;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
}
#block-block-8 a,
#block-block-13 a,
#block-block-14 a{
	background-color: #deded9;
	color: #000;
	border: none;
	width: 150px;
}
#block-block-1 a:hover,
#block-block-8 a:hover,
#block-block-13 a:hover,
#block-block-14 a:hover{
  text-decoration: none;
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
   transition: all 0.3s ease 0s;
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
}
.region-quoteblock{
}
.region-quoteblock{
	background-color: #add031;
  color: #fff;
  text-align: center;
	background-image: url(/sites/all/themes/workatweb/images/kijkverder-2.jpg);
	background-repeat: no-repeat;
	background-position:  center bottom;
	-moz-background-position: center bottom;
	-webkit-background-position: center bottom;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  min-height: 200px;
}
#block-block-5 p{
	margin: 10% 0px;
}
#block-block-20 p{
	margin: 1%;
}
table td,
table th{
  text-align: center;
	padding: 15px;
  width: 20%;
}
table th{
	text-transform: uppercase;
}
table .even{
	background-color: #f1f1f1;
}
a.bestel{
	padding: 5px 15px;
	border: 2px solid #add031;
}
a.bestel:hover{
	text-decoration: none;
	background-color: #add031;
	color: #fff;
}
.page-node-7 table{
	text-align: center;
}
.form-control{
	border: 1px solid #ccc;
	margin: 25px 0px;
	border-top: none;
	border-left: none;
	border-right: none;
	font-size: 16px;
	background: #eee;
}
#edit-submitted-e-mailadres,
#edit-submitted-uw-mailadres{
  background-color: transparent;
	border: none;
	margin: 0px;
}
.webform-component-email{
	  background-color: #fff;
    background-image: none;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    vertical-align: middle;
    width: 100%;
	background: #eee;
}
.btn-default{
	background: #add031;
	margin: 15px 0px 15px 0px;
}
.btnfront{
	background-color: #ffb900;
	color: #fff;
}
.btnfront .fa{
	color: #fff;
}
.btnfront .fa:hover{
	color: #000;
}
#edit-submitted-aanvullende-opmerking,
.webform-component{
	margin: 15px 0px 15px 0px;
}
.button1{
	background: #fff;
}
#block-block-1 a.button1{
	color: #000;
}
.extra{
	margin: 15px 0px;
}
/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a {
    background-color: transparent;
}
#block-block-8 h1,
#block-block-13 h1,
#block-block-14 h1{
	margin-top: 12%;
}
#block-block-9 h1,
#block-block-10 h1,
#block-block-11 h1,
#block-block-15 h1,
#block-block-16 h1,
#block-block-17 h1,
#block-block-18 h1,
#block-block-27 h1{
	font-size: 26px;
	margin-top: 15%;
	font-weight: 300;
}
.blok1,
.blok2,
.blok3,
.blok4{
  padding: 0% 0% 5% 0%;
}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a {
    background-color: transparent;
}
.nav > li a{
	font-size: 13px;
}
#block-block-9 h1,
#block-block-10 h1,
#block-block-11 h1,
#block-block-15 h1,
#block-block-16 h1,
#block-block-17 h1,
#block-block-18 h1,
#block-block-27 h1{
	margin-top: 15%;
}
#block-block-8 h1,
#block-block-13 h1,
#block-block-14 h1{
	margin-top: 5%;
}
.blok1,
.blok2,
.blok3,
.blok4{
  padding: 25px 0px;
  width: 45%;
}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a{
    background-color: transparent;
}
.nav > li a{
	font-size: 12px;
}
.front h1,
.front .subtitelfront{
  font-size: 22px;
  font-weight: 300;
}
.nav > li{

}
.blok1,
.blok2,
.blok3,
.blok4{
	width: 100%;
}
#block-block-1 a{
	display: none;
}
.navbar-toggle{
	margin-top: 0px;
}
.region-sidebar-first {
    margin: 3% 0 25px;
    text-align: center;
}
.nav > li a{
	padding-left: 3px;
}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.page-portfolio .field-name-body p{
	font-size: 14px;
	text-align: center;
	font-weight: 300;
	border-bottom: 1px #ccc solid;
}
table td, table th{
	padding: 3px;
}
.front h1{
  padding-top: 0;
  font-size: 22px;
  font-weight: 300;
}
#block-block-5 p {
    margin: 25% 0;
}
.region-quoteblock{
	background-position: center top !important;
}
.nav > li{
  width: 100%;
}
.blok1 h2,
.blok2 h2,
.blok3 h2,
.blok4 h2{
  font-size: 22px;
}
.region-quoteblock {
    background-attachment: scroll;
}
.show-mobile{
	display: block;
}
#block-block-1{
	height: 300px !important;
}
#block-block-9 h1,
#block-block-10 h1,
#block-block-11 h1,
#block-block-15 h1,
#block-block-16 h1,
#block-block-17 h1,
#block-block-18 h1,
#block-block-27 h1{
	margin-top: 35%;
}
.navbar-toggle{
	margin-top: -75px;
}
.hiddenphone{
  display: none;
}
.page-node-43 h1,
.page-webdesign-bureau-hoogezand-sappemeer h1{
	margin-top: -45%;
	font-size: 22px;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
  .hiddenphone{
	  display: none;
  }
}