body {
margin: 0 auto;
padding: 0;
width:100%;
min-height:100%;
background-color: rgba(229,229,229,0.9);
background-image: url();
background-repeat: no-repeat;
background-size: cover;
background-position:center; 
background-blend-mode:luminosity;
}
#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: #323232;
}

.wrapper {
width:1000px;
min-height:100%;
padding-bottom:20px;
background-color: rgba(229,229,229,0.9);
position:relative;
margin: 0 auto;
box-shadow: 0px 0px 14px 4px rgba(0,0,0,0.4);
margin-top:0px;
}

.header {
position:relative;
width:100%;
height:250px;
padding-bottom:0px;
background-image: url(images/ottawa_skyline_2000.jpg);
background-size:cover;
background-position:center;
background-blend-mode: soft-light;
background-color: rgba(0,0,0,0.5);
}

h1 {
text-align: center;
position: relative;
margin: 0 auto;
padding-top:60px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size:34px;
color:white;
white-space: nowrap;
}

h2 {
text-align: center;
position: relative;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size:18px;
color:rgba(255,255,255,0.8);
}

h3 {
  text-align: center;
position: relative;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size:24px;
color:black;
text-decoration: underline;
}

#portraith3 {
padding-top:30px;
}

#separator {
width:80%;
height:2px;
background-color:rgba(255,255,255,0.8);
position:relative;
margin: 0 auto;
text-align: center;
margin-top:4px;
margin-bottom:6px;
}

.header p {
text-align: center;
position: relative;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:18px;
color:black;
width:100%;
}

#acredit {
display:inline;
}

.content {
margin-top:0px;
}


.Home_Slideshow {
position:relative;
    margin: 0 auto;
    padding: 0;
    height:450px;
}

 .Home_Slideshow img {
    width:100%;
    height:auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom:30px;
    }
    
    
    
    .image {
    position: relative;
    }
    
    .image h2,a {
    color:white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size:30px;
    text-align: left;
    }
    
    .image h2 {
    width:520px;
    height:130px;
    position:absolute;
    bottom:20%;
    left:5%;
    background-color: rgba(0,0,0,0.5);
    text-align: left;
    }


    .image a {
	box-shadow:inset 0px 1px 3px 0px #bdbdbd;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #949494), color-stop(1, #5c5c5c));
	background:-moz-linear-gradient(top, #949494 5%, #5c5c5c 100%);
	background:-webkit-linear-gradient(top, #949494 5%, #5c5c5c 100%);
	background:-o-linear-gradient(top, #949494 5%, #5c5c5c 100%);
	background:-ms-linear-gradient(top, #949494 5%, #5c5c5c 100%);
	background:linear-gradient(to bottom, #949494 5%, #5c5c5c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#949494', endColorstr='#5c5c5c',GradientType=0);
	background-color:#949494;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #666666;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-size:16px;
	padding:8px 22px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
    margin-left:10px;
    margin-top: 10px;
    }

.image a:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5c5c5c), color-stop(1, #949494));
	background:-moz-linear-gradient(top, #5c5c5c 5%, #949494 100%);
	background:-webkit-linear-gradient(top, #5c5c5c 5%, #949494 100%);
	background:-o-linear-gradient(top, #5c5c5c 5%, #949494 100%);
	background:-ms-linear-gradient(top, #5c5c5c 5%, #949494 100%);
	background:linear-gradient(to bottom, #5c5c5c 5%, #949494 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#949494',GradientType=0);
	background-color:#5c5c5c;
}


.content p {
text-align: center;
position: relative;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:16px;
color:black;
width:100%;
margin-bottom: 25px;
}

#info {
font-size:18px;   
}

#textlink {
text-align: center;
position: relative;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:16px;
color:blue;
width:100%;
display:inline;   
text-decoration: underline;
}

.categories {
position:relative;
width:30%;
height:278px;
margin: 0 auto;
margin-left:1.5%;
margin-right:1.5%;
display:inline-block;
text-align: center;
background-color: rgba(255,255,255,0.5);
box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.2);
cursor:pointer;
transition:500ms;
}


.categories2 {
position:relative;
width:20%;
height:20%;
margin: 0 auto;
margin-left:1.5%;
margin-right:1.5%;
display:inline-block;
text-align: center;
background-color: rgba(255,255,255,0.5);
box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.2);
cursor:pointer;
transition:500ms;
}

.categories:hover {
transition:500ms;
box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.7);
}


.categories img {
position:relative;
width:100%;
height:100%;
object-fit: cover;
}

#cvs {
width:100%;
height:100%;
}

.categories h4 {
text-align: center;
position: relative;
display:inline;
margin-bottom: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size:16px;
color:black;
}

#Couvrette-Studio {
margin-left:35%;
}

.wrapper-popup {
width:1000px;
min-height:100%;
background-color: #767676;
position:relative;
margin: 0 auto;  
z-index: 9999;
box-shadow: 0px 0px 14px 4px rgba(0,0,0,0.66);
}

.wrapper-popup h4 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size:30px;
color:white;
width:100%; 
}

.articles a {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:20px;
color:white;
width:100%; 
background-color: rgba(255,255,255,0.2);
padding-top:20px;
padding-bottom:20px;
display:block;
}

#article2 {
background-color: rgba(255,255,255,0.0);
}

#footer {
position:relative;
margin: 0 auto;
width:1000px;
text-decoration:none;
color:grey;    
}

#footerli a {
text-decoration:none;
color:white;    
}

/* ARTICLES CSS */
#articleheader {
padding-bottom:0px;
}



.Article_Content h1 {
         text-align: center;
    position: relative;
    margin: 0 auto;
    padding-top: 5px;
    font-family: arial;
    font-size: 30px;
    color: black;
    white-space: nowrap;   
}

.nav {
position:relative;
margin-bottom:0px;
width:100%;
height:0px;
}

ul {
display:inline;
position:relative;
margin: 0 auto;
text-align: center;
text-decoration: none;
list-style: none;
text-decoration: none;
}

ul li {
margin:0 auto;
font-size: 16px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight: 100;
text-align: center;
text-decoration: none;
text-decoration: none;  
background-color: rgba(0,0,0,0.5);
padding:15px;
}

ul li a {
  font-size: 16px;
color:white;
font-family: 'Roboto', sans-serif;
font-weight: 100;
text-align: center;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
margin:20px;

}

    a:visited {
    text-decoration: none;
    }

.Article_Content {
position: relative;
width:100%;
}

.Article_Content h1 {
margin-top:10px;
margin-bottom:10px;
}

.Article_Content img {
position:relative;
display:block;
text-align: center;
margin: 0 auto;
margin-bottom:15px;
width:90%;
height:auto;
}

.Article_Content p {
 margin-top:5px;  
 margin-bottom:5px; 
font-size: 16px;
color:black;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
}

.Article_Content a {
font-size: 16px;
color:blue;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
position:relative;
display:block;
margin:auto;
margin-top:15px;  
margin-bottom:5px; 
}


@media screen and (max-width: 700px) {
    .wrapper {
    width:100%;
    height:150%;
    }    
    
    h1 {
    white-space:normal;
    }
    
    p {
    font-size: 12px;
    }
    
    .header {
    background-color:rgba(0,0,0,0);    
    }
    
    .content {
    margin-top:220px;
    }
    
    .categories {
    width:100%;
    margin-top:30px;
    }
    
    #Couvrette-Studio {
    margin-left:0px;    
    }
    
#footer {
position:relative;
bottom: -1000px;
width:100%;
}

    .wrapper-popup {
    width:100%;    
    }
    
    .wrapper-popup .nav {
    margin-top: -20px;
    }
    
    .Home_Slideshow {
        display:none !important;
    }

}

@media screen and (max-width: 350px) {

    

#footer {
position:relative;
bottom: -1250px;
width:100%;
}    
    
    .content {
    margin-top:320px;
    }
    
    .wrapper-popup h4 {
            margin-top: 100px;
    }
    
        .Home_Slideshow {
        display:none;
    }
    
}