You are on page 1of 5

body a:hover,body a:focus{

text-decoration:none;
outline: none;
}
/*-- banner--*/
.banner {
background:url(../images/1.jpg)no-repeat center;
-webkit-background-size:cover;
background-size:cover;
-moz-background-size:cover;
}
.banner-info,.feedback-agileinfo {
background:rgba(0, 0, 0, 0.3);
}
/*-- banner-top --*/
.banner-top {
padding: 2.5em 0 0;
}
.banner-top-right {
float: right;
}
.banner-top-grids.banner-logo {
text-align: center;
}
.banner-logo a {
display: inline-block;
}
.banner-logo h1 {
font-size: 3em;
display: inline-block;
line-height: 1em;
vertical-align: middle;
color: #fff;
text-decoration: none;
}
.banner-logo h1 span {
font-size: 0.4em;
letter-spacing: 10px;
line-height: 1em;
display: block;
color: #E3E3E3;
margin-top: 2px;
text-transform: lowercase;
}
/*-- social-icons --*/
.agileinfo-social-grids ul{
padding:0;
margin:0;
}
.agileinfo-social-grids ul li{
display: inline-block;
}
.agileinfo-social-grids ul li a {
color: #FFFFFF;
text-align: center;
}
.agileinfo-social-grids ul li a i.fa{
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
width: 40px;
height: 40px;
line-height:2.8em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.agileinfo-social-grids ul li a i.fa.fa-facebook:hover {
background:#3b5998;
}
.agileinfo-social-grids ul li a i.fa.fa-twitter{
margin:0 .5em;
}
.agileinfo-social-grids ul li a i.fa.fa-twitter:hover{
background: #55acee;
}
.agileinfo-social-grids ul li a i.fa.fa-rss{
margin:0 .5em 0 0;
}
.agileinfo-social-grids ul li a i.fa.fa-rss:hover{
background: #f26522;
}
.agileinfo-social-grids ul li a i.fa.fa-vk:hover{
background: #45668e;
}
/*-- w3-header-bottom --*/
/*-- //banner-top --*/
/*-- banner-text --*/
.banner-text {
padding: 17em 0 15em;
text-align: center;
}
/*-- //banner-text --*/
/*-- top-nav --*/
.banner .nav ul {
margin: 0;
padding: 0;
}
.banner .nav li span {
display: block;
}
.banner .nav a {
font-size:1.4em;
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
font-weight:100;
}
.banner .nav i{
/* Make the font smoother for Chrome */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Remove the blue Web-kit background when element is tapped */
.no-touch .banner .nav ul:hover a {
color: rgba(249, 249, 249, .5);
}
.no-touch .banner .nav ul:hover a:hover {
color: rgba(249, 249, 249, 0.99);
}
/* Adding some background color to the different menu items */

.banner .nav li:nth-child(6n+1) {


border:none;
}
.banner .nav li {
background: #1ABC9C;
}
/* Transforms the list into a horizontal navigation */
.banner .nav li {
text-align: center;
-webkit-transition: border .5s;
-moz-transition: border .5s;
-o-transition: border .5s;
-ms-transition: border .5s;
transition: border .5s;
background:rgba(0, 0, 0, 0.45);
display: inline-block;
margin: 0 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.banner .nav li a{
width: 150px;
height: 150px;
}
/* Placing the icon */
.icon {
padding-top: 2em;
}
.icon + span {
margin-top:0.5em;
-webkit-transition: margin .5s;
-moz-transition: margin .5s;
-o-transition: margin .5s;
-ms-transition: margin .5s;
transition: margin .5s;
}
/* Positioning the icons and preparing for the animation*/
.banner .nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 1em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 90%;
font-size: .75em;
background: rgba(255, 255, 255, 0.18);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-moz-box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}
/* Making the text follow the height animation */
.no-touch .banner .nav a:hover .icon + span {
-webkit-transition: margin .5s;
-moz-transition: margin .5s;
-o-transition: margin .5s;
-ms-transition: margin .5s;
transition: margin .5s;
color: #00BCD4;
}
/* Animate the box-shadow to create the effect */
.no-touch .banner .nav a:hover i,
.no-touch .banner .nav a:active i,
.no-touch .banner .nav a:focus i {
-webkit-box-shadow: 0 0 0 30px transparent;
-moz-box-shadow: 0 0 0 30px transparent;
box-shadow: 0 0 0 30px transparent;
-webkit-transition: box-shadow .5s ease-in-out;
-moz-transition: box-shadow .5s ease-in-out;
-o-transition: box-shadow .5s ease-in-out;
-ms-transition: box-shadow .5s ease-in-out;
transition: box-shadow .5s ease-in-out;
}
@media (min-width: 50em) and (max-width: 61.250em) {
/* Size and font adjustments to make it fit into the screen*/
.banner .nav ul {
font-size: 1.2em;
}
}
/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {


.banner .nav ul li {
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
-ms-transition: background 0.5s;
transition: background 0.5s;
}
}

/* Styling the toggle menu link and hiding it */


.banner .nav .navtoogle {
display: none;
padding: 0.5em 0.5em 0.6em;
font-weight: normal;
color: rgb(255, 255, 255);
font-size: 1.2em;
background: none;
border: none;
border-bottom: 2px solid rgb(221, 221, 221);
cursor: pointer;
outline: none;
margin: 0 auto;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
font-size: 1.6em;
}