html{
	margin:0; 
	padding:0px;
	width:100%;
	height:100%;
	background-color:#fff;
}

body{
	margin:0; 
	padding:0px;
	
	height:100%;
	background-color:#fff;
}


.desktop body{display:none;overflow:hidden; position:relative; }


.desktop body:before, body:after {
    content: "";
    position: fixed;
    background: #fff;
    left: 0;
    right: 0;
    height: 10px;
}
.desktop body:before {
    top: 0;
}
.desktop body:after {
    bottom: 0;
}
.desktop body {
    border-left: 10px solid #fff;
    border-right: 10px solid #fff;  
}


html.mobile{background-color:#000}

@charset "utf-8";

@font-face {

  font-family: 'verlag_ro_book';

  src: url('fonts/VerlagRO-Book.eot?#iefix') format('embedded-opentype'),  url('fonts/VerlagRO-Book.woff') format('woff'), url('fonts/VerlagRO-Book.ttf')  format('truetype'), url('fonts/VerlagRO-Book.svg#VerlagRO-Book') format('svg');

  font-weight: normal;

  font-style: normal;

}

@font-face {

  font-family: 'verlag_black';

  src: url('fonts/Verlag-Black.eot?#iefix') format('embedded-opentype'),  url('fonts/Verlag-Black.woff') format('woff'), url('fonts/Verlag-Black.ttf')  format('truetype'), url('fonts/Verlag-Black.svg#Verlag-Black') format('svg');

  font-weight: normal;

  font-style: normal;

}

/* CSS Document */
td,div,a{text-shadow: 1px 1px #444;}

#canvas_wrapper{ z-index:30;}
.mobile #canvas_wrapper{overflow:auto !important}
.mobile .cd-modal .modal-content{overflow:scroll !important}

canvas {

    image-rendering: optimizeSpeed;

    image-rendering: -moz-crisp-edges;

    image-rendering: -webkit-optimize-contrast;

    image-rendering: -o-crisp-edges;

    image-rendering: crisp-edges;

    -ms-interpolation-mode: nearest-neighbor;

}


.mobile .hidden_mobile{display:none !important;}
.desktop .hidden_desktop{display:none !important;}

/* rezultat cu galeata */
.mobile .hidden_desktop {font-size:22px; text-align:center; width:88%; margin:20px auto;  padding-top: 20px;}
.mobile .hidden_desktop .galeata{width:90%; max-width:240px; margin:0 auto}
#triggerSlide{background:transparent; padding:16px 40px; border:2px solid #fff; font-family:'verlag_black', arial, verdana; font-size:16px;

cursor:pointer;

 outline: 0;

box-shadow: 0 5px 0 #15865b;



-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;



  transition-property: all;

  transition-duration: 0.1s;

  transition-timing-function: linear;

  

}

#triggerSlide:hover {

  background: #ff7b29;

 

}



#triggerSlide:active {

  box-shadow: 0 2px 0 #006599;

  transform: translateY(3px);

}

/*.mobile body{background:none;}*/



input {color:#fff}

img, a img{border:0px none;}

.center{margin:0 auto;}

.block{display:block;}

.spacer{width:100%; display:block; clear:both; height:20px;}





a{ text-decoration:none; }

div, a, input, textarea, td, body{font-family:verlag_ro_book, Arial, sans-serif; font-size:14px; color:#fff}

div.error, #lead_response {display:block; margin-top:10px; color:red;}

ul, li{margin:0px; padding:0px;}


.logo{position:absolute; top:30px; left:10px; z-index:60;}

.flippy>img {
    /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
    transform:scale(1,1);
    /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
    transition:all 600ms ease; }
    .flippy:hover>img {
        /**/-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);
        transform:scale(1,-1); }
		
		

.desktop .square{
	
	background:rgba(0,0,0,0.76); padding:50px; margin:0px auto; font-size:18px; text-align:center; line-height:23px;
 	width:40%; min-width:250px; max-width:400px; 
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	
	
	}

.desktop .square{min-width:0px; width:0px; overflow:hidden; font-size:0px; padding:0px; opacity:0}
.desktop .square p, .desktop .square input{display:none}

.mobile .square{margin-top:20px;}
.mobile body{background-color:#000;}



#culoarea_zilei{
  	width: 40%;
    /* margin: 0 auto; */
    padding: 0px;
    position: absolute;
    position: absolute;
    top: 163px;
    left: 181px;
    /* transform: translate(-50%, -50%); */
    z-index: 60;

  }



#culoarea_zilei .color{width:0px; background-color:#fff; padding:4px; color:#474747; font-size:17px; font-family: 'verlag_black', arial, verdana;}
.desktop #culoarea_zilei .color{min-width:0px; width:0px; height:0px; overflow:hidden; font-size:0px; padding:0px; opacity:0;text-shadow: 0px 0px #444;}

#culoarea_zilei .swatch {
    position: relative;
    width: 176px;
    padding: 12px;
    height: 186px;
    color: #fff;
    text-shadow: 1px 1px #444;
    font-size: 23px; /*33px;*/
    font-family: 'verlag_ro_book', arial, verdana;
    margin-bottom: 4px;
}

#culoarea_zilei .logo_small{   position: absolute;   bottom: 6px;   left:6px;}

#culoarea_zilei .viata{
    width: 194px;
    text-align: right;
    display: block;
    margin-top: 38px;
    padding-right: 6px;
    font-size: 18px;
    font-family: 'verlag_ro_book', arial, verdana;
	text-shadow: 1px 1px #fff;
}

#culoarea_zilei .viata strong{font-family: 'verlag_black', arial, verdana;text-shadow: 1px 1px #fff;}

.ovr .inner{ 
	 position: relative;
     width: 100%;
    height: 100%;
	display:block;
	}

.ovr .content{text-align:center; font-size:18px;color:#706870;text-shadow: 0px 0px #444; text-transform:uppercase;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	position: absolute;
  
	}
.ovr .content img.galeata{width:100%; max-width:240px; margin:20px auto;}
.ovr .content a, .ovr .content h5{font-size:13px; color:#706870; text-decoration:none;text-transform:uppercase;text-shadow: 0px 0px #444;}
.ovr .content a.box{display:inline-block; padding:10px; border:1px solid #706870; margin:15px auto 0px auto; -webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;}
.ovr .content a.box:hover{background:#fff;}
.desktop .ovr .content{display:none;}


/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */

.cl-effect-2{
	
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
	
	 position: relative;
    display: inline-block;
   
    outline: none;
	width:150px;
	margin:auto;
 
		
}


.cl-effect-2 span {
	position: relative;
	display: inline-block;
	cursor:pointer;
	
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

 .cl-effect-2 span::before {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	color:#474747;
	
	content: attr(data-hover);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.cl-effect-2:hover span,
.cl-effect-2:focus span {
	-webkit-transform: rotateX(90deg) translateY(-28px);
	-moz-transform: rotateX(90deg) translateY(-28px);
	transform: rotateX(90deg) translateY(-28px);
}

 .cl-effect-2:hover span::before,
 .cl-effect-2:focus span::before {
	background: #fff;	
}


/* ----  */

footer{width:94%; margin:0 auto; padding:20px 2%; position:fixed; bottom:0px; z-index:9999}

footer a{margin-left:20px;}

footer .left{float:left; width:50%;}

footer .right{float:left; width:50%; text-align:right;}

#waiting .cnt{
	width:100%;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
	text-shadow: 1px 1px #444;
	color:#fff;
	font-size:22px;	
	
}
#waiting{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	
}





/* FLIP THE SMALL PIN */
.panel {
   width: 29px;
    height: 27px;
    margin: auto;
    position: relative;
}

.panel .card {
   width: 100%;
    height: 100%;
	
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
	
	
}

.panel .cfront {
    z-index: 200;
    background-image: url(images/pin.png);

}

.panel .cback {
    z-index: 100;
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);  
    transform: rotateY(-180deg);  
	
    background-image: url(images/pin.png);

}

.flipping:hover .cfront {
    z-index: 100;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flipping:hover .cback {
    z-index: 200;   
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
/* FLIP THE SMALL PIN */

.ripple_ovr{
	width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0px;
    right: 0px;
	display:none;
}

/* FLIP STUFF */
/* entire container, keeps perspective */
.desktop .flip-container {
	perspective: 1000px;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.desktop .flip-container.hover .back {
		transform: rotateY(0deg);
		
	}
	.desktop .flip-container.hover .front {
	    transform: rotateY(180deg);
	}

.desktop .flip-container, .desktop .front, .desktop .back {
	width: 100%;
	height: 100%;
}

/* flip speed goes here */
.desktop .flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	top:10px;
	position: absolute;
	    overflow: hidden;
		border:1px solid transparent;
		
}

/* hide back of pane during swap */
.desktop .front, .desktop .back {
	backface-visibility: hidden;
	transition: 1.1s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.desktop .front {
	z-index: 3;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.desktop .back {
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.desktop .vertical.flip-container {
	position: relative;
}

	.desktop .vertical .back {
		transform: rotateX(180deg);
	}

	.desktop .vertical.flip-container.hover .backx {
	    transform: rotateX(0deg);
	}

	.desktop .vertical.flip-container.hover .front {
	    transform: rotateX(180deg);
	}
	
.desktop .ovr{
	    display: none;
    width: 35%;
    height: 100%;
    position: absolute;
    z-index: 30;
    top: 0px;
    right: 0px;
    background-color: rgba(255,255,255,0.7);
    min-width: 550px;
	}
.mobile .ovr{display:none}

/* FLIP STUFF */

.mobile .back{display:none;}
.mobile .front{margin-bottom:40px; width:100%;;}
.mobile body{overflow:visible;}
/*.mobile .flipper{height:auto !important;}*/
.mobile footer div{display:block; float:none; width:100%; text-align:center; margin:10px auto; line-height:12px;}
.mobile #canvas_wrapper{overflow:hidden;width:100%; height:100%; top:-100px; left:20px; margin:0 auto;   position: absolute;
    z-index: 20;
    top: 0px;
    left: 0px;
}
.mobile .front .logo{z-index: 30}


/* SLIDER STUFF */
#viewport{width:100%; height:100%; width:1980px; height:1000px; overflow:hidden;position:absolute; font-size: 0px; z-index:1; }
#slider {width:100%; height:100%; display: inline; white-space: nowrap;overflow:visible; }
#slider div{display:inline; clear:none; margin:0px;height:100%; padding: 0px; width: auto;font-size: 0px; overflow:hidden; }
#slider div img{height:100%; margin:0px}
#slider div.last img{width:100%;  margin:0px auto}

/* -------------------------------- 

Gooey Effect

-------------------------------- */
/* Modal Window */
.cd-modal-trigger{display:none}
.cd-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  height: 100%;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-modal .modal-content {
  height: 100%;
  overflow: hidden;
  padding:0;
}
.cd-modal h1, .cd-modal h2 {
  text-align: center;
}
.cd-modal p {
  line-height: 1.6;
  margin: 2em auto;
  max-width: 800px;
}
.cd-modal .modal-close {
  /* 'X' icon */
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 5%;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  color: transparent;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: visibility 0s .3s, opacity .3s 0s, -webkit-transform .3s 0s;
  transition: visibility 0s .3s, opacity .3s 0s, -webkit-transform .3s 0s;
  transition: transform .3s 0s, visibility 0s .3s, opacity .3s 0s;
  transition: transform .3s 0s, visibility 0s .3s, opacity .3s 0s, -webkit-transform .3s 0s;
}
.cd-modal .modal-close::before, .cd-modal .modal-close::after {
  content: '';
  display: inline-block;
  position: absolute;
  height: 2px;
  width: 20px;
  top: calc(50% - 1px);
  left: calc(50% - 10px);
}
.cd-modal .modal-close::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.cd-modal .modal-close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.cd-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .7s, visibility 0s;
  transition: opacity .7s, visibility 0s;
}
.cd-modal.visible .modal-content {
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
}
.cd-modal.visible .modal-close {
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0s 0s, opacity .3s 0s, -webkit-transform .3s 0s;
  transition: visibility 0s 0s, opacity .3s 0s, -webkit-transform .3s 0s;
  transition: transform .3s 0s, visibility 0s 0s, opacity .3s 0s;
  transition: transform .3s 0s, visibility 0s 0s, opacity .3s 0s, -webkit-transform .3s 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
@media only screen and (min-width: 1100px) {
  .cd-modal .modal-content {
    padding: 0;
  }
  .cd-modal .modal-close {
    height: 60px;
    width: 60px;
  }
  .cd-modal .modal-close::before, .cd-modal .modal-close::after {
    height: 2px;
    width: 26px;
    top: calc(50% - 1px);
    left: calc(50% - 13px);
  }
  .cd-modal p {
    font-size: 2rem;
  }
}

/* Transition Layer */
.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-2%);
          transform: translateY(-50%) translateX(-2%);
  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible;
}
.cd-transition-layer.visible .bg-layer {
  -webkit-transform: translateY(-50%) translateX(-98%);
          transform: translateY(-50%) translateX(-98%);
}
.cd-transition-layer.opening .bg-layer, .cd-transition-layer.closing .bg-layer {
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
  display: none;
}



/* Main Content */
.cd-main-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  /* vertically align its content */
  display: table;
}
.cd-main-content .center {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}


.gooey-transition .cd-main-content {
  background: transparent;
}
.gooey-transition .cd-modal {
  background: transparent;
}
.gooey-transition .cd-modal .modal-content {
  
}
.gooey-transition .cd-modal .modal-close::before,
.gooey-transition .cd-modal .modal-close::after {
  background: transparent;
}

.gooey-transition .cd-transition-layer .bg-layer {
  /* sprite composed of 25 frames */
  width: 2500%;
  background-image: url(assets/images/gooey.svg);

 
}
.gooey-transition .cd-transition-layer.opening .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24) forwards;
          animation: cd-sequence 0.8s steps(24) forwards;
}
.gooey-transition .cd-transition-layer.closing .bg-layer {
  -webkit-animation: cd-sequence 0.8s steps(24) forwards reverse;
          animation: cd-sequence 0.8s steps(24) forwards reverse;
}
@media only screen and (min-width: 768px) {
  .gooey-transition h1 {
    font-size: 8rem;
  }
  .gooey-transition h2 {
    font-size: 6rem;
  }
}
/* -------------------------------- 

Animations

-------------------------------- */
@-webkit-keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    -webkit-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
    -webkit-transform: translateY(-50%) translateX(-98%);
            transform: translateY(-50%) translateX(-98%);
  }
}
@-webkit-keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@keyframes cd-sequence-2 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-1.3158%);
            transform: translateY(-50%) translateX(-1.3158%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-98.6842%);
            transform: translateY(-50%) translateX(-98.6842%);
  }
}
@-webkit-keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}
@keyframes cd-sequence-3 {
  0% {
    -webkit-transform: translateY(-50%) translateX(-2.5%);
            transform: translateY(-50%) translateX(-2.5%);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(-97.5%);
            transform: translateY(-50%) translateX(-97.5%);
  }
}
/* SLIDER STUFF */


/* GALERIE */
body.galerie_page{background-color:#fff;}
.mobile body.galerie_page footer{display:block;}
.desktop .galerie_content{width:100%; height:100%; position:relative; background-position: left top; background-repeat:no-repeat; background-color: #AFAFAF;}
.mobile .galerie_content{width:100%; height:100%; min-height:915px; background-repeat:no-repeat; max-width:492px; margin:0 auto;   background-position:0px 200px;}

.desktop .sharing{ position:absolute; top:200px; left:10px;}
.mobile .sharing{     position: relative;
    margin: 0 auto;
    display: block;
    text-align: center;
    padding-top: 60px;}

/* GALERIE */


/* @media (max-width: 426px) { */
@media (max-width: 768px) {

	.logo{z-index:70}
	#culoarea_zileix{ width:auto; position:relative; margin:30px auto 0px auto; top:auto; left:auto;   transform: none; clear:both;  display:none; }
	#culoarea_zilei {
    width: auto;
    position: relative;
    margin: 0px auto 0px auto;
    top: 0px;
    left: 0px;
    transform: none;
    clear: both;
    display: none;
    background-color: rgba(0,0,0,0.38);
    padding-top: 155px;
    padding-bottom:100px;
    top: -100px;}
	
	#culoarea_zilei .color{ width: 200px; display:block; clear:both; margin:0 auto;}

	#culoarea_zilei .galeata{position:relative; display:block; clear:both; width:auto;line-height:30px; float:none; bottom:auto; right:auto; margin:20px auto;}

	#culoarea_zilei .galeata img{width:90%; max-width:200px; margin:0 auto; display:block;}

	.ovr .content{ position:relative; display:block; top:auto; left:auto; transform: translate(0,0);}
	
	.flipper{overflow:visible; height:auto; min-height:100%; display:block;}
	
	
	/* SLIDER STUFF */
	
	#slider div{width:auto; height:100%;  }
	#slider div img{height:100%; width:auto; margin:0px}
	#slider div.last img{width:100%; height:100%; margin:0px}



	html, body{

		height:100%; overflow:visible; background-size:auto; 

		-webkit-background-size: 100%; 

		-moz-background-size: 100%; 

		-o-background-size: 100%; 

		background-size: 100%; 

		-webkit-background-size: cover; 

		-moz-background-size: cover; 

		-o-background-size: cover; 

		background-size: cover;

		

		background-image:none !important;

	}


	.logo {

		position: relative;

		display:block;

		width:120px;

		clear:both;
		

	}
	.front, .flipper, .back{margin:0 auto;}

	 .square{
	
		 width: 80%;
	
		  margin:0px auto;
	
		  position:relative;
	
		  max-width:700px;
	
		  padding:30px 0px 0px 0px;
	
		  line-height:20px;
		  font-family: verlag_ro_book, Arial, sans-serif;
		  font-size:18px;
		  text-align:center;
	
		}

	footer{width:80%; margin:0 auto; position:relative; display:block; clear:both;}
	

}