@charset "utf-8";
/* CSS Document */
html {padding: 0 0 0 0; }, 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, font, 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,
caption {margin: 0; padding: 0; border: 0; outline: 0; /*font-size: 100%;*/ vertical-align: baseline;/*background: transparent;*/}

a, img { /* IE hack - remove borders from hyperlinks and images set as links */ 
    border:none;
}

body {
	cursor: url(https://www.destadesign.com/img/cursor.svg) 10 10, auto;
}


/* LINKS - global */

a:hover {
  color: #22b1cb;
  text-decoration: underline;
}

a > .main_title:hover {
  color: #22b1cb;
  text-decoration: underline;
}

/* reCaptcha hidden */
.grecaptcha-badge {
	display:none;
}

.overlay {
  position: absolute;
  bottom: auto;
  left: 5.2%;
  right: 0;
  background-color: #22b1cb;
  overflow: hidden;
  width: 0;
  height: 3px;
  transition: .5s ease;
}

.column_1 .overlay {
	left:auto;
	right:auto;
}

.column_1:hover .overlay {
  width: 13.333333%;
  height:3px;
}

.home .overlay {
	left:auto;
	right:auto;
}

.home:hover .overlay {
  width: 9.333333%;
  height:3px;
}

.column_2 .overlay {
	left:auto;
	right:auto;
}

.column_2:hover .overlay {
  width:33.333333%;
  height:3px;
}

.column_3 .overlay {
  left: 5.2%;
  right: 0;
}

.column_3:hover .overlay {
  width: 89.6%;
  height:3px;
  left: 5.2%;
}

.column_4 .overlay {
	left:auto;
	right:auto;
}

.column_4:hover .overlay {
  width: 73.333333%;
  height:3px;
}

.column_1 img, .column_2 img, .column_3 img, .column_4 img {
	opacity: .8;
}
.column_1:hover img, .column_2:hover img, .column_3:hover img, .column_4:hover img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

::selection {
	background: #22b1cb;
	color: #fff;
}

body {
	line-height: 1.6; 
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	}
	
h1, h2 {
	font-family: 'PlayfairDisplay-Regular', Times New Roman, Times, serif;
	color:#000;
	text-align: right;
	margin-bottom: 0;
	text-transform:uppercase;
	letter-spacing: 0.02em;
	font-size:2.8em;
}

h3 {
	font-family: 'PlayfairDisplay-Regular', Times New Roman, Times, serif;
	font-size:2em;
	color:#000;
	letter-spacing: 0.02em;
}

h4 {
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
	color:#515151;
	text-align: right;
	margin-top:0;
	font-size:1em;
	letter-spacing: 0.02em;
}

h5 {
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
	color:#515151;
	font-size:1.5em;
	letter-spacing: 0.02em;
	padding-left: 5%;
}

h6 {
	font-family: 'PlayfairDisplay-Regular', Times New Roman, Times, serif;
	font-size:1.2em;
	color:#000;
	letter-spacing: 0.02em;
}
h5, h6 {
	clear: both;
}

p {color:#515151; letter-spacing: 0.02em;}

.logo {
	padding:2%;
	position:fixed;
}

.logo img, .open img, .close img {
	height:30px;
}

.entry_header {
	padding:10% 4.1666666% 5% 4.1666666%;
}

content {
	width:80%;
	margin:0 auto;
	display:block;
}

.row {
	display:table;
	padding:5% 0 7% 0;
}

article {
	display:table-cell;
	vertical-align: top;
}

.column_1 {
	width:16.6666666%;
	padding:2% 4.1666666% 2% 4.1666666%;
	display:table-cell;
}

.column_2 {
	width:41.6666666%;
	padding:2% 4.1666666% 2% 4.1666666%;
	display: table-cell;
}

.column_3 {
	width:66.6666666%;
	padding:2% 4.1666666% 2% 4.1666666%;
	display: table-cell;
	position: relative;
}

.column_4 {
	width:91.6666652%;
	padding:2% 4.1666666% 2% 4.1666666%;
	display: table-cell;
}

.about_right {
	padding-left:0;
}

.about_left {
	padding-right:0;
}

.blog {
	width:40%;
}

title {
	display:block;
	color:#515151;
}

.blog_number {
	font-size:0.6em;
	color:#000;
}

.main_title {
	font-family: 'PlayfairDisplay-Regular', Times New Roman, Times, serif;
	padding: 10% 0 15% 0;
	letter-spacing: 0.02em;
}

.vertical_title {
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
	white-space: normal;
	position:relative;
	transform-origin: top right 0;
	transform: rotate( 270deg ) translate(101.5%, 10%);
	font-size:0.7em;
	letter-spacing: 0.05em;
	text-transform:uppercase;
	color:#000;
}

.red_title {
	color:#dd4e34;
	text-transform:uppercase;
}

.column_2 > .vertical_title, .video > .vertical_title {
	transform: rotate( 270deg ) translate(103%, 10%);
}

.column_1 > .vertical_title {
	transform: rotate( 270deg ) translate(108%, 10%);
}

.about_right > .vertical_title, .about_left > .vertical_title {
	transform: rotate( 270deg ) translate(107%, 10%);
}

.read_more {
	color:#22b1cb;
	text-decoration:none;
	text-transform:uppercase;
}

.row_cta {
	width:100%;
}

.column_4_cta {
	text-align:center;
}

.button_cta {
	background-color:#22b1cb;
	text-transform:uppercase;
	letter-spacing: 0.02em;
	color:rgba(255,255,255,1);
	border:1px #22b1cb solid;
	padding:2% 7% 2% 7%;
	margin:10% 4.1666666% 10% 4.1666666%;
	cursor: pointer;
	/*background-image:url(../img/logo_white.svg);
	background-repeat:no-repeat;
	background-size:30px;
	background-position-y: center;
	background-position-x: right 10%;*/
}

.button_cta:hover {
	background-color:#fff;
	color:#22b1cb;
	/*background-image:url(../img/logo.svg);*/
}

.clients img {
	width:16%;
}

aside {
	width: 70%;
    float: right;
	left: 10%;
    position: relative;
	border-left:2px  #dd4e34  solid;
	padding-left: 15%;
	padding-bottom: 3%;
    padding-top: 3%;
	margin-bottom: 5%;
}

q {
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
	color:#515151;
	font-size:1.8em;
	letter-spacing: 0.02em;
	quotes: none;
}

q::before{
  font-family:'PlayfairDisplay-Regular', Times New Roman, Times, serif;
  content: "\201C";
  color:rgba(0, 0, 0, 0.1);
  font-size:4em;
  position: absolute;
  left: 8%;
  top:-50px;
}

q::after{
  content: '';
}
	

/* MENU */
button.open, button.close {
	right:0; 
	top:0; 
	padding:2%; 
	position:fixed; 
	cursor:pointer; 
	background-color:transparent; 
	border:none; 
	color:#22b1cb;
}

button.open:hover {
	text-decoration:underline #22b1cb;

}

button.open > img {
	display:none;
}

button.open > span {
	display: block;
}

.main_menu {
	background-color:#111111;
	width:100%;
	position: fixed;
    top:0;
	right:0;
	height:100%;
	color:#bebebe;
	padding-left: 3%;
}

.main_menu .logotyp {
	vertical-align: middle;
	width:60%;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	margin-left:15%;
}

.main_menu nav {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: right;
	right: 3%;
}

.main_menu nav ul {
    list-style-type: none;
	margin: 0;
    padding: 10% 0 10% 0;
	line-height:3em;
	letter-spacing: 0.02em;
}

.main_menu nav ul li a {
	text-transform:uppercase;
	text-decoration:none;
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
	font-size:0.8em;
}

.main_menu nav ul li a:hover {
	color:#22b1cb;
}

.menu_fb {
	color:#606060;
}

/* CONTACT FORM */

.contact_frm {
	margin: 2em 0 4em 0;
}

.contact_frm > form > .field > input, .contact_frm > form > .field > textarea {
	width:100%;
	border: 0;
	border-bottom: 1px #999 solid;
	/*text-transform:uppercase;*/
	font-size: 0.7em;
	padding-bottom: 3%;
	padding-top: 8%;
	font-family: 'Lato-Light', Arial, Helvetica, sans-serif;
}

.contact_frm > form > .label {
	display:none;
}

.contact_frm > form > button {
	border: 0;
	background: none;
	text-transform: uppercase;
	color:#22b1cb;
	cursor: pointer;
	font-family: 'Lato-Regular', Arial, Helvetica, sans-serif;
}

.contact_frm > form > button:hover {
	text-decoration:underline;
}

.g-recaptcha {
	padding-bottom: 3%;
	padding-top: 3%;
}

/* LIGHTBOX */

.fancybox-bg {
	background: #FFF !important;
}

.fancybox-thumbs__list a::before {
	border:6px #22b1cb solid !important;
}

.fancybox-button {
	background: rgba(255, 255, 255,.9) !important;
}

.fancybox-button:active, .fancybox-button:hover {
	color:#22b1cb !important;
}

.fancybox-thumbs {
	background: #fff !important;
	border-left: 1px #ccc solid !important;
}

/* g-recaptcha */

#rc-anchor-alert, .rc-anchor-alert {
	color:#dd4e34 !important;
}

.rc-anchor {
	border-radius:0 !important;
	box-shadow:0 !important;
	-webkit-box-shadow:0 !important;
	-moz-box-shadow:0 !important;
}

.rc-anchor-light {
	background:#fff !important;
}


/* FOOTER */


footer {
	font-size: 0.7em;
	width:80%;
	margin:0 auto;
	display: table;
	letter-spacing: 0.02em;
}

.copy, .footer_menu {
	padding:10% 4.1666666% 10% 4.1666666%;
	display: table-cell;
}

.footer_menu > p {
	text-transform:uppercase;
	text-align:right;
}

.footer_menu > p > a {
	border-right: 1px #515151 solid;
	padding-left: 3%;
	padding-right: 3%;
}

.footer_menu > p > a:last-child {
	border-right:0;
	padding-left: 3%;
	padding-right:0;
}

.error404 {
	font-family:'PlayfairDisplay-Regular', Times New Roman, Times, serif;
	font-size:10em;
	color:#000;
}

/* MEDIA QUERY */

@media screen and (min-width: 500px) and (max-width: 960px) {
	.about_right, .about_left {
		display:table-cell !important;
		width:50% !important;
	}

	.mobile_display_none {
		display:none !important;
	}

}

@media screen and (max-width: 960px) {
	h1, h2 {
		font-size:1.4em;
	}

	h3 {
		font-size:1.2em;
	}

	h5 {
		font-size:1.1em;
	}

	h6 {
		margin-bottom: 2em;
	}
	
	.contact_mobile {
		font-size: 0.9em;
	}

	.row {
		padding:0;
	}

	.column_1, .column_2, .column_3, .column_4, .copy {
		width:100%;
		display: table-row;
	}
	
	.clients img {
		width: 49%;
	}

	.main_menu .logotyp {
		vertical-align: middle;
		width:60%;
		position: absolute;
		top: 10%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		margin-left:15%;
	}

	aside {
		float:none;
		width: 90%;
		left:0;
		padding-bottom: 7%;
	    padding-top: 7%;
	}

	.vertical_title {
		transform-origin:0;
		transform:none;
		padding-bottom:5%;
	}

	.column_2 > .vertical_title, .column_1 > .vertical_title, .video > .vertical_title {
		transform-origin:0;
		transform:none;
		padding-bottom:5%;
	}

	.main_img > .vertical_title {
		font-family: 'PlayfairDisplay-Regular', Times New Roman, Times, serif;
		padding: 10% 0 15% 0;
		letter-spacing: 0.02em;
		text-transform: none;
		font-size: 1em;
		margin: 0;
		color: #515151;
	}
	
	.main_menu nav {
	text-align:center;
	right:40%;
	}
	
	button.open > span {
	display:none;
	}
	button.open > img {
	display: block;
	}
	
	.overlay {
		display:none;
		/*position: absolute;
		bottom: auto;
		left: 0;
		right: 0;
		background-color: #22b1cb;
		overflow: hidden;
		width: 0;
		height: 3px;
		transition: .5s ease;
	}
	
	.column_1 .overlay {
		left: auto;
		right: auto;
	}
	
	
	.column_1:hover .overlay {
		width: 80%;
		height:3px;
	}
	
	.column_2 .overlay {
		left:auto;
		right:auto;
	}
	
	.column_2:hover .overlay {
		width:80%;
		height:3px;
		left:auto;
		right:auto;
	}
	
	.column_3 .overlay {
		left: 0;
		right: 0;
	}
	
	.column_3:hover .overlay {
		width: 100%;
		height:3px;
		left: 0;
	}
	
	.column_4 .overlay {
		left:auto;
		right:auto;
	}
	
	.column_4:hover .overlay {
		width: 80%;
		height:3px;
		left:auto;
		right:auto;
	}*/
	
	.column_1 img, .column_2 img, .column_3 img, .column_4 img {
	opacity: 1;
	}
	
	footer {
		text-align:center;
		padding-bottom:10%;
	}

	.footer_menu {
		display: table-caption;
	}

	.footer_menu > p {
		text-align:center;
		display: grid;
	}

	.footer_menu > p > a:last-child {
		padding-right: 3%;
	}
	.footer_menu > p > a {
		border-right: 0;
		padding-bottom: 20%;
	}


}

@media screen and (min-width: 1600px) {
	content, footer {
		width:60%;
	}
	
	.overlay {
		position: absolute;
		bottom: auto;
		left: 5.2%;
		right: 0;
		background-color: #22b1cb;
		overflow: hidden;
		width: 0;
		height: 3px;
		transition: .5s ease;
	}
	
	.column_1 .overlay {
		left:auto;
		right:auto;
	}
	
	
	.column_1:hover .overlay {
		width: 7%;
		height:3px;
	}
	
	.column_2 .overlay {
		left:auto;
		right:auto;
	}
	
	.column_2:hover .overlay {
		width:25%;
		height:3px;
	}
	
	.column_3 .overlay {
		left: 5.2%;
		right: 0;
	}
	
	.column_3:hover .overlay {
		width: 89.6%;
		height:3px;
		left: 5.2%;
	}
	
	.column_4 .overlay {
		left:auto;
		right:auto;
	}
	
	.column_4:hover .overlay {
		width: 55%;
		height:3px;
	}

}