.logo{
	width: auto;
	height: 150px;
}

.banner{
	height: 150px;
	background-image: url("../images/Banner_0.jpg");
	background-size: cover;
	background-position: center -100px;
}

.callOuts{
	border: 1px solid #d7d8da;
}

.callOuts img{
	height: auto;
	width: 100px;
}

/*Bottom Area*/
.bottomArea{
	background-color: #424243;
	height: 250px;
	color: #fff;
	font-size: .8rem;
}

.bottomArea p{
	font-size: .7rem;
}

.bottomArea h5{
	font-weight: 800;
	font-size: 16px;
}

.w-60{
	width: 60%!important;
}

.h-30{
	width: 30%!important;
}

.w-20{
	width: 20%!important;
}

/*Responsive code*/

@media (min-width: 576px) {
	.banner{
		height: 200px;
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.banner{
		height: 300px;
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.banner{
		height: 400px;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}


 .text-danger{
 	font-family: 'Princess Sofia', cursive;
    color:#e5904d!important;
    text-shadow: 1px 1px black;
}
    

#s1_Accueil{background: #1e1109;}
#s2_expertise{background: #fefaf7;}
#s3_reference{background: #f0e9d7;}
#s4_contact{background: #fefaf7;}


#s3_painting_of_the_week{background: #26221f;}
#s5_prints{background: #fefaf7;}
#s6_paintings{background: #14161B;}


#s9_footer{background: #414046;}
#s10_copyright{background: #000;}


/* ---------- s1_Accueil --------- */

#s1_Accueil {
    background: url("../images/Banner_0.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 40vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}
          
#s1_Accueil aside{
    text-align: center;
    grid-column: 2 / 4;
    grid-row: 4 / 5;
}
        
@media (max-width: 992px) {
    #s1_Accueil{height: 50vh;}
    #s1_Accueil .display-4{font-size: 28px;}
    #s1_Accueil h5{font-size: 12px;}
}

/* ---------- s2_expertise --------- */

.myGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

        
@media (max-width: 768px) {
    .myGrid{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-gap: 10px;
                
    }
            
    .mySubGrid{
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr); 
    }
}

        
@media (max-width: 576px) {
    .myGrid{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr); 
    }
                
    .mySubGrid{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, auto); 
    }
}

/* ---------- s3_painting_of_the_week --------- */

/* NO CUSTOM CSS HERE - ALL BOOTSTRAP CSS */



/* ---------- s4_contact --------- */

.s4_contact_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-gap: 10px;
    grid-template-areas: 
        "img-selfportrait img-selfportrait img-selfportrait"
        "hd-about hd-about hd-about"
        "txt-about txt-about txt-about"
    ;
}
    
.img-selfportrait{
    grid-area: img-selfportrait;
    grid-column: 2 / 3;
}

.hd-about{
    grid-area: hd-about;
    text-align: center;
}
.txt-about{
    grid-area:txt-about;
    line-height: 2;
}
    
        
@media (min-width: 768px) { 
    .s4_contact_grid{
        grid-template-areas: 
            "img-selfportrait hd-about hd-about "
            "img-selfportrait txt-about txt-about"
            "img-selfportrait txt-about txt-about"
        ;
    }
    
    .img-selfportrait{
         grid-column: 1 / 2;
    }
    
    .hd-about{
        text-align: left;
        padding-left: 20px;
    }
    
    .txt-about{
        padding-left: 20px;
    }
}
            
            
@media (min-width: 992px) { 
    .s4_contact_grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-gap: 10px;
        grid-template-areas: 
            "hd-about hd-about"
            "txt-about img-selfportrait"
        ;
    }
        
     .img-selfportrait{
         grid-column: 2 / -1;
    }
}

/* ---------- s5_prints & s3_reference --------- */

    .my-thumbs{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 10fr));
        grid-gap: 10px;
        justify-items: center;
    }
      
        
    .my-thumbs img{
        display: block;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    }
        
        
    .my-thumbs .my-bg-image{
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }



/* ---------- s6_paintings --------- */


.my-paintings-container{
    display: grid;
    min-height: 600px;
    background: white;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas: 
        "one one two three three"    
        "one one four five five"
        "six seven seven five five"
        "six eight nine nine ten"
    ;
    grid-gap: 2px;
    border: 2px solid white;
    outline: none;
}

#s6_paintings aside{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
}
        
#s6_paintings .windmill{
    width: 60%;
    justify-self: end;
    align-self: end;
}

@media (max-width: 768px) { 
            
    #s6_paintings aside{    
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: 
            "my-paintings-area"
            "windmill"
        ;
    }
        
    .my-paintings-area{
        grid-area: my-paintings-area;
    }

    .windmill{
        grid-area: windmill;
    }           
}

@media (max-width: 576px){
    .windmill{
        display:none;
    }
}

.my-cursor{
    cursor: pointer;
    outline: none;
}
        
.painting-1{
    grid-area: one;
    background: url("images/paintings-img/1920px-P1150002_Cognacq-Jay_Rembrandt_anesse_de_Balaam_rwk.jpg");
    background-position: center;
    background-size: cover;
            
}

.painting-2{
    grid-area: two;
    background: url("images/paintings-img/Rembrandt_-_Portrait_of_a_Woman_with_Gloves_-_NGI.808.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-3{
    grid-area: three;
    background: url("images/paintings-img/1920px-Rembrandt_van_Rijn_198.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-4{
    grid-area: four;
    background: url("images/paintings-img/1920px-Rembrandt_van_Rijn_-_Portrait_of_Willem_Burchgraeff_-_O_854_-_Slovak_National_Gallery.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-5{
    grid-area: five;
    background: url("images/paintings-img/Rembrandt-SMELL.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-6{
    grid-area: six;
    background: url("images/paintings-img/2560px-Rembrandt_Harmensz._van_Rijn_-_Old_Man_with_a_Gold_Chain_-_Google_Art_Project.jpg");
    background-position: center;
    background-size: cover;
}

.painting-7{
    grid-area: seven;
    background: url("images/paintings-img/2880px-Rembrandt_The_Artist_in_his_studio.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-8{
    grid-area: eight;
    background: url("images/paintings-img/Rembrandt_van_Rijn_197.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-9{
    grid-area: nine;
    background: url("images/paintings-img/1920px-Rembrandt_-_Rembrandt_and_Saskia_in_the_Scene_of_the_Prodigal_Son_-_Google_Art_Project.jpg");
    background-position: center;
    background-size: cover;
}
    
.painting-10{
    grid-area: ten;
    background: url("images/paintings-img/2560px-Rembrandt_Harmensz._van_Rijn_-_Zelfportret_op_jeugdige_leeftijd_-_Google_Art_Project.jpg");
    background-position: center;
    background-size: cover;
}


        
/* ---------- s3_reference --------- */

/* See s5_prints CSS above */

/* ---------- s8_contact --------- */

.contact-copy{grid-area: contact-copy;}
.contact-map{grid-area: contact-map;}
.contact-picture{grid-area: contact-picture;}

.contacts_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: repeat(2, 1fr);
    grid-gap: 10px;
    grid-template:
        "contact-copy contact-map contact-map" 
        "contact-picture contact-map contact-map" 
    ;
}
        
@media (max-width: 768px) {
    .contacts_grid{
        grid-template-columns: repeat(2, auto);
        grid-auto-rows: repeat(3, auto);
        grid-template:
            "contact-picture contact-copy  " 
            "contact-map contact-map"
            "contact-map contact-map"
        ;
    }
    
    .contact-picture{
        justify-self: end;
    }

}
        
        
@media (max-width: 576px) { 
    .contacts_grid{
        grid-template-columns: auto;
        grid-auto-rows: repeat(4, auto);
        grid-template:
            "contact-picture"
            "contact-copy" 
            "contact-map"
            "contact-map"
            "contact-map"
        ;
    }
              
    .contact-picture{
        transform: scaleX(-1);
        justify-self: center;
    }
        
    .contact-copy{
        text-align: center;
    }
        
}

/* ---------- s9_footer --------- */

@media (max-width: 767px) {

	.s9_footer_grid{
	    font-size: small;
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
	    grid-template-rows: repeat(6, auto);
	    grid-gap: 10px;
	    grid-template-areas: 
	        "footer_hours"
	        "footer_menu"
	        "footer_museum"
	        "footer_painting_names"
	        "footer_links"
	        "footer_img"
	        "footer_copyright";
	}
            
	.footer_menu, .footer_museum, .footer_painting_names, .footer_links{
	    border-top: 1px dashed black;
	    padding-top: 10px;
	    display: flex;
	    justify-content: space-evenly;
	    align-items: center;
	}
	           
	.footer_museum h1{
	    text-align: center;
	    
	}
	
	.footer_museum, .footer_links {
	   flex-direction: row-reverse;
	   text-align: right;
	}
	
	.footer_img{
	    width:  50%;
	    justify-self: flex-end;
	}
	            
	.footer_hours{
		text-align: center;
	}
            
}

@media (min-width: 768px) { 
            
    .s9_footer_grid{
        font-size: initial;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "footer_hours footer_img"
        "footer_menu footer_museum"
        "footer_painting_names footer_links"
        "footer_copyright footer_copyright"
                    
    }
            
                
    .footer_museum, .footer_links, .footer_museum h1 {
        flex: none;
        padding-top: 0;
        text-align: left;
        flex-direction:column;
        justify-content:flex-start;
        align-items: left;
    }
                
	.footer_img{
        width:  50%;
        justify-self: flex-end;
    }
                
}