body{
	font-family: "Lato", sans-serif;
	color:#000;
}

a{
	color:#FFF;
}

img.grayscalez{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.bg-grayscale{
	-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(100%);
     filter: gray;
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

hr{
	border-top: 1px solid #000;
}

hr.case{
	border-top: 2px solid #000;
	margin-bottom:3px;
}
hr.short_red{
	border-top: 4px solid #E7183A;
	max-width: 80px;
}
hr.short_red_left{
	border-top: 4px solid #E7183A;
	max-width: 80px;
	margin-left:0;
}
.text-small{
	font-size:11px;
}
.text-bold{
	font-weight: bold;
}
.row{ margin-left: 0;margin-right:0;}

.f-left{
	float:left;
	clear:right;
}

.f-right{
	float:right;
}

.m-none {margin:0;}

.p-none {padding:0;}

.row-mrg{
	margin-left:15px;
	margin-right:15px;
}

.btn{
	border-radius:0px;
}

.btn.focus, .btn:focus{
	border-radius: 0px;
	color:#FFF;
	border-color: #FFF;
	outline: #FFF solid 4px;
}

.btn-white-border{
	background-color:#000;
	border-color: #FFF;
	padding: 10px 22px;
}

.btn-white-border:hover{
	color: #E7183A;
}

.btn-red{
	background-color:#E7183A;
	color:#FFF;
	padding: 10px 22px;
}

.btn-red:hover{
	color:#000;
	border-color:#000;
}

.btn-black{
	background-color:#000;
	color:#FFF;
	padding: 10px 22px;
}

.btn-black:hover{
	color:#E7183A;
	border-color:#FFF;
}

.btn-black-border{
	background-color:#FFF;
	border-color: #000;
	padding: 10px 22px;
}

.btn-sm-center{
	width: 220px;
	padding: 5px auto;
	font-size: .7em;
	text-align: center;
	text-transform: uppercase;
}

.btn-large-center{
	width: 100%;
	max-width: 270px;
	padding: 10px auto;
	text-align: center;
	text-transform: uppercase;
}

.btn-xlarge-center{
	width:100%;
	max-width: 390px;
	padding: 5px auto;
	text-align: center;
	text-transform: uppercase;
}

.btn-large-center:hover{
	color:#E7183A;
}


.mt-sm{margin-top:15px;}
.mt-md{margin-top:25px;}
.mt-lg{margin-top:50px;}
.mt-xlg{margin-top:75px;}
.mt-xxlg{margin-top:100px;}
.mb-sm{margin-bottom:10px;}
.mb-md{margin-bottom:15px;}
.mb-lg{margin-bottom:50px;}
.mb-xlg{margin-bottom:75px;}
.mt-none{margin-top: 0px;}
.mb-none{margin-bottom: 0px;}

.ml-sm{margin-left:15px;}
.ml-md{margin-left:25px;}
.ml-lg{margin-left:50px;}
.ml-xlg{margin-left:75px;}

.pl-sm{padding-left:15px;}
.pl-md{padding-left:25px;}
.pl-xl{padding-left:50px;}
.pl-xlg{padding-left:75px;}

@media screen and (max-width: 768px){
	.mt-lg{margin-top:25px;}
	.mb-lg{margin-bottom: 25px;}
	.mt-xlg{margin-top:35px;}
	.mb-xlg{margin-bottom:35px;}
}

.form-control{
	border-radius: 0px;
	border-color: #000;
	border: 0px;
}

.border-bottom{
	border-bottom: 2px solid black;
}

.text-left{text-align: left;}

.text-right{text-align: right;}

.text-weight-low{font-weight: 300;}

.text-extra-strong{font-weight: 900}

.section-text-light, .text-white{color:#FFF;}
.section-text-dark, .text-dark{color:#000;}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
   resize:vertical;
}

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset!important;
}

.form-control:focus {
    border: #000000 solid;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
    padding-left: 10px!important;
}

nav .container-fluid{
	margin-left: 5%;
	margin-right: 5%;
}

.navbar{
	min-height: 80px;
	border: none;
	margin-bottom: 0;
}

.navbar-default{
	background-image: none!important;
	box-shadow: none!important;
	background-color: #FFFFFF!important;
}

.navbar-nav>li>a {
	padding-top:30px;
	padding-bottom:30px;
	color:#000!important;
	font-size:16px;
	font-weight:600;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li.active>a:focus, .navbar-default .navbar-nav>li.active>a, .navbar-default .navbar-nav>li.active>a:hover{
	color: #E7183A!important;
	border-bottom: solid 4px #E7183A;
	padding-bottom: 26px;
}

@media screen and (max-width: 768px){
	.navbar-nav>li>a {
		padding-top:10px;
		padding-bottom:10px;
	}

	.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover,
	.navbar-default .navbar-nav>li.active>a:focus, .navbar-default .navbar-nav>li.active>a, .navbar-default .navbar-nav>li.active>a:hover{
		padding-bottom: 8px;
	}
}

/* Icon 1 */

#nav-icon1 {
  width: 24px;
  height: 18px;
  position: relative;
  margin: 31px 15px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #000000;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 8px;
}

#nav-icon1 span:nth-child(3) {
  top: 16px;
}

#nav-icon1.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: 35px;
}

#nav-icon1.open span:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.navbar-brand{
	height: 80px;
	padding: 20px 22px 0 0;
}

.navbar-brand img{
	max-height: 36px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a {
	background-image: none!important;
	background-color: #FFF!important;
	box-shadow: none!important;
}

/* ------ welkome section ------ */
.bgwrapper {
  height: 850px;  
  position: relative;
  overflow: hidden;
}

 .bg-homee {
    width: 100%;
    height: 850px;
    text-align: center;
    background-size: cover;
    background-position: center top;
    
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;

    transform: scale(1.1);
}

@media screen and (max-width:1500px){
	.bgwrapper {
	  height: 600px;
	}
	 .bg-homee {
	    width: 100%;
	    height: 600px;
	    position: absolute;
	    background-position: center center;
	    top: 0;
	    left: 0;
	    background-size: cover;
	    transform: scale(1.1);
	}
}

@media screen and (max-width:1200px){
	.bgwrapper {
	  height: 450px;
	}
	 .bg-homee {
	    width: 100%;
	    height: 450px;
	    position: absolute;
	    background-position: center center;
	    top: 0;
	    left: 0;
	    background-size: cover;
	    transform: scale(1.2);
	}
}

#fold-buttons{
	margin-top: 40px;
}

@media screen and (max-width: 768px){
	#abovefold{
		text-align: center;
	}

	#fold-buttons{
		margin-top: 10px;
	}
}

.bg-section{
    height: 600px;
    text-align: center;
    background-size: cover;
    background-position: center top;
}

.bg-section-quarter{
    height: 150px;
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.bg-section-half{
    height: 300px;
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.bg-section-half-50{
	width:50%;
	float:left;
    height: 300px;
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.bg-section-threequarter{
    height: 450px;
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.bg-section-white{
    height: auto;
    background-color:#FFF;
    color:#000;
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.bg-section-light{
    height: auto;
    background-color:#FFF;
    color:#000;
    text-align: left;
    background-size: cover;
    background-position: center center;
}

.bg-section-white h4{
    color:#000;
}

.bg-section-dark{
    height: auto;
    background-color:#000;
    color:#FFF;
    font-weight:bold;
    background-size: cover;
    background-position: center center;
}

.bg-section-red{
    height: auto;
    background-color:#E7183A;
    color:#FFF;
    font-weight:bold;
    background-size: cover;
    background-position: center center;
}

.bg-section-dark-line{
    height: auto;
    background-color:#000;
    color:#FFF;
    font-weight:bold;
    background-size: cover;
    background-position: center center;
}
.bg-section-dark-line h4,
.bg-section-dark h4{
    color:#FFF;
}

@media screen and (max-width: 991px){
	.bg-section-half-tablet{
	    height: 300px;
	    text-align: center;
	    background-size: cover;
	    background-position: center center;
	}

	.bg-section-quarter-tablet{
	    height: 150px;
	    text-align: center;
	    background-size: cover;
	    background-position: center center;
	}
}

@media screen and (max-width: 767px){
	.bg-section-half-mobile{
	    height: 300px;
	    text-align: center;
	    background-size: cover;
	    background-position: center center;
	}

	.bg-section-quarter-mobile{
	    height: 150px;
	    text-align: center;
	    background-size: cover;
	    background-position: center center;
	}
}

/*boxes and cards*/

.box-dark{
	min-height: 200px;
	color:#FFF;
	background-color:#000;
}

.box-dark-line{
	color:#FFF;
	background-color:#000;
}

.box-light{
	min-height: 200px;
	color:#000;
	background-color:#FFF;
}

.section-case .case-name, .section-case .case-tags, .section-case .case-cta{
	margin-top:50px;
}

.section-case .case-name{
	border-right: solid 2px white;
	padding-left:30px;
}

.section-case .case-name-dark{
	border-right: solid 2px black;
}

.section-case .case-tags{
	padding-left:30px;
	margin-top: 57px;
}

.section-case .case-tags span.line{
	width: 0px;
	height:2px;
	margin-bottom:3px;
	margin-right:7px;
	background-color:#FFF;
	display: inline-block;
	transition: width .1s ease-out;
  	-moz-transition: width .1s ease-out;
  	-webkit-transition: width .1s ease-out;
  	-o-transition: width .1s ease-out;
}

.section-case .case-tags p:hover > span.line{
	width: 20px;
	height:2px;
	margin-bottom:3px;
	margin-right:7px;
	background-color:#FFF;
	display: inline-block;
	transition: width .1s ease-out;
  	-moz-transition: width .1s ease-out;
  	-webkit-transition: width .1s ease-out;
  	-o-transition: width .1s ease-out;
}

.section-case .case-text{
	padding-left:30px;
	margin-top: 57px;
	font-weight: 300;
}

.section-case .case-cta{
	margin-top: 79px;
	margin-bottom:0px;
}

.col-sm-45{
	width:45%;
	display: inline-block;
}

@media screen and (max-width: 992px){
	.section-case .box-dark{
		min-height: 235px;
	}

	.section-case .case-cta{
		margin-top: 20px;
		padding-bottom:20px;
		text-align: center;
	}

	.section-case .case-name{
		padding-top:0px;
	}
}

@media screen and (max-width: 768px){
	.section-case .mt-lg{
		margin-top:15px;
	}
	.section-case .case-name{
		padding-top:20px;
		border-style: none;
		margin-top:0px;
	    border-bottom: solid 2px white;
    	max-width: 300px;
	}

	.section-case .case-name .case-name-dark-bottom{
		padding-top:20px;
		border-style: none;
		margin-top:0px;
	    border-bottom: solid 2px black!important;
    	max-width: 300px;
	}

	.bordbotblack{
		border-bottom: solid 2px black!important;
	}

	.section-case .case-tags{
		margin-top: 20px;
	}
}



.section-services img{
	max-width: 90px;
}

.section-services a{
	color: #000;
}

.section-services a:hover, .section-services a:focus, .section-services a.active{
	color: #E7183A;
	text-decoration: none;
}

.section-services a.active img#icon-red{
	display: inline-block;
}
.section-services a.active img#icon-black{
	display: none;
}
.section-services a img#icon-red{
	display: none;
}
.section-services a img#icon-black{
	display: inline-block;
}

.section-services div.active a{
	color: #E7183A;
}

.section-services h3.text-extra-strong::before{
	content: '+ ';
}

#webdesign, #ecommerce, #brand-identity, #marketing, #visuals{
	display:none;
}

section.section-services-blocks a{
	color:#000;
}

section.section-services-blocks a.collapsed:before{
	content:'+ ';
	left: -30px;
    width: 0px;
    position: relative;
    display: inline-block;
    color:#000000;
}

section.section-services-blocks a:hover.collapsed:before{
    color:#E7183A;
}

section.section-services-blocks a:before{
	content:'- ';
	left: -30px;
    width: 0px;
    position: relative;
    display: inline-block;
    color:#E7183A;
}

@media screen and (max-width: 992px){
	section.section-services-blocks a{
		font-size:22px;
	}
}

@media screen and (max-width: 768px){
	section.section-services-blocks a{
		font-size:18px;
	}
	section.section-services-blocks a.collapsed:before{
		left: -20px;
	}

	section.section-services-blocks a:before{
		left: -20px;
	}
}

section.section-services-blocks a:hover, section.section-services-blocks a:focus, section.section-services-blocks a.active:hover{
	text-decoration: none;
}

#webdesign.active, #ecommerce.active, #brand-identity.active, #marketing.active, #visuals.active{
	display:block;
}

section.section-team:hover, section.section-team.hover{
	background-image: url('../img/teamglitch5.png')!important;
	background-color: rgba(255,255,255,0.5)
}

section.kenny:hover, section.kenny.hover{
	background-image: url('../img/teamglitch5.png')!important;
	
}

section.caby:hover, section.caby.hover{
	background-image: url('../img/teamglitch5.png')!important;
	background-position: 82% center!important;
	
}

section.dennis:hover, section.dennis.hover{
	background-image: url('../img/teamglitch5.png')!important;
	background-position: 30% center!important;
	
}

section.gianni:hover, section.gianni.hover{
	background-image: url('../img/teamglitch5.png')!important;
	background-position: 5% center!important;
	
}

section.inez:hover, section.inez.hover{
	background-image: url('../img/teamglitch5.png')!important;
	background-position: 65% center!important;
	
}

section.mathias:hover, section.mathias.hover{
	background-image: url('../img/teamglitch5.png')!important;
	background-position: center right!important;
	
}

/*cases and cases block*/







.grid {
  background: #FFF;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer{
	width: 355px;
}
.grid-item {
  float: left;
  width: 355px;
  height: 300px;
  margin-bottom: 37.5px;
  background: #0D8;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item a{
	text-decoration: none;
}

.grid-item li > span.line{
	width: 0px;
	height:2px;
	margin-bottom:3px;
	margin-right:7px;
	background-color:#FFF;
	display: inline-block;
	transition: width .1s ease-out;
  	-moz-transition: width .1s ease-out;
  	-webkit-transition: width .1s ease-out;
  	-o-transition: width .1s ease-out;
}

.grid-item li:hover > span.line{
	width: 20px;
	height:2px;
	margin-bottom:3px;
	margin-right:7px;
	background-color:#FFF;
	display: inline-block;
	transition: width .1s ease-out;
  	-moz-transition: width .1s ease-out;
  	-webkit-transition: width .1s ease-out;
  	-o-transition: width .1s ease-out;
}

.grid-item--height2 h3{
	display: inline-block;
	padding-bottom: 15px;
	max-width: 355px;
	border-bottom: solid 2px white;
}

.grid-item--height2 li{
	display: block;
	margin: 5px auto;
	list-style: none;
	text-align: center;
}

.grid-item--height2 p{
	display: block;
	position: absolute;
	top: 450px;
	opacity: 0;
	width: 200px;
	left:50%;
	margin-left:-100px;
	text-align: center;
}

.grid-item--height2 span.triangle1{
	display: block;
	position: absolute;
	top: 410px;
	opacity: 0;
	width: 65px;
	left:50%;
	margin-left:-56px;
	text-align: center;
	border-top: solid 1px #FFF;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

.grid-item--height2 span.triangle2{
	display: block;
	position: absolute;
	top: 410px;
	opacity: 0;
	width: 65px;
	left:50%;
	margin-left:-10px;
	text-align: center;
	border-top: solid 1px #FFF;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.grid-item--height2:hover span.triangle1{
	top: 220px;
	opacity: 1;
	transition: top .25s ease-out;
  	-moz-transition: top .25s ease-out;
  	-webkit-transition: top .25s ease-out;
  	-o-transition: top .25s ease-out;
}

.grid-item--height2:hover span.triangle2{
	top: 220px;
	opacity: 1;
	transition: top .25s ease-out;
  	-moz-transition: top .25s ease-out;
  	-webkit-transition: top .25s ease-out;
  	-o-transition: top .25s ease-out;
}

.grid-item--height2:hover p{
	display: block;
	position: absolute;
	top: 260px;
	opacity: 1;
	width: 200px;
	left:50%;
	margin-left:-100px;
	text-align: center;
	transition: top .25s ease-out .25s;
  	-moz-transition: top .25s ease-out .25s;
  	-webkit-transition: top .25s ease-out .25s;
  	-o-transition: top .25s ease-out .25s;
  	transition: opacity .25s ease-out .25s;
  	-moz-transition: opacity .25s ease-out .25s;
  	-webkit-transition: opacity .25s ease-out .25s;
  	-o-transition: opacity .25s ease-out .25s;
}

.grid-item--width2 h3{
	display: inline-block;
	float: left;
	padding: 25px 25px 25px 35px;
	max-width: 355px;
	border-right: solid 2px white;
}

.grid-item--width2 ul{
	display: inline-block;
	margin: 15px 0 5px 25px;
	list-style: none;
	float: left;
}

.grid-item--width2 li{
	display: block;
	margin: 5px auto;
	list-style: none;
	text-align: left;
}

.grid-item--width2 p{
	display: inline-block;
	position: absolute;
	top: 350px;
	opacity: 0;
	width: 200px;
	left:70%;
	margin-left:-100px;
	text-align: center;
}

.grid-item--width2 span.triangle1{
	display: block;
	position: absolute;
	top: 310px;
	opacity: 0;
	width: 65px;
	left:70%;
	margin-left:-56px;
	text-align: center;
	border-top: solid 1px #FFF;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}

.grid-item--width2 span.triangle2{
	display: block;
	position: absolute;
	top: 310px;
	opacity: 0;
	width: 65px;
	left:70%;
	margin-left:-10px;
	text-align: center;
	border-top: solid 1px #FFF;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.grid-item--width2:hover span.triangle1{
	top: 70px;
	opacity: 1;
	transition: top .25s ease-out;
  	-moz-transition: top .25s ease-out;
  	-webkit-transition: top .25s ease-out;
  	-o-transition: top .25s ease-out;
}

.grid-item--width2:hover span.triangle2{
	top: 70px;
	opacity: 1;
	transition: top .25s ease-out;
  	-moz-transition: top .25s ease-out;
  	-webkit-transition: top .25s ease-out;
  	-o-transition: top .25s ease-out;
}

.grid-item--width2:hover p{
	display: block;
	position: absolute;
	top: 110px;
	opacity: 1;
	width: 200px;
	left:70%;
	margin-left:-100px;
	text-align: center;
	transition: top .25s ease-out;
  	-moz-transition: top .25s ease-out;
  	-webkit-transition: top .25s ease-out;
  	-o-transition: top .25s ease-out;
  	transition: opacity .25s ease-out .25s;
  	-moz-transition: opacity .25s ease-out .25s;
  	-webkit-transition: opacity .25s ease-out .25s;
  	-o-transition: opacity .25s ease-out .25s;
}

.gutter-sizer{
	width: 37.5px;
}

.grid-item--width2 { width: 747.5px; }
.grid-item--height2 { height: 640px; }

.bg-section-quarter-cases{ height: 150px;text-align: center;background-size: cover;background-position: center center;}
.bg-section-half-cases{height: 340px;text-align: center;background-size: cover;background-position: center center;}


@media screen and (max-width: 1200px) {
	.grid-sizer{
		width: 300px;
	}

	.gutter-sizer{
		width: 20px;
	}

	.grid-item {
	  float: left;
	  width: 300px;
	  height: 300px;
	  margin-bottom: 20px;
	  background: #0D8;
	  border-color: hsla(0, 0%, 0%, 0.7);
	}

	.grid-item--width2 { width: 620px; }
	.grid-item--height2 { height: 620px; }
	
	.bg-section-quarter-cases{ height: 150px;text-align: center;background-size: cover;background-position: center center;}
	.bg-section-half-cases{height: 320px;text-align: center;background-size: cover;background-position: center center;}
}

@media screen and (max-width: 992px) {
	.grid-sizer{
		width: 230px;
	}

	.gutter-sizer{
		width: 15px;
	}

	.grid-item {
	  float: left;
	  width: 230px;
	  height: 300px;
	  margin-bottom: 15px;
	  background: #0D8;
	  border-color: hsla(0, 0%, 0%, 0.7);
	}

	.grid-item--width2 { width: 475px; }
	.grid-item--height2 { height: 615px; }

	.bg-section-quarter-cases{ height: 150px;text-align: center;background-size: cover;background-position: center center;}

	.bg-section-half-cases{height: 315px;text-align: center;background-size: cover;background-position: center center;}
	
}

@media screen and (max-width: 768px){
	.grid-sizer{
		width: 100%;
	}

	.gutter-sizer{
		width: 15px;
	}

	.grid-item {
	  float: left;
	  width: 100%;
	  height: 300px;
	  margin-bottom: 15px;
	  background: #0D8;
	  border-color: hsla(0, 0%, 0%, 0.7);
	}

	.grid-item--width2 { width: 100%; }
	.grid-item--height2 { height: 615px; }

	.bg-section-quarter-cases{ height: 150px;text-align: center;background-size: cover;background-position: center center;}

	.bg-section-half-cases{height: 315px;text-align: center;background-size: cover;background-position: center center;}
}





section.section-case section.bg-section-half-50 div.case-block-layover{
	background: rgba(200, 156, 203, 0);
	display: none;
}

section.section-case section.bg-section-half-50 div.case-block-layover img{
	padding-top:100px;
}

section.section-case section.bg-section-half-50:hover div.case-block-layover{
	background: rgba(231, 24, 58, 0.7);
	height: 300px;
	display: block;
}

section.case-block{
	position: relative;
}

div.case-block-web-url{
	height: 450px;
}

div.case-block-web-url img{
	margin-top: 75px;
}

div.case-block-web-url a{
	color: #000;
	text-decoration: none;
}

div.case-block-web-url p:nth-child(2){
	margin-top: 35px;
}

div.case-block-web-url h4{
	margin-top: 50px;
}

div.case-block-web-url p:nth-child(4){
	margin-top: 25px;
	padding:15px 0px;
	border-top:solid #000 2px;
	border-bottom:solid #000 2px;
	max-width: 300px;
	text-align: center;
	display: inline-block;
}

.arrow-down{
	width: 0; 
  	height: 0; 
  	border-left: 5px solid transparent;
  	border-right: 5px solid transparent;
    top: 13px;
    position: relative;
  	border-top: 5px solid #000;
  	margin-left: 10px;
  	transition: top .1s ease-out;
  	-moz-transition: top .1s ease-out;
  	-webkit-transition: top .1s ease-out;
  	-o-transition: top .1s ease-out;
}

div.case-block-web-url h4:hover .arrow-down{
	top: 20px;
	transition: top .1s ease-out;
  	-moz-transition: top .1s ease-out;
  	-webkit-transition: top .1s ease-out;
  	-o-transition: top .1s ease-out;
}

section.case-block p.label-left{
	font-size: 20px;
	padding: 10px 50px 10px 12%;
	color: #FFF;
	background-color: #000;
	max-width: 400px;
	display: inline-block;
	float:left;
	position: absolute;
    z-index: 2;
    left: 0;
    top: 50px;
}

section.case-block-logo p.label-left{
	font-size: 20px;
	padding: 10px 50px 10px 12%;
	color: #FFF;
	background-color: #000;
	max-width: 400px;
	display: inline-block;
	float:left;
	position: absolute;
    z-index: 2;
    left: 0;
    top: -30px;
}

section.case-block p.label-right{
	font-size: 20px;
	padding: 10px 12% 10px 50px;
	color: #FFF;
	background-color: #000;
	max-width: 400px;
	display: inline-block;
	float:right;
	position: absolute;
    z-index: 2;
    right: 0;
    top: 50px;
}

section.case-block img.icon-left{
	max-width: 400px;
	display: inline-block;
	float:left;
	position: absolute;
    z-index: 2;
    left: 30px;
    bottom: 20px;
}

section.case-block p.icon-left-text{
	max-width: 400px;
	display: inline-block;
	float:left;
	position: absolute;
    z-index: 2;
    left: 160px;
    bottom: 65px;
}

section.case-block img.icon-right{
	max-width: 400px;
	display: inline-block;
	float:right;
	position: absolute;
    z-index: 2;
    right: 30px;
    bottom: 20px;
}

section.case-block p.icon-right-text{
	max-width: 400px;
	display: inline-block;
	float:right;
	position: absolute;
    z-index: 2;
    right: 160px;
    bottom: 65px;
}

a.blog-link:hover{
	text-decoration: none;
}

section.bg-section-blog{
	width: 100%;
    height: 200px;
    text-align: center;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

section.bg-section-blog div.blog-layover{
	width: 100%;
	height: 200px;
	background: rgba(255,255,255,0.55);
	transition: background .35s ease-out;
  	-moz-transition: background .35s ease-out;
  	-webkit-transition: background .35s ease-out;
  	-o-transition: background .35s ease-out;
}

section.bg-section-blog div.blog-layover p:nth-child(1){
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 10px;
	padding-top: 40px;
	color: #000;
	text-shadow: 0.8px 0px 1px rgba(255, 255, 255, 0.8);
	max-width: 80%;
	margin: auto auto;
}

section.bg-section-blog div.blog-layover p:nth-child(1):hover{
	text-decoration: underline;
}

section.bg-section-blog:hover div.blog-layover p:nth-child(1){
	border-bottom: solid 1px #E7183A;
	transition: border-bottom .45s ease-out;
  	-moz-transition: border-bottom .45s ease-out;
  	-webkit-transition: border-bottom .45s ease-out;
  	-o-transition: border-bottom .45s ease-out;
}

section.bg-section-blog div.blog-layover p:nth-child(2){
	text-align: center;
	font-size: 10px;
	padding-bottom: 10px;
	padding-top: 5px;
	color: #000;
	opacity: 0;
	margin-left: -100px;
}

section.bg-section-blog:hover div.blog-layover p:nth-child(2){
	opacity: 1;
	transition: opacity .85s ease;
  	-moz-transition: opacity .85s ease;
  	-webkit-transition: opacity .85s ease;
  	-o-transition: opacity .85s ease;
  	margin-left: 0px;
	transition: margin-left .45s ease-out;
  	-moz-transition: margin-left .45s ease-out;
  	-webkit-transition: margin-left .45s ease-out;
  	-o-transition: margin-left .45s ease-out;
}

section.bg-section-blog:hover div.blog-layover{
	background: rgba(255,255,255,0.8);
	opacity: 1;
}

p.blog-date{
	font-size: .85em;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 12px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px solid #ddd;
}

.label{
	color:#000;
	padding: 3px 6px;
	border: solid 1px #000;
	border-radius: 0;
	font-size: 14px;
	text-transform: lowercase;
	font-weight: 500;
	margin:5px;line-height: 2.5;
}

#blog-line-tr td{
	cursor: pointer;
}

#blog-line-tr td p:nth-child(1){
	font-size: 16px;
	font-weight: 500;
}

#blog-line-tr td p:nth-child(2){
	border-bottom: solid 1px white;
	width: 180px;
	margin-left: -300px;
	transition: margin-left .35s ease-out;
  	-moz-transition: margin-left .35s ease-out;
  	-webkit-transition: margin-left .35s ease-out;
  	-o-transition: margin-left .35s ease-out;
}

#blog-line-tr:hover td p:nth-child(2){
	border-bottom: solid 1px red;
	margin-left: 0px;
	transition: margin-left .35s ease-in;
  	-moz-transition: margin-left .35s ease-in;
  	-webkit-transition: margin-left .35s ease-in;
  	-o-transition: margin-left .35s ease-in;
}

#blog-line-tr td p:nth-child(3){
	font-size: 10px;
	opacity: 0;
}

#blog-line-tr:hover td p:nth-child(3){
	opacity: 1;
}















/*eu popup*/
/*eu popup*/
/*eu popup*/
/*eu popup*/
/*eu popup*/
/*eu popup*/

.clearfix {
	clear: both;
}

.eupopup-container {
	background-color: rgba(25, 25, 25, 0.9);
	color: #efefef;
	padding: 5px 20px;
	font-size: 12px;
	line-height: 1.2em;
	text-align: center;
	display: none;
	z-index: 9999999;
}

.eupopup-container-top,
.eupopup-container-fixedtop {
	position: absolute;
	top: 0; left: 0; right: 0;
}

.eupopup-container-fixedtop {
	position: fixed;
}

.eupopup-container-bottom {
	position: fixed;
	bottom: 0; left: 0; right: 0;
}

.eupopup-container-bottomleft {
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 300px;
}

.eupopup-container-bottomright {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 300px;
}

.eupopup-closebutton {
	font-size: 16px;
	font-weight: 100;
	line-height: 1;
	color: #a2a2a2;
	filter: alpha(opacity=20);
	position: absolute;
	font-family: helvetica, arial, verdana, sans-serif;
	top: 0; right: 0;
	padding: 5px 10px;
}
.eupopup-closebutton:hover,
.eupopup-closebutton:active {
	color: #fff;
	text-decoration: none;
}

.eupopup-head {
	font-size: 1.2em;
	font-weight: bold;
	padding: 7px;
	color: #fff;
}

.eupopup-body {
	color: #a2a2a2;
}

.eupopup-buttons {
	padding: 7px 0 5px 0;
}

.eupopup-button_1 {
	color: #f6a21d;
	font-weight: bold;
	font-size: 14px;
}

.eupopup-button_2 {
	color: #f6a21d;
	font-weight: normal;
	font-size: 12px;
}

.eupopup-button {
	margin: 0 10px;
}

.eupopup-button:hover,
.eupopup-button:focus {
	text-decoration: underline;
	color: #f6a21d;
}

body .eupopup-color-inverse {
	color: #000;
	background-color: rgba(255, 255, 255, 0.9);
}

body .eupopup-color-inverse .eupopup-head {
	color: #000;
}

body .eupopup-style-compact {
	text-align: left;
	padding: 8px 30px 7px 20px;
	line-height: 15px;
}

body .eupopup-style-compact .eupopup-head,
body .eupopup-style-compact .eupopup-body,
body .eupopup-style-compact .eupopup-buttons {
	display: inline;
	padding: 0;
	margin: 0;
}

body .eupopup-style-compact .eupopup-button {
	margin: 0 5px;
}

/*eu popup end*/
/*eu popup end*/
/*eu popup end*/
/*eu popup end*/

/*FOOTER*/



footer {
  background: #202020;
  width: 100%;
  height: 570px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8em;
  text-align: center;
  display: block;
}

footer h5{
  color: #ffffff;
  text-transform: uppercase;
}

#footerwrap{
  background-color: #202020;
  width: 90%;
  height: 210px;
  margin-left: 5%;
  margin-right: 5%;
}

#footer-social{
  width: 100%;
  height: 150px;
  text-align: center;
}

#footer-social a{
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
}

#footer-social a:hover{
  color: #E7183A;
}

#footer-social img{
  margin-top: 20px;
  display: inline-block;
  margin-right: 10px;
}

#footer-sitemap{
  width: 100%;
  height: 210px;
  text-align: center;
  border-left: none;
}
#footer-sitemap ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer-sitemap ul li{
  display: block;
  margin-left: auto;
  margin-right: auto;
  list-style-type:none;
  text-align: center;
  margin-bottom: 7px;
}
#footer-sitemap a{
  color: #FFF;
  text-decoration: none;
  padding: 2px 5px 2px 5px;
  cursor: pointer;
}
#footer-sitemap a:hover{
  background-color: #E7183A;
}

p.footer{
  padding:0;
  margin:0 0 5px 0;
  font-size: 100%;
  color: #ffffff;
}
p.adres{
}
#footer-address{
  width: 100%;
  height: 210px;
  text-align: center; 
}

#footer-address a{
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
}

#footer-address a:hover{
  border-bottom: dashed 1px #FFF;
}

@media only screen and (min-width: 769px) {
  footer {
    height: 360px;
  }


  #footer{
    height: 360px;
  }

  #footer-social{
    width: 100%;
    max-width: 1000px;
    height: 150px;
    float: left;
    clear: right;
    text-align: left;
  }

  #footer-sitemap{
    width: 49%;
    height: 210px;
    float: right;
    text-align: left;
    border-right: none;
  }
  
  #footer-sitemap ul li{
    text-align: left;
    margin-left: 0px;
  }

  p.adres{
    margin-top: 10px;
    font-size: 100%;
  }

  #footer-address{
    width: 50%;
    height: 210px;
    text-align: left;
    float: left;
    clear: right;
  }
}

/* Small browser / iPad landscape */
@media only screen and (min-width: 1025px) {
  footer {
    height: 230px;
  }
  #footer{
    height: 230px;
  }
  #footer-social{
    width: 33%;
    height: 180px;
    float: left;
    clear: right;
    border-bottom: none;
    text-align:left;
  }

  #footer-sitemap{
    width: 33%;
    height: 180px;
    float: left;
    clear: right;
    text-align: left;
    border-bottom: none;
  } 
  #footer-sitemap h2{
    margin-left: 27 px;
  } 
  #footer-sitemap ul li{
    text-align: left;
  }

  #footer-address{
    width: 33%;
    height: 180px;
    float: left;
    text-align: left;
  }
}

/*END OF FOOTER*/