@charset "utf-8";

*{
    margin:0;
    padding:0;
    
}

html {
	width:100%;
    height:100%; 
    overflow:hidden;
}
body{ 
    overflow:hidden; 
    height:100%;
}
.gradient{
    background:#EFDCE5;
  	background-image: radial-gradient(center center, circle cover, #EFFAFC, #F07A99);
	background-image: -o-radial-gradient(center center, circle cover, #EFFAFC, #F07A99);
	background-image: -ms-radial-gradient(center center, circle cover, #EFFAFC, #F07A99);
	background-image: -moz-radial-gradient(center center, circle cover, #EFFAFC, #F07A99);
	background-image: -webkit-radial-gradient(center center, circle cover, #EFFAFC, #F07A99); 
}
.blur img {
	-webkit-transition: -webkit-filter 1s;
      border:2px solid #fff;
      margin-left:-2px;
} 
.blur:nth-child(1) {
  -webkit-filter: grayscale(20%);
     opacity:0.4;
}
.blur:hover {
 __-webkit-filter: contrast(100%);
 cursor:pointer;
 -webkit-filter: contrast(150%);
 opacity:10;
}
.zoom {
  display:inline-block;
  position: relative;
  width:50%;
  float:left;
}

.zoom img {
  display: block;
}
.zoom img::selection { 
  background-color: transparent; 
  }
 button,input,select,textarea,img,div,a{-webkit-tap-highlight-color:rgba(0,0,0,0);}   
 .html5-progress-bar {
	padding: 15px 15px;
	border-radius: 0px;
	background: #fff;
	box-shadow:  0px 1px 2px 0px rgba(0, 0, 0, .2);
    z-index:900;
}
.html5-progress-bar .progress-bar-wrapper {
	background: #f3f3f3;
	border: 0;
	width: 100%;
	height: 18px;
	border-radius: 0px;
}
.mejs-controls{
    display:none;
}
.html5-progress-bar #progressbar {
    width:0;
	background: #cdeb8e;
	background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956));
	background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%);
	background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 );
	border-radius: 0px;
       height: 18px;
}
.demo-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    width: 150px;
    height:18px;
    z-index: 900;
    margin:auto;
}  
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.rezolutie{
    display:none; 
    width:700px;
    margin:auto;
    overflow: hidden;
    border-left:4px solid #FFF;
    border-right:4px solid #FFF;
    z-index:600;
}
.albastru{
    display:block;
    width:60%;
    background:#005B8D;
    background-image: linear-gradient(left, #005B8D, #0087C1);
	background-image: -webkit-linear-gradient(left, #005B8D, #0087C1);
	background-image: -moz-linear-gradient(left, #005B8D, #0087C1);
	background-image: -o-linear-gradient(left, #005B8D, #0087C1);
	background-image: -ms-linear-gradient(left, #005B8D, #0087C1);  
    border-right:2px solid #FFF;
    border-bottom:2px solid #FFF;
}
.albastru:hover{
    background:#005C8E url("../img/karina.jpg") bottom left no-repeat;
    background-size: cover; 
	-webkit-transition: all 100ms ease-out;
	-moz-transition: all 100ms ease-out;
	-o-transition: all 100ms ease-out;
	-ms-transition: all 100ms ease-out;	
	transition: all 100ms ease-out;
}

.verde{
    width:40%;
    background:#5E9021;
    background-image: linear-gradient(left, #5E9021, #A2B508);
	background-image: -webkit-linear-gradient(left, #5E9021, #A2B508);
	background-image: -moz-linear-gradient(left, #5E9021, #A2B508);
	background-image: -o-linear-gradient(left, #5E9021, #A2B508);
	background-image: -ms-linear-gradient(left, #5E9021, #A2B508);   
    border-left:2px solid #FFF;
    float:right; 
    clear:right;
}

.rosu{
    width:40%;
    background-image: linear-gradient(left, #CD222E, #DF7A89);
	background-image: -webkit-linear-gradient(left, #CD222E, #DF7A89);
	background-image: -moz-linear-gradient(left, #CD222E, #DF7A89);
	background-image: -o-linear-gradient(left, #CD222E, #DF7A89);
	background-image: -ms-linear-gradient(left, #CD222E, #DF7A89);   
    border-left:2px solid #FFF;
    float:right; 
    clear:right;   
}
.verde:hover{
    background:url("../img/ade.jpg") center top no-repeat;
    background-size: cover; 
	-webkit-transition: all 100ms ease-out;
	-moz-transition: all 100ms ease-out;
	-o-transition: all 100ms ease-out;
	-ms-transition: all 100ms ease-out;	
	transition: all 100ms ease-out;
}

.galben{
    width:40%;
    background-image: linear-gradient(left, #F3BE31, #FADA8A);
	background-image: -webkit-linear-gradient(left, #F3BE31, #FADA8A);
	background-image: -moz-linear-gradient(left, #F3BE31, #FADA8A);
	background-image: -o-linear-gradient(left, #F3BE31, #FADA8A);
	background-image: -ms-linear-gradient(left, #F3BE31, #FADA8A);  
    border-top:2px solid #FFF;
    border-bottom:2px solid #FFF;
    border-left:2px solid #FFF;
    float:right;    
    clear:right;
    z-index:900;
}
.galben:hover{
  cursor:pointer;
  background:#F3BE31 url("../img/logh.png") center no-repeat;
  background-size: cover; 
  
}
.pul{
      background:#F3BE31 url("../img/log.png") center no-repeat;
      
}
.fullscreen-supported {
    background: url(http://api-sms.web-adv.ro/img/full.png) no-repeat;
    width: 39px;
    height: 39px;
    margin-top: 22px;
    margin-right: 20px;
    float: right;
    cursor: pointer;
}

#ceas{
    padding:30px 10px 10px;
    font-size:55px;
    color:#FFF;
    font-weight: normal;
    position: absolute;
}
#zi{
  font-family:Arial;
  color:#A3CADD;  
  font-size:25px;
  padding:100px 10px 10px;
  float:left;
}
.jos{
    display:none;
    width:700px;
    margin:auto;
    background:#E77E98;
	background-image: linear-gradient(45deg, #EC4371, #E77E98);	
	background-image: -webkit-linear-gradient(45deg, #EC4371, #E77E98);
	background-image: -moz-linear-gradient(45deg, #EC4371, #E77E98);
	background-image: -o-linear-gradient(45deg, #EC4371, #E77E98);
	background-image: -ms-linear-gradient(45deg, #EC4371, #E77E98);
    clear:both;
    /*border-radius:0 0 30% 0%;*/
    overflow: hidden;
}
.sunet{
display:none;
font-size:18px;
text-align:center;
padding:10px;
color:#fff;
z-index:900;
position:relative;
animation: sunet 1s steps(15, start) infinite;
-webkit-animation: sunet 2s steps(15, start) infinite; 
  
  
}
@keyframes sunet {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes sunet {
  50% {
    opacity: 0.0;
  }
}
img{
    border:0;
}
.image{
    background:url("florile.jpg") center   no-repeat;
    background-size:cover;
    width:240px;
    border-right:2px solid #FFF;
    cursor:cell;
    float:left;
}
.image:hover{
   	-webkit-transition: all 100ms ease-out;
	-moz-transition: all 100ms ease-out;
	-o-transition: all 100ms ease-out;
	-ms-transition: all 100ms ease-out;	
	transition: all 100ms ease-out;
    
}

.parent{
  position : relative;
  float:right;
}

.control
{
  position : absolute;
  top: 0 ;
  right: 0 ;
  bottom : 0 ;
  left : 0;
  margin : auto;
}

.control{
  background:#FFF;
  text-align:center;
  border-radius: 50%;
  border: 30px solid #F1B3C2;
  box-shadow: 0px 0px 0px 30px #EE90A8;
  cursor:pointer;
 
}
.control,
.control:before {
  display: inline-block;
  vertical-align: middle;
  transition: border 0.4s, width 0.4s, height 0.4s, margin 0.4s;
  transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
 
}
.cucu{
 background:url("play.png?rg")  center no-repeat;
 border-radius:50%;
 -webkit-transition: -webkit-transform .8s ease-in-out;
 transition: transform .8s ease-in-out;
 top: 0 ;
  right: 0 ;
  bottom : 0 ;
  left : 0;
  position : absolute;
  margin:auto;
}
.cucu:hover {
 -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.bau{
 background:url("stop.png?rg")  center no-repeat;
 border-radius:50%;
 top: 0 ;
  right: 0 ;
  bottom : 0 ;
  left : 0;
  position : absolute;
  margin:auto;
}

/***********/
.salbastru, .sverde, .sgalben{
    overflow: hidden;
    cursor:cell;
    position:relative;  
    z-index:100;
}
.salbastru .caption{
    position: absolute;
    top: 0;
    left: 0;
	bottom: 0;
	right: 0;
    width: 250px;
 
}
.sverde .caption{
    position: absolute;
    top: -50px;
    left: 0;
	bottom: 0;
	right: 0;
    margin:auto;
    width: 200px;
}

.sgalben .caption{
    position: absolute;
    top: -50px;
    left: 0;
	bottom: 0;
	right: 0;
    margin:auto;
    width: 250px;
}
.cerc:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index: 1;
    -webkit-transform: scale(0,0);
    -ms-transform: scale(0,0);
    -o-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}
.cerc:hover:before{
    -webkit-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}

.cerc .caption {
    background: url(burst.png) 0 0 no-repeat;
    -webkit-animation: capcircleout 0.75s steps(20) forwards;
    -o-animation: capcircleout 0.75s steps(20) forwards;
    animation: capcircleout 0.75s steps(20) forwards;

}

.cerc:hover .caption {
    -webkit-animation: capcirclein 0.75s steps(20) forwards;
    -o-animation: capcirclein 0.75s steps(20) forwards;
    animation: capcirclein 0.75s steps(20) forwards;
}


@-webkit-keyframes capcirclein {
    from { background-position: 0 0; }
    to { background-position: -5000px 0; }
}
@-o-keyframes capcirclein {
    from { background-position: 0 0; }
    to { background-position: -5000px 0; }
}
@-moz-keyframes capcirclein {
    from { background-position: 0 0; }
    to { background-position: -5000px 0; }
}
@keyframes capcirclein {
    from { background-position: 0 0; }
    to { background-position: -5000px 0; }
}
@-webkit-keyframes capcircleout {
    from { background-position: -5000px 0; }
    to { background-position: 0px 0; }
}
@-o-keyframes capcircleout {
    from { background-position: -5000px 0; }
    to { background-position: 0px 0; }
}
@-moz-keyframes capcircleout {
    from { background-position: -5000px 0; }
    to { background-position: 0px 0; }
}
@keyframes capcircleout {
    from { background-position: -5000px 0; }
    to { background-position: 0px 0; }
}

.linii:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

.linii:hover:before{
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform:translateX(0%);
    transform: translateX(0%);
}
.linii .caption {
    background: url(up_burst.png) no-repeat;
    background-position: 0 0;
    -webkit-animation: capsideout 0.68s steps(17) forwards;
    -o-animation: capsideout 0.68s steps(17) forwards;
    animation: capsideout 0.68s steps(17) forwards;
	-webkit-transform: rotate(90deg);
    -ms-transform: translateX(90deg);
    -o-transform:translateX(90deg);
    transform: translateX(90deg);

}

.linii:hover .caption {
    -webkit-animation: capsidein 0.68s steps(17) forwards;
    -o-animation: capsidein 0.68s steps(17) forwards;
    animation: capsidein 0.68s steps(17) forwards;
}
@-webkit-keyframes capsidein {
    from { background-position: 0 0; }
    to { background-position: -4250px 0; }
}
@-o-keyframes capsidein {
    from { background-position: 0 0; }
    to { background-position: -4250px 0; }
}
@-moz-keyframes capsidein {
    from { background-position: 0 0; }
    to { background-position: -4250px 0; }
}
@keyframes capsidein {
    from { background-position: 0 0; }
    to { background-position: -4250px 0; }
}
@-webkit-keyframes capsideout {
    from { background-position: -4250px 0; }
    to { background-position: 0px 0; }
}
@-o-keyframes capsideout {
    from { background-position: -4250px 0; }
    to { background-position: 0px 0; }
}
@-moz-keyframes capsideout {
    from { background-position: -4250px 0; }
    to { background-position: 0px 0; }
}
@keyframes capsideout {
    from { background-position: -4250px 0; }
    to { background-position: 0px 0; }
}

.romb:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform: scale(0,0) rotate(45deg);
    -ms-transform: scale(0,0) rotate(45deg);
    -o-transform: scale(0,0) rotate(45deg);
    transform: scale(0,0) rotate(45deg);
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

.romb:hover:before{
    -webkit-transform: scale(1.5,1.5) rotate(45deg);
    -ms-transform: scale(1.5,1.5) rotate(45deg);
    -o-transform: scale(1.5,1.5) rotate(45deg);
    transform: scale(1.5,1.5) rotate(45deg);
}

.romb .caption {
    background: url(rumb_burst.png) no-repeat;
    background-position: 0 0;
    -webkit-animation: caprumbout 1s steps(25) forwards;
    -o-animation: caprumbout 1s steps(25) forwards;
    animation: caprumbout 1s steps(25) forwards;

}

.romb:hover .caption {
    -webkit-animation: caprumbin 1s steps(25) forwards;
    -o-animation: caprumbin 1s steps(25) forwards;
    animation: caprumbin 1s steps(25) forwards;
}
@-webkit-keyframes caprumbin {
    from { background-position: 0 0; }
    to { background-position: -6250px 0; }
}
@-o-keyframes caprumbin {
    from { background-position: 0 0; }
    to { background-position: -6250px 0; }
}
@-moz-keyframes caprumbin {
    from { background-position: 0 0; }
    to { background-position: -6250px 0; }
}
@keyframes caprumbin {
    from { background-position: 0 0; }
    to { background-position: -6250px 0; }
}
@-webkit-keyframes caprumbout {
    from { background-position: -6250px 0; }
    to { background-position: 0px 0; }
}
@-o-keyframes caprumbout {
    from { background-position: -6250px 0; }
    to { background-position: 0px 0; }
}
@-moz-keyframes caprumbout {
    from { background-position: -6250px 0; }
    to { background-position: 0px 0; }
}
@keyframes caprumbout {
    from { background-position: -6250px 0; }
    to { background-position: 0px 0; }
}
.retea{
    font-family:Arial;
    color:#fff;
    font-size:23px;
    padding:1px 10px 10px 0px; /* 3 */
    margin-left:5px;
    background:url("retea.png")  top -10px no-repeat;
    height:25px;

}
#semnal {
  height: 15px;
  list-style: none;
  overflow: hidden;
  margin:5px 0 0 2px;
  float:left;
}
#semnal li {
  display: inline-block;
  width: 5px;
  float: left;
  height: 100%;
  margin-right: 1px;
}
#semnal li.maxim {
  padding-top: 0px;
}
#semnal li.puternic {
  padding-top: 4px;
}
#semnal li.slab {
  padding-top: 8px;
}
#semnal li.foarte-slab {
  padding-top: 13px;
}
#semnal li div {
  height: 100%;
  background: #fff;
 
}
.baterie {
	width: 45%;
	height: 35px;
    top: 15%;
    left:25%;
    position: relative;
	background: #B6CA71;
    border-radius: 4px;
}

.baterie:after {
	content: '';
	display: block;
	width: 8px;
	height: 20px;
	background: #B8CA70;
    border-radius: 0 4px 4px 0;
	position: absolute;
	right: -10px;
	top: 7.4px;
}
.baterie .nivel {
	height: 100%;
	/*width: 53%;*/
}

.baterie .nivel.mediu {
	background-color: #B6BF00;	
}
.bateried{
	width: 45%;
	height: 35px;
    top: 15%;
    left:25%;
    position: relative;
	background: #E89EA7;
    border-radius: 4px;    
}

.bateried:after {
	content: '';
	display: block;
	width: 8px;
	height: 20px;
	background: #E89EA7;
    border-radius: 0 4px 4px 0;
	position: absolute;
	right: -10px;
	top: 7.4px;
}

.bateried .nivel.mediu {
	background-color: #96172E;	
}

#baty{
   content: '';
   background:#fff;
   width:8px; 
   height:13px;
   margin-top:4px;
   margin-left:3px;
   border:1px solid #fff;
   position:absolute;

}
.bat {
    background: #A7C177;
    height: 13px;
    margin:7px auto auto  5px;
    position: relative;
    width: 10px;
    float:left;
}
.bat::after {
  background: #A7C177;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  right: 3px;
  top: -2px;
  width: 4px;
}
.bat.batd:after {
  background:#E4878E;
}
#b-status{
    clear: left;
    width:10px;
    background: #FFF;
    bottom:0;
    position:absolute;
}
#pro{
    font-size:16px;
    margin-top:4px;
    margin-left:-17px;
    padding: 0 0 0 20px;
    position:absolute;
    font-weight:normal;
}
div, a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
a.reg, a.log{
    text-decoration:none;
    color:#CD0218;
    
}

a.reg:hover, a.log:hover{
    text-decoration:underline;
    color:#500106;
}

.logare{
    display:none;
    width:100%;
    height:100%;
    background: #FFF url("textura.jpeg");
    width: 100%;
    opacity: 0.2;
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    filter: alpha(opacity=20);
    position:absolute;
    z-index:600;
}

#flogare{
    display:none;
}
.poza{
    background:url("log.jpg") center no-repeat;
    width:270px;
    height:270px;
    border-radius:100%;
   -webkit-transition: -webkit-transform 2s ease-in-out;
   transition: transform 2s ease-in-out;   
}

.tabel {
display:none;
width:270px;
height:270px;
background:#FFF;
/*
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
-ms-box-shadow: 0px 0px 5px #000;
-o-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;*/
border: 3px solid #E98300;
box-shadow: 0px 0px 0px 3px #FFF;
white-space:nowrap;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
z-index:901;
border-radius:100%;
animation: bounceIn 0.3s  running linear;
overflow: hidden;
}

.meniu {
    display:block;
	font-family:Rationale;
	color:#000;
	font-size:25px;
	margin:auto;
	padding:10px 0 10px 0;
	text-align:center;	
    z-index:700;
}

.input {
  background:#FFFFFF;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #ccc;
  width:90%;
  padding: 7px;
  outline:0;
}
.buton {
  font-family: sans-serif;
  background:#FFFFFF url(cauta.png?) no-repeat left;
  width:99%;
  height:34px;
  margin-top:5px;
  padding:0 0 0 50px;
  cursor:pointer;
  border-color: #ECE9D8 #71920C #6F9151;
  outline:0;
}
.buton:hover{
background:#FAFFE8 url(cautah.png) no-repeat left;
border-color: #EEEEEE #415407 #000000;  
font-weight:bold;
}
#eroare{ 
display: none;
vertical-align: middle; 
text-align: center; 
width: 100%; 
height: 100%; 
}
#tip-eroare{ 
font-size: 100px; 
color: #F00000; 
font-weight: 200; 
margin-top:-10px;
margin-bottom: 0px; 
text-align: center; 
}
#mesaj-eroare{ 
font-family: "Lucida Sans Unicode","Lucida Sans","Lucida Grande",Helvetica;	
font-size: 25px; 
margin-top:-10px;
font-weight: 400; 
color: #009cdc; 
}
.bgi{
display: none;
background:#fff;
position:fixed;
width:280px;
height:145px;
white-space:nowrap;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
border-radius:2px;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
-ms-box-shadow: 0px 0px 5px #000;
-o-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
z-index:901;
}

.aparola{
    background: url("../img/hide.png") no-repeat;
    width:32px;
    height:32px;
    margin-top:-32px;
    margin-right:5px;
    cursor:pointer;
    left:80%;
    right:0%;
    position:relative;
}
#succes{
  display:none;
  background:#FFF;	
  width: 80%; 
  padding:15px;
  z-index: 600;
  position: fixed !important;  
  top: 0; 
  left: 7%;
  margin:auto;
  border:3px solid #000;
  border-radius:0 0 10px 10px;
  border-top:0;
  text-align:center;
  opacity: 0.85;
  -moz-opacity: 0.85; 
  -khtml-opacity: 0.85; 
  filter:alpha(opacity=85);
  font-weight:bold;
  font-size:20px;	 
  color:#124809;
  animation:  bounceInLeft  1s  running linear;
}

.hparola{
    background: url("../img/show.png") 99% 50% no-repeat;
    width:32px;
    height:32px;
    margin-top:-32px;
    margin-right:5px;
    cursor:pointer;
    left:80%;
    right:0%;
    position:relative;
}

@media (min-width: 100px) and (max-width: 740px) {
   #meniu{
      width:90%;
      margin:auto;
      padding:5%;
   } 

   .rezolutie, .jos{
    width:100%;
    border:0;
   }
   
   .albastru:hover{
     background:#005C8E url("../img/cr.jpg")  no-repeat;
     background-size:cover;
    }
    
    .cucu{
         background:url("playr.png?rg")  center  no-repeat;
         margin-left:-5px;
    }
    .bau{
         background:url("plays.png?rg")  center  no-repeat;
        
    }
}