@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat|Montserrat+Subrayada');

body { background:url(/images/login_bg.jpg) no-repeat; background-size: cover; }

.cover { text-align:center;}
.cover h1 {margin-top:10px;}
.cover h2 {color:#fff; font-size:30px; margin-top:30px; font-family:'Montserrat', sans-serif; letter-spacing:3px;}

.loginBox input {max-width:340px; width:100%; height:39px; border:solid 1px #484848; background:#000; margin:4px; color:#be0063; padding:0 10px}
.loginBox button {padding:10px; background:#f1007e; border:none; color:#fff; font-family:'Montserrat', sans-serif; border-radius:5px; font-weight:bold; margin-top:20px;}


.topArea {padding:30px 20px 0 40px; color:#fff;}
.rclock input { border:none; background:none; font-family:'Montserrat', sans-serif; color:#fff; font-size:60px; font-weight:bold;}

.weather {font-family:'Montserrat', sans-serif; color:#fff;}

.search {
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  overflow: hidden;
}
.search_bar {
  width: 280px;
  position: relative;
  margin: 0 auto;
}
.search_bar input[type="text"] {
  width: 15px;
  background: transparent;
  -webkit-transition: border 0.3s 0s, width 0.2s 0.3s cubic-bezier(0.225, 0.01, 0.475, 1.01), text-indent 0.2s 0.3s;
  transition: border 0.3s 0s, width 0.2s 0.3s cubic-bezier(0.225, 0.01, 0.475, 1.01), text-indent 0.2s 0.3s;
  padding: 20px;
  border-color: #fff;
  text-indent: 30px;
  outline: none;
  border: 0px solid #fff;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  font-family: 'Montserrat';
}
.search_bar ::-webkit-input-placeholder {
  /* Safari, Chrome and Opera */
  color: #fff;
  font-weight: 400;
  font-family: 'Montserrat';
}
.search_bar ::-moz-input-placeholder {
  /* Safari, Chrome and Opera */
  color: #fff;
  font-weight: 400;
  font-family: 'Montserrat';
}
.search_bar ::-o-input-placeholder {
  /* Safari, Chrome and Opera */
  color: #fff;
  font-weight: 400;
  font-family: 'Montserrat';
}
.search_bar input[type="checkbox"] {
  display: none;
}
.search_bar input[type="checkbox"]:checked + label + input {
  width: 230px;
  border: 2.5px solid #fff;
  text-indent: 0px;
}
.search_bar input[type="checkbox"]:checked + label i {
  right: 0px;
  -webkit-transform: translateY(-50%) translateX(50%) rotate(360deg) scale(0);
          transform: translateY(-50%) translateX(50%) rotate(360deg) scale(0);
  color: #fff;
}
.search_bar input[type="checkbox"]:checked + label .last {
  left: 220px;
  -webkit-transform: translateY(-50%) rotate(360deg) scale(1);
          transform: translateY(-50%) rotate(360deg) scale(1);
}
.search_bar input[type="checkbox"]:checked + label p {
  top: 50%;
  -webkit-transition: all .3s .45s;
  transition: all .3s .45s;
}
.search_bar input[type="checkbox"]:not(checked) + label p {
  top: -50%;
  -webkit-transition: all .3s 0s;
  transition: all .3s 0s;
}
.search_bar .last {
  -webkit-transform: translateY(-50%) rotate(0deg) scale(0);
  transform: translateY(-50%) rotate(0deg) scale(0);
}
.search_bar i {
  position: absolute;
  font-size: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(50%) rotate(0deg) scale(1);
          transform: translateY(-50%) translateX(50%) rotate(0deg) scale(1);
  cursor: pointer;
  z-index: 2;
  margin: auto;
  border-radius: 4px;
  width: 56px;
  right: 50%;
  height: 54px;
  background: transparent;
  -webkit-transition: right .3s .3s, color .3s, -webkit-transform .3s .3s;
  transition: right .3s .3s, color .3s, -webkit-transform .3s .3s;
  transition: right .3s .3s, transform .3s .3s, color .3s;
  transition: right .3s .3s, transform .3s .3s, color .3s, -webkit-transform .3s .3s;
  line-height: 60px;
  color: #fff;
}
.search_bar i:hover {
  color: #fff;
}
.search_bar p {
  position: absolute;
  margin: 0;
  right: 52px;
  color: #fff;
  font-weight: 700;
  font-size: 30px;
  top: -50%;
  -webkit-transform: translateY(-50%) rotate(0deg) scale(1);
          transform: translateY(-50%) rotate(0deg) scale(1);
}


.favorites { text-align:center; margin-bottom:30px;}
.favorites a {width:85px; height:85px; display:inline-block; border:solid 1px #252525; border-radius:50%; line-height:85px; text-align:center; margin:10px; opacity:0.7}
.favorites a:hover {  border:solid 1px #333; opacity:1;}

.favorites .fav01 {background: url(../images/fav_01.png)#171717; background-size:100% }
.favorites .fav01:hover {background: url(../images/fav_01.png) #000;  background-size:100%}

.favorites .fav02 {background: url(../images/fav_02.png)#171717; background-size:100%}
.favorites .fav02:hover {background: url(../images/fav_02.png) #000; background-size:100%}

.favorites .fav03 {background: url(../images/fav_03.png)#171717;background-size:100% }
.favorites .fav03:hover {background: url(../images/fav_03.png) #000; background-size:100%}

.favorites .fav04 {background: url(../images/fav_04.png)#171717;background-size:100% }
.favorites .fav04:hover {background: url(../images/fav_04.png) #000; background-size:100%}

.favorites .fav05 {background: url(../images/fav_05.png)#171717;background-size:100% }
.favorites .fav05:hover {background: url(../images/fav_05.png) #000;background-size:100%}

.favorites .fav06 {background: url(../images/fav_06.png)#171717; background-size:100%}
.favorites .fav06:hover {background: url(../images/fav_06.png) #000;background-size:100%}

.favorites .fav07 {background: url(../images/fav_07.png)#171717; background-size:100%}
.favorites .fav07:hover {background: url(../images/fav_07.png) #000;background-size:100%}

.favorites .fav08 {background: url(../images/fav_08.png)#171717; background-size:100%}
.favorites .fav08:hover {background: url(../images/fav_08.png) #000;background-size:100%}

.favorites .fav09 {background: url(../images/fav_09.png)#171717;background-size:100% }
.favorites .fav09:hover {background: url(../images/fav_09.png) #000;background-size:100%}

@media (max-width: 900px) {
.rclock { display:none;}
.weather {display:none;}

}

@media (max-width: 600px) {
.favorites a { width:50px; height:50px; line-height:50px;}
.loginBox input {width:80%;}
}