body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #ffffff;
	box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    }

    a {
    color: #000;
	text-decoration: none;
    }

    /* header */

    .header {
    background-color: #fff;
	background: linear-gradient(90deg, #eff0e8 28%, 28%, #ffffff 72%);
    /*box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
    position: fixed;
    /* width: 100%; */
    z-index: 3;
    }

    .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
    }

    .header li a {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;
	font-family: 'Alegreya Sans', sans-serif;
    font-weight: 600;
    }

    .header li a:hover,
    .header .menu-btn:hover {
    background-color: #f4f4f4;
    }

    .header .logo {
    display: block;
    float: left;
	font-family: 'Comfortaa', cursive;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
    }

    /* menu */

    .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
    }

    /* menu icon */

    .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
	display:flex;
	column-gap:0.5em;
    }
	.menu-text{
    position: relative;
    top: -9px;
	}

    .header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
    }

    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
    }

    .header .menu-icon .navicon:before {
    top: 5px;
    }

    .header .menu-icon .navicon:after {
    top: -5px;
    }

    /* menu btn */

    .header .menu-btn {
    display: none;
    }

    .header .menu-btn:checked ~ .menu {
    max-height: 360px;
    }

    .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
    }

    .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
    }

    .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
    }

    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
    }
    .header {
        width:100%;
    }
    .header .logo{
        font-size:1em;
        line-height: 2em;
    }
    .my-card, .hero-card {
        width:100%;
        flex-wrap: wrap;
    }
    .my-card img{
        width:100%;
    }
    .card-content {
        width:100%;
        padding:20px;
        max-width:100%;
    }
    .hero-card {
        justify-content: center;
          align-items: center;
    }
    .hero-card img{
        
        width:360px;
        height:360px;
        border-radius: 50%;
        box-shadow: -5px 1px 10px -4px #888888;

    }
    .main{
        padding-top:50px;
        
        /*background: #f7bfbe4b;
        background: #eff0e8; */
        
    }
	.hero{
		width:100%;
		padding-top:80px;
		padding-bottom:60px;
		background: linear-gradient(90deg, #eff0e8 28%, 28%, #ffffff 72%);
		justify-content: center;
		display:flex;
	}
	
    #card-list{
        display:flex;
        justify-content: center;
        flex-direction: column;
		margin-bottom:20px;
    }
	
    .my-card, .hero-card {
        display: flex;
       /* flex-direction: row;
        flex-wrap: wrap;*/
        width: 80%;
        align-self: center;
       /* margin: auto; */
        margin-top: 40px;
      } 
    .my-card img{
       /* max-width:500px;*/
        height:auto;
    }

    .card-content{
        padding-left:30px;
        padding-right:30px;
        align-self: center;
       
    }
    .card-content h2{
        font-family: 'Comfortaa', cursive;
    }
    .card-content h2:after, .hero-card h1:after {
        background: none repeat scroll 0 0 #f6d2d4;
        bottom: -10px;
        content: "";
        display: block;
        height: 3px;
        position: relative;
        width: 90px;
     }
    .card-content p{
        font-family: 'Alegreya Sans', sans-serif;
    }
    .card-content .button{
        
        background-color: #555555;
        color:#fff;
        border: none;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
	.footer {
		background-color:#333333;
		color:#ffffff;
		padding: 20px 20px;
		
	}
	.footer span {
		padding: 20px 20px;
		
	}
  
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    .hero-card img {
      
        width:500px;
        height:500px;
    }
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    
  .header .logo {
      width:24%;
      
  }
  body {
      box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; 
      -moz-box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999; 
      -webkit-box-shadow: 6px 0 4px -4px #999, -6px 0 4px -4px #999;
      max-width:1440px;
      margin:auto;
  }
  header {
      max-width:1440px;
  }
  .hero-card {
      width:90%;
      
  }
  .header .logo {
    width: 26%;
  }
  
  .main{
    padding-top:50px;
    
    /*background: #f7bfbe4b;
    background: #eff0e8; */
    
}
/*.hero{
    width:100%;
    padding-top:80px;
    padding-bottom:60px;
    background: linear-gradient(90deg, #eff0e8 26%, 26%, #ffffff 80%);
    justify-content: center;
    display:flex;
}*/
.hero-card {
    width:80%;
    align-self:center;
    display:flex;
}
.hero-card h1{
    font-family: 'Comfortaa', cursive;
    font-size:3em;
    flex:wrap;
}
.hero-card p{
    font-size:1.5em;
}

#card-list{
    display:flex;
    justify-content: center;
    flex-direction: column;
}
.my-card {
    display: flex;
   /* flex-direction: row;
    flex-wrap: wrap;*/
    width: 80%;
    align-self: center;
   /* margin: auto; */
    margin-top: 40px;
  } 
.my-card img{
   /* max-width:500px;*/
    height:auto;
}

.card-content{
    padding-left:30px;
    padding-right:30px;
    align-self: center;
    max-width:50%;
}
.card-content h2{
    font-family: 'Comfortaa', cursive;
}
.card-content h2:after, .hero-card h1:after {
    background: none repeat scroll 0 0 #f6d2d4;
    bottom: -10px;
    content: "";
    display: block;
    height: 3px;
    position: relative;
    width: 90px;
 }
.card-content p{
    font-family: 'Alegreya Sans', sans-serif;
}
.card-content .button{
    
    background-color: #555555;
    color:#fff;
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.my-card:nth-child(odd) a{
    order: 1;
  }
  .my-card, .hero-card {
      flex-wrap:unset;
  }
  .header li {
    float: left;
}
.header li a {
    padding: 20px 12px; 
    font-size:0.6em;
}
.header .menu {
    clear: none;
    float: left;
    max-height: none;
}
.header .menu-icon {
    display: none;
}
  }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.header .logo {
		font-size: 1.2em;
	}
    .hero-card img {
      
        width:600px;
        height:600px;
    }
    .header .logo {
        text-align:right;
    }
    .header li a {
        padding: 20px 15px; 
         font-size:0.8em;
     }
 }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    .header li a {
        padding: 20px 18px; 
         font-size:1em;
     }
 
 }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .header li a {
        padding: 20px 20px; 
         
     }
 }