/*
bg: FFFFFF
purple: 8271D3

other purple: 6e34ad
yellow: efc200
teal: 13bbd6
pink: eb02ab
red:be1b2c;
green: 7dc32f;
blue: 0042cb;
*/

body{
  font-family: arial, helvetica, sans-serif;
  color: #FFFFFF;
  background-color: #333333;
  margin: 0;
  padding: 10px 0 0 0;
  
}
h1{
  font-family: arial black, helvetica, sans-serif;
  text-transform: uppercase;
  color: #FFF
}
h2{
  font-family: arial black, helvetica, sans-serif;
}
p{
  font-size: 1.2em
}
a, a:visited{
  color: #FFFFFF;
}

.info{
   margin:40px 0;
}

.block{
  margin:40px 0;
  clear: both;
  border: 4px solid #FFF;
  text-align: left;
}
.time{
  display: inline-block;
  
  border-right: 0px;
  font-size: 1.6em;
  /*height:200px;*/
  line-height: 1.6em;
  /*min-width: 200px;*/
  width: 30%;
  height: inherit;
  vertical-align: top;
  padding: 0;
  text-align: center;
}
.time h2{
  margin:20px 0;
  font-family: 'Lobster';
}
.descrip{
  vertical-align: top;
  display: inline-block;
  border-left: 4px solid #FFF;
  width: calc( 70% - 4px);
  height: inherit;
  margin: 0;
  text-align: center;
}
.descrip p{
  padding-left:10px;
  padding-right: 10px; 
}

.location{
  border-top: 4px solid #FFF;
  /*display: inline-block;*/
  height:100px;
  
}
.location a{
  text-decoration: none;
  display: block;
  padding: 10px;
}

.block--minor{
  height:auto;
  margin:40px 0;
  
}
.info h2{
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: 'Lobster';
  font-size: 2em;
}


.main-content{
  width: 100%;
  /*min-height: 500px;*/

}
  
.content-container{
  width: 100%;
}

.container{
  text-align: center;
}
  

.section{
  border: 1px solid blue;
  min-height: 500px;
  max-width:800px;
  margin: 0 auto;
  color: #8271D3;
  font-size: 16px;
}
.page{
  max-width:800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.page-title{
  line-height: 22px;
  display: block;
  color: #8271D3;
  background: #FFFFFF;
}


.string{
  width: 100%;
  background-color: #FFF;
  height: 10px;
  margin: 0px;

}

.banner{
  max-width: 900px;
  margin: -20px auto 0 auto;

}
.banner img{
  width: 100%;
}

.papel-link a{
  height:50px;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration:none;
  line-height: 50px;
  font-size: 25px;
  font-family: 'Lobster';
  margin: 2px 0;
  background-color: #FFF;
}

/*====== BROOKLYN =======
#18b7b3
*/

body.brooklyn{
  background-color: #18b7b3;
}
.wedding a{
  color:#18b7b3;
}

/*====== MEXICO =======*
1c3f9a */
body.mexico{
  background-color: #15327d;
}

.dinner a{
  background-color: #FFF;
  color:#15327d;
}


/*====== STORY =======
614779
*/
body.the-story{
  background-color: #614779;
}
.story a{
  color:#614779;
}

/*====== REGISTRY =======*/

.registry a{
  color:#777;
}

/*====== Ceremony =======
#
*/

body.ceremony{
  background-color: #cecece;
  color: #121212;
  
}
.ceremony .page{
  text-align: left;
}
.ceremony-link a{
  color:#18b7b3;
}
.ceremony h2{
  margin-bottom: 20px;
}
.quote{
  margin-left:40px;
  padding: 20px;
  background-color: #fff2f6;
}
.miriam{
  /*border: 1px solid white;*/
  padding: 20px;
  background: white;
}
.ceremony .alison{
  margin-left:40px;
  padding: 10px 20px;
  background-color: #edffef;
}
.ceremony .daniela{
  margin-left:40px;
  padding: 10px 20px;
  background-color: #f2fffd;
}
.ceremony .all{
  margin-left:40px;
  padding: 10px 20px;
  background-color: #efefef;
}

.ceremony li{
  font-size: 1.2em;
}
/*====== Mobile =======*/
@media (max-width: 770px) {

  .time{
    font-size: 1.2em;
  }
  .descrip{
    font-size: .8em;
  }
  .banner{
    margin-top: -12px; 
  }
  .location{
  height:140px;
}
  

}
@media (max-width: 330px) {

.location{
  height:140px;
}
  
  .descrip{
    display: block;
    width: 100%;
    border-left: 0px;
  }
  .time{
    display: block;
    width: 100%;
    border-bottom: 4px solid #FFF;
  }
  .block{
    height: auto;
  }
}