/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* {
	box-sizing: border-box;
  }


/* ----END OF RESET CODE ---- */ 

/*==================

COLOURS:

ALMOST BLACK FOR BODY TEXT AND ODD BACKGROUND #1e1415
BURN ORANGE AS DECORATION AND H3 AND H2 #dd9a5c
SALMON ROSE FOR THE NAVIGATION FONT AND SMALL DETAILS   #af4f59
LIGHT GREY FOR NAVIGATION AND SMALL DETAILS   #ccccca
DARK PURPLE FOR BOXES OF INFO AND EVEN BACKGROUND #57242f

MAIN  TYPOGRAPHY:
Body text / HELVETICA FONT FAMILY/ BACKUP FONT / Arial, Verdana, Tahoma, Trebuchet, sans-serif.
H1 H2 H3 H4 / UTOPIAS STD LIGHT AND BOLD /BACK UP FONT TIMES/ Georgia, Times New Roman, Times, serif.

======================================================================================================*/

/* ---------------------------------------------------
GENERAL STYLING RULES IN ALL THE PAGES NAVIGATION IS THE SAME--------------------------------------------------- */
main{
	width: 90%;
	  max-width: 64em;
	  margin: 0 auto;
	 line-height: 1.5;
}

nav {
	text-align: center;
	background-color: #ccccca;
	padding: 15px;
}
.menu li {
	display: inline-block;
	list-style-type: none;
	font-size: 30px;
	text-decoration: none;
	}
.menu a {
	padding: 30px;
	text-decoration: none;
   font-family: "Utopia-std", Georgia, "Times New Roman", Times, serif;
   font-weight: 400;
   color: #af4f59;
}

.menu a:hover, .menu a:active, .menu a:focus {
	background-color: #dd9a5c;
}


/* ---------------------------------------------------
HEADER STYLING FOR VENUE, BEHIND AND ACTORS SAME STRUCTURE IN THIS 3 SUBPAGES AND BIGGER IN THE MAIN PAGE

--------------------------------------------------- */
.header-background-main {
	background: url('img/header.png');
}
.header-background-story {
	background: url('img/monica-real.png');
}
.header-background-venue {
	background: url('img/monica-judy.png');
}
.header-background-actors {
	background: url('img/lady-monica.png');
}
.header-background-venue, .header-background-story, .header-background-actors{
	height: 430px;
	background-size: cover;
	background-repeat: no-repeat;
	min-width: 1000px;
	margin: auto;
	padding: 30px 0;
	}
	.header-background-main{
		height: 800px;
		background-size: cover;
		background-repeat: no-repeat;
		min-width: 1000px;
		margin: auto;
		padding: 30px 0;
	}


/* ---------------------------------------------------
TEXT STYLING
--------------------------------------------------- */
h1, h2, h3, h4{
	font-family: "Utopia-std", Georgia, "Times New Roman", Times, serif;
}
h1{
	font-size: 80px;
	font-weight: bold;
	color: white;
	margin: 2em;
	text-align: center;
	
}

h2{
text-align: center;
font-weight: bold;
font-size: 55px;
color: #dd9a5c;
margin : 50px;

 }
 
h3{
text-align: center;
font-weight: 400;
font-size: 45px;
color: #dd9a5c;
margin: 20px;
 }
 h4{
 text-align: left;
 font-weight: bold;
 font-size: 35px;
 color: #dd9a5c;
 margin: 20px;
  }
 
 p{  font-family: "Helvetica", Arial, Verdana, Tahoma, Trebuchet, sans-serif;
	 line-height: 1.5;
	 font-size: 20px;
	 
	 }
 
 i {
 font-style: italic;
 color: #dd9a5c;
 }
 /* ----H1,H2,H3 80% IS A PATTERN IN AL THE PAGES----- */





/* ---------------------------------------------------
BUTTON STYLING
--------------------------------------------------- */
button {
  background-color:  #af4f59; /* soft red */
  border: none;
  color: #fff;
  padding:  1rem 2rem;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
}

button:hover {
	background-color: #ccccca;
}

button:active {
	background-color: #af4f59;
	color: #fff;
}

/* ---------------------------------------------------
INTRO PAGE DISPLAY TABLES INFORMATION CASTING AND PRODUCERS
--------------------------------------------------- */
/* ------------INTRO MAIN ELEMENTS ----------- */
div.intro p{
	color:#1e1415;
	margin: 60px 130px 80px 130px;
	}


.title h1{
	margin-top: 330px;
	font-size: 120px;
}

.intro button{
	margin: 1em 22em 1em 22em;
}
/* ------------CREDITS TABLE ----------- */
.credits dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.credits dt {
  font-size: 20px;
  color: white;
  float: left;
  width: 40%;
  background: #57242f;
  padding: 0;
  margin: 0;
}
.credits dd {
  float: left;
  width: 50%;
  padding: 0;
  margin: 0;
  margin-left: 10px;
}

/* ------------CASTING TABLE ----------- */
.casting dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.casting dt{
  font-size: 20px;
  color: white;
  float: left;
  width: 40%;
   background: #57242f;
  padding: 0;
  margin: 0;
}
.casting dd {
  float: left;
  width: 50%;
  padding: 0;
  margin: 0;
  margin-left: 10px;
}


/* ---------------------------------------------------
 FILM TIMES PAGE DISPLAY TABLES
--------------------------------------------------- */
/* ------------INTRO MAIN ELEMENTS ----------- */
.charity p{
	text-align: center;
	margin: 50px 130px 50px 130px;
	
}
.charity button{
	margin: 1em 22em 1em 22em;
}
.charity a{
	text-decoration: none;
	color: #af4f59;
	font-weight:bold;
}

/* ------------SCREEN TIME TABLE ----------- */
div dd {
	float: left;
	font-family: "Utopia-std", Georgia, "Times New Roman", Times, serif;
	font-weight: 400;
	font-size: 20px;
}
div dd a:link, div dd a:visited {
	color:  #57242f;
	background-color:   #dd9a5c;;
    margin: 1em 2em 1em 2em;
	padding: 1.5em;
	display:block;
    text-align: center;
	text-decoration: none;
}
div dd a:hover, div dd a:active {
	color: #dd9a5c;
	background-color:  #ccccca;
}
div dt {
	font-family: "Utopia-std", Georgia, "Times New Roman", Times, serif;
    font-size: 30px;
	text-align: center;
    clear: both;
    display: table;
	padding:  1rem 1rem;
}
div dl {
  content: "";
  clear: both;
  display: table;
  margin: 1em 4em 1em 4em;
 
}
/* ------------LOCATION AND MAP  ----------- */
.even address{
    font-size: 35px;
	margin: .5em 5em 1em 5em;
	padding-top: 1em;
	padding-bottom:.5em;

}

div iframe {
	margin: 2em 8em 1em 8em;
	padding-top: 1.5em;
}

/* ---------------------------------------------------
ACTORS INFO AND AFTER MOVIE SAME DESIGN
--------------------------------------------------- */
/* ------------INTRO MAIN ELEMENTS ----------- */
.wrap p{
	padding:  2.5rem 2rem;
}
div.actor p {
	color: #ccccca;
	padding:  1rem 2rem;
	margin-bottom: 10px;

}
div.actor h3{
	color: white;
	font-weight: bold;
	margin-top: 80px;
	font-size: 43px;

}
/* ------------STICK NOTES EVEN AND ODD----------- */
.odd img {
	margin: 50px;
	border: 5px solid white;
	filter: drop-shadow(5px 5px 5px #ccccca);
	margin-top: -5rem;
	border-radius: 15%;

}

.even img {
	margin: 50px;
	border: 5px solid white;
	filter: drop-shadow(5px 5px 5px #ccccca);
	margin-top: -5rem;
	border-radius: 15%;
	
}

.odd {
	padding: 1rem 1.5rem;
	color: #ccccca;
	background-color: #57242f;
	border: 80px solid white;
	
	
}
.even {
	color: #ccccca;
	background-color: #1e1415;
	padding: 2rem 1.5rem;
	border: 80px solid white;
	
	
}

div.odd, div.even {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	flex-basis: auto;
	justify-content: left;
}

/* ---------------------------------------------------
ACTORS INFORMATION PAGES AND BEHIND INFORMATION AND VENUE PAGE ARE THE SAME GRID
--------------------------------------------------- */
/* ---------------------------------------------------
FOOTER STYLING SAME IN ALL THE PAGES
--------------------------------------------------- */
footer a {
	padding: 10px;
   text-decoration: none;
   font-family: "Utopia-std", Georgia,"Times New Roman", Times, serif;
   color: #af4f59;
}
footer a:hover {
	background-color: #dd9a5c;
}
footer p {
	text-align: center;
	background-color: #ccccca;
	padding: 20px 0px 20px 0px;
	border-top: 10px solid white;
	border-bottom: 10px solid white;
}
/* ------------------------
SMALL SCREENS MOBILE FIRST

---------------------------*/
/* ---------------------------------------------------MEDIA QUERIES ---- BREAKPOINT 370PX IPHONE 11 SIZE---------------------------*/
@media (min-width: 330px) {
/* small screens */

/* ------------------------
HEADERS AND NAV MENU------- */
.header-background-main {
background: url('img/header-small.png');
height: 200px;
background-size: cover;
background-repeat: no-repeat;
min-width: 200px;
margin: auto;
padding: 30px 0;
}
.header-background-venue, .header-background-story, .header-background-actors{
height: 200px;
background-size: cover;
background-repeat: no-repeat;
min-width: 200px;
margin: auto;
padding: 30px 0;
}
.menu li {
  font-size: 15px;
}
.menu a {
	padding: 10px;

}
main{
	width: 70%;
	  max-width: 34em;
	  margin: 0 auto;
background: none;
}
/* ----------------------
TEXT STYLING
------------------------- */
h1{
	font-size: 30px;
}
.title h1{
	margin-top: 50px;
	font-size: 30px;
}
h2{
font-size: 20px;
margin : 10px;

 }
 
h3{
font-size: 17px;
margin: 10px;
 }
 h4{
 font-size: 15px;
margin-top: 5px;
margin-bottom: 5px;
  }
  p{  
	 line-height: 1.5;
	 font-size: 13px;
}
button {
  padding:  .5rem .5rem;
  font-size: 12px;
}
/* ------------------------------
MAIN PAGE OF THE ROSES SELLER
--------------------------------- */
div.intro p{
margin: 10px 5px 30px 5px;
	
}
.intro button{
	margin: 1em 10em 1em 10em;
}

.credits dl {
  width: 100%;
  margin-top: 20px;
	margin-bottom: 10px;

}
.credits dt {
  font-size: 12px;
  
}
.credits dd {
  font-size: 12px;
  margin-left: 5px;
}
.casting dl {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;

}
.casting dt {
  font-size: 12px;
  
}
.casting dd {
  font-size: 12px;
  margin-left: 5px;
}

.even address{
	font-size: 15px;
	margin: .5em 5em 1em 5em;
	padding-top: 1em;
	padding-bottom:.5em;

}

div iframe {
	margin: 1em 2em 1em 2em;
	padding-top: .5em;
	width: 150px;
    height: 100px;
}
.even address{
	font-size: 15px;
	margin: .5em 3em 1em 3em;
	

}
.even {
    padding: 1rem 1rem;
	border: 20px solid white;
	
}

footer p {
	
	padding: 10px 0px 10px 0px;
	border-top: 5px solid white;
	border-bottom: 5px solid white;
}
/* -----------------------------
STORY BEHIND  PAGE
-------------------------------- */
.charity p{
	
	margin: 10px 20px 10px 20px;
	
}
.charity button{
	margin: 1em 10em 1em 10em;
}


/* ------------SCREEN TIME TABLE ----------- */
div dd {
	font-size: 15px;
}
div dt {
    font-size: 18px;
    padding:  1rem 1rem;
}
div dl {
 margin: 1em 2em 1em 2em;
 
}
.odd {
	padding: 1rem 1rem;
	border: 20px solid white;
}


/* ------------MONICA THE REAL STORY ----------- */

.wrap {
	margin: 0px ;
}

div.actor p {
	padding:  1rem 1rem;
	margin-bottom: 10px;

}
div.actor h3{
	
	font-weight: bold;
	margin-top: 20px;
	font-size: 20px;
    text-decoration: underline;
}
/* ------------STICK NOTES EVEN AND ODD----------- */
.odd img {
	display: none;

}

.even img {
	display: none;
	
}
}
/* --------------------------------------------------- ENDING MEDIA QUERIES ---- BREAKPOINT 330PX ---------------------------*/
/* --------------------------------------------------- MEDIA QUERIES ---- BREAKPOINT 650PX ---------------------------*/

@media (min-width: 650px) {
/* small screens */
/* ----------------------
MENU NAVIGATION
------------------------- */
.menu li {
  font-size: 22px;
}
.menu a {
	padding: 20px;

}
main{
	width: 80%;
	  max-width: 44em;
	  margin: 0 auto;
background: none;
}
/* ----------------------
TEXT STYLING
------------------------- */
h1{
	font-size: 50px;
	margin-top: 50px;
}
.title h1{
	margin-top: 50px;
	font-size: 50px;
}
h2{
font-size: 35px;
margin : 30px;

 }
 
h3{
font-size: 30px;
margin: 15px;
 }
 h4{
	 
 font-size: 25px;
margin-top: 15px;
margin-bottom: 15px;
  }
  p{  
	 line-height: 1.5;
	 font-size: 18px;
}
button {
  padding:  1rem 1rem;
  font-size: 18px;
}
/* ------------------------------
MAIN PAGE OF THE ROSES SELLER
--------------------------------- */

.intro button{
	margin: 1em 11em 1em 11em;
}

.credits dl {
  width: 100%;
  margin-top: 20px;
	margin-bottom: 10px;

}
.credits dt {
  font-size: 18px;
  
}
.credits dd {
  font-size: 18px;
  margin-left: 10px;
}
.casting dl {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;

}
.casting dt {
  font-size: 18px;
  
}
.casting dd {
  font-size: 18px;
  margin-left: 10px;
}

.even address{
	font-size: 22px;
	

}

div iframe {
	width: 400px;
	height: 270px;
}


/* ------------SCREEN TIME TABLE ----------- */
div dd {
	font-size: 20px;
}
div dt {
	font-size: 25px;
	padding:  1rem 1rem;
}

div.actor h3{
	margin-top: 20px;
	font-size: 30px;
	
}
}
/* --------------------------------------------------- ENDING MEDIA QUERIES ---- BREAKPOINT 650PX ---------------------------*/

/* --------------------------------------------------- STARTING MEDIA QUERIES ---- BREAKPOINT 950PX ---------------------------*/
@media (min-width: 950px) {

/* ------------------------
HEADERS AND NAV MENU------- */
.header-background-main {
background: url('img/header.png');
height: 400px;
background-size: cover;
background-repeat: no-repeat;
min-width: 600px;
margin: auto;
padding: 30px 0;
}
.header-background-venue, .header-background-story, .header-background-actors{
height: 400px;
background-size: cover;
background-repeat: no-repeat;
min-width: 600px;
margin: auto;
padding: 30px 0;
}
.menu li {

font-size: 30px;

}

/* ----------------------
TEXT STYLING
------------------------- */
h1{
	margin-top: 150px;
    font-size: 70px;
}
.title h1{
	margin-top: 150px;
	font-size: 80px;
}
h2{
	
font-size: 50px;
margin : 30px 10px 20px 10px;

 }
 
h3{
font-size: 40px;
margin : 20px 10px 20px 10px;
 }
 h4{
 font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
  }
  p{  
	 line-height: 1.5;
	 font-size: 20px;
}

/* ------------------------------
MAIN PAGE OF THE ROSES SELLER
--------------------------------- */
div.intro p{
margin: 10px 25px 100px 25px;
	
}
.intro button{
	margin: 1em 15em 1em 15em;
}

.credits dl {
  width: 100%;
  margin-top: 30px;
	margin-bottom: 20px;

}
.credits dt {
  font-size: 18px;
  
}
.credits dd {
  font-size: 18px;
  margin-left: 10px;
}
.casting dl {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 20px;

}
.casting dt {
  font-size: 18px;
  
}
.casting dd {
  font-size: 18px;
  margin-left: 10px;
}



div iframe {
	margin: 1em 2em 1em 2em;
	padding-top: 1em;
	width: 600px;
	height: 370px;
}
.even address{
	font-size: 25px;
	

}
.even {
	padding: 1rem 1rem;
	border: 40px solid white;
}

footer p {
	padding: 10px 0px 10px 0px;
	border-top: 10px solid white;
	border-bottom: 10px solid white;
}
/* -----------------------------
STORY BEHIND  PAGE
-------------------------------- */

.charity button{
	margin: 1em 15em 1em 15em;
}


/* ------------SCREEN TIME TABLE ----------- */
div dd {
	font-size:20px;
}
div dt {
	font-size: 30px;
}



.odd img {
	display: flex;
	width: 30%;
	height: 30%;
	

}

.even img {
	display: flex;
	width: 30%;
	height: 30%;
}
}
/* --------------------------------------------------- ENDING MEDIA QUERIES ---- BREAKPOINT 950PX ---------------------------*/

/* --------------------------------------------------- STARTING MEDIA QUERIES ---- BREAKPOINT 1250PX ---------------------------*/
@media (min-width: 1250px) {
/* ------------------------
HEADERS AND NAV MENU------- */
.header-background-venue, .header-background-story, .header-background-actors{
height: 430px;
min-width: 1000px;

}
.header-background-main{
	height: 700px;
    min-width: 1000px;
	
}
main{
	width: 90%;
	  max-width: 64em;
	background: url('img/rosa.png');
	background-repeat: no-repeat;


}

/* ----------------------
TEXT STYLING
------------------------- */
h1{
	font-size: 80px;
	margin: 2em;
	
}

h2{
font-size: 55px;
margin : 50px;
}
 
h3{
font-size: 45px;
margin: 20px;
 }
 h4{

 font-size: 35px;
 margin: 20px;
  }
 
 p{ 
	 font-size: 20px;
  }
  /* ------------INTRO MAIN ELEMENTS ----------- */
  div.intro p{
     margin: 60px 130px 80px 130px;
	  
  }
   .title h1{
	  margin-top: 300px;
	  font-size: 100px;
  }
  
  .intro button{
	  margin: 1em 22em 1em 22em;
  }

	/* ------------CREDITS TABLE ----------- */

	.credits dt {
	  font-size: 20px;
	  
	}
	.credits dd {
	 font-size: 20px;
	  margin-left: 15px;
	}
	
	.casting dt {
	  font-size: 20px;
	  
	}
	.casting dd {
	 font-size: 20px;
	  margin-left: 15px;
	}
	
	
	/* ------------INTRO MAIN ELEMENTS ----------- */
	.charity p{
		text-align: center;
		margin: 50px 130px 50px 130px;
		
	}
	.charity button{
		margin: 1em 22em 1em 22em;
	}
button {
	  padding:  1rem 2rem;
	  font-size: 20px;
	}
	
	
	/* ------------SCREEN TIME TABLE ----------- */
	div dd {
		font-size: 20px;
	}
	
	div dt {
		
		font-size: 30px;
		padding:  1rem 1rem;
	}
	
	/* ------------LOCATION AND MAP  ----------- */
	.even address{
		font-size: 35px;
		
	
	}
	
	div iframe {
		margin: 2em 8em 1em 8em;
		padding-top: 1.5em;
	}
	
	/* ---------------------------------------------------
	ACTORS INFO AND AFTER MOVIE SAME DESIGN
	--------------------------------------------------- */
	/* ------------INTRO MAIN ELEMENTS ----------- */
	.wrap p{
		padding:  2.5rem 2rem;
	}
	div.actor p {
		
		padding:  1rem 2rem;
		margin-bottom: 10px;
	
	}
	div.actor h3{
		text-decoration: none;
		margin-top: 40px;
		font-size: 43px;
	}
	/* ------------STICK NOTES EVEN AND ODD----------- */
	.odd img {
		margin: 50px;
		border: 5px solid white;
		filter: drop-shadow(5px 5px 5px #ccccca);
		margin-top: -5rem;
		border-radius: 15%;
	}
	
	.even img {
		margin: 50px;
		margin-top: -5rem;
	}
	
	.odd {
		padding: 1rem 1.5rem;
		border: 80px solid white;
	}
	.even {
		padding: 2rem 1.5rem;
		border: 80px solid white;
	}
    }
	/* ------------------------- END OF MEDIA AND OF THE WEBSITE---------------------------*/