@import url('https://fonts.googleapis.com/css?family=Italianno&display=swap');

@import url('https://fonts.googleapis.com/css?family=Mea+Culpa&display=swap');

 

body, html {

	 height: 100%;

}

 body {

	 font-family: 'Source Sans Pro', sans-serif;

	 background-color: #d4dad9;

	 color: #252525;

	 overflow: hidden;

}

 .slide {

	 display: flex;

	 justify-content: center;

	 align-items: center;

	 flex-wrap: wrap;

	 flex-direction: column;

	 width: 100%;

	 height: 100%;

}

 .card {

	 width: 90vmin;

	 height: 55vmin;

	 display: flex;

	 box-shadow: 0 30px 40px -15px rgba(0, 0, 0, 0.35);

	 background-color: #fff;

}

 .card__img {

	 background-position: -98px 0px;

	 width: 50%;

	 height: 100%;

	 background-size: cover;

	 background-repeat: no-repeat;

}

 #img01 {

	 background-image: url("https://i.imgur.com/U6vJYiR.png");

}

 #img02 {

	 background-image: url("https://images.unsplash.com/photo-1495041405835-b4702187b514?dpr=1&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=");

}

 #img03 {

	 background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?dpr=1&auto=compress,format&fit=crop&w=2734&h=&q=80&cs=tinysrgb&crop=");

}

 .card__content {

	 padding: 10% 5%;

	 box-sizing: border-box;

	 width: 50%;

}

 .card__content-theme {

	 font-size: 1.7vmin;

}

 .card__content-header {

	 font-weight: 900;

	 font-family: Italianno;

	 font-size: 54px;

	 font-size: 7vmin;

	 text-transform: capitalize;

	 letter-spacing: 0.01em;

	 line-height: 0.91;

	 margin: 3vmin 0 1vmin;

}

 .card__content-paragraph {

	 font-size: 1.7vmin;

	 line-height: 1.7;

	 font-weight: 400;

	 margin-bottom: 2.5vmin;

}

 .card__content-link {

	 color: #ba3428;

	 font-size: 1.8vmin;

	 display: block;

	 cursor: pointer;

	 opacity: 0.7;

	 transition: opacity 0.3s ease;

}

 .card__content-link:hover {

	 opacity: 1;

}

 .card__content-link:after {

	 content: ' →';

}

 .prevnext {

	 position: absolute;

	 width: 4vmin;

	 height: 8vmin;

	 right: 2%;

	 bottom: 0;

	 top: 0;

	 margin: auto 0;

}

 .prevnext-button {

	 width: 100%;

	 height: 50%;

	 border: 0;

	 background-color: transparent;

	 font-size: 30px;

	 font-weight: 800;

}

 #prev, #next {

	 position: relative;

	 cursor: pointer;

}

 #prev:hover:after, #next:hover:after, #prev:hover:after, #next:hover:after {

	 opacity: 1;

}

 #prev:after, #next:after {

	 position: absolute;

	 width: 100%;

	 height: 100%;

	 left: 0;

	 right: 0;

	 top: 0;

	 bottom: 0;

	 margin: auto;

	 opacity: 0.6;

	 transition: opacity 0.3s ease;

}

 #prev:after {

	 content: '↑';

}

 #next:after {

	 content: '↓';

}



/* For extremely small screen devices (595px and below) */

@media only screen and (max-width: 595px) {

   .slide{

    position: absolute;

    top: -243px;

    left: 0px

   }



   .card{

    display: block;

   }

    .card__img{

      width:auto;

      background-position: center;

    }

   .card__content{

    width: 90vmin;

    height: auto;

    background:white;

    padding: 10% 11%;

   }



   .card__content-theme{

      font-size:1em;

   }



   .card__content-header{

      font-size:3em;



   }



   .card__content-paragraph{

     font-size:1em;

   }

}



/* Small screen devices (600px and above) */

@media only screen and (min-width: 600px) {



}



/* Medium screen devices (768px and above) */

@media only screen and (min-width: 768px) {



}



/* Big screen devices (889px and above) */

@media only screen and (min-width: 889px) {



}



/* Extra big screen devices (1200px and above) */

@media only screen and (min-width: 1200px) {



}