/*

My Custom CSS
=============

Author:  Brad Hussey
Updated: August 2013
Notes:	 Hand coded for Udemy.com

*/


/* --------------------------------------
   Layout
   -------------------------------------- */
    body {
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
	font-size: 20px;
    background: url('../../images/concrete.png') top center repeat;
    }
    
    .navbar{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 17px;
    color: #ffa800;
    width: 100%;
    background-color: #01c1f9;
    margin: 0 auto;
    text-align: center;
    opacity: 50%;
    }
    
    navbar-nav li {
	color: #FFFFFF;
    }
    
    .navbar-nav .active a, a:hover, a:focus{
        color: #333333;
    }
    
    .navbar-nav li a:hover{
        color: #333333;
        font-weight: 700;
    }
    
    .navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  color: #333333;
  background-color: #01c1f9;
}

    .navbar-brand {
    padding: 15px 15px;
    }
    
    .custom_nav .navbar.navbar-fixed-top .navbar-nav{
    background: rgba(255, 255, 255, 0.3);
    }
    
    .navbar-nav {
    color: #FFFFFF;
    margin-left: 0px;
    }

    ::-moz-selection { 
    background-color: #cd494b; 
    color: #333333;
    }

    ::selection {
    background-color: #cd494b;
    color: #ffffff;
    }
    .navbar-nav > li > a {
  color: #FFFFFF;
  margin-top: 10px;
}

    .nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #01c1f9;
}

.nav > li.disabled > a {
  color: #FFFFFF;
}

.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: #01c1f9;
}
    
.nav-tabs {
  border-bottom: 1px solid #01c1f9;
}

.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.428571429;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
  border-color: #eeeeee;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #ffffff;
  border: 1px solid #01c1f9;
  border-bottom-color: transparent;
}

.navbar-toggle {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 48px;
  height: 32px;
  padding: 8px 13px;
  background-color: transparent;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: #FFFFFF;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #333333;
  border-radius: 1px;
}


#button:hover{
    color: #043635;
}

    }

    h1 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        font-size: 60%;
    }
    
    h2 {
        font-family: 'Montserrat' , sans-serif;
        font-weight: 400;
        font-size: 50px;
        letter-spacing: 2px;
    }
    
    h3 {
        font-family: 'Montserrat' , sans-serif;
        font-weight: 400;
    }
    
    h4 {
        font-family: 'Montserrat' , sans-serif;
        font-weight: 400;
	padding: 0px;
        font-size: 35px;
    }
    
    a {
  color: #ffffff;
  text-decoration: none;
}

    h5 {
        font-family: 'Montserrat' , sans-serif;
        font-weight: 700;
        font-size: 15px;
    }
    
    #iWood h2 {
        padding-bottom: 0px;
    }
    
    #iWood h4 {
        font-weight: 600;
        font-size: 15px;
        color: #eaeaea;
        padding-bottom: 20px;
        padding-top: 0px;
    }
    
    #iWood p {
        font-size: 16px;
        font-weight: 100;
    }
    
    #aboutCallout {
        margin-top: 50px;
    }
    
    #containerNew {
	padding: 20px;
	color: #ffffff;
	width: 100%;
    background: url('../../images/header.jpg') top center no-repeat;
    background-size: cover;
        
    }
    
    #containerFoot {
    background: url('../../images/back.jpg') top center no-repeat;
    background-size: cover;
	padding: 20px;
	color: #ffffff;  
    }
    
    #newImg2 {
	margin-right: 20px;
	
    }
    
    #containerSecond {
	width: 100%;
	background-color: #333333;
        padding: 20px;
	color: #ffffff;
	font-size: 25px;

        
    }
    
    #btnBuy {
	background-color: #333333;
    }
    
    #containerSecond h2 {
	font-size: 110px;
	
        
    }
    
    #btnBuy:hover {
	color: #043635;
    }
        
    }
    
    #containerThird {
	background-color: #6b6b6b;
	padding: 20px;
	color: #ffffff;
	font-size: 20px;	
        
    }
    
        #containerForth {
	background-color: #ed3e15;
	padding: 10px;
	color: #ffffff;
	font-size: 20px;	
        
    }
    
           #containerFifth {
	background-color: #ed7015;
	padding: 10px;
	color: #ffffff;
	font-size: 20px;	
        
    }
    
               #containerSixth {
	background-color: #edad15;
	padding: 10px;
	color: #ffffff;
	font-size: 20px;	
        
    }
    
                   #containerNinth {
	background: url('../../images/background.jpg') top center no-repeat;
    background-size: cover;
	padding: 20px;
    color: #fff;
        
    }
    
    
    
        #containerFacebook {
	background-color: #3b5998;
	color: #ffffff;	
        
    }
    
        #containerTwitter {
	background-color: #00aced;
	color: #ffffff;	
        
    }
    
        #containerLinkedIn {
	background-color: #007bb6;
	color: #ffffff;	
        
    }
    
        #containerYoutube {
	background-color: #bb0000;
	color: #ffffff;	
        
    }
    
    
    .modal-dialog {}
    .thumbnail {margin-bottom:6px;}

    .carousel-control.left,.carousel-control.right{
    background-image:none;
    }

    #aboutCallout h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        margin-left: 25px;
    }
    
    .features Insta h3 {
        color: #517fa4;
    }
    
    #webdesCallout {
        margin-top: 50px;
    }
    
    #webdesCallout h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        margin-left: 25px;
    }
    
    #webdesImg {
        width: 100%
    }
    
    #aboutUs {
        color: #53b2f4;
        margin-top: 0px;
    }
    
    #footContainer hr{
        background-color: #000000;
    }
    
    #aboutUs p {
        color: #333;
    }
    
    #aboutUs img {
        margin-bottom: 20px;
        padding: 20px;
    }
    
    #aboutUs h2 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        margin-left: 15px;
    }
    
    #placeHold {
        margin-left: 10px;
    }
    
    #features {
        text-align: center;
    }
    
    #features img {
        margin: 0 0 20px;
    }
    
    #listGroup {
        font-size: 22px;
    }
    
    #inputMessage {
        margin-bottom: 15px;
    }
    
    #socialNetworking {
        color: #53b2f4;  
    }
    
    #socialNetworking h3 {
        color: #333;  
    }


    footer {
        width: 100%;
        background: #333333;
        color: #eee;
        link-hover: #da0024;
        font-size: 12px;
        padding: 20px;

    }
    
    footer a {
        color: #FFFFFF;
    }
    
    footer a:hover {
        color: #da0024;
    }


    
/* --------------------------------------
   Typography
   -------------------------------------- */
    
    body {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizelegibility;
    }
    
    .well .page-header {
        margin-top: 0;
    }

    .well. pageheader h1 {
        margin-top: 0;
    }
    
    ul.unstyled {
        list-style: none;
        padding: 0;
    }
/* --------------------------------------
   Navbar
   -------------------------------------- */
    
    #searchInput {
        width: 200px;
   }
   
   .navbar-brand {
        padding: 9px 15px;
   }
   
   
/* --------------------------------------
   Carousel
   -------------------------------------- */
    
    #myCarousel {
        margin-top: 40px;
    }
    
    .carousel-caption {
        font-size: 24px;
    }
    
    .carousel-caption h4 {
        font-size: 32px;
    }
    
    #newCarousel {
        margin-top: 10px;
        width: 100%;
    }
    
    
    #myCarousel .item { height: 400px; }
    
    #slide1 {
        background: url('../../images/carousel_medium_04.jpg') top center no-repeat; 
    }
    
    #slide2 {
        background: url('../../images/carousel_medium_06.jpg') top center no-repeat; 
    }
    
    #slide3 {
        background: url('../../images/carousel_medium_07.jpg') top center no-repeat; 
    }
    
    #newCarousel .item { height: 300px }

    #slide4 {
	background: url('../../images/carousel_medium_web.jpg') top center no-repeat;
    }
    
    #slide5 {
	background: url('../../images/carousel_medium_web2.jpg') top center no-repeat;
    }
    
    #slide6 {
	background: url('../../images/carousel_medium_web3.jpg') top center no-repeat;
    }
    
    #slide7 {
	background: url('../../images/carousel_medium_dev.jpg') top center no-repeat;
    }
    
    #
    #slide8 {
	background: url('../../images/iwood_display_02.jpg') top center no-repeat;
    }
    
    #slide9 {
	background: url('../../images/iwood-display.jpg') top center no-repeat;
    }
    
/* --------------------------------------
   Global Styles
   -------------------------------------- */
    
    .alert {
        margin-top: 20px;
        display: none;
    }
    
    .well {
        margin: 20px 0;
    }
    
    .tabbable img.thumbnail {
        margin: 0 20px 10px 0;
    }
    
    .badge {
        margin-left: 10px;
    }
    
    .thumbnails {
        margin: 20px 0;
    }
    
    .thumbnail {
        position: relative;
    }
    
    .thumbnail h3 {
        font-size: 16px;
        margin: 0 0 10px;
        line-height: 20px;
    }
    
    .thumbnail .price {
        font-size: 22px;
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 10px;
    }
    
    .thumbnail .price sup {
        font-weight: normal;
        font-size: 12px;
    }
    
    .thumbnail span.glyphicon {
        margin-right: 5px;
    }
/* --------------------------------------
   Media Queries
   -------------------------------------- */

/* Portrait & landscape phone */
@media (max-width: 480px) {
        
         #project {
            width: 100%;
        }
        
        img {
            width: 100%;
        }
        
       
        
        #containerFoot img {
            width: 60%;
        }
        
        .thumbnail .price {
            font-size: 14px;
        }
        
        .thumbnail .price sup {
            font-size: 10px;
        }
        
        .navbar-brand img  {
            height: 25px;
            margin-right: 0px;
        }
        
	
        #aboutCallout h1 {
        margin-left: 0px;
        }
        
        #aboutUs img {
        text-align: center;
        max-width: 90%;
        max-height: 90%;
        }
        
        #webDesign img {
            height: 150px;
        }
        
        #sergBadge {
            margin-right: 50px;
            margin-left: 50px;
        }
        
        #camBadge {
            margin-left: 50px;
            margin-right: 50px;
        }
        
        #smallBadge {
            visibility: hidden;
            margin-bottom: 50px;
        }
        
        #moreInfo {
            text-align: center;
        }

        #btnServices {
            margin-bottom: 30px;
            margin-top: 30px;
        }
        
        #featuresHeading {
            text-align: center;
        }
        
        #topHalf {
            text-align: center;
        }
        
        #imageGallery {
            width: 100%;
        }
        
        #sigClick {
            width: 50%;
        }
        
        #caseMac {
            width: 200%;
        }
        
        #moreAbout {
            text-align: left;
        }
        
        #socialNetworking {
            text-align: center;
        }
        
        #sergBio {
            margin-top: -200px;
            margin-bottom: 100px;
        }
        
        #camBio {
            margin-top: -230px;
            margin-bottom: 35px;
        }
        
        #aboutMac {
            visbility: hidden;
        }
        
        #listGroup {
            font-size: 15px;
        }
        

        
}

/* Portrait & landscape phone */
@media (max-width: 1000px) {
        
        img {
            width: 100%;
        }
        
         #project {
            width: 50%;
        }
        
        #containerFoot img {
            width: 25%;
        }
        
        .thumbnail .price {
            font-size: 14px;
        }
        
        .thumbnail .price sup {
            font-size: 10px;
        }
        
        .navbar-brand img  {
            height: 10%;
        }
        
        #aboutCallout h1 {
        margin-left: 0px;
        }
        
        #aboutUs img {
        text-align: center;
        max-width: 90%;
        max-height: 90%;
        }
        
        #webDesign img {
            height: 150px;
        }
        
        #video1 {
            width: 100%;
            height: 300px;
        }
        
	#socialImg {
	    padding-top: 20px;
	}
	
	
        #sergBadge {
            margin-right: 50px;
            margin-left: 50px;
        }
        
        #camBadge {
            margin-left: 50px;
            margin-right: 50px;
        }
        #socialCircle {
            height: 30%;
        }
        
        #smallBadge {
            visibility: hidden;
            margin-bottom: 50px;
        }
        
        #moreInfo {
            text-align: center;
        }

        #btnServices {
            margin-bottom: 30px;
            margin-top: 30px;
        }
        
        #featuresHeading {
            text-align: center;
        }
        
        #topHalf {
            text-align: center;
        }
        
        #imageGallery {
            width: 100%;
        }
        
        #caseMac {
            width: 200%;
        }
        
        #moreAbout {
            text-align: left;
        }
        
        #socialNetworking {
            text-align: center;
        }
        
        #sergBio {
            margin-top: -200px;
            margin-bottom: 100px;
        }
        
        #camBio {
            margin-top: -230px;
            margin-bottom: 35px;
        }
        
        #aboutMac {
            visbility: hidden;
        }
        
        #listGroup {
            font-size: 15px;
        }
        

        
}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
        
        img {
            width: 100%;
        }
        
        #containerFoot img {
            width: 40%;
        }
        
        #myCarousel .item {
            height: 310px;
        }
	  
	#slide1 {
		background: url('../../images/carousel_small_04.jpg') top center no-repeat;
	}
	
	#slide2 {
		background: url('../../images/carousel_small_06.jpg') top center no-repeat;
	}
	
	#slide3 {
		background: url('../../images/carousel_small_07.jpg') top center no-repeat;
	}
	
        #newCarousel .item {
            height: 310px;
        }
	

	#slide4 {
		background: url('../../images/carousel_small_web.jpg') top center no-repeat;
	}
	
        #slide5 {
		background: url('../../images/carousel_small_web2.jpg') top center no-repeat;
	}
        
        #slide6 {
		background: url('../../images/carousel_small_web3.jpg') top center no-repeat;
	}
        
        #slide7 {
	background: url('../../images/carousel_small_dev.jpg') top center no-repeat;
	}
    
	.carousel-caption {
		font-size: 16px;
	}
	
	.carousel-caption h4 {
		font-size: 22px;
	}
	
        #btnServices {
            margin-bottom: 30px;
            margin-top: 30px;
            padding: 10px;
        }
        

        
        #caseMac {
            padding-top: 10px;
            width: 200%;
        }
        
        #featuresHeading {
            text-align: center;
        }
        
        #placeHold {
            margin-right: 10px;
            margin-top: 10px;
        }
    
        #aboutCallout {
                text-align: center;
        }
        
                
        #sergNew {
                padding-bottom: 50px;
                padding-top: 30px;
        }
        
        #sergBadge {
                margin-left: 10px;
                margin-right: 50px;
        }
        
        #smallBadge {
                visibility: hidden;
                height: 30%;
        }
        
        #sergBio {
                text-align: center;
                margin-top: -230px;
                margin-bottom: 35px;
        }
        
        #camBio {
                text-align: center;
                margin-top: -230px;
                margin-bottom: 55px;
        }
        
        .navbar-brand {
                padding: 6px 15px;
        }
}      

/* Large desktop */
@media (min-width: 1200px) {
    
    #myCarousel .item { height: 500px; }
    
    #slide1 {
        background: url('../../images/carousel_large_05.jpg') top center no-repeat; 
    }
    
    #slide2 {
        background: url('../../images/carousel_large_06.jpg') top center no-repeat; 
    }
    
    #slide3 {
        background: url('../../images/carousel_large_09.jpg') top center no-repeat; 
    }
    
    #newCarousel .item { height: 400px; }
        
    #slide4 {
	background: url('../../images/carousel_large_web.jpg') top center no-repeat;
    }
    
    #slide5 {
	background: url('../../images/carousel_large_web2.jpg') top center no-repeat;
    }
    
    #slide6 {
	background: url('../../images/carousel_large_web3.jpg') top center no-repeat;
    }
    
    #slide7 {
	background: url('../../images/carousel_large_dev.jpg') top center no-repeat;
    }

}