/*MEDIA QUERY*/
@media only screen and (min-width : 640px) {

    /*****************************************
    HEADER
    *****************************************/
    
    #iantoText {
        font-size: 60pt;
    }

    /*****************************************
    NAVIGATION
    *****************************************/


    /*****************************************
    ABOUT
    *****************************************/
    
    #aboutContain img {
        float: left;
        margin: 0 auto;
        padding: 0% 3% 3% 3%;
    }


    /*****************************************
    PHOTO-CATEGORIES
    *****************************************/
    

    .tab-panel a  {
        float: left;
        width: 33.3333%;
        height: 220px;
    }

    .tab-panel {
        display: none;
        margin-bottom: -12px;
    }

    .tab-panel.active {
        color: #000;
        display: inline-block;
    }
    
    /********************
    FOOTER 
    *******************/
    footer {
        background-image: url(../img/gallery/First%20Snow%20Preseli.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

}

/*MEDIA QUERY*/
@media only screen and (min-width : 900px) {

    /*****************************************
    HEADER
    *****************************************/
    
    header {
        box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }


    /*****************************************
    NAVIGATION
    *****************************************/
    
    nav {
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        top: 0;
        left: 0;
    }

    nav a {
        color: #fff;
        text-decoration: none;
        list-style: none;
        margin: 0;
    }

    #navMenu {
        width: 100%;
        background-color: rgba(0, 0, 0, 0);
        padding: 0;
        margin: 0;
        text-align: center;
        display: block;
    }

    #navMenu a {
        display: inline-block;
        padding: 5px 20px;
        background-color: #000;
        border-radius: 30px 30px 0 0;
        border: 0;
        transition: 1s;
    }
    
    #navMenu a:hover, #navMenu a:focus {
        color: #333;
        background-color: #bebebe;
    }
    
    #navMenu a:last-child {
        border-bottom: 0px dashed #fff;
    }

    #navMenu li i{
        margin: 0 7px 0 0;
    }

    .container {
        display: none;
    }
    
    .hiddenNav {
        display: block;
    }
    
    /*************************
    NAVIGATION CONTINUED FIXED NAV WHILE SCROLLING
    *************************/
    
    .nav-fixed {
        position: fixed;
        top: 0;
    }
    .nav-fixed #navMenu a {
        border-radius: 0 0 30px 30px;
    }
    
    .nav-fixed #navMenu a:hover font{
/*        display: none;*/
    }
    
    .font-displayed {
        display: none;
    }
    
    /*************************
    ABOUT
    *************************/
    
    .slide-buttons {
        bottom: 35px;
    }
    
    #aboutC {
        position: relative;
        width: 100%;
    }
    
    #iantoPic {
        position: relative;
        width: 250px;
        float: left;
        height: 250px;
        top: 140px;
        margin-left: 100px;
        margin-top: 100px;
        margin-right: 0;
        border-radius: 50%;
        background-image: url(../img/logo/ianto.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
        margin-bottom: 0;
    }
    
    #aboutContain {
        position: relative;
        top: 50px;
        width: 50%;
        float: left;
    }
    
    /*************************
    PHOTOS CATEGORIES
    *************************/
    
    .photos {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .photos-category {
        width: 32.3333%;
        min-height: 280px; 
        position: relative;
        display: inline-block;
        margin: 0 auto;
    }

    .photos-category h2 {
        margin: 0;
        width: 100%;
        position: absolute;
        top: 100px;
        text-align: center;
        font-family: "rage", cursive;
        font-size: 45pt;
        transition: 1s;
    }
    
    .photos-category img {
        width: 100%;
        height: 280px;
        filter: brightness(45%);
        -webkit-filter: brightness(45%);
        -moz-filter: brightness(45%);
        transition: 1s;
    }
    
    .photos-category:hover img {
        filter: brightness(80%);
        -webkit-filter: brightness(80%);
        -moz-filter: brightness(80%);
    }
    
    .photos-category:hover h2 {
        color: #000;
    }

    .photos a:nth-child(4) img, .photos a:nth-child(5) img, .photos a:last-child img {
        height: 100%;
    }

    .photos a:nth-child(6) div {
        margin-bottom: 1em;
    }
   
    /***************
    SLIDER
    ***************/

    #sliderContainer{
        width: 80%;
        top: 30px;
    }

    .slide-viewer {
        position: relative;
        overflow: hidden;
        height: 400px;
    }
    
    /*************************
    GALLERY.HTML ACCORDION
    *************************/
    
    .gallery {
        width: 80%;
        padding: 2% 0;
        margin-left: auto;
        margin-right: auto;
    }
   
    .tab-panel a  {
        float: left;
        width: 24.2%;
        margin: 2px;
    }
    

    /*************************
    CONTACT FORM
    *************************/

    #form {
        width: 700px;
    }

    /*****************************************
    FOOTER
    *****************************************/

    
}

/*MEDIA QUERY*/
@media only screen and (min-width : 1329px) {

    /*************************
    ABOUT
    *************************/

    #iantoPic {
        position: relative;
        /*        top: 70px;*/
        width: 250px;
        float: left;
        height: 250px;
        margin-left: 130px;
        margin-top: 100px;
        margin-right: 0;
        border-radius: 50%;
        background-image: url(../img/logo/ianto.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom;
        margin-bottom: 0;
    }

    #aboutContain {
        width: 50%;
        float: left;
    }



}