@font-face {
  font-family: Payball;
  src: url(../fonts/Playball/Playball-Regular.ttf);
}

@font-face {
  font-family: Playfair_Display;
  src: url(../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

@font-face {
  font-family: Montserrat_2;
  src: url(../fonts/Montserrat/Montserrat-Thin.ttf);
}

@font-face {
  font-family: Montserrat_Regular;
  src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
}
#bigScreen,
#smallScreen{
  display: none;
}
.screen{
    background-color: #F7D6E0;
    padding: 0px 7px;
    display: flex;
}
.screen h2{
    font-size: 15px;
    font-family: Playfair_Display;
}
html,
body {
  height: 100%;
  width: 100%;
}

/* section - home */
#home {
  background: #F7D6E0;
  font-family: Payball;
  overflow: hidden;
}

.flower-home {
  width: 250px;
  height: 217px;
  right: 0;
  z-index: 1;
}

.flower-home-2 {
  width: 183px;
  height: 210px;
  transform: rotate(-150deg);
  bottom: 117px;
  right: -5px;
  z-index: 2;
}

#home aside {
  width: 40px;
  border-right: 2px solid rgba(255, 255, 255, 0.45);
  height: 100%;
}

#home aside span {
  color: #000000;
  transform: rotate(-90deg);
  font-size: 30px;
  right: -47px;
  top: 20px;
  width: 126px;
}

#home>main {
  padding-top: 150px;
  z-index: 2;
  position: relative;
}

#home>main h1 {
  font-weight: inherit;
  font-size: 50px;
  margin-bottom: 20px;
}

#home .item-time main {
  background-color: #fff;
  padding: 10px;
  width: 60px;
  height: 50px;
  margin: 0 auto;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  letter-spacing: 2px;
}

#home>main .item-time footer {
  font-size: 14px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 460px solid transparent;
  border-top: 50px solid transparent;
  border-bottom: 180px solid #FFF;
  bottom: 0;
}



/* section - location */

#ticket {
  width: 370px;
  height: 180px;
  box-shadow: 0px 35px 35px rgba(65, 65, 65, 0.25);
  border-radius: 13px;
  top: -165px;
  z-index: 3;
}
.image-ticket{
  -webkit-background-size: 88%;
  -moz-background-size: 88%;
  -o-background-size: 88%;
  background-size: 88%;
}
#number-ticker {
  font-family: Montserrat_Regular;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  right: 48px;
  background-color: #f7d6e0; 
  font-size: 20px;
  padding: 0px 4px;

}

#location {
  padding-top: 100px;
  font-family: Playfair_Display;
}

#location h2 {
  text-transform: uppercase;
  font-size: 25px;
}

#location header {
  margin-bottom: 20px;
  font-weight: bold;
}

#location>main {
  background-position: top;
}
#party,
#church{
  height: 350px;
}
#church{
 margin-bottom: 30px; 
}

.location-info {
  right: 0;
  bottom: -1px;
  padding: 30px;
  width: 320px;
}

.location-info h3 {
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
}

.location-info div,
.location-info article {
  z-index: 2;
  position: relative;
}

.location-info article {
  margin-bottom: 10px;
}

.location-info article span {
  font-family: Montserrat_2;
  font-style: normal;
  font-weight: initial;
  color: #000000;
  font-size: 13px;
}

.location-info:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(255, 255, 255, 0.91);
  backdrop-filter: blur(2px);
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.location-info div {
  margin-top: 25px;
  margin-bottom: 5px;
}

.btn-location {
  font-size: 14px;
  box-shadow: 0px 20px 35px rgba(100, 100, 100, 0.2);
  border-radius: 15px;
  padding: 10px 14px;
}
.btn-location .icon-maps{
  height: 20px;
  margin-right: 10px;
}

/* section - Gallery */
#gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(20, 5vw);
  grid-gap: 15px;
  padding: 30px 15px;
  margin-top: 30px;
}
.gallery__item{
  border-radius: 4px;
}
.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 9;
  background-position-y: -55px;
}

.gallery__item--2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 5;
}
.gallery__item--3 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 9;
  background-position-y: -45px;
}
.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 9;
  grid-row-end: 15;
  background-position-y: -30px;
  -webkit-background-size: 198px;
  -moz-background-size: 198px;
  -o-background-size: 198px;
  background-size: 198px;
  background-position-x: -17px;
}
.gallery__item--5 {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 9;
  grid-row-end: 13;
  -webkit-background-size: 180%;
  -moz-background-size: 180%;
  -o-background-size: 180%;
  background-size: 180%;
}
.gallery__item--6 {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 13;
  grid-row-end: 17;
  background-position-y: -45px;
  -webkit-background-size: 125%;
  -moz-background-size: 125%;
  -o-background-size: 125%;
  background-size: 125%;
}

.gallery__item--7 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 13;
  grid-row-end: 17;
  background-position-y: -55px;
  -webkit-background-size: 105%;
  -moz-background-size: 105%;
  -o-background-size: 105%;
  background-size: 105%;
}

.gallery__item--8 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 15;
  grid-row-end: 18;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}
.gallery__item--9 {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 17;
  grid-row-end: 30;
  background-position-y: -80px;
}
.gallery__item--10 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 18;
  grid-row-end: 30;
}

/* section - confirmation */
#confirmation{ 
  background-color: #F7D6E0;
  padding: 28px 38px;
  overflow: hidden;
  border-top-left-radius: 35px;
}
#confirmation .flower{
  position: absolute;
  background-image: url('../images/background/small_flower_big.png');
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#confirmation > main{
  height: 250px;
  padding: 50px 20px;
}
#confirmation .item-flower-1{
  top: 0;
  left: 0;
}
#confirmation .item-flower-2{
  bottom: 0;
  left: 0;
  transform: rotate(-70deg);
}
#confirmation .item-flower-3{
  top: 1px;
  right: 0;
  transform: rotate(90deg);
}
#confirmation .item-flower-4{
  bottom: 0px;
  right: 0;
  transform: rotate(180deg);
}
#confirmation > main h3{
  font-family: Playfair_Display;
  text-transform: uppercase;
  margin-bottom: 20px;
}
#confirmation > main p{
  font-family: Montserrat_2;
  font-size: 15px;
  width: 80%;
  margin: 0 auto;
}
#confirmation > main .btns-confirmation{
  width: 70%;
  margin: 0 auto;
  margin-top: 25px;
}
#confirmation > main .btns-confirmation a{
  background: #000000;
  box-shadow: 0px 20px 35px rgba(100, 100, 100, 0.2);
  border-radius: 20px;
  color: #FFF;
  padding: 9px 20px;
  cursor: pointer;
}

#confirmation .line{
  height: 1px;
  background-color: #000;
}
#confirmation .line:nth-child(2),
#confirmation .line:nth-child(1){
  left: -50px;
  width: 150% !important;
}
#confirmation .line:nth-child(1){
  top: 0;
}
#confirmation .line:nth-child(2){
  bottom: 0;
}
#confirmation .line:nth-child(3),
#confirmation .line:nth-child(4){
  transform: rotate(90deg);
  width: 150% !important;
}
#confirmation .line:nth-child(3){
   right: -75%;
}
#confirmation .line:nth-child(4){
  left: -75%;
}
/* section - img-horizontal */
#img-horizontal {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#img-horizontal .layer-black{
  background: rgba(34, 34, 34, 0.34);
}
#img-horizontal h3{
  font-family: Playfair_Display;
  bottom: 15px;
  color: #FFF;
  z-index: 2;
  font-size: 35px;
  text-transform: uppercase;
  
  letter-spacing: 4px;
}
#made_by{
  background-color: #F7D6E0;
  padding: 20px;
  
}