.main__title{font-size:4rem}
.main__paragraph{font-size:1.8rem}
.modal__img {max-width:60%;height:auto;display:block;}
.modal{
  max-width:700px;
  width:85%;
  position: fixed;
  top:50%;
  background-color: rgba(0,0,0,0.3);
  left:50%;
  transform: translate(-50%,-50%);
  border-radius: 5px;
  background:#EE9B00;
  display: none;
}
.petit{font-size: 0.5em;transform: rotate(90deg);}
.modal.show{display:block;}
#close {cursor:pointer;color:white;position:absolute;top:0;font-size:25px;right:0;padding:1rem;margin-right: 10px;}
.modal__title{font-size: 1.8rem;
text-align: center;
color: #0f527a;
}
.modal__title span{display: block;font-weight: 400;text-align: center;}
.modal__paragraph{font-size: 1.3rem;font-weight: 600;text-align: center;color: #791515;}
.main .show {
  display:block;
}
.main
{
  text-align: center;
  z-index: 100001;
  position: fixed;
	height: 100vh;
	width:100vw;
	background-color: #573333c9;
}

.cache {
  display: none;
}


.modal__container{
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

@media only screen and (min-width: 768px){
  .modal__container {
    flex-direction: row;
    padding: 2rem;
    text-align: left;
  }
  .modal__img{max-width:50%}
}

@media only screen and (max-width: 500px){
  .modal__title {
    font-size: 2rem;
  }
  .modal__img{max-width:80%}
}