/*
Theme Name: ProjectBinder
Author: G2 Disseny.
*/

/* MAIN */

 * {
	margin:0;
	padding:0;
	border:0;
}

input[type="submit"],
button{
    -webkit-appearance: none;
}

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;
	font-style: normal;
	background-color: #fff;
	line-height: 180%;
	color: #111;
	font-weight: 300;
}

p {
	margin:0 0 30px 0;
}

li {
	list-style:none;
}

a{
	color: #00CBF9;
	text-decoration:none;
	cursor: pointer;

	-webkit-transition: background .3s ease-out, color .3s ease-out;
	transition: background .3s ease-out, color .3s ease-out;
}

a:hover {
	color: #111;
}

strong {
	font-weight:600;
}

::selection {
	background: #111;
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 20px;
	font-weight: 300;
}
h1, h2{
	font-size: 32px;
	line-height: 130%;
}
h2 strong{
	font-weight: 700;
}
h3 {
	font-size: 25px;
	line-height: 140%;
}
h4 {
	margin-bottom: 0;
	font-size: 25px;
	line-height: 130%;
}

.text-upper{
	text-transform: uppercase;
}

input, select, textarea {
	font-family: 'Ubuntu', sans-serif;
	font-size:16px;
	font-style:normal;
}

img{
	max-width: 100%;
	height: auto;
}

/* GRID */

.grid {
	clear: both;
	margin-left: -35px;
}
.grid:after{
	content: '';
	display: block;
	clear: both;
}
.grid .col{
	position: relative;
	float: left;
	padding: 0 0 35px 35px;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transition: width 0.3s ease-out;
	transition: width 0.3s ease-out;
}
.grid.one-row .col{
	padding-bottom: 0;
}
.grid .col.n-1 {
	width: 8.33%;
}
.grid .col.n-2 {
	width: 16.66%;
}
.grid .col.n-2-5 {
	width: 20%;
}
.grid .col.n-3 {
	width: 25%;
}
.grid .col.n-4 {
	width: 33.33%;
}
.grid .col.n-5 {
	width: 41.66%;
}
.grid .col.n-6 {
	width: 50%;
}
.grid .col.n-7 {
	width: 58.33%;
}
.grid .col.n-8 {
	width: 66.66%;
}
.grid .col.n-9 {
	width: 75%;
}
.grid .col.n-10 {
	width: 83.33%;
}
.grid .col.n-11 {
	width: 91.66%;
}
.grid .col.n-12 {
	width: 100%;
}

/* MAIN */

.inner {
	position:relative;
	width: 1024px;
	margin: 0 auto;
}
.inner-small {
	width: 730px;
}

/* TEXTS */

.title-border{
	position: relative;
	margin-bottom: 50px;
	padding-bottom: 15px;
	text-align: center;
	font-weight: bold;
}
.title-border:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 50px;
	height: 4px;
	background-color: #00CBF9;
	transform: translateX(-50%);	
}

/* HEADER */

#header {
	position: relative;
	background: #fff;
	overflow: hidden;
}

#header .logo {
	float: left;
}
#header .inner{
	display: flex;
	align-items: center;
	height: 125px;
}

/* BT-MOBILE */

.bt-mobile{
	display: none;
	position: absolute;
	top: 29px;
	right: 275px;
	width: 40px;
	height: 40px;
	background-color: #202020;
	cursor: pointer;

	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.bt-mobile:before,
.bt-mobile:after{
	content: '';
	display: block;
	position: absolute;
	top: 9px;
	left: 8px;
	width: 24px;
	height: 4px;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff; 
	cursor: pointer;
}
.bt-mobile:after{
	top: 27px;
	border-bottom: 0;
}

/* MENU-MAIN */

.menus {
	flex: 1;
	font-size: 14px;
	text-align: right;
}
.menus li {
	position:relative;
	display: inline-block;
	padding-right: 20px;
}
.menus li:after {
	content: '|';
	position: absolute;
	top: -1px;
	right: 7px;
}
.menus li:last-child{
	padding-right: 0;
}
.menus li:last-child:after {
	display: none;
}
.menus a {
	color: #111;
	text-decoration:none;
}
.menus a:hover {
	color: #888;
}

.menu-top {
	font-weight: 300;
}
.menu-main {
	position: relative;
	text-transform: uppercase;
}
.menu-main .current-menu-item a,
.menu-lang .current-lang a{
	font-weight: bold;
	color: #00CBF9;
}

/* MENU-LANG */

.menu-main {
	position: relative;
	text-transform: uppercase;
}

/* BG-DIAGONAL */

.bg-diagonal {
	position: relative;
	padding: 300px 0;
	background-repeat: no-repeat;
	background-position: center;
    background-size: cover;
    overflow: hidden;
}
.bg-diagonal.bg-gray {
	background-color: #F7F7F8;
}
.bg-diagonal:before,
.bg-diagonal:after {
	background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: '';
    height: 18vw;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 1;
}
.bg-diagonal:before {
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon fill="white" points="0 100 0 0 100 0"/%3E%3C/svg%3E');
	top: 0;
}
.bg-diagonal:after {
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cpolygon fill="white" points="100 0 100 100 0 100"/%3E%3C/svg%3E');
	bottom: -1px;
}

/* BLOCK-CONTENT */

.block-content {
    position: relative;
    width: 100%;
    padding: 50px 0;
}
.block-content.style-black {
	background-color: #202020;
	color: #fff;
}
.block-content.style-img {
	background: url(images/bg-box.jpg) repeat;
}
.block-content.style-top {
	margin-top: -100px;
	padding-top: 150px;
}
.block-content.p-0 {
	padding: 0;
}
.block-content p:last-child {
	margin-bottom: 0;
}

/* BLOCK-HEADER */

.block-header{
	display: flex;
	align-items: flex-end;
	position: relative;
	height: 800px;
	padding: 0;
}
.block-header.h-0{
	height: auto;
	padding-top: 25px;
}
.block-header:before {
	display: none;
}
.block-header .inner {
	z-index: 2;
}
.block-header .box-txt {
	padding: 35px;
	background:#293342;
	color: #fff;
	border-radius: 15px;
}
.block-header .box-txt * {
	margin: 0;
}

.block-header video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* BLOCK-BOX*/

.box-desc p{
	position: relative;
	z-index: 10;
}

.block-box:nth-of-type(even){
	padding: 0;
}
.block-box:nth-of-type(even):before,
.block-box:nth-of-type(even):after{
	display: none;
}

.block-box.color-2{
	background: #F7F7F8;
}

/* BODY */

body.home #block-2{
	padding-bottom: 0;
}
body.home #block-3{
	background-image: none!important;
}
/*
body.home #block-3 .bg-home{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #F7F7F8;
}
*/
body.home #block-3 .photo-home{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	object-fit: cover;
}
body.home #block-3 .photo-home img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.home #block-3 .inner{
	z-index: 2;
}
body.home #block-5{
	padding-bottom: 100px;
}
body.home #block-5 img{
	position: relative;
	z-index: 3;
}

.block-header + .block-box {
	padding-top: 50px;
}
.block-header + .block-box .list-categories{
	top: 35px;
}
.block-header + .block-contact{
	padding-top: 50px;
	overflow: auto;
}
.block-header + .block-contact:before{
	display: none;
}

/* LIST-CATEGORIES */

.list-categories {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
.list-categories .box-item{
	width: 100%;
}
.list-categories br{
	display: none;
}
.list-categories p{
	margin-bottom: 0;
}
.list-categories h4{
	margin-bottom: 0;
}
.list-categories h4 strong{
	color: #00CBF9;
}
.list-categories li{
	display: flex;
}
.list-categories .box-image{
	display: flex;
	align-items: flex-end;
	min-height: 66px;
	margin-bottom: 20px;
}

.list-categories li.style-1{
	text-align: center;
}
.list-categories li.style-1 .box-image{
	display: flex;
	align-items: flex-end;
    justify-content: center;
	height: 80px;
}

/* LIST-TEAM */

.list-team {
	display: flex;
	flex-wrap: wrap;
}
.list-team .desc {
	font-size: 15px;
	line-height: normal;
}
.list-team .desc p {
	margin-bottom: 15px;
}
.list-team .readmore {
	margin-bottom: 20px;
}
.list-team .photo {
	position: relative;
	margin-bottom: 20px;
	background: #00CBF9;
}
.list-team .photo img{
	display: block;
	width: 100%;
	transition: all 0.3s ease-in-out;
}
.list-team .photo img:hover{
	opacity: 0.75;
}
.list-team .photo:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background: #00CBF9;
	z-index: 1;
}
.list-team h3 {
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 400;
}
.list-team .workstation {
	position: relative;
	margin-bottom: 15px;
	padding-bottom: 15px;
	color: #00CBF9;
	line-height: normal;
}
.list-team .workstation:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 70px;
	height: 4px;
	background: #00CBF9;
}
.list-team .bt-ico {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 3px;
	border-radius: 8px;
	background: #00CBF9;
	text-align: center;
	transition: all 0.3s;
}
.list-team .bt-ico:hover {
	background: #111;
}
.list-team .bt-ico svg {
	position: relative;
	top: 1px;
	vertical-align: middle;
}

/* BOX-REFERENCE */

.block-reference {
	padding-top: 100px;
}
.block-reference:before {
	top: 200px;
}
.block-reference .box-white {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background: #fff;
}
.block-reference:nth-child(odd){
	background: #F7F7F8;
}
.block-reference:nth-child(even){
	padding: 0;
}
.block-reference:nth-child(even):before,
.block-reference:nth-child(even):after{
	display: none;
}

.block-reference .box-reference{

}

.box-reference{
	position: relative;
	text-align: center;
	z-index: 3;
}
.box-reference .logo{
	margin-bottom: 20px;
}
.box-reference .slider-default{
	margin-bottom: 20px;
}
.box-reference h4{
	margin-bottom: 30px;
}
.box-reference h4:last-child{
	margin-bottom: 0;
}
.box-reference h4 strong{
	color: #00CBF9;
}

/* BLOCK-CONTACT */

.block-contact{
	padding-top: 300px;
	padding-bottom: 300px;
}

.map{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 55vw;
	z-index: 4;
}
.map .marker{
	fill: #00CBF9;
	transition: all 0.3s ease-in-out;
}
.map .marker:hover{
	fill: #111;
}
.map .europe{
	fill: #556271;
}

.box-contact{
	position: relative;
	text-align: center;
	z-index: 5;
}
.box-contact.style2{
	padding: 50px 0;
}
.box-contact a{
	color: #111;
}

.list-address li{
	margin-bottom: 30px;
}
.list-address svg{
	fill: #00CBF9;
	transition: all 0.3s ease-in-out;
}
.list-address svg:hover{
	fill: #111;
}

/* WPCF7 */

.wpcf7-form .check{
	margin: -10px 0 40px 0;
	font-size: 15px;
	text-indent: -10px;
}
.wpcf7-form p,
.wpcf7-form .file-input{
	margin-bottom: 20px;
}
span.wpcf7-list-item{
	margin: 0!important;
}

/* TEXT-INPUT */

.text-input{
	width: 100%;
	height: 50px;
	padding: 0 20px;
	background-color: #EFEFF1;
	font-weight: 300;
	border-radius: 50px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
textarea.text-input{
	display: block;
	height: 150px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-radius: 25px;
}
.text-input:focus{
	outline: none;
}

/* FILE-INPUT */

.file-input {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: #EFEFF1;
	font-weight: 300;
	border-radius: 50px;
	font-size: 16px;
	line-height: 50px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    overflow: hidden;
}
.file-input .wpcf7-form-control-wrap{
	display: block;
	position: absolute;
	width: 100%;
	height: 50px;
	z-index: 2;
}
.file-input [type=file] {
	cursor: inherit;
	display: block;
	width: 100%;
	height: 50px;
	opacity: 0; 
}
.file-input span:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 20px;
}
.file-input span:nth-child(2) {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 20px;
	background: #00CBF9;
	border-radius: 50px;
}

.file-input [type=file] {
    cursor: pointer;
}

/* BUTTON */

.button{
	display: inline-block;
	min-width: 200px;
	height: 60px;
	padding: 0 20px;
	line-height: 60px;
	font-size: 21px;
	text-align: center;
	color: #111;
	background-color: #00CBF9;
	border: none;
	border-radius: 60px;
	cursor: pointer;
	box-sizing: content-box;
	transition: all 0.3s ease-in-out;
}
.button.button-small{
	height: 30px;
	padding: 0 15px;
	line-height: 30px;
}
.button.style-light{
	background: #EFEFF1;
	color: #111;
}
.button:focus{
	outline: none;
}
.button:hover{
	background-color: #111;
	color: #fff;
}

/* BOX-COOKIES */

.box-cookies{
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 30px;
	padding: 5px 50px;
	text-align: center;
	background: #000;
	font-size: 13px;
	color: #AEAEAE;
	z-index: 999;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.box-cookies a{
	color: #AEAEAE;
}
.box-cookies .bt-close{
	position: absolute;
	top: 6px;
	left: 6px;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	cursor: pointer;

	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.box-cookies .bt-close:after{
	content: '×';
	display: block;
	height: 18px;
	line-height: 17px;
	font-size: 14px;
	font-weight: bold;
}
.box-cookies .bt-close:hover{
	background: #fff;
	color: #444;
}

/* BT-TOP */

.bt-top{
	display: none;
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 40px;
	height: 40px;
	line-height: 36px;
	font-size: 20px;
	text-align: center;
	color: #fff;
	background-color: #202020;
	cursor: pointer;
	z-index: 100;

	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}
.bt-top:hover{
	opacity: 0.75;
}
/* SWIPER */

.swiper-container {
	width: 100%;
	height: 100%;
}

/* SLIDER-DEFAULT */

.slider-default {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
	z-index: 1;
}
.slider-default .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    z-index: 1;
}
.slider-default .swiper-slide {
	flex-shrink: 0;
	position: relative;
	width: 100%;
	padding-top: 60%;
	background-repeat: no-repeat;
	background-position: center;
    background-size: cover;
}

/* SLIDER-CAROUSEL */

.box-slider {
	position: relative;
}
.swiper-carousel {
	position: relative;
    overflow: hidden;
}
.swiper-carousel .swiper-wrapper {
	position: relative;
	flex-wrap: nowrap;
    position: relative;
    display: -ms-flexbox;
	display: flex;
    box-sizing: content-box;
}
.swiper-carousel .swiper-slide {
	flex-shrink: 0;
}

/* SWIPER BUTTONS */

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat
}
.swiper-button-prev,.swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2300CBF9'%2F%3E%3C%2Fsvg%3E");
    left: -50px;
    right: auto
}
.swiper-button-next,.swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2300CBF9'%2F%3E%3C%2Fsvg%3E");
    right: -50px;
    left: auto
}
.swiper-button-next.pos-top,
.swiper-button-prev.pos-top{
	top: 115px;
}

/* BLOG */

.entry{
	text-align: justify;
}
.entry ul,
.entry ol{
	margin-bottom: 30px;
}
.entry li{
	list-style-position: inside;
}
.entry ul li{
	list-style-type: disc;
}
.entry ol li{
	list-style-type: decimal;
}

.list-post{
	display: flex;
    flex-wrap: wrap;
}
.list-post h3{
	font-size: 20px;
}
.list-post a{
	color: #111;
}
.list-post a:hover {
    color: #888;
}
.list-post .date{
	color: #bbb;
	font-size: 15px;
}
.list-post figure{
	margin-bottom: 10px;
	background-color: #00CBF9;
}
.list-post img{
	display: block;
	transition: all 0.3s;
}
.list-post img:hover{
	opacity: 0.7;
}

.post-info{
	position: relative;
	top: -20px;
	text-align: center;
}
.post-info .date{
	padding-bottom: 10px;
	color: #bbb;
}
.post-info .share{
	color: #bbb;
}

.share span{
	margin-right: 15px;
	color: #bbb;
}
.list-share{
	display: inline-flex;
}
.list-share li{
	margin: 0 5px;
}
.list-share svg{
	transition: all 0.3s;
}
.list-share svg:hover{
	fill: #00CBF9;
}

.navigation{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.navigation a{
	display: inline-block;
    min-width: 100px;
    height: 50px;
    margin: 0 10px;
    padding: 0 20px;
    line-height: 50px;
    font-size: 21px;
    text-align: center;
    color: #111;
    background-color: #00CBF9;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    box-sizing: content-box;
    transition: all 0.3s ease-in-out;
}
.navigation a:hover {
    background-color: #111;
    color: #fff;
}

/* FOOTER */

#footer{
	padding-bottom: 30px;
	border-bottom: 10px solid #00CBF9;
	text-align: center;
	font-size: 15px;
}
#footer .logo{
	margin-bottom: 20px;
}
#footer a{
	color: #000;
}

/* WORDPRESS */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}


/* MEDIA QUERIES */

@media screen and (max-width:1100px) {

	/* MAIN */

	.inner {
		width: auto;
		padding-left: 30px;
		padding-right: 30px;
	}

}

@media screen and (max-width:1023px) {

	/* FONTS */

	body{
		font-size: 16px;
	}
	h1, h2 {
		font-size: 22px;
	}
	h4 {
		font-size: 20px;
	}
	.button{
		font-size: 20px;
	}

	/* SWIPER */

	body.home .pos-top {
		display: none;
	}

	.swiper-button-prev {
		left: 15px;
	}
	.swiper-button-next {
		right: 15px;
	}

	/* HEADER */

	#header .inner {
	    height: 100px;
	}
	#header .logo img,
	#footer .logo img {
		width: 200px;
		height: auto;
	}

	/* MENU-MOBILE */

	.bt-mobile {
		display: block;
	}

	.menus {
	    display: flex;
	    flex-direction: column;
		position: fixed;
		top: 0;
		bottom: 0;
		right: -250px;
		width: 250px;
		height: 100%;
		background-color: #202020;
		z-index: 999;

		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
	.menus.open {
		right: 0;
	}

	.menus li {
		display: block;
		width: 100%;
		margin: 0;
		border-bottom: 1px solid #3A3632;
		text-align: left;
		text-transform: uppercase;
		background: transparent;
	}
	.menus li:after{
		display: none;
	}
	.menus li a {
		display: block;
		height: auto;
		padding: 15px 20px;
		line-height: normal;
		color: #fff;
	}
	.menus li a:hover {
		color: #fff;
		background-color: #3A3632;
	}
	.menu-main .current-menu-item a:before {
		display: none;
	}

	/* BLOCKS */

	.bg-diagonal {
		padding: 150px 0;
	}

	.block-header{
		height: 400px;
		padding-bottom: 0;
	}
	.block-header .box-txt{
		padding: 20px;
	}

	.block-content {
		padding: 25px 0;
	}

}

@media screen and (max-width:768px) {

	/* BLOCKS */

	.bg-diagonal {
		padding: 100px 0;
	}

	.block-header{
		height: 300px;
		padding-bottom: 0;
	}

	/* GRID */

	.grid .col.n-4 {
		width: 50%;
	}

	.block-header .box-txt h2{
		font-size: 18px;
	}

}

@media screen and (max-width:480px) {

	.inner {
	    padding-left: 20px;
	    padding-right: 20px;
	}

	/* GRID */

	.grid {
	    margin-left: 0;
	}
	.grid .col {
		float: none;
		padding-left: 0;
	}
	.grid .col.n-4 {
		width: 100%;
	}

	/* BLOCKS*/

	.block-content {
	    padding: 35px 0;
	}

	.box-reference .logo img {
		width: 25vw;
	}

	.block-header {
		background-position: center!important;
	}

}