/* ----------------------------------------------------------------------------*/
/*	responsive.css v2.00 : Module 10 : Last Edited : 2019.09.26
/* ----------------------------------------------------------------------------*/
/*	Media Queries - Small Devices (Mobile)
/* ----------------------------------------------------------------------------*/
/* Hides Large Navigation Buttons on small screens (Mobile) */
/* Covers breakpoint of 480 */
/* Max-Width 767 */
@media screen and (max-width: 767px) {
	/* Sets font size slightly smaller for body text */
	body {
		font-size:1rem;
	}

	/* Top Nav Menu displays horizontally on small screens up to 767px */
	.dropdown-content {
		width: 100%;
	}

    /* Shows "Home" in dropdown menu when "Home" button is hidden */
    #dropdownhome {
        display:block;
    }

	/* Hides top nav "Home" button (far right) */
	#topnavhomebtn {
		display:none;
	}

	/* Larger Logo Width */
	header {
		width:80vw;
	}

	/* Hides large collage */		
	.collagelrg {
		display:none;
	}

	/* Displays small collage */
	.collagesml {
		display:block;
		padding-bottom:2%;
	}

	/* Displays Home button only on blog page */
	.btn-homemobile {
		display:block;
	}

	/* Hides nav buttons */
	.navbuttons {
    	display:none;        
	}

	/* Hides Large Image Divider */
	.imgdividerlrg {
		display:none;        
	}

	/* Hides Large Image Divider */
	.imgdividersml {
		display:block;        
	}
	
	/* Overrides for Contact Page */
	/* Wrapper for top section of Contact page */
	.mailme {
		flex-direction:column;
		justify-content:space-between;
		align-items:center;
		width:100%;
		margin-top:3vh;
		margin-bottom:13vh;
	}

	/* Text section on Contact page */
	.contact-text {
		align-items:center;
		margin:0;
		margin-bottom:0;
		padding:0;
		text-align:left;
		max-width:900px;
		z-index:200;
	}

	/* List : Bullet padding */
	/* Aligns bullets straight for mobile */
	.contact-text ul {
		padding-inline-start:0;
	}

	/* List : Bullet position */
	.contact-text ul li {
		list-style-position:inside;
	}

	/* Collage Container on Contact page */
	.contactpolaroidcollage {
    	margin-top:3%;
	}

	/* Single Button Container */
	.singlebtn {
		display:flex;
		flex-direction:row;
		justify-content:center;
		width:100%;
	}

	/* Button "Send a Mail" on Contact Page */
	.btn-sendmail {
		margin:3%;
	}

	/* Blog Entry Polaroid */
	.entryimage{
		text-align:center;
	}

	/* Blog Entry Polaroid */
	.entryimage img{
		width:80vw;
	}

	/* Collage on 404 page */
	.failcollage {
		margin-top:0;
		margin-bottom:0;
		padding-bottom:0;
	}

	/* 404 page : Main Text Section */
	.txtabovebuttons{
		margin-top:2%;
		padding-top:2%;
		margin-bottom:70px;
	}

	/* Footer Text */
	footer p {
		font-size:1.3rem;
	}
}


/* ----------------------------------------------------------------------------*/
/*	Targets Internet Explorer (IE)
/* ----------------------------------------------------------------------------*/
/* Targets IE Smaller Devices */
@media screen and (max-width: 767px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* Text section on Contact page */
	.contact-text {
		width:80vw;
	}
}

/* Targets IE All Resolutions */
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.blogsubheader {
		margin-top:1%;
	}
}


/* ----------------------------------------------------------------------------*/
/* Unnecessary duplication of code for the purposes of this assignment */
/* Only having this code means that devices with a width smaller than 480px would display incorrectly */
/* ----------------------------------------------------------------------------*/
/* Hides Large Navigation Buttons on small screens (Mobile) */
/* Targets breakpoint 480 :  Min-Width 480 */
@media screen and (min-width: 480px) and (max-width: 767px) {
	/* Sets font size slightly smaller for body text */
	body {
		font-size:1rem;
	}

	/* Top Nav Menu displays horizontally on small screens up to 767px */
	.dropdown-content {
		width: 100%;
	}

    /* Shows "Home" in dropdown menu when "Home" button is hidden */
    #dropdownhome {
        display:block;
    }

	/* Hides top nav "Home" button (far right) */
	#topnavhomebtn {
		display:none;
	}

	/* Larger Logo Width */
	header {
		width:80vw;
	}

	/* Hides large collage */		
	.collagelrg {
		display:none;
	}

	/* Displays small collage */
	.collagesml {
		display:block;
		padding-bottom:2%;
	}

	/* Displays Home button only on blog page */
	.btn-homemobile {
		display:block;
	}

	/* Hides nav buttons */
	.navbuttons {
    	display:none;        
	}

	/* Hides Large Image Divider */
	.imgdividerlrg {
		display:none;        
	}

	/* Hides Large Image Divider */
	.imgdividersml {
		display:block;        
	}
	
	/* Overrides for Contact Page */
	/* Wrapper for top section of Contact page */
	.mailme {
		flex-direction:column;
		justify-content:space-between;
		align-items:center;
		width:100%;
		margin-top:3vh;
		margin-bottom:13vh;
	}

	/* Text section on Contact page */
	.contact-text {
		align-items:center;
		margin:0;
		margin-bottom:0;
		padding:0;
		text-align:left;
		max-width:900px;
		z-index:200;
	}

	/* List : Bullet padding */
	/* Aligns bullets straight for mobile */
	.contact-text ul {
		padding-inline-start:0;
	}

	/* List : Bullet position */
	.contact-text ul li {
		list-style-position:inside;
	}

	/* Collage Container on Contact page */
	.contactpolaroidcollage {
    	margin-top:3%;
	}

	/* Single Button Container */
	.singlebtn {
		display:flex;
		flex-direction:row;
		justify-content:center;
		width:100%;
	}

	/* Button "Send a Mail" on Contact Page */
	.btn-sendmail {
		margin:3%;
	}

	/* Blog Entry Polaroid */
	.entryimage{
		text-align:center;
	}

	/* Blog Entry Polaroid */
	.entryimage img{
		width:80vw;
	}

	/* Collage on 404 page */
	.failcollage {
		margin-top:0;
		margin-bottom:0;
		padding-bottom:0;
	}

	/* 404 page : Main Text Section */
	.txtabovebuttons{
		margin-top:2%;
		padding-top:2%;
		margin-bottom:70px;
	}

	/* Footer Text */
	footer p {
		font-size:1.3rem;
	}
}


/* ----------------------------------------------------------------------------*/
/*	Media Queries - Misc
/* ----------------------------------------------------------------------------*/
/* This will still keep certain things in check in landscape mode */
/* Landscape and max-width 823px to cover high resolution mobiles in landscape mode */
@media screen and (orientation:landscape) and (max-width: 823px) {
	/* Larger Logo Width */
	header {
		width:50vw;
		margin-bottom:0;
	}

	/* Hides large collage */		
	.collagelrg {
		display:none;
	}
	
	/* Displays small collage */
	.collagesml {
		display:block;
		padding-top:0;
		padding-bottom:2%;
	}

	.collagesml img {	
		width:60vw;
	}

	/* Blog Entry Polaroid */
	.entryimage img{
		width:50vw;
	}

	/* Overrides for Contact Page */
	/* Wrapper for top section of Contact page */
	.mailme {
		margin-bottom:20vh;
	}

	/* Hides nav buttons */
	.navbuttons {
		display:none;        
	}
}

/* This will still keep certain things in check in landscape mode */
/* Landscape and max-width 480px to cover average phone in landscape mode */
@media screen and (orientation:landscape) and (max-width: 767px) and (max-height: 480px) {
	/* Larger Logo Width */
	header {
		width:60vw;
		margin-bottom:0;
	}

	/* Small/Medium device version of Collage */
	.collagesml {
		padding-top:0;
	}

	.collagesml img {	
		width:80vw;
	}

	/* 404 page : Main Text Section */
	.txtabovebuttons{
		padding-top:2%;
		margin-bottom:70px;
	}
}


/* ----------------------------------------------------------------------------*/
/*	Media Queries - Medium Devices (Tablet)
/* ----------------------------------------------------------------------------*/
/* Hides Large Navigation Buttons on medium screens (Tablet) */
/* Targets breakpoint 768 :  Min-Width 768 */
@media screen and (min-width: 768px) and (max-width: 1023px){
	/* Sets font size slightly smaller for body text */
	body {
		font-size:1rem;
	}

	/* Hides "Home" in dropdown menu when "Home" button is showing */
	#dropdownhome {
		display:none;
	}

	/* Shows top nav "Home" button (far right) */
	#topnavhomebtn {
		display:block;
	}

	/* Larger Logo Width */
	header {
		width:60vw;
	}

	/* Hides large collage */	
	.collagelrg {
		display:none;
	}

	/* Displays small collage */
	.collagesml {
		display:block;
		padding-bottom:2%;
	}

	/*Displays Home button only on blog page */
	.btn-homemobile {
		display:block;
	}
	
	/* Hides nav buttons */
	.navbuttons {
		display:none;
	}

	/* Hides Large Image Divider */
	.imgdividerlrg {
		display:none;        
	}

	/* Displays Small Image Divider */
	.imgdividersml {
		display:block;        
	}

	/* Wrapper for text section of Contact page */
	.mailme {
		flex-direction:column;
		align-items:center;
		width:60vw;
		margin:0;
		margin-top:3vh;
		margin-bottom:11vh;
	}
	
	/* Collage Container on Contact page */
	.contactpolaroidcollage {
    	margin-top:3%;
	}
	
	/* Text section on Contact page */
	.contact-text {
		width:80%;
	}

	/* Single Button Container */
	.singlebtn {
		display:flex;
		flex-direction:row;
		justify-content:center;
    	width:100%;
		margin-bottom:0;
	}

	/* Button "Send a Mail" on Contact Page */
	.btn-sendmail {
		height:9vh;
		margin:2%;
	}

	/* Blog Entry Polaroid */
	.entryimage img{
		width:40vw;
	}

	/* 404 page : Main Text Section */
	.txtabovebuttons{
		padding-top:2%;
		margin-bottom:70px;
	}
}


/* Targets Portrait Mode on Average Tablet */
/* width: 1024 */
@media only screen and (width:1024px) {
	/* Sets font size slightly smaller for body text */
	body {
		font-size:1.06rem;
	}

	/* Hides "Home" in dropdown menu when "Home" button is showing */
	#dropdownhome {
		display:none;
	}
	
	/* Shows top nav "Home" button (far right) */
	#topnavhomebtn {
		display:block;
	}

	/* Larger Logo Width */
	header {
		width:60vw;
	}

	/* Hides large collage */	
	.collagelrg {
		display:none;
	}

	/* Displays small collage */
	.collagesml {
		display:block;
		padding-bottom:2%;
	}

	/* Hides Large Image Divider */
	.imgdividerlrg {
		display:none;        
	}

	/* Displays Small Image Divider */
	.imgdividersml {
		display:block;        
	}

	/*Displays Home button only on blog page */
	.btn-homemobile {
		display:block;
	}

	/* Hides nav buttons */
	.navbuttons {
		display:none;
	}

	/* Single Button Container */
	.singlebtn {
		width:37%;
		text-align:center;
	}

	/* Button "Send a Mail" on Contact Page */
	.btn-sendmail {
		margin-top:0;
		margin-left:2%;
		margin-right:2%;
		width:50vw;
		height:9vh;
		background-position:center;
	}

	/* Wrapper for top section of Contact page */
	.mailme {
		display:flex;
		flex-direction:row;
		align-items:center;
		margin-right:5%;
		margin-top:3vh;
		margin-bottom:13vh;
		width:60vw;
	}

	/* Text section on Contact page */
	.contact-text {
		margin-bottom:0;
		padding:0;
		text-align:left;
		width:63%;
		max-width:900px;
	}

	/* Collage Polaroid Container on Contact page */
	.contactpolaroidcollage {
		margin-top:3%;
		margin-left:2%;
		margin-right:2%;
		text-align:center;
	}

	/* Blog Entry Polaroid */
	.entryimage img{
		width:40vw;
	}

	/* Collage on 404 page */
	.failcollage {
    	margin-top:0;
    	margin-bottom:0;
	}

	/* 404 page : Main Text Section */
	.txtabovebuttons{
		padding-top:2%;
		margin-bottom:70px;
	}
}


/* ----------------------------------------------------------------------------*/
/*	Media Queries - Large Devices (Desktop)
/* ----------------------------------------------------------------------------*/
/* Hides TopNav on large screens (Greater than 1024) */
/* Min-Width 1025 */
@media screen and (min-width: 1025px) {

	/* Hides top nav */
	.topnav {
		display:none;
	}  
  
	/* Shows large collage */
	.collagelrg {
		display:block;
		padding-bottom:0;
	}

	/* Displays small collage */
	.collagesml {
		display:none;
	}

	/* Displays Large Image Divider */
	.imgdividerlrg {
		display:block;        
	}

	/* Hides Home button only on blog page as Nav Buttons active */
	.btn-homemobile {
		display:none;
	}

	/* Shows nav buttons */
  	.navbuttons {
		display:flex;
	}

	/* Single Button Container */
	.singlebtn {
		width:37%;
		text-align:center;
	}
	
	/* Button "Send a Mail" on Contact Page */
	.btn-sendmail {
		margin-top:0;
		margin-left:2%;
		margin-right:2%;
		width:50vw;
		height:7vh;
		min-height:40px;
		background-position:center;
	}
	
	/* Wrapper for top section of Contact page */
	.mailme {
		display:flex;
		flex-direction:row;
		align-items:center;
		min-width:500px;
		width:67vh;
	}
		
	/* Text section on Contact page */
	.contact-text {
		margin:0;
		margin-bottom:0;
		padding:0;
		text-align:left;
		width:initial;
		z-index:200;
	}

	/* Small Divider images */
	.imgdividersml {
		display:none;
		margin:0 auto;
		padding:6px;
		padding-top:10px;
		margin-bottom:0px;
		width:80vw;  
		max-width:900px;
	}

	/* Large Divider images container */
	.imgdividerlrg {
		margin:0 auto;
		text-align:center;
		max-width:1000px;   
	}

	/* Large Divider images */
	.imgdividerlrg img {
		width:98%;
		padding-bottom:2%;
	}

	/* Collage Polaroid Container on Contact page */
	.contactpolaroidcollage {
		margin-top:0;
		margin-left:2%;
		margin-right:2%;
		text-align:center;
	}

	/* Polaroid Beach Collage on Contact page */
	.contactpolaroidcollage img {
		width:90%;
		max-width:900px;
	}

	/* Collage on Contact page */
	.contactcollagelrg {
		margin-top:1%;
		margin-bottom:110px;
	}

	/* Mobile version of Collage on Contact page */
	.contactcollagesml {
		margin-bottom:75px;
	}

	.entryimage img{
		width:17vw;
	}
}