/*
Theme Name: the7dtchild
Author: 
Author URI: 
Template: dt-the7
*/

/* TABLE DES MATIÈRES
  01 - Variables
  02 - Fonts
  03 - General responsive
  04 - Header
  05 - Footer
  06 - Animations
  07 - General
  ---> CSS relatif au site web
*/

/****************************************
 01 - VARIABLES
****************************************/

:root {
  --font-general: 'Roboto', sans-serif;
  --font-accent: 'Roboto Condensed', sans-serif;
}

/****************************************
 02 - FONTS
****************************************/
h1:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
h2:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
h3:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
h4:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
h5:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
h6:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
p:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
a:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
span:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
blockquote:not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p *, a *, span *, blockquote *),
.dt-fancy-title,
.masthead .menu-item .menu-text,
.dt-mobile-header .menu-item .menu-text {
  transition: font-size .3s ease;
  /* transition: all .3s linear; */
}

p, blockquote, label {
	font-family: var(--font-general);
	font-size: 16px;
	line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-accent);
}

h1, h1.h1, .h1, h1 span {
  font-size: 36px;
  line-height: 44px: 
}

h2, h2.h2, .h2, h2 span{
  font-size: 30px;
  line-height: 1.2;
}

h3, h3.h3, .h3, h3 span {
  font-size: 24px;
  line-height: 1.2;
}

h4, h4.h4, .h4, h4 span {
  font-size: 20px;
  line-height: 28px!important;
}

h5, h5.h5, .h5, h5 span {
  font-size: 18px;
  line-height: 24px;
}

h6, h6.h6, .h6, h6 span {
  font-size: 16px;
  line-height: 24px;
}

@media (min-width:767px) {
	p, blockquote, label {
	  font-size: 18px;
	  line-height: 28px;
	}
	
	h1, h1.h1, .h1, h1 span {
	  font-size: 62px;
	  line-height 68px: 
	}

	h2, h2.h2, .h2, h2 span {
	  font-size: 46px;
	  line-height: 1.1;
	}

	h3, h3.h3, .h3, h3 span {
	  font-size: 36px;
	  line-height: 1.2;
	}

	h4, h4.h4, .h4, h4 span {
	  font-size: 30px;
	  line-height: 1.2!important;
	}

	h5, h5.h5, .h5, h5 span {
	  font-size: 22px;
	  line-height: 24px;
	}

	h6, h6.h6, .h6, h6 span {
	  font-size: 18px;
	  line-height: 24px;
	}
}

/* Text align */
.text-center,
.h1.text-center,
.h2.text-center,
.h3.text-center,
.h4.text-center,
.h5.text-center,
.h6.text-center{
  text-align: center;
}

.text-left,
.h1.text-left,
.h2.text-left,
.h3.text-left,
.h4.text-left,
.h5.text-left,
.h6.text-left{
  text-align: left;
}

.text-right,
.h1.text-right,
.h2.text-right,
.h3.text-right,
.h4.text-right,
.h5.text-right,
.h6.text-right{
  text-align: right;
}

.text-uppercase,
.h1.text-uppercase,
.h2.text-uppercase,
.h3.text-uppercase,
.h4.text-uppercase,
.h5.text-uppercase,
.h6.text-uppercase{
	text-transform: uppercase;
}

/* Font weight */
.text-light,
.h1.text-light,
.h2.text-light,
.h3.text-light,
.h4.text-light,
.h5.text-light,
.h6.text-light{
	font-weight: 300;
}

.text-regular,
.h1.text-regular,
.h2.text-regular,
.h3.text-regular,
.h4.text-regular,
.h5.text-regular,
.h6.text-regular{
	font-weight: 400;
}

.text-semibold,
.h1.text-semibold,
.h2.text-semibold,
.h3.text-semibold,
.h4.text-semibold,
.h5.text-semibold,
.h6.text-semibold{
	font-weight: 500;
}

.text-bold,
.h1.text-bold,
.h2.text-bold,
.h3.text-bold,
.h4.text-bold,
.h5.text-bold,
.h6.text-bold{
	font-weight: 700;
}

/* Font color */
.text-white,
.h1.text-white,
.h2.text-white,
.h3.text-white,
.h4.text-white,
.h5.text-white,
.h6.text-white{
	color: white;
}

.text-color-primary{
	color: var(--color-primary);
}

.text-color-secondary{
	color: var(--color-secondary);
}

/****************************************
 03 - GENERAL RESPONSIVE
****************************************/
/*desktop*/
@media screen and (min-width: 992px){
	.hide-desktop{
		display: none;
	}

	.hide-tablet{
		display: block;
	}

	.hide-mobile{
		display: block;
	}

  .tablet-desktop-1 {
    order: 1;
  }

  .tablet-desktop-2 {
    order: 2;
  }
}

/*tablet*/
@media screen and (min-width: 769px) and (max-width: 991px){
	.hide-desktop{
		display: block;
	}

	.hide-tablet{
		display: none;
	}

	.hide-mobile{
		display: block;
	}

  .tablet-order-1 {
    order: 1;
  }

  .tablet-order-2 {
    order: 2;
  }
}

/*mobile*/
@media screen and (max-width: 768px){
	.hide-desktop{
		display: block;
	}

	.hide-tablet{
		display: block;
	}

	.hide-mobile{
		display: none;
	}

  .mobile-order-1 {
    order: 1;
  }
  .mobile-order-2 {
    order: 2;
  }

  .text-mobile-center,
  .h1.text-mobile-center,
  .h2.text-mobile-center,
  .h3.text-mobile-center,
  .h4.text-mobile-center,
  .h5.text-mobile-center,
  .h6.text-mobile-center{
    text-align: center;
  }
}

/****************************************
 04 - HEADER
****************************************/
.branding a img, .branding img{
	max-width: 150px;
}

.sticky-on .branding a img, .sticky-on .branding img{
	max-width: 110px;
}

.mobile-branding,
.mobile-branding a img{
	max-height: 60px;
	width: auto;
}

/****************************************
 05 - FOOTER
****************************************/
footer #branding-bottom{
	display: none;
}

/****************************************
 06 - ANIMATIONS
****************************************/

/****************************************
 07 - GENERAL
****************************************/
/* Temporary hide a section of the 
website for development purpose */
.hide-section{
	display: none;
}