@import url(http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext);

div#ho_adv {display: none !important}
html, body{
  font-family: 'Lato', sans-serif;
  font-size:15px;
  -webkit-font-smoothing: subpixel-antialiased!important;
  color:black;
  font-weight:400;
  height:100%;
}

a{
  text-decoration:none;
  outline:none;
  font-size:14px;
}

h1{
  font-size:34px;
  color:white;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:6px;
  line-height:1.2;
}

p{
  font-size:14px;
  color:white;
  font-weight:300;
  letter-spacing:1px;
  margin-top:40px;
}


h1 span{
  color:#2fa68e;
}


::selection {
  background: #e81064;
  color:white;
}

::-moz-selection {
  background: #e81064;
  color:white;
}


.container{
  position:absolute;
  width:100%;
  height:100%;
  z-index: 9;
}
.button {width: auto; display: inline-block; background-color: #e81064; border-radius: 10px; text-align: center; margin: 10px auto;}
.button:hover {background-color: #bf1155;}
.button a {display: block; color: #fff; padding: 10px 20px; font-size: 20px;}

/* header */

header {background-color:#fff; height: 94px; padding: 10px 0 30px; /*box-shadow: 0 0px 10px 10px rgba(0,0,0,.3);*/ z-index: 10; position: relative;}
.logo {width: 260px; float: left; margin: 7px 0;}
.logo a {width: 100%; height: 100%; display: block; padding: 10px;}
.logo img {width: 100%;}
.right-box {width: 70%; float: right; text-align: right; padding-top: 25px;}
body.main .right-box {padding-top: 0;}
.soc-log-box, .menu {display: inline-block;}
.soc-log-box {width: 200px;}
.login {width: 100%; background-color: #e81064; border-radius: 10px; text-align: center;}
.login:hover {background-color: #bf1155;}
.login a {display: block; width: 100%; color: #fff; padding: 10px 0; font-size: 25px;}

.social {text-align: left; margin-bottom: 20px;}
.social a {width: 47px; height: 45px; display: inline-block;background-repeat: no-repeat; background-position: center;}
.social a:hover {background-color: #f1ecec;}
.social a.facebook {background-image: url('../img/icons/social/facebook.png'); }
.social a.twitter {background-image: url('../img/icons/social/twitter.png'); }
.social a.google {background-image: url('../img/icons/social/google+.png'); }
.social a.rss {background-image: url('../img/icons/social/rss.png'); }
.social a.mail {background-image: url('../img/icons/social/mail.png'); }

/* menu */
.menu ul {padding: 0 15px;}
.menu li {display: inline-block; padding: 10px;}
.menu li:hover {/*background-color: #f1ecec;*/ border-radius: 10px;}
.menu li:hover a {color: #e81064;}
.menu li a {color: #000; font-size: 25px;}

/* Start page */
section {padding: 30px 0;position: relative;}
.content {position: relative; width: 1200px; margin: 0 auto; overflow: hidden;}

#enter {background-image:url('../img/hp/back-enter.jpg'); background-repeat: no-repeat; background-size: 1700px 812px; background-position: center top;}
#enter .main-box {width: 100%;}
#enter .box {position: relative; width: 47%; width: calc(50% - 30px); height: 570px; display: inline-block; border: 2px solid #9e0847; border-radius: 8px; margin: 10px; background-repeat: no-repeat; background-size: cover; background-position: center;}
#enter .left.box {background-image:url('../img/hp/trener.jpg');}
#enter .right.box {background-image:url('../img/hp/uzytkownik.jpg');}
#enter .box h4 {font-weight: bold; font-size: 25px; color: #fff; padding: 20px 25px;
  -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#enter .box h3 {text-align: center; font-weight: bold; font-size: 76px; color: #fff; line-height: 457px;
  -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#enter h2 {text-align: center; font-weight: bold; font-size: 76px; color: #545454;}
#enter .big.text {padding: 40px 0;}
#enter .box a {display: block; position: absolute; width: 100%; HEIGHT: 100%; z-index: 2;}
#enter .outer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6);
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	border-radius: 5px;}
#enter a:hover .outer {background: rgba(255,255,255,.6);}
#enter a:hover .outer h3, #enter a:hover .outer h4 {color: #000;}


/* sir sec / trainer / user*/
.cir-sec .title {margin-top: 25px;}
.cir-sec .column {display: table; width: 100%; padding: 20px 0;}
.cir-sec .column .box {display: table-cell; width: 25%; padding: 25px 45px;}
.cir-sec .column .box .circle {border-radius: 200px; height: 200px; width: 200px; margin: auto;}
.cir-sec .column .box .circle p {position: relative; top: 85px; margin: auto;}
.cir-sec h2 {font-size: 55px; font-weight: bold;}

#trainer.cir-sec {background-color: #000; background-image:url('../img/hp/back-trener.jpg'); background-repeat: no-repeat; background-size: 1700px 450px; background-position: 95px top;}
#trainer.cir-sec * {color: #fff; text-align: center;}
#trainer.cir-sec:before {content: ''; display: block; width: 180px; height: 37px; background-image: url('../img/icons/tranier-top-arrow.png'); position: absolute; top: -36px; margin: auto;margin: auto; left: 0; right: 0;}
#trainer.cir-sec .column .box .circle {border: 2px solid #fff;  
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#trainer.cir-sec .column .box .circle:hover {background: rgba(255,255,255,1);}
#trainer.cir-sec .column .box .circle:hover * {color: #000;}
#user.cir-sec:before {content: ''; display: block; width: 132px; height: 37px; background-image: url('../img/icons/users-top-arrow.png'); position: absolute; top: -35px; margin: auto;margin: auto; left: 0; right: 0;}
#user.cir-sec .column .box .circle {border: 2px solid #000; 
  -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
#user.cir-sec .column .box .circle:hover {background: rgba(0,0,0,1);}
#user.cir-sec .column .box .circle:hover * {color: #fff;}
#user.cir-sec {background-color: #fff;}
#user.cir-sec * {color: #000;text-align: center;}


/* o nas */
#about {background-color: #000; background-image:url('../img/hp/back-o-nas.jpg'); background-repeat: no-repeat; background-size: 1700px 447px; background-position: right;}
#about * {color: #fff; text-align: center;}
#about:before {content: ''; display: block; width: 164px; height: 41px; background-image: url('../img/icons/about-top-arrow.png'); position: absolute; top: -37px; margin: auto;margin: auto; left: 0; right: 0;}
#about p {margin-top: 20px}
#about h2 {font-size: 55px; font-weight: bold;}
#about .column {display: table; width: 100%;}
#about .column .box {display: table-cell; width: 50%; padding: 25px;}


/* Contact */
#contact h2 {font-size: 55px; font-weight: bold; text-align: center;}
#contact .content {width: 900px;}
.contact {position:relative; width:100%; background: #fff; z-index:10; overflow:hidden;}
.contact .content .form {width:455px;overflow:hidden;height:auto;float:left;padding-top: 50px;}
.contact .content .form .column {width:180px;overflow:hidden;height:auto;float:left;letter-spacing:1px;margin-bottom:30px;}
.contact .content .form .column-2{width:210px; padding-left:60px; overflow:hidden; height:auto; float:left; letter-spacing:1px; margin-bottom:30px;  }
.contact .content .form .column-3{width:450px;overflow:hidden;height:auto;float:left; letter-spacing:1px;}
.contact .content .contact-text{width:405px;overflow:hidden;height:auto; font-weight:300; float:left; padding-left:40px; color:#000; font-size:14px; line-height:26px; padding-top: 50px;}

strong{font-weight:700;}
input{width:180px; height:40px; background:#f8f7f7; border-top:1px solid #333; border-bottom:0; border-left:0; border-right:0; color:#333; font-weight:300; line-height:40px;  padding-left:15px; font-size:14px; margin-bottom:10px;}
input:focus{background:#f4f4f4;}
textarea{
  width:420px;
  height:150px;
  border-top:1px solid #333;
  border-bottom:0;
  line-height:20px;
  border-left:0;
  border-right:0;
  background:#f8f7f7;
  color:#333;
  font-weight:300;
  padding:15px 0 0 15px;
  font-family: 'Lato', sans-serif;
  font-size:14px;
  margin-bottom:10px;
}
textarea:focus{background:#f4f4f4;}
input.submit{
  width:100px;
  height:34px;
  float:right;
  margin:20px 10px 0 0;
  border:0;
  font-weight:700;
  text-align: center;

}

#contact input.submit {float: none; background-color: #e81064; border-radius: 10px; color: #fff; text-align: center; margin: auto; display: block; height: auto; padding: 0;}
#contact input.submit:hover {cursor: pointer; background-color: #bf1155;}


/* user profile */

.user-profile .soc-log-box, .trainer-profile .soc-log-box, .community .soc-log-box, .articles .soc-log-box, .ranking .soc-log-box {width: 250px;}
.user-profile .menu li a, .trainer-profile .menu li a, .community .menu li a, .articles .menu li a, .ranking .menu li a {font-size: 20px;}
.user-profile .menu li, .trainer-profile .menu li, .community .menu li, .articles .menu li, .ranking .menu li {padding: 0;}
.user-profile .menu li a, .trainer-profile .menu li a, .community .menu li a, .articles .menu li a, .ranking .menu li a {padding: 10px;}
.user-profile .menu li a.active, .trainer-profile .menu li a.active, .community .menu li a.active, .articles .menu li a.active, .ranking .menu li a.active {background: #de0e66; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #fff;}
.user-profile section, .trainer-profile section, .community section, .articles section, .ranking section {padding: 0;}
.user-profile .container, .trainer-profile .container, .community .container, .articles .container, .ranking .container {background-image: url('../img/background/users.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}

#user-profile .main-box, #trainer-profile .main-box, .articles .main-box, .ranking .main-box {display: table; width: 100%; padding: 0 20px;}
#user-profile .left.box, #trainer-profile .left.box, .articles .left.box, .ranking .left.box {display: table-cell; width: 20%; height: 100%; height: 100vh; background: #ebebeb; position: relative; vertical-align: top;}
#user-profile .right.box, #trainer-profile .right.box, .articles .right.box, .ranking .right.box {display: table-cell; width: 80%; height: 100%; height: 100vh; background: #fff;position: relative;}
#user-profile .user-data {width: 180px; margin: auto; padding: 20px 0;}
#user-profile .edit-profile a {color: #000;}
#user-profile ul.left-menu li a, .articles ul.left-menu li a, .ranking ul.left-menu li a {padding: 10px 20px; display: block; color: #000; font-size: 20px;}
#user-profile ul.left-menu li a:hover, .articles ul.left-menu li a:hover, .ranking ul.left-menu li a:hover {background: #d0cdcd;}
#user-profile ul.left-menu li a.active, .articles ul.left-menu li a.active, .ranking ul.left-menu li a.active {background: #de0e66; color: #FFF; position: relative;}
#user-profile ul.left-menu li a.active:before, .articles ul.left-menu li a.active:before, .ranking ul.left-menu li a.active:before {content: ''; display: block; position:absolute; top: 7px; right: -3px; width: 14px; height: 27px; background-image: url('../img/icons/arrow-list.png'); z-index: 3;}
#user-profile ul.left-menu li a.active:after, .articles ul.left-menu li a.active:after, .ranking ul.left-menu li a.active:after {content: ''; display: block; position:absolute; top: 0; right: -3px; width: 10px; height: 100%; background-color: #de0e66;z-index: 2;}
#user-profile ul.left-menu li a.active:hover, .articles ul.left-menu li a.active:hover, .ranking ul.left-menu li a.active:hover {background: #bf1155;}
#user-profile ul.left-menu li a.active:hover:after, .articles ul.left-menu li a.active:hover:after, .ranking ul.left-menu li a.active:hover:after {background-color: #bf1155;}

#user-profile .right.box .finder, #trainer-profile .left.box .finder, .articles .left.box .finder, .ranking .left.box .finder {position: absolute; right: 35px; top: 20px;}
#user-profile .right.box input#search, #trainer-profile .left.box input#search, .articles .left.box input#search, .ranking .left.box input#search {width: 240px; height: 28px; background-color: #e6e6e6; border-radius: 10px; border: 0;}
#user-profile .right.box input#search:hover, #trainer-profile .left.box input#search:hover, .articles .left.box input#search:hover, .ranking .left.box input#search:hover {background-color: #d4d2d2;}
#user-profile .right.box span.search, #trainer-profile .left.box span.search, .articles .left.box span.search, .ranking .left.box span.search {position: absolute;right: 10px;top: 7px; width: 17px; height: 16px; cursor: pointer; background-image: url('../img/icons/search.png');}
.articles .left.box span.search, .ranking .left.box span.search {right: -3px;}
#user-profile .right.box .sort, .articles .right.box .sort, .ranking .right.box .sort {position: absolute; top: 25px; left: 20px; max-width: 50%;}

/* trainer */

.treiner {}
.tab-pane.active {display: block;}
.tab-pane {display: none;}

#trainer-profile .main-box {padding: 0;}
#trainer-profile .left.box, #trainer-profile .right.box {position: initial;}
#trainer-profile .left.box {width: 40%;}
#trainer-profile .right.box {width: 60%;}
#trainer-profile .left.box input#search {background-color: #d9d9d9;}
#trainer-profile .left.box .finder {right: 62%;}
#trainer-profile .title-table {display: table; width: 100%; margin-top: 70px; margin-bottom: 20px; padding: 0 20px;}
#trainer-profile .title-table .name {display: table-cell; width: 35%;}
#trainer-profile .title-table .stars {display: table-cell; width: 40%;}
#trainer-profile .title-table .city {display: table-cell; width: 25%;}

#trainer-profile .trainer-info {display: table; width: 100%; padding: 10px 20px;}
#trainer-profile .trainer-info .image, #trainer-profile .trainer-info .name, #trainer-profile .trainer-info .stars, #trainer-profile .trainer-info .city {display: table-cell; vertical-align: middle;}
#trainer-profile .trainer-info .image {width: 10%;}
#trainer-profile .trainer-info .image .b-r {width: 70px; height: 70px; border-radius: 70px; display: block; border: 1px solid #000; overflow: hidden; text-align: center;}
#trainer-profile .trainer-info .image img {width: auto; height: auto; max-width: 130%; max-height: 100%; margin: auto;    display: block;}
#trainer-profile .trainer-info .name {width: 20%; padding-left: 10px;}
#trainer-profile .trainer-info .stars {width: 40%;}
#trainer-profile .trainer-info .stars span, #trainer-profile .trainer-data .stars span {display: inline-block; vertical-align: middle; margin: 0 2px; width: 25px; height: 24px; background-image: url('../img/icons/star.png');}
#trainer-profile .trainer-info .city {width: 25%;}

#trainer-profile .nav-tabs li {position: relative;}
#trainer-profile .nav-tabs li:hover {background-color: #d0cdcd;}
#trainer-profile .nav-tabs li * {color: #000;}
#trainer-profile .nav-tabs li.active {background-color: #de0e66;}
#trainer-profile .nav-tabs li.active:hover {background-color: #bf1155;}
#trainer-profile .nav-tabs li.active * {color: #fff;}

#trainer-profile .nav-tabs li.active:before {content: ''; display: block; position:absolute; top: 35%; right: -3px; width: 14px; height: 27px; background-image: url('../img/icons/arrow-list.png'); z-index: 3;}
#trainer-profile .nav-tabs li.active:after {content: ''; display: block; position:absolute; top: 0; right: -3px; width: 10px; height: 100%; background-color: #de0e66;z-index: 2;}
#trainer-profile .nav-tabs li.active:hover {background: #bf1155;}
#trainer-profile .nav-tabs li.active:hover:after {background-color: #bf1155;}

#trainer-profile .tab-content.default {position: absolute; padding: 20px 0; top: 0; right: 0; width: 60%; overflow: auto; height: 100%;}
#trainer-profile .trainer-data {padding: 20px;}
#trainer-profile .trainer-data .more-info p {margin-top: 10px; color: #000; font-weight: normal;}
#trainer-profile .trainer-data .name {font-size: 22px; padding: 10px 0;}
#trainer-profile .trainer-data .info-box {display: table; width: 100%;}
#trainer-profile .trainer-data .image {height: 146px;}
#trainer-profile .trainer-data .image img {width: auto;height: 100%;}
#trainer-profile .trainer-data .left-box, #trainer-profile .trainer-data .middle-box, #trainer-profile .trainer-data .right-boxs {display: table-cell;vertical-align: middle;}
#trainer-profile .trainer-data .left-box {width: 40%;}
#trainer-profile .trainer-data .middle-box {width: 20%;}
#trainer-profile .trainer-data .right-boxs {width: 40%;}
#trainer-profile .trainer-data .age, #trainer-profile .trainer-data .city, #trainer-profile .trainer-data .stars, #trainer-profile .trainer-data .www {padding: 15px 0;}
#trainer-profile .trainer-data .stars {height: 15px;}
#trainer-profile .grid.mini {margin-top: 0px;}
 #trainer-profile .grid.mini h2 {margin: 10px 0; font-size: 18px;}
#trainer-profile .grid.mini li, #trainer-profile .grid.mini li img {width: 100px; opacity: 1 !important;}


/* community */

.community .main-box {display: table; width: 100%; padding: 0 20px;}
.community .left.box {display: table-cell; width: 19%; height: 100%; height: 100vh; background: #FFF; position: relative; vertical-align: top;}
.community .left.box h3 {font-size: 22px; text-align: center; padding-top: 20px;}
.community .left.box .img-box {padding: 20px;}
.community .left.box .opin {text-align: right; opacity: .6;}
.community .left.box .image {display: block; margin: auto;}
.community .left.box .image img {width: auto; max-width: 100%;}

.community .midd.box {display: table-cell; width: 2%; height: 100%; height: 100vh; background: transparent; position: relative;}
.community .right.box {display: table-cell; width: 79%; height: 100%; height: 100vh; background: #fff; position: relative;vertical-align: top;}

.community .right.box .finder {position: absolute; right: 35px; top: 20px;}
.community .right.box input#search {width: 240px; height: 28px; background-color: #d9d9d9; border-radius: 10px; border: 0;}
.community .right.box input#search:hover {background-color: #d4d2d2;}
.community .right.box span.search {position: absolute;right: 10px;top: 7px; width: 17px; height: 16px; cursor: pointer; background-image: url('../img/icons/search.png');}

.community .right.box .nav-tabs {background: #ebebeb;}
.community .right.box .nav-tabs li {position: relative; display: inline-block; vertical-align: middle;}
.community .right.box .nav-tabs li:hover {background-color: #d0cdcd;}
.community .right.box .nav-tabs li * {color: #000;}
.community .right.box .nav-tabs li a {display: block; height: 100%;  /* width: 100%; */ padding: 25px;}
.community .right.box .nav-tabs li.active {background-color: #de0e66;}
.community .right.box .nav-tabs li.active:hover {background-color: #bf1155;}
.community .right.box .nav-tabs li.active * {color: #fff;}
.community .right.box .nav-tabs li.active:before {content: ''; display: block; position:absolute; bottom: -15px; width: 14px; margin: auto; height: 27px; background-image: url(../img/icons/arrow-list.png); z-index: 3;
	-webkit-transform: rotate(90deg); 
	-moz-transform: rotate(90deg); 
	-ms-transform: rotate(90deg); 
	-o-transform: rotate(90deg); 
	transform: rotate(90deg); 
	left: 0; right: 0;
}
.community .right.box .nav-tabs li.active:hover {background: #bf1155;}
.community .right.box .tab-pane {padding: 20px;}
.community .right.box .tab-pane .img-box {display: inline-block; width: 20%; margin: 15px; text-align: center;}
.community .right.box .tab-pane .img-box img {max-width: 100%; width: auto; display: block; margin: auto;}
.community .right.box .tab-pane p {margin-top: 10px; color: #000;}



/* articles */

.articles .left.box input#search {width: 100%;}
.articles .left.box ul {margin-top: 55px;}

/* ranking */

.ranking .left.box input#search {width: 100%;}
.ranking .left.box ul {margin-top: 55px;}
.ranking .left.box h2 {text-align: center; font-size: 22px; padding: 10px 0 0;}

/* Footer */
footer {padding: 100px 0 50px;}
footer * {text-align: center;}
footer i {color: #fff;}


























.start-page{
  position:relative;
  width:100%;
  height:100%;
  z-index:10;
  background:url('../img/background/table.png') #c0c0c0 bottom center fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.start-page hr{
  color: white;
  margin-top:30px;
  background-color: white;
  height: 1px;
  width:106px;
  border:0;

}

.start-page .opacity{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(51,51,51,0.5); /* Standard Off */
}


.start-page .content{
  position:relative;
  width:700px;
  margin:0 auto;
  height:100%;
}

.start-page .content .text{
  position:absolute;
  text-align:center;
  margin:auto;
  top:0; 
  left:0; 
  bottom:0; 
  right:0;
  width:700px;
  height:520px;
}

.start-page .content .text .logo{
  width:123px;
  height:123px;
  margin:0 auto 50px;
  
}


.start-page .content .text .read-more{
  width:183px;
  height:47px;
  margin:100px auto;
  line-height:47px;
  border:1px solid white;
  text-transform:uppercase;
  color:white;
  display:block;
  cursor:pointer;
  font-size:14px;
  letter-spacing:1px;
  background:none;
  -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
}

.start-page .content .text .read-more:hover{
  color:white;
  background: #ada074;
  border:1px solid #ada074;
}

.start-page .content .arrow-down{
  position: absolute;
  bottom: 110px;
  left: 50%;
  margin-left: -10px;
  width: 21px;
  height: 29px;
  background: url(../img/arrow-down.png) no-repeat center center;
  display: block;
  -webkit-animation: bounce-fade 1.2s infinite; /* Safari 4+ */
  -moz-animation:    bounce-fade 1.2s infinite; /* Fx 5+ */
  -o-animation:      bounce-fade 1.2s infinite; /* Opera 12+ */
   animation:        bounce-fade 1.2s infinite; /* IE 10+ */
}


@-webkit-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 70px; }
    100% { opacity: 1; bottom: 35px; }
}
@-moz-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 70px; }
    100% { opacity: 1; bottom: 35px; }
}
@-o-keyframes bounce-fade {
    0%   { opacity: 0; bottom:70px; }
    100% { opacity: 1; bottom: 35px; }
}
@keyframes bounce-fade {
    0%   { opacity: 0; bottom: 70px; }
    100% { opacity: 1; bottom: 35px; }
}


/* Menu mobile */

.menu-media{
  position:relative;
  width:100%;
  height:90px;
  z-index:1000;
  display:none; /*box-shadow: 0 0px 10px 1px rgba(0,0,0,.3);*/
}

.menu-media .menu-content{
  width:280px;
  position:relative;
  margin:0 auto;
}

}

.menu-media .menu-content .logo {
    color: white;
    font-weight: 700;
    font-size: 24px;
    width: 200px;
    line-height: 90px;
    float: left;
    list-style: none;
    position: absolute;
    top: -15px;
}

.menu-media .menu-content .icon{
  width:41px;
  height:23px;
  float:right;
  line-height:100px;
}

.menu-click{
  display:none; z-index: 999; position: absolute; width: 100%;
}
.menu-click a.login {width: 90%; max-width: 300px; margin: 2px auto 0; padding: 0; color: #fff; height: 45px; line-height: 45px; vertical-align: top;}
.menu-click li {
  position:relative;
  width:100%;
  height:70px;
  color:#333333;
  font-size:18px;
  text-align:center;
  line-height:70px;
  z-index:1000;
  background: #fff;
  border-bottom:1px solid #f2f2f2;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
 }
.menu-click li a {color: #000;font-size: 18px;}
.menu-click li:hover {
  color:#ada074;
 }


/* Menu */

.menu{

}

.menu-content{
  width:900px;
  position:relative;
  margin:0 auto;
}

.menu-content .logo {
   color:#333;
   font-weight:700;
   font-size:24px;
   width:150px;
   line-height:60px;
   float:left;
   list-style: none;
 }

.menu-content ul{

  width:500px;
  left:50%;
  float:right;
  text-align:right;
  list-style:none;
}

.menu-content li{
   display:inline-block;
   position:relative;
}

.menu-content li a{
  color:#333;
  font-size:16px;
  display: block;
  padding: 0 20px 0 20px;
  line-height:60px;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.menu-content li.active a{
  color:#ada074;
}

.menu-content li a:hover{
  color:#ada074;
}



/* Portfolio grid */

.grid{
  margin-top:70px;
  width:100%;
  position:relative;
  margin-bottom:70px;
  overflow:hidden;
}

.grid li{
  width:285px;
  margin:5px;
  float: left;
  position: relative;
  overflow: hidden;
}

.grid img{
  width:285px;
  float: left;
  position: relative;
}
.grid.rank .text {position: relative; opacity: 1; background: transparent;}
.grid.rank .text table {width:100%; margin: 10px;}
.grid.rank .text td {width: 50%; padding: 5px 0;}

.grid .text {
  position: absolute;
  width: 305px;
  height:100%;
  background: rgba(222, 14, 102,1);
  z-index: 2;
  opacity:0;
    -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
}

.grid .text:hover {
  opacity:1;
}

.grid .no-text {
  position: absolute;
  width: 285px;
  height:100%;
  background: rgba(222, 14, 102,0.5);
  z-index: 2;
  opacity:0;
  -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
}

.grid .no-text:hover {
  opacity:1;
}

.grid p {
  font-size: 18px;
  text-align:center;
  line-height:26px;
  margin-top:40px;
  font-weight: bold;
  letter-spacing:1px;
  color: #FFF;
}

.grid p.description {
  font-size: 12px;
  width:300px;
  margin-top:20px;
  text-align:center;
  line-height:20px;
  font-weight: 400;
  color: #FFF;
  position:relative;
}

.clear { 
    clear:both; 
}