/*
=====================================================================
*   Fichier CSS studio krack - Responsive design
*   url: studiokrack.fr
*   @2022
=====================================================================

MENU

a. Max-width > 1000px (ipad pro)
b. Max-width > 768px (tablette)
c. Max-width > 480px (mobile)

=====================================================================  */

/* ------------------------------------------------------------------ */
/* a. Max-width > 1000px (ipad pro)
/* ------------------------------------------------------------------ */

@media only screen and (min-width: 1920px) {
	.homepage {background-size: cover!important;}
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
	.homepage .text-container {top: 52%; padding-left: 20px;}
	.homepage .image-container img {padding: 100px 0 0 40px; margin-left: 20px;}
	.icon-profile-container {bottom: 92px;}
	.icon-profile-container span {padding-bottom: 20px;}
	.icon-profile-container span:after {right: -6px;}
	.icon-profile-container img {width: 110px;}
}
@media only screen and (max-width: 1400px) {
	.homepage .text-container h1 {font-size: 86px; letter-spacing: -4px;}
	.homepage .text-container h2 {font-size: 32px;}
	.homepage .recherche {width: 74%; margin: 10px 0 40px; padding: 24px;}
	.homepage .text-container {top: 52%; padding-left: 20px;}
	.homepage .image-container img {padding: 100px 0 0 40px; margin-left: 20px;}
	.icon-profile-container {bottom: 92px;}
	.icon-profile-container span {padding-bottom: 20px;}
	.icon-profile-container span:after {right: -6px;}
	.icon-profile-container img {width: 110px;}
}

/* ------------------------------------------------------------------ */
/* b. Max-width > 768px (tablette)
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 1000px) {
	header img.logo {margin: 0;}
	header ul.social-icons {padding: 0;}
	header .col.pull-left {width: 30%!important;}
	header .col.pull-right {width: 70%!important;}
	.homepage .image-container {display: none;}
	.homepage .text-container {padding: 0 100px;}
	.homepage .text-container h1 {font-size: 70px;}
	.homepage .text-container h2 {font-size: 20px;}
	.homepage .recherche {width: 100%; max-width: 580px;}
		.icon-profile-container {
		bottom: 60px;
		right: 60px;
	}
	
}

/* ------------------------------------------------------------------ */
/* c. Max-width > 480px (mobile)
/* ------------------------------------------------------------------ */

@media only screen and (max-width: 480px) {
	.homepage {height: 100vh; padding-top: 100px; padding-bottom: 100px;}
	.homepage .text-container {top: 0; transform: unset; padding: 0 15px;}
	.homepage .recherche p {font-size: 16px;}
	.homepage .recherche p:before {width: 16px; height: 16px; margin-right: 8px;}
	span.slide span {margin-left: 5px;}
	.homepage .sk-link .button:before,
	.homepage .contact-link .button:before {width: 19px; height: 18px; margin-right: 12px;}
	.homepage .recherche {width: 100%; padding: 14px; margin: 5px 0 30px;}
	.icon-profile-container {
		bottom: 15px;
		right: 25px;
		position: absolute;
		float: right;
		}
	.icon-profile-container span {visibility: hidden; display: none;}
	.icon-profile-container img {width: 84px;}
	.button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] {
		font: 18px/28px gt-medium, sans-serif;
		margin-bottom: 0;
		padding: 14px 18px 14px 14px;
	}
	.cbp-spmenu-vertical {width: 90%;}
	.cbp-spmenu-vertical .col {padding: 0 20px 40px;}
	.cbp-spmenu-vertical h3 {font-size: 22px; margin-bottom: 0; padding-bottom: 0;}
	.cbp-spmenu-left {right: -100%;}
}