/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

	.title{
		display: block;
	    font-size: 26px;
	}
}

/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

	.title{
    	font-size: 8px;
    }
    .login-container{
    	height: auto;
    }
}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {
    html,body{
        overflow:visible!important;
        -webkit-overflow-scrolling: touch;
    }
    body{
         -webkit-user-drag: auto;
         touch-action:auto
    }
    

	/* h1 font size home slider */
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 18px;
    	text-align: center;
    	color: teal;
    }
    
    h3 {
        font-size: 16px;
    	text-align: center;
    	color: teal;
    }
    .page-component .presentation .header .title{
    	font-size: 16px;
    }
    .page-component .presentation .header .subtitle, accueil .introduction {
		display: block;
	    font-size: 12px;
	}
	.title{
		display: block;
	    font-size: 14px;
	    color:teal;
	    padding-bottom:5px;
	}
	span{
		font-size: 12px;
	}
	
	.body .box .content .title{
		display: block;
	    color: teal;
	    font-weight: 700;
	    font-size: 12px;
	}
	
	.title1 .content .title {
	    display: block;
	    color: teal;
	    font-weight: 600;
	    font-size: 14px;
	}
	.title1 {
    height: 45px;
    margin: 0px 20px 20px 0px;
    background: #fff;
    width: 100%;
}
	
	.md-display-2 {
	    font-size: x-large;
	    font-weight: 400;
	    line-height: 64px;
	}
	
	p{
		font-size:small;
	}

	code {
	    padding: unset;
	    font-size: x-small;
	    color: #c7254e;
	    background-color: #f9f2f4;
	    border-radius: 4px;
	}
	pre{
		font-size: xx-small;
	}
	.layout-xs-column>.flex{
		min-height:unset; 
		height:fit-content;
	}
	.md-dialog-content{
		font-size:unset;
	}
	.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
		max-width:30%;
	}
}



/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	html,body{
		overflow:visible!important;
        -webkit-overflow-scrolling: touch;
	}
	body{
		 -webkit-user-drag: auto;
    	 touch-action:auto
    }
    .page-component .presentation .header  .title{
    	display: block;
    	font-size: 16px;
    }
}