/* 

Leah Slava

*/

/* to set general font styles across the entire site, do it here. this will help ensure consistency */
body {
  	font-family: Arial;
    background-color: #e8e8e8;
	/*border: solid 1px red;*/
}

/* to set font styles on specific elements, do it like this. you will now overwrite the styles set on the body */
p {  
  	font-family: courier;
    margin-bottom: 5%;
    margin-top: 3%;
    margin-right: 60%;
}

h1{
   margin-bottom: 2%;
}

h2{
  	font-size: 60%;
    margin-bottom: 5%;
}

h3{
    font-size: 40%;
    text-align: center;
    margin-top: 5%;
}

.foto1 {
    width: 25%;
    display: inline-block;
    margin-left: 12%;
    margin-top: 7%;
}

.foto2 {
    width: 25%;
    display: inline-block;
}

.foto3 {
    width: 25%;
    display: inline-block;
}

.foto4 {
    width: 25%;
    display: inline-block;
    margin-left: 12%;
    margin-top: 5%;
}

.foto5 {
    width: 25%;
    display: inline-block;
}

.foto6 {
    width: 25%;
    display: inline-block;
}

.grupo1-a {
    width: 32%;
    display: inline-block;
    margin-left: 1%;
}

.grupo1-b {
    width: 32%;
    display: inline-block;
    margin-top: 2%;
    margin-left: 1%;
}

.grupo1-c {
    width: 32%;
    margin-top: 2%;
    display: inline-block;
    margin-left: 1%;
}

.grupo3-a{
    width: 32%;
    margin-top: 2%;
    float: left;
    margin-left: 1%;

}

.grupo4-a {
  	display: inline-block;
    height: auto;
    width: 25%;
    margin-left: 10%;
    margin-right: 3%;
}

.grupo4-b {
    display: inline-block;
  	height: auto;
    width: 25%;
    margin-right: 3%;
}

.grupo4-c {
    display: inline-block;
  	height: auto;
    width: 25%;
    margin-right: 7%;
}

.grupo4-d {
    display: inline-block;
    height: auto;
    width: 25%;
    margin-left: 10%;
    margin-right: 3%;
    margin-top: 1%;
}

.grupo4-e {
    display: inline-block;
  	height: auto;
    width: 25%;
    margin-right: 3%;
}

.grupo4-f {
  	display: inline-block;
    height: auto;
    width: 25%;
}

.nextlink{
    display: inline;
    float: right;
    margin-top: -1%;
    margin-right: 7%;
}

.homelink{
     font-family: courier;
     margin-bottom: 3%;
}

.backlink{
    display: inline;
    float: left;
    margin-left: 7%;
}

a:link { 

}

a:visited {

}

a:hover {
	
}

a:active {

}

/* you can style your elements however you'd like. I'm adding a border so we can see them */
iframe {
	border: solid red 2px;
	width: 100%;
	height: 500px;
}

/* max-width: 100%; will prevent an element from extending beyond the page boundaries */
img {
	max-width: 100%;
}

/* width: 100%; will force an element to adopt the width of the page boundaries */
img.full-width {
	width: 100%;
}


/* CLASSES
---------- */

/* to apply different styles to different pages, you can add a class name to the body. when doing this, think about what you're changing and why. the overall structure and typogrphy around your site should feel consistent. any changes or deviations should be meaningful */
.home{
  font-size: 30px;
}
.project1 {
	background: #e8e8e8;
}

.project-02 {
  background: #e8e8e8;
}


/* CONTAINERS
---------- */
/* why we use wrappers, here: http://stackoverflow.com/a/5275428 */
.wrapper {
	margin: 30px auto;
	max-width: 90%;
}