/* Template Name: DCode - Saas & Software Landing Page Templates
   Author: SacredThemes
   Author URL: https://sacredthemes.net
   Created: August 2020
   Version: 1.2
   File Description: Main Css file of the template
*/
/*----------------------------------------------*
	CSS Index
/*----------------------------------------------*
01.) Variables
02.) General              
03.) Header
04.) Page Layouts
05.) Responsive
/-------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500;1,700;1,800&display=swap');
/*----------------------------------------------*
01.) Variable CSS
/*----------------------------------------------*/
:root {
 --body-text-color:#3f3f3f;
 --heading-text-color:#111111;
 --menu-link-color:#111111;
 --white-color:#ffffff;
 --very-light-gray:#f2f2f2;
 --light-gray:#ebebeb;
 --success:#28a745;
 --success-bg:#d4edda;
 --info:#17a2b8;
 --info-bg:#cce5ff;
 --warning:#ffc107;
 --warning-bg:#fff3cd;
 --danger:#dc3545;
 --danger-bg:#f8d7da;
}
/*----------------------------------------------*
02.) General CSS
/*----------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0
}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
	-webkit-text-size-adjust:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display:block;
	clear:both;
}
html {
	font-family: 'Microsoft YaHei',"Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; 
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	font-size: 62.5%;
}
body {
	font-size:16px;
	line-height:1.5; 
	overflow-x: hidden;
	min-width:320px; 
	/*-webkit-overflow-scrolling: touch;*/
	color:var(--body-text-color);
	background:#ffffff;
	font-family: 'Lato', sans-serif;
}
a {
	background:transparent; 
	text-decoration:none; 
	-webkit-tap-highlight-color:transparent; 
	color:#2a1fbc;
}
a:active {
	outline: 0;
}
a:active, a:hover, a:focus {
	color:var(--menu-link-color);
	text-decoration:none; 
}
b, strong{
	font-weight:bold; 
}
audio, canvas, progress, video {
	display:inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
svg:not(:root){
	overflow: hidden;
}
hr {-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;}
pre{
	overflow: auto;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap:break-word;
}
code, kbd, pre, samp{
	font-family: monospace; 
	font-size: 1rem
}
mark{
	background:#ff0; 
	color:#111111;}
table {
	border-collapse:collapse; 
	border-spacing: 0;
}
td, th {
	padding:0;
}
ul, ol{
	list-style: none outside none;
}
img{
	vertical-align:middle;
	border:0;
	max-width:100%; 
}
*, ::after, ::before {
	-webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
	line-height:1.2;  
}
h1, .h1{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:48px;
	font-weight:bold;
	color:var(--heading-text-color);
	letter-spacing:-1px;
	margin-bottom:18px; 
}
h2,.h2{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:42px;
	font-weight:bold;
	color:var(--heading-text-color);
	letter-spacing:-1px;
	margin-bottom:18px;
}
h3,.h3{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:36px;
	font-weight:bold;
	color:var(--heading-text-color);
	letter-spacing:-0.6px;
	margin-bottom:18px;
}
h4,.h4{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:32px;
	font-weight:bold;
	color:var(--heading-text-color);
	letter-spacing:-0.4px;
	margin-bottom:18px;
}
h5,.h5{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:24px;
	font-weight:600;
	color:var(--heading-text-color);
	letter-spacing:0px;
}
h6,.h6{
	font-family: 'Lato', sans-serif;
	font-size:18px;
	font-weight:normal;
	color:var(--heading-text-color);
}

p:not(:empty){
	margin-bottom:18px; 
}
.heading-fonts{
	font-family: 'Source Sans Pro', sans-serif;
}
.special-fonts{
	font-family:'Alegreya', serif;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #ffffff, #ffffff);
    z-index: 9999999;
}
#preloader #status {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#preloader #status .d-loader{
	width: 90px;
	height: 90px;
	position: relative;
	margin: 100px auto;
}
.container{
	max-width: 1200px;
}
.container-fluid{
	padding-left:60px;
	padding-right:60px; 
}
.overflow-hidden{
	overflow:hidden !important; 
}
.btn{
	font-size:14px;
	letter-spacing:1px;
	text-transform:uppercase;
	font-weight:800;
	padding:0px 30px;
	line-height:48px;
	-webkit-border-radius:6px;
	border-radius:6px;
	cursor:pointer;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s  ease;
}
.btn-large{
	font-size:16px;
	line-height:56px;
	min-width:270px; 
}
.btn-primary:hover, .btn-primary:focus{
	background-position:bottom center;
}
.btn-outline-primary{
	line-height:44px; 
}
.btn-outline-primary.btn-large{
	line-height:52px;  
}
.style-dark{
	color:var(--white-color) !important;
}
.style-dark a{
	color:var(--white-color);	
}
.style-dark h1, .style-dark h2, .style-dark h3, .style-dark h4, .style-dark h5{
	color:var(--white-color) !important;	
}
.empty-space-10{
	height:10px; 
}
.empty-space-20{
	height:20px; 
}
.empty-space-30{
	height:30px; 
}
.empty-space-40{
	height:40px; 
}
.empty-space-50{
	height:50px; 
}
.empty-space-60{
	height:60px; 
}
.empty-space-80{
	height:80px; 
}
.empty-space-100{
	height:100px; 
}
.pt-10{
	padding-top:10px; 
}
.pt-15{
	padding-top:15px; 
}
.pt-30{
	padding-top:30px; 
}
.pt-40{
	padding-top:40px; 
}
.pt-50{
	padding-top:50px; 
}
.pt-60{
	padding-top:60px; 
}
.pt-80{
	padding-top:80px; 
}
.pt-90{
	padding-top:100px; 
}
.pt-100{
	padding-top:100px; 
}
.pb-10{
	padding-bottom:10px; 
}
.pb-15{
	padding-bottom:15px; 
}
.pb-30{
	padding-bottom:30px; 
}
.pb-40{
	padding-bottom:40px; 
}
.pb-50{
	padding-bottom:50px; 
}
.pb-60{
	padding-bottom:60px; 
}
.pb-80{
	padding-bottom:80px; 
}
.pb-90{
	padding-bottom:100px; 
}
.pb-100{
	padding-bottom:100px; 
}
.mt-10{
	margin-top:10px; 
}
.mt-15{
	margin-top:15px; 
}
.mt-30{
	margin-top:30px; 
}
.mt-40{
	margin-top:40px; 
}
.mt-50{
	margin-top:50px; 
}
.mt-60{
	margin-top:60px; 
}
.mt-80{
	margin-top:80px; 
}
.mt-90{
	margin-top:100px; 
}
.mt-100{
	margin-top:100px; 
}
.mb-10{
	margin-bottom:10px; 
}
.mb-15{
	margin-bottom:15px; 
}
.mb-30{
	margin-bottom:30px; 
}
.mb-40{
	margin-bottom:40px; 
}
.mb-50{
	margin-bottom:50px; 
}
.mb-60{
	margin-bottom:60px; 
}
.mb-80{
	margin-bottom:80px; 
}
.mb-90{
	margin-bottom:100px; 
}
.mb-100{
	margin-bottom:100px; 
}
/*----------------------------------------------*
03.) Header CSS
/*----------------------------------------------*/
#master-head{
    position:relative;
    right: 0;
    left: 0;
    top: 0;
    width:100%; 
    z-index: 1030;
    background-color: transparent;
    border: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    padding:0px;
}
#master-head.menu-absolute{
	position:absolute; 
}
#master-head.menu-fixed {
    background: #ffffff;
    -webkit-box-shadow: 0 4px 15px -10px rgba(0,0,0,.6);
    box-shadow: 0 4px 15px -10px rgba(0,0,0,.6);
    position: fixed;
    animation: slide-down 0.7s;
}
@keyframes slide-down {
	0% {
		opacity:0;
		transform:translateY(-100%);} 
	100%{
		opacity:1;
		transform: translateY(0);
	} 
}
.logo-container{
	padding:25px 0px 25px;
}
.menu-fixed .logo-container{
	padding:15px 0px 15px;	
}
.logo{
	display:block;
}
.logo img{
	max-height:50px;
}
.logo .logo-dark{
    display:inline-block;
}
.logo .logo-light{
    display:none;
}
.menu-light .logo-dark{
    display:none;
}
.menu-light .logo-light{
    display:inline-block;
}
.menu-fixed .logo-dark{
    display:inline-block;
}
.menu-fixed .logo-light{
    display:none;
}
.menu-toggle-btn{
	display:none;
	position:relative;
	transition:all 0.5s ease;  
	-webkit-transition:all 0.5s ease;  
}
#master-head .navbar-toggle {
    border: 0;
    position: relative;
    padding: 0;
    margin: 0;
    cursor: pointer;
    height: 3em;
	width: 3em;
	font-size: 12px;
	transition: all .2s;
	-webkit-tap-highlight-color: transparent;
	display: block;
}
.navbar-toggle .burger-lines {
    top: 50%;
    margin-top: -.125em;
}
.navbar-toggle .burger-lines, .navbar-toggle .burger-lines::after, .navbar-toggle .burger-lines::before {
    pointer-events: none;
    display: block;
    content: "";
    width: 100%;
    border-radius: .25em;
    background-color:var(--white-color);
    height: .25em;
    position: absolute;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.navbar-toggle .burger-lines, .navbar-toggle .burger-lines::after, .navbar-toggle .burger-lines::before {
    transition: top .2s .2s,left .1s,transform .2s,background-color .4s .2s;
}
.navbar-toggle .burger-lines::before {
    left: 1em;
    top: 1em;
}
.navbar-toggle .burger-lines::after {
    left: 0;
    top: -1em;
}
.navbar-toggle .burger-lines::after, .navbar-toggle .burger-lines::before {
    width: 2em;
}
.active .navbar-toggle .burger-lines, .active .navbar-toggle .burger-lines::after, .active .navbar-toggle .burger-lines::before {
    transition: background-color .2s,top .2s,left .2s,transform .2s .15s;
}
.active .navbar-toggle .burger-lines {
    background-color: initial;
}
.active .navbar-toggle .burger-lines::after, .active .navbar-toggle .burger-lines::before {
    left: .5em;
    top: 0;
}
.active .navbar-toggle .burger-lines::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.active .navbar-toggle .burger-lines::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#master-head.menu-fixed .navbar-toggle .burger-lines, #master-head.menu-fixed .navbar-toggle .burger-lines::after, #master-head.menu-fixed .navbar-toggle .burger-lines::before{
	background-color: var(--heading-text-color);
}
#master-head.menu-fixed .active .navbar-toggle .burger-lines{
	background-color: initial;
}
.menu-primary{
	display:inline-block; 
}
.menu-primary li.menu-item{
	display:inline-block;
	padding: 0px 10px;
	font-weight:600; 
}
.menu-primary li.menu-item a{
	display:block;
	font-size:17px;
	padding:0px 15px;
	color:var(--menu-link-color);
	-webkit-transition:all 0.4s ease; 
	transition:all 0.4s ease;
}
.menu-light .menu-primary li.menu-item a{
	color:var(--white-color);
}
.menu-light .menu-primary li.menu-item:hover > a, .menu-light .menu-primary li.menu-item.active > a{
	opacity:0.6;
	color:var(--white-color);
}
.menu-fixed .menu-primary li.menu-item a{
	color:var(--menu-link-color);
}
/*----------------------------------------------*
04.) Page Layouts
/*----------------------------------------------*/
.section-padding{
	padding:100px 0px; 
}
.page-header{
    display: flex;
    height: 100%;
    align-items: center;
}
.full-height{
	min-height:100vh; 
}
.heading-wrapper{
	margin-bottom:30px; 
}
.heading-wrapper span{
	font-family:'Alegreya', serif;
	font-style:italic; 
	letter-spacing:0; 
}
.style-dark .heading-wrapper span{
	color:#ffffff; 
}
.lead-text, .lead-text p{
	font-size:20px;
	line-height:1.6;  
}
.page-header .heading-wrapper span{
	display: block;

}
.intro-header-slider{
    max-width: 1170px;
    position: relative;
    margin: 60px auto -150px;
}
.intro-header-slider .laptop-img-bg {
    max-width: 100%;
    position: absolute;
    top:0;
    left:0;
    right:0;   
}
.intro-header-slider .intro-slider{
    position: relative;
	padding: 3.3% 11% 6% 11.8%;
	max-width: 1200px;
	width: 100%;
	margin: auto;
	display: block;
}
.heading-wrapper.with-separate h1:after, 
.heading-wrapper.with-separate h2:after,
.heading-wrapper.with-separate h3:after{
	height:6px;
	width:60px;  
	content:"";
	display:block;
	margin-top:18px; 
}
.heading-wrapper.with-separate.text-center h1:after, 
.heading-wrapper.with-separate.text-center h2:after,
.heading-wrapper.with-separate.text-center h3:after{
	display:table; 
	margin-left:auto; 
	margin-right:auto; 
}
.text-wrapper{
	margin-bottom:30px; 
}
ul.support-details li{
	margin:8px 0px;
	display:block;
	font-size:18px; 
}
ul.support-details li strong{
	color:var(--heading-text-color);
}
.rounded-6{
	border-radius:6px !important;
}
.rounded-8{
	border-radius:8px !important;
}
.key-feature{
	text-align:center;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
	padding:30px;
	border:1px solid var(--light-gray);
	-webkit-transition:all 300ms ease; 
	transition:all 300ms ease;
	cursor: pointer;
}
.key-feature:hover{
	-webkit-box-shadow: 0px 0px 20px 0px rgba(42, 31, 188, 0.3);
	box-shadow: 0px 0px 20px 0px rgba(42, 31, 188, 0.3);
}
.key-feature .icon{
	height:90px;
	width:90px;
	line-height:90px;
	border-radius:50%;
	font-size:48px;
	margin:0px auto 15px;
}
.key-feature .content .title {
    font-size: 18px;
}
.main-footer{
	padding:100px 0px;
	background-size:cover;
	background-position:top center;   
}
.social-media-links ul{
	margin:0px;
	padding:0px;  
}
.social-media-links li{
	padding:0;
	margin:0 2px;
	display:inline-block;   
}
.social-media-links li a{
	line-height:46px;
	width:48px;
	height:48px;
	display:block;
	font-size:24px;
	-webkit-border-radius:6px;
	border-radius:6px; 
}
.style-dark .social-media-links li a{
	border:1px solid rgba(255,255,255,0.2);
	position:relative;
	overflow:hidden;  
}
.style-dark .social-media-links li a:before{
	background:rgba(255,255,255,0.1);
	width: 100%;
	height: 100%;
	left:0; 
	content:"";
	position:absolute; 
	-webkit-transition:all 0.5s ease; 
	transition:all 0.5s ease;
	-webkit-transform:translateY(100%); 
	transform:translateY(100%); 
}
.copyright-bar{
	padding:20px 0px;
	font-size:16px; 
}
.style-dark .social-media-links li:hover a:before{
	-webkit-transform:translateY(0); 
	transform:translateY(0); 
}
.demo-layout-listing .filters ul{
	margin:0;
	padding:0;
	width:100%;
	border-bottom:3px solid var(--light-gray);
	text-align:center;    
}
.demo-layout-listing .filters ul li{
	display:inline-block;
	padding:0px 10px;
	font-family:"Source Sans Pro", sans-serif;
	font-weight:700;
	font-size:20px;
	color:var(--heading-text-color);
}
.demo-layout-listing .filters li span{
	padding:15px 5px;
	display: block;
	cursor:pointer;
	position:relative; 
}
.demo-layout-listing .filters li span:after{
	height:3px;
	width:0;
	right:0;
	-webkit-transition:all 400ms ease;
	transition:all 400ms ease;
	position:absolute;
	top:100%;
	background:var(--heading-text-color);
	content:"";    
}
.demo-layout-listing .filters li:hover span:after, .demo-layout-listing .filters li.is-checked span:after{
	width:100%;
	left:0;
	right:auto; 
}
.layout-grid{
	display:flex;
	flex-wrap:wrap;
	margin:0px -15px;
	padding:15px 0px 0px;
	justify-content: center;
}
.layout-grid .grid-item{
	padding:0px 15px;
	flex:0 0 33.3334%;
	max-width:33.3334%;
	width:100%;
	-webkit-border-radius:8px;
	border-radius:8px;
}
.layout-item{
	position:relative;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
	margin:15px 0px;
	overflow: hidden;
	cursor:pointer;
	-webkit-border-radius:8px;
	border-radius:8px; 
	-webkit-transition:all 0.5s ease-in-out;   
	transition:all 0.5s ease-in-out;
}
.layout-item img{
	-webkit-border-radius:8px;
	border-radius:8px;
	width:100%; 
}
.layout-item .hover-wrapper{
	display:flex;
	position:absolute;
	top:-1px;
	bottom:0;
	left:-1px;
	right:-1px;
	background:rgba(255,255,255,0.95);
	-webkit-transition:all 0.5s ease-in-out;   
	transition:all 0.5s ease-in-out;
	flex-wrap: wrap;
	align-content: center;
	padding: 30px;
	text-align: center;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-border-radius:8px;
	border-radius:8px;
}
.layout-item:hover .hover-wrapper{
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.layout-item .hover-wrapper h3{
	font-weight:700;
	margin-bottom:30px;
	text-align:center;
	width:100%;    
}
.layout-item + h3{
	font-weight:700;
	margin-bottom:30px;
	text-align:center;
	width:100%;
}
.layout-item .btn-wrapper .btn + .btn{
	margin-top:14px; 
}
.news-badge{
	background:url("../images/new-badge-icon.png") no-repeat scroll 0px 0px;
	height: 46px;
	width: 80px;
	position: absolute;
	top: 23px;
	left: -2px;
	background-size: cover;
	z-index:1;  
}
.page-wrapper{
	position:relative; 
}
#master-head:before{
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	right: 0;
	content: "";
	display: block;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	bottom: 0;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.5s ease;   
	transition:all 0.5s ease;   
}
.navigation-in #master-head:before{
	opacity:1;
	visibility:visible; 
}
#navigation .close-btn{
	height:32px;
	width:32px;
	position:absolute;
	left:30px;
	top:30px; 
	cursor:pointer; 
}
#navigation .close-btn:before, #navigation .close-btn:after{
	height:3px;
	width:32px;
	transform:rotate(45deg);   
	-webkit-transform:rotate(45deg);
	content:"";
	display: block;
	background: var(--heading-text-color);
	border-radius: 4px;
	top:15px;
	position: absolute;
}
#navigation .close-btn:after{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
/*----------------------------------------------*
05.) Responsive
/*----------------------------------------------*/
@media only screen and (max-width:1439px) {
	.container-fluid{padding-left:30px; padding-right:30px;}
	.intro-header-slider{margin: 60px auto -120px;}
}
@media only screen and (max-width:1365px) {
	
}
@media only screen and (max-width:1279px) {

}
@media only screen and (max-width:1199px) {
	.container-fluid{padding-left:15px; padding-right:15px;}
	.menu-primary > li.menu-item > a{padding: 0px 5px;}
	.container{max-width: 960px;}
	h1, .h1{font-size: 42px;}
	h2, .h2{font-size: 38px;}
	.key-feature{padding: 30px 15px;}
}
@media only screen and (max-width:991px) {
	.container{max-width:720px;}
	.i-text-center{text-align:center !important;}
	.layout-grid .grid-item{flex: 0 0 50%; max-width: 50%;}
	.menu-toggle-btn{display:block;}
	#navigation {background:#fff; position:fixed; right:0; top:0;-webkit-box-shadow: -20px 0px 20px 0px rgba(0, 0, 0, 0.1);
		box-shadow: -20px 0px 20px 0px rgba(0, 0, 0, 0.1);height:100vh; overflow:auto; z-index:1;
		width: 100%; max-width: 360px; display: block; padding:80px 0 30px; transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out; transform: translateX(120%);}
	#navigation .menu-primary{padding:15px 0px 30px; width:100%; margin:auto;}
	.menu-primary li.menu-item{display:block; padding:0px 0px; border-bottom:1px solid rgba(0,0,0,0.06); }
	.menu-light .menu-primary li.menu-item a{color: var(--heading-text-color); padding:12px 30px;}
	.menu-light .menu-primary li.menu-item:hover > a, .menu-light .menu-primary li.menu-item.active > a {opacity: 0.6;
    color: var(--heading-text-color);}
	#navigation .navbar-right{padding:0px 30px 30px;}
	#navigation.open{opacity: 1; visibility: visible; -webkit-transform:translateX(0); transform:translateX(0); z-index: 1;}
	body.navigation-in{overflow:hidden !important;}
	body.navigation-in .page-wrapper{filter: blur(5px);}
	.i-hidden{display:none !important; }
	
}
@media only screen and (max-width:767px) {
	.m-text-center{text-align:center !important;}
	.container{max-width:540px;}
	h1, .h1{font-size:36px;}
	h2, .h2{font-size:32px;}
	h3, .h3{font-size:30px;}
	h4, .h4{font-size:26px;}
	.layout-grid .grid-item{flex: 0 0 100%; max-width: 100%;}
	.layout-item {max-width:400px; margin: 15px auto;}
	.intro-header-slider{margin: 60px auto -75px;}
	.page-header{min-height:90vh;}
	.heading-wrapper br{display: none;}
	.page-header .heading-wrapper span{display: inline;}
	.m-hidden{display:none !important; }
}
@media only screen and (max-width:575px) {

}