@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'opificioregular';
    src: url('../fonts/opificio-webfont.eot');
    src: url('../fonts/opificio-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/opificio-webfont.woff') format('woff'),
         url('../fonts/opificio-webfont.ttf') format('truetype'),
         url('../fonts/opificio-webfont.svg#opificioregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



html,body{
 font-family: 'opificioregular',Arial, Helvetica, sans-serif;-webkit-font-smoothing: antialiased;
	width:100%;
	height:100%;
}

.logo{position:fixed;z-index:1;top:20px; left:50px; padding:35px 30px}

.navigation{/*position:fixed;z-index:1;top:20px; right:50px; */padding:50px 0; position:relative; float:right; z-index:99999}
.navigation li{display:inline;text-align:left;}
.navigation li:hover,.active{}

.navigation_mobile{ float:right;padding: 35px 10px 0; display:none}

/*mobile menu*/
.mobile_menu {list-style:none;float:left;font-weight:bold; background:#000; margin:5px 0; width:100%; padding:10px 0; }
.mobile_menu li {float:left;padding: 9px 0px 10px; display: block; width:100%; border-bottom:1px dotted #454444}
.mobile_menu li a {color:#FFF; font-size:0.8em; font-weight:bold; text-decoration:none; padding:5px 15px;}
.mobile_menu li:first-child a {list-style:none;}
.mobile_menu li.active a {color:#d9d9d9;list-style:none;}	
.clearboth { clear:both }
.logo_mobile{ width:40%;padding: 20px 0 0 20px; float:left; display:none}


.slide{
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
	width:60%;
	height:200px;
	margin:0 auto;
	position:relative;padding:200px 0 0 0
}
.slideno{
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}
.button{
	display:block;
	width:118px;
	height:130px;
	position:absolute;
	bottom:0px;
	left:47%;background-image:url(../images/arrow.png);
}
.button3{
	display:block;
	width:118px;
	height:130px;
	position:absolute;
	bottom:0px;
	left:47%;background-image:url(../images/arrow2.png); cursor:pointer
}
.button:hover{cursor:pointer;}
/******************************
 SLIDE 1 
*******************************/
#slide1{ background:url(../images/bg.jpg) #000;
	
}


#projects{
	background-color:#222020;
	
}


/******************************
 SLIDE 2 
*******************************/
#slide2{
	background-color:#222020;
	
}
#slide2 img:first-child{
	position:absolute;
top: 700px;
left: -150px;
}
#slide2 img:nth-child(2){
	position:absolute;
	top:300px;
	left:100px;
}
#slide2 img:nth-child(3){
	position:absolute;
	top:600px;
	left:300px;
}
#slide2 img:nth-child(4){
	position:absolute;
	top:400px;
	left:300px;
}
#slide2 img:nth-child(5){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(6){
	position:absolute;
	top:600px;
	right:300px;
}
#slide2 img:nth-child(7){
	position:absolute;
	top:400px;
	right:100px;
}
#slide2 img:nth-child(8){
	position:absolute;
	top:100px;
	right:300px;
}
/******************************
 SLIDE 3 
*******************************/
#slide3{
	background: url(../images/bg4.jpg) no-repeat #000;
}
#slide3 img:first-child{
	
top: 700px;
left: 300px;
}
#slide3 img:nth-child(2){
	position:absolute;
	top:100px;
	left:100px;
}
#slide3 img:nth-child(3){
	position:absolute;
	top:150px;
	left:300px;
}
#slide3 img:nth-child(4){
	position:absolute;
	top:450px;
	left:300px;
}
#slide3 img:nth-child(5){
	position:absolute;
	top:200px;
	right:300px;
}
#slide3 img:nth-child(6){
	position:absolute;
	top:100px;
	right:300px;
}
/******************************
 SLIDE 4 
*******************************/

#slide4{
	background: url(../images/CONTCATS3.jpg) no-repeat #000;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#slide4 .parallaxbg{
	position:absolute;
	right:40px;
	top:40px;
	font-size:28px;
	color:rgba(51,51,51,0.3);
}


/*intro*/
.intro{ text-align:center; padding:10px 0 10px;-webkit-font-smoothing: antialiased;}
.intro2{ text-align:center; padding:0px 0 60px;-webkit-font-smoothing: antialiased;}
.big_intro{font-size:36px; color:#fff}
.red{font-size:36px; color:#ea0819}
.intro_text2{font-size:17px; color:#fff; text-align:center; margin:0 0 20px 0;-webkit-font-smoothing: antialiased;}
.intro_text{font-size:17px; color:#fff; text-align:center; margin:0 0 50px 0;-webkit-font-smoothing: antialiased;}
.intro_text a{font-size:17px; color:#fff; text-decoration:none}
.intro_text2 a{font-size:17px; color:#fff; text-align:center; margin:0 0 50px 0;-webkit-font-smoothing: antialiased; text-decoration:none}
.intro_text a:hover{color:#666}
.mobile_menu{ display:none}


/*bx slider*/
.call_month{ background:red; padding: 6px; margin:  0; font-size: 1em; float: left; text-transform:uppercase;}
.call_slider{ position:relative; margin: 5px 0 20px; /*width:500px*/}
.slider{cursor:pointer;margin:0x; width:340px !important; height:300px;}
.bx-pager{ display:none !important;}
.bx-next{background:url(../images/next.png) no-repeat center;position:absolute;right:-100px;top:4px;overflow:hidden; width: 31px !important; height:74px; padding:100px 13px; text-indent:-999999px;}
.bx-prev{background:url(../images/prev.png) no-repeat center;position:absolute;left:-100px; top: 4px;overflow:hidden; width: 31px !important; height:74px; padding:100px 13px; text-indent:-999999px;}



/*top menu*/



.codrops-top a {text-decoration: none;padding: 0 1em 0;letter-spacing: 0.1em;color: #888;display: inline-block;}
.codrops-top a:hover {background: rgba(255,255,255,0.95);color: #716d62;}
.color-6 {background: #f19f0f;}

nav a {position: relative;display: inline-block;margin: 15px 25px;outline: none;color: #fff;text-decoration: none;letter-spacing: 1px;font-size:18px;}
nav a:hover {color: #ff0000}
nav a:hover,nav a:focus {outline: none;}
/* Effect 13: three circles */
.cl-effect-13 a::before {position: absolute;top: 100%;left: 50%;color: transparent;content: '•';text-shadow: 0 0 transparent;
	font-size: 12px;
	-webkit-transition: text-shadow 0.3s, color 0.3s;
	-moz-transition: text-shadow 0.3s, color 0.3s;
	transition: text-shadow 0.3s, color 0.3s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}
.cl-effect-13 a:hover::before,
.cl-effect-13 a:focus::before {color: #fff;text-shadow: 10px 0 #fff, -10px 0 #fff;}
.cl-effect-13 a:hover,.cl-effect-13 a:focus {color: #ff0000;}



.mobile_bulb{ display:none}
.bulb1{ position:absolute; left:100px; top:230px/*20%*/; opacity:0; width:15.9%}
.bulb2{ position:absolute; right:100px; top:230px;opacity:0; width:15.9%}
.shield{ position:absolute; right:47.4%; top:300px/*28.8%*/;display:none; width:5.5% }
.shine{ position:absolute; right:38%; top:245px/*28.8%*/;display:none; width:5.5% }
.shine2{ position:absolute; left:38%; top:245px/*28.8%*/;display:none; width:5.5% }
.expand{ width:100%}


/*fliping*/

.ch-item {
	width: 100%;
	height: 100%;
/*	border-radius: 50%;*/
	position: relative;
	cursor: default;
	-webkit-perspective: 900px;
	-moz-perspective: 900px;
	-o-perspective: 900px;
	-ms-perspective: 900px;
	perspective: 900px;
}
.ch-info{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	/*border-radius: 50%;*/
	background-position: center center;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.ch-info .ch-info-front {}

.ch-info .ch-info-back {
	-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	background: url(../images/polyhover.png) ;
	opacity: 0;
}

.ch-img-1 { 
	background-image: url(../images/poly1.png);
}

.ch-img-2 { 
	background-image: url(../images/poly2.png);
}

.ch-img-3 { 
	background-image:  url(../images/poly3.png);
}

.ch-img-4 { 
	background-image:  url(../images/poly4.png);
}


.ch-info h3 {color: #fff;font-size: 20px;margin: 0 15px;padding: 75px 0 0 0;'opificioregular'  Arial, Helvetica, sans-serif;-webkit-font-smoothing: antialiased; /*cursor:pointer*/}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:hover .ch-info-front {
	-webkit-transform: translate3d(0,183px,0) rotate3d(1,0,0,-90deg);
	-moz-transform: translate3d(0,183px,0) rotate3d(1,0,0,-90deg);
	-o-transform: translate3d(0,183px,0) rotate3d(1,0,0,-90deg);
	-ms-transform: translate3d(0,183px,0) rotate3d(1,0,0,-90deg);
	transform: translate3d(0,183px,0) rotate3d(1,0,0,-90deg);
	opacity: 0;
}

.ch-item:hover .ch-info-back {
	-webkit-transform: rotate3d(1,0,0,0deg);
	-moz-transform: rotate3d(1,0,0,0deg);
	-o-transform: rotate3d(1,0,0,0deg);
	-ms-transform: rotate3d(1,0,0,0deg);
	transform: rotate3d(1,0,0,0deg);
	opacity: 1;
}


.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width:167px;
	height:183px;
	display: inline-block;
	margin: 20px;
}


.flexslider {margin:30px 0 30px; background: none; border: 0px solid #fff; position: relative; display:none }

.projects{}
.projects_left{ float:left; width:40%; padding:10px 0 0 0}
.projects_left_mobile{ float:left; width:40%; padding:10px 0 0 0}
.projects_right{ float:right; width:50%}
.projects_title{ font-size:30px; color:#8c8c8c; margin:0 0 16px 0}
.projects_intro{font-size:14px; color:#8c8c8c;line-height: 17px;letter-spacing: 1px;}
.projects_link{font-size:14px; color:#666; border:1px solid #666; padding:10px 20px; float:left; margin:30px 0;letter-spacing: 1px; text-decoration:none}
.projects_link:hover{color:#7f7f7f; border:1px solid #7f7f7f;}

.social{display: block;
position: absolute;
bottom: 0px;
right: 5%; bottom:200px}
.red{ color:red !important}
.red_active{ color:red !important; border-bottom:2px dotted #F00; padding:0 0 5px 0;}
.fade{ display:none;position:absolute;bottom:170px; text-align:center; left:34%; font-size:30px !important;-webkit-font-smoothing: antialiased;}
.bold{ font-weight:bold;}

@-moz-document url-prefix() {
    .fade{ display:none;position:absolute;bottom:190px; text-align:center; left:34%; font-size:30px !important;-webkit-font-smoothing: antialiased;font-family: 'opificioregular',Arial, Helvetica, sans-serif;}
}


.projects_pic{
width: 37%;
float: left; margin:0 30px 0 0px
}