/*
Theme Name: New Touch custom theme
Author: Sascha Teschner
Author URI: www.saschateschner.nl
Version: 1.02062001
*/
@import url("https://use.typekit.net/lss0dhh.css");
@import url('css/reset.css');
@import url('css/animate.css');
@import url('css/form.css');
@import url('css/accordion.css');
@import url('css/lightbox.css');

@import url('css/nav.css');



body, textarea, input {font-family: century-gothic, sans-serif; font-weight: 400; font-style: normal; font-size: 15px; line-height: 22px; color: #000;}
h1 {font-weight: normal;}
h2, h3, h4, nav li, #more li, #slider #per-slide-template a, h5 { font-weight: normal; font-family: century-gothic, sans-serif; font-weight: 700;}
h3 {font-size: 22px;}

#preloader {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 99999;}
#status {width:200px; height:auto; position:absolute; left:50%; top:50%; background-image:url(images/logo.svg); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; background-size: cover;}

.txt-center {text-align: center;}
.txt-left {text-align: left;}
.txt-right {text-align: right;}

h4 {text-align: center;}
h4 a {background-repeat: no-repeat; background-position: right center; display: inline-block; color:#fff; background-image: url(images/cta-arrow.svg); background-size: 35px; -webkit-border-radius: 500px; border-radius: 500px; font-size: 18px; font-weight: bold;}

footer a, .content a {text-decoration: underline;}
.content h4 a, footer a:hover, .content a:hover {text-decoration: none;}

body {background-color: #fcfcfc;}

.bg-white {background-color: #fff;}
.bg-white a {color: #3a0303; }

.bg-light {background-color: #f4f2ee;}
.bg-light a {color: #3a0303;}
.bg-light h4 a {border: 2px solid #b20066;;}

.bg-red {background-color: #e50044; color: #fff;}
.bg-red a {color: #fff;}
.bg-red h4 a {border: 2px solid #fff;}

.bg-purple {background-color: #b20066; color: #fff;}
.bg-purple a {color: #fff;}
.bg-purple h4 a {border: 2px solid #fff;}

.bg-light-grey {background-color: #f7f5f3;}
.bg-light-grey a {color: #e50044;}

.bg-gradient {color: #fff;}
.bg-gradient a {color: #fff;}
.bg-gradient h4 a {border: 2px solid #fff;}

.bg-purple-dark {background-color: #8e0052; color: #fff;}
.bg-purple-dark a {color: #fff;}

.bg-red-dark {background-color: #b70036; color: #fff;}
.bg-red-dark a {color: #fff;}

.bg-beige-light {background-color: #e6e3dd; color: #000;}
.bg-beige-light a {color: #000;}

.bg-red li, .bg-purple li {background-image: url(images/arrow-right-white.svg);}

.txt-white {color: #fff;}

.bg-gradient .divider, .bg-red .divider, .bg-red-dark .divider, .bg-purple .divider, .bg-purple-dark .divider {background-color: #fff;}
.bg-white .divider, .bg-beige-light .divider {background-color: #000;}

.bg-white h4 a, .bg-light-grey h4 a {background-color:#e50044; color: #fff;}

#header .divider, .bg-gradient, footer .divider {background: rgb(229,0,68); background: -moz-linear-gradient(top,  rgba(229,0,68,1) 0%, rgba(178,0,102,1) 100%); background: -webkit-linear-gradient(top,  rgba(229,0,68,1) 0%,rgba(178,0,102,1) 100%); background: linear-gradient(to bottom,  rgba(229,0,68,1) 0%,rgba(178,0,102,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50044', endColorstr='#b20066',GradientType=0 );}

.masonry .divider {width: 40px; height: 2px; margin: 15px auto;}

.inner-content {position: relative; margin: auto;}
.inner-content.x-small {max-width: 600px;}
.inner-content.small {max-width: 900px;}
.inner-content.normal {max-width: 1000px;}
.inner-content.medium {max-width: 1100px;}
.inner-content.large {max-width: 1300px;}
.inner-content.x-large {max-width: 1500px;}


#slider {position: relative; width: 100%;}
#slider .cycle-slideshow {position: relative; width: 100%; height: 100%; z-index: 0; overflow: hidden; }
#slider .slide {position: relative; width: 100%; height: 100%; background-size: cover; color: #fff; background-position: center;}
#slider .slide .inner-content {height: 100%;}
#slider .slide .block {position: absolute; left: 0; right: 0; text-align: center;}
#slider .slide .cover  {background-color:rgba(51,47,39,0.2); width: 100%; height: 100%;}
#slider .slide .block p {text-align: left;}
#slider .slide .block h4 {display: inline-block;}
#slider .slide h4 a {color: #fff; background-image: url(images/cta-arrow.svg); background-size: 35px; background-color: #e50044;}

.prev, .next {position: absolute; background-repeat: no-repeat; background-position: center; z-index: 100; cursor: pointer;}
.prev {background-image: url(images/prev.svg);}
.next {background-image: url(images/next.svg);}

#header {position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
#header .inner-content {height: 100%; background-image: url(images/mascotte-header.svg); background-repeat: no-repeat; background-position: bottom left;}
#header .content {position: absolute; left: 0; right: 0; margin: auto; width: 100%; text-align: center;}
#header .divider {  height: 3px; width: 90px; margin: auto;}
#header .cover {background-color:rgba(51,47,39,0.2); width: 100%; height: 100%;}

.content {-webkit-border-radius: 4px; border-radius: 4px; margin: 0 auto 5px auto;}
.content ul {margin: 0 0 20px 0;}
.content li {padding: 0 0 0 25px; background-repeat: no-repeat;  background-size: 10px;  background-position: 6px 8px;}
img {-webkit-border-radius: 4px; border-radius: 4px;}

.gallery-lightbox a {display: inline-block; font-size: 0;  padding: 5px;}
.gallery-lightbox {font-size: 0;}

footer a {color: #e50044;}
footer .divider {max-width: 600px; height: 2px; margin: auto;}
footer .linkedin {width: 60px; height: 60px; display: inline-block; background-image: url(images/linkedin.svg); background-repeat: no-repeat; background-size: 30px; background-position: center; background-color: #fff; border: 2px solid #e50044; border-radius: 50px; position: relative; left: 50%; transform: translateX(-50%); top: -30px;}
footer .linkedin:hover {background-size: 40px;}
footer .bottom {margin: 60px auto 0 auto;}

.masonry article, .masonry .padding-small , .masonry .panel, .masonry h3, .masonry p, .masonry img {-webkit-column-break-inside: avoid !important; page-break-inside: avoid !important; break-inside: avoid !important;  margin: 0 0 10px 0; }
.padding-small {padding: 10px;}

.anchor:before {
content:"";
display:block;
height:120px; /* fixed header height*/
margin:-120px 0 0 0; /* negative fixed header height */
}

.masonry article, .masonry article .panel, {-webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;}
.masonry article:hover {-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);}

@media (min-width: 980px) {
	body, #preloader {background-attachment: fixed; background-image: url(images/body-bg.svg); background-size: cover;}
	
	.padding-large {padding: 100px 0;}
	.padding-normal {padding: 50px 0;}
	
	
	.content h2, .content h3 {margin: 0 0 20px 0;}
	.content h4 a {margin: 20px 5px 0 5px; padding: 10px 50px 10px 20px;}
	.content h4 a:hover {padding: 10px 55px 10px 25px;}
	
	.wrapper {padding: 0 20px;}
	
	#slider {height: 100%; max-height: 620px;}
	#slider .cover {background-image: url(images/header-bg.svg); background-attachment: fixed; background-size: cover;}
	#slider .slide .block {bottom: 200px; padding: 0 50px;}
	#slider .slide h1 {font-size: 48px; line-height: 48px;}
	#slider .slide .block h4 a {margin: 20px 5px 0 5px; padding: 10px 50px 10px 20px;}
	#slider .slide .block h4 a:hover {padding: 10px 55px 10px 25px;}
	#slider .slide .block .content {padding: 30px;}
	#slider .slide .block .links {margin: -30px auto 0 auto; }

	#header {height: 450px;}
	#header .cover {background-image:url(images/header-bg.svg); background-attachment: fixed; background-size: cover;}
	#header h1 {font-size:48px; z-index: 5; line-height: 48px; padding: 0 0 20px 0;}
	#header .content {bottom: 100px;}
	
	#page-content {margin: -50px 0 25px 0;}
	#page-content .content {padding: 35px 70px;}

	.gallery-lightbox a {width: 16.6666666%; opacity: 0.9;}
	.gallery-lightbox a:hover {padding: 3px; opacity: 1;}
	
	blockquote {font-size: 24px; padding: 0 5% 20px 5%; line-height: 30px;}
	
	footer {margin: 40px 0; padding: 40px 0;}

	footer .block {float: left; width: 300px;}
	footer #naw {padding: 40px 30px 0 0;}
	footer #branding {padding: 40px 40px 40px 40px;}
	
	
	.masonry {column-count: 3; column-gap: 10px; }
}

@media (min-width: 481px) and (max-width: 979px) {
	.padding-large {padding: 100px 0;}
	.padding-normal {padding: 50px 0;}
	
	.content h2, .content h3, .z-auto-g .data h2, .z-auto-g .data h3 {margin: 0 0 20px 0;}
	.section-title {font-size: 28px;}
	.content h4 a {margin: 12px 5px 0 5px; padding: 9px 50px 9px 19px;}
	
	.wrapper {padding: 0 20px;}
	
	#slider {height: 80%; min-height: 450px;}
	#slider .slide .block {bottom: 30%; padding:0;}
	#slider .slide .block .content {padding: 20px;}
	#slider .slide .block h4 a {margin: 12px 5px 0 5px; padding: 9px 50px 9px 19px;}
	
	#header {height: 450px;}
	#header h1 {font-size:42px; padding: 20px 40px; z-index: 5;}
	#header h5 {padding: 5px 10px; margin: 0 0 -15px 40px; z-index: 6; position: relative;}
	#header .content {bottom: 100px; margin: 0;}
	
	#page-content {margin: -50px 10px 25px 10px;}
	#page-content .content {padding: 35px;}
	
	.gallery-lightbox a {width: 16.6666666%; padding:3px;}

	blockquote {font-size: 24px; padding: 0 5% 20px 5%; line-height: 30px;}

	footer {margin: 40px 0; padding: 40px 0;}
	footer .block {float: left; width: 50%;}
	footer #naw {padding: 60px 30px 0 0;}
	footer #branding {padding: 40px 40px 40px 40px;}

	
	.masonry {column-count: 2; column-gap: 5px;}

}

@media (max-width: 480px) {
	.padding-large {padding: 100px 0;}
	.padding-normal {padding: 50px 0;}
	
	.content h2, .content h3, .z-auto-g .data h2, .z-auto-g .data h3 {margin: 0 0 20px 0;}
	.section-title {font-size: 24px;}
	.content h4 a {margin: 12px 5px 0 5px; padding: 7px 50px 7px 17px;}
	
	.wrapper {padding: 0 20px;}
	
	#slider {height: 90%; min-height: 450px;}
	#slider .slide .block {bottom: 30%; padding:0;}
	#slider .slide .block .content {padding: 20px;}
	#slider .slide .block h4 a {margin: 12px 5px 0 5px; padding: 7px 50px 7px 17px;}
	
	#header {height: 300px;}
	#header h1 {font-size:42px; padding: 20px 40px; z-index: 5;}
	#header h5 {padding: 5px 10px; margin: 0 0 -15px 40px; z-index: 6; position: relative;}
	#header .content {bottom: 40px; margin: 0px;}
	
	#page-content {margin: -20px 10px 25px 10px;}
	#page-content .content {padding: 25px;}
	
	.gallery-lightbox a {width: 33.33333333%; padding:2px;}

	blockquote {font-size: 24px; padding: 0 5% 20px 5%; line-height: 30px;}
	
	footer {margin: 20px 0; padding: 20px 0;}
	footer .block {width: 80%; margin:auto;}
	footer #naw {padding: 20px; text-align: center;}
	footer #branding {padding: 20px;}
	footer .divider {max-width: 300px;}
}