/* Base Style*/

html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,kbd,a,samp,
small,strong,sub.sup,var,
b,i,
dl,dd,dt,ol,ul,li,
fieldset,caption,tbody,tfoot,thead,tr,td,th,
article,aside,section,canvas,details,figcaption,summary,
time,mark,audio,video {

    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background-color: transparent;
}

button { 
    border: none;
}

html {
    font-size: 1em;
    line-height: 1.4em;
    font-family: 'Hind' , sans-serif;
}

::-moz-selection {
    background-color: #b3d4fc;
    box-shadow: none;
}

::-webkit-selection {
        background-color: #b3d4fc;
        box-shadow: none;
}

::selection{
    background-color: #b3d4fc;
    box-shadow: none;

}

.container {
    width: 1120px;
    margin: 0 auto;
}

.clearfix { 
    clear: both;
}

ul {
    list-style: none;
}

header,
section.services,
section.portfolio,
section.blog,
section.news,
section.customers,
section.ourteam,
section.ourskills,
section.mapgoogle,
footer {
    min-width: 1360px;
}

/* End Base*/

/* Start style header */

header {
    background: url('../img/Shape 6.png') no-repeat;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;    
    background-size: cover;
    height: 700px;
}

div.overly {
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;

}

nav {
    padding:  40px 0 0 0;
}

.logo {
    float: left;
}

.logo > span {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: #03a9f4;
    text-align: center;
    line-height: 35px;
    color: #fff;
    font-size: 1.1em;
    border-radius: 2px;
}

.logo > h3 {
    display: inline-block;
    color: #fff ;
    font-size: 1.2em;
    font-weight: normal;
    float: right;
    padding: 7px 0 0 10px;
}
.logo > h3 > span {
    font-weight: bold;
}

.list {
    float: right;
}

header div.overly div.container nav ul li {
   float: left;
   text-align: center;
}
header div.overly div.container nav ul li:after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #03a9f4;
    transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    -webkit-transition: width 1s ease-in-out;
}
header div.overly div.container nav ul li:hover:after {
    width: 100%;
}

header div.overly div.container nav ul li a {
    display: inline-block;
    padding: 7px 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

header div.overly div.container nav ul li:last-of-type{
    box-shadow: -10px 0 0 -9px rgba(255,255,255, .4);
}

.intro {
    width: 850px;
    margin: 137px auto;
    color: #fff;
    text-align: center;
}

.intro h4 {
font-size: 1.6em;
font-weight: normal;
margin-bottom: 50px;
}

.intro h4 span {
    font-weight: bold;
}

.intro h1 {
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 25px;
}

.intro p {
    font-size: 1em;
    line-height: 2.5em;
    margin-bottom: 35px;
}
 .intro button {
     padding: 15px 37px;
     background-color: #03a9f4;
     text-align: center;
     color: #fff;
     border-radius: 3px;
     cursor: pointer;
 }

 .indicator {
     width: 100px;
     height: 20px;
     margin: 0 auto;
 }
  .indicator a {
      width: 12px;
      height: 12px;
      background-color: #CCC;
      display: block;
      float: left;
      margin-right: 8px;
      border-radius: 1px;
  }

  .indicator a.selected {
      background-color: #03a9f4;
  }

  .indicator a.selected1{
    background-color: #ffcc00;
}

/* End style  header */

/* Start Style Services*/

.boxservices {
    display: block;
    float: left;
    width: 25%;
    height: 320px;
    text-align: center;
    overflow: hidden;
}

.boxservices:nth-child(odd) {
    background-color: #f6fdff;
}

.boxservices div {
    width: 280px;
    margin: 0 auto;
    padding: 35px 0 0 0;
    overflow: hidden;
}

.boxservices div span {
    width: 60px;
    height: 60px;
    background-color: #03a9f4;
    color: #fff;
    display: inline-block;
    line-height: 1.9em;
    font-size: 2.2em;
    border-radius: 3px;
    margin-bottom: 20px;
}

.boxservices div h3 {
    text-transform: uppercase;
    color: #1f1f1f;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.boxservices div p {
    font-size: .9em;
    color: #747474;
    margin-bottom: 20px;
}

.boxservices div a{
    color: #03a9f4;
    text-decoration: none;
    font-weight: bold;
    font-size: .8em;
}

.boxservices div a.a1 {
    color: #ffcc00;
    text-decoration: none;
    font-weight: bold;
    font-size: .8em;
}

/* End Style Services*/

/* Start our portfolio*/

.portfolio {
    text-align: center;
    padding: 25em 0 0 0;
}

.portfolio h2 {
    font-size: 3em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.portfolio p {
    width: 800px;
    margin: 0 auto;
    color: #747474;
    line-height: 2em;
}

.portfolio div.menuphoto ul {
width: 500px;
margin: 20px auto;
}

.portfolio div.menuphoto ul li {
    float: left;
}

.portfolio div.menuphoto ul li a:after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #03a9f4;
    transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    -webkit-transition: width 1s ease-in-out;
}
.portfolio div.menuphoto ul li a:hover:after {
    width: 100%;
}

.portfolio div.menuphoto ul li a {
 text-decoration: none;
 font-weight: bold;
 margin-right: 15px;
 color: #03a9f4;
}

.portfolio div.menuphoto ul li a.a1 {
    text-decoration: none;
    font-weight: bold;
    margin-right: 15px;
    color: #000;
}

.portfolio div.menuphoto ul li a.a3 {
    text-decoration: none;
    font-weight: bold;
    margin-right: 15px;
    color: #ffcc00;
}

.portfolio div.gallery img {
    display: block;
    float: left;
    width: 25%;
    height: 315px;
    margin-top: 30px;
    margin-bottom: 25px;
}

.portfolio div.gallery a {
    color: #03a9f4;
    text-decoration: none;
    font-weight: bold;
    font-size: .8em;
    margin-top: 15px;
    margin-bottom: 50px;
    display: block;
}

/* End our portfolio*/

/* Start Blog*/

section.blog {
    background: url('../img/Layer 18.png') no-repeat 0 -129px;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;    
    background-size: cover;
    height: 450px;
    text-align: center;
}

.blog div {
    padding: 110px 0 0 0;
}

.blog div p {
    font-size: 1.2em;
    color: #fff;
    padding: 20px 0 0 0;

}

.blog div button {
    padding: 15px 37px;
    background-color: #03a9f4;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 30px;
}

/* End blog*/

/* Start style news */

section.news {
    text-align: center;
    padding: 70px 0 0 0;
    height: 540px;
}

section.news h2 {
    font-size: 3em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
}


section.news div.container div {
    width: 30%;
    float: left;
    height: 230px;
    margin-right: 37px;
}

section.news div.container div:last-child {
    margin-right: 0
}

section.news div.container div img {
    width: 100%
    height 230px;

}

section.news div.container div span {
color: #747474;
margin-top: 25px;
margin-bottom: 25px;
display: block;
}

section.news div.container div p {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.7em;
    color: #03a9f4;
}

section.news div.container div p.p1 {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.7em;
    color: #ffcc00;
}


/* End Style news */

/* Start Style ourteam*/

section.ourteam {
    text-align: center;
    padding: 60px 0 0 0;
   overflow: hidden;
}

section.ourteam h2 {
    font-size: 3em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
}

section.ourteam > p {
    width: 800px;
    margin: 20px auto;
    color: #747474;
    line-height: 2em;
}

section.ourteam div.container div {
    width: 22%;
    float: left;
    margin-right: 33px;
}

section.ourteam div.container div:last-child {
    margin-right: 0
}

section.ourteam div.container div img {
    width: 100%;
}

section.ourteam div.container div h3 {
margin: 25px 0 25px 0;
}

section.ourteam div.container div span {
color: #03a9f4
}


/* End Style ourteam*/

/* Start style ourskills */


section.ourskills {
    text-align: center;
    padding: 60px 0 0 0;
    overflow: hidden;
}

section.ourskills h2 {
    font-size: 3em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
}

section.ourskills> p {
    width: 800px;
    margin: 20px auto;
    color: #747474;
    line-height: 2em;
}

section.ourskills div.container div.leftskills {
    float: left;
}

section.ourskills div.container div.leftskills div.technique {
    width: 500px;
    margin-bottom: 40px;
}

section.ourskills div.container div.leftskills div.technique h3{
    text-align: center;
    text-transform: uppercase;
    float: left;
    display: inline-block

}
section.ourskills div.container div.leftskills div.technique h5 {
text-align: right;
float: right;
display: inline-block
}

section.ourskills div.container div.leftskills div.technique div:last-child {
    height: 22px;
    width: 500px;
    background-color:#b5e9ff ;
    margin-top: 12px;
    border-radius: 3px 0 0 3px;
}

section.ourskills div.container div.leftskills div.technique div span {
width: 95%;
height: 22px;
background-color: #03a9f4;
border-radius: 3px 0 0 3px;
display: inline-block;
float: left;
}

section.ourskills div.container div.rightskills {
    float: right;
}

/* End Style ourskills */

/* Start Style Our Customers */

section.customers {
   
    text-align: center;
    background: url('../img/customers.png') no-repeat 0px -76px;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;    
    background-size: cover;
    height: 452px;
}

section.customers h2 {
    padding: 80px 0 0 0;
    font-size: 3em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #FFF;
}

section.customers p {
    width: 800px;
    margin: 20px auto;
    color: #747474;
    line-height: 2em; 
    color: #FFF;
}

section.customers img {
    margin-top: 30px;
}

/* End Style Our Customers */

/* Start Style Google Map */

section.mapgoogle {
    height: 400px;
}
/* End Style Google Map */

/* Start Style Footer */

footer {
background: rgb(54, 54, 54);
padding: 30px 0 50px 0;
text-align: center;
}

footer div.container div.menubuttom {
    float: right;
}

footer div.container div.menubuttom ul li {
    display: inline-block;
}

footer div.container div.menubuttom ul li a {
    text-decoration: none;
    font-weight: bold;
    font-size: .8em;
    color: #FFF;
    margin-right: 10px;
    text-transform: uppercase;
}

footer div.container div.menubuttom ul li a:after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #03a9f4;
    transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    -webkit-transition: width 1s ease-in-out;
}
footer div.container div.menubuttom ul li a:hover:after {
    width: 100%;
}

footer div.container div.copyright {
    float: left;
}

footer div.container div.copyright p {
    color: #FFF;
}

footer div.container div.copyright p a {
    text-decoration: none;
    color: #03a9f4;
    font-weight: bold;
    font-size: .7em;
}

/* End Style Footer */