@charset "UTF-8";

/* Self-hosted Source Sans Pro (faster than Google Fonts CDN) */
@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/source-sans-pro-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/source-sans-pro-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/source-sans-pro-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans Pro';
	src: url('../fonts/source-sans-pro-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Font Awesome loaded from css/font-awesome.min.css */
/*========================================================
						Main Styles
=========================================================*/
html, body {
	overflow-x: hidden;
	max-width: 100%;
}
*, *::before, *::after {
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
}
body {
	color: #fff;
	font: 400 18px/22px 'Source Sans Pro', sans-serif;
        font-display: swap;
	-webkit-text-size-adjust: none;
	background: #fff;
}
img {
	max-width: 100%;
	height: auto;
}
h2 {
	font-size: 9.5vw;
	line-height: 110%;
	font-weight: 900;
	letter-spacing: 1px;
	color: #92CAAF;
	margin: 0;
}
h2.name{
	font-size: 7vw;
	line-height:110%;
}
h4.mod1 {
	font-size: 1.7vw;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 100%;
	color: #9DAEB5;
	margin-left: 30px;
	font-weight: 400;
	position: relative;
	display: inline-block;
}
h4.mod1:before {
	content: '';
	display: block;
	background: #f7f398;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 7.5px);
	left: -28px;
}

@media (max-width: 767px) {
	h2 {
		font-size: 15vw;
	}
	h2.name {
		font-size: 10vw;
	}
	h4.mod1 {
		font-size: 5vw;
	}
}
@media (min-width: 1200px) {
	h2 {
		font-size: 114px;
	}
	h2.name{
		font-size: 84px;
	}
	h4.mod1 {
		font-size: 20.4px;
	}
}

a {
	color: inherit;
	text-decoration: none;
	-moz-transition: color .3s, background-color .3s;
	-o-transition: color .3s, background-color .3s;
	-webkit-transition: color .3s, background-color .3s;
	transition: color .3s, background-color .3s;
}
a:focus {
	outline: none;
}
a:active {
	background-color: transparent;
}
a:hover {
	color: #92CAAF;
}
strong {
	font-weight: 700;
}
.fa {
	line-height: inherit;
}
[class*='fa-']:before {
	font-weight: 400;
	font-family: 'Source Sans Pro', sans-serif, "FontAwesome";
}
.lt-ie9 .page {
	min-width: 1200px;
}
hr {
	border: none;
	height: 1px;
	background: #fff;
}
main {
	display: block;
}
.img_section {
	overflow: hidden;
}
i {
	display: inline-block;
	color: #92caaf;
	font-size: 120px;
	line-height: 120px;
}
/*========================   Menu   ==========================*/
.nav {
	text-align:center;

	-webkit-user-select:   none;
	-moz-user-select:      none;
	-ms-user-select:       none;
	user-select:           none;
}
#menu {
	left: 0;
	top: 0; 
	z-index: 10;
	width: 100%;
	height: 80px;
	background-color: white;
}
#menu_container {
	height: 80px;
}
.sf-menu {
	display: inline-block;
	margin-top: 16px;
}
.sf-menu:before, .sf-menu:after {
	display: table;
	content: "";
	line-height: 0;
}
.sf-menu:after {
	clear: both;
}
.sf-menu > li {
	position: relative;
	float: left;
}
.sf-menu > li + li {
	position: relative;
	margin-left: 27px;
}
.sf-menu > li + li:before {
	position: absolute;
	display: inline-block;
	content: '/';
	font-size: 24px;
	font-weight: 900;
	padding: 15px 0px 16px;
	color: #FDF593;
	width: 30px;
	height: 30px;
	left: -28px;
	top: 0;
}
.sf-menu a {
	display: inline-block;
}
.sf-menu > li > a {
	color: #92CAAF;
	font-size: 24px;
	font-weight: 900;
	padding: 15px 23px 16px;
	letter-spacing: 2px;
}
.sf-menu > li.sfHover > a, .sf-menu > li > a:hover {
	color: #fff;
	background: #92CAAF;
}
.sf-menu > li.active > a {
	color: #fff;
	background: #92CAAF;
}
.sf-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0px;
	margin-top: 15px;
	margin-left: 7px;
	width: 150px;
	background: #fff;
	z-index: 999;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.1);
}
.sf-menu > li > ul:before {
	position: absolute;
	display: inline-block;
	content: '';
	left: 47%;
	top: -5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 4.5px 5px 4.5px;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}
.sf-menu ul > li {
	position: relative;
}
.sf-menu ul > li > a {
	font-size: 14px;
	padding: 7px 0;
	text-align: center;
	color: #9daeb5;
}
.sf-menu ul > li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.sf-menu ul > li.sfHover > a, .sf-menu ul > li > a:hover {
	color: #92caaf;
}

@media (max-width: 979px) {
	.sf-menu > li > a {
		font-size: 20px;
		padding: 15px 15px 16px;
	}
}
/*==================     ToTop + ContactMe + Language button     ======================*/
a.toTop, a.contactMe, a#lang-btn {
	height: 50px;
	line-height: 46px;
	color: #fff;
	-webkit-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.4);
	position: fixed;
	bottom: 120px;
	display:none;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	z-index: 5;
	opacity: 0;
}
a.toTop {
	width: 50px;
	font-size: 24px;
	background: #9DAEB5;
	border-radius: 50%;
	right: 40px;
}
.toTop:hover {
	color: #fff;
	background: #92CAAF;
	text-decoration: none;
}
a.contactMe {
	width: 170px;
	font-size: 20px;
	background: #92CAAF;
	border-radius: 25px;
	right: 100px;
}
.contactMe:hover {
	color: #92CAAF;
	background: #fff;
	text-decoration: none;
}
.contactMe:before {
	font-size: 150%;
}
a#lang-btn {
	opacity: 1;
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	font-size: 15px;
	border-radius: 25px;
	color: #92CAAF;
	background-color: white;
	position: absolute;
		top: 20px;
		right: 40px;
}
a#lang-btn:hover {
	background-color: #92CAAF;
	color: white;
}
/* Phone button - hidden on desktop, shown on mobile */
a#callMe {
	display: none;
}
@media (max-width: 767px) {
	a.toTop {
		display: none!important;
	}
	a.contactMe {
		bottom: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		padding: 0;
		/* Flexbox centering - activated when JS sets display:flex */
		align-items: center;
		justify-content: center;
	}
	a.contactMe:before {
		font-size: 24px;
	}
	/* Per-icon vertical adjustment for visual centering */
	a.contactMe.fa-phone:before {
		transform: translateY(1px);
	}
	a.contactMe.fa-envelope-o:before {
		transform: translateY(0px);
	}
	a#callMe {
		right: 80px;
	}
}
/*==================   Thumbnail    ======================*/
.thumb {
	display: block;
	position: relative;
	overflow: hidden;
	width: 33.333%;
	float: left;
	text-align: center;
	background-color: #92CAAF;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 

	-webkit-perspective: 500px;
	perspective: 500px;
}
@media (max-width: 1300px) {
	.thumb {
		width: 50%;
	}
}
@media (max-width: 767px) {
	.thumb {
		width: 100%;
	}
}
@media (max-width: 400px) {
	.thumb_overlay_cnt {
		font-size: 32px !important;
		line-height: 42px !important;
		letter-spacing: 3px !important;
		top: 50% !important;
		transform: translateY(-50%) rotateY(0deg) !important;
	}
	.thumb.rotated .thumb_overlay_cnt {
		transform: translateY(-50%) rotateY(-180deg) !important;
	}
}
.thumb_img {
	transform: rotateY(0deg);
	-moz-transition:    all .4s linear;
	-o-transition:      all .4s linear;
	-webkit-transition: all .4s linear;
	transition:         all .4s linear;
}
.thumb_img img {
	width: 100%;
	height: auto;

	-moz-transition:    all .5s ease;
	-o-transition:      all .5s ease;
	-webkit-transition: all .5s ease;
	transition:         all .5s ease;
}
.thumb_overlay_cnt {
	position: absolute;
	top: 50%;
	top: calc(50% - 1em);
	left: 0;
	right: 0;
	font-size: 50px;
	line-height: 70px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 7px;
	visibility: visible;
	transform: rotateY(0deg);
	-moz-transition:    all .2s linear;
	-o-transition:      all .2s linear;
	-webkit-transition: all .2s linear;
	transition:         all .2s linear;
}
.thumb_overlay {
	font-size: 0.9em;
	line-height: 1.5;
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	padding: 30px;
	overflow: hidden;
	color: #fff;
	visibility: hidden;
	text-align: left;
	transform: rotateY(-90deg);
	-moz-transition:    all .2s linear;
	-o-transition:      all .2s linear;
	-webkit-transition: all .2s linear;
	transition:         all .2s linear;
}
.thumb_overlay .container {
	display: table;
	height: 100%;
	width:  100%;
}
.thumb_overlay span {
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	width:  100%;
}
.thumb_overlay span br {
	line-height: 1.7;
}
.thumb.rotated img, .thumb.rotating img {
	-webkit-filter: brightness(60%);
	-moz-filter:    brightness(60%);  
	-ms-filter:     brightness(60%);  
	-o-filter:      brightness(60%);  
	filter:         brightness(60%);	
}

/* Very-very Legacy browsers */
.lt-ie9 .thumb:hover .thumb_overlay {
	background: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000');
	zoom: 1;
}
.lt-ie9 .thumb:hover .thumb_overlay:before {
	display: block;
}
@media (min-width: 768px) {
	.thumb:hover img {
		-moz-transform:    scale(1.2);
		-ms-transform:     scale(1.2);
		-o-transform:      scale(1.2);
		-webkit-transform: scale(1.2);
		transform:         scale(1.2);

		/*opacity: .6;*/
		-webkit-filter: brightness(60%);
		-moz-filter:    brightness(60%);  
		-ms-filter:     brightness(60%);  
		-o-filter:      brightness(60%);  
		filter:         brightness(60%);
	}
	.thumb:hover .thumb_overlay_cnt {
		color: #FDF593;
	}
}
/*==================  RD Parallax    ======================*/
.parallax-item {
	position: absolute;
		top:    initial;
		left:   initial;
		right:  initial;
		bottom: initial;
	background-position-x: 0;
	background-position-y: 0;
	background-size: contain;
	background-repeat: no-repeat;
}
header {
	height: calc(100vh - 80px);
	overflow: hidden;
	color: #9daeb5;
	position: relative;
	-webkit-user-select:   none;
	-moz-user-select:      none;
	-ms-user-select:       none;
	user-select:           none;
}
header .content, section.services .content {
	max-width: 1200px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
header .white-bg {
	position: absolute;
		top:    0;
		left:   0;
		right:  0;
		bottom: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.4+50,0+60 */
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
header .wall {
	background-color: #C2BAB8;
	background-image: url(../images/parallax/wall.jpg);
	background-size: 100vw;
	top:    0;
	left:   0;
	right:  0;
	bottom: 0;
}
header .person {
	width: 50%;
	right: 0;
	/*bottom: -10vh;*/
	bottom: 0;
	background-image: url(../images/parallax/person.png);
	background-position: bottom center;
}
header .container {
	width: initial;
	display: inline-block;
	position: absolute;
		top:  20%;
		left: 5%;
}
header h2:first-child {
	color: #9daeb5;
	opacity: 0.6;
}
section.services {
	height: calc(100vh - 80px);
	position: relative;
	overflow: hidden;
	background-image: url(../images/parallax/table.jpg);
	background-repeat: no-repeat;
	background-size: 100vw auto;
	background-position: top center;
}
section.services .container {
	position: relative;
	width: 100%;
	height: 100%;
}
.services .pad {
	background-image: url(../images/parallax/pad.png);
	width: 20%;
	right: 60%;
}
.services .notebook {
	background-image: url(../images/parallax/notebook.png);
	height: 80%;
	left: 50%;
}
.services .pen {
	background-image: url(../images/parallax/pen.png);
	width: 76%;
	bottom: 5%;
	left: 14%;
}
.services .sign {
	background-image: url(../images/parallax/sign.png);
	width: 28%;
	bottom: 22.5%;
	right: 14%;
}
.services .call-me {
	position: absolute;
		left: 52.5%;
	background: #92CAAF;
	font-size: 15px;
	line-height: 110%;
	text-align: center;
	padding: 15px 0;
}
.services .call-me:hover {
	background-color: white;
	color: #92CAAF;
}
.services [class*="card-"] {
	width: 20%;
	background-image: url(../images/parallax/card-back.png);
}
.services .card-0 {
	background-image: url(../images/parallax/card-front.png);
}
.services .card-4 a {
	display: block;
	position: absolute;
}
#card-tel {
	width: 27%;
	height: 5.5%;
	top: 69%;
	left: 7.7%;
}
#card-mail {
	width: 40%;
	height: 5.5%;
	top: 76%;
	left: 7.7%;
}
#card-adress {
	width: 48%;
	height: 5.5%;
	top: 83%;
	left: 7.7%;
}
@media (max-width: 1300px) {
	section.services {
		background-size: 100% 100%;
		background-position: top center;
	}
	.services .notebook {
		height: 70%;
		left: 50%;
		transform: translateX(-50%);
	}
	.services .pad, .services [class*="card-"] {
		display: none;
	}
	.services .pen {
		width: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	.services .sign {
		width: 20%;
		right: 50%;
		transform: translateX(50%);
	}
}
@media (max-width: 767px) {
	section.services {
		background-size: 100% 100%;
		background-position: center;
		min-height: 400px;
	}
	header .container {
		top: 5%;
		left: 5%;
		right: 5%;
		text-align: center;
	}
	header .white-bg {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.4+60,0+70 */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.4) 60%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.4) 60%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.4) 60%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );

	}
	.services .notebook {
		height: 60%;
		left: 50%;
		transform: translateX(-50%);
	}
	.services .pad, .services [class*="card-"] {
		display: none;
	}
	.services .pen {
		width: 45%;
		left: 50%;
		transform: translateX(-50%);
	}
	.services .sign {
		width: 18%;
		right: 50%;
		transform: translateX(50%);
	}
	.services .call-me {
		left: 15%;
	}
}
@media (max-width: 900px) and (orientation: landscape) {
	section.services {
		background-size: 100% 100% !important;
		background-position: center !important;
		min-height: 500px;
		height: 500px;
	}
	.services .notebook {
		height: 80%;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
	}
	.services .pen {
		width: 35%;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
	}
	.services .sign {
		display: none;
	}
}
@media (min-width: 1200px) {
/*	header .person {
		right: 0;
	}*/
	.services .call-me {
		font-size: 30px;
	}
}
/*========================================================
					 FOOTER  Styles
=========================================================*/
#contact {
	position: relative;
	top: -80px;
	visibility: hidden;
}
#contact-bar .content {
	max-width: 1200px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
.col-1, .col-2, .col-3 {
	width: 33.33%;
	float: left;
	height: 30vh;
	min-height: 12rem;
	display: table;
}
#contact-bar .container {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#contact-bar .container>div * {
	display: inline-block;
	text-align: left;
}
.col-2 .tel {
	font-weight: 900;
	font-size: 30px;
	line-height: 35px;
	letter-spacing: 2px;
	margin-bottom: 10px;
}
.col-3 .container {
	text-align: left!important;
}
.col-3:before {
	content: '';
	display: block;
	background: #f7f398;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	position: relative;
	top: calc(15vh - 10px);
}
.col-3 [class*="fa"] {
	font-size: 40px;
	margin-right: 20px;
}
h1.name {
	font-size: 60px;
	line-height: 60px;
	font-weight: 900;
	letter-spacing: 1px;
	margin: 0;
	display: inline-block;
}
footer {
	padding: 0;
	color: #bbc8ce;
	background: #fff;
}
footer .map {
	clear: both;
	margin-top: 0;
}
footer section.green,
footer section.white {
	padding: 1em;
	font-size: 75%;
	text-align: center;
}
footer section.green {
	background-color: #92CAAF;
	color: white;
}
.name span {
	display: none!important;
}
@media (max-width: 767px) {
	.col-1, .col-2, .col-3 {
		width: 100%;
		float: none;
		display: table;
		min-height: initial;
		height: initial;
	}
	.col-1 .container {
		padding: 50px 0 25px;
	}
	h1.name {
		font-size: 50px;
	}
	.name br {
		display: none!important;
	}
	.name span {
		display: inline-block!important;
	}
	.col-2 .container {
		padding-bottom: 25px;
	}
	.col-2 .tel {
		width: 100%;
		text-align: center!important;
	}
	.col-3 {
		height: 50px;
		padding-bottom: 25px;
	}
	.col-3:before {
		content: none;
	}
	.col-3 .container {
		text-align: center!important;
	}
}
/*==================  GOOGLE MAP  ======================*/
.map {
  color: #333;
  margin-top: 74px;
}
.map_model {
  height: 363px;
}
.map_model.map_bigger {
  height: 500px;
}
.map_model img {
  max-width: none !important;
}
@media (max-width: 767px) {
  .map_model {
    height: 400px;
  }
}
@media (max-width: 479px) {
  .map_model {
    height: 300px;
  }
}
.map_locations {
  display: none;
}