@import "css/reset.css";
@import "css/layout.min.css";
@import "css/elements.min.css";

@font-face{font-family:'latolight';src:url('fonts/lato-lig.eot');src:url('fonts/lato-lig.eot?#iefix') format('embedded-opentype'), url('fonts/lato-lig.woff2') format('woff2'), url('fonts/lato-lig.woff') format('woff'), url('fonts/lato-lig.ttf') format('truetype'), url('fonts/lato-lig.svg#latolight') format('svg');font-weight:normal;font-style:normal}
@font-face{font-family:'robotothin';src:url('fonts/roboto-thin-webfont.eot');src:url('fonts/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-thin-webfont.woff2') format('woff2'), url('fonts/roboto-thin-webfont.woff') format('woff'), url('fonts/roboto-thin-webfont.ttf') format('truetype');font-weight:normal;font-style:normal}
@font-face{font-family:'robotolight';src:url('fonts/roboto-light-webfont.eot');src:url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-light-webfont.woff2') format('woff2'), url('fonts/roboto-light-webfont.woff') format('woff'), url('fonts/roboto-light-webfont.ttf') format('truetype'), url('fonts/roboto-light-webfont.svg#robotolight') format('svg');font-weight:normal;font-style:normal}
@font-face { font-family: 'bariol_lightlight'; src: url('fonts/bariol_light-webfont.eot'); src: url('fonts/bariol_light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bariol_light-webfont.woff2') format('woff2'), url('fonts/bariol_light-webfont.woff') format('woff'), url('fonts/bariol_light-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'bariol_regularregular'; src: url('fonts/bariol_regular-webfont.eot'); src: url('fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/bariol_regular-webfont.woff2') format('woff2'), url('fonts/bariol_regular-webfont.woff') format('woff'), url('fonts/bariol_regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .col-xsl-6 { float: left; width: 50%; margin: 30px; }
    .product, .portfolio-work { padding: 15px !important; }
}
@media only screen and (max-width: 480px) and (min-width: 767px) {
    .col-xsl-6 { width: 100%; }
}

h1, h2, h3, h4, h5, h6 { font-family:'bariol_lightlight' !important; }
h3, p, a  { font-size:17px !important; }
.single-portfolio-work p, .single-portfolio-work a { font-size: 14px !important; }
input[type=submit], a.button, #navigation a { font-family: 'bariol_regularregular' !important; }
#cn-notice-text { font-size:17px !important; }
h1, h1 a { letter-spacing:1px !important; }
h1, h1 a {font-weight:200;color:#221e1e;font-size:2em;}
h2{font-weight:350;color:#676767;font-size:1.25em}
h3{font-size:1em;font-weight:400}
h4{font-size:1em;font-weight:300}
h6{font-size:0.875em}
body{font-family:'bariol_lightlight';color:#221e1e;font-weight:300;line-height:150%}
strong{font-weight:900}
small{font-size:0.75em}
a,a:visited{color:#221e1e;text-decoration:none}
a:hover{color:#ff2a00;text-decoration:none}
a:hover,a:active{outline:0}
input:focus{outline:none}
.form-click{margin-top:10px}
.graphic img{width:280px !important;height:280px !important}
.new-title{font-family:"robotolight"}
.slider{margin-top:40px;margin-bottom:30px;background-color:#d9215c}
.partners{background-color:#ececec}
.informations{margin-bottom:30px;}
.shortInfo { padding-top: 40px; }
.informations h1{line-height:28px !important;margin-bottom:20px}
.about{overflow:hidden;width:1000px;margin:0 auto;margin-top:40px;margin-bottom:50px}
.about div{float:left;width:300px;font-size:14px}
.about div:nth-of-type(2){padding-left:50px;padding-right:30px;width:360px}
.about div p{margin-top:20px}

.portfolio-work:nth-of-type(3n+1) {
	clear: both;
}

@media screen and (max-device-width : 480px){
	img.wp-post-image{width:270px !important;height:270px !important}
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

#logo{margin-top:20px;line-height:40px}
#navigation{float:right;font-family:"robotolight"}
#navigation li{display:block;float:left;margin-top:30px;margin-right:20px;line-height:100%}
#navigation a{display:block;padding:8px 17px 11px 17px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-o-transition:all .3s linear;transition:all .3s linear;border-radius:3px}
#navigation li.last{margin-right:0px}
#navigation li:hover a{color:white;background:#221e1e}
#navigation li.current-menu-item{padding-bottom:7px !important;background:url('css/img/nav-arrow@2x.png') no-repeat bottom center}
#navigation li.current-menu-item a{color:white;background:#ed145b;font-weight:500}
#navigation .dropdown{display:none;margin:0;padding:0;position:absolute;margin-top:30px;z-index:10000;background:#221e1e;margin-left:-20px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
#navigation .dropdown li{float:none;margin:0;padding:0}
#navigation li.drop{padding-bottom:30px}
#navigation li.drop:hover{cursor:pointer;background:url('css/img/nav-drop.png') no-repeat bottom center;padding-bottom:30px !important}
#navigation .dropdown li a{color:white;font-size:0.875em;background:transparent;margin:0;padding:15px 80px 15px 37px}
#navigation .dropdown li a:hover{color:white;background:#ff2a00}
#mobile-nav{display:none;width:100%;background:#dbdbdb;text-align:center;padding:20px 0 20px 0}
#mobile-nav li{display:block;padding-top:15px;padding-bottom:15px}
#clients{padding-top:80px;padding-bottom:80px;width:100%;background:#444444}
#clients img{width:100%}#call-to-action{padding-top:80px;padding-bottom:80px;width:100%;background:#444444;text-align:center}
#call-to-action h1{color:#fff;padding-bottom:20px}
#call-to-action h2{color:#ffc6bb;padding-bottom:35px}
footer{padding-top:80px !important;padding-bottom:80px !important;font-size:0.8125em}
#copyright a{font-weight:400}
#foot-nav,#foot-nav ul{float:right}
#foot-nav li{float:left;padding:0px 15px}
#foot-nav li.first{padding-left:0px}
#foot-nav li.last{padding-right:0px}
#foot-nav a.active{font-weight:400}
#features{width:100%;background:#444444;color:#221e1e;text-align:center;padding-top:60px;padding-bottom:80px}
#features h2{color:#221e1e;padding-bottom:15px}
#features .feature{padding-top:20px}
#gallery{padding-top:80px;padding-bottom:40px}
#gallery .intro h2,#gallery .intro p{padding-top:25px}
#gallery .intro .button{margin-top:40px}
.showcase-entry{padding-top:80px}
.showcase-entry img{width:100%}
.showcase-entry h1{padding-bottom:15px}
.showcase-entry h2{padding-bottom:25px}
.showcase-entry p{padding-bottom:40px}
.showcase-entry .button{margin-bottom:40px}
.showcase-entry.light .screen{float:left}
.showcase-entry.light .description{float:right}
.showcase-entry.dark{width:100%;background:#444444;color:white;padding-bottom:80px}
.showcase-entry.dark h1{color:white}
#title{padding-top:50px;padding-bottom:80px}
#title h1{padding-bottom:20px}
#team{padding-bottom:80px;text-align:center}
#team .members h2{padding-top:20px}
#team .members a{color:#ff2a00}
#team .members a:hover{color:#221e1e}
#team .members p{padding-top:30px}
#services{width:100%;background:#444444;padding-top:80px;padding-bottom:80px}
#services h1{color:#fff;padding-bottom:20px}
#services h2{padding-bottom:40px}
#services h4{color:#fff;line-height:16px;padding-left:24px}
#services ul,#services p{font-size:0.875em;color:#bdbdbd;padding-top:30px}
#services .list-one h4{background:url('css/img/lightning.png') no-repeat top left}
#services .list-two h4{background:url('css/img/lightbulb.png') no-repeat top left}
#services .list-three h4{background:url('css/img/coffeecup.png') no-repeat top left}
#services .list-three a{color:#ff2a00}
#services .list-three a:hover{color:#221e1e}
#filters{padding-top:40px;padding-bottom:40px;width:100%;background:#444444}
#filters h2{color:#fff;padding-bottom:20px}
#filter li{display:block;float:left;margin-right:20px;background:#221e1e;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
#filter li.current{background:#ff2a00}
#filter li.last{margin-right:0px}
#filter li:hover{background:#ff2a00}
#filter a{display:block;line-height:100%;padding:8px 20px 11px 20px;color:#fff}
#work{padding-top:40px;padding-bottom:60px}
#work img{width:150px}
.switch ul{float:right}
.switch li{float:left}
.switch a{display:block;text-indent:-999em;width:34px;height:34px}
.switch .prev{margin-right:10px;background:url('img/arrow_large_left.png') no-repeat top left;background-position:top}
.switch .next{background:url('img/arrow_large_right.png') no-repeat top left;background-position:top}
.switch .prev:hover,.switch .next:hover{background-position:bottom}
#project{padding-bottom:80px}
#project .overview h2{padding-bottom:40px}
#project .overview p{padding-bottom:25px}
#elements{padding-bottom:80px}
#accordion,#tabs,#alerts,#infobox,#lists,#dropcaps,#quote{padding-top:20px;padding-bottom:20px}#accordion .title,#tabs .title,#infobox .title,#lists .title,#quote .title{padding-bottom:20px}
#alerts p{margin-top:10px}
#dropcaps p{padding-top:20px;font-size:0.875em}
#lists ul{border-bottom:1px dotted #d0d0d0;margin-bottom:5px;padding-bottom:5px}
#lists .list.dash{border-bottom:none}
.grid{margin-top:20px;text-align:center;line-height:40px;height:40px;background:#d0d0d0}
.grid:hover{background:#ececec}
#contact{padding-bottom:80px}
#alert{display:none;padding-top:20px;padding-bottom:20px;width:100%}
#contact aside{padding-left:40px}
#contact aside h3{padding-bottom:20px;padding-top:40px}
#contact aside h3.first{padding-top:0px}
#contact aside span.telephone{font-family:"robotolight";}
#contact aside .social { margin-top: 20px; }
#contact aside .social li{float:left;margin-right:10px;margin-bottom:10px}
.content{width:100%;background:#f1f1f1}
.entry{padding-top:80px;padding-bottom:80px;border-bottom:1px solid #cecece}
.entry img{width:100%}
.entry h1{margin:30px 0px;}
.entry h1:hover{color:#ff2a00;}
.entry .meta{display:block;padding-bottom:30px}
.entry .meta li{display:inline-block;font-size:0.875em;color:rgb(157, 160, 164)}
.entry .meta li a{color:rgb(157, 160, 164)}
.entry .meta li a:hover{color:#221e1e}
.entry .button{margin-top:30px}
.entry.link{text-align:center}
#blog .entry audio{width:100%}
.entry.quote h1:hover{color:#221e1e}
.entry.quote{text-align:center}
#blog .switch ul{margin-top:80px;padding-bottom:80px}
.entry.standard.full .content{padding-bottom:30px}
.entry.standard.full blockquote{margin-bottom:30px}
.entry.standard.full .content a{font-weight:400}
#comments{padding-top:30px}
.comment-list{margin-top:20px;margin-bottom:30px;overflow:hidden}
.comment-list .comment{float:left;margin-bottom:30px;padding-top:30px;border-top:1px solid #cecece}
.comment-list .comment:first-child{border-top:none}
.comment-list img{float:left;margin-bottom:10px}
.comment-list .comment-meta{float:left;padding-left:20px}
.comment-body{float:left}
ul.children .comment{border-top:1px solid #cecece !important;padding-top:15px;margin-top:15px;margin-bottom:0px;margin-left:55px}
.date{font-size:0.875em;color:rgb(157, 160, 164)}.reply{font-weight:400;font-size:0.875em;padding-left:10px}
#respond{padding-bottom:80px}
#respond form{padding-top:30px}
#respond .form-field span input,#respond .form-field span textarea{background:#fff}
#blog aside{font-size:0.875em;padding-left:40px;padding-bottom:80px}
#blog aside h2{padding-top:80px}
#blog .text-widget p{padding:30px 0px}
.latest-tweets p{padding-top:30px}
.latest-tweets a{font-weight:400}
.latest-tweets small{color:rgb(157, 160, 164)}
#flickrs{display:block;padding-top:30px}
#flickrs{display:block;float:left}
#flickrs li{display:block;list-style:none;float:left;background:#e5e5e5;border:1px solid #d5d5d5;padding:5px;margin-top:10px;margin-right:10px}
#flickrs a{display:block;position:relative}
#flickrs img{width:50px;height:50px}
#blog aside .social{padding-top:30px}
#blog aside .social li{float:left;margin-right:10px;margin-bottom:10px}

@media only screen and (max-width: 959px){
	#mobile-nav{display:block}#navigation{display:none}
}
@media only screen and (min-width: 768px) and (max-width: 959px){
	.showcase-entry.light .description,.showcase-entry.dark .description{width:748px}
	.showcase-entry.light .screen,.showcase-entry.dark .screen{width:620px}
}
@media only screen and (max-width: 767px){
	#gallery .intro .button{margin-bottom:40px}
	#foot-nav{display:none}
	#copyright{text-align:center}
	.showcase-entry{text-align:center}
	#team .members li{padding-top:40px}
	#team .members li.first{padding-top:0px}
	#services .list-two,#services .list-three{padding-top:40px}
	#filters{padding-bottom:20px}#filter li{margin-bottom:20px}
	.switch ul{float:left;margin-top:20px;padding-bottom:0px}
	#blog .switch ul{float:left;margin-top:20px;padding-bottom:0px}
	#project .overview{padding-top:40px}
	#project .overview h2{padding-bottom:25px}
	#contact aside h3.first{padding-top:40px}
	#contact aside,#blog aside{padding-left:0px}
	#respond{padding-bottom:0px}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and ( min--moz-device-pixel-ratio: 2),only screen and ( -moz-min-device-pixel-ratio: 2),only screen and ( -o-min-device-pixel-ratio: 2/1),only screen and ( min-device-pixel-ratio: 2),only screen and ( min-resolution: 192dpi),only screen and ( min-resolution: 2dppx){
	#navigation li.active{background:url('img/nav-arrow@2x.png') no-repeat bottom center;-webkit-background-size:16px 7px;-moz-background-size:16px 7px;background-size:16px 7px}
	#navigation li.drop:hover{background:url('img/nav-drop@2x.png') no-repeat bottom center;-webkit-background-size:11px 20px;-moz-background-size:11px 20px;background-size:11px 20px}
	#services .list-one h4{background:url('img/lightning@2x.png') no-repeat top left;-webkit-background-size:16px 16px;-moz-background-size:16px 16px;background-size:16px 16px}
	#services .list-two h4{background:url('img/lightbulb@2x.png') no-repeat top left;-webkit-background-size:16px 16px;-moz-background-size:16px 16px;background-size:16px 16px}
	#services .list-three h4{background:url('img/coffeecup@2x.png') no-repeat top left;-webkit-background-size:16px 16px;-moz-background-size:16px 16px;background-size:16px 16px}
}
.article h1:hover { text-decoration: none !important; border: none !important; color: #221e1e !important; }
.article a:hover  { text-decoration: none !important; border: none !important; color: #fff !important; }
.article a.button { margin-top: 15px; margin-bottom: 15px; }
.news { margin-top:20px; padding-top: 40px; padding-bottom: 40px; }
h3.new-title.portfolio { text-align: left; padding-top: 15px; margin-bottom: 30px; font-weight: bold; }
h3.new-title.portfolio a:hover { color: #ed145b; }
a { text-decoration: none !important; }

.no-gutters {
	margin-right: 0;
	margin-left: 0;
	padding: 0;
}	
.no-gutters > [class^="col-"], .no-gutters > [class * =" col-"] {
	padding-right: 0;
	padding-left: 0;
}
.logos h2, .informations h2 {
	font-weight:200 !important;
	color:#221e1e !important;
	font-size:2.4em !important;
	letter-spacing:0.5px !important;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}
article.homepage {
	overflow:hidden; 
	margin-top: 20px; 
	margin-bottom: 20px;
}
article.homepage:nth-of-type(3n+4) {
	clear: both;
}
article.homepage h3 a {
	font-weight:200 !important;
	color:#221e1e !important;
	font-size:1.6em !important;
	letter-spacing:0.5px !important;
}
article.homepage h3 a:hover {
	color:#221e1e !important;
}
.gallery {
	clear: both;
}
#project {
	margin-top: 50px;
}

.info {
	clear: both;
	margin-top: 50px;
	text-align: center;
}

#contact {
	margin-top: -200px;
	z-index: 2;
	background-color: #fff;
	padding: 20px;
	padding-top: 40px;
}
#contact h3.contact-title {
	font-weight:200 !important;
	color:#221e1e !important;
	font-size:1.6em !important;
	letter-spacing:0.5px !important;
}

@media (max-width: 1100px) {
	#logo {
		text-align: center;
	}
	.latest {
		width: 100%;
		text-align: left;
	}
	.latest h2 {
		font-weight:200;
		color:#221e1e;
		font-size:30px !important;
		letter-spacing:0.5px;
		margin-bottom: 20px;
		text-align: center;
		font-family:'bariol_lightlight' !important; 
		line-height: 35px;
	}
	.latest p {
		text-align: center;
	}
	.latest .product, .portfolio-work {
		text-align: left;
		margin-top: 20px;
		margin-bottom: 20px; 
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}
	
	.latest .product img, .portfolio-work img, .single-portfolio-work img {
		padding-top: 10px;
		width: 100% !important;
		height: auto !important;
	}
	
	.single-portfolio-work img {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.portfolio-work {
		margin-top: -40px;
	}
	
	.portfolio-work h3 {
		padding-bottom: 30px;
	}
	
	.portfolio-work:nth-of-type(2n+3) {
		clear: both;
	}
	
	.single-portfolio-work h1 {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	#gallery-1 img, .text img {
		float: left !important;
		clear: both !important;
		width: 100% !important;
		height: auto !important;
		border: none !important;
	}
	
	.address-info {
		padding-top: 20px;
	}
	
	.full-width {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.article {
		padding-bottom: 40px;
	}
	
	#copyright {
		margin-top: -80px;
	}
	
	article.homepage h3 {
		margin-top: -10px;
	}
	
	article.homepage .button {
		margin-bottom: -25px;
	}
}

@media (min-width: 1101px) {
	.latest {
		padding-top: 50px;
	}
	.latest h2 {
		font-weight:200;
		color:#221e1e;
		font-size:2.0em;
		letter-spacing:0.5px;
		margin-bottom: 20px;
		margin-left: 15px;
		text-align: right;
		margin-top: 10px;
		font-family:'bariol_lightlight' !important; 
		line-height: 35px;
	}
	.latest p {
		text-align: right;
	}
	.latest .product {
		margin-bottom:20px; 
	}
	article.homepage h3 {
		min-height: 100px;
	}
	article.homepage .description {
		min-height: 250px;
	}
	#gallery-1 img, .text img {
		float: left !important;
		clear: both !important;
		width: 65% !important;
		height: auto !important;
		border: none !important;
	}
	#project .header img.portfolio-img {  float: left; width: 65%; padding-right: 40px; }
	#project .description { float: left; }
	#project .description h1 { float: left; }
	#project .description .text { float: left; clear: both; }
}