body{
    padding-top: 70px;
}

.coming-soon {
  cursor: help;
}

/* :::::::::::::::::::: ::: :::::::::::::::::::: */
/* :::::::::::::::::::: Nav :::::::::::::::::::: */
/* :::::::::::::::::::: ::: :::::::::::::::::::: */
/* ::::: Nav ::::: */
.navbar{
    min-height: 70px;
}

.navbar-brand, h1{
    font-family: comic sans ms;
}

.navbar img{
    border-radius: 50%;
    height: 20px;
    display: inline;
    margin-top: -5px;
}

/* ::::: Nav hamburger ::::: */
.navbar-toggle{
    margin-top: 18px;
}

/* ::::: Active link ::::: */
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus{
    background-color: #5ad55a;
}

/* ::::: Link color ::::: */
.navbar-inverse .navbar-nav > li > a{
    color: #BBB;
}

/* ::::: Brand color ::::: */
.navbar-inverse .navbar-brand{
    color: #BBB;
    font-size: 30px;
    line-height: 40px;
}


/* ::::: Nav size and stuff ::::: */
.navbar-nav > li > a{
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 16px;
}

/* ::::: Dropdown bg color ::::: */
.dropdown-menu{
    background-color: #333;
    min-width: 130px;
}

/* ::::: Dropdown link color ::::: */
.dropdown-menu > li > a{
    color: #FFF;
    padding: 6px 20ps;
    -webkit-transition:padding 0.5s ease;
    -moz-transition:padding 0.5s ease;
    -o-transition:padding 0.5s ease;
    transition:padding 0.5s ease;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
    background-color:#5ad55a;
    color: #FFF;
    padding-left: 25px;
}

/* ::::: Dropdown starts from right ::::: */
.navbar-right .dropdown-menu{
    left: 0;
    right:auto;
}

/* ::::: Dropdown divider ::::: */
.dropdown-menu .divider{
    background-color: greenyellow;
}

/* :::::::::::::::::::: :::::::: :::::::::::::::::::: */
/* :::::::::::::::::::: Carousel :::::::::::::::::::: */
/* :::::::::::::::::::: :::::::: :::::::::::::::::::: */

/* ::::: Caption ::::: */
.carousel-caption{
    bottom: 100px;
    background: rgba(3,3,3,0.3);
    padding-left: 20px;
    padding-right: 20px;
    
}
/*
.carousel-indicators{
   bottom: 0;
}*/

.carousel-indicators li{
    height: 15px;
    width: 15px;
    border: 1px solid #EEE;
}

.carousel-indicators .active{
    height: 17px;
    width: 17px;
    background: #5ad55a;
}

/* :::::::::::::::::::: ::::: :::::::::::::::::::: */
/* :::::::::::::::::::: About :::::::::::::::::::: */
/* :::::::::::::::::::: ::::: :::::::::::::::::::: */

.about{
    padding-top: 60px;
    padding-bottom: 60px;
}

.about .lead{
    color: #888;
    font-size: 25px;
    margin-top: 15px;
}

.about h1 span{
    color: #5ad55a;
    font-weight: bold;
}

/* :::::::::::::::::::: :::::::: :::::::::::::::::::: */
/* :::::::::::::::::::: Features :::::::::::::::::::: */
/* :::::::::::::::::::: :::::::: :::::::::::::::::::: */

.products{
    background: #EEE;
    padding-top: 60px;
    padding-bottom: 60px;
}

.products h1{
    margin-bottom: 50px;
}

.products .product{
    margin-bottom: 30px;
}

.products .product p{
    line-height: 2em;
}

.products .product span.glyphicon{
    font-size: 25px;
    margin-bottom: 10px;
    color: #888;
}

.products img{
    max-height: 100px;
    max-width:  100px;
    margin: auto;
}


/* :::::::::::::::::::: :::::::: :::::::::::::::::::: */
/* :::::::::::::::::: Testimonials :::::::::::::::::: */
/* :::::::::::::::::::: :::::::: :::::::::::::::::::: */
.testimonials
{
    padding-top: 60px;
    padding-bottom: 60px;
}

.testimonials h1{
    font-weight: bold;
    margin-bottom: 20px;
}

.testimonials .lead{
    line-height: 2em;
    margin-bottom: 10px;
}

.testimonials span{
    font-size: 18px;
    font-weight: bold;
    color: #5ad55a;
}

.testimonials .carousel-inner{
    min-height: 160px; /* set height cus it doesn't contain photos and that will result into issues */
}

.testimonials .carousel-indicators{
    position: static; /*set it to default*/
    width: 100%;
    margin-left: auto;
    
}

.testimonials .carousel-indicators li{
    text-indent: 0;
    width: 80px;
    height: 80px;
    opacity: 0.4;
    border: 3px solid #FFF; /* to make it different on active without changing size*/
    border-radius: 50%;
    overflow: hidden; /*foto not to override the li*/
    margin: 5px;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
    
}

.testimonials .carousel-indicators li.active{
    opacity: 1;
    background: none; /* don't wanna see that color when page loads */
    border: 3px solid #5ad55a;
    width: 80px; /*don't wanna them to move*/
    height: 80px;
    
}

.testimonials .carousel-indicators li img{
    max-width: 100%;
    
}

/* :::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::: Prices :::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::: */
.prices{
    background: #EEE;
    padding-top: 60px;
    padding-bottom: 60px;
}

.prices h1{
    margin-bottom: 40px;
}

.prices .price_box{
    background: #FFF;
    padding: 10px;
    border: 1px solid #DDD;
    margin-bottom: 15px;
}

.prices .pbcolored{
    background-color: limegreen;
    font-weight: bold;
    color: aliceblue;
    box-shadow: 5px 5px 5px grey;
    margin-bottom: 30px;
}

.prices .price_box:hover p{ /*when I hover on box, this happens to p*/
    -webkit-transform:scale(1.1,1.1) rotate(360deg);
    -moz-transform:scale(1.1,1.1) rotate(360deg);
    -o-transform:scale(1.1,1.1) rotate(360deg);
    transform:scale(1.1,1.1) rotate(360deg);
    border: 2px solid #DFDFDF;
}

.prices .price_box h2{
    margin: 5px 0 15px;
}

.prices .price_box p{
    font-size: 35px;
    font-weight: bold;
    color: #666;
    width: 100px;
    height: 100px;
    background: #F3F3F3;
    border-radius: 50%;
    line-height: 100px;
    border: 2px solid #FFF;
    -webkit-transition-duration:0.7s;
    -moz-transition-duration:0.7s;
    -o-transition-duration:0.7s;
    transition-duration:0.7s;
}

.prices .price_box p ul{
    line-height: 250%;
    font-size: 18px;
}

.prices .price_box a{
    margin-bottom: 5px;
}

/* :::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::: Our Team :::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::: */

.our_team{
    background: url(../photos/ourteam.jpg) no-repeat center center fixed;
    min-height: 600px;
    
}

.our_team .team{
    background: rgba(2,2,2,0.8);
    color: #FFF;
    min-height: 600px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.our_team h1{
    margin-bottom: 60px;
}

.our_team .person{
    margin-bottom: 40px;
}


/* ::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::: Subscribe :::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::: */

.subscribe{
    padding-top: 60px;
    padding-bottom: 60px;
    background: #EEE;
}

.subscribe h1{
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.subscribe p{
    margin-bottom: 30px;   
}

.subscribe .form-control{
    border-radius: 0;
    margin-right: -5px;
    width: 300px;
} 

.subscribe button{
    border-radius: 0;
}

/* :::::::::::::::::::: ::: :::::::::::::::::::: */
/* ::::::::::::::::: Statistics :::::::::::::::: */
/* :::::::::::::::::::: ::: :::::::::::::::::::: */

.statistics{
    background: url('../photos/statistics.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 300px;
}

.statistics .data{
    background-color: rgba(2,2,2,0.8);
    color: #B6B5B5;
    min-height: 300px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.statistics h1{
    margin-bottom: 60px;
}

.statistics .stats{
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    margin-bottom: 30px;
}

.statistics .stats:hover{
    color: #FFF;
}

.statistics img{
    height: 5em;
    margin: auto;
}

.statistics p{
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 0;
}

.statistics span{
    font-size: 18px;
}

/* :::::::::::::::::::: ::: :::::::::::::::::::: */
/* ::::::::::::::::: Galeri :::::::::::::::: */
/* :::::::::::::::::::: ::: :::::::::::::::::::: */

.galeri{
    padding-top: 60px;
    padding-bottom: 60px;
    background: #EEE;
}


/* ::::::::::::::::::: ::: :::::::::::::::::::: */
/* ::::::::::::::::: Something :::::::::::::::: */
/* ::::::::::::::::::: ::: :::::::::::::::::::: */
.something{
    padding-top: 60px;
    padding-bottom: 60px;
    background: #EEE;
    min-height: 600px;
}

/* :::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::: Contact :::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::: */
.contact{
      background: url('../photos/contact.jpg') no-repeat center center fixed;
    min-height: 300px;
}

.contact .fields{
    background: rgba(9,9,9,0.8);
    min-height: 300px;
    color: #DDD;
    padding-top: 60px;
    padding-bottom: 60px;
}

.contact p{
    margin-bottom: 40px;
}

.contact textarea{
    height: 108px;
    margin-bottom: 15px; /*he didn't do it*/
}

.contact input[type="text"],
.contact textarea{
    background: rgba(82,78,78,0.7);
    color: #FFF;
    border: none;
}

/* :::::::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::: Our clients :::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::: */
.our-clients{
    padding-top: 30px;
    padding-bottom: 30px;
    background: #EEE;
}

.our-clients img{
    opacity: 0.4;
    filter:alpha(opacity=40);
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
}

.our-clients img:hover{
    opacity: 1;
}

/* :::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::: Footer :::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::: */

.footer{
    background: #333;
    color: #AAA;
    padding-top: 60px;
    padding-bottom: 60px;
}

.footer a{color:#AAA; }
.footer a:hover{color: #FFF;}
.footer h3{
    color: #0895D1;
    letter-spacing: 1px;
    margin: 30px 0 20px;
}

.footer .three-columns{
    overflow: hidden;
}

.footer .three-columns li{
    width: 33.3333%;
    float: left;
    padding: 5px 0;
}

.footer .social-list{
    overflow: hidden; /*why*/
    margin: 20px 0 10px;
}

.footer .social-list li{
    float: left;
    margin-right: 3px;
    opacity: 0.7;
    filter:alpha(70);
    -webkit-transition:all 0.7s ease;
    -moz-transition:all 0.7s ease;
    -o-transition:all 0.7s ease;
    transition:all 0.7s ease;
}

.footer .social-list li:hover{
    opacity: 1;
}
/*To do:
photo of team and other sections with bg when zooming out*/