@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700&subset=latin-ext);

@font-face {
  font-family: 'antonio-light';
  font-style: normal;
  font-weight: 400;
  src: local('Antonio Light'),
       url('../font/antonio-light.woff2') format('woff2'), 
       url('../font/antonio-light.woff') format('woff'),
       url('../font/antonio-light.ttf') format('ttf'),
       url('../font/antonio-light.eot') format('eot');
}


#page { background:#fff; width:100%; }

/* -------------- header ----------------- */
header { overflow:hidden; width:1000px; margin:0 auto; padding:14px 0 14px 0; }
header .logo { float:left; text-align:center; margin:7px 0 0 7px; }
header .phone { float:right; margin:0 7px 0 0; }
header .phone .nr { font:40px/40px 'antonio-light'; color:#EA0313; padding-bottom:3px; }
header .phone .nr span { font-size:32px; color:#4a4a4a; padding:0 6px 0 0; }
header .phone .buton { position:relative; font:600 22px/35px 'Titillium Web'; height:35px; color:#fff; border-radius:3px; background:#f48ba0; padding:0 10px; cursor:pointer; }
header .phone .buton:hover { background:#EA0313; }
header .phone .buton span { display:block; width:63px; height:8px; background:url(../images/umbra_buton_apel.gif) 0 0 no-repeat; position:absolute; left:-63px; bottom:0; }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.modal-window {
    position: relative;
    background-color: #FFFFFF;
    width: 50%;
    margin: 10% auto;
    padding: 20px;
}

.modal-window.small {
    width: 30%;
}

.modal-window.large {
    width: 75%;
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0,0,0,0.3);
    height: 30px;
    width: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

.close:hover,
.close:focus {
    color: #000000;
    cursor: pointer;
}

.open {
    display: block;
}


 @media (max-width: 992px) {
	header { width:100%; }	 
 }
 
 
 @media (max-width: 768px) {
   header .logo { float:none; margin:0 0 10px 0; }  
   header .logo img { width:70%; margin:0 15%;   }
   header .phone { float:none; text-align:center; }
   header .phone .nr { display:inline-block; margin:0 15px 0 15px; position:relative; z-index:9; }
   header .phone .buton { display:inline-block; margin:0 15px 0 15px; position:relative; top:-8px; }
}


/* -------------- oferta ----------------- */

.oferta { background:#e6e8e8 url(../images/oferta_bg.jpg) 50% 0 no-repeat;  }
.oferta > div { position:relative; overflow:hidden; width:1000px; margin:0 auto; background:#E5E5E5; }
.oferta > div > img { width:100%; }
.oferta h3 { font:600 36px/42px 'Titillium Web'; color:#fff; background:#F77C1A; padding:25px 20px 25px 20px; margin:0; overflow:hidden; text-align:center; }
.oferta .video { width:700px; float:left; position:relative; }
.oferta .video > span { position:absolute; top:-15px; left:20px; right:20px; text-align:center; z-index:99; font:400 18px/20px 'Titillium Web'; color:#fff; background:#3DCD11; padding:6px 8px; display:none; }
.oferta .video > div { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.oferta .video > div iframe,
.oferta .video > div object,
.oferta .video > div embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.reg_box { position:relative; float:right; width:300px; overflow:hidden; }  
.reg_box .mesaj { color:#4a4a4a; font:32px/30px 'antonio-light'; padding:36px 25px 12px 27px; display:block; }
.reg_box form { overflow:hidden; padding:0 25px; }
.reg_box input { border: 1px solid #4a4a4a; border-radius:3px; padding: 9px 5px 9px 35px; width:100%; color: #2E2E2E; background:#fff; }
.reg_box input.error {border:  1px solid #FF3333 !important;}
.reg_box .input { position:relative; margin-bottom:12px; }
.reg_box .input i {position: absolute; margin:14px 12px 11px 12px; color:#4a4a4a;}
.reg_box .submit { font:600 22px/34px 'Titillium Web'; margin:0 auto; }
.reg_box .smal_text{font-size: 16px;}
.reg_box .succesfull { color:#1A1A1A; padding:5px 0 0 25px; }
.reg_box .skidka{position: absolute; right: -10%; top: -15%;}


 @media (max-width: 992px) {
	.oferta > div { width:100%; }	 
 }
 
 
 @media (max-width: 768px) {
   .reg_box { position:relative; right:0; bottom:0; width:100%; }
   .reg_box .input { }
   .reg_box .submit { }
   .oferta .video { width:100%; }
   .oferta h3 { font:600 26px/28px 'Titillium Web'; }
   .oferta .video > span { font:400 14px/16px 'Titillium Web'; }
}


/* -------------- personaje ----------------- */
.personaje { position:relative; width:1000px; margin:0 auto;  }
.personaje ul { margin:10px 0 0 0; padding:0; list-style:none; overflow:hidden; }
.personaje ul li { float:left; padding:3px; margin:0 0 10px 10px; }
.personaje ul li.none { margin-left:0; }
.personaje ul li.rosu { background:#ff0000; }
.personaje ul li.albastru { background:#0194f1; }
.personaje ul li.portocaliu { background:#f7b71e; }
.personaje ul li.verde { background:#3dcd11; }
.personaje ul li a { display:block; width:236px; color:#fff; text-decoration:none; }
.personaje ul li .nume { display:block; text-align:center; font:26px/26px 'Titillium Web'; padding:8px 0 14px 0; }
.personaje ul li .photo { }
.personaje ul li .photo img { width:236px; }

 @media (max-width: 992px) {
	.personaje { width:100%; }	 
 }
 
 
 @media (max-width: 768px) {
 
}

 @media (max-width: 480px) {
	.personaje h2 { text-align:center; }
	.personaje ul li { float:none; margin:0 0 10px 0; }
	.personaje ul li a { width:100%; }
	.personaje ul li .photo img { width:100%; }
}