/***********************************************************************************************/
/*  Responsive/adaptive stuff */
/***********************************************************************************************/

/** UNDER 1200**/
@media only screen and (max-width: 1050px) {

header {
	padding: 1.5rem 0;
}
.header-wrapper {
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.menu {
	width: 100% !important;
	display: none;
}
.menu-area{
    display: block;
}
.menu-area {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 8.5rem;
}
#header.not-transparent, .white-header {
	padding: 0rem .5rem;
}
#header.not-transparent .menu ul li:last-child a, .white-header .menu ul li:last-child a {
	display: none;
}
.menu ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column;
	        flex-flow: column;
	padding: 5rem 0;
	padding-bottom: 0;
}
.menu ul li {
	padding: 0 1.5rem;
	margin-bottom: 3rem;
}
.menu ul li:last-child {
	margin-bottom: 0rem;
}
.menu ul::before {
	content: "";
	height: .5rem;
	width: 100%;
	position: absolute;
	background: none;
	top: 80px;
	left: 0;
	-webkit-box-shadow: 0 4px 5px -2px gray;
	        box-shadow: 0 4px 5px -2px gray;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	opacity: 0;
}
.white-header .menu ul::before {
	opacity: 1;
}

.white-header .menu .socials-icons {
	display: block ;
	margin-top: 0;
	text-align: center;
	padding: 0 !important;
	padding-bottom: 5rem !important;
}
.white-header .menu ul.socials-icons li:last-child a{
	display: block !important;
	background: none !important;
	color: #646770 !important;
	padding: 0;
	border: none;
}
.white-header .menu ul.socials-icons li:last-child a:hover{
	color: #359af9 !important;
}
.white-header .menu ul.socials-icons li a {
	font-size: 2.5rem !important;
	padding: 0;
}
.white-header .menu ul.socials-icons li a:before {
	display: none;
}
.white-header .socials-icons li {
	margin: 0;
	padding: .5rem;
}
.fridge-header {
	height: 100vh;
	overflow: scroll;
	z-index: 1111;
}


.menu ul.socials-icons li:last-child a::after{
	display: none;
}

}


/** UNDER 991**/
@media only screen and (max-width: 991px) {
.we-do-item {
	width: 50%;
	margin: 2rem 0;
}
.we-do-item:nth-child(3n) {
	border-left: 1px solid #EEEEEE;
}
.blog-section-item-hover h4 {
	font-size: 1.6rem;
}
.portfolio-page .larg-title {
	font-size: 5.2rem;
}


}


/* ALL MOBILE DEVICE*/
@media only screen and (max-width: 767px) {
.banner-wrapper {
	text-align: center;
	padding: 4rem 2rem 0;
        z-index: 1;
}
h1, h1 > span {
	font-size: 2.4rem;
	font-weight: 900;
	margin: 0;
	line-height: 1.4;
	letter-spacing: .2rem;
	word-spacing: .2rem;
	text-transform: uppercase;
}	

.banner-wrapper span {
	font-size: 1.2rem;
	width: 25rem;
	margin: 2rem auto;
}
.scroll-btm.scroll {
	display: none;
}
.we-do-item {
	width: 100%;
	border: 1px solid #EEEEEE;
}
.we-do-item {
	padding: 2rem 2rem;
}
.we-do-item ul {
	margin-top: 2rem;
}
.we-do-item p {
	margin-bottom: .5rem;
}
.we-do-section {
	padding: 5rem 0;
}
h2 {
	font-size: 2rem;
}
.we-do-wrapper {
	margin-top: 2rem;
	margin-bottom: 3rem;
}
.why-us-section {
	padding: 5rem 0;
}
h2 .gray {
	display: block;
	margin: 0;
}
.title-text p {
	font-size: 1.4rem;
	letter-spacing: 1px;
	margin-bottom: 1.2rem;
}
.larg-title {
	font-size: 4rem;
	letter-spacing: 5px;
	line-height: 1;
	margin-bottom: 3rem;
}
.core-calues {
	margin-top: 5rem;
}
h6 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	line-height: 1.6;
}
.our-tech {
	display: none;
}
.look-inside-section {
	margin-bottom: 2rem;
}
.center-title {
	padding: 4rem 1.5rem;
	width: 100%;
}
.our-work-section-item {
	width: 100%;
	margin-bottom: 2rem;
}

.our-work-section .btn-holder {
	padding: 3rem 0rem 0;
}
.our-clients-section {
	padding: 5rem 0 0;
}
.our-clients-section {
	padding: 5rem 0 0;
}
.they-trust {
	margin: 5rem 0;
}
.testimonial-item p {
	font-size: 1.8rem;
}
.testimonial-item {
	width: 90%;
}
.owl-next {
	background: url(../img/right-arrow.png) no-repeat right center / 15px;
}
.owl-prev {
	background: url(../img/left-arrow.png) no-repeat left center / 15px;
}
.blog-section {
	padding: 5rem 0;
}
.testimonials-carousel {
	margin-bottom: 0rem;
}
.blog-section {
	padding: 0rem 0;
	border-top: 1px solid #eee;
	margin-top: 7rem;
	margin-bottom: 5rem;
}
.blog-section-item {
	width: 100%;
	margin-bottom: 2.5rem;
}
.blog-section-item-hover {
	padding: 1.5rem;
}
.blog-section-item-hover h4 {
	font-size: 1.5rem;
	line-height: 1.4;
}
.blog-section-item-hover h4 a {
	line-height: 1.4;
}
.blog-section-item-wrapper {
	margin-bottom: 3rem;
}


footer > .container {
	padding: 0;
}
footer > .container .row{
	margin:0;
}
.footer-top {
	padding: 5rem 0 4.5rem 0;
	margin-top: 3rem;
}
.footer-top a {
	margin-bottom: 1.5rem;
}
.footer-bottom {
	padding: 2.5rem 0 5rem 0;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column;
	        flex-flow: column;
}
.footer-bottom input[type="email"] {
	min-width: 100%;
}


.footer-form {
	justify-content: center;
}
#mc_embed_signup {
	max-width: 90%;
	overflow: hidden;
}
.footer-bottom .mc-field-group {
	min-width: 18rem;
}
.clear {
	font-size: 1.2rem;
}

.copy-right {
	text-align: center;
	-webkit-box-ordinal-group: 2;
	    -ms-flex-order: 1;
	        order: 1;
	margin-top: 2rem;
}
.copy-right span {
	display: block;
	margin-bottom: 0;
	margin-right: 1rem;
}
.copy-right img {
	height: 4rem;
}
.banner-wrapper h1 > span {
	font-size: 2.4rem;
}

.center-title {
	padding: 4rem 0;
}
.text-2 {
	line-height: 1.4;
	font-size: 1.4rem;
	letter-spacing: 2px;
}
.text-2:last-child {
	margin-bottom: 0;
}
.social-section {
	padding: 5rem 0;
}
.socials-icons li {
	margin: 0 1rem;
}
.socials-icons a {
	font-size: 30px;
}


.blog-page .blog-section {
	margin-top: 2rem;
	margin-bottom: 0rem;
}


.white-banner {
	height: auto !important;
	padding: 7rem 0 5rem 0;
}
.brand-item {
	width: 30%;
	margin: 1rem 0;
	height: 8rem;
}
.brand-item img{
	max-width: 100%;
}
.brand-item .cf {
	max-width: 8rem !important;
}
.brand-item .bw {
	max-width: 8rem !important;
}
.social-section {
	padding: 5rem 0 0;
}
.open-position-section {
	padding-bottom: 4rem;
}
dt span {
	font-size: 1.8rem;
	letter-spacing: 2px;
}
dt {
	padding: 1.5rem 1.5rem;
}
dd {
	margin-top: -1.5rem;
	padding: 1rem 3rem;
}
.position-item h6 {
	margin-bottom: .5rem;
}
#header.not-transparent, .white-header {
	-webkit-box-shadow: 0 2px 13px -5px rgba(0,0,0,.5);
	        box-shadow: 0 2px 13px -5px rgba(0,0,0,.5);
	z-index: 1111;
}

#large-header.small-banner .banner-wrapper {
	height: auto;
}
#large-header.small-banner {
	height: 50vh !important;
}
.contact-form {
	width: 85%;
}
label.material {
	font-size: 1.3rem;
}
.banner-wrapper.single-blog-banner h1 {
	width: 100%;
	letter-spacing: 3px;
}
.blog-article-section {
	padding-top: 5rem;
}
.post-by-details {
	margin-bottom: 3rem;
}
.blog-article-section article p {
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
}
.blog-article-section article img {
	margin: 1.5rem 0;
}
.field-result {
	width: 90%;
}
.fa.fa-pencil-square-o {
	right: 2rem;
	top: 1.5rem;
}
#large-header.small-banner {
	height: auto;
}
#large-header.small-banner {
	height: 80vh !important;
}
.start-project-section {
	padding: 5rem 0 5rem;
}
.single-field button {
	margin-top: 4rem;
}
.hlack-section-wrapper h4 {
	letter-spacing: 2px;
	font-size: 1.6rem;
	margin-top: 2rem;
}
.single-field label {
	font-size: 2rem;
	margin-bottom: 2rem;
}
.modal-dialog {
	width: 80%;
}
#header.not-transparent .logo-2, .white-header .logo-2 {
	height: 4.5rem;
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.copy-right img {
    margin-left: 0rem;
}
.copy-right {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: ;
	        flex-flow: ;
}
.portfolio-title-wrap {
	padding-top: 0;
}
.portfolio-summary {
	width: 25rem;
	margin: 0 auto 5rem;
	margin-top: -5rem;
	-webkit-box-shadow: 0 1px 10px 0 rgba(0,0,0,.2);
	        box-shadow: 0 1px 10px 0 rgba(0,0,0,.2);
}
.portfolio-page .text-2 {
	margin-bottom: 1.2rem;
}
.portfolio-details .title-text {
	padding: 0rem 0 !important;
}

.roek-list-title {
	font-size: 1.4rem;
}
.how-works-text {
	float: right;
}



.how-works-list::before {
	z-index: -111;
}
.how-works-list li:nth-child(2n+1) .how-works-text::after {
	display: none
}
.how-works-text::after{
	display: none;
	background: none;
}
.how-works-list li::before {
	display: none;
}
.how-works-text {
	width: 90%;
	padding: 2rem;
	float: none !important;
	margin: 0 auto;
}
.how-works-text p {
	font-size: 1.4rem;
	letter-spacing: 0px;
}
.how-works-list li {
	padding: 6rem 0 5rem 0;
}
.how-works-list li:last-child {
	padding: 2.2rem;
}
.single-result {
	border: 1px dashed #ddd;
}
.footer-bottom button {
	border-color: #EEEEEE;
	font-size: 1.2rem;
	padding: .5rem 1.5rem;
}
.empty-page {
	padding: 17rem 0 8rem 0;
}
.empty-page h1 span {
	font-size: 10rem;
}
.menu ul::before {
	top: 75px;
}
.thanks-page h1 span {
	font-size: 4rem;
}
.thanks-page {
	padding: 17rem 0 8rem 0;
}
.optopn-trigger {
    display: block;
}
.h2, .h2 > span {
    font-size: 2.4rem !important;
}
.single-result p {
	font-size: 1.6rem;
}
#demo-canvas {
	opacity: .1;
}
.h2 > span {
	display: inline-block;
	width: auto;
}


}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.how-works-text {
	width: 80%;
}	

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) 320*480  */
@media only screen and (max-width: 375px) {
.banner-btn .btn-bg {
	margin-bottom: 1rem;
	display: block;
	margin-right: 0;
}
.footer-bottom .mc-field-group {
	min-width: 50%;
}

}
@media only screen and (max-width: 579px) {
.menu-area .typ-btn {
	display: none !important;
}
#header.not-transparent .menu ul li:last-child a, .white-header .menu ul li:last-child a {
	display: block;
}
.white-header .menu .socials-icons {
	margin-top: 3rem;
}
header {
	padding: 0rem 0;
}
.menu-area {
	height: 8rem;
}
}