@media only screen and (max-width: 1400px) {
    
}

@media only screen and (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
	}
	.modal-dialog {
		max-width: 690px;
		margin: 1.75rem auto;
	}
}

@media only screen and (max-width: 1199px) {
	header {
		padding: 24px 0;
	}
    .nav-btn {
        margin-left: 0;
    }
	.explore-ux-design .main {
		width: 80%;
	}
	.design-card-lg{
		width: 436px;
		height:420px;
		background-size:contain!important
	}
	
	.design-card-lg .card-body{
		padding:40px
	}
	.design-card-lg .topic{
	font-size:1.4rem;
	}
	.design-card-lg .topic:after{
		width: 130px;
		bottom: -20px;
	}
	.design-card-lg .date{
		margin-top: 28px;
		font-size: 1rem;
	}
	.design-card-lg .heading{
		font-size: 3rem;
		line-height: 3.3rem;
		margin-top: 0px;
		flex: 1;
	}
	.design-card-lg .description{
		font-size: 1.3rem;
		line-height: 1.4rem;
		margin-top: 12px;
		width: 77%;
	}
	.design-card-lg .social-contr {
		margin-top: 25px;
	}
	.design-card-lg .social-contr li a img{
		Width:30px
	} 
       
}

@media only screen and (min-width: 992px) {

}

@media only screen and (max-width: 991px) {
	.logo {
		width: 300px;
	}
	.navbar-brand{
		padding-top:0;
		padding-bottom:0;
		margin-top:0
	}
	.navbar-brand .logo img {
		padding-left: 12px;
	}
    .dropdown-toggle::after {
        margin-top: 10px;
        margin-right: 6px;
        float: right;
    }
    .navbar-light .navbar-toggler {
        border: none;
        color: white;
        padding: 0;
        font-size: 25px;
    }
	
    .navbar-toggler:focus {
        border: none;
        outline: none;
    }
    .nav-btn,
    .navbar-custom > li > a:before {
        display: none;
    }
    .navbar-collapse > ul {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .main-nav {
        padding: 5px 15px;
	}
	.design-card-lg{
		width: 257px;
		height:248px;
		background-size:contain!important
	}
	
	.design-card-lg .card-body{
		padding:20px
	}
	.design-card-lg .topic{
	font-size:.8rem;
	}
	.design-card-lg .topic:after{
		width: 74px;
		bottom: -5px;
	}
	.design-card-lg .date{
		margin-top: 7px;
		font-size: .7rem;
	}
	.design-card-lg .heading{
		font-size: 1.7rem;
		line-height: 1.8rem;
		margin-top: 0px;
		flex: 1;
	}
	.design-card-lg .description{
		font-size: .8rem;
		line-height: 1rem;
		margin-top: 12px;
		width: 77%;
	}
	.design-card-lg .social-contr {
		margin-top: 10px;
	}
	.design-card-lg .social-contr li a img{
		Width:20px
	} 
    	
}


@media only screen and (max-width: 767px) {
	body{
		font-size:18px
	}
	p{
		line-height: 1.8rem;
	}
	.navbar-brand .logo img {
		padding-left: 6px;
	}
	.logo {
        width:240px;
    }
	.header-right{
		top: -35px;
	}
	.header-right .input-group{
		width:120px;
		float: right;
	}
	.home-top-section{
		padding-bottom:0
	}
	.home-top-section .left-panel{
		font-size:2rem;
		line-height:2.5rem;
		padding:0px 15px 30px!important;
	}
	.home-top-section:after{
		background:transparent
	}
	.home-top-section .right-panel{
		background:var(--black);
		display: flex;
		align-items: center;
		flex-direction: column;
		padding:30px 15px!important;
	}
	.container{
		padding-left:15px;
		padding-right:15px;
	}
	.row{
		margin-right: -15px;
		margin-left: -15px;
	}
	.col-12{
		padding:0px 15px!important
	}
	.card-outer .col-12{
		padding:0!important
	}
	.for-desktop{
		display:none
	}	
	.for-mobile{
		display:block
	}	
	h1, heading1{
		font-size:var(--lg);
	}
	h2, heading2{
		font-size:var(--md);
	}
	h3, heading3{
		font-size:var(--sm);
	}
	h4, heading4{
		font-size:var(--xs);
	}
	
    .design-card-lg{
		width: 257px;
		height:248px;
		background-size:contain!important
	}
	
	.design-card-lg .card-body{
		padding:20px
	}
	.design-card-lg .topic{
	font-size:.8rem;
	}
	.design-card-lg .topic:after{
		width: 74px;
		bottom: -5px;
	}
	.design-card-lg .date{
		margin-top: 7px;
		font-size: .7rem;
	}
	.design-card-lg .heading{
		font-size: 1.7rem;
		line-height: 1.8rem;
		margin-top: 0px;
		flex: 1;
	}
	.design-card-lg .description{
		font-size: .8rem;
		line-height: 1rem;
		margin-top: 12px;
		width: 90%;
	}
	.design-card-lg .social-contr {
		margin-top: 10px;
	}
	.design-card-lg .social-contr li a img{
		Width:14px
	}
	.quote-section .right-panel{
		background-position: 15px 40px!important;
		order:1;
		padding:30px 15px 0px 50px!important;
	}
	.share-work .main-work-contr .lead-text{
		line-height:2.0rem
	}
}

@media only screen and (max-width: 575px) {
	
    
   .logo {
        width:180px;
    }
    
	.header-right .input-group{
		width:60px;
		float: right;
	}
	
	.design-card-lg{
		width: 390px;
		height:376px;
		background-size:contain!important
	}
	.design-card-lg .card-body{
		padding:40px 20px
	}
	.design-card-lg .topic{
	font-size:1.1rem;
	}
	.design-card-lg .topic:after{
		width: 100px;
		bottom:-8px;
	}
	.design-card-lg .date{
		margin-top:18px;
		font-size:.8rem;
	}
	.design-card-lg .heading{
		font-size:2.8rem;
		line-height:2.8rem;
		margin-top:5px;
	}
	.design-card-lg .description{
		font-size: 1.3rem;
		line-height: 1.3rem;
		margin-top:20px
	}
	.design-card-lg .social-contr {
		margin-top: 30px;
	}
	.design-card-lg .social-contr li a img{
		Width:20px
	}
	.share-step{
		flex-direction:column
	}
	.share-step dt {
		margin-right:0px;
		width:100%
	}
	.share-step dt + dt{
		margin-top:70px;
	}
	article .bold-txt{
		flex-direction:column;
	}
	article .img-contr {
		width: 300px;
		padding: 0;
		margin: 0 auto 20px;
	}
	.para-img-with-text{
	flex-direction:column
}
}


@media screen and (max-width:420px) {
	/*.logo {
		width: 110px;
	}*/
	.navbar-toggler{
		width:37px;
	}
	.header-right{
		font-size:11px;
		right:-10px;
	}
	.header-right .img-contr{
		margin-right: 3px;
		margin-left: 2px;
		top:0
	}
	.header-right .img-contr img{
		width:20px!important
	}
	/*.navbar-brand {
		left: 62px;
	}*/
	.design-card-lg{
		width: 330px;
		height:320px;
		background-size:contain!important
	}
	.design-card-lg .card-body{
		padding:30px 20px
	}
	.design-card-lg .topic{
	font-size:1.1rem;
	}
	.design-card-lg .topic:after{
		width: 100px;
		bottom:0;
	}
	.design-card-lg .date{
		margin-top:5px;
		font-size:.8rem;
	}
	.design-card-lg .heading{
		font-size:2rem;
		line-height:2.2rem;
		margin-top:0px;
	}
	.design-card-lg .description{
		font-size:1.2rem;
		line-height:1.2rem;
	}
	.design-card-lg .social-contr {
		margin-top: 20px;
	}
	.design-card-lg .social-contr li a img{
		Width:20px
	}
	.explore-ux-design .card-outer{
		margin-top:0
	}
	.explore-ux-design .card-inner {
		margin-top: 0;
	}
	.explore-ux-design .card-inner + .card-inner{
		margin-top: 30px;
	}
}

@media screen and (max-width:360px) and (max-width:419px){
    
}