﻿/* Desktops, TV */
@media only screen and (min-width : 1920px) {    
    /*PORTFOLIO SECTION*/
    .work {color: #000000; margin: 0 10em 3em 15em }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 1920px) {    
    /*PORTFOLIO SECTION*/
    .work {color: #000000; margin: 0 4em 5em 7em }
}

@media only screen and (max-width : 1280px) {    
    /*FOOTER*/
    footer {background: #0d182e url(../images/master_small.png) no-repeat 100% 100%}
    
    /*PORTFOLIO SECTION*/
    .work {margin: 0 3em 3em 5em }
}

@media only screen and (max-width : 1024px) {    
    /*HREO AREA */
    #hero {max-height: 740px}    
    
    /* FEATURED CLIENTS SECTION*/
    #clients img {height: 50px}
    
    /*PORTFOLIO SECTION*/
    .work {margin: 0 3em 3em 5em }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 980px) {
    
    /*HREO AREA */
    #hero{height: 720px}
    
    /*ABOUT SECTION*/
    #about{padding-top: 40px}
    
    /* FEATURED CLIENTS SECTION*/
    #clients {text-align: center}
    #clients img{height: 40px}
    #clients ul{float: none}
    #clients h4 {display: none}
    
    /* PORTFOLIO SECTION */
    #shotsByPlayerId li{width: 47%}
    #shotsByPlayerId li:first-child{width: 97%}
    
    .myphoto{text-align: center}
    .work {margin: 0 2em 2em 3em }

    /*COLLUPSABLE NAVIGATION MENU*/
    .navbar-header {float: none}
    .navbar-left,.navbar-right {float: none !important}
    .navbar-toggle {display: block}
    .navbar-collapse.collapse {display: none!important}
	.navbar-nav>li {
        float: none;
        padding-left: 30px;
        overflow: hidden;
    }
    .collapse.in{display:block !important}
    
    /*FOOTER*/
    footer {background-image: none}
}

@media only screen and (max-width : 660px) {
    
    /*Hero area*/
    #hero{height: 660px}    
}

/* Mobile Devices */
@media only screen and (max-width : 640px) {
    
    h2 {font-size: 1.9em}
    h3{font-size: 1.5em}
    h4{font-size: 1.1em}
    
    .myphoto{display: none}

    /*Hero area*/
    #hero{height: 520px}    
    .herocontent{padding-top: 4em}
    
    /*About section*/
    #about{text-align: center}
    
    /*Portfolio*/
    #portfolio {background: #eeeeee url(../images/grey2.jpg) no-repeat 0 0}
    #shotsByPlayerId li {width: 96%}
    .work {margin: 0 2em 2em 2em }
    
    /*Footer*/
    .footerlinks li{display: none}       
}

/* Smaller Mobile Devices */
@media only screen and (max-width : 480px) {
    #hero{height: 500px}    
    #clients {display: none}
    .footersocial li{font-size: 1.5em}
}

@media only screen and (max-width : 390px) {
    #hero{height: 460px}    
}

/* Smallest Mobile Devices */
@media only screen and (max-width : 320px) {
    #hero{height: 480px}
    .herocontent{padding-top: 50px; padding-bottom: 10px}

}