@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400&display=swap');

body {
	margin: 0;
	line-height: 150%;
	font-family: Mulish, Arial, sans-serif;
	color: #333333;
}
a {
	text-decoration: none;
}
h2 {
	letter-spacing: 0.5px;
}


/*HEADER*/
header {
	background-color: #D6B999;
}
#index-header-div {
	margin: 0 auto;
	max-width: 70rem;
	height: 34rem;
}
#photography-header-div {
	margin: 0 auto;
	max-width: 70rem;
	height: 7rem;
	margin-bottom: 6rem;
}
.logo {
	width: 16rem;
	height: auto;
	padding-top: 1rem;
}
#activeNav {
	border-bottom: 2px solid #ffffff;
}
.desktop-nav {
	float: right;
	padding-top: 2.8rem;
}
.desktop-nav a {
	color: #ffffff;
	margin-left: 1.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.9rem;
	letter-spacing: 0.2px;
}
.desktop-nav a:hover {
	border-bottom: 2px solid #ffffff;
}
.mobile-nav {
	display: none;
}
#rocio-photos {
	max-width: 70rem;
	margin: 0 auto;
	position: relative;
}
#rocio-stairs {
	width: 45%;
	height: auto;
	border: 6px solid #ffffff;
	margin-top: -21rem;
}
#rocio-hands {
	width: 57%;
	height: auto;
	border: 6px solid #ffffff;
	margin-left: -3rem;
	position: absolute;
	top: -14rem;
}

/*HOME*/
#home-aboutus {
	margin: 0 auto;
	height: 25rem;
	background-color: #E8D9C1;
	margin-top: 12rem;
}
#home-aboutus-div {
	margin: 0 auto;
	max-width: 70rem;
}
#home-aboutus-info {
	width: 50%;
	display: inline-block;
	padding-top: 4rem;
}
#home-aboutus-info h2 {
	margin-top: 0;
	margin-bottom: 2rem;
}
#home-aboutus-info p:first-of-type {
	margin-bottom: 0;
}
#home-aboutus-info p:last-of-type {
	margin-bottom: 3rem;
}
#home-aboutus-info a {
	color: #000000;
	background-color: #D6B999;
	padding: 1rem 1.5rem;
	font-size: 0.9rem;
}
#home-aboutus-info a:hover {
	opacity: 80%;
}
#us-banff {
	width: 32%;
	height: auto;
	border: 6px solid #ffffff;
	float: right;
	margin-top: -8rem;
}
#services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 3rem;
	width: 47rem;
	margin: auto;
	margin-top: 12rem;
	text-align: center;
}
#services h2 {
	color: #000000;	
	font-size: 1.2rem;
	font-weight: 400;
	margin-top: 0.6rem;
}
#services a:hover {
	opacity: 80%;
}
#services a {
	background-color: #F2E9DC;
	width: 22rem;
}
#services img {
	width: 22rem;
	height: auto;
	margin: 0;
}

/*PHOTOGRAPHY*/
#photography-categories {
	margin: 0 auto;
	max-width: 70rem;
	text-align: center;
}
#photography-categories a {
	color: #000000;
	background-color: #EFE4D2;
	padding: 1rem 2rem;
	margin: 0 2rem;
}
#activeCategory {
	background-color: #D6B999 !important;
}
#photography-categories a:hover {
	opacity: 80%;
}
.photography-info {
	margin: 0 auto;
	max-width: 70rem;
	background-color: #EFE4D2;
	margin-top: 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: center;
}
.photography-div img {
	width: 40rem;
	height: auto;
}
#photography-info-top {
	margin-top: 4rem;
}
.wedding-details {
	display: inline-block;
	position: relative;
	text-align: center;
	
}
.wedding-details-div {
	height: 18.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.wedding-details h2 {
	margin-top: 5rem;
	margin-bottom: 6rem;
}
.wedding-details p:first-of-type {
	margin-top: -0.4rem;
}
.wedding-details a {
	color: #000000;
	background-color: #D6B999;
	padding: 1rem 2rem;
}
.wedding-details a:hover {
	opacity: 80%;
}
.primary-photo {
	width: 60rem; 
	height: auto;
	border: 6px solid #ffffff;
	margin-top: -21rem;
}
.gallery {
	text-align: center;
}
.gallery p {
	margin: 0;
}
.gallery p:first-of-type {
	margin-top: 4rem;
}
.gallery h2 {
	margin: 2rem;
}
.gallery p:last-of-type {
	margin-bottom: 4rem;
}
.gallery-photos {
	margin: 0 auto;
	max-width: 75rem;
}
.gallery-combo {
	height: 31rem;
	width: auto;
	margin: 1rem;
}
.gallery-landscape {
	height: 22.4rem;
	width: auto;
	margin: 1rem;
}
.gallery-portrait {
	height: 50.5rem;
	width: auto;
	margin: 1rem;
}

/*VIDEOGRAPHY*/
.videography-div  {
	text-align: center;
}
.videography-div button {
	text-decoration: none;
	border: none;
	background-color: #D6B999;
	font-size: 1rem;
	font-weight: 500;
	padding: 1rem 2rem;
	margin-top: -1rem;
	margin-bottom: -1rem;
	letter-spacing: 0.2px;
}
.videography-div img {
	width: 40rem;
	height: auto;
}
.youtube-video {
	margin-top: 4rem;
}

/*ABOUT US*/
#aboutus-div {
	margin: 0 auto;
	max-width: 70rem;
	margin-top: 9rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	line-height: 1.6rem;
}
#aboutus-div img {
	width: 80%;
	height: auto;
}
#aboutus-div h2 {
	margin-top: 0;
	margin-bottom: 2rem;
}
#aboutus-div p {
	font-size: 1.12rem;
}

/*CONTACT*/
form {
	margin-right: 1rem;
}
#firstname-div {
	display: inline-block;
}
#lastname-div {
	float: right;
	margin-right: -1.15rem;
}
.top-input {
	width: 15.7rem;
	padding: 0.6rem;
 	border: 1px solid #ccc;
	border-radius: none;
 	margin-top: 0.3rem;
 	margin-bottom: 1.3rem;
}
.bottom-input {
 	width: 100%;
	padding: 0.6rem;
 	border: 1px solid #ccc;
	-webkit-border-radius: none;
    -moz-border-radius: none;
	border-radius: none;
 	margin-top: 0.3rem;
 	margin-bottom: 1.3rem;
  	resize: vertical;
}
input[type=submit] {
  	background-color: #D6B999;
  	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.5px;
  	border: none;
	-webkit-border-radius: none;
    -moz-border-radius: none;
	border-radius: none;
	-webkit-padding: 1rem 2rem;
    -moz-padding: 1rem 2rem;
	padding: 1rem 2rem;
}
input[type=submit]:hover {
  	opacity: 80%;
	cursor: pointer;
}
#contact-div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
	max-width: 70rem;
	margin-top: 9rem;
}
#contact-info h2 {
	margin-top: 0;
	margin-bottom: 2rem;
}
#contact-info p {
	width: 65%;
	margin: 0;
}
#handler-div {
	margin: 0 auto;
	max-width: 70rem;
	margin-top: 9rem;
	text-align: center;
}
#otherwise-handler {
	font-size: 1.3rem;
	font-weight: 500;
}
#mobile-handler {
	display: none;
}
#handler-div img {
	width: 48rem;
	height: auto;
	margin-top: 4rem;
}

/*FOOTER*/
#upper-footer {
	background-color: #E8D9C1;
	height: 13rem;
	padding-top: 5rem;
	margin-top: 12rem;
}
.footer-div {
	margin: 0 auto;
	max-width: 70rem;
	display: grid;
	text-align: center;
}
#footer-div1 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
}
#footer-contact {
	color: #E8D9C1;
	background-color: #D6B999;
	padding: 1rem 1.5rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: 0.8rem;
}
footer img {
	width: 3rem;
	height: auto;
}
footer h2 {
	font-size: 1.1rem;
	font-weight: 400;
	margin-bottom: 2rem;
}
footer p {
	font-size: 0.8rem;
	padding: 0.8rem 0;
}
#social-media img {
	margin-top: -0.7rem;
	padding: 0 0.2rem;
}
#footer-logo {
	margin-top: 0.8rem;
}
.footer-link:hover {
	opacity: 80%;
}
#mobile-copyright {
	display: none;
}

/*RESPONSIVE*/
@media screen and (max-width: 1250px){
	#index-header-div {
		max-width: 90%;
		height: 34rem;
	}
	#photography-header-div {
		width: 90%;
	}
	#rocio-photos {
		width: 90%;
	}
	#home-aboutus-div {
		width: 90%;
	}
	#home-aboutus-info {
		width: 60%;
	}
	#us-banff {
		margin-top: -7rem;
	}
	.photography-info {
		width: 90%;
	}
	.photography-div img {
		width: 114%;
	}
	.wedding-details-div {
		height: 15.4rem;
	}
	.wedding-details {
		margin-left: 14%;
	}
	.wedding-details h2 {
		margin-top: 4rem;
		margin-bottom: 5rem;
	}
	.wedding-details p {
		margin: 0;
	}
	#aboutus-div div {
		margin-left: -2rem;
	}
	#aboutus-div {
		width: 90%;
	}
	#contact-div {
		width: 90%;
	}
	.top-input {
		width: 15.5rem;
	}
	#handler-div {
		margin-top: 8rem;
	}
	#otherwise-handler {
		font-size: 1.2rem;
	}
	#handler-div img {
		width: 69%;
		margin-top: 3rem;
	}
	.primary-photo {
		width: 77%; 
	}
	.gallery-photos {
		max-width: 100%;
	}
	.gallery-combo {
		height: 40vw;
		margin: 1.2vw;
	}
	.gallery-landscape {
		height: 28.9vw;
		margin: 1.2vw;
	}
	.gallery-portrait {
		height: 65vw;
		margin: 1.2vw;
	}
}
@media screen and (max-width: 1210px){
	#contact-info p {
		width: 70%;
	}
	.top-input {
		width: 15.1rem;
	}
}
@media screen and (max-width: 1180px){
	.top-input {
		width: 14.7rem;
	}
}
@media screen and (max-width: 1150px){
	#us-banff {
		margin-top: -5rem;
	}
	#rocio-hands {
		margin-left: -2.6rem;
	}
	#aboutus-div h2 {
		font-size: 1.3rem;
	}
	#aboutus-div p {
		font-size: 1rem;
	}
	.top-input {
		width: 14.3rem;
	}
}
@media screen and (max-width: 1130px){
	#contact-info p {
		width: 75%;
	}
	.top-input {
		width: 13.9rem;
	}
}
@media screen and (max-width: 1090px){
	.top-input {
		width: 13.5rem;
	}
}
@media screen and (max-width: 1080px){
	#home-aboutus {
		height: 23rem;
	}
	#home-aboutus-info {
		padding-top: 3rem;
	}
}
@media screen and (max-width: 1060px){
	.top-input {
		width: 13.1rem;
	}
}
@media screen and (max-width: 1050px){
	#contact-info p {
		width: 80%;
	}
}
@media screen and (max-width: 1030px){
	.top-input {
		width: 12.6rem;
	}
}
@media screen and (max-width: 1020px){
	#home-aboutus-info {
		padding-top: 2rem;
	}
	#us-banff {
		margin-top: -4rem;
	}
}
@media screen and (max-width: 1000px){
	.logo {
		width: 14rem;
	}
	.desktop-nav {
		padding-top: 2.4rem;
	}
	.desktop-nav a {
		margin-left: 1.1rem;
		font-size: 0.8rem;
	}
	#photography-header-div {
		height: 6rem;
		margin-bottom: 5rem;
	}
	#home-aboutus {
		height: 21rem;
	}
	#us-banff {
		margin-top: -5rem;
	}
	#home-aboutus-info h2 {
		font-size: 1.1rem;
	}
	#home-aboutus-info p {
		font-size: 0.9rem;
	}
	#home-aboutus-info a {
		font-size: 0.8rem;
	}
	#services {
		width: 75%;
	}
	#services h2 {
		font-size: 1rem;
	}
	#services a {
		width: 100%;
	}
	#services img {
		width: 100%;
	}
	#photography-categories a {
		font-size: 0.9rem;
	}
	.videography-div button {
		font-size: 0.9rem;
	}
	.youtube-video iframe {
		width: 72%;
		height: 40vw;
	}
	.wedding-details-div {
		height: 13.5rem;
	}
	.wedding-details h2 {
		font-size: 1.3rem;
		margin-top: 3rem;
		margin-bottom: 4rem;
	}
	.wedding-details p {
		font-size: 0.9rem;
	}
	.wedding-details a {
		font-size: 0.9rem;
	}
	#contact-info h2 {
		font-size: 1.3rem;
	}
	#contact-br {
		display: none;
	}
	#contact-info p {
		width: 85%;
	}
	.top-input {
		width: 12.2rem;
	}
	#handler-div {
		margin-top: 7rem;
	}
	#otherwise-handler {
		font-size: 1.1rem;
	}
}
@media screen and (max-width: 970px){
	.top-input {
		width: 11.7rem;
	}
}
@media screen and (max-width: 960px){
	#index-header-div {
		height: 29rem;
	}
	#rocio-stairs {
		margin-top: -18rem;
	}
	#rocio-hands {
		top: -11rem;
	}
	#home-aboutus {
		margin-top: 9rem;
	}
	#us-banff {
		margin-top: -4rem;
	}
	#services {
		margin-top: 9rem;
	}
	#upper-footer {
		height: 10rem;
		padding-top: 3rem;
		margin-top: 9rem;
	}
	#footer-contact {
		padding: 0.9rem 1.3rem;
		font-size: 0.7rem;
	}
	footer h2 {
		font-size: 0.9rem;
	}
	footer p {
		font-size: 0.7rem;
	}
	#social-media img {
		width: 2.5rem;
		margin-top: -0.5rem;
		padding: 0 0.2rem;
	}
	#aboutus-div {
		line-height: 1.4rem;
	}
	#aboutus-div h2 {
		font-size: 1.2rem;
		margin-bottom: 1.5rem;
	}
	#aboutus-div p {
		font-size: 0.9rem;
	}
	.primary-photo {
		margin-top: -18rem;
	}
	.gallery p {
		font-size: 0.9rem;
	}
	.gallery h2 {
		margin: 1.5rem;
		font-size: 1.3rem;
	}
}
@media screen and (max-width: 930px){
	.top-input {
		width: 11.1rem;
	}
}
@media screen and (max-width: 920px){
	#home-aboutus {
		height: 22rem;
	}
	#us-banff {
		width: 35%;
		margin-top: -4rem;
	}
	#home-aboutus-info {
		width: 57%;
	}
	#otherwise-handler {
		font-size: 1rem;
	}
}
@media screen and (max-width: 890px){
	.top-input {
		width: 10.55rem;
	}
}
@media screen and (max-width: 880px){
	#index-header-div {
		height: 27rem;
	}
	#photography-header-div {
		height: 5.5rem;
	}
	.logo {
		width: 12rem;
	}
	.desktop-nav {
		padding-top: 2rem;
	}
	.desktop-nav a {
		margin-left: 0.9rem;
		font-size: 0.8rem;
	}
	#rocio-hands {
		margin-left: -2.5rem;
	}
	#home-aboutus, #services, #upper-footer {
		margin-top: 8rem;
	}
	#contact-info h2 {
		font-size: 1.1rem;
	}
	#contact-info p, form label {
		font-size: 0.92rem;
	}
	input[type=submit] {
		padding: 0.8rem 1.8rem;
	}
}
@media screen and (max-width: 870px){
	#us-banff {
		margin-top: -4rem;
	}
	#home-aboutus {
		height: 20.5rem;
	}
	#home-aboutus-info {
		padding-top: 1.5rem;
	}
	#home-aboutus-info h2 {
		margin-bottom: 1.5rem;
	}
	#home-aboutus-info p:last-of-type {
		margin-bottom: 2.5rem;
	}
	.wedding-details-div {
		height: 12.5rem;
		width: 90%;
	}
	.wedding-details h2 {
		margin-top: 2.5rem;
		margin-bottom: 3.5rem;
	}
}
@media screen and (max-width: 850px){
	#aboutus-div img {
		width: 90%;
	}
	#aboutus-div div {
		margin-left: 0;
	}
	#aboutus-div {
		line-height: 1.3rem;
	}
	#aboutus-div h2 {
		font-size: 1.1rem;
		margin-bottom: 1.4rem;
	}
	#aboutus-div p {
		font-size: 0.85rem;
	}
	.top-input {
		width: 10rem;
	}
	#otherwise-handler {
		font-size: 0.9rem;
	}
}
@media screen and (max-width: 810px){
	.top-input {
		width: 9.4rem;
	}
}
@media screen and (max-width: 800px){
	.desktop-nav a {
		margin-left: 0.7rem;
	}
	#rocio-hands {
		margin-left: -2.5rem;
	}
	#us-banff {
		margin-top: -3rem;
	}
	#home-aboutus {
		margin-top: 7rem;
	}
	#services {
		margin-top: 7rem;
	}
	#upper-footer {
		margin-top: 7rem;
	}
}
@media screen and (max-width: 790px){
	#aboutus-div img {
		width: 94%;
	}
	#aboutus-div h2 {
		margin-bottom: 1.2rem;
	}
	#aboutus-div div {
		margin-left: 1rem;
	}
}

/*MOBILE*/
@media screen and (max-width: 768px){
	.desktop-nav {
		display: none;
	}
	.mobile-nav {
		display: block;
		position: absolute;
		top: 6rem;
		right: 0;
		width: 100%;
	}
	.mobile-nav img {
		width: 5rem;
		height: auto;
		float: right;
		padding: 0.5rem;
		margin-top: -6rem;
	}
	.mobile-nav img:hover {
		cursor: pointer;
	}
	#mobile-links {
		height: 200rem;
		background-color: #E2CBAD;
		display: none;
	}
	#mobile-links a {
		display: block;
		text-align: right;
		font-size: 1.6rem;
		font-weight: 400;
		padding-top: 3.4rem;
		padding-right: 2rem;
		margin: 0;
		color: #ffffff;
	}
	.logo {
		width: 15rem;
		padding-top: 1rem;
		margin-left: -0.6rem;
	}
	#index-header-div {
		height: 27rem;
	}
	#rocio-photos {
		width: 100%;
		text-align: center;
		position: static;
	}
	#rocio-stairs {
		display: none;
	}
	#rocio-hands {
		width: 80%;
		border: 8px solid #ffffff;
		margin-top: -16rem;
		margin-left: 0;
		position: static;
	}
	#home-aboutus {
		height: 30.5rem;
		margin-top: 8rem;
	}
	#home-aboutus-div {
		width: 100%;
		text-align: center;
	}
	#home-aboutus-info {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding-top: 3rem;
	}
	#home-aboutus-info p:first-of-type {
		margin-bottom: 1rem;
	}
	#home-aboutus-info h2 {
		font-size: 2rem;
		margin-bottom: 3rem;
	}
	#home-aboutus-info p:last-of-type {
		line-height: 2rem;
		margin-bottom: 4rem;
	}
	#home-aboutus-info p {
		font-size: 1.3rem;
		font-weight: 300;
	}
	#home-aboutus-info a {
		font-size: 1.1rem;
		font-weight: 300;
	}
	#us-banff {
		display: none;
	}
	#services {
		display: block;
		width: 100%;
		margin-top: 8rem;
	}
	#services h2 {
		font-size: 1.5rem;
		margin-top: 0.8rem;
	}
	#services a {
		padding-bottom: 3.7rem;
	}
	#couples-service img {
		margin-top: 4rem;
	}
	#services img {
		width: 60%;
	}
	.photography-info {
		width: 80%;
		margin-top: 2rem;
		display: block;
	}
	.photography-div img {
		width: 100%;
	}
	.wedding-details {
		display: block;
		position: static;
		margin: 0;
	}
	.wedding-details-div {
		height: 18.5rem;
		position: static;
		transform: none;
		width: 100%;
	}
	#photography-header-div {
		height: 6rem;
	}
	#photography-categories {
		max-width: 70rem;
		margin-top: 6rem;
	}
	#photography-categories a {
		font-size: 1.1rem;
		margin: 0 1rem;
	}
	#photography-info-top {
		margin-top: 5rem;
	}
	.wedding-details-div {
		height: 18.5rem;
		margin-bottom: 3rem;
	}
	.wedding-details h2 {
		font-size: 1.8rem;
		margin-top: 3.2rem;
		margin-bottom: 4.2rem;
	}
	.wedding-details p {
		font-size: 1.2rem;
		font-weight: 300;
	}
	.wedding-details p:first-of-type {
		margin-top: 3.2rem;
		margin-bottom: 0.3rem;
	}
	.wedding-details a {
		font-size: 1.1rem;
		font-weight: 300;
	}
	.gallery-header {
		height: 27rem !important;
	}
	.primary-photo {
		width: 80%;
		margin-top: -16rem;
		border: 8px solid #ffffff;
	}
	.gallery p {
		font-size: 1.2rem;
		font-weight: 300;
	}
	.gallery h2 {
		font-size: 1.8rem;
		margin: 2.5rem;
	}
	.gallery p:last-of-type {
		margin-top: 0.3rem;
	}
	.videography-div button {
		font-size: 1.1rem;
		margin: 0 1rem;
		font-weight: 100;
		color: #000000;
	}
	.youtube-video iframe {
		width: 80%;
		height: 44.5vw;
	}
	#aboutus-div div {
		margin: 0;
	}
	#aboutus-div {
		width: 85%;
		margin-top: 8rem;
		margin-bottom: -1.5rem;
		display: block;
		line-height: 1.7rem;
		text-align: center;
	}
	#aboutus-div img {
		width: 60%;
		margin-bottom: 4rem;
	}
	#aboutus-div h2 {
		margin-bottom: 2rem;
		font-size: 2rem;
	}
	#aboutus-div p {
		font-size: 1.2rem;
		font-weight: 300;
	}
	#contact-div {
		display: block;
		width: 85%;
		margin-top: 8rem;
	}
	#contact-info {
		text-align: center;
		margin-bottom: 6rem;
	}
	#contact-info h2 {
		font-size: 2rem;
	}
	#contact-info p {
		font-size: 1.2rem;
		font-weight: 300;
		line-height: 1.7rem;
		width: 90%;
		margin: auto;
	}
	form label {
		font-size: 1.1rem;
		font-weight: 300;
	}
	.top-input {
		width: 18rem;
		font-size: 1.1rem;
		font-weight: 300;
	}
	.bottom-input {
		width: 100%;
		padding: 0.6rem;
		margin-top: 0.3rem;
		margin-bottom: 1.3rem;
		font-size: 1.1rem;
		font-weight: 300;
	}
	input[type=submit] {
		font-size: 1rem;
		font-weight: 600;
		padding: 1.1rem 2rem 1rem 2rem;
	}
	#contact-send {
		text-align: center;
		margin-top: 1rem;
	}
	#upper-footer {
		height: 12rem;
		padding-top: 4rem;
		margin-top: 9.5rem;
	}
	.footer-div {
		width: 100%;
	}
	#footer-div1 {
		width: 70%;
		grid-template-columns: 1fr 1fr;
	}
	#footer-contact {
		padding: 0.9rem 1.5rem;
		font-size: 1rem;
	}
	footer h2 {
		font-size: 1.2rem;
	}
	footer p {
		font-size: 0.9rem;
	}
	#social-media img {
		width: 3rem;
		margin-top: -0.75rem;
	}
	#mobile-footer-logo {
		display: none;
	}
	#otherwise-handler {
		display: none;
	}
	#mobile-handler {
		display: block;
		font-size: 1.2rem;
		font-weight: 300;
		line-height: 1.7rem;
	}
}
@media screen and (max-width: 735px){
	.top-input {
		width: 17rem;
	}
}
@media screen and (max-width: 695px){
	.top-input {
		width: 16rem;
	}
}
@media screen and (max-width: 660px){
	#home-aboutus-info {
		width: 90%;
	}
	#footer-div1 {
		width: 80%;
	}
	.gallery-header {
		height: 24rem !important;
	}
	.primary-photo {
		margin-top: -13rem;
	}
}
@media screen and (max-width: 655px){
	.top-input {
		width: 15rem;
	}
}
@media screen and (max-width: 650px){
	#index-header-div {
		height: 25rem;
	}
	#rocio-hands {
		margin-top: -14rem;
	}
	#aboutus-div div {
		margin: 0;
	}
	#aboutus-div h2 {
		font-size: 1.8rem;
	}
	#aboutus-div p {
		font-size: 1.1rem;
	}
	#contact-info h2 {
		font-size: 1.7rem;
	}
	#contact-info p {
		font-size: 1.1rem;
	}
	form label {
		font-size: 1rem;
	}
	.top-input {
		font-size: 1rem;
	}
	.bottom-input {
		font-size: 1rem;
	}
	input[type=submit] {
		font-size: 0.9rem;
	}
	#handler-div img {
		width: 75%;
	}
	#mobile-handler {
		display: block;
		font-size: 1.2rem;
		font-weight: 300;
		line-height: 1.7rem;
	}
}
@media screen and (max-width: 620px){
	.top-input {
		width: 14rem;
	}
}
@media screen and (max-width: 600px){
	#home-aboutus {
		height: 29.9rem;
	}
	#home-aboutus-info {
		width: 85%;
	}
	#home-aboutus-info p:first-of-type {
		margin-bottom: 0.7rem;
	}
	#home-aboutus-info h2 {
		font-size: 1.8rem;
	}
	#home-aboutus-info p {
		font-size: 1.2rem;
	}
	#services h2 {
		font-size: 1.3rem;
		margin-top: 0.8rem;
	}
	.photography-info {
		width: 85%;
	}
	.primary-photo {
		width: 85%;
	}
	.youtube-video iframe {
		width: 85%;
		height: 47.5vw;
	}
}
@media screen and (max-width: 580px){
	#home-aboutus {
		height: 32rem;
	}
	#home-aboutus-info {
		width: 80%;
	}
	.top-input {
		width: 13rem;
	}
}
@media screen and (max-width: 550px){
	#index-header-div {
		height: 22rem;
	}
	.logo {
		margin-left: -0.2rem;
	}
	#rocio-hands {
		margin-top: -12rem;
	}
	#home-aboutus {
		margin-top: 7rem;
	}
	#services img {
		width: 65%;
	}
	#upper-footer {
		height: 11rem;
		padding-top: 3rem;
		margin-top: 9.2rem;
	}
	#footer-div1 {
		width: 90%;
	}
	#footer-contact {
		font-size: 0.9rem;
	}
	footer h2 {
		font-size: 1.1rem;
	}
	footer p {
		font-size: 0.8rem;
	}
	#social-media img {
		width: 2.9rem;
		margin-top: -0.6rem;
	}
	.gallery-header {
		height: 23rem !important;
	}
	.primary-photo {
		margin-top: -13rem;
	}
	#aboutus-div h2 {
		font-size: 1.6rem;
	}
	#aboutus-div img {
		width: 70%;
		margin-bottom: 3rem;
	}
	#contact-info h2 {
		font-size: 1.6rem;
	}
	#handler-div img {
		width: 80%;
	}
}
@media screen and (max-width: 545px){
	.top-input {
		width: 12rem;
	}
}
@media screen and (max-width: 505px){
	.top-input {
		width: 11rem;
	}
}
@media screen and (max-width: 490px){
	#home-aboutus {
		height: 104.5vw;
	}
	#home-aboutus-info h2 {
		font-size: 5.5vw;
		margin-bottom: 9.5vw;
	}
	#home-aboutus-info p {
		font-size: 3.9vw;
	}
	#home-aboutus-info p:first-of-type {
		margin-bottom: 2vw;
	}
	#home-aboutus-info p:last-of-type {
		line-height: 6.5vw;
	}
	#home-aboutus-info a {
		font-size: 3.6vw;
	}
	#services h2 {
		font-size: 1.15rem;
	}
	#couples-service img {
		margin-top: 3.5rem;
	}
	#services img {
		width: 70%;
	}
	#photography-categories {
		margin-top: 5rem;
	}
	#photography-categories a {
		font-size: 1rem;
	}
	#photography-info-top {
		margin-top: 4.5rem;
	}
	.wedding-details-div {
		height: 17.7rem;
		margin-bottom: 2.5rem;
	}
	.wedding-details h2 {
		font-size: 1.6rem;
		margin-top: 3rem;
		margin-bottom: 4rem;
	}
	.wedding-details p {
		font-size: 1.1rem;
	}
	.wedding-details p:first-of-type {
		margin-top: 3rem;
		margin-bottom: 0.1rem;
	}
	.wedding-details a {
		font-size: 1rem;
	}
	.gallery-header {
		height: 21rem !important;
	}
	.primary-photo {
		margin-top: -11rem;
	}
	.gallery p {
		font-size: 1.1rem;
	}
	.gallery h2 {
		font-size: 1.6rem;
		margin: 2.3rem;
	}
	.gallery p:last-of-type {
		margin-top: 0.1rem;
	}
	.gallery-combo, .gallery-landscape, .gallery-portrait {
		width: 85%;
		height: auto;
		margin: 0.5rem;
	}
	.videography-div button {
		font-size: 1rem;
		
	}
	.videography-div button {
		text-decoration: none;
		border: none;
		background-color: #D6B999;
		font-size: 1rem;
		-webkit-font-weight: 300;
		-moz-font-weight: 300;
		font-weight: 300;
		padding: 1rem 2rem;
		margin-top: -1rem;
		margin-bottom: -1rem;
	}
	.videography-div img {
		width: 40rem;
		height: auto;
	}
	.youtube-video {
		margin-top: 4rem;
	}
	#mobile-handler {
		font-size: 1.1rem;
		line-height: 1.7rem;
	}
}
@media screen and (max-width: 470px){
	#home-aboutus {
		height: 106.5vw;
	}
	.top-input {
		width: 10rem;
	}
}
@media screen and (max-width: 450px){
	#index-header-div {
		height: 20rem;
	}
	.logo {
		margin-left: 0;
	}
	#rocio-hands {
		margin-top: -10rem;
	}
	#home-aboutus {
		height: 108vw;
	}
	.gallery-header {
		height: 20rem !important;
	}
	.gallery p {
		font-size: 1rem;
	}
	.gallery h2 {
		font-size: 1.3rem;
		margin: 1.7rem;
	}
	.gallery p:last-of-type {
		margin-top: -0.3rem;
	}
	.primary-photo {
		margin-top: -10rem;
	}
	#footer-div1 {
		display: block;
	}
	#upper-footer {
		height: 20rem;
	}
	footer h2 {
		margin-bottom: 1.7rem;
	}
	#social-media {
		margin-bottom: 3.5rem;
	}
	#otherwise-copyright {
		display: none;
	}
	#mobile-copyright {
		display: block;
	}
}
@media screen and (max-width: 430px){
	#home-aboutus {
		height: 97vw;
	}
	#home-aboutus-info {
		padding-top: 2rem;
	}
	#home-aboutus-info p:first-of-type {
		margin-bottom: 0.5vw;
	}
	#home-aboutus-info p:last-of-type {
		line-height: 6.2vw;
		margin-bottom: 13vw;
	}
	#home-aboutus-info h2 {
		margin-bottom: 8vw;
	}
	.top-input {
		width: 9rem;
	}
	#mobile-handler {
		font-size: 1rem;
		line-height: 1.4rem;
	}
}
@media screen and (max-width: 400px){
	#index-header-div {
		height: 18rem;
	}
	.mobile-nav img {
		width: 4.3rem;
		padding: 0.8rem 0.5rem;
		margin-top: -6rem;
	}
	.logo {
		width: 13rem;
		padding-top: 1.3rem;
		margin-left: 0;
	}
	#rocio-hands {
		margin-top: -10rem;
		width: 85%;
	}
	#home-aboutus {
		height: 103vw;
	}
	#home-aboutus-info {
		width: 90%;
	}
	#home-aboutus-info h2 {
		font-size: 5.8vw;
	}
	#home-aboutus-info p {
		font-size: 4.2vw;
	}
	#home-aboutus-info p:first-of-type {
		margin-bottom: 0.7vw;
	}
	#home-aboutus-info p:last-of-type {
		line-height: 6.5vw;
	}
	#home-aboutus-info a {
		font-size: 3.9vw;
	}
	#couples-service img {
		margin-top: 3rem;
	}
	#services img {
		width: 80%;
	}
	#services h2 {
		font-size: 1rem; 
		margin-top: 0.6rem;
	}
	#services a {
		padding-bottom: 3.2rem;
	}
	.gallery-header {
		height: 18rem !important;
	}
	.primary-photo {
		margin-top: -10rem;
	}
	#upper-footer {
		height: 18.5rem;
		padding-top: 2.5rem;
	}
	#footer-contact {
		font-size: 0.8rem;
		padding: 0.85rem 1.4rem;
	}
	footer h2 {
		font-size: 1rem;
	}
	#social-media img {
		width: 2.7rem;
		margin-top: -0.6rem;
	}
	#social-media {
		margin-bottom: 3rem;
	}
	.wedding-details-div {
		height: 14.5rem;
	}
	#photography-categories a {
		font-size: 3.7vw;
		margin: 0 0.7rem;
		padding: 0.9rem 1.5rem;
	}
	.wedding-details h2 {
		font-size: 5.8vw;
		margin-top: 2rem;
		margin-bottom: 3rem;
	}
	.wedding-details p {
		font-size: 4vw;
	}
	.wedding-details p:first-of-type {
		margin-top: 2rem;
		margin-bottom: -0.1rem;
	}
	.wedding-details a {
		font-size: 3.7vw;
		padding: 0.9rem 1.5rem;
	}
	#aboutus-div {
		margin-top: 7rem;
		margin-bottom: -1.5rem;
		line-height: 1.5rem;
	}
	#aboutus-div img {
		width: 80%;
	}
	#aboutus-div h2 {
		font-size: 1.4rem;
	}
	#aboutus-div p {
		font-size: 1rem;
	}
	.videography-div button {
		font-size: 3.7vw;
		padding: 0.9rem 1.5rem;
	}
	#contact-div {
		width: 88%;
		margin-top: 7rem;
	}
	#contact-info h2 {
		font-size: 1.4rem;
	}
	#contact-info p {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	form label {
		font-size: 0.9rem;
	}
	.top-input {
		font-size: 0.9rem;
	}
	.bottom-input {
		font-size: 0.9rem;
	}
	input[type=submit] {
		font-size: 0.8rem;
		-webkit-padding: 0.9rem 1.5rem;
		-moz-padding: 0.9rem 1.5rem;
		padding: 0.9rem 1.5rem;
	}
	#handler-div {
		margin-top: 7rem;
	}
	#mobile-handler {
		font-size: 1.1rem;
		line-height: 1.6rem;
		width: 80%;
		margin: auto;
	}
}
@media screen and (max-width: 380px){
	.top-input {
		width: 8rem;
	}
}
@media screen and (max-width: 370px){
	#home-aboutus {
		height: 105vw;
	}
}
@media screen and (max-width: 350px){
	#index-header-div {
		height: 17rem;
	}
	#rocio-hands {
		margin-top: -9rem;
	}
	#home-aboutus {
		height: 108vw;
	}
	#services h2 {
		font-size: 0.9rem; 
	}
	#upper-footer {
		height: 18.5rem;
		padding-top: 2.5rem;
	}
	#footer-contact {
		font-size: 0.7rem;
		padding: 0.85rem 1.4rem;
	}
	footer h2 {
		font-size: 0.9rem;
	}
	#social-media img {
		width: 2.7rem;
		margin-top: -0.6rem;
	}
	#social-media {
		margin-bottom: 3rem;
	}
	#photography-categories a {
		font-size: 4vw;
		margin: 0 0.9rem;
	}
	#photography-info-top {
		margin-top: 4rem;
	}
	.wedding-details-div {
		height: 12.9rem;
	}
	.wedding-details h2 {
		font-size: 5.9vw;
		margin-top: 1.5rem;
		margin-bottom: 2.5rem;
	}
	.wedding-details p:first-of-type {
		margin-top: 1.5rem;
		margin-bottom: -0.2rem;
	}
	.wedding-details a {
		font-size: 3.8vw;
	}
	.gallery-header {
		height: 17rem !important;
	}
	.primary-photo {
		margin-top: -9rem;
	}
	.gallery p {
		font-size: 1rem;
	}
	.gallery h2 {
		margin: 1.6rem;
	}
	.gallery p:first-of-type {
		margin-top: 3rem;
	}
	.gallery p:last-of-type {
		margin-bottom: 3rem;
	}
	#aboutus-div {
		line-height: 1.4rem;
	}
	#aboutus-div h2 {
		font-size: 1.3rem;
	}
	#aboutus-div p {
		font-size: 0.9rem;
	}
	.videography-div button {
		font-size: 3.9vw;
	}
	#contact-info h2 {
		font-size: 1.3rem;
	}
	#contact-info p {
		font-size: 0.9rem;
		line-height: 1.4rem;
	}
	form label {
		font-size: 0.8rem;
	}
	.top-input {
		font-size: 0.8rem;
	}
	.bottom-input {
		font-size: 0.8rem;
	}
	input[type=submit] {
		font-size: 0.7rem;
	}
	#mobile-handler {
		font-size: 1rem;
		line-height: 1.4rem;
		width: 80%;
		margin: auto;
	}
}
@media screen and (max-width: 345px){
	.top-input {
		width: 7.5rem;
	}
}