/*
Theme Name: David et Pauline
Theme URI: 
Author: David Després
Author URI: 
Version: .1
*/


/* =General
-------------------------------------------------------------- */



@media (max-width: 599px) {
    
    html, body {
        overflow-x: hidden;
    } 
    
    
    
    .baseline {
        display: none;
    }
    
    .mobile.navigation {
        /*margin-top: 75px;*/
    }
    
    /*.gradient-underline {
        display: none;
    }*/
    
    #container {
		width:100%;
        margin-top: 75px;
        padding: 0 0;
	}
    
    .work-media-headline {
        padding: 0 0%;
    }
    
    .header.black-box {
        display: none;
    }
    
    .h2-normal {
        padding-left: 5%;
        display: inline;
    }

	.nav-button {
		display:block;
        top:20px; 
        position: fixed;
	}

	nav {
		top: 0;
		position:fixed;
        margin-top: 0;
        height:75px;
        z-index: 100;
        margin-top: 0;
        padding-left: 0;
	}
    
		
    #logo img{
        width:43px;
        height:40px;
        margin : 0 auto;
	}
    
    #logo {
        position: fixed;
        width:125px;
        height:56px;
        top:20px;
        left:50%;
        z-index: 10;
        margin-left : -63px;
	}
    
    #logo .h1-normal {
        display: none;
    }
            
    .grid-item .grid-item-thumbnail-roll {
        display: none;
    }
    
    .grid-item {
        float: none;
        padding: 5% 0;
        width: 100%;
    }
    
    .message {
       padding: 0 8%;
    }
    
    .grid-item--width2 img, .grid-item--width6 img{ 
        width:100%; 
        height: auto; 
    }
    
    .grid-item-label-container {
        text-align: center;
    }
    
    .stamp {
        margin-top : 0px;
    }
        
    .filters-toggle {
        width: 100%;
        margin-left: 0;
        margin-top: 120px;
        margin-bottom: 50px;
    }
    
    .filters-category {
        width: 100%;
        height: 60px;
        margin-bottom: 20px;
        padding-left: 3%;
    }
    
    .filters-tag {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
        padding: 0 5%;
    }
    
    .button {
        padding: 1px 10px 1px 10px
    }
    
    .button_cat {
        margin-right: 10px;
    }
    
	#header {
		margin-bottom:20px;	
	}
    
    .footer-projects {
      width:100%;
    }
    
    .footer-projects-container {
        padding: 0 1em 0 1em;
    }
    
     /* Footer */
    
    footer {

    }
    
    /*Footer*/
    footer {
        position: absolute;
        width: 100%;
        left:0;
        padding: 0 5% 5% 5%;
        margin-bottom: 10%;
        margin-left: 0;
    }
    
    
    footer .col1, footer .col2 {
        width: 100%;
        float: none;
        padding-left: 0;
        text-align: center;
    }
    
    footer .col2 {
        margin-top: 25px;
        padding: 0 0 ;
    }
    
    footer .vertical {
        position: relative;
        writing-mode: inherit;
        transform: rotate(0); 
        text-align: center;
        margin-left: 0px !important;
    }
    
    footer .right {
        position: relative;
        margin-top: 25px;
    }
    
    footer.footer-about .col2 {
        padding-top: 0px;
    }
    
    footer.footer-about {
        margin: 0 0;
    }
    
    .footer-projects-content a {
        font-size:22pt;
    }
    
    .footer-projects-container {
        margin-bottom: 2em;
    }
    
    h2 {
        font-size: 40pt;
    }
    
    .padding-left {
        padding-left: 1em;
    }

    .padding-right {
        padding-right: 1em;
    }

    .padding-top {
        padding-top: 1em;
    }

    .padding-bottom {
        padding-bottom: 1em;
    }
    
    p {
        margin: 0;
        margin-bottom: 1em;
    }
    
    .title-lines {
        text-align: center;
    }
    
    tr, tr strong {
        line-height: 27pt;
        text-align: left;
        letter-spacing: 0.5pt;
    }
   
    .navigation .nav-content .nav {
        padding:0;
    }
            
    /* About */
    
    .header-img {
        overflow-x: hidden;
    }
        
    .header-img-1 {
       display: none;
    }
    
    .header-img-2 {
        width:100%;
    }
    
    .header-img-3 {
        width: 75%;
        left:0;
        bottom:-15%;
    }

    .img-border {
        border: 8px solid white;
    }
        
    .work_wrapper .col {
        float: none;
    }
    
    .work-text-content {
        position: relative;
        padding: 0 4%;
        width: 100%;
        margin-bottom: 15%
    }
            
    .work-media-content {
        width: 100%;
        padding: 0 0%;
    }
    
    ._75, ._50, ._33 {
        width: 100%;
        margin-left: 0%;
    }
    
    .ghost_mobile {
        display: none;
    }
    
    .box {
        position: relative;
        margin: 50px 0 0 0;
        width: 100%;
    }
    
    .box:after {
        content: "";
        display: table;
        clear: both;
    }
    

    .blackbox, .whitebox {
        float : left;
        width : 50%;
    }
    
    .blackbox {
        padding: 10% 5% 10% 5%;
    }
    
    .whitebox {
        margin-top: 0px;
        padding: 10% 5% 10% 5%;
    }
    
    .work-text-content .title-headline{
        margin-top: 0;
    }
        
    .disclaimer {
        margin-top:150px;
    }
        
    .work-square {
        width: 100%;
    }
    
    .text_align_left, .text_align_right{
    text-align: center;
}
    
    .about-img {
        margin: 0 0 50px 0;
    }
    
    .about_wrapper {
        padding: 0 8%;
    }
            
    .about_wrapper .col{
        width : 100%;
        padding: 0;
        float:none;
    }
    
    .about_wrapper .col img {
        width: 100%;
        height: auto;
    }
    
    .about_wrapper .col1 .colmargintop100 {
        padding-left: 0;
        padding-top: 50px;
    }
    
    .about_wrapper .col1 .colmargintop100 .col {
        width: 50%;
        float: left;
    }
    
    .about_wrapper .col1, .about_wrapper .col2, .about_wrapper .col3 {
       margin-bottom: 50px;
    }
    
    .about_wrapper .phone {
        margin-left: 0;
        margin-left: 0;
        background-color: white;
        color: blac;
        padding: 15px 15px;
    }
    
    .work-media-content .resize_60, .work-media-content .resize_85, .work-media-content .resize_97 {
    width: 100%;
}

}


@media (min-width: 600px) and (max-width: 959px){
    
    
    
    
        
    .baseline {
        display: none
    }
    
    .h2-normal {
        padding-left: 5%;
        display: inline;
    }
		
	#container {
		width:100%;
        margin-top: 90px;
	}
    
        
    /*.gradient-underline {
        display: none;
    }*/
			
	nav {
		top: 0;
		position:fixed;
        height: 90px;
        z-index: 100;
        margin-top: 0;
	}
    
    .nav-button {
		display:block;
        position: fixed;
	}
		
    #logo img{
        width:60px;
        height:56px;
        margin : 0 auto;
	}
    
    #logo {
        position: fixed;
        width:125px;
        height:56px;
        top:20px;
        left:50%;
        margin-left : -63px;
	}
        
    .grid-item .grid-item-thumbnail-roll {
        display: none;
    }
    
    .grid-item {
        width: 50%;
        padding: 5% 5% ;
    }
        
    .grid-item-label-container {
        text-align: center;
    }
    
    .stamp {
        margin-top : 0px;
    }
    
    .filters-toggle {
        width: 100%;
        margin-left: 0;
        margin-top: 120px;
        margin-bottom: 50px;
    }
    
    .filters-category {
        width: 100%;
        height: 60px;
        margin-bottom: 20px;
        padding-left: 30%;
    }
    
    .filters-tag {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
        padding-left: 30%;
    }
    								
	#header {
		margin-bottom:20px;	
	}
    
    .about_wrapper .col {
        width : 50%;
    }
    
    .footer-projects {
      width:100%;
    }
    
    .footer-projects-container {
        padding: 0 2em 0 2em;
    }
                
    /*Footer*/
    footer {
        position: absolute;
        width: 100%;
        left:0;
        padding: 0 5% 5% 5%;
        margin-bottom: 10%;
        margin-left: 0;
    }
    
    /*footer .col1 {
        width: 64%;
        float: left;
    }
    
    footer .col2 {
        width: 36%;
        float: left;
        padding-top: 0;
    }*/
    
    footer.footer-about {
        margin: 0 0;
    }
    
    
    footer.footer-about .col2 {
    padding-top: 0px;
}
    
    .footer-projects-content a {
        font-size:22pt;
    }
    
    .navigation .nav-content .nav {
        padding:0;
    }
    
        ._75, ._50, ._33 {
        width: 100%;
        margin-left: 0%;
    }
    
        .work-text-content {
        position: relative;
        padding: 0 4%;
        width: 100%;
        margin-bottom: 15%
    }

    .box {
        position: relative;
        margin: 50px 0 0 0;
        width: 100%;
    }
    
    .box:after {
        content: "";
        display: table;
        clear: both;
    }
    

    .blackbox, .whitebox {
        float : left;
        width : 50%;
    }
    
    .blackbox {
        padding: 10% 5% 10% 5%;
    }
    
    .whitebox {
        margin-top: 0px;
        padding: 10% 5% 10% 5%;
    }
    
    
     /* About */
    
    .about_wrapper .col img {
        width: 222%;
        height: auto;
    }
        
    .headline {
        float: none;
        width: 100%;
        padding-right: 0;
        text-align: left;
    }
    
    .title-headline {
        padding-left: 0%;
    }
    
    .about_wrapper {
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }
 
    .work-media-content {
        width: 100%;
        padding: 0 5%;
    }
    
    .disclaimer {
        margin-top:100px;
    }
    
    .work-square {
        width: 100%;
    }
    
    .about-img {
        margin-left: 0%;
    }
    
    .about_wrapper .col{
        width : 100%;
        padding: 0;
        float:none;
    }
    
    .about_wrapper .col img {
        width: 100%;
        height: auto;
    }
    
    .about_wrapper .col1 .colmargintop100 {
        padding-left: 0;
        padding-top: 50px;
    }
    
    .about_wrapper .col1 .colmargintop100 .col {
        width: 50%;
        float: left;
    }
    
    .about_wrapper .col1, .about_wrapper .col2, .about_wrapper .col3 {
       margin-bottom: 100px;
    }
    
    .about_wrapper .phone {
        margin-left: 0;
        margin-left: 0;
        background-color: black;
        color: white;
        padding: 15px 15px;
    }

    
}




@media (min-width: 960px) and (max-width: 1095px){
    
    #container {
		width:100%;
	}
    
    /*Footer*/
    footer {
        position: absolute;
        width: 100%;
        left:0;
        margin-left: 0;
    }
        
        
    .footer-projects-container {
        padding: 0 2em 0 2em;
    }
    
    .footer-projects {
        width: 100%;
    }
    
    footer.footer-about {
        margin: 0 0;
    }
    
     /* About */
    .headline {
        padding-right: 3%;
        float: left;
        width: 65%;
    }
    
    .title-headline {
        padding-left: 0%;
    }
    
    .about_wrapper {
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .work-media-content {
        width: 100%;
        padding: 0 5%;
    }
    
    .about-img {
        margin-left: 0%;
        margin-top: 0px;
    }
    
    .about_wrapper .col1 .colmargintop100 {
        padding-left: 5%;
    }
}

@media (min-width:1096px) and (max-width:1190px){
    
    /* About */
    
    .headline {
        margin-right: 2%;
        float: left;
        width: 65%;
    }
    
    .title-headline {
        padding-left: 0%;
    }
    
    .about_wrapper {
        margin-top: 5%;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    /*Footer*/
    footer.footer-about {
        margin-top: 0px;
    }
    
    footer.footer-about .col2 {
        padding-top: 50px;
    }
    
    .footer .about {
        margin-top: 0;
    }
    
    footer {
        position: absolute;
        width: 100%;
        left:0;
        line-height: 16pt;
        text-align: left;
        margin-left: 0;
    }
    
    /*About*/
    
    /*.about_wrapper .col1{
        width: 29%;
        padding-left: 45px;
        line-height: 17pt;
    
    }

    .about_wrapper .col2{
        width: 29%;
        padding: 6% 0 0 1%;
    }

    .about_wrapper .col3{
        width: 42%;
        padding: 0 0 0 5%;
    }*/
    
    .about_wrapper .col1 .colmargintop100 {
        padding-left: 5%;
    }
    
    .about-img {
        margin-left: 0%;
        margin-top: 0px;
    }

}

@media (min-width:1191px) and (max-width:1380px){
        /*Footer*/    
        footer.footer-about .col2 {
        padding-top: 50px;
    }
}