frontend-dorset/assets/css/header.css

/* ======= HERO BLOCK, FLEXBOX TWO COLUMNS ===== */
.hero-block-two-columns {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    background-color: #183153;
}

@media (min-width: 1200px) {
    .hero-block-two-columns { min-height: 90vh }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hero-block-two-columns { min-height: 460px }
}

/* Desktops only - inside padding  */
@media (min-width:768px) {
	.hero-block-two-columns { padding: 2% 10% 1% 10% }
}

/* Mobiles only - inside padding */
@media (max-width:767px) {
	.hero-block-two-columns { padding: 7% 8% 1% 8% }
}

/* Desktops - 2 columns */
@media (min-width:768px) { 
	.hero-block-two-columns .item-2 { 
		width: 45%;
		padding: 3% 0 4% 0;
	}
}

/* Mobiles - 1 column */
@media (max-width:767px) { 
	.hero-block-two-columns .item-2 {
		text-align: center; 
		width: 100%;
		padding: 5% 5% 5% 5%;
	}
}


/* Hero block height and spacing  */
@media (min-width: 768px) {
	.hero-block-two-columns h1 { margin-top: 2% }
 
	.hero-block-two-columns .item-2:nth-child(2) { 
	   display: flex;
	   flex-direction: column;
	   justify-content: center
	}
}
 
@media (max-width: 767px) {
    .hero-block-two-columns { 
        margin-top: 16%;
        margin-bottom: 10%
    }
    
    .hero-block-two-columns .item-2:nth-child(2) { padding-bottom: 5% }
    .hero-block-two-columns .item-2:nth-child(1) { order: 2 }    
}

.hero-block-two-columns .item-2 h1 {
    font-family: 'Poppins', sans-serif;
    color: #fff;
	font-weight: 600; 
	line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
	font-size: calc(30px + (52 - 30) * ((100vw - 320px) / (1600 - 320))); 
}

.hero-block-two-columns .item-2 h2 { 
	font-weight: 300; 
	color: #fff;
    line-height: 1.5;
	margin-bottom: 30px;    
	font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1600 - 320))); 
}

.hero-block-two-columns .item-2 img {
    margin-bottom: 0
}

@media (max-width: 767px) {
	.hero-block-two-columns .item-2 img {
		max-width: 400px; text-align: center; margin-left: auto; margin-right: auto;
	}
}

/* Button container */
.container-btn { display: flex }

/* All buttons */
.container-btn .btn {
    text-decoration: none; font-weight: bold; line-height: 1;
    padding: 15px 26px 15px 26px;
    border-width: 2px; border-style: solid; line-height: 1; outline: none;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1600 - 320)));
}

/* Solid buttons */
.container-btn .btn-solid:any-link {
    background-color: #50e3c2; border-color:  #50e3c2; color: #222;
}

.container-btn :is(.btn-solid:focus, .btn-solid:hover,.btn-solid:active) {
    background-color: #222; border-color: #222; color: #fff;
}

/* Gradient buttons */
.container-btn .btn-gradient:any-link {
    border-color: #183153;
    background-image: linear-gradient(to right,#3ec7e0,#526bf4); color: #fff;
} 

.container-btn :is(.btn-gradient:focus, .btn-gradient:hover, .btn-gradient:active)  {
    background-image: linear-gradient(90deg,#e052a0,#f15c41); color: #fff;
} 


/* Ghost buttons */
.container-btn .btn-ghost:any-link {
    border: solid 2px #fff; color: #fff; background-color: transparent; 
} 

.container-btn :is(.btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active)  {
    background-color: #222; border-color: #222; color: #fff;
} 

.container-btn .btn-ghost i { color: #fff }
.container-btn .btn-ghost:focus i, 
.container-btn .btn-ghost:hover i, 
.container-btn .btn-ghost:active i { color: #fff } 

/* Buttons: corner styles */
.container-btn .btn-soft    { border-radius: 5px }
.container-btn .btn-rounded { border-radius: 30px }

/* Buttons: Font Awesome icons */
.container-btn .btn i { margin-right: 10px; }

/* Big desktops */
@media (min-width: 1025px) {
    .container-btn a:first-child { margin-right: 30px }
}

/* Not big or small desktops, or big tablets */
@media (max-width: 1024px) {
	.container-btn { margin-top: 42px; flex-direction: column }
    .container-btn .btn { align-self: flex-start }
    .container-btn a:first-child { margin-bottom: 32px }
    .container-btn a:last-child  { margin-bottom: 0 }
	.container-btn.text-center-mobile .btn {
		text-align: center; margin-left: auto; margin-right: auto
 }
}

@media (min-width: 768px) {
	.container-btn { text-align: left }
	.container-btn .btn { align-items: flex-start }
}

@media (max-width: 767px) {
	.container-btn .btn { text-align: center; margin-left: auto; margin-right: auto }
}




/* ----------------------------------------------
 * Generated by Animista 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.slide-in-left {
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-right {
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.fade-in {
    animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes slide-in-left {
    0%   { transform: translateX(-1000px); opacity: 0 }
    100% { transform: translateX(0); opacity: 1 }
}

 @-webkit-keyframes slide-in-right {
    0%   { transform: translateX(1000px); opacity: 0 }
    100% { transform: translateX(0); opacity: 1 }
}

@keyframes slide-in-right {
    0%   { transform: translateX(1000px); opacity: 0 }
    100% { transform: translateX(0); opacity: 1 }
}
  
@-webkit-keyframes fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

@keyframes fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}