/*
    Name:VKCool Designs
    Author:Vivek Kumar
    Author Url: vvkkumar06.github.io

*/


@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';



*{
    margin:0;
    padding:0;
    border:0;
}
body{
    background: #f5f5f5;
    color: #67727A;
    font-family: 'Alegreya', sans-serif;
    margin:0;
}

h2{
    font-size: 250%;
    font-weight: 700;
    text-align: center;
    padding-top:2%;
}
h3{
    font-size:175%;
    line-height: 155%;
    padding: 5% 0;
    font-weight: 400;
}

p{
    font-size:120%;
    line-height:150%;
    padding:3%;
    text-indent:2%;
    text-align:justify;
}
img{
    max-width:100%;
    height:auto;
    width:auto;
    margin-bottom:-4px;
}

header{
    background-color: #6991AC;
    width:100%;
    height: 86px;
}
#header-inner{
    max-width:1200px;
    margin:0 auto;
}
#logo{
    margin:20px;
    float: left;
    width:200px;
    height:60px;
    background: url(img/logo.png) no-repeat center;
}

/* navigation */

nav{
    float: right;
    padding:25px 20px 0 0;
}
#menu-icon{
    display:none;
    width:40px;
    height:40px;
    background:url(img/nav.png) center;
}
nav ul{
    margin:0;
    padding:0;
}

nav ul li{
    list-style:none;
    float:left;
    padding:20px 20px 0 20px ;
}
nav ul li a{
    text-decoration: none;
    color: #f5f5f5;
}
nav ul li a:hover{
    color:#c3d7df;
}


/* banner */

.banner{
    background:#6991AC;
    padding:0 5% 0 5%;
}

.one-fourth{
    width:25%;
    float:left;
    text-align:center;
}
#html{
    background-color:rgb(255, 147, 108)
}
#css{
    background-color:rgb(124, 226, 129)
}
#seo{
    background-color:rgb(219, 175, 109)
}
#social{
    background-color:rgb(107, 218, 238)
}

.one-fourth i{
    font-size:500%;
    padding:10% 0 5% 0;
    color:#f5f5f5;
}
.one-fourth h3{
    color:#f5f5f5;
}

.inner-wrapper, .inner-wrapper-3{
    float:left;
    width:100%;
}
article#tablet, article#desktop{
    width:50%;
    margin:0px;
    float:left;
}
aside#tablet, aside#desktop{
    width:50%;
    height:auto;
    float:right;
    background: #f5f5f5 !important;
}
aside#mobile{
    width:50%;
    float:right;
}

aside#tablet::after{
    content:'';
    clear:both;
    display:block;
}
article#mobile{
    float:left;
    width:50%

}
.one-third{
    width:33.33%;
    float:left;
}
.one-third h3{
    text-align: center;
    background: #6991AC;
}
.inner-wrapper-3{
    background:rgb(219, 175, 109) !important;
    color:#f5f5f5;
}

footer{
    width:100%;
    float:left;
    text-align:center;
    position:relative
}
footer ul.social{
    margin:0;
    padding:0;
    list-style:none;
}
footer ul.social li{
    padding:5% 5% 5% 5%;
    font-size:300%;
    display:inline-block;
}
footer ul.social li a {
    text-decoration:none;
    color: #000000;
}
footer.second{
    background:#345;
    color:#c3d7df;   
}
footer p{
    text-align:center;
}

@media only screen and (max-width: 776px){
    .one-third, .one-fourth, article#mobile, article#tablet, article#desktop , aside#tablet, aside#desktop, aside#mobile{
        width:100%;
    }
    p{
        font-size:16px;
    }
    nav ul{
        display:none;
    }    
    #menu-icon{
        display:block;
        position:absolute;
        right:10px;
        top:10px;
    }
    nav ul{
        text-align:center;
        font-size:20px;
        z-index:10;
        padding-bottom:15px;
        background: #6991AC;
        width:100%;
        position:absolute;
        left:0;
        top:80px;
    }
    nav ul li{
        display:block;
        float:none;
        clear:both;
    }
    #logo{
        z-index:12;
        margin:0 auto;
    }
    .contact::after{
        display:none !important;
    }
    .social li a i{
        font-size: 24px !important;
    }
}

@media only screen and (min-width: 777px){
    nav ul{
        display: block !important;
    }
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
#navbar{
    z-index:10;
}
.empty{
    height:30px;
    background:#6991AC;
}
.one-third img{
    height:auto;
    display:block;
}
#contact{
    padding-top:100px;
}
.contact{
    padding-top:50px;
    color:#f5f5f5;
}
.contact::after{
    content: '';
    position:absolute;
    width:50%;
    bottom:0;
    margin-left:25%;
    margin-right:25%;
    display:block;
    z-index:-5;
    height:200px;;
    background:linear-gradient(#445, #478);
    border-top:5px dashed #fff;
    border-top-left-radius: 25%;
    border-top-right-radius: 25%;
    box-shadow: 0 -5px 2px 0 rgba(0,0,0,0.2);
}
nav ul li a.active {
    color: #333;
}